Refactored multiple components, including PanelCard, SettingsCard, and DataGridShell, to replace Card with Frame for better organization and presentation. Enhanced the DataGridToolbar to support optional ReUI filters and improved the overall structure of the KPI stat grid. Updated .gitignore to include .env.local for local environment configurations, ensuring better management of environment variables.

2026-07-17 15:30:41 +07:00

2.6 KiB

Raw Permalink Blame History

UI Design Contract (ops apps)

Единый контракт для vps-tracker, CFDM и EvoBGP. Surface: ReUI Frame. Kit API: apps/web/src/components/reui-kit/.

Карта: llms.txt · Styling · License · Blocks

Surface

// apps/web/src/lib/ui-surface.ts
export const UI_SURFACE = 'frame' as const

Ops / list / dashboard / detail / settings — только Frame, не shadcn Card как shell. Не смешивать Card и Frame на одном ops-экране.

Canonical PRO references

Зона	Block	Preview
Shell	`app-shell-12` (+ cmdk/monitor где нужно)	https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7
KPI	`stats-12` (primary); `card-35` compact strip	https://reui.io/preview/base/stats-12 · https://reui.io/preview/base/card-35
Dashboard	`dashboard-1`	https://reui.io/preview/base/dashboard-1
Lists	`data-grid-filtering-2`	https://reui.io/preview/base/data-grid-filtering-2
Settings	`settings-16` + SettingRow (`settings-7`)	https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-7
Auth	`auth-13`	https://reui.io/preview/base/auth-13
Empty	`empty-state-12`	https://reui.io/preview/base/empty-state-12
Forms	`form-7` → Sheet/Drawer	https://reui.io/preview/base/form-7

Kit API (`reui-kit/`)

Component	Role
`ResourcePage`	Frame + line tabs + Filters + DataGrid
`KpiStatGrid`	stats-12 KPI tiles
`OpsDashboard`	KPI + charts + attention queue
`SettingsShell`	settings nav + Outlet
`DetailPanel`	detail Frame sections
`filter-utils`	apply/clear ReUI Filters

MCP workflow

MCP user-reui — search / get_block / get_component with surface: "frame"
Cite previewUrl + docsUrl
CLI from apps/web: pnpm dlx shadcn@latest add @reui/...
Adapt into kit — do not hand-roll KPI/grid/settings rows
validate_usage / get_audit_checklist

Primitives: MCP plugin-shadcn-shadcn + @evobgp/ui.

Spacing

Main: gap-4 md:gap-6, px-4 md:px-6
No space-y-* / space-x-* — use flex + gap-*
Max 1 primary CTA per screen
Semantic tokens only (variant="success"|"info"|"warning") — no raw bg-emerald-*

Forbidden

Card as ops list/dashboard shell
Hand-rolled data tables when ReUI DataGrid exists
Hand-rolled KPI grids when KpiStatGrid exists
Mixing Card and Frame surfaces on one ops screen

2.6 KiB Raw Permalink Blame History