Apollo

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

Основные компоненты

Компоненты

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

• Button - компонент кнопки;
• ControlWrapper - компонент обертка;
• Divider - компонент разделителя;
• Icon - компонент иконки (принимает в себя ICONS);
• Input - компонент текстового поля;
• PageHeader - компонент заголовка страницы;
• SanitizedHtml - компонент для безопасного отображения HTML контента;
• Text - компонент текста.

Иконки

В дизайн-системе представлен разнообразный набор иконок, упрощающий визуальное оформление интерфейса.

Дополнительные инструменты

Хуки

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 - светлая тема (по-умолчанию);
• Dark - тёмная тема.

Brands

• Orange - оранжевый (по-умолчанию);
• Teal - зеленый;
• Magenta - розовый.

Fonts

• Montserrat Alternates - основной шрифт всех компонентов;
• Inter - вспомогательный шрифт;
• Pacifico - курсивный шрифт;
• Helvetica Neue - шрифт по умолчанию.

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

Импорт компонентов

import { Button } from '@d.story/apollo-ui';

Импорт стилей

Необходимо добавить следующую строчку в основной фал стилей после всех других импортов

@import '@d.story/apollo-ui/dist/css/index.css';