Совет по настройке вашего React-Styleguidist

Среда разработки пользовательского интерфейса (согласно определению ThoughtWorks Technology Radar) представляет собой комплексную интерактивную среду, которая позволяет нам быстро и легко создавать компоненты пользовательского интерфейса, которые облегчают взаимодействие между командой дизайнеров и инженерами пользовательского интерфейса. Это означает некий тип живой интерактивной документации или каталог компонентов. Дизайнеров часто называют библиотекой шаблонов - это основа каждой дизайн-системы.

Этот инструмент можно использовать отдельно при разработке библиотеки компонентов (UI Kit), а также встроенных компонентов в веб-приложение.

React-Styleguidist, Storybook или MDX - обычные инструменты для создания и настройки пользовательского интерфейса при программировании с React.js. В этой статье я хотел бы поделиться парой лайфхаков, направленных на улучшение среды разработки, на примере React-Styleguidist, который мы используем в нашем приложении.

1. Опишите подключенные компоненты

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

Связь с магазином не является препятствием для добавления таких компонентов в среду разработки пользовательского интерфейса. Мы можем просто обернуть компонент по провайдеру. Например, redux-mock-store может помочь нам имитировать магазин приложений с определенным состоянием.

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

2. Разработка мобильной версии компонента.

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

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

В React-Styleguidist вы можете удалить боковое меню с помощью соответствующей точки останова в конфигурации (ширина меню и область компонентов также могут быть настроены, все значения в px):

// styleguide.config.js
theme: {
    mq: {
      small: '@media (max-width: 768px)'
    },
    sidebarWidth: 300,
    maxWidth: 1280
}

3. Иконография

Если веб-приложение использует собственные пользовательские значки, было бы неплохо организовать каталог значков (набор значков), где вы можете быстро найти значки и пиктограммы, которые уже существуют в базе кода.

Такой встроенный каталог можно оснастить поиском и фильтрами. Если вы используете значки как компоненты SVG React, то вы можете легко добавить их в React-Styleguidist.



Основные преимущества, которые вы можете получить от Icon-Components в React.js
Иконки являются частью интерфейса любой системы. Мы можем представить их как набор маленьких картинок или интерпретировать их… medium.com



4. Типографика

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

5. Настроить руководство по стилю

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



Cookbook
Используйте ref prop как функцию и назначьте ссылку на локальную переменную: Styleguidist будет игнорировать тесты (папка __tests__… react-styleguidist.js.org



Если у вас есть мысли по этой теме, поделитесь ими в комментариях!