@huntflow/ui v0.1.2

@huntflow/ui

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

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

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

📦 Установка

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

npm install @huntflow/ui

📚 Storybook

npm run storybook

🎨 Иконки

Для того, чтобы актуализировать иконки, необходимо создать .env (пример в .env.develop):

• указать свой токен Figma (Help and account → Account settings → Security → Personal access tokens)
• необходимый FIGMA_FILE_ID (Например: https://www.figma.com/design/DV8Zm9gdvUocVlrqD8egvV/Igor-(New-UI-Kit)?node-id=1581-180&p=f&t=YzO5zlBlx3wPY5HW-0 это DV8Zm9gdvUocVlrqD8egvV)
• необходимый NODE_ID (Например: https://www.figma.com/design/DV8Zm9gdvUocVlrqD8egvV/Igor-(New-UI-Kit)?node-id=1581-180&p=f&t=YzO5zlBlx3wPY5HW-0 это 1581-180, указываем через двоеточие)

Css переменные

Файлы с переменными генерируются, В ручную их не редактировать. Для начала необходимо из проекта экспортировать переменные с помощью плагина в Figma Sync variables, полученный файл сохранить в /utils/variables.css. Затем запустить скрипт форматирования

npm run variables

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

import '@huntflow/ui/global.css'

import { Button } from '@huntflow/ui'

import { UserIcon } from '@huntflow/ui/icons'

import { formatDate } from '@huntflow/ui/utils'