Storybook

Storybook to środowisko do budowania i dokumentowania komponentów UI w izolacji od aplikacji. Każdy stan komponentu opisujesz jako „story” — żywą, interaktywną dokumentację, która jednocześnie służy jako baza testów wizualnych i dostępności. To pomost między design systemem a kodem: komponenty z tokenów żyją, są przeglądalne i testowalne.

Kiedy używać

• Budujesz bibliotekę komponentów / design system i chcesz ją dokumentować na żywo.
• Potrzebujesz testów wizualnych, interakcji i dostępności komponentów.
• Chcesz przeglądać warianty komponentu bez uruchamiania całej aplikacji.

Przykład użycia

// Button.stories.ts
import type { Meta, StoryObj } from '@storybook/your-framework';
import { Button } from './Button';

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

export const Primary: StoryObj<typeof Button> = {
  args: { variant: 'primary', label: 'Zapisz się' },
};

npm run storybook   # lokalny warsztat komponentów

Warto wiedzieć

• Wspiera większość frameworków (React, Vue, Svelte, web components).
• Komponenty zasilane tokenami ze Style Dictionary prezentujesz tu jako żywą dokumentację.