feat!: add ability to transform errors from validators. To migrate, c…

…all your validators `validator: yupValidator()`, not `validator: yupValidator` (#755) * feat: add errorMap params to the valibot validator * fix: update all valibotValidator calls * refactor: rename errorMap to transformErrors * fix: transformErrors should return a string * feat: add transformErrors to the yup validator * test: add yup validator transformErrors base test * chore: remove unused import from yup validator * feat: add transformErrors params to the zod validator * Apply suggestions from code review Co-authored-by: Leonardo Montini <[email protected]> * chore: missing docs references * chore: fix prettier * chore: fix import * chore: fix valibot typings and such --------- Co-authored-by: Corbin Crutchley <[email protected]> Co-authored-by: Leonardo Montini <[email protected]> Co-authored-by: Corbin Crutchley <[email protected]>
TanStack · Jun 19, 2024 · b67bd8d · b67bd8d
1 parent 601aa22
commit b67bd8d
Show file tree

Hide file tree

Showing 31 changed files with 272 additions and 136 deletions.
diff --git a/docs/framework/angular/guides/basic-concepts.md b/docs/framework/angular/guides/basic-concepts.md
@@ -132,7 +132,7 @@ import { z } from 'zod'
     <ng-container
       [tanstackField]="form"
       name="firstName"
-      [validatorAdapter]="zodValidator"
+      [validatorAdapter]="zodValidator()"
       [validators]="{
         onChange: z.string().min(3, 'First name must be at least 3 characters'),
         onChangeAsyncDebounceMs: 500,

diff --git a/docs/framework/angular/guides/validation.md b/docs/framework/angular/guides/validation.md
@@ -422,7 +422,7 @@ import { z } from 'zod'
 export class AppComponent {
   form = injectForm({
     // Either add the validator here or on `Field`
-    validatorAdapter: zodValidator,
+    validatorAdapter: zodValidator(),
     // ...
   })
 

diff --git a/docs/framework/react/guides/basic-concepts.md b/docs/framework/react/guides/basic-concepts.md
@@ -156,7 +156,7 @@ import { z } from 'zod'
 // ...
 <form.Field
   name="firstName"
-  validatorAdapter={zodValidator}
+  validatorAdapter={zodValidator()}
   validators={{
     onChange: z.string().min(3, 'First name must be at least 3 characters'),
     onChangeAsyncDebounceMs: 500,

diff --git a/docs/framework/react/guides/validation.md b/docs/framework/react/guides/validation.md
@@ -334,13 +334,13 @@ import { z } from 'zod'
 
 const form = useForm({
   // Either add the validator here or on `Field`
-  validatorAdapter: zodValidator,
+  validatorAdapter: zodValidator(),
   // ...
 })
 
 <form.Field
   name="age"
-  validatorAdapter={zodValidator}
+  validatorAdapter={zodValidator()}
   validators={{
     onChange: z.number().gte(13, 'You must be 13 to make an account'),
   }}

diff --git a/examples/angular/valibot/src/app/app.component.ts b/examples/angular/valibot/src/app/app.component.ts
@@ -80,7 +80,7 @@ export class AppComponent {
       console.log(value)
     },
     // Add a validator to support Zod usage in Form and Field
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
   })
 
   canSubmit = injectStore(this.form, (state) => state.canSubmit)

diff --git a/examples/angular/yup/src/app/app.component.ts b/examples/angular/yup/src/app/app.component.ts
@@ -76,7 +76,7 @@ export class AppComponent {
       console.log(value)
     },
     // Add a validator to support Zod usage in Form and Field
-    validatorAdapter: yupValidator,
+    validatorAdapter: yupValidator(),
   })
 
   yup = yup

diff --git a/examples/angular/zod/src/app/app.component.ts b/examples/angular/zod/src/app/app.component.ts
@@ -79,7 +79,7 @@ export class AppComponent {
       console.log(value)
     },
     // Add a validator to support Zod usage in Form and Field
-    validatorAdapter: zodValidator,
+    validatorAdapter: zodValidator(),
   })
 
   z = z

diff --git a/examples/react/valibot/src/index.tsx b/examples/react/valibot/src/index.tsx
@@ -27,7 +27,7 @@ export default function App() {
       console.log(value)
     },
     // Add a validator to support Valibot usage in Form and Field
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
   })
 
   return (

diff --git a/examples/react/yup/src/index.tsx b/examples/react/yup/src/index.tsx
@@ -27,7 +27,7 @@ export default function App() {
       console.log(value)
     },
     // Add a validator to support Yup usage in Form and Field
-    validatorAdapter: yupValidator,
+    validatorAdapter: yupValidator(),
   })
 
   return (

diff --git a/examples/react/zod/src/index.tsx b/examples/react/zod/src/index.tsx
@@ -27,7 +27,7 @@ export default function App() {
       console.log(value)
     },
     // Add a validator to support Zod usage in Form and Field
-    validatorAdapter: zodValidator,
+    validatorAdapter: zodValidator(),
   })
 
   return (

diff --git a/examples/solid/valibot/src/index.tsx b/examples/solid/valibot/src/index.tsx
@@ -32,7 +32,7 @@ function App() {
       console.log(value)
     },
     // Add a validator to support Valibot usage in Form and Field
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
   }))
 
   return (

diff --git a/examples/solid/yup/src/index.tsx b/examples/solid/yup/src/index.tsx
@@ -32,7 +32,7 @@ function App() {
       console.log(value)
     },
     // Add a validator to support Yup usage in Form and Field
-    validatorAdapter: yupValidator,
+    validatorAdapter: yupValidator(),
   }))
 
   return (

diff --git a/examples/solid/zod/src/index.tsx b/examples/solid/zod/src/index.tsx
@@ -32,7 +32,7 @@ function App() {
       console.log(value)
     },
     // Add a validator to support Zod usage in Form and Field
-    validatorAdapter: zodValidator,
+    validatorAdapter: zodValidator(),
   }))
 
   return (

diff --git a/examples/vue/valibot/src/App.vue b/examples/vue/valibot/src/App.vue
@@ -14,7 +14,7 @@ const form = useForm({
     alert(JSON.stringify(value))
   },
   // Add a validator to support Valibot usage in Form and Field
-  validatorAdapter: valibotValidator,
+  validatorAdapter: valibotValidator(),
 })
 
 const onChangeFirstName = v.pipeAsync(

diff --git a/examples/vue/yup/src/App.vue b/examples/vue/yup/src/App.vue
@@ -14,7 +14,7 @@ const form = useForm({
     alert(JSON.stringify(value))
   },
   // Add a validator to support Yup usage in Form and Field
-  validatorAdapter: yupValidator,
+  validatorAdapter: yupValidator(),
 })
 
 const onChangeFirstName = yup

diff --git a/examples/vue/zod/src/App.vue b/examples/vue/zod/src/App.vue
@@ -14,7 +14,7 @@ const form = useForm({
     alert(JSON.stringify(value))
   },
   // Add a validator to support Zod usage in Form and Field
-  validatorAdapter: zodValidator,
+  validatorAdapter: zodValidator(),
 })
 
 const onChangeFirstName = z.string().refine(

diff --git a/packages/valibot-form-adapter/src/tests/FieldApi.spec.ts b/packages/valibot-form-adapter/src/tests/FieldApi.spec.ts
@@ -14,7 +14,7 @@ describe('valibot field api', () => {
 
     const field = new FieldApi({
       form,
-      validatorAdapter: valibotValidator,
+      validatorAdapter: valibotValidator(),
       name: 'name',
       validators: {
         onChange: v.pipe(
@@ -44,7 +44,7 @@ describe('valibot field api', () => {
 
     const field = new FieldApi({
       form,
-      validatorAdapter: valibotValidator,
+      validatorAdapter: valibotValidator(),
       name: 'name',
       validators: {
         onChange: ({ value }) => (value === 'a' ? 'Test' : undefined),
@@ -69,7 +69,7 @@ describe('valibot field api', () => {
 
     const field = new FieldApi({
       form,
-      validatorAdapter: valibotValidator,
+      validatorAdapter: valibotValidator(),
       name: 'name',
       validators: {
         onChangeAsync: v.pipeAsync(
@@ -100,7 +100,7 @@ describe('valibot field api', () => {
 
     const field = new FieldApi({
       form,
-      validatorAdapter: valibotValidator,
+      validatorAdapter: valibotValidator(),
       name: 'name',
       validators: {
         onChangeAsync: async ({ value }) =>
@@ -119,4 +119,37 @@ describe('valibot field api', () => {
     await sleep(10)
     expect(field.getMeta().errors).toEqual([])
   })
+
+  it('should transform errors to display only the first error message', () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: '',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      validatorAdapter: valibotValidator({
+        transformErrors: (errors) => errors[0]?.message,
+      }),
+      name: 'name',
+      validators: {
+        onChange: v.pipe(
+          v.string(),
+          v.minLength(3, 'You must have a length of at least 3'),
+          v.uuid('UUID'),
+        ),
+      },
+    })
+
+    field.mount()
+
+    expect(field.getMeta().errors).toEqual([])
+    field.setValue('aa', { touch: true })
+    expect(field.getMeta().errors).toEqual([
+      'You must have a length of at least 3',
+    ])
+    field.setValue('aaa', { touch: true })
+    expect(field.getMeta().errors).toEqual(['UUID'])
+  })
 })
diff --git a/packages/valibot-form-adapter/src/tests/FieldApi.test-d.ts b/packages/valibot-form-adapter/src/tests/FieldApi.test-d.ts
@@ -13,7 +13,7 @@ it('should allow a Valibot validator to be passed in', () => {
   const field = new FieldApi({
     form,
     name: 'name',
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
   } as const)
 })
 
@@ -27,7 +27,7 @@ it('should allow a Valibot validator to handle the correct Valibot type', () =>
   const field = new FieldApi({
     form,
     name: 'name',
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
     validators: {
       onChange: v.string(),
     },
@@ -44,7 +44,7 @@ it('should allow a Valibot validator to handle the correct Valibot type for an a
   const field = new FieldApi({
     form,
     name: 'name',
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
     validators: {
       onChangeAsync: v.string(),
     },
@@ -61,7 +61,7 @@ it('should allow a functional onChange to be passed when using a validator', ()
   const field = new FieldApi({
     form,
     name: 'name',
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
     validators: {
       onChange: ({ value }) => {
         assertType<'test'>(value)
@@ -97,7 +97,7 @@ it.skip('should allow not a Valibot validator with the wrong Valibot type', () =
   const field = new FieldApi({
     form,
     name: 'name',
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
     validators: {
       onChange: v.object({}),
     },

diff --git a/packages/valibot-form-adapter/src/tests/FormApi.spec.ts b/packages/valibot-form-adapter/src/tests/FormApi.spec.ts
@@ -9,7 +9,7 @@ describe('valibot form api', () => {
       defaultValues: {
         name: '',
       },
-      validatorAdapter: valibotValidator,
+      validatorAdapter: valibotValidator(),
     })
 
     const field = new FieldApi({
@@ -39,7 +39,7 @@ describe('valibot form api', () => {
       defaultValues: {
         name: '',
       },
-      validatorAdapter: valibotValidator,
+      validatorAdapter: valibotValidator(),
     })
 
     const field = new FieldApi({

diff --git a/packages/valibot-form-adapter/src/tests/FormApi.test-d.ts b/packages/valibot-form-adapter/src/tests/FormApi.test-d.ts
@@ -8,7 +8,7 @@ it('should allow a Valibot validator to be passed in', () => {
     defaultValues: {
       name: 'test',
     },
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
   } as const)
 })
 
@@ -17,7 +17,7 @@ it('should allow a Valibot validator to handle the correct Valibot type', () =>
     defaultValues: {
       name: 'test',
     },
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
   } as const)
 
   const field = new FieldApi({
@@ -34,7 +34,7 @@ it('should allow a Valibot validator to handle the correct Valibot type on async
     defaultValues: {
       name: 'test',
     },
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
   } as const)
 
   const field = new FieldApi({
@@ -51,7 +51,7 @@ it('should allow a functional onChange to be passed when using a validator', ()
     defaultValues: {
       name: 'test',
     },
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
   } as const)
 
   const field = new FieldApi({
@@ -92,7 +92,7 @@ it.skip('should allow not a Valibot validator with the wrong Valibot type', () =
   const field = new FieldApi({
     form,
     name: 'name',
-    validatorAdapter: valibotValidator,
+    validatorAdapter: valibotValidator(),
     validators: {
       onChange: v.object({}),
     },

diff --git a/packages/valibot-form-adapter/src/validator.ts b/packages/valibot-form-adapter/src/validator.ts
@@ -1,23 +1,34 @@
 import { safeParse, safeParseAsync } from 'valibot'
 import type { BaseIssue, BaseSchema, BaseSchemaAsync } from 'valibot'
-import type { Validator } from '@tanstack/form-core'
+import type { ValidationError, Validator } from '@tanstack/form-core'
 
-export const valibotValidator = (() => {
-  return {
-    validate({ value }, fn) {
-      if (fn.async) return
-      const result = safeParse(fn, value)
-      if (result.success) return
-      return result.issues.map((i) => i.message).join(', ')
-    },
-    async validateAsync({ value }, fn) {
-      const result = await safeParseAsync(fn, value)
-      if (result.success) return
-      return result.issues.map((i) => i.message).join(', ')
-    },
-  }
-}) as Validator<
-  unknown,
-  | BaseSchema<unknown, unknown, BaseIssue<unknown>>
-  | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
->
+type Params = {
+  transformErrors?: (errors: BaseIssue<unknown>[]) => ValidationError
+}
+
+export const valibotValidator = (params: Params = {}) =>
+  (() => {
+    return {
+      validate({ value }, fn) {
+        if (fn.async) return
+        const result = safeParse(fn, value)
+        if (result.success) return
+        if (params.transformErrors) {
+          return params.transformErrors(result.issues)
+        }
+        return result.issues.map((i) => i.message).join(', ')
+      },
+      async validateAsync({ value }, fn) {
+        const result = await safeParseAsync(fn, value)
+        if (result.success) return
+        if (params.transformErrors) {
+          return params.transformErrors(result.issues)
+        }
+        return result.issues.map((i) => i.message).join(', ')
+      },
+    }
+  }) as Validator<
+    unknown,
+    | BaseSchema<unknown, unknown, BaseIssue<unknown>>
+    | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
+  >