senke/veza

senke 39b2b642d2 feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout

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>

2026-02-08 17:15:58 +01:00

2.7 KiB

Raw Blame History

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).
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.

2.7 KiB Raw Blame History Unescape Escape