39b2b642d2
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). Co-authored-by: Cursor <cursoragent@cursor.com>
61 lines
2.7 KiB
Markdown
61 lines
2.7 KiB
Markdown
# Comment ajouter une nouvelle page full layout
|
||
|
||
Ce document décrit comment ajouter une nouvelle page principale dans le shell (DashboardLayout) et sa story full layout dans Storybook.
|
||
|
||
## Prérequis
|
||
|
||
- La page doit être rendue dans le même shell que Dashboard, Playlists, Library, Settings, Profile : **DashboardLayout** (voir [APP_SHELL.md](APP_SHELL.md)).
|
||
- Les routes protégées utilisent `wrapProtected` dans [routeConfig.tsx](../src/router/routeConfig.tsx), qui enveloppe le contenu avec `ProtectedLayoutRoute` → `DashboardLayout`.
|
||
|
||
## Étapes
|
||
|
||
### 1. Route
|
||
|
||
Dans [routeConfig.tsx](../src/router/routeConfig.tsx) :
|
||
|
||
- Importer (lazy) le composant de page depuis `LazyComponent` ou l’ajouter dans [lazy-component/lazyExports.ts](../src/components/ui/lazy-component/lazyExports.ts).
|
||
- Ajouter une entrée dans `getProtectedRoutes()` :
|
||
`{ path: '/votre-page', element: wrapProtected(<LazyVotrePage />) }`.
|
||
|
||
### 2. Story full layout
|
||
|
||
Dans [DashboardLayout.stories.tsx](../src/components/layout/DashboardLayout.stories.tsx) :
|
||
|
||
- Importer la page :
|
||
`import { VotrePage } from '@/features/...';`
|
||
- Ajouter une story sur le même modèle que `LibraryFullLayout` ou `SettingsFullLayout` :
|
||
|
||
```tsx
|
||
export const VotrePageFullLayout: Story = {
|
||
name: 'Votre page – full layout',
|
||
render: () => (
|
||
<DashboardLayout>
|
||
<VotrePage />
|
||
</DashboardLayout>
|
||
),
|
||
parameters: {
|
||
layout: 'fullscreen',
|
||
router: { initialEntries: ['/votre-page'] },
|
||
},
|
||
};
|
||
```
|
||
|
||
### 3. MSW (handlers)
|
||
|
||
Si la page charge des données via l’API, ajouter ou réutiliser les handlers dans [handlers.ts](../src/mocks/handlers.ts) pour éviter un loading infini dans Storybook (ex. `http.get('*/api/v1/votre-resource', ...)`).
|
||
|
||
### 4. Viewport
|
||
|
||
Les stories full layout utilisent le viewport par défaut du meta (desktop). Les captures visuelles Playwright utilisent 1280×720 (voir [visual-tests/README.md](../visual-tests/README.md)). Aucune config supplémentaire n’est nécessaire pour une nouvelle story.
|
||
|
||
### 5. Validation visuelle (optionnel)
|
||
|
||
Pour inclure la page dans la régression visuelle :
|
||
|
||
- Ajouter une entrée dans `SCREENS` dans [e2e/visual-complete.spec.ts](../e2e/visual-complete.spec.ts) si vous voulez une capture full page (ex. `{ name: 'votre-page', url: '/votre-page', auth: true, full: true }`).
|
||
- Lancer `npm run visual:capture` puis `npm run visual:compare` ; si les changements sont validés, `npm run visual:update` et committer les baselines.
|
||
|
||
## Règles UI
|
||
|
||
- Pas de valeurs arbitraires (w-[...], h-[...], gap-[...], etc.) : utiliser l’échelle Tailwind ou les tokens (voir [DESIGN_TOKENS.md](DESIGN_TOKENS.md)).
|
||
- Espacements et typo : respecter [SPACING_GUIDE.md](SPACING_GUIDE.md) et la hiérarchie dans DESIGN_TOKENS.md.
|