Ressources

Conventions composants

Quatre familles, un arbre de décision pour savoir quoi créer (ou réutiliser), et les règles absolues — pour les humains comme pour une IA.

Étape 0 — Faut-il créer un composant ?

Avant de penser « famille », il faut décider s’il faut créer quelque chose. La plupart des besoins se résolvent sans nouveau GS*. Descendez la liste : la première réponse « oui » donne la marche à suivre.

1 · Un GS* existant répond déjà au besoin ?

→ Réutiliser — ne rien créer

2 · Le besoin est atteignable en composant des GS* existants (props, slots) ?

→ Composer — ne rien créer

3 · Usage unique, sur une seule page ?

→ Composant local à la page

4 · Réutilisé 3+ fois sur 2+ pages et comportement stable ?

→ Promouvoir en GS* → étape 1
Par défaut, on ne crée pas
Réutiliser et composer couvrent l’immense majorité des cas. Un composant local est gratuit et réversible ; un GS* est un engagement (API, doc, maintenance). On ne promeut qu’une fois le besoin prouvé.

Les 4 familles

Fondation

Les tokens de design — pas des composants : couleur, typographie, spacing, rayons, élévation. La base de tout le reste, documentée dans /foundations.

Couleur (--ui-*, --gs-*), Typographie (DM Sans), Spacing, Rayons, Élévation

Atome

Primitives UI sans logique métier, réutilisables partout. Wrappent un composant Nuxt UI.

GSButton, GSInput, GSBadge, GSIcon, GSCard, GSTooltip, GSCheckbox, GSSelect

Molécule

Assemblage de plusieurs atomes en un motif réutilisable, toujours sans concept métier.

GSFormField (label + input + hint), GSButtonGroup, GSFilterBar générique

Métier

Spécifiques à Guest Suite : ils portent soit un concept du domaine (avis, enquête, sentiment, réputation), soit l’identité visuelle / la surface signature. Concept domaine → tokens --gs-*.

GSSurveyCard, GSStatCard, GSSentimentBadge, GSRatingDisplay, GSPlatformLogo, GSSpaceContent (surface), GSSidebar

Quelle famille ?

Descendez l’arbre : la première réponse « oui » donne la famille cible. La toute première question écarte les tokens (Fondation), qui ne sont pas des composants ; les trois suivantes ne s’appliquent qu’une fois décidé qu’un composant GS* est justifié (étape 0).

1 · C’est un token de design (couleur, typo, spacing, rayon, élévation), pas un composant ?

→ Fondation (/foundations)

2 · Primitive réutilisable hors Guest Suite, sans métier ?

→ Atome (wrap NuxtUI)

3 · Assemblage de plusieurs atomes, toujours sans métier ?

→ Molécule

4 · Spécifique à Guest Suite — concept métier (avis, enquête, sentiment, réputation) ou identité visuelle / surface signature ?

→ Métier

Un composant Métier portant un concept du domaine s’appuie sur les tokens --gs-* ; un composant Métier purement visuel (surface, identité) utilise les tokens --ui-*.

Checklist avant promotion en GS*

  1. Stable sur plusieurs écrans.
  2. Les props couvrent les cas d’usage sans hack.
  3. Tokens sémantiques (--ui-* / --gs-*), aucune valeur locale hardcodée.
  4. Documentation + do/don’t rédigés.

Règles absolues

À faire
  • Toujours GS* quand l’équivalent existe.
  • U* uniquement à l’intérieur d’un GS*.vue (le wrapper).
  • SVG en fichier asset.
À éviter
  • UButton, UCard, UBadge… bruts dans une page.
  • U* dans une page / story.
  • SVG inline hardcodé.