Storybook, notre outil de documentation de composants Vue.js
Storybook est un environnement de développement isolé pour les composants UI. Il nous permet de développer, documenter et tester chaque composant Vue.js indépendamment du reste de l'application.
Chez SmartBooster, Storybook est l'outil de référence pour nos projets Vue.js autonomes : documentation technique des composants, règles de parcours métier et référence de paramétrage pour les Web Components.
PRÉSENTATION
Qu'est-ce que Storybook ?
Storybook est un outil open source qui crée un environnement de développement isolé pour vos composants UI. Chaque composant est décrit par des stories →des scénarios qui illustrent ses différents états et variantes. L'ensemble forme une documentation interactive navigable dans le navigateur.
Storybook s'intègre nativement avec Vue.js et Vite. Il supporte TypeScript, les composants script setup et l'ensemble de l'écosystème Vue 3. Les stories peuvent être écrites en format .stories.ts ou en MDX pour les pages de documentation plus riches.
Au-delà de la documentation de composants, Storybook permet d'enrichir la base de connaissance du projet avec des pages dédiées : schémas de parcours, règles métier, description de paramétrage →une seule référence accessibles à toute l'équipe.
POURQUOI STORYBOOK
Ce qui en fait notre outil de documentation de référence
Storybook résout plusieurs problèmes à la fois : documentation qui vieillit mal, composants difficiles à tester en isolation, manque de référence partagée entre développeurs et produit.
Documentation vivante des composants
Chaque composant Vue.js est documenté dans Storybook avec ses variantes, ses props et ses états. La documentation vit dans le code et reste toujours à jour sans effort de synchronisation avec un wiki externe.
Développement en isolation
Storybook permet de développer et tester un composant hors de son contexte applicatif. Moins de dépendances à simuler, moins de temps perdu à reproduire un état précis pour tester un rendu particulier.
Parcours et règles métier
Au-delà des composants UI, nous créons des pages Storybook dédiées pour documenter les schémas de parcours utilisateur et les règles métier complexes. Une source de vérité partagée entre l'équipe technique et les parties prenantes.
Paramétrage des Web Components
Pour les projets exposant des Web Components configurables, Storybook documente chaque paramètre disponible avec des exemples interactifs. Les intégrateurs disposent d'une référence claire et testable en direct.
Détection des régressions visuelles
En couplant Storybook à des tests de snapshot, toute modification de composant est immédiatement visible. Les régressions visuelles sont détectées avant qu'elles n'atteignent la production.
Collaboration avec les équipes produit
Storybook produit une interface navigable accessible à tous. Les équipes produit et design peuvent valider les composants directement dans le navigateur sans avoir à lancer l'application complète.
NOTRE USAGE
Comment nous utilisons Storybook chez SmartBooster
Nous utilisons Storybook dans les projets Vue.js autonomes, en particulier quand une bibliothèque de composants est construite ou quand des Web Components configurables sont exposés à des équipes tierces. Consultez notre page dédiée à Vue.js pour en savoir plus sur notre usage du framework.
Projets Vue.js autonomes
Nous intégrons Storybook dans nos projets Vue.js dès lors qu'une bibliothèque de composants est développée. Chaque composant est documenté avec ses stories couvrant les états principaux : défaut, chargement, erreur, variantes.
Pages de documentation métier
En complément des stories de composants, nous créons des pages MDX dans Storybook pour documenter les schémas de parcours, les règles de validation et les cas limites. Ces pages servent de référence partagée entre développeurs et responsables produit.
Référence pour les Web Components
Quand un projet expose des Web Components intégrables par des tiers, Storybook documente chaque attribut, événement et slot disponible avec des exemples configurables en direct via les Controls.
Pour aller plus loin
Documentation utile
Documentation complète, addons et guides pour démarrer avec Storybook.
Guide de démarrage officiel pour intégrer Storybook dans un projet Vue 3 + Vite.
Pour aller plus loin
Approfondir votre réflexion
Storybook est notre outil de documentation des composants Vue.js. Ensemble, ils forment la base de nos design systems sur mesure.
Storybook documente les composants réutilisables de nos projets, facilitant la collaboration et la cohérence visuelle dans la durée.
Une bibliothèque de composants bien documentée sous Storybook accélère les évolutions et réduit le risque de régression visuelle en maintenance.