@alik_avizha/libs-train

React UI-библиотека с компонентом Button. Сборка через Vite, типы через TypeScript.

Установка

yarn install

После yarn install автоматически активируется Husky и pre-commit hook.

Разработка

Локальный playground с информацией о пакете и демо компонентов:

yarn dev

Откройте http://localhost:5173 — на странице отображаются имя, версия, лицензия и демо Button.

Скрипты

| Команда | Описание | |---------|----------| | yarn dev | Playground (Vite dev server) | | yarn build | Сборка библиотеки в dist/ | | yarn lint | ESLint | | yarn typecheck | Проверка типов без emit | | yarn preview | Превью production-сборки playground | | yarn version:patch | Повысить patch-версию (1.0.5 → 1.0.6) | | yarn version:minor | Повысить minor-версию (1.0.5 → 1.1.0) | | yarn version:major | Повысить major-версию (1.0.5 → 2.0.0) | | yarn version:check | Проверить, что версия поднята при изменении src/ |

Версионирование

Версия хранится в package.json. Для ручного bump используйте утилиту:

# Исправления, обратно совместимые
yarn version:patch

# Новая функциональность, обратно совместимая
yarn version:minor

# Breaking changes
yarn version:major

Скрипт scripts/bump-version.mjs обновляет поле version в package.json. После bump не забудьте добавить файл в коммит:

git add package.json

Pre-commit hook

При коммите Husky запускает yarn version:check (scripts/check-version-bump.mjs).

Правило: если в коммите есть изменения в src/, версия в package.json должна отличаться от версии в последнем коммите.

Пример рабочего flow:

# 1. Изменили компонент
vim src/components/button/button.tsx

# 2. Подняли версию
yarn version:patch

# 3. Закоммитили всё вместе
git add src/components/button/button.tsx package.json
git commit -m "fix(button): add disabled state"

Коммит не пройдёт, если:

• изменён src/, но версия не поднята;
• версия поднята в файле, но package.json не добавлен в stage (git add package.json).

Изменения только в playground/, CI, README и прочих файлах вне src/ не требуют bump версии.

Публикация в npm

Локальная сборка

yarn build

Артефакты:

• dist/libs-train.es.js — ES module
• dist/libs-train.umd.js — UMD
• dist/index.d.ts — типы

GitLab CI

Pipeline (.gitlab-ci.yml):

| Stage | Job | Описание | |-------|-----|----------| | install | install | yarn install --frozen-lockfile, кэш node_modules | | lint | lint | yarn lint | | lint | typecheck | yarn typecheck | | build | build | yarn build, артефакт dist/ | | publish | publish:npm | Публикация в npm только по git-тегу |

Публикация запускается при push тега формата v1.2.3. Версия в теге должна совпадать с package.json (тег v1.0.6 ↔ "version": "1.0.6").

Настройка GitLab

1. CI/CD → Variables — добавить NPM_TOKEN (masked, protected):

   • создать токен на npmjs.com с правом Publish;
   • тип: Automation или Granular Access Token.

2. Релизный flow:

yarn version:patch          # или minor / major
git add package.json
git commit -m "chore: release v1.0.6"
git tag v1.0.6
git push origin main
git push origin v1.0.6

Pipeline на теге выполнит install → lint → typecheck → build → npm publish.

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

npm install @alik_avizha/libs-train

import { Button } from "@alik_avizha/libs-train";

<Button label="Click me" onClick={() => console.log("clicked")} />

Peer dependencies: react и react-dom >= 17.

Структура проекта

src/                  # Исходники библиотеки (публикуются в npm)
  components/
  index.ts
playground/           # Локальное демо (не входит в npm-пакет)
scripts/
  bump-version.mjs    # Утилита major / minor / patch
  check-version-bump.mjs
.husky/
  pre-commit          # Проверка версии