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, добавлены все существующие компоненты UI в разных состояниях (даже проведен их небольшой рефакторинг), чтобы в полной мере видеть все представления элемента.    

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

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

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