Storybook

Définition

Outil de développement isole pour composants UI. Permet de documenter, visualiser et tester chaque composant indépendamment dans un catalogue interactif.

Analogie

Comme un showroom de meubles : chaque pièce est exposée individuellement pour être examinée sous tous les angles.

Exemple de code

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

const meta: Meta<typeof Button> = { component: Button };
export default meta;

export const Primary: StoryObj = {
  args: { variant: 'primary', children: 'Click' },
};

Cas d'usage

Pour développer et documenter un design system avec un catalogue vivant de tous les composants.

Anti-pattern

Termes liés