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