main repo

node_modules/@hookform/resolvers/zod/src/__tests__/Form-native-validation.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '..';
+
+const USERNAME_REQUIRED_MESSAGE = 'username field is required';
+const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
+
+const schema = z.object({
+  username: z.string().nonempty({ message: USERNAME_REQUIRED_MESSAGE }),
+  password: z.string().nonempty({ message: PASSWORD_REQUIRED_MESSAGE }),
+});
+
+type FormData = z.infer<typeof schema>;
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    shouldUseNativeValidation: true,
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} placeholder="username" />
+
+      <input {...register('password')} placeholder="password" />
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's native validation with Zod", async () => {
+  const handleSubmit = vi.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  // username
+  let usernameField = screen.getByPlaceholderText(
+    /username/i,
+  ) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  let passwordField = screen.getByPlaceholderText(
+    /password/i,
+  ) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+
+  await user.click(screen.getByText(/submit/i));
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(false);
+  expect(usernameField.validationMessage).toBe(USERNAME_REQUIRED_MESSAGE);
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(false);
+  expect(passwordField.validationMessage).toBe(PASSWORD_REQUIRED_MESSAGE);
+
+  await user.type(screen.getByPlaceholderText(/username/i), 'joe');
+  await user.type(screen.getByPlaceholderText(/password/i), 'password');
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+});

node_modules/@hookform/resolvers/zod/src/__tests__/Form.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '..';
+
+const schema = z.object({
+  username: z.string().nonempty({ message: 'username field is required' }),
+  password: z.string().nonempty({ message: 'password field is required' }),
+});
+
+type FormData = z.infer<typeof schema> & { unusedProperty: string };
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema), // Useful to check TypeScript regressions
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} />
+      {errors.username && <span role="alert">{errors.username.message}</span>}
+
+      <input {...register('password')} />
+      {errors.password && <span role="alert">{errors.password.message}</span>}
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's validation with Zod and TypeScript's integration", async () => {
+  const handleSubmit = vi.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  expect(screen.queryAllByRole('alert')).toHaveLength(0);
+
+  await user.click(screen.getByText(/submit/i));
+
+  expect(screen.getByText(/username field is required/i)).toBeInTheDocument();
+  expect(screen.getByText(/password field is required/i)).toBeInTheDocument();
+  expect(handleSubmit).not.toHaveBeenCalled();
+});

node_modules/@hookform/resolvers/zod/src/__tests__/__fixtures__/data.ts

@@ -0,0 +1,88 @@
+import { Field, InternalFieldName } from 'react-hook-form';
+import { z } from 'zod';
+
+export const schema = z
+  .object({
+    username: z.string().regex(/^\w+$/).min(3).max(30),
+    password: z
+      .string()
+      .regex(new RegExp('.*[A-Z].*'), 'One uppercase character')
+      .regex(new RegExp('.*[a-z].*'), 'One lowercase character')
+      .regex(new RegExp('.*\\d.*'), 'One number')
+      .regex(
+        new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
+        'One special character',
+      )
+      .min(8, 'Must be at least 8 characters in length'),
+    repeatPassword: z.string(),
+    accessToken: z.union([z.string(), z.number()]),
+    birthYear: z.number().min(1900).max(2013).optional(),
+    email: z.string().email().optional(),
+    tags: z.array(z.string()),
+    enabled: z.boolean(),
+    url: z.string().url('Custom error url').or(z.literal('')),
+    like: z
+      .array(
+        z.object({
+          id: z.number(),
+          name: z.string().length(4),
+        }),
+      )
+      .optional(),
+    dateStr: z
+      .string()
+      .transform((value) => new Date(value))
+      .refine((value) => !isNaN(value.getTime()), {
+        message: 'Invalid date',
+      }),
+  })
+  .refine((obj) => obj.password === obj.repeatPassword, {
+    message: 'Passwords do not match',
+    path: ['confirm'],
+  });
+
+export const validData: z.input<typeof schema> = {
+  username: 'Doe',
+  password: 'Password123_',
+  repeatPassword: 'Password123_',
+  birthYear: 2000,
+  email: 'john@doe.com',
+  tags: ['tag1', 'tag2'],
+  enabled: true,
+  accessToken: 'accessToken',
+  url: 'https://react-hook-form.com/',
+  like: [
+    {
+      id: 1,
+      name: 'name',
+    },
+  ],
+  dateStr: '2020-01-01',
+};
+
+export const invalidData = {
+  password: '___',
+  email: '',
+  birthYear: 'birthYear',
+  like: [{ id: 'z' }],
+  url: 'abc',
+};
+
+export const fields: Record<InternalFieldName, Field['_f']> = {
+  username: {
+    ref: { name: 'username' },
+    name: 'username',
+  },
+  password: {
+    ref: { name: 'password' },
+    name: 'password',
+  },
+  email: {
+    ref: { name: 'email' },
+    name: 'email',
+  },
+  birthday: {
+    ref: { name: 'birthday' },
+    name: 'birthday',
+  },
+};

node_modules/@hookform/resolvers/zod/src/__tests__/__snapshots__/zod.ts.snap

@@ -0,0 +1,430 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`zodResolver > should return a single error from zodResolver when validation fails 1`] = `
+{
+  "errors": {
+    "accessToken": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "birthYear": {
+      "message": "Expected number, received string",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "dateStr": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "email": {
+      "message": "Invalid email",
+      "ref": {
+        "name": "email",
+      },
+      "type": "invalid_string",
+    },
+    "enabled": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "like": [
+      {
+        "id": {
+          "message": "Expected number, received string",
+          "ref": undefined,
+          "type": "invalid_type",
+        },
+        "name": {
+          "message": "Required",
+          "ref": undefined,
+          "type": "invalid_type",
+        },
+      },
+    ],
+    "password": {
+      "message": "One uppercase character",
+      "ref": {
+        "name": "password",
+      },
+      "type": "invalid_string",
+    },
+    "repeatPassword": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "tags": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "url": {
+      "message": "Custom error url",
+      "ref": undefined,
+      "type": "invalid_string",
+    },
+    "username": {
+      "message": "Required",
+      "ref": {
+        "name": "username",
+      },
+      "type": "invalid_type",
+    },
+  },
+  "values": {},
+}
+`;
+
+exports[`zodResolver > should return a single error from zodResolver with \`mode: sync\` when validation fails 1`] = `
+{
+  "errors": {
+    "accessToken": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "birthYear": {
+      "message": "Expected number, received string",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "dateStr": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "email": {
+      "message": "Invalid email",
+      "ref": {
+        "name": "email",
+      },
+      "type": "invalid_string",
+    },
+    "enabled": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "like": [
+      {
+        "id": {
+          "message": "Expected number, received string",
+          "ref": undefined,
+          "type": "invalid_type",
+        },
+        "name": {
+          "message": "Required",
+          "ref": undefined,
+          "type": "invalid_type",
+        },
+      },
+    ],
+    "password": {
+      "message": "One uppercase character",
+      "ref": {
+        "name": "password",
+      },
+      "type": "invalid_string",
+    },
+    "repeatPassword": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "tags": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+    },
+    "url": {
+      "message": "Custom error url",
+      "ref": undefined,
+      "type": "invalid_string",
+    },
+    "username": {
+      "message": "Required",
+      "ref": {
+        "name": "username",
+      },
+      "type": "invalid_type",
+    },
+  },
+  "values": {},
+}
+`;
+
+exports[`zodResolver > should return all the errors from zodResolver when validation fails with \`validateAllFieldCriteria\` set to true 1`] = `
+{
+  "errors": {
+    "accessToken": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": [
+          "Required",
+          "Required",
+        ],
+        "invalid_union": "Invalid input",
+      },
+    },
+    "birthYear": {
+      "message": "Expected number, received string",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Expected number, received string",
+      },
+    },
+    "dateStr": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+    "email": {
+      "message": "Invalid email",
+      "ref": {
+        "name": "email",
+      },
+      "type": "invalid_string",
+      "types": {
+        "invalid_string": "Invalid email",
+      },
+    },
+    "enabled": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+    "like": [
+      {
+        "id": {
+          "message": "Expected number, received string",
+          "ref": undefined,
+          "type": "invalid_type",
+          "types": {
+            "invalid_type": "Expected number, received string",
+          },
+        },
+        "name": {
+          "message": "Required",
+          "ref": undefined,
+          "type": "invalid_type",
+          "types": {
+            "invalid_type": "Required",
+          },
+        },
+      },
+    ],
+    "password": {
+      "message": "One uppercase character",
+      "ref": {
+        "name": "password",
+      },
+      "type": "invalid_string",
+      "types": {
+        "invalid_string": [
+          "One uppercase character",
+          "One lowercase character",
+          "One number",
+        ],
+        "too_small": "Must be at least 8 characters in length",
+      },
+    },
+    "repeatPassword": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+    "tags": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+    "url": {
+      "message": "Custom error url",
+      "ref": undefined,
+      "type": "invalid_string",
+      "types": {
+        "invalid_string": "Custom error url",
+      },
+    },
+    "username": {
+      "message": "Required",
+      "ref": {
+        "name": "username",
+      },
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+  },
+  "values": {},
+}
+`;
+
+exports[`zodResolver > should return all the errors from zodResolver when validation fails with \`validateAllFieldCriteria\` set to true and \`mode: sync\` 1`] = `
+{
+  "errors": {
+    "accessToken": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": [
+          "Required",
+          "Required",
+        ],
+        "invalid_union": "Invalid input",
+      },
+    },
+    "birthYear": {
+      "message": "Expected number, received string",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Expected number, received string",
+      },
+    },
+    "dateStr": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+    "email": {
+      "message": "Invalid email",
+      "ref": {
+        "name": "email",
+      },
+      "type": "invalid_string",
+      "types": {
+        "invalid_string": "Invalid email",
+      },
+    },
+    "enabled": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+    "like": [
+      {
+        "id": {
+          "message": "Expected number, received string",
+          "ref": undefined,
+          "type": "invalid_type",
+          "types": {
+            "invalid_type": "Expected number, received string",
+          },
+        },
+        "name": {
+          "message": "Required",
+          "ref": undefined,
+          "type": "invalid_type",
+          "types": {
+            "invalid_type": "Required",
+          },
+        },
+      },
+    ],
+    "password": {
+      "message": "One uppercase character",
+      "ref": {
+        "name": "password",
+      },
+      "type": "invalid_string",
+      "types": {
+        "invalid_string": [
+          "One uppercase character",
+          "One lowercase character",
+          "One number",
+        ],
+        "too_small": "Must be at least 8 characters in length",
+      },
+    },
+    "repeatPassword": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+    "tags": {
+      "message": "Required",
+      "ref": undefined,
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+    "url": {
+      "message": "Custom error url",
+      "ref": undefined,
+      "type": "invalid_string",
+      "types": {
+        "invalid_string": "Custom error url",
+      },
+    },
+    "username": {
+      "message": "Required",
+      "ref": {
+        "name": "username",
+      },
+      "type": "invalid_type",
+      "types": {
+        "invalid_type": "Required",
+      },
+    },
+  },
+  "values": {},
+}
+`;
+
+exports[`zodResolver > should return parsed values from zodResolver with \`mode: sync\` when validation pass 1`] = `
+{
+  "errors": {},
+  "values": {
+    "accessToken": "accessToken",
+    "birthYear": 2000,
+    "dateStr": 2020-01-01T00:00:00.000Z,
+    "email": "john@doe.com",
+    "enabled": true,
+    "like": [
+      {
+        "id": 1,
+        "name": "name",
+      },
+    ],
+    "password": "Password123_",
+    "repeatPassword": "Password123_",
+    "tags": [
+      "tag1",
+      "tag2",
+    ],
+    "url": "https://react-hook-form.com/",
+    "username": "Doe",
+  },
+}
+`;

node_modules/@hookform/resolvers/zod/src/__tests__/zod.ts

@@ -0,0 +1,92 @@
+import { zodResolver } from '..';
+import { fields, invalidData, schema, validData } from './__fixtures__/data';
+
+const shouldUseNativeValidation = false;
+
+describe('zodResolver', () => {
+  it('should return values from zodResolver when validation pass & raw=true', async () => {
+    const parseAsyncSpy = vi.spyOn(schema, 'parseAsync');
+
+    const result = await zodResolver(schema, undefined, {
+      raw: true,
+    })(validData, undefined, {
+      fields,
+      shouldUseNativeValidation,
+    });
+
+    expect(parseAsyncSpy).toHaveBeenCalledTimes(1);
+    expect(result).toEqual({ errors: {}, values: validData });
+  });
+
+  it('should return parsed values from zodResolver with `mode: sync` when validation pass', async () => {
+    const parseSpy = vi.spyOn(schema, 'parse');
+    const parseAsyncSpy = vi.spyOn(schema, 'parseAsync');
+
+    const result = await zodResolver(schema, undefined, {
+      mode: 'sync',
+    })(validData, undefined, { fields, shouldUseNativeValidation });
+
+    expect(parseSpy).toHaveBeenCalledTimes(1);
+    expect(parseAsyncSpy).not.toHaveBeenCalled();
+    expect(result.errors).toEqual({});
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return a single error from zodResolver when validation fails', async () => {
+    const result = await zodResolver(schema)(invalidData, undefined, {
+      fields,
+      shouldUseNativeValidation,
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return a single error from zodResolver with `mode: sync` when validation fails', async () => {
+    const parseSpy = vi.spyOn(schema, 'parse');
+    const parseAsyncSpy = vi.spyOn(schema, 'parseAsync');
+
+    const result = await zodResolver(schema, undefined, {
+      mode: 'sync',
+    })(invalidData, undefined, { fields, shouldUseNativeValidation });
+
+    expect(parseSpy).toHaveBeenCalledTimes(1);
+    expect(parseAsyncSpy).not.toHaveBeenCalled();
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all the errors from zodResolver when validation fails with `validateAllFieldCriteria` set to true', async () => {
+    const result = await zodResolver(schema)(invalidData, undefined, {
+      fields,
+      criteriaMode: 'all',
+      shouldUseNativeValidation,
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all the errors from zodResolver when validation fails with `validateAllFieldCriteria` set to true and `mode: sync`', async () => {
+    const result = await zodResolver(schema, undefined, { mode: 'sync' })(
+      invalidData,
+      undefined,
+      {
+        fields,
+        criteriaMode: 'all',
+        shouldUseNativeValidation,
+      },
+    );
+
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should throw any error unrelated to Zod', async () => {
+    const schemaWithCustomError = schema.refine(() => {
+      throw Error('custom error');
+    });
+    const promise = zodResolver(schemaWithCustomError)(validData, undefined, {
+      fields,
+      shouldUseNativeValidation,
+    });
+
+    await expect(promise).rejects.toThrow('custom error');
+  });
+});

node_modules/@hookform/resolvers/zod/src/index.ts

@@ -0,0 +1,2 @@
+export * from './zod';
+export * from './types';

node_modules/@hookform/resolvers/zod/src/types.ts

@@ -0,0 +1,22 @@
+import { FieldValues, ResolverOptions, ResolverResult } from 'react-hook-form';
+import { z } from 'zod';
+
+export type Resolver = <T extends z.Schema<any, any>>(
+  schema: T,
+  schemaOptions?: Partial<z.ParseParams>,
+  factoryOptions?: {
+    /**
+     * @default async
+     */
+    mode?: 'async' | 'sync';
+    /**
+     * Return the raw input values rather than the parsed values.
+     * @default false
+     */
+    raw?: boolean;
+  },
+) => <TFieldValues extends FieldValues, TContext>(
+  values: TFieldValues,
+  context: TContext | undefined,
+  options: ResolverOptions<TFieldValues>,
+) => Promise<ResolverResult<TFieldValues>>;

node_modules/@hookform/resolvers/zod/src/zod.ts

@@ -0,0 +1,90 @@
+import { toNestErrors, validateFieldsNatively } from '@hookform/resolvers';
+import { FieldError, FieldErrors, appendErrors } from 'react-hook-form';
+import { ZodError, z } from 'zod';
+import type { Resolver } from './types';
+
+const isZodError = (error: any): error is ZodError =>
+  Array.isArray(error?.errors);
+
+const parseErrorSchema = (
+  zodErrors: z.ZodIssue[],
+  validateAllFieldCriteria: boolean,
+) => {
+  const errors: Record<string, FieldError> = {};
+  for (; zodErrors.length; ) {
+    const error = zodErrors[0];
+    const { code, message, path } = error;
+    const _path = path.join('.');
+
+    if (!errors[_path]) {
+      if ('unionErrors' in error) {
+        const unionError = error.unionErrors[0].errors[0];
+
+        errors[_path] = {
+          message: unionError.message,
+          type: unionError.code,
+        };
+      } else {
+        errors[_path] = { message, type: code };
+      }
+    }
+
+    if ('unionErrors' in error) {
+      error.unionErrors.forEach((unionError) =>
+        unionError.errors.forEach((e) => zodErrors.push(e)),
+      );
+    }
+
+    if (validateAllFieldCriteria) {
+      const types = errors[_path].types;
+      const messages = types && types[error.code];
+
+      errors[_path] = appendErrors(
+        _path,
+        validateAllFieldCriteria,
+        errors,
+        code,
+        messages
+          ? ([] as string[]).concat(messages as string[], error.message)
+          : error.message,
+      ) as FieldError;
+    }
+
+    zodErrors.shift();
+  }
+
+  return errors;
+};
+
+export const zodResolver: Resolver =
+  (schema, schemaOptions, resolverOptions = {}) =>
+  async (values, _, options) => {
+    try {
+      const data = await schema[
+        resolverOptions.mode === 'sync' ? 'parse' : 'parseAsync'
+      ](values, schemaOptions);
+
+      options.shouldUseNativeValidation && validateFieldsNatively({}, options);
+
+      return {
+        errors: {} as FieldErrors,
+        values: resolverOptions.raw ? values : data,
+      };
+    } catch (error: any) {
+      if (isZodError(error)) {
+        return {
+          values: {},
+          errors: toNestErrors(
+            parseErrorSchema(
+              error.errors,
+              !options.shouldUseNativeValidation &&
+                options.criteriaMode === 'all',
+            ),
+            options,
+          ),
+        };
+      }
+
+      throw error;
+    }
+  };