@huntflow/ui

@huntflow/ui — это библиотека компонентов, предназначенная для создания удобных, масштабируемых и согласованных пользовательских интерфейсов. Проект ориентирован на упрощение разработки и поддержания единого стиля интерфейса во всех продуктах компании.

🚀 Основные возможности

• Модульные компоненты: легко комбинируются для создания сложных интерфейсов.
• Высокая кастомизация: поддержка теминга и настройки стилей.
• Совместимость: оптимизирован для работы с Vue3 + TypeScript
• Адаптивность: все компоненты поддерживают мобильные устройства.

📦 Установка

Для добавления UiKit в ваш проект выполните:

npm install @huntflow/ui

Подключение в проекте

Подключите глобальные стили и один раз внедрите SVG-спрайт для иконок:

import '@huntflow/ui/dist/global.css';
import { injectSvgSprite } from '@huntflow/ui';

await injectSvgSprite();

📚 Документация и разработка

• Storybook — каталог компонентов и примеры использования. Локальный запуск:

npm run storybook

🎨 Иконки

Актуализация иконок

Чтобы актуализировать иконки, выполните следующие шаги:

1. Создайте файл .env (можно использовать пример из .env.develop).

2. Укажите необходимые переменные:

   • FIGMA_TOKEN — персональный токен Figma
     (Иконка профиля -> Settings -> Security -> Personal access tokens -> Generate new token)

   • FIGMA_FILE_ID — ID файла Figma
     Пример:

     Ссылка: https://www.figma.com/design/DV8Zm9gdvUocVlrqD8egvV/Igor-(New-UI-Kit)?node-id=1581-180&p=f&t=YzO5zlBlx3wPY5HW-0
     FIGMA_FILE_ID = DV8Zm9gdvUocVlrqD8egvV

   • NODE_ID — ID узла Figma
     Пример из той же ссылки:

     NODE_ID = 1581-180, указываем через двоеточие (1581:180)

3. Скачайте новые иконки:

npm run icons:download

4. Обновите типы и список иконок:

npm run icons:update-list

5. Соберите SVG-спрайт из иконок:

npm run sprite

Для отображения иконок нужно один раз внедрить SVG-спрайт:

import { injectSvgSprite } from '@huntflow/ui';

await injectSvgSprite();

Добавление новых токенов из Figma

1. В Figma откройте Plugins → Sync Variables.

2. В правой панели в плагине:

   • В правой панели где открылся плагин ставим галочки
   • Жмем Generate → Copy to clipboard.

3. Вставьте скопированные токены в файл:

src/assets/css/token.css

4. В терминале выполните команду для конвертации токенов:

npm run tokens:convert

Компоненты

| Компонент | Описание | |-----------|----------| | UiButton | Стандартная кнопка | | UiButtonIcon | Кнопка только с иконкой, без текста | | UiButtonLink | Кнопка в виде ссылки, с опциональной иконкой и замочком | | UiIcon | Иконка из SVG-спрайта | | UiInput | Инпут | | UiTextarea | Многострочное поле ввода | | UiLabel | Лейбл для полей форм | | UiLoader | Индикатор загрузки (спиннер) | | UiPlank | Плашка | | UiText | Текстовый блок | | UiTitle | Заголовок (h1–h4) | | UiError | Отображение сообщения об ошибке в формах | | UiAvatar | Аватар пользователя | | UiStack | Flex-контейнер для компоновки элементов с настройкой gap и выравнивания | | UiRadioGroup | Группа радиокнопок | | UiCheckboxGroup | Группа чекбоксов | | UiDropzone | Область перетаскивания и выбора файлов для загрузки |

Пример использования

import { UiButton, UiIcon } from '@huntflow/ui';

<ui-button>Кнопка</ui-button>
<ui-icon name="icon-name" />