Storybook
Storybook est l'atelier visuel du design system. Il permet de voir chaque composant pour de vrai — ses variantes, ses états, ses couleurs — sans rien installer ni écrire de code. Designers, chefs de produit, testeurs comme développeurs y trouvent la même référence partagée.
Ouvrir Storybook
En local, après avoir lancé le projet :
bun run dev --filter=storybook
Storybook s'ouvre sur http://localhost:6006. Une version en ligne est aussi déployée pour l'équipe.
L'écran en trois zones
- La barre latérale (à gauche) — la navigation. Tout le contenu y est rangé en sections, comme un sommaire.
- La scène (au centre) — le composant sélectionné, affiché en vrai.
- La barre d'outils (en haut) — des réglages d'affichage : thème, marque, zoom…
Les sections de la barre latérale
La barre latérale est organisée en grandes sections. Voici à quoi sert chacune.
Introduction
La page d'accueil du design system — par où commencer si on découvre l'outil.
Foundations — les fondations
Les briques visuelles de base, communes à tous les composants :
- Aperçu — le catalogue : tous les composants réunis sur une page, pour une vue d'ensemble rapide.
- Couleurs, Typographie, Espacement, Élévation — les valeurs de référence (la palette, les tailles de texte, les espacements, les ombres).
Patterns — les recettes d'assemblage
Comment combiner les composants pour résoudre un besoin récurrent : formulaires, états de l'interface (chargement / vide / erreur), confirmation d'une action destructive, recherche & filtrage. Des pages de conseils, pas des composants.
Components — les composants
Le cœur de l'atelier : les 26 composants, un par un. Chaque entrée se déplie pour montrer les variantes et les états du composant.
Charts — la data viz
Les composants de graphiques (barres, courbes, aires, camembert).
Lire la page d'un composant
En cliquant sur un composant, deux types de vues apparaissent.
- Docs — la documentation : à quoi sert le composant, quand l'utiliser, quoi éviter, et le tableau de ses options (les « props »).
- Les exemples (sous le composant) — chaque variante ou état présenté isolément : le cas par défaut, le composant désactivé, en erreur, etc.
En bas de la scène, le panneau Controls permet de modifier les options en direct — changer un texte, une variante, activer un état — et de voir le résultat aussitôt. C'est la façon la plus simple de tester un composant sans toucher au code.
La barre d'outils
En haut de la scène, quelques réglages utiles :
- Thème — bascule entre Clair, Sombre et High-contrast (le mode d'accessibilité à fort contraste). Pratique pour vérifier qu'un composant tient dans les trois.
- Marque — bascule entre Sodinix et Webtinix : le même composant aux couleurs de chaque marque.
- Accessibility — un panneau qui signale automatiquement les problèmes d'accessibilité détectés sur le composant affiché.
- Zoom, fond, plein écran — du confort de lecture.
Conseils pour parcourir
- Découvrir le système — commencer par Foundations → Aperçu pour voir l'ensemble des composants d'un coup d'œil.
- Valider un composant — ouvrir sa page, lire l'onglet Docs, puis tester ses variantes via le panneau Controls et basculer le thème.
- Comprendre un écran — aller voir le Pattern correspondant : il explique quels composants combiner et les pièges à éviter.
- Vérifier l'accessibilité — garder un œil sur le panneau Accessibility et tester le thème High-contrast.
Pour aller plus loin
- Composants — la liste de la librairie
@sodinix/ui. - Architecture — comment le système est construit.