veza/apps/web/src/components/layout/DashboardLayout.stories.tsx

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-foreground">Dashboard Content</h1>
    <p className="text-muted-foreground">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'] },
  },
};