Дизайн-система для разработки пользовательского интерфейса, обеспечивающая единообразие, доступность и повышение производительности в процессе создания веб-приложения.
Apollo предоставляет библиотеку готовых компонентов, обеспечивая их стилизацию и поведение для использования в проектах.
- Button - компонент кнопки;
- Divider - компонент разделителя;
- Icon - компонент иконки (принимает в себя ICONS);
- Input - компонент текстового поля;
- SanitizedHtml - компонент для безопасного отображения HTML контента.
В дизайн-системе представлен разнообразный набор иконок, упрощающий визуальное оформление интерфейса.
Apollo предоставляет коллекцию пользовательских хуков, облегчающих управление состоянием, эффектами и другими аспектами взаимодействия с компонентами и данными.
- useAdaptive - позволяет определить тип адаптивности устройства;
- useBase64ImageUrlByFile - позволяет преобразовать файл изображения в строку Base64 и получить его URL;
- useClickOutside - позволяет обрабатывать события клика вне определенного DOM-элемента;
- useDisableScroll - позволяет управлять возможностью прокрутки страницы;
- useInterval - позволяет создавать интервальные вызовы функции-колбэка с указанным интервалом;
- useLocalStorage - позволяет синхронизировать состояние компонента с данными из localStorage;
- usePrevious - позволяет получить предыдущее значение переменной или состояния.
В дизайн-системе доступен набор утилитарных функций, которые помогают в решении типичных задач.
- generateClassNames - генерирует строку с классами в стиле BEM для использования в компонентах;
- getGuid - генерирует и возвращает уникальный идентификатор (GUID);
- lStorage - предоставляет методы для работы с локальным хранилищем браузера (localStorage);
- sStorage - предоставляет методы для работы с сеансовым хранилищем браузера (sessionStorage).
Apollo предоставляет набор типов данных и перечислений для обеспечения строгой типизации и удобства работы с данными в проекте.
Types
- CFC - Функциональный компонент с дочерними элементами;
- TFunc - Функция с определенными аргументами и возвращаемым значением;
- TRef - Ссылка на DOM-элемент;
- TSetAction - Функция обновления состояния;
- TSetTimeout - Возвращаемое значение функции setTimeout;
- TIcon - Компонент React, представляющий иконку SVG;
- TNullable - Значение, которое может быть либо заданным типом, либо null;
- TUnkObject - Объект с неопределенными свойствами;
- TOption - Опция в списке опций;
- TOptions - Массив опций;
- TSearchOptions - Функция для поиска опций.
Enums
- RuntimeStatuses - перечисление, определяющее различные статусы выполнения приложения или компонента;
- InfoStatuses - перечисление, определеющее информативные статусы.
Дизайн-система включает в себя гибкую систему стилей, позволяющую легко настраивать внешний вид компонентов и обеспечивать их соответствие дизайну проекта.
Themes
- Light theme - светлая тема;
- Dark theme - тёмная тема.
Brands
- Orange - оранжевый;
- Teal - зеленый;
- Magenta - розовый;
- Purple - фиолетовый;
- Blue - синий.
Fonts
- Comforta - главный шрифт;
- Inter - вспомогательный шрифт;
- Pacifico - курсивный шрифт;
- Helvetica Neue - шрифт по умолчанию.
Дизайн-систему Apollo можно интегрировать в любой React проект, используя ее компоненты, инструменты и стили для улучшения процесса разработки и качества пользовательского интерфейса.