feat(web): добавить ReUI PRO rules, KpiStatGrid и убрать ModeToggle

Полный комплект frontend-правил, hybrid KPI/QuickAction kit, contract NavUser; удалён мёртвый ModeToggle. Co-authored-by: Cursor <[email protected]>
2026-07-21 00:23:04 +07:00
parent 82fb47b610
commit 779186f1e4
50 changed files with 3553 additions and 60 deletions
@@ -1,44 +1,80 @@
 # UI Design Contract — Auth Portal

-Surface lock: **`frame`** (ReUI Frame). Не смешивать shadcn Card и Frame на ops-экранах.
+Единый контракт ops-семейства (CFDM / vps / EvoBGP / EvoFirewall / **auth-portal**).  
+Surface: **ReUI Frame**. Иерархия: **ReUI PRO > shadcn primitives**.

-Эталоны: [app-shell-12](https://reui.io/preview/base/app-shell-12) · [solution-users-1](https://reui.io/preview/base/solution-users-1) · [solution-users-2](https://reui.io/preview/base/solution-users-2) · [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) · [empty-state-12](https://reui.io/preview/base/empty-state-12)
+Карта: [llms.txt](https://reui.io/llms.txt) · [Styling](https://reui.io/docs/styling) · [License](https://reui.io/docs/license-setup) · [Blocks](https://reui.io/blocks)
+
+Эталоны: [app-shell-12](https://reui.io/preview/base/app-shell-12) · [solution-users-1](https://reui.io/preview/base/solution-users-1) · [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) · [empty-state-12](https://reui.io/preview/base/empty-state-12) · KPI [stats-12](https://reui.io/preview/base/stats-12)
+
+## Surface
+
+Project lock: **`surface: frame`**. Ops / list / settings — только Frame. Не смешивать Card и Frame.
+
+## Kit (`reui-kit/`)
+
+| Component | Role |
+|-----------|------|
+| `ResourcePage` | Frame + Filters + DataGrid (admin lists) |
+| `KpiStatGrid` | EvoBGP hybrid KPI (если нужен dashboard) |
+| `QuickActionGrid` | Frame quick actions (sibling KPI) |
+| `SettingsShell` | settings nav |
+
+Markup KPI/QuickActions — SoT EvoBGP (diff только `@authportal/ui`).

 ## Shared App Shell chrome

-Эталон: CFDM / EvoBGP + ReUI [app-shell-12](https://reui.io/preview/base/app-shell-12).
-
-При переключении между portal / CFDM / EvoBGP / vps-tracker меняются **только** sidebar nav labels/hrefs и `main` content. Разметка, ширина, фон и hover chrome идентичны.
+При переключении portal / CFDM / EvoBGP / vps / fw меняются **только** sidebar nav и `main`.

 | Токен / зона | Значение |
 |--------------|----------|
 | `--sidebar-width` | `240px` |
-| Sidebar / hover colors | theme `--sidebar` / `--sidebar-accent` — **без** AppShell `color-mix` override |
-| Header | `h-12`, `sticky`, `border-b`, `px-4 md:px-6` |
+| Sidebar / hover | theme `--sidebar` / `--sidebar-accent` — без `color-mix` override |
+| Header | `h-12`, sticky, `border-b`, `px-4 md:px-6` |
 | Header left | `SidebarTrigger` + `Separator` + Breadcrumb |
-| Header right | **AppsMenu** (аккаунт — в sidebar footer `NavUser`) |
-| Sidebar footer | **NavUser** — аватар, имя, email, тема, выход · [app-shell-12](https://reui.io/preview/base/app-shell-12) |
-| Sidebar | AppSwitcher → groups → icons `size-4` → **пустой** `SidebarFooter` |
+| Header right | **AppsMenu** (тема — в NavUser) |
+| Sidebar footer | **NavUser** — аватар, имя, email, тема (segmented), выход · [app-shell-1](https://reui.io/preview/base/app-shell-1) |
 | `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |

-Запрещено в chrome: `SidebarRail`, `NavUser` footer, Search pill в header.
+Запрещено в chrome: `SidebarRail`, Search pill в header, `ModeToggle` в header (тема только в NavUser).

 Nav groups Auth Portal:

 - **Портал:** Приложения (`/apps`)
 - **Админ** (только `is_admin`): Пользователи (`/admin`), Ссылки приложений (`/admin/apps`)

-App Switcher (source of truth): `portal_settings.app_switcher_json` → public `GET /api/v1/app-switcher`, admin `GET/PUT /api/v1/admin/app-switcher`. UI: `/admin/apps` ([settings-16](https://reui.io/preview/base/settings-16)). Ids: `cfdm` · `vps` · `bgp`. Consumers (CFDM, vps-tracker) только читают public API.
+App Switcher: `portal_settings.app_switcher_json` → public `GET /api/v1/app-switcher`, admin `GET/PUT /api/v1/admin/app-switcher`. Ids: `cfdm` · `vps` · `bgp` · `fw`.
+
+## MCP workflow
+
+1. MCP `user-reui` — `search` / `get_block` / `get_component` with `surface: "frame"`
+2. Cite `previewUrl` + `docsUrl`
+3. CLI from `apps/web`: `pnpm dlx shadcn@latest add @reui/...`
+4. Adapt into kit
+5. `validate_usage` / `get_audit_checklist`
+
+Primitives: MCP `plugin-shadcn-shadcn` + `@authportal/ui`.
+
+## License
+
+```env
+# apps/web/.env.local
+REUI_LICENSE_KEY=
+```
+
+`apps/web/components.json` → `Authorization: Bearer ${REUI_LICENSE_KEY}`.

 ## Spacing

 - AppShell main / PageShell: `gap-4 md:gap-6`
 - No `space-y-*` / `space-x-*` — use `flex` + `gap-*`
 - Max 1 primary CTA per screen
- Semantic tokens only (`Badge` / `Alert` variants) — no raw `bg-emerald-*`
+- Semantic tokens only — no raw `bg-emerald-*`

 ## Forbidden

 - Card as ops list/dashboard shell
 - Hand-rolled data tables when ReUI DataGrid exists
+- Hand-rolled KPI / Quick Actions when kit exists
 - Mixing Card and Frame on the same ops screen
+- ModeToggle in header