Enhance frontend documentation and UI components; update frontend-shadcn.mdc to include UI patterns reference; improve navigation structure in AppSidebar by categorizing items; refactor DataTableCard to support empty states with EmptyState component; implement ConfirmDialog for delete actions in DnsRecordsTable and GroupsPage; add search functionality in CertificatesPage and GroupsPage for better user experience; update ServiceEditSheet to utilize tabs for organization.

2026-06-19 12:15:29 +07:00
parent d11414666f
commit 4a70cf5854
32 changed files with 1546 additions and 435 deletions
@@ -0,0 +1,88 @@
+---
+description: Единые UI-паттерны web — shared components, docs workflow, матрица стандартизации
+globs: apps/web/**/*
+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).
+
+## Docs workflow (обязательно)
+
+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
+5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn primitives)
+6. MCP `get_audit_checklist` — перед merge
+
+## Иерархия компонентов
+
+```
+@cfdm/ui/components/*     ← только CLI (packages/ui)
+apps/web/src/components/  ← shared + domain + layout
+  page-shell.tsx          ← обёртка страницы
+  page-header.tsx
+  empty-state.tsx
+  query-state.tsx
+  confirm-dialog.tsx
+  data-table-card.tsx
+  section-cards.tsx
+  status-badge.tsx
+  layout/                 ← app-shell, site-header
+  domain-*                ← бизнес-компоненты
+```
+
+## Матрица стандартизации
+
+| Элемент | Shared | Primitive |
+|---------|--------|-----------|
+| Page wrapper | `PageShell` | — |
+| Page title | `PageHeader` | — |
+| Stat metrics | `SectionCards` | `Card` |
+| Data list | `DataTableCard` | `Table`, `InputGroup` |
+| Empty | `EmptyState` | `Empty` |
+| Loading / Error | `QueryState` | `Skeleton`, `Alert` |
+| Status | `StatusBadge` | `Badge` |
+| Create/Edit | `*-sheet.tsx` | `Sheet`, `Field` |
+| Delete confirm | `ConfirmDialog` | `AlertDialog` |
+| List row | — | `Item variant="outline" size="sm"` |
+| Nav | `AppSidebar` | `Sidebar` |
+| Breadcrumbs | `SiteHeader` | `Breadcrumb` |
+| Dates | `lib/format.ts` | — |
+
+## Overlay selection
+
+| Сценарий | Компонент |
+|----------|-----------|
+| Create/edit форма | `Sheet` |
+| Destructive confirm | `AlertDialog` via `ConfirmDialog` |
+| Modal preview | `Dialog` |
+
+## Block registry
+
+| Зона | Block |
+|------|-------|
+| Shell | sidebar-07 |
+| Dashboard | dashboard-01 |
+| Login | login-03 |
+
+## Spacing
+
+```
+PageShell:     gap-4 md:gap-6, px-4 lg:px-6 py-4 md:py-6
+Card grid:     gap-4
+FieldGroup:    gap-4
+Item list:     gap-2
+Toolbar:       gap-2
+```
+
+**Запрещено:** `space-y-*`, raw colors (`bg-emerald-*`), custom empty divs, page-level Spinner.
+
+## Button hierarchy (max 1 primary per screen)
+
+1. `default` — главный CTA
+2. `outline` — вторичные действия
+3. `ghost` / `link` — навигация, cancel
+4. `destructive` — только с `ConfirmDialog`