Storybook

Независимая разработка компонента при помощи storybook

Предполагается, что ты уже склонировал репозиторий и сумел запустить его локально

1. (необязательно) Добавь папку компонента, который собираешься разрабатывать в переменную конфигурации STORYBOOK_COMPONENTS_FOLDER

Например, если ты планируешь разрабатывать компонент src/@components/select-tree, то нужно этот путь добавть в файле .env в переменную STORYBOOK_COMPONENTS_FOLDER Выглядеть это будет так:

STORYBOOK_COMPONENTS_FOLDER=src/@components/select-tree

По-умолчанию, в storybook доступны все компоненты, но это мешает концентрации, поэтому я настоятельно рекоммендую указывать путь к разрабатываемому компоненту в конфиге

2. Создай файл с суффиксом stories, где будет рассказана история нашего компонента

смотри пример в файле src/@components/select-tree/select-tree.stories.tsx

2.1. Убедись, что имя твоего компонента, описанное в фрагменте файла storiesOf('SelectTree', module) уникально. В данном примере - это имя SelectTree. У тебя будет свое имя. Это имя компонента, которое будет отображаться в общем списке слева в левом меню

2.2. Убедись, что добавлена хотя бы одна история при помощи фрагмента кода

  .add('название варианта отображения элемента (например "default")', () => {
    return (
      /* здесь должна быть jsx разметка, использующая наш компонент */
    );
  });