remix-validated-form 1.1.1 → 2.0.0-beta.2

package/browser/test-data/testFormData.js

@@ -0,0 +1,46 @@
+// Copied from remix to use in tests
+// https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
+export class TestFormData {
+    constructor(body) {
+        this._params = new URLSearchParams(body);
+    }
+    append(name, value, fileName) {
+        if (typeof value !== "string") {
+            throw new Error("formData.append can only accept a string");
+        }
+        this._params.append(name, value);
+    }
+    delete(name) {
+        this._params.delete(name);
+    }
+    get(name) {
+        return this._params.get(name);
+    }
+    getAll(name) {
+        return this._params.getAll(name);
+    }
+    has(name) {
+        return this._params.has(name);
+    }
+    set(name, value, fileName) {
+        if (typeof value !== "string") {
+            throw new Error("formData.set can only accept a string");
+        }
+        this._params.set(name, value);
+    }
+    forEach(callbackfn, thisArg) {
+        this._params.forEach(callbackfn, thisArg);
+    }
+    entries() {
+        return this._params.entries();
+    }
+    keys() {
+        return this._params.keys();
+    }
+    values() {
+        return this._params.values();
+    }
+    *[Symbol.iterator]() {
+        yield* this._params;
+    }
+}

package/browser/validation/createValidator.d.ts

@@ -0,0 +1,7 @@
+import { Validator } from "..";
+/**
+ * Used to create a validator for a form.
+ * It provides built-in handling for unflattening nested objects and
+ * extracting the values from FormData.
+ */
+export declare function createValidator<T>(validator: Validator<T>): Validator<T>;

package/browser/validation/createValidator.js

@@ -0,0 +1,30 @@
+import { objectFromPathEntries } from "../internal/flatten";
+const preprocessFormData = (data) => {
+    // A slightly janky way of determining if the data is a FormData object
+    // since node doesn't really have FormData
+    if ("entries" in data && typeof data.entries === "function")
+        return objectFromPathEntries([...data.entries()]);
+    return objectFromPathEntries(Object.entries(data));
+};
+/**
+ * Used to create a validator for a form.
+ * It provides built-in handling for unflattening nested objects and
+ * extracting the values from FormData.
+ */
+export function createValidator(validator) {
+    return {
+        validate: (value) => {
+            const data = preprocessFormData(value);
+            const result = validator.validate(data);
+            if (result.error) {
+                // Ideally, we should probably be returning a nested object like
+                // { fieldErrors: {}, submittedData: {} }
+                // We should do this in the next major version of the library
+                // but for now, we can sneak it in with the fieldErrors.
+                result.error._submittedData = data;
+            }
+            return result;
+        },
+        validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
+    };
+}

package/browser/validation/types.d.ts

@@ -1,4 +1,13 @@
 export declare type FieldErrors = Record<string, string>;
+export declare type FieldErrorsWithData = FieldErrors & {
+    _submittedData: any;
+};
+export declare type GenericObject = {
+    [key: string]: any;
+};
+/**
+ * The result when validating a form.
+ */
 export declare type ValidationResult<DataType> = {
     data: DataType;
     error: undefined;
@@ -6,10 +15,16 @@ export declare type ValidationResult<DataType> = {
     error: FieldErrors;
     data: undefined;
 };
+/**
+ * The result when validating an individual field in a form.
+ */
 export declare type ValidateFieldResult = {
     error?: string;
 };
+/**
+ * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
+ */
 export declare type Validator<DataType> = {
-    validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
-    validateField: (unvalidatedData: unknown, field: string) => ValidateFieldResult;
+    validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
+    validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
 };

package/browser/validation/validation.test.js

@@ -1,6 +1,8 @@
 import * as yup from "yup";
 import { z } from "zod";
 import { withYup } from "..";
+import { objectFromPathEntries } from "../internal/flatten";
+import { TestFormData } from "../test-data/testFormData";
 import { withZod } from "./withZod";
 const validationTestCases = [
     {
@@ -9,6 +11,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 +30,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 +51,168 @@ 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,
+                        _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 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,
                 });
             });
@@ -90,6 +242,7 @@ describe("withZod", () => {
                 type: anyString,
                 bar: anyString,
                 foo: anyString,
+                _submittedData: obj,
             },
         });
     });
@@ -108,6 +261,7 @@ describe("withZod", () => {
             error: {
                 field1: anyString,
                 field2: anyString,
+                _submittedData: obj,
             },
         });
         expect(validator.validateField(obj, "field1")).toEqual({

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,44 @@ 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>;
+    /**
+     * An optional sub-action to use for the form.
+     * Setting a value here will cause the form to be submitted with an extra `subaction` value.
+     * This can be useful when there are multiple forms on the screen handled by the same action.
+     */
+    subaction?: string;
+    /**
+     * Reset the form to the default values after the form has been successfully submitted.
+     * This is useful if you want to submit the same form multiple times,
+     * and don't redirect in-between submissions.
+     */
+    resetAfterSubmit?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }: FormProps<DataType>): JSX.Element;
+/**
+ * The primary form component of `remix-validated-form`.
+ */
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -9,36 +9,87 @@ const react_1 = require("@remix-run/react");
 const react_2 = require("react");
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const formContext_1 = require("./internal/formContext");
+const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
-function useFieldErrors(fetcher) {
+function useFieldErrorsFromBackend(fetcher, subaction) {
+    var _a, _b;
     const actionData = (0, react_1.useActionData)();
-    const dataToUse = fetcher ? fetcher.data : actionData;
-    const fieldErrorsFromAction = dataToUse === null || dataToUse === void 0 ? void 0 : dataToUse.fieldErrors;
-    const [fieldErrors, setFieldErrors] = (0, react_2.useState)(fieldErrorsFromAction !== null && fieldErrorsFromAction !== void 0 ? fieldErrorsFromAction : {});
+    if (fetcher)
+        return (_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors;
+    if (!actionData)
+        return null;
+    if (actionData.fieldErrors) {
+        const submittedData = (_b = actionData.fieldErrors) === null || _b === void 0 ? void 0 : _b._submittedData;
+        const subactionsMatch = subaction
+            ? subaction === (submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction)
+            : !(submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction);
+        return subactionsMatch ? actionData.fieldErrors : null;
+    }
+    return null;
+}
+function useFieldErrors(fieldErrorsFromBackend) {
+    const [fieldErrors, setFieldErrors] = (0, react_2.useState)(fieldErrorsFromBackend !== null && fieldErrorsFromBackend !== void 0 ? fieldErrorsFromBackend : {});
     (0, react_2.useEffect)(() => {
-        if (fieldErrorsFromAction)
-            setFieldErrors(fieldErrorsFromAction);
-    }, [fieldErrorsFromAction]);
+        if (fieldErrorsFromBackend)
+            setFieldErrors(fieldErrorsFromBackend);
+    }, [fieldErrorsFromBackend]);
     return [fieldErrors, setFieldErrors];
 }
-const useIsSubmitting = (action, fetcher) => {
+const useIsSubmitting = (action, subaction, fetcher) => {
     const actionForCurrentPage = (0, react_1.useFormAction)();
     const pendingFormSubmit = (0, react_1.useTransition)().submission;
-    return fetcher
-        ? fetcher.state === "submitting"
-        : pendingFormSubmit &&
-            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+    if (fetcher)
+        return fetcher.state === "submitting";
+    if (!pendingFormSubmit)
+        return false;
+    const { formData, action: pendingAction } = pendingFormSubmit;
+    const pendingSubAction = formData.get("subaction");
+    const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
+    if (subaction)
+        return expectedAction === pendingAction && subaction === pendingSubAction;
+    return expectedAction === pendingAction && !pendingSubAction;
 };
-const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
+const getDataFromForm = (el) => new FormData(el);
+/**
+ * The purpose for this logic is to handle validation errors when javascript is disabled.
+ * Normally (without js), when a form is submitted and the action returns the validation errors,
+ * the form will be reset. The errors will be displayed on the correct fields,
+ * but all the values in the form will be gone. This is not good UX.
+ *
+ * To get around this, we return the submitted form data from the server,
+ * and use those to populate the form via `defaultValues`.
+ * This results in a more seamless UX akin to what you would see when js is enabled.
+ *
+ * One potential downside is that resetting the form will reset the form
+ * to the _new_ default values that were returned from the server with the validation errors.
+ * However, this case is less of a problem than the janky UX caused by losing the form values.
+ * It will only ever be a problem if the form includes a `<button type="reset" />`
+ * and only if JS is disabled.
+ */
+function useDefaultValues(fieldErrors, defaultValues) {
+    const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
+    return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
+}
+/**
+ * The primary form component of `remix-validated-form`.
+ */
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
     var _a;
-    const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
-    const isSubmitting = useIsSubmitting(action, fetcher);
+    const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
+    const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
+    const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+    const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
     const formRef = (0, react_2.useRef)(null);
+    (0, submissionCallbacks_1.useSubmitComplete)(isSubmitting, () => {
+        var _a;
+        if (!fieldErrorsFromBackend) {
+            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        }
+    });
     const contextValue = (0, react_2.useMemo)(() => ({
         fieldErrors,
         action,
-        defaultValues,
+        defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
         clearError: (fieldName) => {
             setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
@@ -56,7 +107,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     }), [
         fieldErrors,
         action,
-        defaultValues,
+        defaultsToUse,
         isSubmitting,
         setFieldErrors,
         validator,
@@ -71,6 +122,11 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
             }
-        }, children: (0, jsx_runtime_1.jsx)(formContext_1.FormContext.Provider, { value: contextValue, children: children }, void 0) }, void 0));
+        }, onReset: (event) => {
+            onReset === null || onReset === void 0 ? void 0 : onReset(event);
+            if (event.defaultPrevented)
+                return;
+            setFieldErrors({});
+        }, children: (0, jsx_runtime_1.jsxs)(formContext_1.FormContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", value: subaction, name: "subaction" }, void 0), children] }, void 0) }, void 0));
 }
 exports.ValidatedForm = ValidatedForm;