Storybook

Definition

Outil de developpement isole pour composants UI. Permet de documenter, visualiser et tester chaque composant independamment dans un catalogue interactif.

Analogie

Comme un showroom de meubles : chaque piece est exposee individuellement pour etre examinee 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 developper et documenter un design system avec un catalogue vivant de tous les composants.

Anti-pattern

Termes lies