Storybook: как создать красивый и функциональный UI kit без боли

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

Если коротко, то Storybook – это инструмент JavaScript для организации и изолированного создания компонентов пользовательского интерфейса (UI kit). Еще одна приятная особенность – он совместим практически с любым инструментарием. Например, с React.js, Vue.js или Angular. 

Storybook позволяет изучить компонент – как он выглядит в разных состояниях и на разных устройствах, как себя ведет. Для взаимодействия с компонентами предусмотрен удобный веб-интерфейс. Также Storybook облегчает документирование, тестирование и разработку самих компонентов. Помимо прочего он упрощает процесс обучения новых членов команды, ведь за счет того, что структура UI приведена в порядок, порог вхождения в продукт намного ниже.

Storybook мы развернули для работы над сайтом, который делаем для страхового дома ВСК. У нас уже ведется совместная разработка, команд для разработки становится все больше, но стиль сайта хочется сохранить единым. Да и использовать один UI kit на всем сайте лучше, чем создавать для каждой команды свой.

Изначально наш UI kit был не очень удобен для изучения, так как не было демо-странички, чтобы посмотреть, подходит ли элемент из библиотеки. Нужно было искать его на сайте, что крайне неудобно.   

Какие преимущества мы отметили 

1. Storybook позволяет увидеть компонент во всех состояниях, можно менять параметры компонента и сразу видеть изменения, скопировать уже правильный код компонента к себе.    
2. Добавить новый компонент в Storybook тоже просто и быстро - достаточно создать определенный файл рядом с компонентом и «описать» его параметры.    
3. Документация генерируется на стороне Storybook, но можно ее редактировать и дополнять под свои требования.    
4. Также не нужно волноваться за верстку самой страницы, все это уже предусмотрено самой библиотекой.    

Что касается сложностей, то они могут возникнуть с компонентами, у которых содержится сложная логика (например, используются события Router, есть интеграция со сторонними библиотеками и др.). В таких случаях нужно постараться сделать mock’и, реализующие в достаточной мере функционал, который используется в компоненте.     

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

Сейчас мы развернули Storybook на стороне заказчика, а в дальнейшем планируем дополнять его по мере пополнения UI kit’а новыми компонентами.   

К каким выводам мы пришли

Демо-страница для большого UI kit’а — это необходимый инструмент для быстрого погружения в проект и разработки. А Storybook позволяет сделать это с минимальными усилиями на создание и поддержку актуального состояния.