remix-validated-form 2.1.1 → 3.0.0-beta.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@2.1.0 build:browser
+> remix-validated-form@2.1.1 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@2.1.0 build:main
+> remix-validated-form@2.1.1 build:main
 > tsc --module CommonJS --outDir ./build
 

package/browser/index.d.ts

@@ -2,7 +2,5 @@ export * from "./hooks";
 export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
-export * from "./validation/withYup";
-export * from "./validation/withZod";
 export * from "./validation/createValidator";
 export type { FormContextValue } from "./internal/formContext";

package/browser/index.js

@@ -2,6 +2,4 @@ export * from "./hooks";
 export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
-export * from "./validation/withYup";
-export * from "./validation/withZod";
 export * from "./validation/createValidator";

package/build/index.d.ts

@@ -2,7 +2,5 @@ export * from "./hooks";
 export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
-export * from "./validation/withYup";
-export * from "./validation/withZod";
 export * from "./validation/createValidator";
 export type { FormContextValue } from "./internal/formContext";

package/build/index.js

@@ -14,6 +14,4 @@ __exportStar(require("./hooks"), exports);
 __exportStar(require("./server"), exports);
 __exportStar(require("./ValidatedForm"), exports);
 __exportStar(require("./validation/types"), exports);
-__exportStar(require("./validation/withYup"), exports);
-__exportStar(require("./validation/withZod"), exports);
 __exportStar(require("./validation/createValidator"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "2.1.1",
+  "version": "3.0.0-beta.1",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -31,6 +31,7 @@
     "react",
     "form",
     "yup",
+    "zod",
     "validation"
   ],
   "peerDependencies": {
@@ -41,16 +42,12 @@
   "devDependencies": {
     "@remix-run/react": "^1.0.6",
     "@remix-run/server-runtime": "^1.0.6",
-    "@types/jest": "^27.0.3",
     "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.37",
     "fetch-blob": "^3.1.3",
     "react": "^17.0.2",
-    "ts-jest": "^27.1.1",
     "tsconfig": "*",
-    "typescript": "^4.5.3",
-    "yup": "^0.32.11",
-    "zod": "^3.11.6"
+    "typescript": "^4.5.3"
   },
   "dependencies": {
     "lodash": "^4.17.21",

package/src/index.ts

@@ -2,7 +2,5 @@ export * from "./hooks";
 export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
-export * from "./validation/withYup";
-export * from "./validation/withZod";
 export * from "./validation/createValidator";
 export type { FormContextValue } from "./internal/formContext";

package/jest.config.js

@@ -1,10 +0,0 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-module.exports = {
-  globals: {
-    "ts-jest": {
-      tsconfig: "tsconfig.json",
-    },
-  },
-  preset: "ts-jest",
-  testEnvironment: "node",
-};

package/src/test-data/testFormData.ts

@@ -1,55 +0,0 @@
-// Copied from remix to use in tests
-// https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
-export class TestFormData implements FormData {
-  private _params: URLSearchParams;
-
-  constructor(body?: string) {
-    this._params = new URLSearchParams(body);
-  }
-  append(name: string, value: string | Blob, fileName?: string): void {
-    if (typeof value !== "string") {
-      throw new Error("formData.append can only accept a string");
-    }
-    this._params.append(name, value);
-  }
-  delete(name: string): void {
-    this._params.delete(name);
-  }
-  get(name: string): FormDataEntryValue | null {
-    return this._params.get(name);
-  }
-  getAll(name: string): FormDataEntryValue[] {
-    return this._params.getAll(name);
-  }
-  has(name: string): boolean {
-    return this._params.has(name);
-  }
-  set(name: string, value: string | Blob, fileName?: string): void {
-    if (typeof value !== "string") {
-      throw new Error("formData.set can only accept a string");
-    }
-    this._params.set(name, value);
-  }
-  forEach(
-    callbackfn: (
-      value: FormDataEntryValue,
-      key: string,
-      parent: FormData
-    ) => void,
-    thisArg?: any
-  ): void {
-    this._params.forEach(callbackfn, thisArg);
-  }
-  entries(): IterableIterator<[string, FormDataEntryValue]> {
-    return this._params.entries();
-  }
-  keys(): IterableIterator<string> {
-    return this._params.keys();
-  }
-  values(): IterableIterator<FormDataEntryValue> {
-    return this._params.values();
-  }
-  *[Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]> {
-    yield* this._params;
-  }
-}

package/src/validation/validation.test.ts

@@ -1,322 +0,0 @@
-import * as yup from "yup";
-import { z } from "zod";
-import { Validator, withYup } from "..";
-import { objectFromPathEntries } from "../internal/flatten";
-import { TestFormData } from "../test-data/testFormData";
-import { withZod } from "./withZod";
-
-// If adding an adapter, write a validator that validates this shape
-type Person = {
-  firstName: string;
-  lastName: string;
-  age?: number;
-  address: {
-    streetAddress: string;
-    city: string;
-    country: string;
-  };
-  pets?: {
-    animal: string;
-    name: string;
-  }[];
-};
-
-type ValidationTestCase = {
-  name: string;
-  validator: Validator<Person>;
-};
-
-const validationTestCases: ValidationTestCase[] = [
-  {
-    name: "yup",
-    validator: withYup(
-      yup.object({
-        firstName: yup.string().required(),
-        lastName: yup.string().required(),
-        age: yup.number(),
-        address: yup
-          .object({
-            streetAddress: yup.string().required(),
-            city: yup.string().required(),
-            country: yup.string().required(),
-          })
-          .required(),
-        pets: yup.array().of(
-          yup.object({
-            animal: yup.string().required(),
-            name: yup.string().required(),
-          })
-        ),
-      })
-    ),
-  },
-  {
-    name: "zod",
-    validator: withZod(
-      z.object({
-        firstName: z.string().nonempty(),
-        lastName: z.string().nonempty(),
-        age: z.optional(z.number()),
-        address: z.preprocess(
-          (value) => (value == null ? {} : value),
-          z.object({
-            streetAddress: z.string().nonempty(),
-            city: z.string().nonempty(),
-            country: z.string().nonempty(),
-          })
-        ),
-        pets: z
-          .object({
-            animal: z.string().nonempty(),
-            name: z.string().nonempty(),
-          })
-          .array()
-          .optional(),
-      })
-    ),
-  },
-];
-
-// Not going to enforce exact error strings here
-const anyString = expect.any(String);
-
-describe("Validation", () => {
-  describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
-    describe("validate", () => {
-      it("should return the data when valid", () => {
-        const person: Person = {
-          firstName: "John",
-          lastName: "Doe",
-          age: 30,
-          address: {
-            streetAddress: "123 Main St",
-            city: "Anytown",
-            country: "USA",
-          },
-          pets: [{ animal: "dog", name: "Fido" }],
-        };
-        expect(validator.validate(person)).toEqual({
-          data: person,
-          error: undefined,
-        });
-      });
-
-      it("should return field errors when invalid", () => {
-        const obj = { age: "hi!", pets: [{ animal: "dog" }] };
-        expect(validator.validate(obj)).toEqual({
-          data: undefined,
-          error: {
-            firstName: anyString,
-            lastName: anyString,
-            age: anyString,
-            "address.city": anyString,
-            "address.country": anyString,
-            "address.streetAddress": anyString,
-            "pets[0].name": anyString,
-            _submittedData: obj,
-          },
-        });
-      });
-
-      it("should unflatten data when validating", () => {
-        const data = {
-          firstName: "John",
-          lastName: "Doe",
-          age: 30,
-          "address.streetAddress": "123 Main St",
-          "address.city": "Anytown",
-          "address.country": "USA",
-          "pets[0].animal": "dog",
-          "pets[0].name": "Fido",
-        };
-        expect(validator.validate(data)).toEqual({
-          data: {
-            firstName: "John",
-            lastName: "Doe",
-            age: 30,
-            address: {
-              streetAddress: "123 Main St",
-              city: "Anytown",
-              country: "USA",
-            },
-            pets: [{ animal: "dog", name: "Fido" }],
-          },
-          error: undefined,
-        });
-      });
-
-      it("should accept FormData directly and return errors", () => {
-        const formData = new TestFormData();
-        formData.set("firstName", "John");
-        formData.set("lastName", "Doe");
-        formData.set("address.streetAddress", "123 Main St");
-        formData.set("address.country", "USA");
-        formData.set("pets[0].animal", "dog");
-
-        expect(validator.validate(formData)).toEqual({
-          data: undefined,
-          error: {
-            "address.city": anyString,
-            "pets[0].name": anyString,
-            _submittedData: objectFromPathEntries([...formData.entries()]),
-          },
-        });
-      });
-
-      it("should accept FormData directly and return valid data", () => {
-        const formData = new TestFormData();
-        formData.set("firstName", "John");
-        formData.set("lastName", "Doe");
-        formData.set("address.streetAddress", "123 Main St");
-        formData.set("address.country", "USA");
-        formData.set("address.city", "Anytown");
-        formData.set("pets[0].animal", "dog");
-        formData.set("pets[0].name", "Fido");
-
-        expect(validator.validate(formData)).toEqual({
-          data: {
-            firstName: "John",
-            lastName: "Doe",
-            address: {
-              streetAddress: "123 Main St",
-              country: "USA",
-              city: "Anytown",
-            },
-            pets: [{ animal: "dog", name: "Fido" }],
-          },
-          error: undefined,
-        });
-      });
-    });
-
-    describe("validateField", () => {
-      it("should not return an error if field is valid", () => {
-        const person = {
-          firstName: "John",
-          lastName: {}, // invalid, but we should only be validating firstName
-        };
-        expect(validator.validateField(person, "firstName")).toEqual({
-          error: undefined,
-        });
-      });
-      it("should not return an error if a nested field is valid", () => {
-        const person = {
-          firstName: "John",
-          lastName: {}, // invalid, but we should only be validating firstName
-          address: {
-            streetAddress: "123 Main St",
-            city: "Anytown",
-            country: "USA",
-          },
-          pets: [{ animal: "dog", name: "Fido" }],
-        };
-        expect(
-          validator.validateField(person, "address.streetAddress")
-        ).toEqual({
-          error: undefined,
-        });
-        expect(validator.validateField(person, "address.city")).toEqual({
-          error: undefined,
-        });
-        expect(validator.validateField(person, "address.country")).toEqual({
-          error: undefined,
-        });
-        expect(validator.validateField(person, "pets[0].animal")).toEqual({
-          error: undefined,
-        });
-        expect(validator.validateField(person, "pets[0].name")).toEqual({
-          error: undefined,
-        });
-      });
-
-      it("should return an error if field is invalid", () => {
-        const person = {
-          firstName: "John",
-          lastName: {},
-          address: {
-            streetAddress: "123 Main St",
-            city: 1234,
-          },
-        };
-        expect(validator.validateField(person, "lastName")).toEqual({
-          error: anyString,
-        });
-      });
-
-      it("should return an error if a nested field is invalid", () => {
-        const person = {
-          firstName: "John",
-          lastName: {},
-          address: {
-            streetAddress: "123 Main St",
-            city: 1234,
-          },
-          pets: [{ animal: "dog" }],
-        };
-        expect(validator.validateField(person, "address.country")).toEqual({
-          error: anyString,
-        });
-        expect(validator.validateField(person, "pets[0].name")).toEqual({
-          error: anyString,
-        });
-      });
-    });
-  });
-});
-
-describe("withZod", () => {
-  it("returns coherent errors for complex schemas", () => {
-    const schema = z.union([
-      z.object({
-        type: z.literal("foo"),
-        foo: z.string(),
-      }),
-      z.object({
-        type: z.literal("bar"),
-        bar: z.string(),
-      }),
-    ]);
-    const obj = {
-      type: "foo",
-      bar: 123,
-      foo: 123,
-    };
-
-    expect(withZod(schema).validate(obj)).toEqual({
-      data: undefined,
-      error: {
-        type: anyString,
-        bar: anyString,
-        foo: anyString,
-        _submittedData: obj,
-      },
-    });
-  });
-
-  it("returns errors for fields that are unions", () => {
-    const schema = z.object({
-      field1: z.union([z.literal("foo"), z.literal("bar")]),
-      field2: z.union([z.literal("foo"), z.literal("bar")]),
-    });
-    const obj = {
-      field1: "a value",
-      // field2 missing
-    };
-
-    const validator = withZod(schema);
-    expect(validator.validate(obj)).toEqual({
-      data: undefined,
-      error: {
-        field1: anyString,
-        field2: anyString,
-        _submittedData: obj,
-      },
-    });
-    expect(validator.validateField(obj, "field1")).toEqual({
-      error: anyString,
-    });
-    expect(validator.validateField(obj, "field2")).toEqual({
-      error: anyString,
-    });
-  });
-});

package/src/validation/withYup.ts

@@ -1,43 +0,0 @@
-import type { AnyObjectSchema, InferType, ValidationError } from "yup";
-import { createValidator } from "./createValidator";
-import { FieldErrors, Validator } from "./types";
-
-const validationErrorToFieldErrors = (error: ValidationError): FieldErrors => {
-  const fieldErrors: FieldErrors = {};
-  error.inner.forEach((innerError) => {
-    if (!innerError.path) return;
-    fieldErrors[innerError.path] = innerError.message;
-  });
-  return fieldErrors;
-};
-
-/**
- * Create a `Validator` using a `yup` schema.
- */
-export const withYup = <Schema extends AnyObjectSchema>(
-  validationSchema: Schema
-): Validator<InferType<Schema>> => {
-  return createValidator({
-    validate: (data) => {
-      try {
-        const validated = validationSchema.validateSync(data, {
-          abortEarly: false,
-        });
-        return { data: validated, error: undefined };
-      } catch (err) {
-        return {
-          error: validationErrorToFieldErrors(err as ValidationError),
-          data: undefined,
-        };
-      }
-    },
-    validateField: (data, field) => {
-      try {
-        validationSchema.validateSyncAt(field, data);
-        return {};
-      } catch (err) {
-        return { error: (err as ValidationError).message };
-      }
-    },
-  });
-};

package/src/validation/withZod.ts

@@ -1,51 +0,0 @@
-import isEqual from "lodash/isEqual";
-import toPath from "lodash/toPath";
-import type { z } from "zod";
-import { FieldErrors, Validator } from "..";
-import { createValidator } from "./createValidator";
-
-const getIssuesForError = (err: z.ZodError<any>): z.ZodIssue[] => {
-  return err.issues.flatMap((issue) => {
-    if ("unionErrors" in issue) {
-      return issue.unionErrors.flatMap((err) => getIssuesForError(err));
-    } else {
-      return [issue];
-    }
-  });
-};
-
-function pathToString(array: (string | number)[]): string {
-  return array.reduce(function (string: string, item: string | number) {
-    var prefix = string === "" ? "" : ".";
-    return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
-  }, "");
-}
-
-/**
- * Create a validator using a `zod` schema.
- */
-export function withZod<T>(zodSchema: z.Schema<T>): Validator<T> {
-  return createValidator({
-    validate: (value) => {
-      const result = zodSchema.safeParse(value);
-      if (result.success) return { data: result.data, error: undefined };
-
-      const fieldErrors: FieldErrors = {};
-      getIssuesForError(result.error).forEach((issue) => {
-        const path = pathToString(issue.path);
-        if (!fieldErrors[path]) fieldErrors[path] = issue.message;
-      });
-      return { error: fieldErrors, data: undefined };
-    },
-    validateField: (data, field) => {
-      const result = zodSchema.safeParse(data);
-      if (result.success) return { error: undefined };
-      return {
-        error: getIssuesForError(result.error).find((issue) => {
-          const allPathsAsString = issue.path.map((p) => `${p}`);
-          return isEqual(allPathsAsString, toPath(field));
-        })?.message,
-      };
-    },
-  });
-}