71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { useEffect } from 'react';
|
|
import { CartView, CartViewSkeleton } from './cart-view';
|
|
import { useCartStore } from '../../stores/cartStore';
|
|
|
|
const MOCK_ITEMS = [
|
|
{
|
|
cartId: 'c1',
|
|
product: {
|
|
id: 'p1',
|
|
title: 'Analog Dreams',
|
|
price: 29.99,
|
|
coverUrl: 'https://picsum.photos/200',
|
|
author: 'Vintage Synths',
|
|
type: 'sample_pack',
|
|
},
|
|
quantity: 1,
|
|
},
|
|
{
|
|
cartId: 'c2',
|
|
product: {
|
|
id: 'p2',
|
|
title: 'Tech House Utils',
|
|
price: 15.0,
|
|
coverUrl: 'https://picsum.photos/201',
|
|
author: 'Club Ready',
|
|
type: 'preset',
|
|
},
|
|
quantity: 2,
|
|
},
|
|
];
|
|
|
|
const meta: Meta<typeof CartView> = {
|
|
title: 'Components/Features/Views/CartView',
|
|
component: CartView,
|
|
parameters: { layout: 'fullscreen' },
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="bg-background min-h-layout-page">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
const withStoreState = (items: typeof MOCK_ITEMS) => (Story: React.ComponentType) => {
|
|
useEffect(() => {
|
|
useCartStore.setState({ items: items as Parameters<typeof useCartStore.setState>[0]['items'] });
|
|
return () => useCartStore.setState({ items: [] });
|
|
}, [items]);
|
|
return <Story />;
|
|
};
|
|
|
|
export const Loading: Story = {
|
|
name: 'Loading',
|
|
render: () => <CartViewSkeleton />,
|
|
};
|
|
|
|
export const Default: Story = {
|
|
name: 'Par défaut',
|
|
decorators: [withStoreState(MOCK_ITEMS)],
|
|
};
|
|
|
|
export const Empty: Story = {
|
|
name: 'Vide',
|
|
decorators: [withStoreState([])],
|
|
};
|