48 lines
1.3 KiB
Plaintext
48 lines
1.3 KiB
Plaintext
|
---
|
||
|
|
description: Frontend folder structure — ui vs non-ui, thin pages, feature layout
|
||
|
|
globs: frontend/src/**
|
||
|
|
alwaysApply: false
|
||
|
|
---
|
||
|
|
|
||
|
|
# Frontend component structure
|
||
|
|
|
||
|
|
## Rules
|
||
|
|
|
||
|
|
| Kind | Location |
|
||
|
|
|------|----------|
|
||
|
|
| Cross-feature UI | `components/ui/shared/` |
|
||
|
|
| Feature UI | `components/ui/{feature}/` |
|
||
|
|
| Cross-feature non-UI | `components/shared/` |
|
||
|
|
| Feature non-UI | `components/{feature}/` |
|
||
|
|
| Route logic | `components/ui/{feature}/{Feature}Page.tsx` |
|
||
|
|
| App routes | `app/**/page.tsx` — **thin wrapper only** |
|
||
|
|
|
||
|
|
## Thin page pattern
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
'use client';
|
||
|
|
import { PatientsPage } from '@/components/ui/patient/PatientsPage';
|
||
|
|
export default function Page() {
|
||
|
|
return <PatientsPage />;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Reference: `app/.../treatment/page.tsx` + `components/ui/treatment/TreatmentWorkspace.tsx`.
|
||
|
|
|
||
|
|
## Do not
|
||
|
|
|
||
|
|
- Put React components (`.tsx` with JSX) in `components/` outside `ui/`.
|
||
|
|
- Put pure helpers (`.ts`, no JSX) inside `components/ui/`.
|
||
|
|
- Put business logic, API calls, or large forms directly in `app/**/page.tsx`.
|
||
|
|
|
||
|
|
## API & errors
|
||
|
|
|
||
|
|
- API clients: `lib/api/`.
|
||
|
|
- Catch blocks: `getUserFacingError(err, tErrors, fallback)` from `components/shared/formatApiError.ts`.
|
||
|
|
|
||
|
|
## When adding UI
|
||
|
|
|
||
|
|
1. Check `components/ui/shared/` for an existing primitive.
|
||
|
|
2. Check the feature's `ui/{feature}/` folder for an existing pattern.
|
||
|
|
3. Add i18n keys to en, fa, and nl.
|