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

Catégorie	Contenu
Form themes	Thème shadcn complet (inputs, selects, checkboxes, labels, erreurs) + toggle password
Layouts HTML	sidebar, auth, auth_split
Composants Twig	Button, Badge, Alert, Toast, Dialog, SweetAlert, TableList, Dropdown, SearchBar, Pagination…
Stimulus controllers	sidebar, dropdown, dialog, dismiss, toggle-password, color-picker
Web components	<tom-select> (single + multi-select avec plugins)
CSS	TomSelect theming, Pickr overrides

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)