Конфигурация Storybook в проекте React

Настройка Storybook: 6 советов, которые нельзя пропустить

Как настроить Storybook для интеграции с текущим проектом

Storybook - это инструмент с открытым исходным кодом для разработки пользовательского интерфейса с множеством надстроек для интерактивного и подробного отображения компонентов пользовательского интерфейса.

Я рад поделиться своим опытом по настройке вашей Storybook для интеграции в ваш текущий проект. Эта статья будет посвящена проблемам, с которыми я столкнулся, и способам их решения.

Для начала я рекомендую вам прочитать информацию о Конфигурации Storybook с официального сайта, чтобы иметь базовое представление.

Файлы конфигурации

Файлы конфигурации находятся в корневой папке вашего проекта .storybook, а наиболее важными из них являются main.js preview.js manager.js Основной файл конфигурации - main.js , есть вероятность, что вам не нужно настраивать другие файлы. В этой статье будет уделено больше внимания main.js и preview.js

main.js

Как четко указано в документации Storybook:

Файл конфигурации main.js является предустановленным и, как таковой, имеет мощный интерфейс, но ключевые поля в нем:

1. stories - массив глобусов, который указывает расположение ваших файлов историй относительно main.js.
2. addons - список аддонов, которые вы используете.
3. webpackFinal - настраиваемая конфигурация веб-пакета.
4. babel - настраиваемая конфигурация бабеля.

module.exports = {
// The location of your stories
  stories: ['../src/**/*.stories.@(js|mdx)'],
// addons added to your storybook
  addons: ['@storybook/addon-essentials'],
// custom babel config  
  babel: async (options) => ({
      ...options,
      // any extra options you want to set
  }),
//  custom webpack config
webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  }
}

Совет 1: Storybook имеет конфигурацию веб-пакета по умолчанию, при попытке импортировать текущую конфигурацию веб-пакета или добавить свои собственные правила ОБЯЗАТЕЛЬНО используйте push, чтобы добавить свои правила в массив правил или изменить объект конфигурации.

config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

Настройте необходимый псевдоним, который уже применяется к вашему текущему проекту.

config.resolve.alias = {
    ...config.resolve.alias,
    "ui-components": path.resolve(__dirname, "../src")
};

Совет 2. Чтобы проверить окончательную конфигурацию веб-пакета, вы можете запустить yarn storybook --debug-webpack, чтобы распечатать конфигурацию в своем терминале, или вы можете добавить console.log(config.module.rules) внутри webpackFinal функцию и запустить yarn storybook, чтобы распечатать только часть окончательной конфигурации веб-пакета.

Совет 3. Начиная с версии 6.0, Storybook по умолчанию добавляет важные надстройки, включая Документы, Элементы управления, Действия, Область просмотра, Фон, Панели инструментов. Вы можете ознакомиться с примечанием к выпуску здесь.

Все, что вам нужно, это добавить необходимые дополнения в config.

addons: ['@storybook/addon-essentials']

preview.js

Чтобы контролировать способ рендеринга историй и добавлять глобальные декораторы и параметры, создайте файл .storybook/preview.js. Он загружается на вкладку Canvas, iframe предварительного просмотра, который визуализирует ваши компоненты изолированно. Используйте preview.js для глобального кода (такого как импорт CSS или имитация JavaScript), который применяется ко всем историям.

Файл preview.js может быть модулем ES и экспортировать следующие ключи:

decorators - массив глобальных декораторов

parameters - объект глобальных параметров

globalTypes - определение globalTypes

Если вы хотите изменить порядок ваших историй, прочтите о сортировке историй.

Совет 4: preview.js - это файл, в который вы также можете импортировать глобальный CSS / sass, чтобы он применил стили к вашим компонентам.

import “../src/styles/theme.css”;

Совет 5. Если у вас есть верхняя оболочка с определенным именем класса, у которого есть стили, вам следует добавить ту же оболочку через декоратор.

import { addDecorator } from "@storybook/react";
// For each story, the parent element will be div with class name "platform"
addDecorator(story => <div className="platform">{story()}</div>);

Совет 6. Любые другие макеты глобальной конфигурации или javascript (средства форматирования и т. д.) следует добавлять в preview.js

import { addDecorator } from "@storybook/react";
import { withI18n } from "storybook-addon-i18n";
addDecorator(withI18n);

manager.js

manager.js предназначен для управления поведением пользовательского интерфейса Storybook. Вы можете установить Параметры пользовательского интерфейса и настроить тему Storybook. Это необязательно, и его не нужно добавлять, если в вашем проекте нет требований к настраиваемому пользовательскому интерфейсу / теме Storybook.

Заключить

Начиная с Storybook 6.0, команда Storybook упрощает настройку, даже если некоторые настройки отсутствуют или не очень подробно описаны в документации. Но вы всегда можете попросить о помощи, запустив вопрос в Github. Кроме того, вы можете стать участником проекта с открытым исходным кодом - узнайте, как вы можете внести свой вклад здесь.