npm package: @huntflow/ui
Description: HuntFlow UiKit, icons, utils library
Author: HuntFlow Developer
Latest version: 0.2.47

# @huntflow/ui

<a href="https://www.npmjs.com/package/@huntflow/ui" target="\_parent">
  <img alt="" src="https://img.shields.io/npm/dm/@huntflow/ui.svg" />
</a>

<a href="https://deno.bundlejs.com/badge?q=@huntflow/ui@0.0.17&treeshake=[*]" target="\_parent">
  <img alt="" src="https://deno.bundlejs.com/badge?q=@huntflow/ui@0.0.17&treeshake=[*]" />
</a>

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

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

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

## 📦 Установка

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

```bash
npm install @huntflow/ui
```

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

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

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

await injectSvgSprite();
```

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

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

```bash
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. Скачайте новые иконки:  
```bash
npm run icons:download
```

4. Обновите типы и список иконок:  
```bash
npm run icons:update-list
```

5. Соберите SVG-спрайт из иконок:  
```bash
npm run sprite
```

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

```ts
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. В терминале выполните команду для конвертации токенов:
```bash
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` | Область перетаскивания и выбора файлов для загрузки |

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

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

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