[5/n][Storybook] Calendar update argTypes (#42)

This commit is contained in:
Vivian Phung 2024-05-14 17:08:33 -04:00 committed by GitHub
commit ebe6d35b54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -6,14 +6,37 @@ const meta: Meta<typeof Calendar> = {
title: 'Components/Calendar', title: 'Components/Calendar',
component: Calendar, component: Calendar,
tags: ['autodocs'], tags: ['autodocs'],
args: { argTypes: {
wrapperProps: 'any' as unknown as any, wrapperProps: {
calendarWrapperProps: 'any' as unknown as any, control: 'object',
footerProps: 'any' as unknown as any, },
actions: 'any' as unknown as any, calendarWrapperProps: {
onSelect: () => {}, control: 'object',
onCancel: () => {}, },
onReset: () => {}, footerProps: {
control: 'object',
},
actions: {
control: 'object',
},
onSelect: {
action: 'select',
},
onCancel: {
action: 'cancel',
},
onReset: {
action: 'reset',
},
selectRange: {
control: 'boolean',
},
activeStartDate: {
control: 'date',
},
value: {
control: 'date',
},
}, },
}; };
@ -21,7 +44,9 @@ export default meta;
type Story = StoryObj<typeof Calendar>; type Story = StoryObj<typeof Calendar>;
export const Default: Story = { export const Default: Story = {};
export const ToShowCode: Story = {
render: ({ render: ({
wrapperProps, wrapperProps,
calendarWrapperProps, calendarWrapperProps,
@ -30,6 +55,10 @@ export const Default: Story = {
onSelect, onSelect,
onCancel, onCancel,
onReset, onReset,
selectRange,
activeStartDate,
value,
...arg
}) => ( }) => (
<Calendar <Calendar
wrapperProps={wrapperProps} wrapperProps={wrapperProps}
@ -39,6 +68,19 @@ export const Default: Story = {
onSelect={onSelect} onSelect={onSelect}
onCancel={onCancel} onCancel={onCancel}
onReset={onReset} onReset={onReset}
selectRange={selectRange}
activeStartDate={activeStartDate}
value={value}
{...arg}
/> />
), ),
args: {
actions: <div>Actions</div>,
onSelect: (value) => console.log(value),
onCancel: () => console.log('Cancel'),
onReset: () => console.log('Reset'),
selectRange: false,
activeStartDate: new Date(),
value: new Date(),
},
}; };