DenozordecandCursor
35e5d8430d
Docker / build (push) Failing after 22s
- Добавлены новые правила для использования ReUI и обновлены существующие правила. - Внедрены новые компоненты, такие как Frame, Alert, IconStack и DetailPanel, для улучшения интерфейса. - Обновлены существующие компоненты, включая DataGridCard и EmptyState, с использованием новых элементов. - Добавлены новые утилиты для фильтрации данных и управления состоянием. - Обновлен .gitignore для исключения файлов окружения. Co-authored-by: Cursor <[email protected]>
74 lines
2.9 KiB
Plaintext
74 lines
2.9 KiB
Plaintext
---
|
|
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), [`reui-mcp.mdc`](reui-mcp.mdc), [`docs/ui-design-contract.md`](../../docs/ui-design-contract.md), [ReUI llms.txt](https://reui.io/llms.txt).
|
|
|
|
## Surface
|
|
|
|
**`UI_SURFACE = 'frame'`** (`lib/ui-surface.ts`). Ops/list/dashboard/detail/settings — ReUI Frame, не Card shell.
|
|
|
|
## Docs workflow (обязательно)
|
|
|
|
0. Codegraph / поиск `reui-kit/*`
|
|
1. MCP **`user-reui`** — search → `get_block` / `compose_page` (`surface: "frame"`) — cite `previewUrl` + `docsUrl`
|
|
2. Primitives: MCP `plugin-shadcn-shadcn` + CLI docs
|
|
3. CLI: `cd apps/web && pnpm dlx shadcn@latest add @reui/...`
|
|
4. Adapt в kit — не hand-roll
|
|
5. Context7 — только TanStack / Recharts
|
|
6. `validate_usage` / `get_audit_checklist`
|
|
|
|
## Иерархия компонентов
|
|
|
|
```
|
|
@cfdm/ui/components/* ← shadcn CLI (packages/ui)
|
|
@/components/reui/* ← ReUI CLI @reui/* (apps/web)
|
|
apps/web/src/components/
|
|
reui-kit/ ← ResourcePage, KpiStatGrid, OpsDashboard, SettingsShell
|
|
page-shell.tsx
|
|
page-header.tsx
|
|
empty-state.tsx ← Empty + IconStack (empty-state-12)
|
|
query-state.tsx
|
|
form-sheet.tsx
|
|
layout/
|
|
domain-*
|
|
```
|
|
|
|
## Матрица стандартизации
|
|
|
|
| Элемент | Shared | Primitive / Preview |
|
|
|---------|--------|---------------------|
|
|
| Page wrapper | `PageShell` | — |
|
|
| Page title | `PageHeader` | — |
|
|
| KPI | `reui-kit/KpiStatGrid` | [stats-12](https://reui.io/preview/base/stats-12) |
|
|
| Data list | `reui-kit/ResourcePage` | [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) |
|
|
| Dashboard | `reui-kit/OpsDashboard` | [dashboard-1](https://reui.io/preview/base/dashboard-1) |
|
|
| Settings | `reui-kit/SettingsShell` | [settings-16](https://reui.io/preview/base/settings-16) |
|
|
| Filters | ResourcePage / domain toolbars | `@reui/filters` |
|
|
| Empty | `EmptyState` | [empty-state-12](https://reui.io/preview/base/empty-state-12) |
|
|
| Loading / Error | `QueryState` | Skeleton, ReUI Alert |
|
|
| Status | `StatusBadge` | `@reui/badge` |
|
|
| Create/Edit | `FormSheet` | Sheet, Field |
|
|
| Delete confirm | `ConfirmDialog` | AlertDialog |
|
|
| Nav | `AppShell` | [app-shell-12](https://reui.io/preview/base/app-shell-12) |
|
|
|
|
**Устарело (не использовать на новых экранах):** `DataGridCard`, `SectionCards` (Card KPI).
|
|
|
|
## Spacing
|
|
|
|
```
|
|
PageShell / main: gap-4 md:gap-6, px-4 md:px-6
|
|
FieldGroup: gap-4
|
|
Toolbar: gap-2
|
|
```
|
|
|
|
**Запрещено:** `space-y-*`, raw colors, Card как ops-shell, page-level Spinner.
|
|
|
|
## Button hierarchy
|
|
|
|
Max 1 primary (`default`) на экран; остальные `outline` / `ghost`.
|