remix-validated-form 1.1.1 → 2.0.0

package/browser/validation/validation.test.js

@@ -1,6 +1,7 @@
 import * as yup from "yup";
 import { z } from "zod";
 import { withYup } from "..";
+import { TestFormData } from "../test-data/testFormData";
 import { withZod } from "./withZod";
 const validationTestCases = [
     {
@@ -9,6 +10,17 @@ 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(),
+            })),
         })),
     },
     {
@@ -17,6 +29,18 @@ const validationTestCases = [
             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(),
         })),
     },
 ];
@@ -26,41 +50,166 @@ 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,
+                    },
+                });
+            });
+            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 obj = {
+                const person = {
                     firstName: "John",
                     lastName: {}, // invalid, but we should only be validating firstName
                 };
-                expect(validator.validateField(obj, "firstName")).toEqual({
+                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,
                 });
             });

package/browser/validation/withYup.d.ts

@@ -1,3 +1,6 @@
 import type { AnyObjectSchema, InferType } from "yup";
 import { Validator } from "./types";
+/**
+ * Create a `Validator` using a `yup` schema.
+ */
 export declare const withYup: <Schema extends AnyObjectSchema>(validationSchema: Schema) => Validator<InferType<Schema>>;

package/browser/validation/withYup.js

@@ -1,3 +1,4 @@
+import { createValidator } from "./createValidator";
 const validationErrorToFieldErrors = (error) => {
     const fieldErrors = {};
     error.inner.forEach((innerError) => {
@@ -7,28 +8,33 @@ const validationErrorToFieldErrors = (error) => {
     });
     return fieldErrors;
 };
-export 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 };
-        }
-    },
-});
+/**
+ * Create a `Validator` using a `yup` schema.
+ */
+export const withYup = (validationSchema) => {
+    return 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 };
+            }
+        },
+    });
+};

package/browser/validation/withZod.d.ts

@@ -1,3 +1,6 @@
 import type { z } from "zod";
 import { Validator } from "..";
+/**
+ * Create a validator using a `zod` schema.
+ */
 export declare function withZod<T>(zodSchema: z.Schema<T>): Validator<T>;

package/browser/validation/withZod.js

@@ -1,3 +1,6 @@
+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) {
@@ -8,15 +11,24 @@ const getIssuesForError = (err) => {
         }
     });
 };
+function pathToString(array) {
+    return array.reduce(function (string, item) {
+        var prefix = string === "" ? "" : ".";
+        return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
+    }, "");
+}
+/**
+ * Create a validator using a `zod` schema.
+ */
 export function withZod(zodSchema) {
-    return {
+    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 = issue.path.join(".");
+                const path = pathToString(issue.path);
                 if (!fieldErrors[path])
                     fieldErrors[path] = issue.message;
             });
@@ -28,8 +40,11 @@ export function withZod(zodSchema) {
             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,
+                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.d.ts

@@ -2,10 +2,32 @@ import { Form as RemixForm, useFetcher } from "@remix-run/react";
 import React, { ComponentProps } from "react";
 import { Validator } from "./validation/types";
 export declare type FormProps<DataType> = {
+    /**
+     * A `Validator` object that describes how to validate the form.
+     */
     validator: Validator<DataType>;
+    /**
+     * A submit callback that gets called when the form is submitted
+     * after all validations have been run.
+     */
     onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void;
+    /**
+     * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
+     * The form will use the fetcher for loading states, action data, etc
+     * instead of the default form action.
+     */
     fetcher?: ReturnType<typeof useFetcher>;
+    /**
+     * Accepts an object of default values for the form
+     * that will automatically be propagated to the form fields via `useField`.
+     */
     defaultValues?: Partial<DataType>;
+    /**
+     * A ref to the form element.
+     */
     formRef?: React.RefObject<HTMLFormElement>;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
+/**
+ * The primary form component of `remix-validated-form`.
+ */
 export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -27,9 +27,12 @@ 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));
+const getDataFromForm = (el) => new FormData(el);
+/**
+ * The primary form component of `remix-validated-form`.
+ */
 function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
     var _a;
     const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);

package/build/flatten.d.ts

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

@@ -0,0 +1,43 @@
+"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/build/hooks.d.ts

@@ -1,8 +1,33 @@
-export declare const useField: (name: string) => {
-    error: string;
+export declare type FieldProps = {
+    /**
+     * The validation error message if there is one.
+     */
+    error?: string;
+    /**
+     * Clears the error message.
+     */
     clearError: () => void;
+    /**
+     * Validates the field.
+     */
     validate: () => void;
-    defaultValue: any;
+    /**
+     * The default value of the field, if there is one.
+     */
+    defaultValue?: any;
 };
+/**
+ * Provides the data and helpers necessary to set up a field.
+ */
+export declare const useField: (name: string) => FieldProps;
+/**
+ * Provides access to the entire form context.
+ * This is not usually necessary, but can be useful for advanced use cases.
+ */
 export declare const useFormContext: () => import("./internal/formContext").FormContextValue;
+/**
+ * Returns whether or not the parent form is currently being submitted.
+ * This is different from remix's `useTransition().submission` in that it
+ * is aware of what form it's in and when _that_ form is being submitted.
+ */
 export declare const useIsSubmitting: () => boolean;

package/build/hooks.js

@@ -1,8 +1,16 @@
 "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");
+/**
+ * Provides the data and helpers necessary to set up a field.
+ */
 const useField = (name) => {
     const { fieldErrors, clearError, validateField, defaultValues } = (0, react_1.useContext)(formContext_1.FormContext);
     const field = (0, react_1.useMemo)(() => ({
@@ -11,13 +19,23 @@ 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;
 };
 exports.useField = useField;
-// test commit
+/**
+ * Provides access to the entire form context.
+ * This is not usually necessary, but can be useful for advanced use cases.
+ */
 const useFormContext = () => (0, react_1.useContext)(formContext_1.FormContext);
 exports.useFormContext = useFormContext;
+/**
+ * Returns whether or not the parent form is currently being submitted.
+ * This is different from remix's `useTransition().submission` in that it
+ * is aware of what form it's in and when _that_ form is being submitted.
+ */
 const useIsSubmitting = () => (0, exports.useFormContext)().isSubmitting;
 exports.useIsSubmitting = useIsSubmitting;

package/build/index.d.ts

@@ -4,3 +4,5 @@ export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/withYup";
 export * from "./validation/withZod";
+export * from "./validation/createValidator";
+export type { FormContextValue } from "./internal/formContext";

package/build/index.js

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

package/build/internal/flatten.d.ts

@@ -0,0 +1,4 @@
+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/internal/flatten.js

@@ -0,0 +1,43 @@
+"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/build/internal/formContext.d.ts

@@ -1,11 +1,29 @@
 /// <reference types="react" />
 import { FieldErrors } from "../validation/types";
 export declare type FormContextValue = {
+    /**
+     * All the errors in all the fields in the form.
+     */
     fieldErrors: FieldErrors;
+    /**
+     * Clear the errors of the specified fields.
+     */
     clearError: (...names: string[]) => void;
+    /**
+     * Validate the specified field.
+     */
     validateField: (fieldName: string) => void;
+    /**
+     * The `action` prop of the form.
+     */
     action?: string;
+    /**
+     * Whether or not the form is submitting.
+     */
     isSubmitting: boolean;
+    /**
+     * The default values of the form.
+     */
     defaultValues?: {
         [fieldName: string]: any;
     };

package/build/server.d.ts

@@ -1,2 +1,7 @@
 import { FieldErrors } from "./validation/types";
+/**
+ * Takes the errors from a `Validator` and returns a `Response`.
+ * The `ValidatedForm` on the frontend will automatically display the errors
+ * if this is returned from the action.
+ */
 export declare const validationError: (errors: FieldErrors) => Response;

package/build/server.js

@@ -2,5 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validationError = void 0;
 const server_runtime_1 = require("@remix-run/server-runtime");
+/**
+ * Takes the errors from a `Validator` and returns a `Response`.
+ * The `ValidatedForm` on the frontend will automatically display the errors
+ * if this is returned from the action.
+ */
 const validationError = (errors) => (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
 exports.validationError = validationError;

package/build/test-data/testFormData.d.ts

@@ -0,0 +1,15 @@
+export declare class TestFormData implements FormData {
+    private _params;
+    constructor(body?: string);
+    append(name: string, value: string | Blob, fileName?: string): void;
+    delete(name: string): void;
+    get(name: string): FormDataEntryValue | null;
+    getAll(name: string): FormDataEntryValue[];
+    has(name: string): boolean;
+    set(name: string, value: string | Blob, fileName?: string): void;
+    forEach(callbackfn: (value: FormDataEntryValue, key: string, parent: FormData) => void, thisArg?: any): void;
+    entries(): IterableIterator<[string, FormDataEntryValue]>;
+    keys(): IterableIterator<string>;
+    values(): IterableIterator<FormDataEntryValue>;
+    [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]>;
+}