RATE-UI

Перейти в Storybook

Данный проект представляет собой электронную книгу всех компонентов
которые используются в проекте RATE

Технологии и их описание которые используются:

Storybook

https://storybook.js.org/

Формирует электронную книгу компонентов, предоставляет визуальную составляющую и описание компонентов + варианты использования

Примеры:

• Airbnb
• Storybook example

Плюсы использования:

• Дает представление в удобном виде об UI проекта
• Удобное тестирование
• Легко вносить изменения заказчика
• Улучшает поддержку проекта
• Готовый экскурс в UI для нового разработчика
• ....

Минусы использования:

• Увеличивает время на разработку и поддержание проекта в актуальном состоянии (для Junior на 15%, Middle - 10%, Senior - 5%, примерно 😁)

Chromatic

https://www.chromaticqa.com/

Chromatic - это дополнение к Storybook, которое автоматически превращает ваши истории в спецификации визуальных тестов.

Аддон загружает ваш комплект Storybook в нашу инфраструктуру Capture Cloud, где ваши тесты выполняются параллельно в согласованной среде браузера.

Diff Detector отображает пользовательский интерфейс каждой истории и делает визуальный снимок. Снимки сравниваются с « базовыми уровнями » - последним известным хорошим положением историй. Если есть визуальные изменения, мы уведомляем вас в PR, электронной почте или через CI.

Затем вы просматриваете изменения с помощью Merge Manager , веб-интерфейса, который помогает выявлять ошибки и обновлять базовые показатели. Тесты проходят, когда нет изменений или все изменения приняты.

Плюсы использования:

• Предоставляет полный (новый) workflow для разработки и тестирования
• ....

Минусы использования:

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

Bit

https://bit.dev/

Bit - это инструмент с открытым исходным кодом для совместной работы над изолированными компонентами в проектах и репозиториях.

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

Вы можете настроить свой собственный сервер для совместной работы компонентов или использовать облачный хостинг bit.dev для совместного использования частных и общедоступных компонентов.

[]

Плюсы использования:

• Отделяет UI компонентов в отдельную среду
• Универсальные компоненты можно переиспользовать
• ....

Минусы использования:

• Некоторые функции платные, но на начальном этапе хватает бесплатных вполне
• Необходимо немного времени новому разработчику чтобы вникнуть в workflow