open-index/open-npm huggingface dataset:
npm package: @soroka282/migrant.ui-kit
Description: Библиотека переиспользуемых компонентов для проектов Migrant. Построена на [Vue 3](https://vuejs.org/) с поддержкой TypeScript и scoped-стилей.
Latest version: 0.0.85

# 📖 Migrant UI Kit

Библиотека переиспользуемых компонентов для проектов Migrant. Построена на [Vue 3](https://vuejs.org/) с поддержкой TypeScript и scoped-стилей.

## 📦 Установка и использование библиотеки

```bash
  npm install @soroka282/migrant.ui-kit
```
или
```bash
  yarn add @soroka282/migrant.ui-kit
```

### 🛠️ Использование компонентов

```
<script setup lang="ts">
    import {
      UIButton,
      UIColor,
      UIColorName,
      UISize,
    } from '@soroka282/migrant.ui-kit';
</script>

<template>
  <UIButton
    is-box-shadow
    :size="UISize.S"
    :color="UIColor[UIColorName.White]"
    :bg-color="UIColor[UIColorName.PurpleMain]"
  >
    Кнопка
  </UIButton>
</template>
```

### ⚙️ TypeScript автодополнение

Убедитесь, что `tsconfig.json` содержит:

```json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "paths": {
      "@soroka282/migrant.ui-kit": ["node_modules/@soroka282/migrant.ui-kit"]
    }
  }
}
```

## 💻 Разработка

#### Установка зависимостей
```bash
    npm i
```
Проверить, что установился .husky и commit-msg (.husky/commit-msg) имеет:
```
node scripts/verify-commit.js
```

#### Запуск локального проекта:
```bash
  npm run dev
```

#### Запуск локального сторибука
```bash
    npm run storybook
```

## 🧪 Коммиты

Формат коммитов:
```
<номер задачи>/<тип>(<scope>): <описание>
```

Если задача в трекере отсутствует:
```
<тип>(<scope>): <описание>
```

#### Типы коммитов:

- `feat` — добавление нового функционала
- `fix` — исправление ошибок
- `docs` — изменение документации
- `build` — сборка и настройка инфраструктуры (vite, tsconfig и т.п.)

#### Примеры:

```
EVOLVE-1/feat(useIframeHandler): добавлен новый composable метод
EVOLVE-2/fix(UIInput): обработка событий при потере фокуса
EVOLVE-3/build(vite.config): релиз библиотеки

feat(useIframeHandler): добавлен новый composable метод
build(vite.config): релиз библиотеки
```

## 🛠️ Сборка библиотеки

Билд библиотеки:
```bash
    npm run build
```

Генерация .d.ts:
```bash
    npm run ts
```

### Публикация пакета в npm

- Поднять version в package.json 
- Опубликовать:
```bash
    npm run publish:npm
```

## 📖 Storybook

Сборка:
```bash
    npm run build:storybook
```

## 🥉 Используемые зависимости

- [Vue 3](https://vuejs.org/) — основной фреймворк
- [Pinia](https://pinia.vuejs.org/) — управление состоянием
- [Maska](https://beholdr.github.io/maska/) — маски ввода
- [Swiper](https://swiperjs.com/) — свайпер/карусель
- [Vue-toastification](https://vue-toastification.maronato.dev/) — уведомления (тосты)

## 🎨 Глобальные стили (optional)

В `main.ts`:

```ts
import '@soroka282/migrant.ui-kit/dist/style.css';
```