Как настроить Storybook для React проекта?react-79

Storybook — это инструмент для разработки UI-компонентов (интерфейсных компонентов) в изоляции от основного приложения. Он позволяет создавать, тестировать и документировать компоненты независимо от бизнес-логики или маршрутизации.

Основные возможности Storybook

  1. Изолированная разработка компонентов
    Позволяет работать с компонентами отдельно от приложения, что ускоряет процесс разработки.

  2. Документирование
    Автоматически генерирует документацию для компонентов, включая пропсы (props), примеры использования и описание.

  3. Визуальное тестирование
    Позволяет быстро находить визуальные баги при изменении компонентов.

  4. Надстройки (addons)
    Поддерживает плагины для:

    • Контроля пропсов (@storybook/addon-controls)
    • Доступности (@storybook/addon-a11y)
    • Тестирования (@storybook/testing-library)

Для чего используется Storybook?

  • Разработка компонентов — создание и стилизация в изоляции.
  • Демонстрация — показ компонентов заказчикам или команде.
  • Тестирование — проверка состояний (например, loading, error).
  • Документирование — создание UI-библиотеки.

Пример истории для кнопки

import Button from './Button';

export default {
  title: 'UI/Button', // Группа/Название
  component: Button,
};

export const Primary = () => <Button variant="primary">Click</Button>;
export const Disabled = () => <Button disabled>Disabled</Button>;

Как настроить Storybook для React проекта?

Шаг 1: Установка

Запустите в терминале:

npx storybook@latest init

Это автоматически:

  • Установит @storybook/react и необходимые зависимости
  • Создаст папку .storybook с конфигами
  • Добавит скрипты в package.json

Шаг 2: Конфигурация

Файл .storybook/main.js:

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  framework: '@storybook/react',
};

Шаг 3: Запуск

npm run storybook

Откроется интерфейс на http://localhost:6006

Дополнительные настройки

  1. Кастомизация вебпака (webpack customization)
    Через .storybook/main.js:

    webpackFinal: async (config) => {
  config.resolve.alias['@'] = path.resolve(__dirname, '../src');
  return config;
}

  2. Глобальные декораторы (для Redux/Context)
    В .storybook/preview.js:

    import { Provider } from 'react-redux';
import store from '../src/store';

export const decorators = [
  (Story) => (
    <Provider store={store}>
      <Story />
    </Provider>
  ),
];

Резюмируем

Storybook — мощный инструмент для разработки компонентных UI-библиотек. Он особенно полезен в больших проектах с дизайн-системами, позволяя поддерживать единообразие компонентов и ускоряя разработку через изоляцию.

Вопросы

Собеседования