docs(form): add async pattern validation (#5408)

Author: philibea

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<string | true>(resolve => {
+      setTimeout(() => {
+        resolve(value.includes('@') ? true : `Email must have a @. ${value}`)
+      }, 500)
+    })
+
+    return res
+  },
+}
+
+export const AsyncValidation: StoryFn<
+  ComponentProps<typeof TextInputField>
+> = args => (
+  <Stack gap={1}>
+    <TextInputField {...args} validate={emailValidate} />
+    <SubmitErrorAlert />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+AsyncValidation.args = {
+  ...Template.args,
+  required: true,
+}

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'