denozord/EvoBGP
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 141 Wiki Activity
Files
6c6e76fca3478ef56e02ff6cab4dbcb638fb42aa
EvoBGP/.agents/skills/shadcn-react/SKILL.md
T
DenozordecandCursor c144b49acf
CI / changes (push) Successful in 17s
Details
CI / commitlint (push) Has been skipped
Details
CI / openapi (push) Successful in 26s
Details
CI / web (push) Successful in 46s
Details
CI / go (push) Successful in 1m1s
Details
CI / bird2 (push) Successful in 17s
Details
CI / release (push) Failing after 2m22s
Details
feat!(web): migrate UI from SvelteKit to React + shadcn/ui + ReUI 
Web UI полностью переведён с SvelteKit на новый стек: React 19,
TanStack Router/Query/Table/Virtual, shadcn/ui (base-nova) и ReUI
enterprise-компоненты (data-grid, filters, autocomplete). Новый код
разложен по слоям: packages/ui (shadcn-примитивы), apps/web
(роуты, shared-обёртки, ReUI-адаптации).

BREAKING CHANGE: меняется структура и инструментинг фронтенда.

- apps/web/ — новый Vite + React-проект (@evobgp/web), file-based
  роуты TanStack Router; экраны dashboard, modules, monitoring,
  network, operations, schedule, settings, tenant-settings, access,
  directories.
- packages/ui/ — shadcn/ui-примитивы (@evobgp/ui) с общими стилями
  globals.css и cn-утилитой; CLI shadcn запускается из apps/web.
- apps/web/src/components/reui/ — enterprise-паттерны ReUI.
- pnpm workspace (pnpm-workspace.yaml, pnpm-lock.yaml, tsconfig.base.json)
  заменяет npm-проект в web/.
- web/ переименован в web-legacy-svelte/ (архив-референс для миграции);
  импорты оттуда запрещены правилом WEB-22.
- CI (.gitea/workflows/ci.yaml): job web переведён на Node 22 + pnpm 10
  (typecheck/lint/build через pnpm --filter @evobgp/web); пути триггеров
  обновлены под apps/web|packages/ui.
- deploy/docker/evobgp-web/Dockerfile: сборка из корня репозитория,
  pnpm install --frozen-lockfile, выход dist из apps/web/dist.
- .cursor/rules/web-shadcn.mdc, context7-stack.mdc, engineering.mdc,
  AGENTS.md — обновлены под React-стек (WEB-01..WEB-22, DOC-SYNC-06/07).

Проверки WEB-19 локально: typecheck, lint, build — exit 0.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-02 17:59:59 +07:00

7.0 KiB
Raw Blame History

name, description
name description
shadcn-react Управление shadcn/ui (React) + ReUI компонентами в EvoBGP — registry, CLI, импорты, матрица выбора. Использовать при любых UI-задачах в apps/web/ или packages/ui/ (новые экраны, компоненты, формы, data-grid, filters и др.).

shadcn/ui (React) + ReUI в EvoBGP

EvoBGP использует React 19 + shadcn/ui (base-nova) + ReUI (style: base-nova, не Radix). Источники правды: MCP plugin-shadcn-shadcn + ui.shadcn.com/docs + reui.io/docs.

См. .cursor/rules/web-shadcn.mdc (основные правила) и .cursor/rules/context7-stack.mdc (Context7 ID стека).

Порядок UI-задачи (строго)

  1. Codegraph codegraph_explore — найти существующие реализации и shared-обёртки.
  2. MCP plugin-shadcn-shadcn — get_project_registries (должны быть @shadcn и @reui).
  3. search_items_in_registries — компонент/block/example:
    • shadcn primitives/blocks → omit registries или ["@shadcn"]
    • Data Grid, Filters, Stepper, Kanban, Autocomplete и др. → registries: ["@reui"]
  4. get_item_examples_from_registries — полный код примера перед JSX.
  5. get_add_command_for_items — точная CLI-команда pnpm dlx shadcn@latest add ....
  6. Выполнить add из apps/web (не из корня монорепо, не из packages/ui).
  7. CLI docs (обязательно):
  8. Сверить examples из MCP с API из docs CLI — реализовать только после совпадения.
  9. Адаптировать под TanStack Router / Query → apps/web/src/.
  10. get_audit_checklist — перед merge PR.

Размещение и импорты

Слой Путь Импорт
shadcn primitives packages/ui/src/components/ @evobgp/ui/components/*
ReUI enterprise apps/web/src/components/reui/ @/components/reui/*
Проектные обёртки apps/web/src/components/ @/components/<name> 
cd apps/web
pnpm dlx shadcn@latest add button          # @shadcn primitive → packages/ui/src/components/
pnpm dlx shadcn@latest add @reui/data-grid # ReUI enterprise → apps/web/src/components/reui/

Матрица выбора shadcn vs ReUI

Задача Registry Импорт
Button, Card, Sheet, Field, Sidebar @shadcn @evobgp/ui/components/*
Blocks (sidebar-07, dashboard-01) @shadcn blocks → apps/web/src/components/
Data Grid (sort, pagination, virtual) @reui @/components/reui/data-grid/* → обёртка DataGridCard
Мультифильтры @reui @/components/reui/filters
Number field со stepper @reui @/components/reui/number-field
Autocomplete @reui @/components/reui/autocomplete → AutoCompleteInput
Date selector / range @reui @/components/reui/date-selector
Semantic badge (success/info/warning) @reui @/components/reui/badge или StatusBadge

Простые списки — shadcn Table. Сложные data-списки — ReUI data-grid (через DataGridCard), не shadcn Data Table.

Уже установленные shared-обёртки

В apps/web/src/components/:

  • PageHeader, PageShell — заголовки и обёртки страниц
  • QueryState — обёртка loading/error/empty для TanStack Query
  • EmptyState — пустые списки
  • ConfirmDialog — подтверждения (не window.confirm)
  • LoadingButton — кнопка с loading-состоянием
  • StatusBadge — статусные бейджи
  • SectionCards — сетка KPI-карточек
  • Skeletons (TableSkeleton, SectionCardsSkeleton) — скелетоны
  • TruncatedText — текст с тултипом
  • ModeToggle — переключатель темы

Перед созданием новой обёртки — проверить существующие через Codegraph.

Уже установленные ReUI-компоненты

В apps/web/src/components/reui/:

  • autocomplete, badge, data-grid/*, date-selector, filters, number-field

Перед добавлением дубликата — проверить Codegraph и существующие обёртки.

Зависимости (только apps/web, не packages/ui)

npm-пакет ReUI-компоненты
@tanstack/react-table data-grid
@tanstack/react-virtual data-grid (virtual)
@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/modifiers, @dnd-kit/utilities data-grid dnd, sortable, kanban
date-fns, react-day-picker date-selector

После shadcn add @reui/... — проверить, что CLI добавил недостающие deps в apps/web/package.json.

Semantic tokens (Styling)

ReUI расширяет тему shadcn токенами --success, --info, --warning, --destructive-foreground, --invert — уже в packages/ui/src/styles/globals.css.

  • Badge/Alert: variant="success" / "info" / "warning" — не bg-emerald-*
  • Базовая тема: pnpm dlx shadcn@latest apply b2fA --only theme
  • ReUI-токены: по Styling guide; не править globals.css вручную без сверки с docs

Запрещено

  • Писать UI по памяти, не проверив MCP
  • Копипаст с ui.shadcn.com без examples/add из MCP
  • Самописные примитивы, если есть item в registry
  • Пропускать MCP «потому что компонент простой»
  • Класть ReUI в packages/ui или импортировать как @evobgp/ui
  • Radix-варианты (/docs/components/radix/...) — только Base UI
  • Raw Tailwind-цвета вместо ReUI semantic variant
  • Использовать Tabler/Bootstrap/Material UI

Чеклист перед завершением UI-задачи

  • MCP search (с правильным registry) + examples
  • shadcn add <name> (или @reui/<name>) из apps/web
  • Импорты: @evobgp/ui/components/* для shadcn, @/components/reui/* для ReUI
  • Зависимости в apps/web/package.json
  • pnpm --filter @evobgp/web run typecheck — exit 0
  • pnpm --filter @evobgp/web run lint — exit 0
  • pnpm --filter @evobgp/web run build — exit 0
Reference in new issue View Git Blame Copy Permalink