diff --git a/.agents/skills/reui/SKILL.md b/.agents/skills/reui/SKILL.md new file mode 100644 index 0000000..c84e016 --- /dev/null +++ b/.agents/skills/reui/SKILL.md @@ -0,0 +1,63 @@ +--- +name: reui +description: ReUI enterprise-компоненты в vps-tracker — registry @reui, CLI, импорты, матрица выбора. Использовать при Data Grid, Filters, Autocomplete, Number Field, Date Selector и других @reui/* задачах. +--- + +# ReUI (vps-tracker) + +## Источники + +1. [llms.txt](https://reui.io/llms.txt) — каталог для ИИ +2. MCP `plugin-shadcn-shadcn` с `registries: ["@reui"]` +3. Docs: `https://reui.io/docs/components/base/` (Copy Markdown) +4. Правила: `.cursor/rules/reui-mcp.mdc` + +## CLI (только из apps/web) + +```bash +cd apps/web +pnpm dlx shadcn@latest add @reui/data-grid --dry-run +pnpm dlx shadcn@latest add @reui/filters +``` + +## Размещение + +| Registry | Путь | Импорт | +|----------|------|--------| +| `@shadcn` | `packages/ui/src/components/` | `@cfdm/ui/components/*` | +| `@reui` | `apps/web/src/components/reui/` | `@/components/reui/*` | + +Только **Base UI** (`base-nova`). Radix-варианты не использовать. + +## Уже установлено + +`autocomplete`, `badge`, `color-picker`, `data-grid/*`, `date-selector`, `filters`, `number-field` + +## Shared-обёртки проекта + +| ReUI | Обёртка | +|------|---------| +| data-grid | `DataGridCard` | +| filters | `VpsFiltersToolbar` | +| autocomplete | `AutoCompleteInput` | +| date-selector | `lib/date-selector-i18n.ts` | + +## Матрица выбора + +- Простая таблица → shadcn `Table` +- Списки с sort/pagination/virtual/columns → `DataGridCard` (`@reui/data-grid`) +- Мультифильтры → `@reui/filters` +- Числа со stepper → `@reui/number-field` +- Semantic status → `StatusBadge` или `@reui/badge` variant + +## Зависимости (apps/web only) + +`@tanstack/react-table`, `@tanstack/react-virtual`, `@dnd-kit/*`, `date-fns`, `react-day-picker` + +После add — `pnpm install` + `pnpm --filter web build`. + +## Post-add + +- `@/components/ui/*` → `@cfdm/ui/components/*` +- Не класть ReUI в `packages/ui` +- Semantic colors: `variant="success"` — не `bg-emerald-*` diff --git a/.cursor/rules/backend-api-ui.mdc b/.cursor/rules/backend-api-ui.mdc index 0f91e77..484a221 100644 --- a/.cursor/rules/backend-api-ui.mdc +++ b/.cursor/rules/backend-api-ui.mdc @@ -12,7 +12,7 @@ Fastify backend: `apps/api/`. Контракты — `@cfdm/shared` (Zod). Front 1. **Backend** — route, service, Vitest (`app.inject()`) 2. **Схемы** — `@cfdm/shared` (не дублировать в `apps/web/src/lib/schemas.ts`) -3. **UI** — shadcn MCP ([`shadcn-mcp.mdc`](shadcn-mcp.mdc)) +3. **UI** — shadcn MCP ([`shadcn-mcp.mdc`](shadcn-mcp.mdc)); списки/фильтры — ReUI ([`reui-mcp.mdc`](reui-mcp.mdc)) ## Запрещено на frontend при доработке API @@ -24,7 +24,7 @@ Fastify backend: `apps/api/`. Контракты — `@cfdm/shared` (Zod). Front | API-данные | UI | |------------|-----| -| Список | `Table` / `DataTableCard` | +| Список | `DataGridCard` (сложные) / `Table` (простые) | | Создание | `Card` + `FieldGroup` + RHF | | Статус | `Badge` variants | | Ошибка | `sonner` `toast.error` | diff --git a/.cursor/rules/frontend-monorepo.mdc b/.cursor/rules/frontend-monorepo.mdc index f656f8c..98baac6 100644 --- a/.cursor/rules/frontend-monorepo.mdc +++ b/.cursor/rules/frontend-monorepo.mdc @@ -4,9 +4,9 @@ globs: apps/web/**/*,packages/ui/**/* alwaysApply: false --- -# Frontend Monorepo (shadcn/ui) +# Frontend Monorepo (shadcn/ui + ReUI) -**Обязательный стандарт структуры** — [Monorepo docs](https://ui.shadcn.com/docs/monorepo). +**Обязательный стандарт структуры** — [Monorepo docs](https://ui.shadcn.com/docs/monorepo), ReUI — [Get Started](https://reui.io/docs/get-started). ## Layout @@ -25,7 +25,13 @@ packages/db/ # @cfdm/db — Drizzle schema, repositories | [`apps/web/components.json`](apps/web/components.json) | App aliases; `ui` → `@cfdm/ui/components` | | [`packages/ui/components.json`](packages/ui/components.json) | UI package aliases | -**Синхронизировать:** `style`, `iconLibrary`, `baseColor` в обоих файлах. +**Синхронизировать:** `style`, `iconLibrary`, `baseColor`, `registries` в обоих файлах. + +```json +"registries": { + "@reui": "https://reui.io/r/{style}/{name}.json" +} +``` ## CLI — только из apps/web @@ -35,6 +41,8 @@ pnpm dlx shadcn@latest docs button pnpm dlx shadcn@latest add button pnpm dlx shadcn@latest add sidebar-07 pnpm dlx shadcn@latest add login-03 +pnpm dlx shadcn@latest add @reui/data-grid +pnpm dlx shadcn@latest add @reui/filters pnpm dlx shadcn@latest apply b2fA --only theme -y ``` @@ -52,6 +60,8 @@ pnpm dlx shadcn@latest info --json |---------|------| | `add button` | `packages/ui/src/components/button.tsx` | | `add login-03` | примитивы → `packages/ui`, block → `apps/web/src/components/` | +| `add @reui/data-grid` | `apps/web/src/components/reui/data-grid/` | +| `add @reui/filters` | `apps/web/src/components/reui/filters.tsx` | ## Импорты @@ -65,15 +75,24 @@ import '@cfdm/ui/globals.css' // только в main.tsx | Запрещено | Разрешено | |-----------|-----------| | `@/components/ui/*` | `@cfdm/ui/components/*` | +| `@/components/reui/*` в `packages/ui` | `apps/web/src/components/reui/` | | `apps/web/src/components/ui/` | `packages/ui/src/components/` | | Ручное редактирование `globals.css` | `pnpm dlx shadcn@latest apply b2fA --only theme` | -Community registry: переписывать импорты на `@cfdm/ui/...`. +**Registry imports после add:** +- shadcn community → переписывать на `@cfdm/ui/...` +- ReUI `@reui/*` → остаётся `@/components/reui/...`; shadcn-примитивы внутри ReUI → `@cfdm/ui/...` + +**Post-add checklist ReUI:** +- [ ] Импорты `@/components/ui/*` → `@cfdm/ui/components/*` +- [ ] Зависимости в `apps/web/package.json` (не в `packages/ui`) +- [ ] `pnpm --filter web build` ## Разделение ответственности - **`packages/ui`** — только output `shadcn add` (примитивы, registry hooks, `cn`) -- **`apps/web/src/components`** — blocks, layout, domain (`login-form`, `app-shell`, `PageHeader`) +- **`apps/web/src/components/reui`** — только output `shadcn add @reui/*` (см. [`reui-mcp.mdc`](reui-mcp.mdc)) +- **`apps/web/src/components`** — blocks, layout, domain (`login-form`, `app-shell`, `DataGridCard`) ## Стили (Tailwind v4 monorepo) @@ -94,10 +113,10 @@ pnpm --filter web build ## Чеклист -- [ ] Два `components.json` согласованы +- [ ] Два `components.json` согласованы (включая `@reui` registry) - [ ] `shadcn add` из `apps/web` -- [ ] UI-импорты через `@cfdm/ui/components/*` +- [ ] shadcn → `@cfdm/ui`; ReUI → `@/components/reui` - [ ] Нет `apps/web/src/components/ui/` - [ ] `pnpm --filter web build` без ошибок -См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`vite-tanstack-frontend.mdc`](vite-tanstack-frontend.mdc). +См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`reui-mcp.mdc`](reui-mcp.mdc), [`vite-tanstack-frontend.mdc`](vite-tanstack-frontend.mdc). diff --git a/.cursor/rules/frontend-shadcn.mdc b/.cursor/rules/frontend-shadcn.mdc index f36fe82..a2e01d4 100644 --- a/.cursor/rules/frontend-shadcn.mdc +++ b/.cursor/rules/frontend-shadcn.mdc @@ -8,7 +8,7 @@ alwaysApply: false **Источник истины — MCP shadcn + официальная документация.** Не выдумывать UI, не писать кастомный CSS, не обходить MCP и CLI. -Monorepo layout — [`frontend-monorepo.mdc`](frontend-monorepo.mdc). MCP workflow — [`shadcn-mcp.mdc`](shadcn-mcp.mdc). UI patterns — [`frontend-ui-patterns.mdc`](frontend-ui-patterns.mdc). +Monorepo layout — [`frontend-monorepo.mdc`](frontend-monorepo.mdc). MCP workflow — [`shadcn-mcp.mdc`](shadcn-mcp.mdc), ReUI — [`reui-mcp.mdc`](reui-mcp.mdc). UI patterns — [`frontend-ui-patterns.mdc`](frontend-ui-patterns.mdc). | Документ | URL | |----------|-----| @@ -18,6 +18,9 @@ Monorepo layout — [`frontend-monorepo.mdc`](frontend-monorepo.mdc). MCP workfl | **Monorepo** | https://ui.shadcn.com/docs/monorepo | | **Theming** | https://ui.shadcn.com/docs/theming | | **Dark Mode** | https://ui.shadcn.com/docs/dark-mode | +| **ReUI (enterprise)** | https://reui.io/llms.txt | +| **ReUI Get Started** | https://reui.io/docs/get-started | +| **ReUI Styling** | https://reui.io/docs/styling | | **Forms (RHF)** | https://ui.shadcn.com/docs/forms/react-hook-form | ## Шаг 0 — перед любым UI-кодом @@ -27,15 +30,16 @@ Monorepo layout — [`frontend-monorepo.mdc`](frontend-monorepo.mdc). MCP workfl 2. Открыть **Components** или **Blocks** — найти готовое решение 3. `cd apps/web && pnpm dlx shadcn@latest docs ` — сверить API с [Components](https://ui.shadcn.com/docs/components) 4. Сверить MCP examples ↔ docs API — только потом писать код -5. `cd apps/web && pnpm dlx shadcn@latest search "@shadcn/"` — если MCP не дал результат +5. `cd apps/web && pnpm dlx shadcn@latest search "@shadcn/"` или `"@reui/"` — если MCP не дал результат +6. Enterprise-компоненты (data grid, filters) → [`reui-mcp.mdc`](reui-mcp.mdc) + [llms.txt](https://reui.io/llms.txt) **Новая страница** → сначала [Blocks](https://ui.shadcn.com/blocks), потом `pnpm dlx shadcn@latest add `. ## Docs workflow -1. MCP `plugin-shadcn-shadcn` — search → examples → add command -2. `pnpm dlx shadcn@latest docs ` — fetch URLs, сверить API -3. Skill `.agents/skills/shadcn/SKILL.md` — critical rules +1. MCP `plugin-shadcn-shadcn` — search → examples → add command (`@shadcn` и/или `@reui`) +2. `@shadcn/*` → `pnpm dlx shadcn@latest docs `; `@reui/*` → ReUI docs + llms.txt +3. ReUI enterprise → [`reui-mcp.mdc`](reui-mcp.mdc) 4. Context7 — только TanStack / Recharts ## Shared components (обязательно) @@ -67,9 +71,12 @@ pnpm dlx shadcn@latest add table select badge card field input button ... pnpm dlx shadcn@latest add sidebar-07 # layout pnpm dlx shadcn@latest add dashboard-01 # dashboard pnpm dlx shadcn@latest add login-03 # auth +pnpm dlx shadcn@latest add @reui/data-grid # ReUI enterprise (→ apps/web/src/components/reui/) +pnpm dlx shadcn@latest add @reui/filters pnpm dlx shadcn@latest apply b2fA --only theme -y # тема — ТОЛЬКО так ``` +- ReUI: `add @reui/` → `apps/web/src/components/reui/` (см. [`reui-mcp.mdc`](reui-mcp.mdc)) - Копипаст с сайта **без** CLI — запрещено - `packages/ui/src/components/*` — только registry; domain-логика → `apps/web/src/components/.tsx` @@ -79,8 +86,9 @@ pnpm dlx shadcn@latest apply b2fA --only theme -y # тема — ТОЛЬКО 1. Установленный `@cfdm/ui/components/*` 2. Block из registry (адаптация под TanStack Router) -3. Shared проекта: `PageShell`, `PageHeader`, `EmptyState`, `QueryState`, `ConfirmDialog`, `DataTableCard`, `SectionCards`, `StatusBadge` -4. Domain-обёртка — последний уровень кастомизации +3. ReUI `@/components/reui/*` через shared: `DataGridCard`, `VpsFiltersToolbar`, `AutoCompleteInput` ([`reui-mcp.mdc`](reui-mcp.mdc)) +4. Shared проекта: `PageShell`, `PageHeader`, `EmptyState`, `QueryState`, `ConfirmDialog`, `SectionCards`, `StatusBadge` +5. Domain-обёртка — последний уровень кастомизации ### Запрещено в apps/web @@ -131,8 +139,9 @@ pnpm dlx shadcn@latest apply b2fA --only theme -y # тема — ТОЛЬКО ### Таблицы -`Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell` — из docs. -Сложная таблица → [Data Table](https://ui.shadcn.com/docs/components/data-table) + block `dashboard-01`. +Простая таблица → shadcn `Table` из docs. + +Сложные data-списки (сортировка, пагинация, virtual, column visibility) → **`DataGridCard`** (`@reui/data-grid` под капотом), не shadcn Data Table и не raw ``. ### Графики @@ -164,14 +173,15 @@ TanStack Router + Query — [`vite-tanstack-frontend.mdc`](vite-tanstack-fronten | Shell | `apps/web/src/components/layout/app-shell.tsx` | [sidebar-07](https://ui.shadcn.com/blocks) | | Login | `apps/web/src/routes/login.tsx` | [login-03](https://ui.shadcn.com/blocks) | | Dashboard | `apps/web/src/routes/_auth/index.tsx` | [dashboard-01](https://ui.shadcn.com/blocks) | -| CRUD | `routes/_auth/services.tsx`, `domains/index.tsx` | Card + Field + Table | +| CRUD | `routes/_auth/vps.tsx`, `payments.tsx` и др. | `DataGridCard` + `FormSheet` | ## Структура файлов ``` apps/web/src/ components/ ← domain + layout + shared (blocks) - routes/ ← страницы (композиция @cfdm/ui, без raw HTML) + reui/ ← ReUI CLI output (@reui/*) — не в packages/ui + routes/ ← страницы (композиция @cfdm/ui + ReUI, без raw HTML) queries/ ← queryOptions (не inline в routes) lib/schemas.ts ← Zod для форм @@ -184,12 +194,13 @@ packages/ui/src/ ## Чеклист перед завершением задачи -- [ ] MCP shadcn: search + examples (+ add command при новых примитивах) -- [ ] Решение есть в https://ui.shadcn.com/docs/components или /blocks +- [ ] MCP shadcn: search + examples (`@shadcn` и/или `@reui`) +- [ ] Enterprise-компоненты — [`reui-mcp.mdc`](reui-mcp.mdc) + llms.txt +- [ ] Решение есть в shadcn docs/blocks или ReUI catalog - [ ] Компоненты добавлены через `pnpm dlx shadcn@latest add` из `apps/web` - [ ] Нет кастомного CSS и raw HTML-примитивов -- [ ] Semantic tokens, `variant`/`size` вместо переопределения className -- [ ] UI-импорты через `@cfdm/ui/components/*` +- [ ] Semantic tokens / ReUI `variant` вместо raw Tailwind-цветов +- [ ] shadcn → `@cfdm/ui`; ReUI → `@/components/reui` - [ ] `pnpm --filter web build` без ошибок ## Язык diff --git a/.cursor/rules/frontend-ui-patterns.mdc b/.cursor/rules/frontend-ui-patterns.mdc index 716e158..ec4d47b 100644 --- a/.cursor/rules/frontend-ui-patterns.mdc +++ b/.cursor/rules/frontend-ui-patterns.mdc @@ -6,23 +6,24 @@ alwaysApply: false # Frontend UI Patterns -См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [Components](https://ui.shadcn.com/docs/components), [Blocks](https://ui.shadcn.com/blocks). +См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`reui-mcp.mdc`](reui-mcp.mdc), [Components](https://ui.shadcn.com/docs/components), [ReUI llms.txt](https://reui.io/llms.txt). ## Docs workflow (обязательно) 0. Codegraph `codegraph_explore` — найти существующие shared/domain-компоненты -1. Skill [`.agents/skills/shadcn/SKILL.md`](../.agents/skills/shadcn/SKILL.md) — component selection -2. MCP `plugin-shadcn-shadcn` — search → examples → add command -3. CLI: `cd apps/web && pnpm dlx shadcn@latest docs ` → сверить API с [Components](https://ui.shadcn.com/docs/components) +1. [`reui-mcp.mdc`](reui-mcp.mdc) — если нужен Data Grid, Filters, Autocomplete и др. +2. MCP `plugin-shadcn-shadcn` — search → examples → add command (`@shadcn` / `@reui`) +3. CLI: `@shadcn/*` → `pnpm dlx shadcn@latest docs `; `@reui/*` → ReUI docs + llms.txt 4. Код по examples + docs API (только после совпадения MCP ↔ docs) -5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn primitives) +5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn/ReUI primitives) 6. MCP `get_audit_checklist` — перед merge 7. Codegraph `codegraph_status` — Pending sync пустой ## Иерархия компонентов ``` -@cfdm/ui/components/* ← только CLI (packages/ui) +@cfdm/ui/components/* ← shadcn CLI (packages/ui) +@/components/reui/* ← ReUI CLI @reui/* (apps/web) apps/web/src/components/ ← shared + domain + layout page-shell.tsx ← обёртка страницы page-header.tsx @@ -48,10 +49,14 @@ apps/web/src/components/ ← shared + domain + layout | Page wrapper | `PageShell` | — | | Page title | `PageHeader` | — | | Stat metrics | `SectionCards` | `Card` | -| Data list | `DataGridCard` | `Table`, `InputGroup` | +| Data list | `DataGridCard` | `@reui/data-grid`, `Table` | +| Filters toolbar | `VpsFiltersToolbar` | `@reui/filters` | +| Autocomplete | `AutoCompleteInput` | `@reui/autocomplete` | +| Number input | — | `@reui/number-field` | +| Date range | `lib/date-selector-i18n.ts` | `@reui/date-selector` | | Empty | `EmptyState` | `Empty` | | Loading / Error | `QueryState` | `Skeleton`, `Alert` | -| Status | `StatusBadge` | `Badge` | +| Status | `StatusBadge` | `Badge`, `@reui/badge` | | Create/Edit | `FormSheet` + `*-edit-sheet.tsx` | `Sheet`, `Field` | | Form field | `FormField` | `Field`, `Input`, `Select` | | Submit button | `LoadingButton` | `Button`, `Spinner` | diff --git a/.cursor/rules/project-structure.mdc b/.cursor/rules/project-structure.mdc index eed4a4d..95ee7ef 100644 --- a/.cursor/rules/project-structure.mdc +++ b/.cursor/rules/project-structure.mdc @@ -5,14 +5,14 @@ alwaysApply: true # Структура проекта vps-tracker -pnpm workspaces monorepo. Frontend — shadcn/ui + TanStack Router/Query + TS. Backend — Fastify + Drizzle + better-sqlite3 + TS. +pnpm workspaces monorepo. Frontend — shadcn/ui + ReUI (`@reui`) + TanStack Router/Query + TS. Backend — Fastify + Drizzle + better-sqlite3 + TS. ## Layout ``` vps-tracker/ ├── apps/ -│ ├── web/ # Vite SPA (TSX) — TanStack Router + Query, shadcn/ui +│ ├── web/ # Vite SPA (TSX) — TanStack Router + Query, shadcn/ui + ReUI │ └── api/ # Fastify 5 API (TS) — @fastify/* + Drizzle ├── packages/ │ ├── ui/ # @cfdm/ui — shadcn primitives (output `shadcn add`) @@ -76,6 +76,6 @@ packages/db/src/ ## Скоупы правил -- Frontend (`apps/web`, `packages/ui`) — [`frontend-monorepo.mdc`](frontend-monorepo.mdc), [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`frontend-ui-patterns.mdc`](frontend-ui-patterns.mdc), [`vite-tanstack-frontend.mdc`](vite-tanstack-frontend.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`shadcn-ui-production.mdc`](shadcn-ui-production.mdc) +- Frontend (`apps/web`, `packages/ui`) — [`frontend-monorepo.mdc`](frontend-monorepo.mdc), [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`frontend-ui-patterns.mdc`](frontend-ui-patterns.mdc), [`vite-tanstack-frontend.mdc`](vite-tanstack-frontend.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`reui-mcp.mdc`](reui-mcp.mdc), [`shadcn-ui-production.mdc`](shadcn-ui-production.mdc) - Backend (`apps/api`, `packages/db`, `packages/shared`) — [`backend-fastify.mdc`](backend-fastify.mdc), [`backend-drizzle.mdc`](backend-drizzle.mdc), [`backend-mcp.mdc`](backend-mcp.mdc), [`backend-testing.mdc`](backend-testing.mdc), [`backend-api-ui.mdc`](backend-api-ui.mdc), [`sqlite.mdc`](sqlite.mdc) - API + UI-связка — [`backend-api-ui.mdc`](backend-api-ui.mdc) diff --git a/.cursor/rules/reui-mcp.mdc b/.cursor/rules/reui-mcp.mdc new file mode 100644 index 0000000..69b891e --- /dev/null +++ b/.cursor/rules/reui-mcp.mdc @@ -0,0 +1,108 @@ +--- +description: ReUI registry (@reui) — enterprise-компоненты, MCP workflow, зависимости, матрица выбора shadcn vs ReUI +alwaysApply: true +--- + +# ReUI MCP — обязательно для enterprise-компонентов + +ReUI — first-class shadcn registry с enterprise-компонентами (Data Grid, Filters, Stepper и др.). Проект использует **Base UI** (`style: base-nova`), не Radix. + +Связанные правила: [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`frontend-monorepo.mdc`](frontend-monorepo.mdc), [`frontend-shadcn.mdc`](frontend-shadcn.mdc). + +| Документ | URL | +|----------|-----| +| **llms.txt (карта для ИИ)** | https://reui.io/llms.txt | +| **Get Started** | https://reui.io/docs/get-started | +| **Styling (semantic tokens)** | https://reui.io/docs/styling | +| **MCP** | https://reui.io/docs/mcp | +| **Base UI components** | https://reui.io/docs/components/base/ | + +## Когда использовать ReUI vs shadcn + +| Задача | Registry | Импорт | +|--------|----------|--------| +| Button, Card, Sheet, Field, Sidebar | `@shadcn` | `@cfdm/ui/components/*` | +| Blocks (sidebar-07, dashboard-01) | `@shadcn` | blocks → `apps/web/src/components/` | +| Data Grid (sort, pagination, virtual, columns) | `@reui` | `@/components/reui/data-grid/*` → обёртка `DataGridCard` | +| Мультифильтры | `@reui` | `@/components/reui/filters` → `VpsFiltersToolbar` | +| Number field со stepper | `@reui` | `@/components/reui/number-field` | +| Autocomplete | `@reui` | `@/components/reui/autocomplete` → `AutoCompleteInput` | +| Date selector / range | `@reui` | `@/components/reui/date-selector` | +| Semantic badge (success/info/warning) | `@reui` | `@/components/reui/badge` или `StatusBadge` | + +**Простые списки** — shadcn `Table`. **Сложные data-списки** — `DataGridCard` (ReUI data-grid), не shadcn Data Table. + +## Источники для ИИ (порядок) + +1. [ReUI llms.txt](https://reui.io/llms.txt) — полный каталог компонентов +2. MCP `plugin-shadcn-shadcn` с `registries: ["@reui"]` +3. Docs с **Copy Markdown**: `https://reui.io/docs/components/base/` +4. CLI dry-run: `cd apps/web && pnpm dlx shadcn@latest add @reui/ --dry-run` + +## MCP workflow (ветка ReUI) + +0. **Codegraph** `codegraph_explore` — найти `DataGridCard`, `VpsFiltersToolbar` и существующие `@/components/reui/*` +1. **`get_project_registries`** — должен содержать `@reui` +2. **`search_items_in_registries`** с `registries: ["@reui"]`, `query`: `"data grid"`, `"filters"`, `"stepper"` и т.д. +3. **`get_item_examples_from_registries`** — полный код перед JSX +4. **`get_add_command_for_items`** — точная CLI-команда +5. Выполнить add из `apps/web` (см. [`frontend-monorepo.mdc`](frontend-monorepo.mdc)) +6. **Docs:** ReUI `https://reui.io/docs/components/base/` + llms.txt — **не** ui.shadcn.com для `@reui/*` +7. Post-add: импорты shadcn-примитивов → `@cfdm/ui/components/*` +8. `pnpm install` + `pnpm --filter web build` + +## Размещение и импорты + +| Слой | Путь | Импорт | +|------|------|--------| +| shadcn primitives | `packages/ui/src/components/` | `@cfdm/ui/components/*` | +| ReUI enterprise | `apps/web/src/components/reui/` | `@/components/reui/*` | +| Проектные обёртки | `apps/web/src/components/` | `@/components/data-grid-card` и т.д. | + +```bash +cd apps/web +pnpm dlx shadcn@latest add @reui/data-grid +pnpm dlx shadcn@latest add @reui/filters +``` + +## Уже установленные ReUI-компоненты + +`autocomplete`, `badge`, `color-picker`, `data-grid/*`, `date-selector`, `filters`, `number-field` — в [`apps/web/src/components/reui/`](apps/web/src/components/reui/). + +Перед добавлением дубликата — проверить Codegraph и существующие обёртки. + +## Зависимости (только `apps/web`, не `packages/ui`) + +| npm-пакет | ReUI-компоненты | +|-----------|-----------------| +| `@tanstack/react-table` | data-grid | +| `@tanstack/react-virtual` | data-grid (virtual) | +| `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers`, `@dnd-kit/utilities` | data-grid dnd, sortable, kanban | +| `date-fns`, `react-day-picker` | date-selector | + +После `shadcn add @reui/...` — проверить, что CLI добавил недостающие deps в [`apps/web/package.json`](apps/web/package.json). + +## Semantic tokens (Styling) + +ReUI расширяет тему shadcn токенами `--success`, `--info`, `--warning`, `--destructive-foreground`, `--invert` — уже в [`packages/ui/src/styles/globals.css`](packages/ui/src/styles/globals.css). + +- Badge/Alert: `variant="success"` / `"info"` / `"warning"` — не `bg-emerald-*` +- Базовая тема: `pnpm dlx shadcn@latest apply b2fA --only theme` +- ReUI-токены: по [Styling guide](https://reui.io/docs/styling); не править `globals.css` вручную без сверки с docs + +## Запрещено + +- Копипаст с reui.io без CLI `add @reui/...` +- Класть ReUI в `packages/ui` или импортировать как `@cfdm/ui` +- Radix-варианты (`/docs/components/radix/...`) — только Base UI +- Raw Tailwind-цвета вместо ReUI semantic `variant` +- Писать data-grid/filters с нуля, если есть `@reui/*` и shared-обёртки + +## Чеклист + +- [ ] Задача требует ReUI? (см. матрицу выше) +- [ ] MCP search с `registries: ["@reui"]` + examples +- [ ] `shadcn add @reui/` из `apps/web` +- [ ] Импорты: `@cfdm/ui` для примитивов, `@/components/reui` для ReUI +- [ ] Зависимости в `apps/web/package.json` +- [ ] `pnpm --filter web build` без ошибок diff --git a/.cursor/rules/shadcn-mcp.mdc b/.cursor/rules/shadcn-mcp.mdc index 0e990e9..93600f5 100644 --- a/.cursor/rules/shadcn-mcp.mdc +++ b/.cursor/rules/shadcn-mcp.mdc @@ -9,15 +9,21 @@ alwaysApply: true CLI и docs — **после** MCP, по команде из `get_add_command_for_items`. +Enterprise-компоненты (Data Grid, Filters, Stepper, Kanban и др.) — дополнительно [`reui-mcp.mdc`](reui-mcp.mdc) и registry `@reui`. + ## Порядок (строго) 0. **Codegraph** `codegraph_explore` — найти существующие реализации и shared-обёртки (один вызов перед правками) -1. **`get_project_registries`** — какие registry доступны в проекте -2. **`search_items_in_registries`** — компонент, block, example (`query`: `"card"`, `"tabs demo"`, `"dashboard"`, `"scroll-area"`) +1. **`get_project_registries`** — какие registry доступны в проекте (`@shadcn`, `@reui`) +2. **`search_items_in_registries`** — компонент, block, example (`query`: `"card"`, `"data grid"`, `"filters"`) + - shadcn primitives/blocks → `registries: ["@shadcn"]` или omit + - Data Grid, Filters, Stepper, Kanban, Autocomplete и др. → **параллельно** `registries: ["@reui"]` (см. [`reui-mcp.mdc`](reui-mcp.mdc)) 3. **`get_item_examples_from_registries`** — полный код примера перед написанием JSX 4. **`get_add_command_for_items`** — точная CLI-команда `pnpm dlx shadcn@latest add ...` 5. Выполнить add из `apps/web` (см. [`frontend-monorepo.mdc`](frontend-monorepo.mdc)) -6. **CLI docs (обязательно):** `cd apps/web && pnpm dlx shadcn@latest docs ` — сверить API/props с [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components) +6. **CLI docs (обязательно):** + - `@shadcn/*` → `cd apps/web && pnpm dlx shadcn@latest docs ` — [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components) + - `@reui/*` → [ReUI docs](https://reui.io/docs/components/base/) + [llms.txt](https://reui.io/llms.txt) — **не** ui.shadcn.com 7. Сверить examples из MCP с API из docs CLI — реализовать только после совпадения 8. Адаптировать пример под TanStack Router / Query → `apps/web/src/` 9. **Context7** — только TanStack / Recharts / не-shadcn (не заменяет шаги 1–8 для примитивов) @@ -30,6 +36,7 @@ CLI и docs — **после** MCP, по команде из `get_add_command_fo |--------|-----| | Новая страница / layout | `search` → `types: ["block"]` → examples → add block | | Нет примитива в `@cfdm/ui` | `search` → `get_add_command_for_items` → add | +| Data Grid, Filters, Stepper, Kanban | `search` с `registries: ["@reui"]` → [`reui-mcp.mdc`](reui-mcp.mdc) | | Сомнение в API/props | `get_item_examples_from_registries` | | Ревью UI перед сдачей | `get_audit_checklist` | @@ -46,4 +53,4 @@ CLI и docs — **после** MCP, по команде из `get_add_command_fo - **Инструменты:** `get_project_registries`, `search_items_in_registries`, `get_item_examples_from_registries`, `get_add_command_for_items`, `view_items_in_registries`, `list_items_in_registries`, `get_audit_checklist` - Перед вызовом — прочитать schema в `mcps/plugin-shadcn-shadcn/tools/` -Связанные правила: [`shadcn-ui-production.mdc`](shadcn-ui-production.mdc), [`frontend-shadcn.mdc`](frontend-shadcn.mdc). +Связанные правила: [`shadcn-ui-production.mdc`](shadcn-ui-production.mdc), [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`reui-mcp.mdc`](reui-mcp.mdc). diff --git a/.cursor/rules/shadcn-ui-production.mdc b/.cursor/rules/shadcn-ui-production.mdc index 988db8e..0609c30 100644 --- a/.cursor/rules/shadcn-ui-production.mdc +++ b/.cursor/rules/shadcn-ui-production.mdc @@ -5,9 +5,9 @@ alwaysApply: true # shadcn/ui — правила проекта -UI строится **исключительно** по [shadcn/ui](https://ui.shadcn.com/docs/installation): [Components](https://ui.shadcn.com/docs/components), [Blocks](https://ui.shadcn.com/blocks), [Monorepo](https://ui.shadcn.com/docs/monorepo). +UI строится по [shadcn/ui](https://ui.shadcn.com/docs/installation) + **ReUI registry** (`@reui`): [Components](https://ui.shadcn.com/docs/components), [Blocks](https://ui.shadcn.com/blocks), [ReUI Get Started](https://reui.io/docs/get-started). -**Первый шаг любой UI-задачи — MCP `plugin-shadcn-shadcn`** (см. [`shadcn-mcp.mdc`](shadcn-mcp.mdc)): search → examples → add command → CLI. +**Первый шаг любой UI-задачи — MCP `plugin-shadcn-shadcn`** (см. [`shadcn-mcp.mdc`](shadcn-mcp.mdc)): search → examples → add command → CLI. Enterprise-компоненты — [`reui-mcp.mdc`](reui-mcp.mdc). ## Разработка frontend @@ -18,9 +18,9 @@ UI строится **исключительно** по [shadcn/ui](https://ui.s ## Стек - Monorepo: `apps/web` + `packages/ui` (`@cfdm/ui`), pnpm workspaces -- Vite + TanStack Router/Query + shadcn **base-nova** +- Vite + TanStack Router/Query + shadcn **base-nova** + ReUI **@reui** - Конфиг: [`apps/web/components.json`](apps/web/components.json), [`packages/ui/components.json`](packages/ui/components.json) -- Тема: `pnpm dlx shadcn@latest apply b2fA --only theme -y` — единственный способ менять `packages/ui/src/styles/globals.css` +- Тема: `pnpm dlx shadcn@latest apply b2fA --only theme -y` — единственный способ менять базовую тему `globals.css`; ReUI semantic tokens — [Styling](https://reui.io/docs/styling) ## Backend → UI diff --git a/AGENTS.md b/AGENTS.md index 2b67d13..1c75b41 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -7,7 +7,7 @@ VPS Tracker — приложение для учёта виртуальных с ## Стек - **Monorepo:** pnpm workspaces (`apps/*`, `packages/*`) -- **Frontend** (`apps/web`): Vite + React 19 + TypeScript, TanStack Router v1 + Query v5, shadcn/ui (`@cfdm/ui`), Tailwind v4, lucide-react, Recharts (через shadcn Chart), react-hook-form + Zod +- **Frontend** (`apps/web`): Vite + React 19 + TypeScript, TanStack Router v1 + Query v5, shadcn/ui (`@cfdm/ui`), **ReUI** (`@reui` → `@/components/reui`), Tailwind v4, lucide-react, Recharts (через shadcn Chart), react-hook-form + Zod - **Backend** (`apps/api`): Fastify 5 + TypeScript, `@fastify/*` plugins, контракты через `@cfdm/shared` (Zod) - **DB** (`packages/db`): Drizzle ORM + better-sqlite3 (WAL, `foreign_keys=ON`) - **Тесты:** Vitest (`app.inject()` для backend, `happy-dom` для frontend) @@ -17,11 +17,12 @@ VPS Tracker — приложение для учёта виртуальных с ``` vps-tracker/ ├── apps/ -│ ├── web/ # Vite SPA (TSX) — TanStack + shadcn/ui +│ ├── web/ # Vite SPA (TSX) — TanStack + shadcn/ui + ReUI │ │ └── src/ │ │ ├── routes/ # file-based (TanStack Router) │ │ ├── queries/ # queryOptions + key factories │ │ ├── components/ # shared + layout + domain +│ │ │ └── reui/ # ReUI CLI output (@reui/*) │ │ └── lib/ # api-client, queryClient, router, schemas │ └── api/ # Fastify 5 API (TS) │ └── src/ @@ -66,8 +67,9 @@ vps-tracker/ - **VPS CRUD** — `apps/api/src/routes/vps.ts`, `packages/db/src/repositories/vps.ts` - **Платежи/баланс** — `apps/api/src/routes/payments.ts`, `apps/api/src/routes/balance-ledger.ts` - **Курсы валют** — `apps/web/src/lib/format.ts` (convertCurrency, formatInBaseCurrency), настройки в `settings.ratesUrl` -- **UI shared** — `apps/web/src/components/` (PageShell, PageHeader, EmptyState, QueryState, ConfirmDialog, DataTableCard, SectionCards, StatusBadge, FormSheet, FormField, TableCard, LoadingButton) +- **UI shared** — `apps/web/src/components/` (PageShell, PageHeader, EmptyState, QueryState, ConfirmDialog, **DataGridCard**, VpsFiltersToolbar, AutoCompleteInput, SectionCards, StatusBadge, FormSheet, FormField, LoadingButton) - **UI primitives** — `packages/ui/src/components/*` (только output `shadcn add`) +- **ReUI enterprise** — `apps/web/src/components/reui/*` (output `shadcn add @reui/*`); см. [`reui-mcp.mdc`](.cursor/rules/reui-mcp.mdc) ## BILLmanager API @@ -88,9 +90,17 @@ pnpm --filter api test # Vitest backend pnpm --filter web test # Vitest frontend ``` +## ReUI + +- Registry: `@reui` в [`apps/web/components.json`](apps/web/components.json) +- AI-карта: [llms.txt](https://reui.io/llms.txt) +- Установка: `cd apps/web && pnpm dlx shadcn@latest add @reui/` +- Правила: [`reui-mcp.mdc`](.cursor/rules/reui-mcp.mdc), [`shadcn-mcp.mdc`](.cursor/rules/shadcn-mcp.mdc) +- Зависимости ReUI в `apps/web`: `@tanstack/react-table`, `@tanstack/react-virtual`, `@dnd-kit/*`, `date-fns`, `react-day-picker` + ## Соглашения -- UI — только [shadcn/ui](https://ui.shadcn.com) через MCP `plugin-shadcn-shadcn` (см. [`shadcn-mcp.mdc`](.cursor/rules/shadcn-mcp.mdc)) +- UI — [shadcn/ui](https://ui.shadcn.com) + [ReUI](https://reui.io/docs/get-started) через MCP `plugin-shadcn-shadcn` - Коммиты — на русском, см. [`commit-messages-ru.mdc`](.cursor/rules/commit-messages-ru.mdc) - Gitflow — см. [`gitflow.mdc`](.cursor/rules/gitflow.mdc) - Структура — см. [`project-structure.mdc`](.cursor/rules/project-structure.mdc) diff --git a/apps/web/components.json b/apps/web/components.json index 0b8c3d4..5afe9ff 100644 --- a/apps/web/components.json +++ b/apps/web/components.json @@ -11,7 +11,7 @@ }, "iconLibrary": "lucide", "registries": { - "@reui": "https://reui.io/r/styles/{style}/{name}.json" + "@reui": "https://reui.io/r/{style}/{name}.json" }, "aliases": { "components": "@/components", diff --git a/packages/ui/components.json b/packages/ui/components.json index 73a0cf3..f633e7c 100644 --- a/packages/ui/components.json +++ b/packages/ui/components.json @@ -11,7 +11,7 @@ }, "iconLibrary": "lucide", "registries": { - "@reui": "https://reui.io/r/styles/{style}/{name}.json" + "@reui": "https://reui.io/r/{style}/{name}.json" }, "aliases": { "components": "@cfdm/ui/components",