import React from 'react'; import {Story, Meta} from '@storybook/react'; import {SQFormReadOnlyField as SQFormReadOnlyFieldComponent} from '../src'; import type {SQFormReadOnlyFieldProps} from 'components/SQForm/SQFormReadOnlyField'; import {SQFormStoryWrapper} from './components/SQFormStoryWrapper'; import {createDocsPage} from './utils/createDocsPage'; import getSizeProp from './utils/getSizeProp'; import type {GridSizeOptions} from './types/storyHelperTypes'; import * as markdown from '../notes/SQFormReadOnlyField.md'; type SQFormReadOnlyFieldStory = Story< Omit<SQFormReadOnlyFieldProps, 'size'> & { size?: GridSizeOptions; initialValue?: string; } > const meta: Meta = { title: 'Components/SQFormReadOnlyField', component: SQFormReadOnlyFieldComponent, argTypes: { name: {table: {disable: true}}, }, parameters: { docs: { page: createDocsPage({markdown}), }, }, }; const defaultArgs = { label: 'ReadOnly Field', name: 'readOnlyField', }; const Template: SQFormReadOnlyFieldStory = ({initialValue = '', ...args}) => { return ( <SQFormStoryWrapper initialValues={{[defaultArgs.name]: initialValue}} showSubmit={false} > <SQFormReadOnlyFieldComponent {...args} size={getSizeProp(args.size)} /> </SQFormStoryWrapper> ); }; export const Default = Template.bind({}); Default.args = defaultArgs; export const WithInitialValue = Template.bind({}); WithInitialValue.args = { ...defaultArgs, initialValue: 'Hello world!', }; WithInitialValue.parameters = { controls: {exclude: 'initialValue'}, }; export default meta;