shancheas
ff6814d038
- Introduced coding standards for TypeScript and React in SKILL.md. - Added continuous learning skill with configuration and evaluation scripts. - Created detail layout guidelines for read-only pages. - Established form layout rules for data-entry forms. - Documented project guidelines for the frontend monorepo. - Implemented security review checklist for frontend/Electron applications. - Developed a verification loop skill for comprehensive session checks. This commit enhances the skill set available for developers, ensuring adherence to best practices and improving code quality.
42 lines
2.3 KiB
Plaintext
42 lines
2.3 KiB
Plaintext
---
|
|
description: Use apps/showcase as the reference for UI components and @repo package APIs
|
|
globs: apps/{web,showcase}/**/*.{ts,tsx}
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Showcase = Component & Function Reference
|
|
|
|
`apps/showcase` is the living cookbook. Prefer copying its import paths and composition patterns into `apps/web`. Do not add product business logic to showcase.
|
|
|
|
## Demo → capability map
|
|
|
|
| Showcase route / folder | What to learn | Prefer importing from |
|
|
|---|---|---|
|
|
| `pages/ui-components` | Theme, Badge, Button, inputs, Table, StatusBadge | `@repo/ui/components`, `@repo/ui/provider` |
|
|
| `pages/forms` (+ `form-demo`) | RHF fields, Zod, async selects, rich text | `@repo/ui/form`, `@repo/ui/validators` |
|
|
| `pages/shell-demo` | CoreAppShell layouts | `@repo/ui/components` (`CoreAppShell`) |
|
|
| `pages/action-tools` | PageActions / RowActions | `@repo/ui/components` |
|
|
| `pages/ag-grid` | Enterprise grid + theme | `@repo/ui/components` / `@repo/ui/ag-grid` |
|
|
| `pages/storage` | Local + PouchDB patterns | `@repo/core-storage` (+ app `core/storage`) |
|
|
| `pages/events` | Event bus, listeners, transformers | `@repo/core-events`, `@repo/core-api` |
|
|
| `pages/auth`, `pages/rbac`, `pages/hardware` | Auth/RBAC/printer IPC samples | Match showcase; wire real flows in `apps/web` |
|
|
|
|
Run: `pnpm dev:showcase` → typically `http://localhost:517x`.
|
|
|
|
## Usage rules
|
|
|
|
- **Primitives**: `@repo/ui/components` (Mantine re-exports + StatusBadge, AppShell, etc.).
|
|
- **Form fields**: `Field*` from `@repo/ui/form` (also re-exported from `@repo/ui/components`). Pair with `react-hook-form` + `zod` + `@repo/ui/validators` (`compose`, `required`, `rangeLength`, …).
|
|
- **Module pages in web**: foundations (`Enterprise*Provider`, `EnterpriseDataTable`) — see `apps/web` example module; showcase shows building blocks, web shows full module wiring.
|
|
- **Theme**: wrap with `ThemeProvider` from `@repo/ui/provider`; drive scheme/density like showcase `theme.store`.
|
|
- If showcase and docs disagree, prefer **showcase code** for API shape and **docs-dev** for concepts.
|
|
|
|
```tsx
|
|
// ✅ GOOD — same surface as showcase form-demo
|
|
import { FieldTextInput, FieldSelect } from '@repo/ui/form';
|
|
import { Button, Stack } from '@repo/ui/components';
|
|
|
|
// ❌ BAD — raw Mantine bypassing the design system
|
|
import { TextInput } from '@mantine/core';
|
|
```
|