feat: switch from valibot to zod

Author: jeffredodd

package-lock.json

@@ -114,7 +114,7 @@
     "react-i18next": "^15.5.1",
     "react-robot": "^1.2.0",
     "robot3": "^1.1.1",
-    "valibot": "^0.42.1"
+    "zod": "^3.25.17"
   },
   "sideEffects": [
     "**/*.scss",

package.json

@@ -1,20 +1,20 @@
-import * as v from 'valibot'
+import { z } from 'zod'
 import { FormProvider, useForm, type UseFormProps } from 'react-hook-form'
-import { valibotResolver } from '@hookform/resolvers/valibot'
+import { zodResolver } from '@hookform/resolvers/zod'
 import styles from './SignatureForm.module.scss'
 import { Form } from '@/components/Common/Form'
 import { Flex } from '@/components/Common'
 
-export const SignatureFormSchema = v.object({
-  signature: v.pipe(v.string(), v.nonEmpty()),
-  confirmSignature: v.literal(true),
+export const SignatureFormSchema = z.object({
+  signature: z.string().min(1),
+  confirmSignature: z.literal(true),
 })
 
 const signatureFormDefaultValues = {
   signature: '',
 }
 
-export type SignatureFormInputs = v.InferInput<typeof SignatureFormSchema>
+export type SignatureFormInputs = z.infer<typeof SignatureFormSchema>
 
 interface SignatureFormProps {
   onSubmit: (data: SignatureFormInputs) => void | Promise<void>
@@ -24,7 +24,7 @@ interface SignatureFormProps {
 
 export function SignatureForm({ onSubmit, children, formProps }: SignatureFormProps) {
   const methods = useForm<SignatureFormInputs>({
-    resolver: valibotResolver(SignatureFormSchema),
+    resolver: zodResolver(SignatureFormSchema),
     defaultValues: signatureFormDefaultValues,
     ...formProps,
   })

src/components/Common/SignatureForm/SignatureForm.tsx

@@ -1,6 +1,6 @@
-import * as v from 'valibot'
+import { z } from 'zod'
 import { FormProvider, useForm } from 'react-hook-form'
-import { valibotResolver } from '@hookform/resolvers/valibot'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { SignatoryForm } from './SignatoryForm'
 import { Head } from './Head'
 import { AssignSignatorySelection } from './AssignSignatorySelection'
@@ -30,14 +30,14 @@ export function AssignSignatory(props: AssignSignatoryProps & BaseComponentInter
   )
 }
 
-const AssignSignatorySelectionSchema = v.object({
-  signatoryAssignmentMode: v.union([
-    v.literal(SignatoryAssignmentMode.createSignatory),
-    v.literal(SignatoryAssignmentMode.inviteSignatory),
+const AssignSignatorySelectionSchema = z.object({
+  signatoryAssignmentMode: z.union([
+    z.literal(SignatoryAssignmentMode.createSignatory),
+    z.literal(SignatoryAssignmentMode.inviteSignatory),
   ]),
 })
 
-type AssignSignatorySelectionInputs = v.InferInput<typeof AssignSignatorySelectionSchema>
+type AssignSignatorySelectionInputs = z.infer<typeof AssignSignatorySelectionSchema>
 
 function Root({
   companyId,
@@ -50,7 +50,7 @@ function Root({
   const { onEvent } = useBase()
 
   const formMethods = useForm<AssignSignatorySelectionInputs>({
-    resolver: valibotResolver(AssignSignatorySelectionSchema),
+    resolver: zodResolver(AssignSignatorySelectionSchema),
     defaultValues: {
       signatoryAssignmentMode: SignatoryAssignmentMode.createSignatory,
     },

src/components/Company/AssignSignatory/AssignSignatory.tsx

@@ -1,5 +1,5 @@
 import { FormProvider, useForm } from 'react-hook-form'
-import { valibotResolver } from '@hookform/resolvers/valibot'
+import { zodResolver } from '@hookform/resolvers/zod'
 import classNames from 'classnames'
 import { useSignatoriesListSuspense } from '@gusto/embedded-api/react-query/signatoriesList'
 import { useSignatoriesCreateMutation } from '@gusto/embedded-api/react-query/signatoriesCreate'
@@ -81,7 +81,7 @@ function Root({
   }
 
   const formMethods = useForm<CreateSignatoryInputs>({
-    resolver: valibotResolver(generateCreateSignatorySchema(currentSignatory?.hasSsn)),
+    resolver: zodResolver(generateCreateSignatorySchema(currentSignatory?.hasSsn)),
     defaultValues: createSignatoryDefaultValues,
   })
 

src/components/Company/AssignSignatory/CreateSignatory/CreateSignatory.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import type { InferInput } from 'valibot'
+import type { z } from 'zod'
 import { useCreateSignatory } from './useCreateSignatory'
 import type { generateCreateSignatorySchema } from './Schema'
 import { TextInputField, Grid, Flex, SelectField, DatePickerField } from '@/components/Common'
@@ -9,7 +9,7 @@ import { TitleSelect } from '@/components/Company/AssignSignatory/TitleSelect'
 import { commonMasks, useMaskedTransform } from '@/helpers/mask'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
 
-export type CreateSignatoryInputs = InferInput<ReturnType<typeof generateCreateSignatorySchema>>
+export type CreateSignatoryInputs = z.infer<ReturnType<typeof generateCreateSignatorySchema>>
 
 export const CreateSignatoryForm = () => {
   const Components = useComponentContext()

src/components/Company/AssignSignatory/CreateSignatory/CreateSignatoryForm.tsx

@@ -1,36 +1,33 @@
-import * as v from 'valibot'
+import { z } from 'zod'
 import { nameValidation, zipValidation, SSN_REGEX, phoneValidation } from '@/helpers/validations'
 import { removeNonDigits } from '@/helpers/formattedStrings'
 
 const createSSNValidation = (hasSsn?: boolean) =>
-  v.pipe(
-    v.string(),
-    v.custom(value => {
-      // If they have an SSN on file and haven't modified the field (it's empty), it's valid
-      if (hasSsn && !value) {
-        return true
-      }
+  z.string().refine(value => {
+    // If they have an SSN on file and haven't modified the field (it's empty), it's valid
+    if (hasSsn && !value) {
+      return true
+    }
 
-      if (typeof value !== 'string') {
-        return false
-      }
+    if (typeof value !== 'string') {
+      return false
+    }
 
-      return SSN_REGEX.test(removeNonDigits(value))
-    }),
-  )
+    return SSN_REGEX.test(removeNonDigits(value))
+  })
 
 export const generateCreateSignatorySchema = (hasSsn?: boolean) =>
-  v.object({
+  z.object({
     firstName: nameValidation,
     lastName: nameValidation,
-    email: v.pipe(v.string(), v.nonEmpty(), v.email()),
-    title: v.pipe(v.string(), v.nonEmpty()),
+    email: z.string().min(1).email(),
+    title: z.string().min(1),
     phone: phoneValidation,
     ssn: createSSNValidation(hasSsn),
-    birthday: v.instance(Date),
-    street1: v.pipe(v.string(), v.nonEmpty()),
-    street2: v.optional(v.string()),
-    city: v.pipe(v.string(), v.nonEmpty()),
-    state: v.pipe(v.string(), v.nonEmpty()),
+    birthday: z.date(),
+    street1: z.string().min(1),
+    street2: z.string().optional(),
+    city: z.string().min(1),
+    state: z.string().min(1),
     zip: zipValidation,
   })

src/components/Company/AssignSignatory/CreateSignatory/Schema.ts

@@ -1,5 +1,5 @@
 import { FormProvider, useForm } from 'react-hook-form'
-import { valibotResolver } from '@hookform/resolvers/valibot'
+import { zodResolver } from '@hookform/resolvers/zod'
 import classNames from 'classnames'
 import { useSignatoriesListSuspense } from '@gusto/embedded-api/react-query/signatoriesList'
 import { useSignatoriesInviteMutation } from '@gusto/embedded-api/react-query/signatoriesInvite'
@@ -57,7 +57,7 @@ function Root({ companyId, defaultValues, className, children }: InviteSignatory
   }
 
   const formMethods = useForm<InviteSignatoryInputs>({
-    resolver: valibotResolver(InviteSignatorySchema),
+    resolver: zodResolver(InviteSignatorySchema),
     defaultValues: inviteSignatoryDefaultValues,
   })
 

src/components/Company/AssignSignatory/InviteSignatory/InviteSignatory.tsx

@@ -1,4 +1,4 @@
-import * as v from 'valibot'
+import { z } from 'zod'
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { TextInputField, Grid, Flex } from '@/components/Common'
@@ -8,21 +8,20 @@ import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentCon
 
 const emailMismatchError = 'email_mismatch'
 
-export const InviteSignatorySchema = v.pipe(
-  v.object({
+export const InviteSignatorySchema = z
+  .object({
     firstName: nameValidation,
     lastName: nameValidation,
-    email: v.pipe(v.string(), v.nonEmpty(), v.email()),
-    confirmEmail: v.pipe(v.string(), v.nonEmpty(), v.email()),
-    title: v.pipe(v.string(), v.nonEmpty()),
-  }),
-  v.forward(
-    v.check(({ email, confirmEmail }) => email === confirmEmail, emailMismatchError),
-    ['confirmEmail'],
-  ),
-)
+    email: z.string().min(1).email(),
+    confirmEmail: z.string().min(1).email(),
+    title: z.string().min(1),
+  })
+  .refine(data => data.email === data.confirmEmail, {
+    message: emailMismatchError,
+    path: ['confirmEmail'],
+  })
 
-export type InviteSignatoryInputs = v.InferInput<typeof InviteSignatorySchema>
+export type InviteSignatoryInputs = z.infer<typeof InviteSignatorySchema>
 
 export const InviteSignatoryForm = () => {
   const { t } = useTranslation('Company.AssignSignatory')

src/components/Company/AssignSignatory/InviteSignatory/InviteSignatoryForm.tsx

@@ -1,6 +1,6 @@
 import { useBankAccountsCreateMutation } from '@gusto/embedded-api/react-query/bankAccountsCreate'
 import { FormProvider, useForm } from 'react-hook-form'
-import { valibotResolver } from '@hookform/resolvers/valibot'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { Head } from './Head'
 import type { BankAccountFormInputs } from './Form'
 import { BankAccountFormSchema, Form } from './Form'
@@ -33,7 +33,7 @@ function Root({ companyId, className, children }: BankAccountFormProps) {
     useBankAccountsCreateMutation()
 
   const { control, ...methods } = useForm<BankAccountFormInputs>({
-    resolver: valibotResolver(BankAccountFormSchema),
+    resolver: zodResolver(BankAccountFormSchema),
     defaultValues: { accountNumber: '', routingNumber: '' },
   })
 

src/components/Company/BankAccount/BankAccountForm/BankAccountForm.tsx

@@ -1,15 +1,14 @@
-import type { InferInput } from 'valibot'
-import { object } from 'valibot'
+import { z } from 'zod'
 import { useTranslation } from 'react-i18next'
 import { accountNumberValidation, routingNumberValidation } from '@/helpers/validations'
 import { Flex, TextInputField } from '@/components/Common'
 
-export const BankAccountFormSchema = object({
+export const BankAccountFormSchema = z.object({
   routingNumber: routingNumberValidation,
   accountNumber: accountNumberValidation,
 })
 
-export type BankAccountFormInputs = InferInput<typeof BankAccountFormSchema>
+export type BankAccountFormInputs = z.infer<typeof BankAccountFormSchema>
 
 export function Form() {
   const { t } = useTranslation('Company.BankAccount')

src/components/Company/BankAccount/BankAccountForm/Form.tsx

@@ -1,5 +1,5 @@
 import { FormProvider, useForm } from 'react-hook-form'
-import { valibotResolver } from '@hookform/resolvers/valibot'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { useBankAccountsVerifyMutation } from '@gusto/embedded-api/react-query/bankAccountsVerify'
 import { Head } from './Head'
 import { BankAccountVerifyProvider } from './context'
@@ -32,7 +32,7 @@ function Root({ companyId, bankAccountId, className, children }: BankAccountVeri
   const { mutateAsync: verifyBankAccount, isPending } = useBankAccountsVerifyMutation()
 
   const { control, ...methods } = useForm<BankAccountVerifyInputs>({
-    resolver: valibotResolver(BankAccountVerifySchema),
+    resolver: zodResolver(BankAccountVerifySchema),
     defaultValues: { deposit1: 0, deposit2: 0 },
   })
 

src/components/Company/BankAccount/BankAccountVerify/BankAccountVerify.tsx

@@ -1,14 +1,13 @@
-import type { InferInput } from 'valibot'
-import { minValue, number, object, pipe } from 'valibot'
+import { z } from 'zod'
 import { useTranslation } from 'react-i18next'
 import { Flex, NumberInputField } from '@/components/Common'
 
-export const BankAccountVerifySchema = object({
-  deposit1: pipe(number(), minValue(0)),
-  deposit2: pipe(number(), minValue(0)),
+export const BankAccountVerifySchema = z.object({
+  deposit1: z.number().min(0),
+  deposit2: z.number().min(0),
 })
 
-export type BankAccountVerifyInputs = InferInput<typeof BankAccountVerifySchema>
+export type BankAccountVerifyInputs = z.infer<typeof BankAccountVerifySchema>
 
 export function Form() {
   const { t } = useTranslation('Company.BankAccount')

src/components/Company/BankAccount/BankAccountVerify/Form.tsx

@@ -6,7 +6,7 @@ import type {
   TaxPayerType,
 } from '@gusto/embedded-api/models/operations/putv1companiescompanyidfederaltaxdetails'
 import { FormProvider, useForm } from 'react-hook-form'
-import { valibotResolver } from '@hookform/resolvers/valibot'
+import { zodResolver } from '@hookform/resolvers/zod'
 import {
   FederalTaxesProvider,
   type FederalTaxFormInputs,
@@ -49,7 +49,7 @@ function Root({ companyId, children, className, defaultValues }: FederalTaxesPro
   const { mutateAsync: updateFederalTaxDetails, isPending } = useFederalTaxDetailsUpdateMutation()
 
   const formMethods = useForm<FederalTaxFormInputs>({
-    resolver: valibotResolver(FederalTaxFormSchema),
+    resolver: zodResolver(FederalTaxFormSchema),
     defaultValues: {
       federalEin: federalTaxDetails.hasEin ? undefined : '',
       taxPayerType: federalTaxDetails.taxPayerType
@@ -69,8 +69,8 @@ function Root({ companyId, children, className, defaultValues }: FederalTaxesPro
           companyId: companyId,
           requestBody: {
             ein: payload.federalEin,
-            taxPayerType: payload.taxPayerType,
-            filingForm: payload.filingForm,
+            taxPayerType: payload.taxPayerType as TaxPayerType | undefined,
+            filingForm: payload.filingForm as FilingForm | undefined,
             legalName: payload.legalName,
             version: federalTaxDetails.version as string,
           },