remix-validated-form 1.0.0 → 1.1.0

package/.eslintcache

@@ -1 +1 @@
-[{"/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"},{"size":207,"mtime":1637876506168,"results":"7","hashOfConfig":"8"},{"size":438,"mtime":1637877226360,"results":"9","hashOfConfig":"8"},{"size":1085,"mtime":1637877476573,"results":"10","hashOfConfig":"8"},{"size":1293,"mtime":1637876566355,"results":"11","hashOfConfig":"8"},{"size":1330,"mtime":1637902697212,"results":"12","hashOfConfig":"8"},{"size":2220,"mtime":1637902736281,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"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},"/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",["26"],"/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",["27"],"/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts",[],{"ruleId":"28","severity":1,"message":"29","line":2,"column":23,"nodeType":"30","messageId":"31","endLine":2,"endColumn":39},{"ruleId":"28","severity":1,"message":"32","line":1,"column":26,"nodeType":"30","messageId":"31","endLine":1,"endColumn":39},"@typescript-eslint/no-unused-vars","'ValidationResult' is defined but never used.","Identifier","unusedVar","'useActionData' is defined but never used."]
+[{"/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/README.md

@@ -129,7 +129,7 @@ export default function MyForm() {
 
 # Validation Library Support
 
-This library currently includes an out-of-the-box adapter for `yup`,
+This library currently includes an out-of-the-box adapter for `yup` and `zod`,
 but you can easily support whatever library you want by creating your own adapter.
 
 And if you create an adapter for a library, feel free to make a PR on this library to add official support 😊

package/browser/validation/validation.test.js

@@ -1,5 +1,7 @@
 import * as yup from "yup";
+import { z } from "zod";
 import { withYup } from "..";
+import { withZod } from "./withZod";
 const validationTestCases = [
     {
         name: "yup",
@@ -9,6 +11,14 @@ const validationTestCases = [
             age: yup.number(),
         })),
     },
+    {
+        name: "zod",
+        validator: withZod(z.object({
+            firstName: z.string().nonempty(),
+            lastName: z.string().nonempty(),
+            age: z.optional(z.number()),
+        })),
+    },
 ];
 // Not going to enforce exact error strings here
 const anyString = expect.any(String);
@@ -40,7 +50,10 @@ describe("Validation", () => {
         });
         describe("validateField", () => {
             it("should not return an error if field is valid", () => {
-                const obj = { firstName: "John", lastName: 123 };
+                const obj = {
+                    firstName: "John",
+                    lastName: {}, // invalid, but we should only be validating firstName
+                };
                 expect(validator.validateField(obj, "firstName")).toEqual({
                     error: undefined,
                 });
@@ -54,3 +67,54 @@ describe("Validation", () => {
         });
     });
 });
+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/browser/validation/withZod.d.ts

@@ -0,0 +1,3 @@
+import type { z } from "zod";
+import { Validator } from "..";
+export declare function withZod<T>(zodSchema: z.Schema<T>): Validator<T>;

package/browser/validation/withZod.js

@@ -0,0 +1,35 @@
+const getIssuesForError = (err) => {
+    return err.issues.flatMap((issue) => {
+        if ("unionErrors" in issue) {
+            return issue.unionErrors.flatMap((err) => getIssuesForError(err));
+        }
+        else {
+            return [issue];
+        }
+    });
+};
+export function withZod(zodSchema) {
+    return {
+        validate: (value) => {
+            const result = zodSchema.safeParse(value);
+            if (result.success)
+                return { data: result.data, error: undefined };
+            const fieldErrors = {};
+            getIssuesForError(result.error).forEach((issue) => {
+                const path = issue.path.join(".");
+                if (!fieldErrors[path])
+                    fieldErrors[path] = issue.message;
+            });
+            return { error: fieldErrors, data: undefined };
+        },
+        validateField: (data, field) => {
+            var _a;
+            const result = zodSchema.safeParse(data);
+            if (result.success)
+                return { error: undefined };
+            return {
+                error: (_a = getIssuesForError(result.error).find((issue) => issue.path.join(".") === field)) === null || _a === void 0 ? void 0 : _a.message,
+            };
+        },
+    };
+}

package/build/validation/validation.test.js

@@ -20,7 +20,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const yup = __importStar(require("yup"));
+const zod_1 = require("zod");
 const __1 = require("..");
+const withZod_1 = require("./withZod");
 const validationTestCases = [
     {
         name: "yup",
@@ -30,6 +32,14 @@ const validationTestCases = [
             age: yup.number(),
         })),
     },
+    {
+        name: "zod",
+        validator: (0, withZod_1.withZod)(zod_1.z.object({
+            firstName: zod_1.z.string().nonempty(),
+            lastName: zod_1.z.string().nonempty(),
+            age: zod_1.z.optional(zod_1.z.number()),
+        })),
+    },
 ];
 // Not going to enforce exact error strings here
 const anyString = expect.any(String);
@@ -61,7 +71,10 @@ describe("Validation", () => {
         });
         describe("validateField", () => {
             it("should not return an error if field is valid", () => {
-                const obj = { firstName: "John", lastName: 123 };
+                const obj = {
+                    firstName: "John",
+                    lastName: {}, // invalid, but we should only be validating firstName
+                };
                 expect(validator.validateField(obj, "firstName")).toEqual({
                     error: undefined,
                 });
@@ -75,3 +88,54 @@ describe("Validation", () => {
         });
     });
 });
+describe("withZod", () => {
+    it("returns coherent errors for complex schemas", () => {
+        const schema = zod_1.z.union([
+            zod_1.z.object({
+                type: zod_1.z.literal("foo"),
+                foo: zod_1.z.string(),
+            }),
+            zod_1.z.object({
+                type: zod_1.z.literal("bar"),
+                bar: zod_1.z.string(),
+            }),
+        ]);
+        const obj = {
+            type: "foo",
+            bar: 123,
+            foo: 123,
+        };
+        expect((0, withZod_1.withZod)(schema).validate(obj)).toEqual({
+            data: undefined,
+            error: {
+                type: anyString,
+                bar: anyString,
+                foo: anyString,
+            },
+        });
+    });
+    it("returns errors for fields that are unions", () => {
+        const schema = zod_1.z.object({
+            field1: zod_1.z.union([zod_1.z.literal("foo"), zod_1.z.literal("bar")]),
+            field2: zod_1.z.union([zod_1.z.literal("foo"), zod_1.z.literal("bar")]),
+        });
+        const obj = {
+            field1: "a value",
+            // field2 missing
+        };
+        const validator = (0, withZod_1.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/build/validation/withZod.d.ts

@@ -0,0 +1,3 @@
+import type { z } from "zod";
+import { Validator } from "..";
+export declare function withZod<T>(zodSchema: z.Schema<T>): Validator<T>;

package/build/validation/withZod.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withZod = void 0;
+const getIssuesForError = (err) => {
+    return err.issues.flatMap((issue) => {
+        if ("unionErrors" in issue) {
+            return issue.unionErrors.flatMap((err) => getIssuesForError(err));
+        }
+        else {
+            return [issue];
+        }
+    });
+};
+function withZod(zodSchema) {
+    return {
+        validate: (value) => {
+            const result = zodSchema.safeParse(value);
+            if (result.success)
+                return { data: result.data, error: undefined };
+            const fieldErrors = {};
+            getIssuesForError(result.error).forEach((issue) => {
+                const path = issue.path.join(".");
+                if (!fieldErrors[path])
+                    fieldErrors[path] = issue.message;
+            });
+            return { error: fieldErrors, data: undefined };
+        },
+        validateField: (data, field) => {
+            var _a;
+            const result = zodSchema.safeParse(data);
+            if (result.success)
+                return { error: undefined };
+            return {
+                error: (_a = getIssuesForError(result.error).find((issue) => issue.path.join(".") === field)) === null || _a === void 0 ? void 0 : _a.message,
+            };
+        },
+    };
+}
+exports.withZod = withZod;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -64,7 +64,8 @@
     "react": "^17.0.2",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.2",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "zod": "^3.11.6"
   },
   "dependencies": {
     "tiny-invariant": "^1.2.0"