remix-validated-form 2.0.0 → 2.0.1-beta.0

package/src/validation/types.ts

@@ -0,0 +1,26 @@
+export type FieldErrors = Record<string, string>;
+
+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,317 @@
+import * as yup from "yup";
+import { z } from "zod";
+import { Validator, withYup } from "..";
+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,
+          },
+        });
+      });
+
+      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,
+          },
+        });
+      });
+
+      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,
+      },
+    });
+  });
+
+  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,
+      },
+    });
+    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/index.ts":"1"},{"size":306,"mtime":1639405886301,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1p84lfm","/Users/aaronpettengill/dev/remix-validated-form/src/index.ts",[]]

package/.eslintignore

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

package/.prettierignore

@@ -1,10 +0,0 @@
-.cache
-build
-browser
-test-app/build
-test-app/remix-validated-form
-sample-app/build
-sample-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.