0.2.2 • Published 1 year ago

@d.story/apollo-ui v0.2.2

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

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';
0.1.10

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.9

1 year ago

0.2.2

1 year ago

0.1.6

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.5

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.0

1 year ago

0.0.1

1 year ago

1.0.0

1 year ago