Сборка компонентов JavaScript в Storybook

Development, Java | Amber | Комментировать запись

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

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

Storybook можно интегрировать в большинство фронт-энд фреймворков, включая React, Vue и Angular.

В этом мануале вы познакомитесь с основами Storybook.

Варианты использования Storybook

Storybook отлично подойдет в следующих ситуациях:

• Библиотека компонентов. Благодаря Storybook вы можете поддерживать библиотеку компонентов. Все компоненты вашего приложения находятся в одном месте, и вы можете тестировать каждое состояние любого компонента.
• Дизайн-системы. Дизайн-система – это серия компонентов, которые можно повторно использовать в различных комбинациях. Дизайн-системы позволяют управлять дизайном в любом масштабе. Storybook дает вам уже готовую дизайн-систему.
• Визуальное тестирование. Расширения Storybook дают возможность интегрировать визуальное регрессионное тестирование, с помощью чего вы можете проверять и поддерживать согласованность вашей библиотеки компонентов, независимо от ее размера.
• Совместное использование Storybook между командами. Один экземпляр Storybook могут параллельно использовать сразу несколько команд, поскольку его можно развернуть как автономный статический сайт. К примеру, Storybook можно разделить между дизайнерами и проджект-менеджерами, чтобы они могли дать комментарии или внести правки по текущему дизайну компонентов. Таким образом, Storybook улучшает работу внутри команд.

Несколько больших команд используют Storybook для составления библиотек компонентов, а также для поддержки своих дизайн-систем. Например, именно с помощью Storybook такие компании, как Salesforce, Artsy, GOV.UK и GitHub, создают и распространяют компоненты пользовательского интерфейса, которые влияют на миллионы людей.

Как работает Storybook

По сути, Storybook – это комбинация разных историй (stories) для разных компонентов. Истории – это функции, которые возвращают то, что можно отобразить на экране. История может содержать одно состояние одного компонента, либо же может рассматриваться как визуальное представление компонента.

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

Есть несколько способов структурировать и систематизировать истории в вашем приложении во время сборки с помощью Storybook.

Посмотрим на пример стратегии создания каталога с файлами stories.js внутри каталога компонента:

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── button.stories.js

А вот пример второй стратегии организации каталогов – на этот раз каталог stories находится вне каталога src:

.
 └── src
  └── components
   └── button.js
 └── stories
  └── button.stories.js

Третий пример показывает нам стратегию организации каталогов с подкаталогом stories в каталоге компонентов:

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── stories
     └── button.stories.js

Вы можете использовать любой из этих методов – это вопрос выбора. Только вам решать, что лучше всего подходит вашему проекту и команде.

Интеграция Storybook с другими фреймворками

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

• React
• Vue
• Angular
• Web Components

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

• Ember
• HTML
• Mithril
• Marko
• Svelte
• Riot
• Preact
• Rax

Дополнения и расширения Storybook

У Storybook есть аддоны, которые расширяют возможности и поведение этого инструмента.

Примером может служить аддон @storybook/addon-actions, который помогает визуализировать в Storybook данные, полученные обработчиками событий.

В Storybook есть предустановленный по умолчанию набор основных расширений. А сообщество разработало огромное количество сторонних аддонов.

Список всех дополнений, созданных командой Storybook, можно найти на этой странице.

Развертывание Storybook как статического приложения

Инструмент Storybook можно использовать вместе с проектом, который вы разрабатываете, потому что он дает разработчикам доступ к таким функциям, как горячая перезагрузка через Webpack HMR. Но вы также можете расширить функционал Storybook, развернув его как статический сайт. Это позволит вам продемонстрировать компоненты приложения другим членам команды.

Чтобы развернуть Storybook как статический сайт, нужно настроить его с помощью этого скрипта:

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

Теперь, если вы запустите любую из команд:

npm run build-storybook
yarn build-storybook

она соберет Storybook, настроенный в каталоге storybook, в статическое веб-приложение и поместит его в вызванный каталог. Затем вы можете развернуть этот каталог с помощью таких сервисов, как GitHub Pages, Netlify или Now.

Заключение

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

Storybook имеет широкий спектр применения. Интегрировав его в ваш рабочий процесс, вы сможете изолированно создавать сложные компоненты UI для ваших приложений.

Читайте также: Стилизация кода React с помощью библиотеки emotion