65 lines
3 KiB
Markdown
65 lines
3 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.
|
||
|
||
## Architecture des pages
|
||
|
||
Toutes les pages sont dans `features/<feature>/pages/`. Il n'existe pas de `components/views/` ni de `src/pages/` legacy. Le routing utilise exclusivement [lazyExports.ts](../src/components/ui/lazy-component/lazyExports.ts) qui importe depuis `@/features/*/pages/`.
|
||
|
||
## 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.
|