📖 RM UI Kit

Библиотека переиспользуемых компонентов для проекта rosmigrant.online. Построена на Vue 3 с поддержкой TypeScript и scoped-стилей.

📦 Установка и использование библиотеки

  npm install @soroka282/rm.ui-kit

или

  yarn add @soroka282/rm.ui-kit

🛠️ Использование компонентов

<script setup lang="ts">
    import {
      UIButton,
      UIColor,
      UIColorName,
      UISize,
    } from '@soroka282/rm.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 содержит:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "paths": {
      "@soroka282/migrant.ui-kit": ["node_modules/@soroka282/rm.ui-kit"]
    }
  }
}

💻 Разработка

Установка зависимостей

    npm i

Проверить, что установился .husky и commit-msg (.husky/commit-msg) имеет:

node scripts/verify-commit.js

Запуск локального проекта:

  npm run dev

Запуск локального сторибука

    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): релиз библиотеки

🛠️ Сборка библиотеки

Билд библиотеки:

    npm run build

Генерация .d.ts:

    npm run ts

Публикация пакета в npm

• Поднять version в package.json
• Обновить AI-документацию (если в версии были структурные изменения):
  • AGENTS.md — общая карта репозитория
  • docs/ui-kit-for-agents.md — детальный гид по ui-киту
• Опубликовать:

    npm run publish:npm

Скрипт автоматически проверит, что хотя бы один из AI-контекст файлов был изменён с момента последнего git-тега. Если нет — публикация заблокируется с подсказкой.
Чтобы пропустить проверку (если изменения в документации не нужны):

    npm run publish:npm -- --skip-docs-check

📖 Storybook

Сборка:

    npm run build:storybook

🥉 Используемые зависимости

• Vue 3 — основной фреймворк
• Pinia — управление состоянием
• Maska — маски ввода
• Swiper — свайпер/карусель
• Vue-toastification — уведомления (тосты)

🎨 Глобальные стили (optional)

В main.ts:

import '@soroka282/rm.ui-kit/dist/style.css';

🧭 Документация для агентов/ИИ

• Общая карта репозитория для агентов: AGENTS.md
• Подробный гид по структуре ui‑кита: docs/ui-kit-for-agents.md