Налаштування Storybook для документації UI-компонентів

Storybook для документації UI-компонентів

Storybook — середовище розвитку UI-компонентів в ізоляції. Кожен компонент описується Stories — окремими станами: кнопка за замовчуванням, кнопка disabled, кнопка loading, кнопка з іконкою. Розробник бачить всі стани одразу, дизайнер може перевіряти без запуску додатка, QA тестує кожен стан незалежно.

Підтримує React, Vue, Angular, Svelte, Web Components.

Встановлення в існуючий проект

npx storybook@latest init
# Storybook визначає фреймворк автоматично

Що створюється:

.storybook/
  main.ts       — конфіг, addons, фреймворк, статичні файли
  preview.ts    — глобальні декоратори, параметри, тема
stories/        — приклади від Storybook (можна видалити)

Конфігурація для React + Vite + TypeScript

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',      // docs, controls, actions, viewport
    '@storybook/addon-a11y',            // перевірка доступності
    '@storybook/addon-interactions',    // тестування взаємодій
    '@chromatic-com/storybook',         // тестування візуальної регресії
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  staticDirs: ['../public'],
  docs: {
    autodocs: 'tag',
  },
}

export default config

Написання Stories (CSF 3)

// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'
import { Button } from './Button'

const meta = {
  title: 'UI/Button',
  component: Button,
  tags: ['autodocs'],
  args: {
    onClick: fn(),
  },
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: {
    children: 'Button',
    variant: 'primary',
  },
}

export const Secondary: Story = {
  args: {
    children: 'Button',
    variant: 'secondary',
  },
}

export const Disabled: Story = {
  args: {
    children: 'Button',
    disabled: true,
  },
}

export const Loading: Story = {
  args: {
    children: 'Loading...',
    isLoading: true,
    disabled: true,
  },
}

Запуск Storybook

npm run storybook
# Відкриває http://localhost:6006

Storybook забезпечує ізольоване середовище для розробки компонентів, документації та тестування видимості.