import React from 'react'; import * as Yup from 'yup'; import type {Story, Meta} from '@storybook/react'; import {SQFormAutocomplete} from '../src'; import type {SQFormAutocompleteProps} from 'components/SQForm/SQFormAutocomplete'; 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 SQFormAutocompleteStory = Story< Omit<SQFormAutocompleteProps, 'size'> & { size?: GridSizeOptions; sqFormProps?: FormProps; schema: SQFormStoryWrapperProps['validationSchema']; } >; const meta: Meta = { title: 'Components/SQFormAutocomplete', component: SQFormAutocomplete, argTypes: { onBlur: {action: 'blurred', table: {disable: true}}, onChange: {action: 'changed', table: {disable: true}}, onInputChange: {action: 'inputChanged', table: {disable: true}}, name: {table: {disable: true}}, }, parameters: { docs: { page: createDocsPage(), source: { type: 'code', }, }, }, }; const defaultArgs = { name: 'autocomplete', label: 'Autocomplete', children: [ { label: 'First', value: 'first', }, { label: 'Second', value: 'second', }, { label: 'Third', value: 'third', }, { label: 'Fourth', value: 'fourth', }, { label: 'Fifth', value: 'fifth', }, ], }; const Template: SQFormAutocompleteStory = (args) => { const {schema, sqFormProps, size, ...rest} = args; return ( <div style={{minWidth: 250}}> <SQFormStoryWrapper initialValues={{[defaultArgs.name]: ''}} validationSchema={schema} {...sqFormProps} > <SQFormAutocomplete {...rest} size={getSizeProp(size)} /> </SQFormStoryWrapper> </div> ); }; 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 const WithAutoSizePopper = Template.bind({}); WithAutoSizePopper.args = { ...defaultArgs, lockWidthToField: false, size: '6', }; export const WithNoOptions = Template.bind({}); WithNoOptions.args = { ...defaultArgs, children: undefined, size: '12', }; export default meta;