remix-validated-form 0.0.3 → 1.1.1-beta.0

package/browser/validation/withZod.js

@@ -0,0 +1,47 @@
+import isEqual from "lodash/isEqual";
+import toPath from "lodash/toPath";
+import { createValidator } from "./createValidator";
+const getIssuesForError = (err) => {
+    return err.issues.flatMap((issue) => {
+        if ("unionErrors" in issue) {
+            return issue.unionErrors.flatMap((err) => getIssuesForError(err));
+        }
+        else {
+            return [issue];
+        }
+    });
+};
+function pathToString(array) {
+    return array.reduce(function (string, item) {
+        var prefix = string === "" ? "" : ".";
+        return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
+    }, "");
+}
+export function withZod(zodSchema) {
+    return createValidator({
+        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 = pathToString(issue.path);
+                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) => {
+                    const allPathsAsString = issue.path.map((p) => `${p}`);
+                    return isEqual(allPathsAsString, toPath(field));
+                })) === null || _a === void 0 ? void 0 : _a.message,
+            };
+        },
+    });
+}

package/build/ValidatedForm.js

@@ -27,7 +27,7 @@ const useIsSubmitting = (action, fetcher) => {
     return fetcher
         ? fetcher.state === "submitting"
         : pendingFormSubmit &&
-            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+            pendingFormSubmit.action === (action !== null && action !== void 0 ? action : actionForCurrentPage);
 };
 const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
 function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {

package/build/flatten.d.ts

@@ -0,0 +1,5 @@
+import { GenericObject } from ".";
+/** Unflatten a previously flatten object */
+export declare function unflatten(params: GenericObject): {};
+/** Flatten an object so there are no nested objects or arrays */
+export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/build/flatten.js

@@ -0,0 +1,49 @@
+"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.unflatten = void 0;
+// `flatten` and `unflatten` are 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 reduce_1 = __importDefault(require("lodash/reduce"));
+const set_1 = __importDefault(require("lodash/set"));
+const transform_1 = __importDefault(require("lodash/transform"));
+/** Unflatten a previously flatten object */
+function unflatten(params) {
+    return (0, reduce_1.default)(params, function (result, value, key) {
+        return (0, set_1.default)(result, key, value);
+    }, {});
+}
+exports.unflatten = unflatten;
+/** 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/build/hooks.js

@@ -1,6 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsSubmitting = exports.useFormContext = exports.useField = void 0;
+const get_1 = __importDefault(require("lodash/get"));
+const toPath_1 = __importDefault(require("lodash/toPath"));
 const react_1 = require("react");
 const formContext_1 = require("./internal/formContext");
 const useField = (name) => {
@@ -11,7 +16,9 @@ const useField = (name) => {
             clearError(name);
         },
         validate: () => validateField(name),
-        defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[name],
+        defaultValue: defaultValues
+            ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
+            : undefined,
     }), [clearError, defaultValues, fieldErrors, name, validateField]);
     return field;
 };

package/build/index.d.ts

@@ -3,3 +3,4 @@ export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/withYup";
+export * from "./validation/withZod";

package/build/index.js

@@ -15,3 +15,4 @@ __exportStar(require("./server"), exports);
 __exportStar(require("./ValidatedForm"), exports);
 __exportStar(require("./validation/types"), exports);
 __exportStar(require("./validation/withYup"), exports);
+__exportStar(require("./validation/withZod"), exports);

package/build/server.d.ts

@@ -1,2 +1,2 @@
 import { FieldErrors } from "./validation/types";
-export declare const fieldErrors: (errors: FieldErrors) => Response;
+export declare const validationError: (errors: FieldErrors) => Response;

package/build/server.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fieldErrors = void 0;
+exports.validationError = void 0;
 const server_runtime_1 = require("@remix-run/server-runtime");
-const fieldErrors = (errors) => (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
-exports.fieldErrors = fieldErrors;
+const validationError = (errors) => (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
+exports.validationError = validationError;

package/build/validation/createValidator.d.ts

@@ -0,0 +1,3 @@
+import { Validator } from "..";
+/** Handles data manipulation such us flattening the data to send to the validator */
+export declare function createValidator<T>(validator: Validator<T>): Validator<T>;

package/build/validation/createValidator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createValidator = void 0;
+const flatten_1 = require("../flatten");
+/** Handles data manipulation such us flattening the data to send to the validator */
+function createValidator(validator) {
+    return {
+        validate: (value) => validator.validate((0, flatten_1.unflatten)(value)),
+        validateField: (data, field) => validator.validateField((0, flatten_1.unflatten)(data), field),
+    };
+}
+exports.createValidator = createValidator;

package/build/validation/types.d.ts

@@ -1,4 +1,7 @@
 export declare type FieldErrors = Record<string, string>;
+export declare type GenericObject = {
+    [key: string]: any;
+};
 export declare type ValidationResult<DataType> = {
     data: DataType;
     error: undefined;
@@ -10,6 +13,6 @@ export declare type ValidateFieldResult = {
     error?: string;
 };
 export declare type Validator<DataType> = {
-    validate: (formData: unknown) => ValidationResult<DataType>;
-    validateField: (formData: unknown, field: string) => ValidateFieldResult;
+    validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
+    validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
 };

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",
@@ -28,6 +30,37 @@ const validationTestCases = [
             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: (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()),
+            address: zod_1.z.preprocess((value) => (value == null ? {} : value), zod_1.z.object({
+                streetAddress: zod_1.z.string().nonempty(),
+                city: zod_1.z.string().nonempty(),
+                country: zod_1.z.string().nonempty(),
+            })),
+            pets: zod_1.z
+                .object({
+                animal: zod_1.z.string().nonempty(),
+                name: zod_1.z.string().nonempty(),
+            })
+                .array()
+                .optional(),
         })),
     },
 ];
@@ -37,41 +70,156 @@ describe("Validation", () => {
     describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
         describe("validate", () => {
             it("should return the data when valid", () => {
-                const obj = {
+                const person = {
                     firstName: "John",
                     lastName: "Doe",
                     age: 30,
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: "Anytown",
+                        country: "USA",
+                    },
+                    pets: [{ animal: "dog", name: "Fido" }],
                 };
-                expect(validator.validate(obj)).toEqual({
-                    data: obj,
+                expect(validator.validate(person)).toEqual({
+                    data: person,
                     error: undefined,
                 });
             });
             it("should return field errors when invalid", () => {
-                const obj = { age: "hi!" };
+                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,
                     },
                 });
             });
         });
         describe("validateField", () => {
             it("should not return an error if field is valid", () => {
-                const obj = { firstName: "John", lastName: 123 };
-                expect(validator.validateField(obj, "firstName")).toEqual({
+                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: {},
+                    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 obj = { firstName: "John", lastName: {} };
-                expect(validator.validateField(obj, "lastName")).toEqual({
+                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 = 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/withYup.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withYup = void 0;
+const createValidator_1 = require("./createValidator");
 const validationErrorToFieldErrors = (error) => {
     const fieldErrors = {};
     error.inner.forEach((innerError) => {
@@ -10,29 +11,31 @@ const validationErrorToFieldErrors = (error) => {
     });
     return fieldErrors;
 };
-const withYup = (validationSchema) => ({
-    validate: (data) => {
-        try {
-            const validated = validationSchema.validateSync(data, {
-                abortEarly: false,
-            });
-            return { data: validated, error: undefined };
-        }
-        catch (err) {
-            return {
-                error: validationErrorToFieldErrors(err),
-                data: undefined,
-            };
-        }
-    },
-    validateField: (data, field) => {
-        try {
-            validationSchema.validateSyncAt(field, data);
-            return {};
-        }
-        catch (err) {
-            return { error: err.message };
-        }
-    },
-});
+const withYup = (validationSchema) => {
+    return (0, createValidator_1.createValidator)({
+        validate: (data) => {
+            try {
+                const validated = validationSchema.validateSync(data, {
+                    abortEarly: false,
+                });
+                return { data: validated, error: undefined };
+            }
+            catch (err) {
+                return {
+                    error: validationErrorToFieldErrors(err),
+                    data: undefined,
+                };
+            }
+        },
+        validateField: (data, field) => {
+            try {
+                validationSchema.validateSyncAt(field, data);
+                return {};
+            }
+            catch (err) {
+                return { error: err.message };
+            }
+        },
+    });
+};
 exports.withYup = withYup;

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,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withZod = void 0;
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const toPath_1 = __importDefault(require("lodash/toPath"));
+const createValidator_1 = require("./createValidator");
+const getIssuesForError = (err) => {
+    return err.issues.flatMap((issue) => {
+        if ("unionErrors" in issue) {
+            return issue.unionErrors.flatMap((err) => getIssuesForError(err));
+        }
+        else {
+            return [issue];
+        }
+    });
+};
+function pathToString(array) {
+    return array.reduce(function (string, item) {
+        var prefix = string === "" ? "" : ".";
+        return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
+    }, "");
+}
+function withZod(zodSchema) {
+    return (0, createValidator_1.createValidator)({
+        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 = pathToString(issue.path);
+                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) => {
+                    const allPathsAsString = issue.path.map((p) => `${p}`);
+                    return (0, isEqual_1.default)(allPathsAsString, (0, toPath_1.default)(field));
+                })) === null || _a === void 0 ? void 0 : _a.message,
+            };
+        },
+    });
+}
+exports.withZod = withZod;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "0.0.3",
+  "version": "1.1.1-beta.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -14,7 +14,10 @@
     "build:browser": "tsc --project tsconfig.json --module ESNext --outDir ./browser",
     "build:main": "tsc --project tsconfig.json --module CommonJS --outDir ./build",
     "build:tests": "tsc --project tsconfig.json --module CommonJS --outDir ./test-app/remix-validated-form",
+    "build:sample": "tsc --project tsconfig.json --module CommonJS --outDir ./sample-app/remix-validated-form",
+    "sample-app": "npm run build:sample && cd sample-app && npm run dev",
     "test": "jest src",
+    "test:watch": "jest src --watch",
     "lint": "eslint .",
     "prettier": "prettier . --write",
     "prepare": "husky install",
@@ -35,22 +38,23 @@
     "validation"
   ],
   "peerDependencies": {
-    "@remix-run/react": "^1.0.0",
-    "@remix-run/server-runtime": "^1.0.0",
+    "@remix-run/react": "^1.0.6",
+    "@remix-run/server-runtime": "^1.0.6",
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@remix-run/react": "^1.0.0",
-    "@remix-run/server-runtime": "^1.0.0",
+    "@remix-run/react": "^1.0.6",
+    "@remix-run/server-runtime": "^1.0.6",
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.36",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@types/lodash": "^4.14.178",
+    "@types/react": "^17.0.37",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-flowtype": "^5.10.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
@@ -58,15 +62,17 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "fetch-blob": "^3.1.3",
     "husky": "^7.0.4",
-    "jest": "^27.3.1",
+    "jest": "^27.4.4",
     "lint-staged": "^12.1.2",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "react": "^17.0.2",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.5.2",
-    "yup": "^0.32.11"
+    "ts-jest": "^27.1.1",
+    "typescript": "^4.5.3",
+    "yup": "^0.32.11",
+    "zod": "^3.11.6"
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "tiny-invariant": "^1.2.0"
   },
   "lint-staged": {

package/sample-app/.env

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