Merge pull request #62 from DouglasNeuroInformatics/zod-v4

feat: support zod v4

Author: joshunrau

package.json

@@ -65,7 +65,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.0",
-    "zod": "^3.23.6"
+    "zod": "^3.25.x"
   },
   "dependencies": {
     "@douglasneuroinformatics/libjs": "^2.8.0",

pnpm-lock.yaml

@@ -7,11 +7,13 @@ import type { FormFields } from '@douglasneuroinformatics/libui-form-types';
 import type FormTypes from '@douglasneuroinformatics/libui-form-types';
 import type { Meta, StoryObj } from '@storybook/react';
 import type { IntRange } from 'type-fest';
-import { z } from 'zod';
+import { z } from 'zod/v4';
 
 import { Heading } from '../Heading';
 import { Form } from './Form';
 
+import type { ZodTypeLike } from './types';
+
 const DISABLED = false;
 
 const $ExampleFormData = z.object({
@@ -49,7 +51,7 @@ const $ExampleFormData = z.object({
   stringRadio: z.enum(['a', 'b', 'c']).optional()
 });
 type ExampleFormSchemaType = typeof $ExampleFormData;
-type ExampleFormData = z.TypeOf<typeof $ExampleFormData>;
+type ExampleFormData = z.infer<typeof $ExampleFormData>;
 
 const $SimpleExampleFormData = z.object({
   name: z.string()
@@ -513,7 +515,7 @@ export const WithPreventReset: StoryObj<typeof Form<SimpleExampleFormSchemaType>
   }
 };
 
-export const WithSuspend: StoryObj<typeof Form<z.ZodType<FormTypes.Data>, { delay?: number }>> = {
+export const WithSuspend: StoryObj<typeof Form<ZodTypeLike<FormTypes.Data>, { delay?: number }>> = {
   args: {
     content: {
       delay: {

src/components/Form/Form.stories.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Mock } from 'vitest';
-import { z } from 'zod';
+import { z } from 'zod/v4';
 
 import { Form } from './Form';
 

src/components/Form/Form.test.tsx

@@ -10,7 +10,6 @@ import type {
 import { get, set } from 'lodash-es';
 import { twMerge } from 'tailwind-merge';
 import type { Promisable } from 'type-fest';
-import { z } from 'zod';
 
 import { useTranslation } from '@/hooks';
 import { cn } from '@/utils';
@@ -22,9 +21,9 @@ import { ErrorMessage } from './ErrorMessage';
 import { FieldsComponent } from './FieldsComponent';
 import { getInitialValues } from './utils';
 
-import type { FormErrors } from './types';
+import type { FormErrors, ZodErrorLike, ZodTypeLike } from './types';
 
-type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>> = {
+type FormProps<TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['_input'] = TSchema['_input']> = {
   [key: `data-${string}`]: unknown;
   additionalButtons?: {
     left?: React.ReactNode;
@@ -42,18 +41,18 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
   onBeforeSubmit?:
     | ((data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>)
     | null;
-  onError?: (error: z.ZodError<NoInfer<TData>>) => void;
+  onError?: (error: ZodErrorLike) => void;
   onSubmit: (data: NoInfer<TData>) => Promisable<void>;
   preventResetValuesOnReset?: boolean;
   readOnly?: boolean;
   resetBtn?: boolean;
   revalidateOnBlur?: boolean;
   submitBtnLabel?: string;
   suspendWhileSubmitting?: boolean;
-  validationSchema: z.ZodType<TData>;
+  validationSchema: ZodTypeLike<TData>;
 };
 
-const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({
+const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['_input'] = TSchema['_input']>({
   additionalButtons,
   className,
   content,
@@ -81,7 +80,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   );
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleError = (error: z.ZodError<TData>) => {
+  const handleError = (error: ZodErrorLike) => {
     const fieldErrors: FormErrors<TData> = {};
     const rootErrors: string[] = [];
     for (const issue of error.issues) {

src/components/Form/Form.tsx

@@ -25,3 +25,36 @@ export type BaseFieldComponentProps<TValue extends FormFieldValue = FormFieldVal
 export type FormErrors<TData extends FormDataType = FormDataType> = {
   [K in keyof TData]?: FieldError<TData[K]>;
 };
+
+export type ZodIssueLike = {
+  [key: string]: any;
+  readonly code: string;
+  readonly message: string;
+  readonly path: PropertyKey[];
+};
+
+export type ZodErrorLike = {
+  cause?: unknown;
+  issues: ZodIssueLike[];
+  name: string;
+};
+
+export type ZodSafeParseResultLike<T> = ZodSafeParseErrorLike | ZodSafeParseSuccessLike<T>;
+
+export type ZodSafeParseSuccessLike<TOutput> = {
+  data: TOutput;
+  error?: never;
+  success: true;
+};
+
+export type ZodSafeParseErrorLike = {
+  data?: never;
+  error: ZodErrorLike;
+  success: false;
+};
+
+export type ZodTypeLike<TOutput, TInput = TOutput> = {
+  readonly _input: TInput;
+  readonly _output: TOutput;
+  safeParseAsync: (data: unknown) => Promise<ZodSafeParseResultLike<TOutput>>;
+};