remix-validated-form 1.1.0 → 2.0.0-beta.2

package/src/test-data/testFormData.ts

@@ -0,0 +1,55 @@
+// 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/createValidator.ts

@@ -0,0 +1,34 @@
+import { GenericObject, Validator } from "..";
+import { objectFromPathEntries } from "../internal/flatten";
+
+const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
+  // A slightly janky way of determining if the data is a FormData object
+  // since node doesn't really have FormData
+  if ("entries" in data && typeof data.entries === "function")
+    return objectFromPathEntries([...data.entries()]);
+  return objectFromPathEntries(Object.entries(data));
+};
+
+/**
+ * Used to create a validator for a form.
+ * It provides built-in handling for unflattening nested objects and
+ * extracting the values from FormData.
+ */
+export function createValidator<T>(validator: Validator<T>): Validator<T> {
+  return {
+    validate: (value: GenericObject | FormData) => {
+      const data = preprocessFormData(value);
+      const result = validator.validate(data);
+      if (result.error) {
+        // Ideally, we should probably be returning a nested object like
+        // { fieldErrors: {}, submittedData: {} }
+        // We should do this in the next major version of the library
+        // but for now, we can sneak it in with the fieldErrors.
+        result.error._submittedData = data as any;
+      }
+      return result;
+    },
+    validateField: (data: GenericObject | FormData, field: string) =>
+      validator.validateField(preprocessFormData(data), field),
+  };
+}

package/src/validation/types.ts

@@ -0,0 +1,28 @@
+export type FieldErrors = Record<string, string>;
+
+export type FieldErrorsWithData = FieldErrors & { _submittedData: any };
+
+export type GenericObject = { [key: string]: any };
+
+/**
+ * The result when validating a form.
+ */
+export type ValidationResult<DataType> =
+  | { data: DataType; error: undefined }
+  | { error: FieldErrors; data: undefined };
+
+/**
+ * The result when validating an individual field in a form.
+ */
+export type ValidateFieldResult = { error?: string };
+
+/**
+ * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
+ */
+export type Validator<DataType> = {
+  validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
+  validateField: (
+    unvalidatedData: GenericObject,
+    field: string
+  ) => ValidateFieldResult;
+};

package/src/validation/validation.test.ts

@@ -0,0 +1,322 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,51 @@
+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,
+      };
+    },
+  });
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/.eslintcache

@@ -1 +0,0 @@
-[{"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts":"1","/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts":"2","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts":"3","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx":"4","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx":"5","/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts":"6","/Users/aaronpettengill/dev/remix-validated-form/src/validation/validation.test.ts":"7","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withZod.ts":"8"},{"size":207,"mtime":1637876506168,"results":"9","hashOfConfig":"10"},{"size":438,"mtime":1637877226360,"results":"11","hashOfConfig":"10"},{"size":1085,"mtime":1637877476573,"results":"12","hashOfConfig":"10"},{"size":1293,"mtime":1637876566355,"results":"13","hashOfConfig":"10"},{"size":1330,"mtime":1637902697212,"results":"14","hashOfConfig":"10"},{"size":2220,"mtime":1637902736281,"results":"15","hashOfConfig":"10"},{"size":3526,"mtime":1638155421909,"results":"16","hashOfConfig":"10"},{"size":1168,"mtime":1638155747107,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts",["34"],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx",["35"],"/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/validation.test.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withZod.ts",[],{"ruleId":"36","severity":1,"message":"37","line":2,"column":23,"nodeType":"38","messageId":"39","endLine":2,"endColumn":39},{"ruleId":"36","severity":1,"message":"40","line":1,"column":26,"nodeType":"38","messageId":"39","endLine":1,"endColumn":39},"@typescript-eslint/no-unused-vars","'ValidationResult' is defined but never used.","Identifier","unusedVar","'useActionData' is defined but never used."]

package/.eslintignore

@@ -1 +0,0 @@
-./package-lock.json

package/.prettierignore

@@ -1,8 +0,0 @@
-.cache
-build
-browser
-test-app/build
-test-app/remix-validated-form
-node_modules
-public
-package-lock.json

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Aaron Pettengill
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.