Leçon 7 : Storybook — la source de vérité visuelle
Pour vérifier le `Button` dans son état `ghost` avec une erreur, tu te connectes à l'application, ouvres un formulaire, saisis de mauvaises données, et attends. Tout ça pour voir un seul composant. Cette leçon t'apprend `Storybook` : un fichier de stories qui affiche chaque variante isolément, sur u
Storybook, c'est comme la salle d'exposition d'un tailleur : chaque variante d'un vêtement sur son propre mannequin, alignés, pour que tu inspectes chacun séparément — sans habiller une personne entière et l'envoyer se balader dans le magasin.
- Storybook
- Un outil qui affiche les composants isolément, en dehors de l'application, chacun avec ses variantes sur une seule page — une source de vérité visuelle pour développer, réviser et documenter le design system.
- story
- Un seul état d'un composant, exporté depuis un fichier `*.stories.tsx` — généralement une variante avec ses args (`export const Ghost = { args: { variant: 'ghost' } }`).
- isolated development
- Construire et tester un composant à part de l'application, sans avoir besoin d'y naviguer à travers des écrans, une connexion et des données — ça raccourcit la boucle de feedback.
- visual regression
- Un changement visuel non intentionnel qui se glisse par accident (un composant qui « casse » visuellement). Storybook facilite sa détection parce que toutes les variantes sont visibles ensemble.
