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>
30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Visual Regression - Sidebar', () => {
|
|
test('should match design tokens implementation', async ({ page }) => {
|
|
// Visit the Storybook iframe directly for isolation
|
|
// ID derived from title: 'App/Layouts/Sidebar' -> 'app-layouts-sidebar'
|
|
await page.goto('http://localhost:6006/iframe.html?id=app-layouts-sidebar--default&viewMode=story');
|
|
|
|
// Wait for component to be stable
|
|
await page.waitForSelector('aside');
|
|
|
|
// Take snapshot of the entire customized layout (Side bar is fixed position in the story)
|
|
// We target the aside element directly for the component snapshot
|
|
const sidebar = page.locator('aside');
|
|
await expect(sidebar).toBeVisible();
|
|
|
|
// Initial State Snapshot
|
|
await expect(sidebar).toHaveScreenshot('sidebar-default.png');
|
|
|
|
// Interaction Test: Hover over an item
|
|
const studioItem = page.getByText('Cloud Files');
|
|
await studioItem.hover();
|
|
|
|
// Allow animation to complete (transition duration-200)
|
|
await page.waitForTimeout(300);
|
|
|
|
// Hover State Snapshot
|
|
await expect(sidebar).toHaveScreenshot('sidebar-hover-item.png');
|
|
});
|
|
});
|