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

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]>;
+}

package/build/test-data/testFormData.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestFormData = void 0;
+// Copied from remix to use in tests
+// https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
+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;
+    }
+}
+exports.TestFormData = TestFormData;

package/build/validation/createValidator.d.ts

@@ -1,3 +1,7 @@
 import { Validator } from "..";
-/** Handles data manipulation such us flattening the data to send to the validator */
+/**
+ * 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/build/validation/createValidator.js

@@ -1,12 +1,23 @@
 "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 */
+const flatten_1 = require("../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 (0, flatten_1.objectFromPathEntries)([...data.entries()]);
+    return (0, flatten_1.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.
+ */
 function createValidator(validator) {
     return {
-        validate: (value) => validator.validate((0, flatten_1.unflatten)(value)),
-        validateField: (data, field) => validator.validateField((0, flatten_1.unflatten)(data), field),
+        validate: (value) => validator.validate(preprocessFormData(value)),
+        validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
     };
 }
 exports.createValidator = createValidator;

package/build/validation/types.d.ts

@@ -2,6 +2,9 @@ export declare type FieldErrors = Record<string, string>;
 export declare type GenericObject = {
     [key: string]: any;
 };
+/**
+ * The result when validating a form.
+ */
 export declare type ValidationResult<DataType> = {
     data: DataType;
     error: undefined;
@@ -9,9 +12,15 @@ 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: GenericObject) => ValidationResult<DataType>;
     validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;

package/build/validation/validation.test.js

@@ -22,6 +22,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const yup = __importStar(require("yup"));
 const zod_1 = require("zod");
 const __1 = require("..");
+const testFormData_1 = require("../test-data/testFormData");
 const withZod_1 = require("./withZod");
 const validationTestCases = [
     {
@@ -101,6 +102,70 @@ describe("Validation", () => {
                     },
                 });
             });
+            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_1.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_1.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", () => {

package/build/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/build/validation/withYup.js

@@ -11,6 +11,9 @@ const validationErrorToFieldErrors = (error) => {
     });
     return fieldErrors;
 };
+/**
+ * Create a `Validator` using a `yup` schema.
+ */
 const withYup = (validationSchema) => {
     return (0, createValidator_1.createValidator)({
         validate: (data) => {

package/build/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/build/validation/withZod.js

@@ -23,6 +23,9 @@ function pathToString(array) {
         return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
     }, "");
 }
+/**
+ * Create a validator using a `zod` schema.
+ */
 function withZod(zodSchema) {
     return (0, createValidator_1.createValidator)({
         validate: (value) => {

package/jest.config.js

@@ -1,5 +1,10 @@
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
+  globals: {
+    "ts-jest": {
+      tsconfig: "tsconfig.json",
+    },
+  },
   preset: "ts-jest",
   testEnvironment: "node",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "1.1.1-beta.0",
+  "version": "2.0.1-beta.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -10,17 +10,12 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "npm run build:browser && npm run build:main && npm run build:tests",
-    "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",
+    "dev": "tsc --module ESNext --outDir ./browser --watch",
+    "build": "npm run build:browser && npm run build:main",
+    "build:browser": "tsc --module ESNext --outDir ./browser",
+    "build:main": "tsc --module CommonJS --outDir ./build",
     "test": "jest src",
     "test:watch": "jest src --watch",
-    "lint": "eslint .",
-    "prettier": "prettier . --write",
-    "prepare": "husky install",
     "prepublishOnly": "npm run build:browser && npm run build:main"
   },
   "author": {
@@ -48,25 +43,10 @@
     "@types/jest": "^27.0.3",
     "@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": "^8.0.3",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
     "fetch-blob": "^3.1.3",
-    "husky": "^7.0.4",
-    "jest": "^27.4.4",
-    "lint-staged": "^12.1.2",
-    "prettier": "^2.5.1",
     "react": "^17.0.2",
     "ts-jest": "^27.1.1",
+    "tsconfig": "*",
     "typescript": "^4.5.3",
     "yup": "^0.32.11",
     "zod": "^3.11.6"
@@ -75,10 +55,5 @@
     "lodash": "^4.17.21",
     "tiny-invariant": "^1.2.0"
   },
-  "lint-staged": {
-    "**/*.{ts,tsx,js,jsx}": [
-      "prettier --write",
-      "eslint --cache --fix"
-    ]
-  }
+  "gitHead": "dab8f221d7c0c5131504215f5c19e3ecdfef97fb"
 }

package/src/ValidatedForm.tsx

@@ -0,0 +1,151 @@
+import {
+  Form as RemixForm,
+  useActionData,
+  useFetcher,
+  useFormAction,
+  useTransition,
+} from "@remix-run/react";
+import React, {
+  ComponentProps,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import invariant from "tiny-invariant";
+import { FormContext, FormContextValue } from "./internal/formContext";
+import { omit, mergeRefs } from "./internal/util";
+import { FieldErrors, Validator } from "./validation/types";
+
+export 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">;
+
+function useFieldErrors(
+  fetcher?: ReturnType<typeof useFetcher>
+): [FieldErrors, React.Dispatch<React.SetStateAction<FieldErrors>>] {
+  const actionData = useActionData<any>();
+  const dataToUse = fetcher ? fetcher.data : actionData;
+  const fieldErrorsFromAction = dataToUse?.fieldErrors;
+
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>(
+    fieldErrorsFromAction ?? {}
+  );
+  useEffect(() => {
+    if (fieldErrorsFromAction) setFieldErrors(fieldErrorsFromAction);
+  }, [fieldErrorsFromAction]);
+
+  return [fieldErrors, setFieldErrors];
+}
+
+const useIsSubmitting = (
+  action?: string,
+  fetcher?: ReturnType<typeof useFetcher>
+) => {
+  const actionForCurrentPage = useFormAction();
+  const pendingFormSubmit = useTransition().submission;
+  return fetcher
+    ? fetcher.state === "submitting"
+    : pendingFormSubmit &&
+        pendingFormSubmit.action === (action ?? actionForCurrentPage);
+};
+
+const getDataFromForm = (el: HTMLFormElement) => new FormData(el);
+
+/**
+ * The primary form component of `remix-validated-form`.
+ */
+export function ValidatedForm<DataType>({
+  validator,
+  onSubmit,
+  children,
+  fetcher,
+  action,
+  defaultValues,
+  formRef: formRefProp,
+  ...rest
+}: FormProps<DataType>) {
+  const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
+  const isSubmitting = useIsSubmitting(action, fetcher);
+
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const contextValue = useMemo<FormContextValue>(
+    () => ({
+      fieldErrors,
+      action,
+      defaultValues,
+      isSubmitting: isSubmitting ?? false,
+      clearError: (fieldName) => {
+        setFieldErrors((prev) => omit(prev, fieldName));
+      },
+      validateField: (fieldName) => {
+        invariant(formRef.current, "Cannot find reference to form");
+        const { error } = validator.validateField(
+          getDataFromForm(formRef.current),
+          fieldName as any
+        );
+        if (error) {
+          setFieldErrors((prev) => ({
+            ...prev,
+            [fieldName]: error,
+          }));
+        }
+      },
+    }),
+    [
+      fieldErrors,
+      action,
+      defaultValues,
+      isSubmitting,
+      setFieldErrors,
+      validator,
+    ]
+  );
+
+  const Form = fetcher?.Form ?? RemixForm;
+
+  return (
+    <Form
+      ref={mergeRefs([formRef, formRefProp])}
+      {...rest}
+      action={action}
+      onSubmit={(event) => {
+        const result = validator.validate(getDataFromForm(event.currentTarget));
+        if (result.error) {
+          event.preventDefault();
+          setFieldErrors(result.error);
+        } else {
+          onSubmit?.(result.data, event);
+        }
+      }}
+    >
+      <FormContext.Provider value={contextValue}>
+        {children}
+      </FormContext.Provider>
+    </Form>
+  );
+}

package/src/hooks.ts

@@ -0,0 +1,60 @@
+import get from "lodash/get";
+import toPath from "lodash/toPath";
+import { useContext, useMemo } from "react";
+import { FormContext } from "./internal/formContext";
+
+export type FieldProps = {
+  /**
+   * The validation error message if there is one.
+   */
+  error?: string;
+  /**
+   * Clears the error message.
+   */
+  clearError: () => void;
+  /**
+   * Validates the field.
+   */
+  validate: () => void;
+  /**
+   * The default value of the field, if there is one.
+   */
+  defaultValue?: any;
+};
+
+/**
+ * Provides the data and helpers necessary to set up a field.
+ */
+export const useField = (name: string): FieldProps => {
+  const { fieldErrors, clearError, validateField, defaultValues } =
+    useContext(FormContext);
+
+  const field = useMemo<FieldProps>(
+    () => ({
+      error: fieldErrors[name],
+      clearError: () => {
+        clearError(name);
+      },
+      validate: () => validateField(name),
+      defaultValue: defaultValues
+        ? get(defaultValues, toPath(name), undefined)
+        : undefined,
+    }),
+    [clearError, defaultValues, fieldErrors, name, validateField]
+  );
+
+  return field;
+};
+
+/**
+ * Provides access to the entire form context.
+ * This is not usually necessary, but can be useful for advanced use cases.
+ */
+export const useFormContext = () => useContext(FormContext);
+
+/**
+ * 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 const useIsSubmitting = () => useFormContext().isSubmitting;

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./hooks";
+export * from "./server";
+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/src/internal/flatten.ts

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