40 lines
1.7 KiB
Markdown
40 lines
1.7 KiB
Markdown
|
---
|
||
|
|
name: dyolink-frontend-structure
|
||
|
|
description: Audits or refactors Dyolink frontend folder layout (components vs components/ui, thin pages). Use when moving components, fixing structure violations, or when the user mentions folder rules, page.tsx bloat, or component organization.
|
||
|
|
---
|
||
|
|
|
||
|
|
# Frontend structure audit
|
||
|
|
|
||
|
|
## Target layout
|
||
|
|
|
||
|
|
```
|
||
|
|
components/ui/shared/ → reusable UI (Button, Dialog, …)
|
||
|
|
components/ui/{feature}/ → feature UI + {Feature}Page.tsx
|
||
|
|
components/shared/ → cross-feature non-UI
|
||
|
|
components/{feature}/ → feature non-UI (helpers, config)
|
||
|
|
app/**/page.tsx → thin wrapper importing ui/{feature} page component
|
||
|
|
```
|
||
|
|
|
||
|
|
## Audit steps
|
||
|
|
|
||
|
|
1. List files in `components/` **outside** `ui/` — any `.tsx` with JSX → move to `components/ui/{feature}/`.
|
||
|
|
2. List files in `components/ui/` — any pure `.ts` helper → move to `components/{feature}/` or `components/shared/`.
|
||
|
|
3. List `app/**/page.tsx` — if > ~30 lines of logic/state, extract to `components/ui/{feature}/{Feature}Page.tsx`.
|
||
|
|
4. Update all `@/components/...` imports.
|
||
|
|
5. Run `npx tsc --noEmit` in `frontend/`.
|
||
|
|
|
||
|
|
## Common mistakes
|
||
|
|
|
||
|
|
| Wrong | Right |
|
||
|
|
|-------|-------|
|
||
|
|
| `components/today/TodayDashboard.tsx` | `components/ui/today/TodayDashboard.tsx` |
|
||
|
|
| `components/ui/treatment/treatmentTypeDisplay.ts` | `components/shared/treatmentTypeDisplay.ts` |
|
||
|
|
| Logic in `app/.../staff/page.tsx` | `components/ui/staff/StaffPage.tsx` |
|
||
|
|
|
||
|
|
## Non-UI that stays outside ui/
|
||
|
|
|
||
|
|
- `components/today/widget-registry.ts`, `chart-theme.ts` (config)
|
||
|
|
- `components/staff/workingHours.ts`
|
||
|
|
- `components/appointments/appointmentTime.ts`
|
||
|
|
- `components/i18n/LocaleSync.tsx` (null-render side effect for layout)
|