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>
115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||
import { DashboardLayout } from './DashboardLayout';
|
||
import DashboardPage from '@/features/dashboard/pages/DashboardPage';
|
||
import { PlaylistListPage } from '@/features/playlists/pages/PlaylistListPage';
|
||
import { LibraryPage } from '@/features/library/pages/LibraryPage';
|
||
import { SettingsPage } from '@/features/settings/pages/SettingsPage';
|
||
import { UserProfilePage } from '@/features/profile/pages/UserProfilePage';
|
||
|
||
const placeholderContent = (
|
||
<div className="space-y-4">
|
||
<h1 className="text-3xl font-bold text-white">Dashboard Content</h1>
|
||
<p className="text-gray-400">This is the main content area rendered within the layout.</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 1</div>
|
||
<div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 2</div>
|
||
<div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 3</div>
|
||
</div>
|
||
{Array.from({ length: 20 }).map((_, i) => (
|
||
<div key={i} className="h-16 bg-white/5 rounded-lg border border-white/5 flex items-center px-4">
|
||
Item {i + 1}
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
const meta = {
|
||
title: 'App/Layouts/DashboardLayout',
|
||
component: DashboardLayout,
|
||
tags: ['autodocs'],
|
||
parameters: {
|
||
layout: 'fullscreen',
|
||
viewport: { defaultViewport: 'desktop' },
|
||
},
|
||
} satisfies Meta<typeof DashboardLayout>;
|
||
|
||
export default meta;
|
||
type Story = StoryObj<typeof meta>;
|
||
|
||
/** Shell with placeholder content. Use to validate scroll and proportions. */
|
||
export const Default: Story = {
|
||
name: 'App shell (placeholder)',
|
||
args: {
|
||
children: placeholderContent,
|
||
},
|
||
};
|
||
|
||
/** Full app view: shell + real Dashboard page (MSW mocks user + library). */
|
||
export const DashboardFullLayout: Story = {
|
||
name: 'Dashboard – full layout',
|
||
render: () => (
|
||
<DashboardLayout>
|
||
<DashboardPage />
|
||
</DashboardLayout>
|
||
),
|
||
parameters: {
|
||
layout: 'fullscreen',
|
||
router: { initialEntries: ['/dashboard'] },
|
||
},
|
||
};
|
||
|
||
/** Full app view: shell + Playlist list page (MSW mocks playlists). */
|
||
export const PlaylistsFullLayout: Story = {
|
||
name: 'Playlists – full layout',
|
||
render: () => (
|
||
<DashboardLayout>
|
||
<PlaylistListPage />
|
||
</DashboardLayout>
|
||
),
|
||
parameters: {
|
||
layout: 'fullscreen',
|
||
router: { initialEntries: ['/playlists'] },
|
||
},
|
||
};
|
||
|
||
/** Full app view: shell + Library page (MSW mocks tracks). */
|
||
export const LibraryFullLayout: Story = {
|
||
name: 'Library – full layout',
|
||
render: () => (
|
||
<DashboardLayout>
|
||
<LibraryPage />
|
||
</DashboardLayout>
|
||
),
|
||
parameters: {
|
||
layout: 'fullscreen',
|
||
router: { initialEntries: ['/library'] },
|
||
},
|
||
};
|
||
|
||
/** Full app view: shell + Settings page (MSW mocks user + users/settings). */
|
||
export const SettingsFullLayout: Story = {
|
||
name: 'Settings – full layout',
|
||
render: () => (
|
||
<DashboardLayout>
|
||
<SettingsPage />
|
||
</DashboardLayout>
|
||
),
|
||
parameters: {
|
||
layout: 'fullscreen',
|
||
router: { initialEntries: ['/settings'] },
|
||
},
|
||
};
|
||
|
||
/** Full app view: shell + Profile page (MSW mocks user profile). */
|
||
export const ProfileFullLayout: Story = {
|
||
name: 'Profile – full layout',
|
||
render: () => (
|
||
<DashboardLayout>
|
||
<UserProfilePage />
|
||
</DashboardLayout>
|
||
),
|
||
parameters: {
|
||
layout: 'fullscreen',
|
||
router: { initialEntries: ['/profile'] },
|
||
},
|
||
};
|