Storybook
otus.ru
Проверить, идет ли запись
Меня хорошо видно
& слышно?
Ставим “+”, если все хорошо
“-”, если есть проблемы
Storybook
Тема вебинара
Шепелев Максим
Главный разработчик
5 лет опыта фронтенд разработчиком, занимая разные должности от middle до tech-lead
Работаю в компании metacommerce
Для чего нужен storybook?
Storybook помогает разработчикам создавать, тестировать и документировать UI-компоненты в изоляции, не запуская всё приложение. Это упрощает отладку и совместную работу над интерфейсами.
Установка
Установка
Запустите команду для инициализации Storybook:��npm create storybook@latest��Это установит все зависимости для работы и создаст основные файлы:
.storybook/main.ts – содержит конфигурацию Storybook: пути к историям, настройки аддонов и прочее.
.storybook/preview.ts – определяет глобальные параметры и декораторы, применяемые ко всем историям.� src/stories/… - базовые примеры, которые можно сразу удалить�
Это позволяет быстро настроить окружение для разработки, документирования и тестирования UI-компонентов в изоляции.
Запуск
В package.json создастся 2 новых скрипта��
npm run storybook - запустит StoryBook на 6006 порту в режиме разработки
npm run build-storybook - собирает статические файлы в папку storybook-static, которые можно разместить на любом сервере для демонстрации компонентов.
Как добавить просмотр компонента?
Что такое "Stories"?
Stories — это отдельные примеры использования UI-компонентов, которые демонстрируют их внешний вид и поведение в различных состояниях. Они позволяют изолированно разрабатывать, тестировать и документировать компоненты, показывая, как компонент реагирует на разные пропсы и настройки.
�Чтобы создать сторис, нужно:
Создаем компонент
Для начала описываем простой компонент кнопки для ui-kit
Создаем Stories
Создаем переменную meta где описываем stories:��component - ссылка на наш компонент
title - наименование истории в виде пути��argTypes - специфичный объект Storybook, который описывает свойства (пропсы) компонента, их типы и поведение. ��Позволяет задать типы пропсов и возможные их варианты, для удобного управления
Создаем варианты использования компонента
render - необходим для отрисовки компонента�args - пропсы, которые будут прокинуты в качестве инициализации компонента
Вопросы?
Ставим “+”,
если вопросы есть
Ставим “–”,
если вопросов нет
Аддоны (addons)
Что за аддоны?
Аддоны — это плагины для Storybook, расширяющие его функциональность. Они позволяют добавлять новые возможности, например:
Actions - Отслеживание пользовательских событий (например, кликов).
Controls - Динамическое изменение пропсов компонента через UI.
Viewport - Тестирование адаптивности компонента на разных устройствах.
Backgrounds - Переключение фона для проверки визуального восприятия.�
Таким образом, аддоны помогают упростить разработку, �тестирование и документирование UI-компонентов.��А так же есть возможность писать кастомные аддоны
Actions
Помогает более удобно отлаживать компоненты в storybook, видеть какие события генерирует компонент при разных пользовательских сценариях
Controls
Помогает динамически управлять пропсами, можно настраиваться через argTypes
Viewports
Если есть необходимость просматривать компоненты при разных разрешениях
Backgrounds
Помогает посмотреть компоненты при разных задних фонах
Вопросы?
Ставим “+”,
если вопросы есть
Ставим “–”,
если вопросов нет
Тестирование
Как тестировать?
Storybook сам по себе не является тестовым фреймворком в традиционном понимании (как, например, Jest), но он предоставляет возможности для визуального и интерактивного тестирования компонентов.
Все устанавливается одной командой
��
npx storybook add @storybook/addon-vitest��Он создаст нужные файлы для vitest и подключит addon���
Пишем тест
В stories компонента нужно описать play функцию, далее как по шагам описать действия, это очень похоже на jest
�При открытии компонента интерактивные тесты будут запущены, таким образом можно проверять что компонент работает как задумано
Вопросы?
Ставим “+”,
если вопросы есть
Ставим “–”,
если вопросов нет
Декораторы
Для чего нужны декораторы?
Декораторы в Storybook позволяют оборачивать компонент в дополнительное окружение или контейнер, которое может предоставлять стили, контекст (например, тему, провайдер данных, роутинг) или выполнять иные действия до и после рендера компонента. Это удобно для:
Локальный декоратор
Локальный декоратор нужно описывать в объекте meta для каждой stories отдельно
Локальный декоратор
Пример локального декоратора с Theme Provider
Глобальный декоратор
В файле .storybook/preview мы можем описать все глобальные декораторы, которые будут по умолчанию оборачивать каждую stories
Вопросы?
Ставим “+”,
если вопросы есть
Ставим “–”,
если вопросов нет
Полезные материалы
Рефлексия
Заполните пожалуйста опрос о занятии по ссылке в чате