veza/apps/web/src/features/cloud/CloudPage.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import CloudPage from './pages/CloudPage';
import { http, HttpResponse } from 'msw';

const meta: Meta<typeof CloudPage> = {
  title: 'Cloud/CloudPage',
  component: CloudPage,
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;
type Story = StoryObj<typeof CloudPage>;

export const Default: Story = {};

export const Loading: Story = {
  parameters: {
    msw: {
      handlers: [
        http.get('*/api/v1/cloud/folders', async () => {
          await new Promise(() => {});
          return HttpResponse.json({ folders: [] });
        }),
        http.get('*/api/v1/cloud/files', async () => {
          await new Promise(() => {});
          return HttpResponse.json({ files: [] });
        }),
        http.get('*/api/v1/cloud/quota', async () => {
          await new Promise(() => {});
          return HttpResponse.json({
            quota: {
              max_bytes: 5368709120,
              used_bytes: 0,
              available: 5368709120,
              percentage: 0,
            },
          });
        }),
      ],
    },
  },
};

export const Empty: Story = {
  parameters: {
    msw: {
      handlers: [
        http.get('*/api/v1/cloud/folders', () => HttpResponse.json({ folders: [] })),
        http.get('*/api/v1/cloud/files', () => HttpResponse.json({ files: [] })),
        http.get('*/api/v1/cloud/quota', () =>
          HttpResponse.json({
            quota: {
              max_bytes: 5368709120,
              used_bytes: 0,
              available: 5368709120,
              percentage: 0,
            },
          })
        ),
      ],
    },
  },
};

export const Error: Story = {
  parameters: {
    msw: {
      handlers: [
        http.get('*/api/v1/cloud/folders', () =>
          HttpResponse.json({ error: 'Server error' }, { status: 500 })
        ),
        http.get('*/api/v1/cloud/files', () =>
          HttpResponse.json({ error: 'Server error' }, { status: 500 })
        ),
        http.get('*/api/v1/cloud/quota', () =>
          HttpResponse.json({ error: 'Server error' }, { status: 500 })
        ),
      ],
    },
  },
};

export const QuotaFull: Story = {
  parameters: {
    msw: {
      handlers: [
        http.get('*/api/v1/cloud/folders', () =>
          HttpResponse.json({
            folders: [
              {
                id: 'f1',
                name: 'My Tracks',
                parent_id: null,
                created_at: '2026-01-15T10:00:00Z',
                updated_at: '2026-01-15T10:00:00Z',
              },
            ],
          })
        ),
        http.get('*/api/v1/cloud/files', () =>
          HttpResponse.json({
            files: [
              {
                id: 'c1',
                user_id: 'u1',
                folder_id: 'f1',
                filename: 'huge-project.wav',
                s3_key: 'cloud/u1/c1/huge-project.wav',
                size_bytes: 4800000000,
                mime_type: 'audio/wav',
                created_at: '2026-02-01T12:00:00Z',
                updated_at: '2026-02-01T12:00:00Z',
              },
            ],
          })
        ),
        http.get('*/api/v1/cloud/quota', () =>
          HttpResponse.json({
            quota: {
              max_bytes: 5368709120,
              used_bytes: 5100000000,
              available: 268709120,
              percentage: 95,
            },
          })
        ),
      ],
    },
  },
};