@evgen-sorokin/ui-kit

Библиотека Vue 3-компонентов для микрофронтов. Сейчас настраиваем пайплайн и начинаем с одного атома — UiButton. По мере готовности структура будет расширяться по схеме «один компонент = одна папка со своими стилями (БЭМ + Tailwind через @apply)».

README обновляем после каждого изменения: добавили проп, поменяли структуру — отразили здесь.

Возможности (на текущем этапе)

• ✅ Атом UiButton с вариантами, размерами, состояниями loading/disabled и слотами под иконки.
• ✅ Сегментные импорты вида @evgen-sorokin/ui-kit/atoms/button (ESM с preserveModules).
• 🔧 Плагин install для быстрой регистрации компонентов (app.use(UiKit)).
• 🔧 Vite library build (npm run build) с входной точкой src/index.ts и SCSS-стилями рядом с компонентами.
• 🧪 Playground (npm run dev) для локальной проверки состояний кнопки.

Следующие компоненты будем добавлять после финализации структуры (см. AGENTS.md).

Установка

npm install @evgen-sorokin/ui-kit

Пакет ожидает, что в хост-приложении установлены:

• vue@^3.5.22
• TailwindCSS v4 + PostCSS (@tailwindcss/postcss, autoprefixer) либо вы импортируете dist/style.css.
• Для разработки самой библиотеки используем sass-embedded (уже в devDependencies).

Использование

Точечный импорт

import { UiButton } from "@evgen-sorokin/ui-kit";

Импорт по сегменту (атомы)

import { UiButton } from "@evgen-sorokin/ui-kit/atoms/button";

Глобальная регистрация

import { createApp } from "vue";
import App from "./App.vue";
import UiKit from "@evgen-sorokin/ui-kit";

const app = createApp(App);
app.use(UiKit);
app.mount("#app");

Playground

npm install
npm run dev    # http://localhost:4001

В текущей версии playground показывает только UiButton. Dev-файлы (src/app.vue) не входят в финальный бандл.

Скрипты

• npm run dev — локальный playground.
• npm run build — сборка библиотеки в dist/.
• npm run lint / npm run lint:fix — ESLint + Prettier.
• npm run format / npm run format:check — форматирование исходников.

Структура (Button)

### Темизация

`src/atoms/button/button.scss` задаёт набор CSS-переменных в `:root` (`--ui-button-*`). Переопределяя их в проекте, можно менять цвета, скругления и размеры без правки компонента.
src/
  atoms/
    button/
      Button.vue      # логика + шаблон
      button.scss     # БЭМ + CSS-переменные (по умолчанию заданы в :root)
      index.ts        # экспорт компонента
    index.ts          # реестр атомов
  molecules/
    index.ts          # (пока пустой) реестр молекул
  registry.ts         # объединённый реестр для install()
  install.ts          # Vue-плагин
  index.ts            # входная точка библиотеки

Лицензия

MIT — см. package.json.