import React from 'react'; import * as Yup from 'yup'; import {SQFormDatePicker as SQFormDatePickerComponent} from '../src'; import {createDocsPage} from './utils/createDocsPage'; import {SQFormStoryWrapper} from './components/SQFormStoryWrapper'; import * as markdown from '../notes/SQFormDatePicker.md'; import type {Story, Meta} from '@storybook/react'; import type {SQFormDatePickerProps} from 'components/SQForm/SQFormDatePicker'; import type {SQFormStoryWrapperProps} from './components/SQFormStoryWrapper'; export type FormProps = { initialValues?: SQFormStoryWrapperProps['initialValues']; } & Omit<SQFormStoryWrapperProps, 'initialValues' | 'children'>; export type SQFormDatePickerStory = Story< Omit<SQFormDatePickerProps, 'label' | 'name'> & { sqFormProps?: FormProps; schema: SQFormStoryWrapperProps['validationSchema']; } >; const meta: Meta = { title: 'Components/SQFormDatePicker', component: SQFormDatePickerComponent, argTypes: { onBlur: {action: 'blurred', table: {disable: true}}, onChange: {action: 'changed', table: {disable: true}}, schema: {table: {disable: true}}, name: {table: {disable: true}}, }, parameters: { docs: {page: createDocsPage({markdown})}, }, }; const MOCK_INITIAL_VALUE = { date: '09/22/2020', }; const defaultArgs = { label: 'Date', name: 'date', }; const Template: SQFormDatePickerStory = (args) => { const {schema, sqFormProps, ...rest} = args; return ( <SQFormStoryWrapper initialValues={MOCK_INITIAL_VALUE} validationSchema={schema} {...sqFormProps} > <SQFormDatePickerComponent name={defaultArgs.name} label={defaultArgs.label} {...rest} /> </SQFormStoryWrapper> ); }; export const BasicDatePicker = Template.bind({}); BasicDatePicker.args = { ...defaultArgs, schema: Yup.object({ date: Yup.date() .required() .min(new Date('2020-09-22')) .max(new Date('2100-10-10')) .typeError('Invalid date'), }), }; export const DatePickerBefore2024 = Template.bind({}); DatePickerBefore2024.args = { ...defaultArgs, schema: Yup.object({ date: Yup.date() .required() .max(new Date('2024-01-01'), 'Date must be before 2024') .typeError('Invalid date'), }), muiFieldProps: { allowSameDateSelection: true, }, }; export default meta;