Настройка Storybook для React.js-проектов

Библиотека с именем storybook позволяет удобно организовать функциональный шоурум для всех реализованных компонентов в твоей системе.

Помимо возможности рендерить компонент, ты можешь взаимодействовать с добавленными компонентами: разные события, вариации, кастомные параметры... и управлять ими прямо через интерфейс!

Настройка storybook

Установи зависимости

yarn install @storybook/react @types/storybook__react @storybook/preset-create-react-app @storybook/builder-webpack5 @storybook/manager-webpack5

Добавь команду в package.json

"storybook": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 9009 -s public"

Создай папку .storybook в корне своего проекта
Создай файл .storybook/preview.tsx со следующим содержимым:

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { TestProvider } from '../src/utils/tests';
import { store } from '../src/redux/store';

const req = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(req);
}

// Test provider contains all necessary react contexts for proper application work, such as redux context, @mui/theme provider, and so on
addDecorator((S) => (
  <TestProvider store={store}>
    <S />
  </TestProvider>
));

configure(loadStories, module);

Создай файл .storybook/main.js со следующим содержимым:

const path = require('path');

module.exports = {
  addons: ['@storybook/preset-create-react-app'],
  core: {
    builder: 'webpack5',
  },
  // feel free to modify webpack config here as well
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    });

    // my custom alias for pretty-path module resolution. ~ sign points to root of src folder
    config.resolve.alias['~'] = path.resolve(__dirname, '../src');

    return config;
  },
};

Содержание

Настройка storybook

Открыт для работы по контракту

Я доступен для работы по контракту. Если у вас есть интересная идея проекта — запишитесь на звонок через Calendly.

Записаться на 30-минутный звонок