import React from 'react'; import * as Yup from 'yup'; import type {Story, Meta} from '@storybook/react'; import {SQFormTextarea as SQFormTextareaComponent} from '../src'; import type {SQFormTextareaProps} from 'components/SQForm/SQFormTextarea'; import getSizeProp from './utils/getSizeProp'; import {createDocsPage} from './utils/createDocsPage'; import {SQFormStoryWrapper} from './components/SQFormStoryWrapper'; import type {SQFormStoryWrapperProps} from './components/SQFormStoryWrapper'; import type {GridSizeOptions} from './types/storyHelperTypes'; type FormProps = { initialValues?: SQFormStoryWrapperProps['initialValues']; } & Omit<SQFormStoryWrapperProps, 'initialValues' | 'children'>; type SQFormTextAreaStory = Story< Omit<SQFormTextareaProps, 'size'> & { size: GridSizeOptions; sqFormProps?: FormProps; schema: SQFormStoryWrapperProps['validationSchema']; } >; const meta: Meta = { title: 'Components/SQFormTextarea', component: SQFormTextareaComponent, argTypes: { onBlur: {action: 'blurred', table: {disable: true}}, onChange: {action: 'changed', table: {disable: true}}, name: {table: {disable: true}}, }, parameters: { docs: { page: createDocsPage(), }, }, }; const defaultArgs = { label: 'Textarea', name: 'textarea', }; const Template: SQFormTextAreaStory = (args) => { const {schema, sqFormProps, size, ...rest} = args; return ( <SQFormStoryWrapper initialValues={{[defaultArgs.name]: ''}} validationSchema={schema} {...sqFormProps} > <SQFormTextareaComponent {...rest} size={getSizeProp(size)} /> </SQFormStoryWrapper> ); }; export const Default = Template.bind({}); Default.args = defaultArgs; export const WithValidation = Template.bind({}); WithValidation.args = { ...defaultArgs, schema: Yup.object({ [defaultArgs.name]: Yup.string().required(), }), }; WithValidation.parameters = { controls: {exclude: 'schema'}, }; export default meta;