de12f5036c
Major categories fixed: - TS6133 (188): Remove unused imports (React, icons, types) and variables - TS2322 (222): Fix type mismatches in stories (satisfies Meta -> const meta: Meta), add nullish coalescing for optional values, fix component prop types - TS2345 (43): Fix argument type mismatches with proper null checks and type narrowing - TS2741 (21): Add missing required properties to mock/story data - TS2339 (19): Fix property access on incorrect types, add type guards - TS2353 (13): Remove extra properties from object literals or extend interfaces - TS2352 (11): Fix type conversion chains - TS2307 (9): Fix import paths and module references - Other (42): Fix implicit any, possibly undefined, export declarations Vite build and tsc --noEmit both pass cleanly. Co-authored-by: Cursor <cursoragent@cursor.com>
120 lines
3.5 KiB
TypeScript
120 lines
3.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
||
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-foreground">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',
|
||
args: { children: null },
|
||
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',
|
||
args: { children: null },
|
||
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',
|
||
args: { children: null },
|
||
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',
|
||
args: { children: null },
|
||
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',
|
||
args: { children: null },
|
||
render: () => (
|
||
<DashboardLayout>
|
||
<UserProfilePage />
|
||
</DashboardLayout>
|
||
),
|
||
parameters: {
|
||
layout: 'fullscreen',
|
||
router: { initialEntries: ['/profile'] },
|
||
},
|
||
};
|