chore: Update package.json and pnpm-lock.yaml to add husky for Git hooks; enhance Docker workflow with pnpm setup and linting steps; refactor various components to utilize new form components and improve UI consistency.

2026-06-25 15:47:29 +07:00
parent 3632bd25e4
commit 9569c22e4d
31 changed files with 1125 additions and 547 deletions
@@ -22,11 +22,12 @@ Monorepo layout — [`frontend-monorepo.mdc`](frontend-monorepo.mdc). MCP workfl

 ## Шаг 0 — перед любым UI-кодом

+0. **Codegraph** `codegraph_explore` — найти существующие реализации
 1. **MCP `plugin-shadcn-shadcn`:** `search_items_in_registries` → `get_item_examples_from_registries` → `get_add_command_for_items` ([`shadcn-mcp.mdc`](shadcn-mcp.mdc))
 2. Открыть **Components** или **Blocks** — найти готовое решение
-3. `cd apps/web && pnpm dlx shadcn@latest docs <component>` — API и примеры
-4. `cd apps/web && pnpm dlx shadcn@latest search "@shadcn/<query>"` — если MCP не дал результат
-5. Только потом писать код
+3. `cd apps/web && pnpm dlx shadcn@latest docs <component>` — сверить API с [Components](https://ui.shadcn.com/docs/components)
+4. Сверить MCP examples ↔ docs API — только потом писать код
+5. `cd apps/web && pnpm dlx shadcn@latest search "@shadcn/<query>"` — если MCP не дал результат

 **Новая страница** → сначала [Blocks](https://ui.shadcn.com/blocks), потом `pnpm dlx shadcn@latest add <block-id>`.

@@ -49,6 +50,12 @@ Monorepo layout — [`frontend-monorepo.mdc`](frontend-monorepo.mdc). MCP workfl
 | `DataTableCard` | `data-table-card.tsx` |
 | `SectionCards` | `section-cards.tsx` |
 | `StatusBadge` | `status-badge.tsx` |
+| `FormSheet` | `form-sheet.tsx` |
+| `FormField` | `form-field.tsx` |
+| `TableCard` | `table-card.tsx` |
+| `LoadingButton` | `loading-button.tsx` |
+| `SectionCardsSkeleton` | `section-cards-skeleton.tsx` |
+| `TableSkeleton` | `table-skeleton.tsx` |

 **Overlay:** Sheet — forms; AlertDialog — destructive confirm.

@@ -10,12 +10,14 @@ alwaysApply: false

 ## 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 <component>` → fetch URLs
-4. Код по examples + docs API
+3. CLI: `cd apps/web && pnpm dlx shadcn@latest docs <component>` → сверить API с [Components](https://ui.shadcn.com/docs/components)
+4. Код по examples + docs API (только после совпадения MCP ↔ docs)
 5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn primitives)
 6. MCP `get_audit_checklist` — перед merge
+7. Codegraph `codegraph_status` — Pending sync пустой

 ## Иерархия компонентов

@@ -30,6 +32,12 @@ apps/web/src/components/  ← shared + domain + layout
  data-table-card.tsx
  section-cards.tsx
  status-badge.tsx
+  form-sheet.tsx          ← Sheet + RHF FormProvider
+  form-field.tsx          ← Field + Controller + aria-invalid
+  table-card.tsx          ← Card + Table wrapper
+  loading-button.tsx      ← Button + Spinner + label swap
+  section-cards-skeleton.tsx
+  table-skeleton.tsx
  layout/                 ← app-shell, site-header
  domain-*                ← бизнес-компоненты
 ```
@@ -45,7 +53,10 @@ apps/web/src/components/  ← shared + domain + layout
 | Empty | `EmptyState` | `Empty` |
 | Loading / Error | `QueryState` | `Skeleton`, `Alert` |
 | Status | `StatusBadge` | `Badge` |
-| Create/Edit | `*-sheet.tsx` | `Sheet`, `Field` |
+| Create/Edit | `FormSheet` + `*-edit-sheet.tsx` | `Sheet`, `Field` |
+| Form field | `FormField` | `Field`, `Input`, `Select` |
+| Submit button | `LoadingButton` | `Button`, `Spinner` |
+| Table wrapper | `TableCard` | `Table`, `Card` |
 | Delete confirm | `ConfirmDialog` | `AlertDialog` |
 | List row | — | `Item variant="outline" size="sm"` |
 | Nav | `AppSidebar` | `Sidebar` |
@@ -80,6 +91,18 @@ Toolbar:       gap-2

 **Запрещено:** `space-y-*`, raw colors (`bg-emerald-*`), custom empty divs, page-level Spinner.

+## UX/UI 2026 (состояния данных)
+
+Каждый блок: **default, hover, focus, disabled, empty, loading, error**.
+
+- **Loading** — `Skeleton` с размерами финального контента (`QueryState skeleton={…}`), не Spinner на странице
+- **Empty** — `EmptyState` с CTA (кнопка создания)
+- **Zero-results** — отдельный empty с «Сбросить фильтр» (не «Создать»)
+- **Error** — `QueryState` + `onRetry` + иконка + текст
+- **Overflow** — `truncate`, `max-w-*`, `Tooltip`; `tabular-nums` для чисел
+- **Density** — таблицы `h-10 text-sm`; max 1 primary CTA на экран
+- **A11y** — `aria-invalid` на полях, `aria-label`/`sr-only` на icon-only кнопках, цвет не единственный сигнал статуса
+
 ## Button hierarchy (max 1 primary per screen)

 1. `default` — главный CTA
@@ -11,15 +11,18 @@ CLI и docs — **после** MCP, по команде из `get_add_command_fo

 ## Порядок (строго)

+0. **Codegraph** `codegraph_explore` — найти существующие реализации и shared-обёртки (один вызов перед правками)
 1. **`get_project_registries`** — какие registry доступны в проекте
 2. **`search_items_in_registries`** — компонент, block, example (`query`: `"card"`, `"tabs demo"`, `"dashboard"`, `"scroll-area"`)
 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. Адаптировать пример под TanStack Router / Query → `apps/web/src/`
-7. **CLI docs:** `cd apps/web && pnpm dlx shadcn@latest docs <component>` — fetch URLs, сверить API
-8. **Context7** — только TanStack / Recharts / не-shadcn (не заменяет шаги 1–7 для примитивов)
-9. **`get_audit_checklist`** — перед merge PR
+6. **CLI docs (обязательно):** `cd apps/web && pnpm dlx shadcn@latest docs <component>` — сверить API/props с [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components)
+7. Сверить examples из MCP с API из docs CLI — реализовать только после совпадения
+8. Адаптировать пример под TanStack Router / Query → `apps/web/src/`
+9. **Context7** — только TanStack / Recharts / не-shadcn (не заменяет шаги 1–8 для примитивов)
+10. **`get_audit_checklist`** — перед merge PR
+11. **Codegraph** `codegraph_status` — Pending sync пустой после правок

 ## Когда вызывать MCP