84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { TrackGrid } from './TrackGrid';
|
|
import { Track } from '../../player/types';
|
|
|
|
// Mock tracks
|
|
const mockTracks: Track[] = Array.from({ length: 12 }).map((_, i) => ({
|
|
id: `t${i}`,
|
|
title: `Track Title ${i + 1}`,
|
|
artist: `Artist ${i % 4 + 1}`,
|
|
duration: 180 + i * 10,
|
|
cover: `https://picsum.photos/id/${100 + i}/300/300`,
|
|
url: '',
|
|
artist_id: `a${i % 4 + 1}`,
|
|
album_id: `al${i % 4 + 1}`,
|
|
genre: 'Techno',
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString(),
|
|
user_id: 'u1',
|
|
is_public: true,
|
|
plays: 1000 + i * 100,
|
|
likes: 50 + i * 5
|
|
}));
|
|
|
|
const meta = {
|
|
title: 'Components/Features/Tracks/TrackGrid',
|
|
component: TrackGrid,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
onTrackPlay: { action: 'play' },
|
|
onTrackLike: { action: 'like' },
|
|
onTrackMore: { action: 'more' },
|
|
onTrackClick: { action: 'click' },
|
|
onDensityChange: { action: 'density changed' }
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="w-full max-w-6xl p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
} satisfies Meta<typeof TrackGrid>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
tracks: mockTracks,
|
|
showDensitySelector: true,
|
|
},
|
|
};
|
|
|
|
export const Loading: Story = {
|
|
args: {
|
|
tracks: [],
|
|
isLoading: true,
|
|
columns: 4
|
|
},
|
|
};
|
|
|
|
export const Empty: Story = {
|
|
args: {
|
|
tracks: [],
|
|
emptyMessage: 'No tracks found matching your criteria.'
|
|
},
|
|
};
|
|
|
|
export const Compact: Story = {
|
|
args: {
|
|
tracks: mockTracks.slice(0, 6),
|
|
density: 'compact',
|
|
showDensitySelector: true,
|
|
},
|
|
};
|
|
|
|
/** Density selector + grid to validate tokens. */
|
|
export const VisualStressTest: Story = {
|
|
args: {
|
|
tracks: mockTracks,
|
|
showDensitySelector: true,
|
|
density: 'comfortable',
|
|
},
|
|
};
|