remix-validated-form 2.0.0 → 2.1.1

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/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.

package/browser/flatten.d.ts

@@ -1,4 +0,0 @@
-import { GenericObject } from ".";
-export declare const objectFromPathEntries: (entries: [string, any][]) => {};
-/** Flatten an object so there are no nested objects or arrays */
-export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/browser/flatten.js

@@ -1,35 +0,0 @@
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-import assign from "lodash/assign";
-import isArray from "lodash/isArray";
-import isObject from "lodash/isObject";
-import keys from "lodash/keys";
-import mapKeys from "lodash/mapKeys";
-import set from "lodash/set";
-import transform from "lodash/transform";
-export const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => set(acc, key, value), {});
-/** Flatten an object so there are no nested objects or arrays */
-export function flatten(obj, preserveEmpty = false) {
-    return transform(obj, function (result, value, key) {
-        if (isObject(value)) {
-            let flatMap = mapKeys(flatten(value, preserveEmpty), function (_mvalue, mkey) {
-                if (isArray(value)) {
-                    let index = mkey.indexOf(".");
-                    if (-1 !== index) {
-                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-                    }
-                    return `${key}[${mkey}]`;
-                }
-                return `${key}.${mkey}`;
-            });
-            assign(result, flatMap);
-            // Preverve Empty arrays and objects
-            if (preserveEmpty && keys(flatMap).length === 0) {
-                result[key] = value;
-            }
-        }
-        else {
-            result[key] = value;
-        }
-        return result;
-    }, {});
-}

package/build/flatten.d.ts

@@ -1,4 +0,0 @@
-import { GenericObject } from ".";
-export declare const objectFromPathEntries: (entries: [string, any][]) => {};
-/** Flatten an object so there are no nested objects or arrays */
-export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/build/flatten.js

@@ -1,43 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.flatten = exports.objectFromPathEntries = void 0;
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-const assign_1 = __importDefault(require("lodash/assign"));
-const isArray_1 = __importDefault(require("lodash/isArray"));
-const isObject_1 = __importDefault(require("lodash/isObject"));
-const keys_1 = __importDefault(require("lodash/keys"));
-const mapKeys_1 = __importDefault(require("lodash/mapKeys"));
-const set_1 = __importDefault(require("lodash/set"));
-const transform_1 = __importDefault(require("lodash/transform"));
-const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => (0, set_1.default)(acc, key, value), {});
-exports.objectFromPathEntries = objectFromPathEntries;
-/** Flatten an object so there are no nested objects or arrays */
-function flatten(obj, preserveEmpty = false) {
-    return (0, transform_1.default)(obj, function (result, value, key) {
-        if ((0, isObject_1.default)(value)) {
-            let flatMap = (0, mapKeys_1.default)(flatten(value, preserveEmpty), function (_mvalue, mkey) {
-                if ((0, isArray_1.default)(value)) {
-                    let index = mkey.indexOf(".");
-                    if (-1 !== index) {
-                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-                    }
-                    return `${key}[${mkey}]`;
-                }
-                return `${key}.${mkey}`;
-            });
-            (0, assign_1.default)(result, flatMap);
-            // Preverve Empty arrays and objects
-            if (preserveEmpty && (0, keys_1.default)(flatMap).length === 0) {
-                result[key] = value;
-            }
-        }
-        else {
-            result[key] = value;
-        }
-        return result;
-    }, {});
-}
-exports.flatten = flatten;

package/sample-app/.env

@@ -1,7 +0,0 @@
-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server and MongoDB (Preview).
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-DATABASE_URL="file:./dev.db"

package/sample-app/README.md

@@ -1,53 +0,0 @@
-# Welcome to Remix!
-
-- [Remix Docs](https://remix.run/docs)
-
-## Development
-
-From your terminal:
-
-```sh
-npm run dev
-```
-
-This starts your app in development mode, rebuilding assets on file changes.
-
-## Deployment
-
-First, build your app for production:
-
-```sh
-npm run build
-```
-
-Then run the app in production mode:
-
-```sh
-npm start
-```
-
-Now you'll need to pick a host to deploy it to.
-
-### DIY
-
-If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
-
-Make sure to deploy the output of `remix build`
-
-- `build/`
-- `public/build/`
-
-### Using a Template
-
-When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
-
-```sh
-cd ..
-# create a new project, and pick a pre-configured host
-npx create-remix@latest
-cd my-new-remix-app
-# remove the new project's app (not the old one!)
-rm -rf app
-# copy your app over
-cp -R ../my-old-remix-app/app app
-```

package/sample-app/app/components/ErrorBox.tsx

@@ -1,34 +0,0 @@
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-} from "@chakra-ui/react";
-
-type ErrorProps = {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-};
-export function ErrorBox({ title, description }: ErrorProps) {
-  return (
-    <Alert
-      status="error"
-      variant="subtle"
-      flexDirection="column"
-      alignItems="center"
-      justifyContent="center"
-      textAlign="center"
-      height="200px"
-    >
-      <AlertIcon boxSize="40px" mr={0} />
-      {title && (
-        <AlertTitle mt={4} mb={1} fontSize="lg">
-          {title}
-        </AlertTitle>
-      )}
-      {description && (
-        <AlertDescription maxWidth="sm">{description}</AlertDescription>
-      )}
-    </Alert>
-  );
-}