veza/apps/web/src/features/tracks/components/TrackHistory.stories.tsx

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

const meta: Meta<typeof TrackHistory> = {
  title: 'Components/Features/Tracks/TrackHistory',
  component: TrackHistory,
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          "Historique des modifications d'un track avec timeline et pagination.",
      },
    },
  },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div className="max-w-xl border border-border/80 p-4 rounded-xl bg-background min-h-layout-story">
        <Story />
      </div>
    ),
  ],
};

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

export const Default: Story = {
  args: { trackId: 't1' },
  parameters: {
    docs: {
      description: {
        story: 'MSW retourne 2 entrées (created, updated).',
      },
    },
  },
};

export const Loading: Story = {
  render: () => <TrackHistorySkeleton />,
  parameters: {
    docs: {
      description: {
        story: 'Skeleton de la timeline (header + 3 lignes).',
      },
    },
  },
};

export const Empty: Story = {
  args: { trackId: 'empty' },
  parameters: {
    msw: {
      handlers: [
        http.get('*/api/v1/tracks/empty/history', () =>
          HttpResponse.json({
            success: true,
            data: { history: [], total: 0, limit: 50, offset: 0 },
          }),
        ),
      ],
    },
    docs: {
      description: {
        story: "MSW retourne une liste vide.",
      },
    },
  },
};

export const Error: Story = {
  args: { trackId: 'error' },
  parameters: {
    msw: {
      handlers: [
        http.get('*/api/v1/tracks/error/history', () =>
          HttpResponse.json(
            { success: false, error: { message: 'Track introuvable' } },
            { status: 404 },
          ),
        ),
      ],
    },
    docs: {
      description: {
        story: 'MSW retourne 404. Affichage Alert destructive.',
      },
    },
  },
};

/** Long labels and values — premium typography and layout. */
export const VisualStressTest: Story = {
  args: { trackId: 'stress' },
  parameters: {
    msw: {
      handlers: [
        http.get('*/api/v1/tracks/stress/history', () =>
          HttpResponse.json({
            success: true,
            data: {
              history: [
                {
                  id: '1',
                  track_id: 'stress',
                  action: 'updated',
                  old_value: JSON.stringify({ title: 'Very long previous title that might wrap' }),
                  new_value: JSON.stringify({ title: 'A' }),
                  created_at: new Date().toISOString(),
                },
                {
                  id: '2',
                  track_id: 'stress',
                  action: 'created',
                  old_value: null,
                  new_value: JSON.stringify({ description: 'Short' }),
                  created_at: new Date().toISOString(),
                },
              ],
              total: 2,
              limit: 50,
              offset: 0,
            },
          }),
        ),
      ],
    },
  },
};