Migrate to Zod v4

apps/dashboard/package.json

@@ -65,7 +65,7 @@
     "react-zxing": "^2.1.0",
     "require-in-the-middle": "^8.0.1",
     "superjson": "^2.0.0",
-    "zod": "^3.25.47"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@biomejs/biome": "2.4.15",

apps/dashboard/src/app/(internal)/arrangementer/components/attendance-form.tsx

@@ -16,8 +16,6 @@ const AttendanceFormSchema = AttendanceWriteSchema.superRefine((val, ctx) => {
     const code = "custom"
     ctx.addIssue({ message, code, path: ["deregisterDeadline"] })
   }
-
-  return true
 })
 
 interface AttendanceFormProps {

apps/dashboard/src/app/(internal)/arrangementer/components/edit-form.tsx

@@ -20,7 +20,7 @@ import {
 import { z } from "zod"
 import { validateEventWrite } from "../validation"
 
-const EVENT_FORM_DATA_TYPE = Object.values(EventTypeSchema.Values).map((type) => ({
+const EVENT_FORM_DATA_TYPE = Object.values(EventTypeSchema.enum).map((type) => ({
   value: type,
   label: mapEventTypeToLabel(type),
 }))
@@ -36,7 +36,7 @@ const FormValidationSchema = EventSchema.extend({
 }).superRefine((data, ctx) => {
   const issues = validateEventWrite(data)
   for (const issue of issues) {
-    ctx.addIssue(issue)
+    ctx.addIssue({ code: "custom", message: issue.message, path: issue.path })
   }
 })
 

apps/dashboard/src/app/(internal)/arrangementer/components/feedback-form-edit-form.tsx

@@ -47,7 +47,7 @@ import z from "zod"
 import { useDeleteFeedbackFormMutation } from "../mutations"
 import { useEventFeedbackPublicResultsTokenGetQuery, useFeedbackAnswersGetQuery } from "../queries"
 
-const typeOptions = Object.values(FeedbackQuestionSchema.shape.type.Values).map((type) => ({
+const typeOptions = Object.values(FeedbackQuestionSchema.shape.type.enum).map((type) => ({
   value: type,
   label: getFeedbackQuestionTypeName(type),
 }))
@@ -63,8 +63,6 @@ const FormValuesSchema = z
       const code = "custom"
       ctx.addIssue({ message, code, path: ["feedbackForm.answerDeadline"] })
     }
-
-    return true
   })
 
 export type FormValues = z.infer<typeof FormValuesSchema>

apps/dashboard/src/app/(internal)/arrangementer/components/pool-form.tsx

@@ -41,7 +41,6 @@ export const PoolFormSchema = z.object({
     }
     return null
   }, z
-    .number()
     .int()
     .min(0, "Utsettelse må være mellom 0 og 96 timer (4 dager).")
     .max(96, "Utsettelse må være mellom 0 og 96 timer (4 dager).")

apps/dashboard/src/app/(internal)/arrangementer/components/write-form.tsx

@@ -22,7 +22,7 @@ import {
 import { addHours, roundToNearestHours } from "date-fns"
 import { z } from "zod"
 
-const EVENT_FORM_DATA_TYPE = Object.values(EventTypeSchema.Values).map((type) => ({
+const EVENT_FORM_DATA_TYPE = Object.values(EventTypeSchema.enum).map((type) => ({
   value: type,
   label: mapEventTypeToLabel(type),
 }))
@@ -39,7 +39,7 @@ const FormValidationSchema = EventWriteSchema.extend({
 }).superRefine((data, ctx) => {
   const issues = validateEventWrite(data)
   for (const issue of issues) {
-    ctx.addIssue(issue)
+    ctx.addIssue({ code: "custom", message: issue.message, path: issue.path })
   }
 })
 

apps/dashboard/src/app/(internal)/bedrifter/components/write-form.tsx

@@ -25,7 +25,7 @@ export const useCompanyWriteForm = ({
 
   return useFormBuilder({
     schema: CompanyWriteSchema.extend({
-      website: z.string().url(),
+      website: z.url(),
     }),
     defaultValues,
     onSubmit,

apps/dashboard/src/app/(internal)/brukere/components/membership-form.tsx

@@ -134,7 +134,7 @@ export const useMembershipWriteForm = ({
         label: "Type",
         required: true,
         placeholder: "Velg type",
-        data: Object.values(MembershipTypeSchema.Values).map((type) => ({
+        data: Object.values(MembershipTypeSchema.enum).map((type) => ({
           value: type,
           label: getMembershipTypeName(type) ?? type,
         })),
@@ -144,7 +144,7 @@ export const useMembershipWriteForm = ({
         required: false,
         clearable: true,
         placeholder: "Velg spesialisering",
-        data: Object.values(MembershipSpecializationSchema.Values)
+        data: Object.values(MembershipSpecializationSchema.enum)
           .filter((specialization) => specialization !== "UNKNOWN")
           .map((specialization) => ({
             value: specialization,

apps/dashboard/src/app/(internal)/grupper/all-groups-table.tsx

@@ -99,7 +99,7 @@ export const AllGroupsTable = ({ groups }: Props) => {
       filters={[
         { columnId: "status", label: "Aktiv", value: "Aktiv" },
         { columnId: "status", label: "Inaktiv", value: "Inaktiv" },
-        ...Object.values(GroupTypeSchema.Values).map((groupType) => {
+        ...Object.values(GroupTypeSchema.enum).map((groupType) => {
           const typeName = getGroupTypeName(groupType)
 
           return {

apps/dashboard/src/app/(internal)/grupper/write-form.tsx

@@ -55,7 +55,7 @@ export const useGroupWriteForm = ({
       FormSchema.superRefine((data, ctx) => {
         const issues = validateGroupWrite(data, existingGroupSlugs, defaultValues.slug)
         for (const issue of issues) {
-          ctx.addIssue(issue)
+          ctx.addIssue({ code: "custom", message: issue.message, path: issue.path })
         }
       }),
     [existingGroupSlugs, defaultValues]
@@ -108,7 +108,7 @@ export const useGroupWriteForm = ({
       memberVisibility: createSelectInput({
         label: "Hvilke medlemmer skal vises",
         placeholder: "Velg en",
-        data: Object.values(GroupMemberVisibilitySchema.Values).map((groupMemberVisibilityType) => ({
+        data: Object.values(GroupMemberVisibilitySchema.enum).map((groupMemberVisibilityType) => ({
           value: groupMemberVisibilityType,
           label: getGroupMemberVisibilityName(groupMemberVisibilityType),
         })),
@@ -130,7 +130,7 @@ export const useGroupWriteForm = ({
         placeholder: "Velg en",
         withAsterisk: true,
         required: true,
-        data: Object.values(GroupTypeSchema.Values).map((groupType) => ({
+        data: Object.values(GroupTypeSchema.enum).map((groupType) => ({
           value: groupType,
           label: getGroupTypeName(groupType),
         })),
@@ -141,7 +141,7 @@ export const useGroupWriteForm = ({
         placeholder: "Velg en",
         withAsterisk: true,
         required: true,
-        data: Object.values(GroupRecruitmentMethodSchema.Values).map((recruitmentMethod) => ({
+        data: Object.values(GroupRecruitmentMethodSchema.enum).map((recruitmentMethod) => ({
           value: recruitmentMethod,
           label: getGroupRecruitmentMethodName(recruitmentMethod),
         })),

apps/dashboard/src/app/(internal)/karriere/write-form.tsx

@@ -88,7 +88,7 @@ export const useJobListingWriteForm = ({
       employment: createSelectInput({
         label: "Type",
         placeholder: "Velg type",
-        data: Object.values(JobListingSchema.shape.employment.Values).map((employment) => ({
+        data: Object.values(JobListingSchema.shape.employment.enum).map((employment) => ({
           value: employment,
           label: getJobListingEmploymentName(employment),
         })),

apps/dashboard/src/app/(internal)/konkurranser/components/contest-write-form.tsx

@@ -23,7 +23,7 @@ const RESULT_ORDER_OPTIONS = [
 const FormValidationSchema = ContestWriteSchema.superRefine((data, ctx) => {
   const issues = validateContestWrite(data)
   for (const issue of issues) {
-    ctx.addIssue(issue)
+    ctx.addIssue({ code: "custom", message: issue.message, path: issue.path })
   }
 })
 

apps/dashboard/src/app/(internal)/prikker/write-form.tsx

@@ -56,7 +56,7 @@ export const useMarkWriteForm = ({
 
   return useFormBuilder({
     schema: MarkFormSchema,
-    // @ts-expect-error: The default should be a string but is typed as a number
+    // @ts-expect-error: weight needs a string default for the text input but the schema output is number (handled by z.preprocess)
     defaultValues: { ...defaultValues, weight: defaultValues.weight?.toString() },
     onSubmit,
     label,

apps/dashboard/src/components/ImageUploadModal.tsx

@@ -9,7 +9,7 @@ import { z } from "zod"
 const validationSchema = z.object({
   title: z.string().max(255).optional(),
   alt: z.string().min(1).max(255),
-  imageUrl: z.string().url(),
+  imageUrl: z.url(),
 })
 
 interface UploadImageModalProps {

apps/dashboard/src/components/forms/CheckboxGroup.tsx

@@ -1,7 +1,6 @@
-import { ErrorMessage } from "@hookform/error-message"
 import { Checkbox } from "@mantine/core"
 import { Controller, type FieldValues } from "react-hook-form"
-import type { InputProducerResult } from "./types"
+import { getErrorMessage, type InputProducerResult } from "./types"
 
 interface CheckboxGroupsProps {
   selected: number[]
@@ -45,7 +44,7 @@ export function createLabelledCheckboxGroupInput<F extends FieldValues>({
   return function LabelledCheckboxGroupInput({ name, state, control }) {
     return (
       <div>
-        {state.errors[name] && <ErrorMessage errors={state.errors} name={name} />}
+        {getErrorMessage(state, name)}
         <Controller
           control={control}
           name={name}

apps/dashboard/src/components/forms/CheckboxInput.tsx

@@ -1,18 +1,11 @@
-import { ErrorMessage } from "@hookform/error-message"
 import { Checkbox, type CheckboxProps } from "@mantine/core"
 import type { FieldValues } from "react-hook-form"
-import type { InputProducerResult } from "./types"
+import { getErrorMessage, type InputProducerResult } from "./types"
 
 export function createCheckboxInput<F extends FieldValues>({
   ...props
 }: Omit<CheckboxProps, "error">): InputProducerResult<F> {
   return function FormCheckboxInput({ name, state, register }) {
-    return (
-      <Checkbox
-        {...register(name)}
-        {...props}
-        error={state.errors[name] && <ErrorMessage errors={state.errors} name={name} />}
-      />
-    )
+    return <Checkbox {...register(name)} {...props} error={getErrorMessage(state, name)} />
   }
 }

apps/dashboard/src/components/forms/DateInput.tsx

@@ -1,9 +1,8 @@
 import { getCurrentUTC } from "@dotkomonline/utils"
-import { ErrorMessage } from "@hookform/error-message"
 import { DatePickerInput, type DatePickerInputProps } from "@mantine/dates"
 import { roundToNearestHours } from "date-fns"
 import { Controller, type FieldValues } from "react-hook-form"
-import type { InputProducerResult } from "./types"
+import { getErrorMessage, type InputProducerResult } from "./types"
 import { ActionIcon, Stack } from "@mantine/core"
 import { IconX } from "@tabler/icons-react"
 
@@ -24,7 +23,7 @@ export function createDateInput<F extends FieldValues>({
               defaultValue={defaultValue ?? roundToNearestHours(getCurrentUTC(), { roundingMethod: "ceil" })}
               value={field.value}
               onChange={field.onChange}
-              error={state.errors[name] && <ErrorMessage errors={state.errors} name={name} />}
+              error={getErrorMessage(state, name)}
               rightSection={
                 props.required !== true && (
                   <ActionIcon w="fit-content" color="gray" variant="subtle" onClick={() => field.onChange(null)}>

apps/dashboard/src/components/forms/DateTimeInput.tsx

@@ -1,9 +1,8 @@
 import { getCurrentUTC } from "@dotkomonline/utils"
-import { ErrorMessage } from "@hookform/error-message"
 import { DateTimePicker, type DateTimePickerProps } from "@mantine/dates"
 import { roundToNearestHours } from "date-fns"
 import { Controller, type FieldValues } from "react-hook-form"
-import type { InputProducerResult } from "./types"
+import { getErrorMessage, type InputProducerResult } from "./types"
 import { IconX } from "@tabler/icons-react"
 import { ActionIcon } from "@mantine/core"
 
@@ -24,7 +23,7 @@ export function createDateTimeInput<F extends FieldValues>({
             defaultValue={defaultValue ?? roundToNearestHours(getCurrentUTC(), { roundingMethod: "ceil" })}
             value={field.value}
             onChange={field.onChange}
-            error={state.errors[name] && <ErrorMessage errors={state.errors} name={name} />}
+            error={getErrorMessage(state, name)}
             rightSection={
               props.required !== true && (
                 <ActionIcon w="fit-content" color="gray" variant="subtle" onClick={() => field.onChange(null)}>

apps/dashboard/src/components/forms/EventSelectInput.tsx

@@ -1,11 +1,10 @@
 import { useEventAllQuery, useEventWithAttendancesGetQuery } from "@/app/(internal)/arrangementer/queries"
 import type { EventId } from "@dotkomonline/types"
-import { ErrorMessage } from "@hookform/error-message"
 import { Select, type SelectProps } from "@mantine/core"
 import { useDebouncedValue } from "@mantine/hooks"
 import { useState } from "react"
 import { Controller, type FieldValues, useController } from "react-hook-form"
-import type { InputProducerResult } from "./types"
+import { getErrorMessage, type InputProducerResult } from "./types"
 
 interface Props extends Omit<SelectProps, "error"> {
   excludeEventIds?: EventId[]
@@ -56,7 +55,7 @@ export function createEventSelectInput<F extends FieldValues>({
             searchValue={searchQuery}
             onSearchChange={handleEventSearch}
             searchable={true}
-            error={state.errors[name] && <ErrorMessage errors={state.errors} name={name} />}
+            error={getErrorMessage(state, name)}
             data={options}
           />
         )}

apps/dashboard/src/components/forms/Form.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Button, Flex } from "@mantine/core"
-import { type DefaultValues, type UseFormReturn, useForm } from "react-hook-form"
+import { type DefaultValues, type FieldPath, type FieldValue, type UseFormReturn, useForm } from "react-hook-form"
 import type { z } from "zod"
 import type { InputProducerResult } from "./types"
 
@@ -9,7 +9,7 @@ function entriesOf<T extends Record<string, unknown>, K extends string & keyof T
 }
 
 interface FormBuilderOptions<T extends z.ZodRawShape> {
-  schema: z.ZodEffects<z.ZodObject<T>> | z.ZodObject<T>
+  schema: z.ZodObject<T>
   fields: Partial<{
     [K in keyof z.infer<z.ZodObject<T>>]: InputProducerResult<z.infer<z.ZodObject<T>>>
   }>
@@ -37,11 +37,15 @@ export function useFormBuilder<T extends z.ZodRawShape>({
       throw new Error()
     }
     const Component: InputProducerResult<z.infer<z.ZodObject<T>>> = fc
+    // zod v4's $InferObjectOutput<T> is opaque in generics. FieldPath<T> cannot index DeepPartial<T> without this cast
+    const defaultValue = (form.formState.defaultValues as Record<string, unknown>)?.[name as string] as FieldValue<
+      z.infer<z.ZodObject<T>>
+    >
     return (
       <Component
-        defaultValue={form.formState.defaultValues?.[name]}
+        defaultValue={defaultValue}
         key={name}
-        name={name}
+        name={name as FieldPath<z.infer<z.ZodObject<T>>>}
         register={form.register}
         control={form.control}
         state={form.formState}

apps/dashboard/src/components/forms/FormSelectInput.tsx

@@ -1,7 +1,6 @@
-import { ErrorMessage } from "@hookform/error-message"
 import { Select, type SelectProps } from "@mantine/core"
 import { Controller, type FieldValues } from "react-hook-form"
-import type { InputProducerResult } from "./types"
+import { getErrorMessage, type InputProducerResult } from "./types"
 
 export function createIntegerSelectInput<F extends FieldValues>({
   ...props
@@ -22,7 +21,7 @@ export function createIntegerSelectInput<F extends FieldValues>({
             }))}
             value={field.value?.toString() ?? ""}
             onChange={(value) => field.onChange(value !== null ? Number.parseInt(value, 10) : null)}
-            error={state.errors[name] && <ErrorMessage errors={state.errors} name={name} />}
+            error={getErrorMessage(state, name)}
           />
         )}
       />

apps/dashboard/src/components/forms/MultiSelectInput.tsx

@@ -1,7 +1,6 @@
-import { ErrorMessage } from "@hookform/error-message"
 import { MultiSelect, type MultiSelectProps } from "@mantine/core"
 import { Controller, type FieldValues } from "react-hook-form"
-import type { InputProducerResult } from "./types"
+import { getErrorMessage, type InputProducerResult } from "./types"
 
 export function createMultipleSelectInput<F extends FieldValues>({
   ...props
@@ -12,12 +11,7 @@ export function createMultipleSelectInput<F extends FieldValues>({
         control={control}
         name={name}
         render={({ field }) => (
-          <MultiSelect
-            {...props}
-            error={state.errors[name] && <ErrorMessage errors={state.errors} name={name} />}
-            onChange={field.onChange}
-            value={field.value}
-          />
+          <MultiSelect {...props} error={getErrorMessage(state, name)} onChange={field.onChange} value={field.value} />
         )}
       />
     )

apps/dashboard/src/components/forms/NumberInput.tsx

@@ -1,7 +1,6 @@
-import { ErrorMessage } from "@hookform/error-message"
 import { NumberInput, type NumberInputProps } from "@mantine/core"
 import { Controller, type FieldValues } from "react-hook-form"
-import type { InputProducerResult } from "./types"
+import { getErrorMessage, type InputProducerResult } from "./types"
 
 export function createNumberInput<F extends FieldValues>({
   ...props
@@ -16,7 +15,7 @@ export function createNumberInput<F extends FieldValues>({
             {...props}
             value={field.value}
             onChange={(value) => field.onChange({ target: { value } })}
-            error={state.errors[name] && <ErrorMessage errors={state.errors} name={name} />}
+            error={getErrorMessage(state, name)}
           />
         )}
       />