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 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).
Les routes protégées utilisent wrapProtected dans routeConfig.tsx, qui enveloppe le contenu avec ProtectedLayoutRoute → DashboardLayout.

Étapes

1. Route

Dans routeConfig.tsx :

Importer (lazy) le composant de page depuis LazyComponent ou l’ajouter dans lazy-component/lazyExports.ts.
Ajouter une entrée dans getProtectedRoutes() :
{ path: '/votre-page', element: wrapProtected(<LazyVotrePage />) }.

2. Story full layout

Dans DashboardLayout.stories.tsx :

Importer la page :
import { VotrePage } from '@/features/...';
Ajouter une story sur le même modèle que LibraryFullLayout ou SettingsFullLayout :

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 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). 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 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).
Espacements et typo : respecter SPACING_GUIDE.md et la hiérarchie dans DESIGN_TOKENS.md.

3 KiB Raw Blame History Unescape Escape