npm package: @helloimkostya/konsolpro-custom-ui
Description: React UI дизайн-система, подготовленная для публикации и использования в **Figma Make** через Make kits.
Latest version: 0.0.409

# KonsolPro Custom UI

React UI дизайн-система, подготовленная для публикации и использования в **Figma Make** через Make kits.

Имя опубликованного пакета:

- `@helloimkostya/konsolpro-custom-ui`

## Что внутри

- Готовая к продакшену библиотека React-компонентов
- Общие дизайн-токены через `CSS variables`
- Сборка пакета на Vite (ESM)
- Storybook для визуальной проверки
- Документация и чеклисты для публикации в Figma Make

## Готовность к Figma Make

Пакет подготовлен под требования Figma Make:

- React-кодовая база
- Выходной формат совместим с npm-пакетом
- Сборка совместима с Vite
- В `package.json` нет локальных monorepo-зависимостей `workspace:` / `file:` / `link:`
- Есть отдельный документ с правилами для Make kit

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

- Исходники компонентов: `src/components`
- Публичная точка входа пакета: `src/index.ts`
- Точка входа компонентов: `src/components/index.ts`
- Глобальные стили: `src/styles/globals.css`
- Токены-переменные: `src/styles/variables.css`
- Рекомендации для Figma Make: `Guidelines.md`
- Подробный чеклист публикации: `docs/FIGMA_MAKE_PUBLISH_CHECKLIST.md`

## Требования

- Node.js `>=20.16.0`
- Yarn `>=3.4.1`

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

```bash
corepack yarn install
```

## Разработка

```bash
corepack yarn dev
```

## Сборка пакета

```bash
corepack yarn build
```

Результат сборки:

- JS: `dist/lib`
- Types: `dist/types`
- Styles: `dist/styles/custom-ui.css`
- Variables: `dist/styles/variables.css`

## Локальная проверка артефакта перед публикацией

```bash
corepack yarn build
npm pack
```

После этого проверь сгенерированный `.tgz`, что в него попал `dist/**`.

## Публикация в npm (public)

```bash
npm login
npm publish --access public
```

## Публикация в приватный npm-реестр Figma

1. Открой файл Figma Make.
2. Перейди в **Make settings -> Figma npm registry**.
3. Сгенерируй креды (действие администратора организации).
4. Добавь сгенерированный сниппет в `.npmrc`.
5. Опубликуй:

```bash
npm publish
```

## Использование в Figma Make kit

1. Опубликуй пакет (в public npm или приватный npm-реестр Figma).
2. Создай новый Make kit или открой существующий.
3. Добавь зависимость на пакет в kit.
4. Добавь содержимое `Guidelines.md` как guidelines для kit.
5. Проверь сгенерированный результат по правилам использования компонентов.

## Документация

- Чеклист публикации: `docs/FIGMA_MAKE_PUBLISH_CHECKLIST.md`
- Подробный гайд по миграции и операционке: `docs/FIGMA_MAKE_MIGRATION.md`
- Пакет golden prompts: `docs/FIGMA_MAKE_GOLDEN_PROMPTS.md`
- QA-чеклист для близкого к проду результата: `docs/FIGMA_MAKE_QA_CHECKLIST.md`
- Маппинг токенов к компонентам: `docs/FIGMA_MAKE_TOKEN_MAPPING.md`
- Библиотека шаблонов для PM (8 базовых экранов): `docs/FIGMA_MAKE_TEMPLATE_LIBRARY.md`
- Управление промптами (global/template/task): `docs/FIGMA_MAKE_PROMPT_GOVERNANCE.md`
- Runtime-рекомендации по промптингу для Figma Make: `Guidelines.md`
- Системные промпты для Lovable (полный и короткий): `docs/LOVABLE_SYSTEM_PROMPTS.md`
- Пересборка экранов из Lovable-архива `project-source.zip` компонентами DS: `docs/PROJECT_SOURCE_SCREEN_INVENTORY.md`, `docs/PROJECT_SOURCE_DS_MIGRATION.md`
- Эталон виджета консоли на DS: `src/examples/project-source/ConsoleCompanyCardDs.tsx`
- Главный экран WFM (дашборд как в Lovable `Index.tsx`, мок-данные): `src/wfm-main-dashboard-page.tsx` — в dev сейчас подключён через `src/main.tsx`