Storybook

Definition

Outil de developpement et documentation de composants UI en isolation. Chaque 'story' montre un etat du composant avec ses variantes.

Analogie

Comme un catalogue IKEA : chaque meuble (composant) est photographie dans tous ses coloris et configurations.

Exemple de code

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

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

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

Cas d'usage

Developper, tester visuellement et documenter les composants UI d'un design system.

Termes lies