Сборник рассказов упрощает жизнь всему проекту, разрабатывая и проектируя общий компонент за пределами вашего приложения в изолированной среде.

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

Установить сборник рассказов

npx storybook init

Приведенная выше команда внесет следующие изменения в вашу локальную среду:

  • 📦 Установите необходимые зависимости.
  • 🛠 Настройте необходимые сценарии для запуска и сборки Storybook.
  • 🛠 Добавьте конфигурацию сборника рассказов по умолчанию.
  • 📝 Добавьте несколько шаблонных историй, чтобы начать.
  • 📡 Настройте телеметрию, чтобы помочь нам улучшить Storybook. Об этом подробнее здесь".
npm run storybook / yarn storybook

Затем он запустит веб-сервер на порту 9001, и это будет выглядеть так:

После этого нам нужно поместить наши компоненты (с их разными состояниями) в приведенную выше консоль. Мы делаем это, сочиняя набор историй.

Один STORY должен возвращать элемент REACT. Затем вы взаимодействуете с ним из React Storybook.

В следующем коде мы пишем несколько историй для различных состояний нашего компонента todo list.

import React from 'react';
import MainSection from '../MainSection';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('MainSection', module)
  .add('all active', () => {
    const todoItems = [
      { id: 'one', text: 'Item One', completed: false },
      { id: 'two', text: 'Item Two', completed: false },
    ];

    return getMainSection(todoItems);
  })
  .add('some completed', () => {
    const todoItems = [
      { id: 'one', text: 'Item One', completed: false },
      { id: 'two', text: 'Item Two', completed: true },
    ];

    return getMainSection(todoItems);
  })
  .add('all completed', () => {
    const todoItems = [
      { id: 'one', text: 'Item One', completed: true },
      { id: 'two', text: 'Item Two', completed: true },
    ];

    return getMainSection(todoItems);
  });

function getMainSection(todos) {
  const actions = {
    clearCompleted: action('clearCompleted'),
    completeAll: action('completeAll')
  };

  return (
    <div className="todoapp">
      <MainSection todos={todos} actions={actions} />
    </div>
  );
}

Затем вы можете взаимодействовать с ними внутри React Storybook следующим образом:

Объединение с помощью Rollup

Rollup — хороший инструмент для объединения, если мы хотим упаковать библиотеку компонентов React и повторно использовать ее в других проектах.

Rollup нуждается в точке входа для создания пакета. Мы можем создать файл index.js в папке src, который будет служить точкой входа для Rollup.

Добавьте экспорт компонентов в этот index.js файл, который будет использоваться другими, а также импортируйте global.css / global.scssфайл сюда, чтобы мы могли создать пакет CSS.

Чтобы собрать нашу библиотеку, давайте добавим следующие зависимости разработчика.

npm i -D rollup @rollup/plugin-babel rollup-plugin-peer-deps-external rollup-plugin-scss rollup-plugin-terser @babel/preset-react @rollup/plugin-node-resolve @rollup/plugin-typescript

Давайте разберемся в этих зависимостях:

  • rollup предоставляет интерфейс командной строки (CLI) для объединения библиотеки.
  • @rollup/plugin-babel обеспечивает бесшовную интеграцию между Rollup и существующим Babel.
  • rollup-plugin-peer-deps-external предотвращает добавление одноранговых зависимостей в пакет, поскольку ожидается, что они будут у потребителя библиотеки. Таким образом, мы также получаем меньший размер пакета.
  • rollup-plugin-scss объединяет файлы scss.
  • rollup-plugin-terser уменьшите сгенерированный пакет es.
  • @babel/preset-react добавляет поддержку JSX.
  • @rollup/plugin-node-resolve помогает разрешать сторонние модули в случае, если вы используете какие-либо сторонние зависимости. Если вы используете какую-либо стороннюю зависимость, она разрешит их и добавит в исходный код.
  • @rollup/plugin-typescript транспилирует файлы TypeScript в JavaScript.

Затем мы создаем файл rollup.config.js и добавляем следующее содержимое.

import { babel } from "@rollup/plugin-babel";
import external from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import scss from "rollup-plugin-scss";
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";

export default [
  {
    input: "./src/index.ts",
    output: [
      {
        file: "dist/index.js",
        format: "cjs",
      },
      {
        file: "dist/index.es.js",
        format: "es",
        exports: "named",
      },
    ],
    plugins: [
      scss({
        output: true,
        failOnError: true,
        outputStyle: "compressed",
      }),
      babel({
        exclude: "node_modules/**",
        presets: ["@babel/preset-react"],
      }),
      external(),
      resolve(),
      typescript(),
      terser(),
    ],
  },
];

Далее нам нужно обновить package.json. Библиотеки должны распространяться с использованием CommonJS и ES6. Мы указываем пути к выходным файлам, используя свойства main и module. Мы также используем эти свойства в файле конфигурации Rollup.

Затем мы добавляем сценарий build, который использует CLI свертки с флагом -c. Это означает, что Rollup будет искать файл конфигурации с именем rollup.config.js для объединения библиотеки компонентов.

...
 "main": "dist/index.js",
 "module": "dist/index.es.js",
...
"scripts": {
    ...
    "build": "rollup -c", 
  }
...

Развертывание Storybook в частном/общедоступном пакете NPM

Развертывание сборника рассказов в частном или общедоступном пакете npm помогает повторно использовать сборник рассказов в качестве пакета npm в вашем приложении. Даже вы можете использовать сборник рассказов как пакет npm в нескольких проектах.

Просто посетите репозиторий React Storybook, и вы увидите инструкции по началу работы.

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