use zod v4 + fix all the type errors (slay)

Lordfirespeed · Lordfirespeed · commit b059785d7311 · 2025-07-14T14:28:05.000+01:00
diff --git a/client/package.json b/client/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@durhack/durhack-common": "workspace:*",
-    "@durhack/web-components": "1.0.1-beta.1",
+    "@durhack/web-components": "1.0.1-beta.4",
     "@hookform/resolvers": "^5.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-icons": "^1.3.2",
diff --git a/client/src/app/(home)/register-interest-form.tsx b/client/src/app/(home)/register-interest-form.tsx
@@ -7,14 +7,14 @@ import { Input } from "@durhack/web-components/ui/input"
 import { zodResolver } from "@hookform/resolvers/zod"
 import type * as React from "react"
 import { useForm } from "react-hook-form"
-import { z } from "zod"
+import { z } from "zod/v4"
 
 import { siteConfig } from "@/config/site"
 
 const registerInterestFormSchema = z.object({
   firstNames: z.string().trim().min(1),
   lastNames: z.string().trim().min(1),
-  email: z.string().email(),
+  email: z.email(),
 })
 
 export function RegisterInterestForm(props: React.HTMLAttributes<HTMLFormElement>) {
diff --git a/client/src/app/dashboard/(application)/contact/page.tsx b/client/src/app/dashboard/(application)/contact/page.tsx
@@ -6,23 +6,25 @@ import { PhoneInput } from "@durhack/web-components/ui/phone-number-input"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
 import { useForm } from "react-hook-form"
-import { z } from "zod"
+import { z } from "zod/v4"
 
-import "@/lib/zod-phone-extension"
+import "@/lib/zod-phone-validator"
 import { FormSkeleton } from "@/components/dashboard/form-skeleton"
 import { FormSubmitButton } from "@/components/dashboard/form-submit-button"
 import type { Application } from "@/hooks/use-application"
 import { useApplicationContext } from "@/hooks/use-application-context"
 import { isLoaded } from "@/lib/is-loaded"
 import { updateApplication } from "@/lib/update-application"
+import {zodPhoneNumberValidator} from "@/lib/zod-phone-validator";
 
 type ContactFormFields = {
   phone: string
   email: string
 }
 
 const contactFormSchema = z.object({
-  phone: z.string().phone(),
+  phone: zodPhoneNumberValidator(),
+  email: z.email(),
 })
 
 /**
diff --git a/client/src/app/dashboard/(application)/cv/page.tsx b/client/src/app/dashboard/(application)/cv/page.tsx
@@ -23,13 +23,13 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  SelectValueClipper,
+  SelectValueViewport,
 } from "@durhack/web-components/ui/select"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
 import * as React from "react"
 import { useForm } from "react-hook-form"
-import { z } from "zod"
+import { z } from "zod/v4"
 
 import { FormSkeleton } from "@/components/dashboard/form-skeleton"
 import { FormSubmitButton } from "@/components/dashboard/form-submit-button"
@@ -41,7 +41,7 @@ import { cn } from "@/lib/utils"
 
 type CvFormFields = {
   cvUploadChoice: "indeterminate" | "upload" | "remind" | "no-upload"
-  cvFiles: File[]
+  cvFiles?: File[] | undefined
 }
 
 const cvFormSchema = z.discriminatedUnion(
@@ -78,7 +78,7 @@ const cvFormSchema = z.discriminatedUnion(
         .length(1, "Please provide exactly one CV file!"),
     }),
   ],
-  { errorMap: () => ({ message: "Please select an option." }) },
+  { error: () => ({ message: "Please select an option." }) },
 )
 
 /**
@@ -91,7 +91,7 @@ function CvForm({ application }: { application: Application }) {
   const [showForm, setShowForm] = React.useState<boolean>(() => application?.cvUploadChoice === "upload")
 
   const form = useForm<CvFormFields, unknown, z.infer<typeof cvFormSchema>>({
-    resolver: zodResolver(cvFormSchema),
+    resolver: zodResolver<CvFormFields, unknown, z.infer<typeof cvFormSchema>>(cvFormSchema),
     defaultValues: {
       cvUploadChoice: application.cvUploadChoice ?? "indeterminate",
       cvFiles: [],
@@ -150,9 +150,9 @@ function CvForm({ application }: { application: Application }) {
                 >
                   <FormControl>
                     <SelectTrigger ref={ref}>
-                      <SelectValueClipper>
+                      <SelectValueViewport>
                         <SelectValue />
-                      </SelectValueClipper>
+                      </SelectValueViewport>
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
diff --git a/client/src/app/dashboard/(application)/education/page.tsx b/client/src/app/dashboard/(application)/education/page.tsx
@@ -29,7 +29,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
 import { useForm } from "react-hook-form"
 import useSWRImmutable from "swr/immutable"
-import { z } from "zod"
+import { z } from "zod/v4"
 
 import { FormSkeleton } from "@/components/dashboard/form-skeleton"
 import { FormSubmitButton } from "@/components/dashboard/form-submit-button"
@@ -38,11 +38,12 @@ import type { Application } from "@/hooks/use-application"
 import { useApplicationContext } from "@/hooks/use-application-context"
 import { isLoaded } from "@/lib/is-loaded"
 import { updateApplication } from "@/lib/update-application"
-import "@/lib/zod-iso3-extension"
+import { zodIso3 } from "@/lib/zod-iso3-validator"
+import {isString} from "@/lib/type-guards";
 
 type EducationFormFields = {
   university: string
-  graduationYear: string
+  graduationYear: unknown
   levelOfStudy: string
   disciplinesOfStudy: DisciplineOfStudy[]
   countryOfResidence: string
@@ -61,15 +62,18 @@ export type CountryOption = {
 
 const educationFormSchema = z.object({
   university: z.string().trim().min(1, { message: "Please select your institution." }),
-  graduationYear: z.coerce
-    .number({ invalid_type_error: "Please provide a valid year." })
+  graduationYear: z.coerce.number({
+      error: (issue) => issue.input === undefined
+        ? "This field is required"
+        : "Please provide a valid year."
+    })
     .positive("Please provide a valid year.")
     .int("Oh, come on. Really?")
-    .min(1900, { message: "Be serious. You didn't graduate before 1900." })
-    .max(2100, { message: "What on earth are you studying?!?" }),
+    .min(1900, { error: "Be serious. You didn't graduate before 1900." })
+    .max(2100, { error: "What on earth are you studying?!?" }),
   disciplinesOfStudy: z
     .array(disciplineOfStudySchema)
-    .min(1, { message: "Please select your discipline(s) of study." }),
+    .min(1, { error: "Please select your discipline(s) of study." }),
   levelOfStudy: z.enum(
     [
       "secondary",
@@ -83,9 +87,9 @@ const educationFormSchema = z.object({
       "not-a-student",
       "prefer-not-to-answer",
     ],
-    { message: "Please select your level of study." },
+    { error: "Please select your level of study." },
   ),
-  countryOfResidence: z.string().iso3(),
+  countryOfResidence: zodIso3(),
 })
 
 async function optionsFetcher<OptionType>(path: string): Promise<OptionType[]> {
@@ -112,7 +116,7 @@ function EducationForm({ schoolOptions, countryOptions, application }: Education
   const { mutateApplication } = useApplicationContext()
 
   const form = useForm<EducationFormFields, unknown, z.infer<typeof educationFormSchema>>({
-    resolver: zodResolver(educationFormSchema),
+    resolver: zodResolver<EducationFormFields, unknown, z.infer<typeof educationFormSchema>>(educationFormSchema),
     defaultValues: {
       university: application.university ?? "",
       graduationYear: application.graduationYear?.toString() ?? "",
@@ -160,11 +164,17 @@ function EducationForm({ schoolOptions, countryOptions, application }: Education
           <FormField
             control={form.control}
             name="graduationYear"
-            render={({ field }) => (
+            render={({ field: { value, ...field } }) => (
               <FormItem>
                 <FormLabel>Graduation Year</FormLabel>
                 <FormControl>
-                  <Input type="number" inputMode="numeric" placeholder="Enter graduation year..." {...field} />
+                  <Input
+                    type="number"
+                    inputMode="numeric"
+                    placeholder="Enter graduation year..."
+                    value={isString(value) ? value : ""}
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
diff --git a/client/src/app/dashboard/(application)/extra/page.tsx b/client/src/app/dashboard/(application)/extra/page.tsx
@@ -22,7 +22,7 @@ import { Textarea } from "@durhack/web-components/ui/textarea"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
 import { useForm } from "react-hook-form"
-import { z } from "zod"
+import { z } from "zod/v4"
 
 import { FormSkeleton } from "@/components/dashboard/form-skeleton"
 import { FormSubmitButton } from "@/components/dashboard/form-submit-button"
@@ -67,7 +67,7 @@ function ExtraDetailsForm({ application }: { application: Application }) {
   const { mutateApplication } = useApplicationContext()
 
   const form = useForm<ExtraDetailsFormFields, unknown, z.infer<typeof extraDetailsFormSchema>>({
-    resolver: zodResolver(extraDetailsFormSchema),
+    resolver: zodResolver<ExtraDetailsFormFields, unknown, z.infer<typeof extraDetailsFormSchema>>(extraDetailsFormSchema),
     defaultValues: {
       tShirtSize: application.tShirtSize ?? "",
       hackathonExperience: application.hackathonExperience ?? "",
diff --git a/client/src/app/dashboard/(application)/personal/page.tsx b/client/src/app/dashboard/(application)/personal/page.tsx
@@ -13,21 +13,22 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
 import { useForm } from "react-hook-form"
-import { z } from "zod"
+import { z } from "zod/v4"
 
 import { FormSkeleton } from "@/components/dashboard/form-skeleton"
 import { FormSubmitButton } from "@/components/dashboard/form-submit-button"
 import type { Application } from "@/hooks/use-application"
 import { useApplicationContext } from "@/hooks/use-application-context"
 import { isLoaded } from "@/lib/is-loaded"
 import { updateApplication } from "@/lib/update-application"
+import { isString } from "@/lib/type-guards"
 
 type PersonalFormFields = {
   firstNames: string
   lastNames: string
   preferredNames: string
   pronouns: string
-  age: string
+  age: unknown
   gender: string
   ethnicity: string
 }
@@ -38,7 +39,7 @@ const personalFormSchema = z.object({
   preferredNames: z.string().trim().max(256),
   pronouns: z.enum(["prefer-not-to-answer", "he/him", "she/her", "they/them", "xe/xem", "other"]),
   age: z.coerce
-    .number({ invalid_type_error: "Please provide a valid age." })
+    .number("Please provide a valid age.")
     .positive("Please provide a valid age.")
     .min(16, { message: "Age must be >= 16" })
     .max(256, { message: "Ain't no way you're that old." })
@@ -60,7 +61,7 @@ function PersonalForm({ application }: { application: Application }) {
   const { mutateApplication } = useApplicationContext()
 
   const form = useForm<PersonalFormFields, unknown, z.infer<typeof personalFormSchema>>({
-    resolver: zodResolver(personalFormSchema),
+    resolver: zodResolver<PersonalFormFields, unknown, z.infer<typeof personalFormSchema>>(personalFormSchema),
     defaultValues: {
       pronouns: application.pronouns ?? "prefer-not-to-answer",
       firstNames: application.firstNames ?? "",
@@ -166,11 +167,11 @@ function PersonalForm({ application }: { application: Application }) {
           <FormField
             control={form.control}
             name="age"
-            render={({ field }) => (
+            render={({ field: { value, ...field } }) => (
               <FormItem>
                 <FormLabel>Age as of 1st November 2025</FormLabel>
                 <FormControl>
-                  <Input placeholder="Enter age..." {...field} />
+                  <Input placeholder="Enter age..." value={isString(value) ? value : ""} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
diff --git a/client/src/app/dashboard/(application)/submit/page.tsx b/client/src/app/dashboard/(application)/submit/page.tsx
@@ -15,7 +15,7 @@ import Link from "next/link"
 import { useRouter } from "next/navigation"
 import type * as React from "react"
 import { useForm, useFormContext } from "react-hook-form"
-import { z } from "zod"
+import { z } from "zod/v4"
 
 import { useBackgroundContext } from "@/app/dashboard/background-context"
 import { FormSkeleton } from "@/components/dashboard/form-skeleton"
@@ -37,11 +37,11 @@ type SubmitFormFields = {
 }
 
 const submitFormSchema = z.object({
-  mlhCodeOfConduct: z.literal(true, { errorMap: () => ({ message: "Required" }) }),
-  mlhTerms: z.literal(true, { errorMap: () => ({ message: "Required" }) }),
+  mlhCodeOfConduct: z.literal(true, { error: () => ({ message: "Required" }) }),
+  mlhTerms: z.literal(true, { error: () => ({ message: "Required" }) }),
   mlhMarketing: z.boolean(),
-  dsuPrivacy: z.literal(true, { errorMap: () => ({ message: "Required" }) }),
-  hukPrivacy: z.literal(true, { errorMap: () => ({ message: "Required" }) }),
+  dsuPrivacy: z.literal(true, { error: () => ({ message: "Required" }) }),
+  hukPrivacy: z.literal(true, { error: () => ({ message: "Required" }) }),
   hukMarketing: z.boolean(),
   media: z.boolean({ message: "Please specify" }),
 })
@@ -91,7 +91,7 @@ function SubmitForm({ application }: { application: Application }) {
   const { mutateApplication } = useApplicationContext()
 
   const form = useForm<SubmitFormFields, unknown, z.infer<typeof submitFormSchema>>({
-    resolver: zodResolver(submitFormSchema),
+    resolver: zodResolver<SubmitFormFields, unknown, z.infer<typeof submitFormSchema>>(submitFormSchema),
     defaultValues: {
       mlhCodeOfConduct: application.consents.find((consent) => consent.name === "mlhCodeOfConduct")?.choice ?? false,
       mlhTerms: application.consents.find((consent) => consent.name === "mlhTerms")?.choice ?? false,
diff --git a/client/src/lib/type-guards.ts b/client/src/lib/type-guards.ts
@@ -0,0 +1,11 @@
+export function isString(value: unknown): value is string {
+  return typeof value === "string" || value instanceof String
+}
+
+export function isNumber(value: unknown): value is number {
+  return typeof value === "number" || value instanceof Number
+}
+
+export function isBoolean(value: unknown): value is boolean {
+  return typeof value === "boolean" || value instanceof Boolean
+}
diff --git a/client/src/lib/zod-iso3-extension.ts b/client/src/lib/zod-iso3-extension.ts
diff --git a/client/src/lib/zod-iso3-validator.ts b/client/src/lib/zod-iso3-validator.ts
@@ -0,0 +1,13 @@
+import countries3to2 from "countries-list/minimal/countries.3to2.min.json"
+import { z, core } from "zod/v4"
+
+const iso3Codes = new Set(Object.keys(countries3to2))
+
+function isValidIso3(maybeIso3: string): boolean {
+  return iso3Codes.has(maybeIso3)
+}
+
+export function zodIso3(params?: string | core.$ZodCustomParams): z.ZodString {
+  params ??= { error: "Invalid country" }
+  return z.string().refine(isValidIso3, params)
+}
diff --git a/client/src/lib/zod-phone-extension.ts b/client/src/lib/zod-phone-extension.ts
diff --git a/client/src/lib/zod-phone-validator.ts b/client/src/lib/zod-phone-validator.ts
@@ -0,0 +1,7 @@
+import { isValidPhoneNumber } from "libphonenumber-js"
+import { core, z } from "zod/v4"
+
+export function zodPhoneNumberValidator(params?: string | core.$ZodCustomParams): z.ZodString {
+  params ??= { error: "Invalid phone number" }
+  return z.string().refine(isValidPhoneNumber, params)
+}
diff --git a/common/package.json b/common/package.json
@@ -18,9 +18,9 @@
     "@types/node": "^22.7.4",
     "tsup": "^8.2.3",
     "typescript": "^5.6.2",
-    "zod": "^3.23.8"
+    "zod": "^3.25.67"
   },
   "peerDependencies": {
-    "zod": "^3.23.8"
+    "zod": "^3.25.67"
   }
 }
diff --git a/common/src/input/discipline-of-study.ts b/common/src/input/discipline-of-study.ts
@@ -1,4 +1,4 @@
-import { z } from "zod"
+import { z } from "zod/v4"
 
 import { recordEntries } from "@/util/record-entries"
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/server/package.json b/server/package.json
