63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { Calendar } from './Calendar'
|
|
import { RangeCalendar } from './RangeCalendar'
|
|
|
|
const meta = {
|
|
title: 'Components/Calendar',
|
|
component: Calendar,
|
|
argTypes: {
|
|
isDisabled: {
|
|
control: 'boolean',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Calendar>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {},
|
|
}
|
|
|
|
export const WithSelectedDate: Story = {
|
|
render: function Render() {
|
|
const [date, setDate] = useState<Date | null>(new Date())
|
|
return <Calendar value={date} onChange={setDate} />
|
|
},
|
|
}
|
|
|
|
export const WithMinMaxDate: Story = {
|
|
render: function Render() {
|
|
const [date, setDate] = useState<Date | null>(new Date())
|
|
const minDate = new Date()
|
|
minDate.setDate(minDate.getDate() - 7)
|
|
const maxDate = new Date()
|
|
maxDate.setDate(maxDate.getDate() + 7)
|
|
return <Calendar value={date} onChange={setDate} minValue={minDate} maxValue={maxDate} />
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
isDisabled: true,
|
|
},
|
|
}
|
|
|
|
export const Range: StoryObj<typeof RangeCalendar> = {
|
|
render: function Render() {
|
|
const [range, setRange] = useState<{ start: Date; end: Date } | null>(null)
|
|
return <RangeCalendar value={range} onChange={setRange} />
|
|
},
|
|
}
|
|
|
|
export const RangeWithSelectedDates: StoryObj<typeof RangeCalendar> = {
|
|
render: function Render() {
|
|
const start = new Date()
|
|
const end = new Date()
|
|
end.setDate(end.getDate() + 7)
|
|
const [range, setRange] = useState<{ start: Date; end: Date } | null>({ start, end })
|
|
return <RangeCalendar value={range} onChange={setRange} />
|
|
},
|
|
}
|