123 lines
4.5 KiB
Plaintext
123 lines
4.5 KiB
Plaintext
---
|
|
description: shadcn/ui Monorepo — структура apps/web + packages/ui, CLI workflow, импорты @telemt/ui
|
|
globs: apps/web/**/*,packages/ui/**/*
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Frontend Monorepo (shadcn/ui + ReUI)
|
|
|
|
**Обязательный стандарт структуры** — [Monorepo docs](https://ui.shadcn.com/docs/monorepo), ReUI — [Get Started](https://reui.io/docs/get-started).
|
|
|
|
## Layout
|
|
|
|
```
|
|
apps/web/ # Vite SPA (routes, queries, domain components)
|
|
apps/api/ # Fastify API + static SPA in prod
|
|
packages/ui/ # @telemt/ui — shadcn primitives
|
|
packages/shared/ # @telemt/shared — Zod schemas, parse-fqdn
|
|
packages/db/ # @telemt/db — Drizzle schema, repositories
|
|
```
|
|
|
|
## Два components.json
|
|
|
|
| Файл | Назначение |
|
|
|------|------------|
|
|
| [`apps/web/components.json`](apps/web/components.json) | App aliases; `ui` → `@telemt/ui/components` |
|
|
| [`packages/ui/components.json`](packages/ui/components.json) | UI package aliases |
|
|
|
|
**Синхронизировать:** `style`, `iconLibrary`, `baseColor`, `registries` в обоих файлах.
|
|
|
|
```json
|
|
"registries": {
|
|
"@reui": "https://reui.io/r/{style}/{name}.json"
|
|
}
|
|
```
|
|
|
|
## CLI — только из apps/web
|
|
|
|
```bash
|
|
cd apps/web
|
|
pnpm dlx shadcn@latest docs button
|
|
pnpm dlx shadcn@latest add button
|
|
pnpm dlx shadcn@latest add sidebar-07
|
|
pnpm dlx shadcn@latest add login-03
|
|
pnpm dlx shadcn@latest add @reui/data-grid
|
|
pnpm dlx shadcn@latest add @reui/filters
|
|
pnpm dlx shadcn@latest apply b2fA --only theme -y
|
|
```
|
|
|
|
Перед обновлением существующих компонентов:
|
|
|
|
```bash
|
|
pnpm dlx shadcn@latest add button --dry-run
|
|
pnpm dlx shadcn@latest add button --diff
|
|
pnpm dlx shadcn@latest info --json
|
|
```
|
|
|
|
## Куда CLI кладёт файлы
|
|
|
|
| Команда | Куда |
|
|
|---------|------|
|
|
| `add button` | `packages/ui/src/components/button.tsx` |
|
|
| `add login-03` | примитивы → `packages/ui`, block → `apps/web/src/components/` |
|
|
| `add @reui/data-grid` | `apps/web/src/components/reui/data-grid/` |
|
|
| `add @reui/filters` | `apps/web/src/components/reui/filters.tsx` |
|
|
|
|
## Импорты
|
|
|
|
```tsx
|
|
import { Button } from '@telemt/ui/components/button'
|
|
import { cn } from '@telemt/ui/lib/utils'
|
|
import { useIsMobile } from '@telemt/ui/hooks/use-mobile'
|
|
import '@telemt/ui/globals.css' // только в main.tsx
|
|
```
|
|
|
|
| Запрещено | Разрешено |
|
|
|-----------|-----------|
|
|
| `@/components/ui/*` | `@telemt/ui/components/*` |
|
|
| `@/components/reui/*` в `packages/ui` | `apps/web/src/components/reui/` |
|
|
| `apps/web/src/components/ui/` | `packages/ui/src/components/` |
|
|
| Ручное редактирование `globals.css` | `pnpm dlx shadcn@latest apply b2fA --only theme` |
|
|
|
|
**Registry imports после add:**
|
|
- shadcn community → переписывать на `@telemt/ui/...`
|
|
- ReUI `@reui/*` → остаётся `@/components/reui/...`; shadcn-примитивы внутри ReUI → `@telemt/ui/...`
|
|
|
|
**Post-add checklist ReUI:**
|
|
- [ ] Импорты `@/components/ui/*` → `@telemt/ui/components/*`
|
|
- [ ] Зависимости в `apps/web/package.json` (не в `packages/ui`)
|
|
- [ ] `pnpm --filter web build`
|
|
|
|
## Разделение ответственности
|
|
|
|
- **`packages/ui`** — только output `shadcn add` (примитивы, registry hooks, `cn`)
|
|
- **`apps/web/src/components/reui`** — только output `shadcn add @reui/*` (см. [`reui-mcp.mdc`](reui-mcp.mdc))
|
|
- **`apps/web/src/components`** — blocks, layout, domain (`login-form`, `app-shell`, `reui-kit/*`)
|
|
|
|
## Стили (Tailwind v4 monorepo)
|
|
|
|
`packages/ui/src/styles/globals.css` — единственный CSS-файл. **Обязательно** `@source` для обоих workspace:
|
|
|
|
```css
|
|
@source "../"; /* packages/ui/src */
|
|
@source "../../../apps/web/src"; /* apps/web/src */
|
|
```
|
|
|
|
Без `@source` Tailwind не видит классы из `packages/ui` и `apps/web` — UI ломается (нет sidebar, card, и т.д.).
|
|
|
|
```bash
|
|
pnpm install
|
|
pnpm --filter web dev
|
|
pnpm --filter web build
|
|
```
|
|
|
|
## Чеклист
|
|
|
|
- [ ] Два `components.json` согласованы (включая `@reui` registry)
|
|
- [ ] `shadcn add` из `apps/web`
|
|
- [ ] shadcn → `@telemt/ui`; ReUI → `@/components/reui`
|
|
- [ ] Нет `apps/web/src/components/ui/`
|
|
- [ ] `pnpm --filter web build` без ошибок
|
|
|
|
См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`reui-mcp.mdc`](reui-mcp.mdc), [`vite-tanstack-frontend.mdc`](vite-tanstack-frontend.mdc).
|