diff --git a/packages/form/src/components/TextInputField/__stories__/AsyncValidation.stories.tsx b/packages/form/src/components/TextInputField/__stories__/AsyncValidation.stories.tsx new file mode 100644 index 0000000000..aaabadb046 --- /dev/null +++ b/packages/form/src/components/TextInputField/__stories__/AsyncValidation.stories.tsx @@ -0,0 +1,34 @@ +import type { StoryFn } from '@storybook/react-vite' +import { Stack } from '@ultraviolet/ui' +import type { ComponentProps } from 'react' +import { Submit } from '../../Submit' +import { SubmitErrorAlert } from '../../SubmitErrorAlert' +import { TextInputField } from '..' +import { Template } from './Template.stories' + +const emailValidate = { + pattern: async (value: string) => { + const res = await new Promise(resolve => { + setTimeout(() => { + resolve(value.includes('@') ? true : `Email must have a @. ${value}`) + }, 500) + }) + + return res + }, +} + +export const AsyncValidation: StoryFn< + ComponentProps +> = args => ( + + + + Submit + +) + +AsyncValidation.args = { + ...Template.args, + required: true, +} diff --git a/packages/form/src/components/TextInputField/__stories__/index.stories.tsx b/packages/form/src/components/TextInputField/__stories__/index.stories.tsx index 12ef5a9d26..fba3a229cf 100644 --- a/packages/form/src/components/TextInputField/__stories__/index.stories.tsx +++ b/packages/form/src/components/TextInputField/__stories__/index.stories.tsx @@ -8,7 +8,10 @@ export default { component: TextInputField, decorators: [ ChildStory => { - const methods = useForm() + const methods = useForm({ + mode: 'onChange', + }) + const { errors, isDirty, @@ -69,3 +72,4 @@ export default { export { Playground } from './Playground.stories' export { Required } from './Required.stories' +export { AsyncValidation } from './AsyncValidation.stories'