C'EST QUOI ?
Storybook est un environnement de développement frontend pour construire, documenter et tester des composants UI en isolation, hors du contexte d'une vraie application. Chaque composant a ses "stories" (variantes/états), affichées dans une interface dédiée que les devs et designers peuvent parcourir, tester et utiliser comme source de vérité du design system.
POURQUOI C'EST INTÉRESSANT ?
- Isolation totale : Chaque composant est rendu dans un sandbox, sans dépendre du reste de l'app. Plus besoin de naviguer trois écrans pour tester un état d'erreur d'un bouton.
- Multi-frameworks : React, Vue 3, Angular, Svelte, Web Components, Preact, HTML, Ember… Et même React Native, iOS, Android. Une seule mécanique à apprendre pour tous les écosystèmes.
- Docs auto-générées : Stories + types TypeScript + JSDoc → page de documentation propre avec exemples interactifs et table de props. Le design system se documente quasi tout seul.
- Addons puissants : Accessibilité (a11y), tests visuels, contrôles interactifs, viewport, backgrounds, mesures, design assets… L'écosystème d'addons couvre l'essentiel des besoins quotidiens.
- Tests intégrés : Tests d'interaction, snapshots visuels, vérifications a11y. Les stories deviennent aussi des cas de test, pas juste de la doc.
CAS D'USAGE
- Construire et maintenir un design system / une bibliothèque UI partagée entre plusieurs apps
- Documenter les composants pour designers et devs (terrain commun visuel)
- Développer un composant complexe sans devoir lancer l'app complète
- Mettre en place des tests visuels et d'accessibilité automatisés en CI
- Démontrer les états et variantes d'un composant à un product owner avant intégration