Files
gsap-carousel/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.stories.tsx

71 lines
1.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { HISTORICAL_PERIODS } from '@/entities/TimePeriod'
import { EventsCarousel } from './EventsCarousel'
import type { Meta, StoryObj } from '@storybook/react'
const meta = {
title: 'Widgets/EventsCarousel',
component: EventsCarousel,
parameters: {
layout: 'fullwidth',
},
tags: ['autodocs'],
decorators: [
(Story) => (
<div style={{ padding: '0 50px' }}>
<Story />
</div>
),
],
argTypes: {
visible: {
control: 'boolean',
description: 'Видимость карусели (управляет анимацией)',
},
},
} satisfies Meta<typeof EventsCarousel>
export default meta
type Story = StoryObj<typeof meta>
/**
* Базовая карусель с событиями первого периода
*/
export const Default: Story = {
args: {
events: HISTORICAL_PERIODS[0].events,
visible: true,
},
}
/**
* Карусель с событиями второго периода (Cinema)
*/
export const CinemaPeriod: Story = {
args: {
events: HISTORICAL_PERIODS[1].events,
visible: true,
},
}
/**
* Скрытая карусель (для демонстрации анимации)
*/
export const Hidden: Story = {
args: {
events: HISTORICAL_PERIODS[0].events,
visible: false,
},
}
/**
* Карусель с малым количеством событий
*/
export const FewEvents: Story = {
args: {
events: HISTORICAL_PERIODS[0].events.slice(0, 2),
visible: true,
},
}