Storybook react что это

09.10.202306.07.2022 admin 0 Comments

Зачем нужен инструмент Storybook и как он помогает нам жить

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

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

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

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

Например, при внедрении Storybook в сборки React-приложений стало ясно, что некоторые типы импортируемых файлов ему не знакомы. В базовой конфигурации Webpack для Storybook отсутствовали используемые в приложении лоадеры. В нашем случае это были stylus-loader и css-loader с дополнительным набором опций для конфигурации css-modules.

Небольшой пример по расширению конфигурации можно посмотреть здесь.

Хотите еще больше полезностей от нашего отдела разработки? Заходите в Telegram и подписывайтесь на канал Chulakov Dev. Новости-молнии, гайды-лонгриды — регулярно делимся самым интересным из мира frontend- и backend-разработки.

Источник

Создание библиотеки компонентов с использованием Storybook

Введение

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

Компании все чаще прибегают к написанию интерфейса состоящего из множества независимых компонентов, которые могут быть использованы повторно. Многие дизайнеры создают дизайн проект который описывает каждую деталь дизайна. Они используют ряд инструментов для документирования интерфейсов, первые которые приходят на ум это axshare.com и zeplin.com. Тот же фотошоп, в котором у них все разложено строго по папочкам. Это позволяет им с легкостью работать над дизайном проекта, обновлять и добавлять новые страницы, просто копируя уже имеющиеся наработки.

А что же касается разработчиков? Да у нас есть Angular, React, Vue, Ember, Polymer. Все эти инструменты в той или иной мере позволяют нам создавать компоненты с дальнейшим их повторным использованием. Но скажите мне каким образом, вы можете взглянуть на проект так же как это делает дизайнер? Где я могу увидеть все компоненты которые используются в проекте, узнать их свойства или же просто попробовать? Как я могу узнать реализован ли нужный мне компонент? Такие вопросы уже начинают возникать в проектах среднего масштаба. Разумеется я могу пойти и спросить коллегу, но это излишнии коммуникации, которые неэффективны ввиду множества причин. Коллега попросту может не вникнуть в суть вашей проблемы и указать вам на схожий компонент который вы будете еще долго доделывать.

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

У вас есть только два выхода

Добросовестным выбором будет разработка нового компонента. Но тут вам передается эстафета того недобросовестного разработчика. Учитывая, что сроки горят, вы может быть и успеете разработать новый компонент, но сделать его общим у вас уже не будет времени.

На вопрос почему так произошло можно ответить следующим образом:

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

Storybook запускается отдельно от вашего приложения. Это позволяет разрабатывать компоненты в изоляции, что улучшает возможность переиспользование компонентов, тестируемость и скорость их разработки. Вы можете создавать новый компоненты быстро и без каких либо зависимостей основного проекта.
Тут вы можете посмотреть примеры использования Storybook https://storybook.js.org/examples/
Storybook имеет множество расширений и богатый API для расширения его функциональных возможностей, а также поддержку React Native.

Давайте рассмотрим использование Storybook с позиции различных участников процесса создания и второстепенных процессов поддержки интерфейса приложения.

Как UI\UX дизайнер

У вас будет возможность попробовать в живую и проверить реализованный разработчиком компонент. Увидеть все возможные состояние компонента и предоставить полноценный фидбек.

Как разработчик

У вас будет библиотека компонентов, вы больше не будете биться в догадках, есть ли у вас такой-то компонент или нет, вы сможете попробовать, поиграться с компонентом и узнать возможности его использования в рамках вашей текущей задачи. Это очень важно как для разработчика, иметь возможность увидеть все компоненты которые используются в проекте и знать все их особенности. Вы конечно же можете потратить уйму времени на изучение исходного кода, но будет куда проще найти нужный компонент с нужными свойствами визуально, а потом уже вдаваться в подробности.
Вы сможете разрабатывать компоненты в изолированном окружении, которое не требует поднятие всего проекта локально. Изолированное окружение не явным образом стимулирует вас разрабатывать компоненты с более продуманным API и с мыслью о возможности его переиспользования в любой части проекта. Вы думаете о входящих параметрах, с точки зрения пользователя и понимаете какие параметры были бы удобны потенциальному пользователю. Также вы задумываетесь об изоляции стилей. Помимо всего прочего, вы получаете настоящий верстак для разработки компонентов. Вы можете настроить окружение Storybook как вам угодно и использование таких вещей как HMR вы получаете из коробки.

Как тестировщик

У вас будет возможность тестировать каждый компонент в отдельности и независимо от других. Нет необходимости в запуске целого проекта. Вы можете просто открыть Storybook с интересующим вас компонентов и проводить абсолютно любые E2E тесты.

Как продакт менеджер

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

Установка

Та как Storybook находит в экосистеме node/npm, это делается очень просто. Установить основной cli инструмент можно с помощью одного из ваших любимы пакетных менеджеров Yarn или NPM.

Теперь вы можете использовать этот инструмент для инициализации Stroybook’а в вашем проекте.
Для экспериментов нам понадобится проект. В качестве примера возьмем заготовку из create-react-app. Я опущу описание и особености create-react-app, это очень полезный и простой для понимания инструмент, детальней вы можете прочитать тут.

Установим и создадим новый проект с помощью create-react-app

Перейдем в директорию проекта

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

Для того, чтобы инициализировать Storybook выполните следующую команду находясь в корне проекта

Эта команда определяет тип проекта, делает необходимые проверки и устанавливает зависимости

После чего в проекте появится новосозданные папки .storybook и stories

Папка .storybook содержит всевозможные конфигурационные файлы. С ними мы разберемся позже. На данный момент нас интересует папка stories.
В ней хранится библиотека компонентов. После инициализации Storybook в проекте, по умолчанию создается файл с одним примером. Давайте запустим Storybook и посмотрим на него.

Storybook будет доступен по адресу http://localhost:6006/

И панель снизу которая используется как интерактивный инструмент, на которую вы можете выводить различную информацию и элементы управления компонентов. Расположение этих панелей конфигурируется.

И так, давайте возьмем какой нибудь компонент за основу, чтобы не тратить время и не писать свой.

Я выбрал react-select

Создайте папку Select с файлом index.js в src следующего содержания

Это просто небольшая обертка для хранения состояния.

Теперь давайте добавим наш компонент в Storybook.

Делается это очень просто:

Код интуитивно понятен. storiesOf создает категорию, в которую вы можете добавлять различные компоненты.
Давайте добавим react-select в наш Storybook с возможностью мультивыбора

Сборка Storybook

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

По умолчанию файлы складываются в storybook-static. Вы можете открыть их в любом браузере.

Webpack и прочая конфигурация

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

Зачастую такой конфиг будет очень простым

Как вы видите, это просто импорт конфига из основного проекта. В наших экспериментах вам данный конфиг не понадобится.

Использование дополнений

Storybook имеет ряд рекомендуемых дополнений

дополнение action, создает своего рода функцию, результат выполнения которой вы увидете в Action Logger. Это может быть удобно для логирования параметров по типу onApply или onClick.

Достаточно полезными являются так называемые knobs. Они позволяют редактировать передаваемые параметры в компонент.

Необходимо импортировать установленный модуль в addons.js в директории .storybook

И в stories/index.js импортировать необходимые нам knobs

Давайте добавим возможность интерактивного манипулирования кнопкой

Теперь мы можем изменять текст кнопки и с помощью boolean задавать состояние кнопки.

Еще одним очень полезным дополнением является Info, данное дополнение автоматически документирует внешний API компонента.

И давайте немного изменим код нашей кнопки

Справа появится кнопка, с помощью которой вы можете открыть подробную информацию о компоненте

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

Источник

React Storybook: разрабатывайте красивые пользовательские интерфейсы с легкостью

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

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

Зачем вам нужен сборник рассказов?

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

Дизайнер или эксперт по UX

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

разработчик

Разработчик — это тот, кто создает эти компоненты, и, вероятно, главный бенефициар руководства по стилю. Два основных варианта использования для разработчика — найти подходящий компонент из библиотеки и протестировать его во время разработки.

тестер

Это дотошный человек, который следит за тем, чтобы компоненты были реализованы как положено. Основная часть работы тестера — убедиться, что компонент ведет себя корректно во всех отношениях. И хотя это не устраняет необходимость в интеграционном тестировании, зачастую это удобнее делать отдельно от самого проекта.

Владелец продукта

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

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

Если мне удалось убедить вас, давайте посмотрим, как мы можем настроить Storybook в проекте.

Настройка React Storybook

Чтобы создать сборник рассказов, установите getstorybook глобально

Затем перейдите к вашему проекту и запустите

Эта команда сделает три вещи:

Чтобы запустить Storybook, выполните npm run storybook и откройте отображаемый адрес ( http: // localhost: 9009 / ). Приложение должно выглядеть так:

Добавление нового контента

Теперь, когда у нас запущен React Storybook, давайте посмотрим, как мы можем добавлять новый контент. Каждая новая страница добавляется путем создания историй. Это фрагменты кода, которые визуализируют ваш компонент. Пример истории, созданной getstorybook выглядит следующим образом

Функция storiesOf создает новый раздел в меню навигации, а метод add создает новый подраздел. Вы можете структурировать сборник рассказов, как считаете нужным, но вы не можете создавать иерархии глубже двух уровней. Простым подходом к структурированию сборника рассказов является создание общих разделов верхнего уровня, таких как «Входы форм», «Навигация» или «Виджеты» для групп связанных элементов и подразделов для отдельных компонентов.

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

Написание новой истории

Теперь, когда мы немного адаптировали сборник рассказов к нашим потребностям, давайте напишем нашу первую историю. Но прежде всего нам нужно создать компонент для демонстрации. Давайте создадим простой компонент Name для отображения имени в цветном блоке. Компонент будет иметь следующие JavaScript и CSS.

Откройте сборник рассказов и взгляните на свой новый компонент. Результат должен выглядеть так:

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

Источник

Сборка компонента UI на React и Storybook

Storybook – это библиотека UI, которую можно использовать для документирования компонентов. Также она позволяет упорядочивать и собирать компоненты JavaScript. В этой статье вы узнаете, как создать интерактивный компонент пользовательского интерфейса с помощью React и Storybook. В конце руководства мы развернем Storybook как отдельное приложение.

Итак, сегодня вы узнаете:

1: Установка пакетов

Для начала нам нужно создать новый проект React, и для этого мы будем использовать приложение create-react-app – это отличный инструмент для создания скелета приложения React.

npx create-react-app storybook-app
cd storybook-app

Следующим шагом будет установка пакета storybook в проект:

Эта команда может автоматически определить используемый нами фреймворк из файла package.json и установить его версию из storybook. После выполнения обеих команд нужно подтвердить, что зависимости storybook-react установлены. Давайте перейдем к файлу package.json, чтобы увидеть, установлены ли пакеты, а затем запустим приложение и storybook.

npm start
npm run storybook

После выполнения этих команд приложения React и Storybook будут работать на разных портах.

2: Добавление историй в приложение React

Приведенный выше блок кода представляет собой конфигурацию для Storybook. Она помогает Storybook найти истории в каталоге src/stories. Создайте эту папку, если она еще не существует. В папке src создайте папку stories – именно здесь в конечном итоге будут расположены все компоненты, для которых мы будем создавать истории. В этом руководстве мы создадим компонент Button, и для него мы будем документировать истории в папке stories. Создайте компонент Button в каталоге компонентов с помощью следующих строк:

Теперь мы можем добавить историю для созданной кнопки. В каталоге stories создайте файл и назовите его buttonStories.js, а затем добавьте в него такой код:

После этого создайте файл index.js, который будет служить базовым файлом для хранения всех историй. Позже мы сможем импортировать все в этот файл. Пока что импортируйте файл buttonStories.js (затем каждый новый файл, созданный в каталоге stories, мы будем импортировать в этот файл).

3: Установка расширений

Аддоны Storybook помогают внедрить дополнительные функции, чтобы сделать приложение более полезным и интерактивным. В этой статье к уже созданным историям мы добавим аддон Action. Actions можно использовать для отображения данных, полученных обработчиками событий в Storybook. Полный список аддонов, доступных в Storybook, можно найти здесь. Мы можем настроить аддон, если это еще не сделано по умолчанию.

Для начала установите пакет аддона с помощью этой команды.

Чтобы сделать историю кнопки интерактивной с помощью Storybook, можно добавить в buttonStories.js следующий код:

Вот и все. При запуске Storybook обратите внимание на вкладки внизу, и вы увидите вкладку Actions, в которой регистрируется каждое действие с кнопками.

4: Настройка тем

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

Это настроит темную тему.

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

В результате вы получите розовую тему.

5: Развертывание Storybook

Одна из функций, которая поставляется вместе с Storybook, – это возможность развернуть Storybook как статический сайт на любом хостинге. Для этого нам нужно добавить сценарий build-storybook в package.json:

npm run build-storybook

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

Заключение

В этом мануале вы узнали, как создавать интерактивные компоненты с помощью Storybook и React. Теперь у вас есть инструкции по интеграции библиотеки компонентов Storybook в проекты React.

В разработке Storybook будет единым источником истины как для разработчиков, так и для дизайнеров. А еще эту библиотеку можно интегрировать с другими интерфейсными фреймворками. Если вы ищете руководство по другим фреймворкам, почитайте официальную документацию Storybook. Полный код этого мануала можно найти на GitHub.

Источник