README

Shared Twig components, form widgets, Stimulus controllers and HTML layouts for Symfony 8+ / Tailwind CSS 4 projects.

Basé sur shadcn/ui et CVA. Auto-configuré via SFUIToolboxExtension.

Ce que le bundle fournit

Installation

composer require appolodev/sf-ui-toolbox

Le bundle est auto-découvert. Aucune configuration manuelle n'est nécessaire.

Pour les assets JS, importer les controllers et web components dans votre bundle Stimulus :

import DialogController         from '../../../vendor/appolodev/sf-ui-toolbox/assets/js/controllers/dialog_controller.js'
import SidebarController        from '../../../vendor/appolodev/sf-ui-toolbox/assets/js/controllers/sidebar_controller.js'
import DismissController        from '../../../vendor/appolodev/sf-ui-toolbox/assets/js/controllers/dismiss_controller.js'
import DropdownController       from '../../../vendor/appolodev/sf-ui-toolbox/assets/js/controllers/dropdown_controller.js'
import TogglePasswordController from '../../../vendor/appolodev/sf-ui-toolbox/assets/js/controllers/toggle_password_controller.js'

app.register('dialog',          DialogController)
app.register('sidebar',         SidebarController)
app.register('dismiss',         DismissController)
app.register('dropdown',        DropdownController)
app.register('toggle-password', TogglePasswordController)

Utilisation rapide

Composants Twig

{# Bouton primary #}
<twig:SFUIToolbox:Generic:Button>Sauvegarder</twig:SFUIToolbox:Generic:Button>

{# Bouton outline small #}
<twig:SFUIToolbox:Generic:Button variant="outline" size="sm">Annuler</twig:SFUIToolbox:Generic:Button>

{# Badge statut #}
<twig:SFUIToolbox:Generic:Badge variant="green" label="Actif" />

{# En-tête de section #}
<twig:SFUIToolbox:Generic:SectionHeader
    icon="lucide:palette"
    title="Couleurs de marque"
    description="Palette de l'identité visuelle."
/>

Toggle Password

// Dans un FormType
$builder->add('password', PasswordType::class, ['toggle' => true]);

TableList

{% component 'SFUIToolbox:List:TableList' with {pagination: pagination} %}
    {% block table_items %}
        {% for item in pagination %}
            <tr><td>{{ item.name }}</td></tr>
        {% endfor %}
    {% endblock %}
{% endcomponent %}

Documentation complète

La documentation détaillée est dans le dossier docs/ :

• Installation & Configuration
• Pattern html_cva()
• Formulaires
  • Thèmes (shadcn + toggle_password)
  • Form Types & Extensions
• Composants
  • Layouts (sidebar, auth, auth_split)
  • Generics (Button, Badge, Alert, Dialog…)
  • List (TableList, ListEmpty)
  • Dropdown (DropdownMenu, DropdownItemContainer)
  • Form (FormSubmit)
• JavaScript
  • Stimulus Controllers
  • Web Components (tom-select)