Référence des composants réutilisables du design system ISI-APP (Onyx + Bootstrap).
ISI-APP dispose d'une bibliothèque de composants Blade réutilisables regroupés sous deux namespaces : x-global.* pour les champs de formulaire courants, et x-livewire.form.* pour les selects avancés avec recherche. Ces composants standardisent l'apparence, gèrent automatiquement la validation et s'intègrent nativement avec Livewire via wire:model.
Ces composants sont disponibles dans toutes les vues Blade du projet. Aucun droit particulier n'est requis pour les utiliser.
x-global.input.*)Chaque composant accepte un label, un nom, une icône optionnelle et un binding Livewire (liveModel). La validation et l'affichage des erreurs sont gérés automatiquement.
| Composant | Usage |
|---|---|
x-global.input.text |
Champ texte standard |
x-global.input.email |
Champ email avec validation de format |
x-global.input.tel |
Numéro de téléphone |
x-global.input.url |
URL / site web |
x-global.input.number |
Nombre (avec min/max optionnels) |
x-global.input.date |
Sélecteur de date |
x-global.input.textarea |
Zone de texte multiligne |
x-global.input.select |
Liste déroulante simple |
x-global.input.file |
Sélection de fichier (avec filtres d'extension) |
x-livewire.form.*)Pour les listes longues ou nécessitant une recherche, trois composants Tom-Select sont disponibles :
| Composant | Usage |
|---|---|
select-single-tom |
Sélection unique avec recherche intégrée |
select-multiple-tom |
Sélection multiple avec recherche |
select-paginate-tom |
Sélection multiple avec chargement AJAX (grands jeux de données) |
| Composant | Usage |
|---|---|
x-global.alert |
Messages de succès, avertissement, danger ou info |
x-global.badge |
Étiquettes colorées (primary, success, danger, warning, info) |
| Boutons HTML | Classes Bootstrap : btn-primary, btn-sm, btn-lg |
| Spinner | Indicateur de chargement via .spinner-border |
| Composant | Usage |
|---|---|
| Cards Bootstrap | Sections avec en-tête et corps |
| Modals Livewire | Fenêtres contextuelles pour formulaires |
Onglets (nav-tabs) |
Navigation par onglets |
| Accordéons | Sections repliables |
Le projet utilise FontAwesome. Les icônes courantes : fas fa-user, fas fa-edit, fas fa-trash, fas fa-search, fas fa-plus, fas fa-download, fas fa-calendar, fas fa-building.
Les mises en page s'appuient sur la grille Bootstrap avec les breakpoints standards : col-sm-* (576px+), col-md-* (768px+), col-lg-* (992px+), col-xl-* (1200px+).
* dans le labelwire:model Livewire plutôt que des événements @change.claude/technical-docs/dev/ui-components-reference.md