Frontend Academy · Leçon

Storybook : stories, contrôles et documentation

Storybook : stories, contrôles et documentation est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que Storybook ?

Storybook est un atelier consacré aux composants d'interface, isolé de votre application. Vous écrivez des « scénarios » — des exemples d'utilisation de chaque composant dans différents états — puis vous les parcourez dans un serveur de développement. C'est indispensable pour les systèmes de conception.

Pourquoi utiliser Storybook ?

1) Développer des composants isolément, sans configurer le contexte d'une application. 2) Examiner visuellement tous les états (chargement, erreur, vide). 3) Permettre aux concepteurs et aux responsables produit de parcourir le catalogue. 4) Générer de la documentation. 5) Automatiser les tests de régression visuelle.

Installer Storybook

Utilisez l'initialiseur officiel : il détecte votre cadre logiciel et configure tout automatiquement.

npx storybook@latest init

# Adds:
#  .storybook/        config
#  src/stories/       example stories
#  scripts: 'storybook' and 'build-storybook'

npm run storybook   # opens http://localhost:6006

Écrire un scénario (CSF 3.0)

Component Story Format 3 : l'exportation par défaut correspond aux métadonnées et les exportations nommées correspondent aux scénarios.

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs']
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' }
};

export const Disabled: Story = {
  args: { label: 'Save', variant: 'primary', disabled: true }
};

Plusieurs scénarios par composant

Un scénario par état important : par défaut, survol, chargement, erreur, vide, rempli. Les personnes chargées de la révision peuvent cliquer d'un scénario à l'autre et voir toutes les variantes en un coup d'œil.

export const Loading: Story = { args: { state: 'loading' } };
export const Error: Story    = { args: { state: 'error', message: 'Network failed' } };
export const Empty: Story    = { args: { items: [] } };
export const Populated: Story = { args: { items: mockItems } };

Contrôles (tableau des arguments)

L'extension Controls de Storybook transforme l'objet des arguments en contrôles de formulaire interactifs. Modifiez à la volée les valeurs des propriétés dans l'interface pour tester les cas limites.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    onClick: { action: 'clicked' }
  }
};

Extension Actions

Utilisez action() pour journaliser les appels des gestionnaires d'événements dans le panneau Actions. C'est idéal pour tester les fonctions de rappel sans mettre en place un état réel.

argTypes: {
  onClick: { action: 'clicked' },
  onChange: { action: 'changed' }
}

Documentation automatique — documentation générée automatiquement

Ajoutez tags: ['autodocs'] aux métadonnées ; Storybook génère une page Docs contenant le tableau des propriétés du composant, leurs descriptions et des exemples exécutables.

MDX pour une documentation riche

Rédigez la documentation des composants en MDX — du Markdown avec du JSX intégré. Mélangez le texte explicatif et des exemples de composants interactifs.

{/* Button.mdx */}
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The primary action element.

## Variants
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Secondary} />

decorators — envelopper les scénarios dans un contexte

Enveloppez les scénarios dans des fournisseurs (thème, routeur, Redux) à l'aide de decorators.

export const decorators = [
  (Story) => (
    <ThemeProvider theme={lightTheme}>
      <Story />
    </ThemeProvider>
  )
];

Tests de régression visuelle

Chromatic (par l'équipe de Storybook) capture chaque scénario à chaque commit et compare les résultats à la référence. Il détecte automatiquement les régressions visuelles.

Déployer Storybook

npm run build-storybook produit un site statique dans storybook-static/. Déployez-le sur Netlify, Vercel ou GitHub Pages : les personnes qui ne développent pas peuvent ainsi parcourir le catalogue de composants.

Vérification rapide

Que fait l'ajout de tags: ['autodocs'] aux métadonnées Storybook d'un composant ?

Récapitulatif : Storybook

Atelier isolé pour les composants d'interface. CSF 3.0 : exportation par défaut = meta, exportations nommées = scénarios. argTypes pour les contrôles. action() pour journaliser les fonctions de rappel. tags: ['autodocs'] pour générer automatiquement la documentation. MDX pour du texte explicatif riche avec du JSX. decorators injecte les fournisseurs. Chromatic pour les tests de régression visuelle. La compilation de Storybook pour l'hébergement statique.

Questions Fréquemment Posées

La leçon « Storybook : stories, contrôles et documentation » est-elle gratuite ?

Oui — le texte complet de « Storybook : stories, contrôles et documentation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Storybook : stories, contrôles et documentation » ?

Écrivez des stories pour chaque état de composant, utilisez les contrôles pour ajuster les propriétés de manière interactive et générez des pages de documentation à partir de JSDoc et de argTypes. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Storybook : stories, contrôles et documentation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Storybook : stories, contrôles et documentation
Jetons de conception avec Style Dictionary
Gestion des versions et publication sur npm
Utiliser un système de conception

← Retour à Frontend Academy