remix-validated-form 3.0.0-beta.1 → 3.2.0

package/src/hooks.ts

@@ -1,7 +1,12 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
+import {
+  createGetInputProps,
+  GetInputProps,
+  ValidationBehaviorOptions,
+} from "./internal/getInputProps";
 
 export type FieldProps = {
   /**
@@ -20,17 +25,59 @@ export type FieldProps = {
    * The default value of the field, if there is one.
    */
   defaultValue?: any;
+  /**
+   * Whether or not the field has been touched.
+   */
+  touched: boolean;
+  /**
+   * Helper to set the touched state of the field.
+   */
+  setTouched: (touched: boolean) => void;
+  /**
+   * Helper to get all the props necessary for a regular input.
+   */
+  getInputProps: GetInputProps;
 };
 
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export const useField = (name: string): FieldProps => {
-  const { fieldErrors, clearError, validateField, defaultValues } =
-    useContext(FormContext);
+export const useField = (
+  name: string,
+  options?: {
+    /**
+     * Allows you to configure a custom function that will be called
+     * when the input needs to receive focus due to a validation error.
+     * This is useful for custom components that use a hidden input.
+     */
+    handleReceiveFocus?: () => void;
+    /**
+     * Allows you to specify when a field gets validated (when using getInputProps)
+     */
+    validationBehavior?: Partial<ValidationBehaviorOptions>;
+  }
+): FieldProps => {
+  const {
+    fieldErrors,
+    clearError,
+    validateField,
+    defaultValues,
+    registerReceiveFocus,
+    touchedFields,
+    setFieldTouched,
+    hasBeenSubmitted,
+  } = useContext(FormContext);
+
+  const isTouched = !!touchedFields[name];
+  const { handleReceiveFocus } = options ?? {};
+
+  useEffect(() => {
+    if (handleReceiveFocus)
+      return registerReceiveFocus(name, handleReceiveFocus);
+  }, [handleReceiveFocus, name, registerReceiveFocus]);
 
-  const field = useMemo<FieldProps>(
-    () => ({
+  const field = useMemo<FieldProps>(() => {
+    const helpers = {
       error: fieldErrors[name],
       clearError: () => {
         clearError(name);
@@ -39,9 +86,30 @@ export const useField = (name: string): FieldProps => {
       defaultValue: defaultValues
         ? get(defaultValues, toPath(name), undefined)
         : undefined,
-    }),
-    [clearError, defaultValues, fieldErrors, name, validateField]
-  );
+      touched: isTouched,
+      setTouched: (touched: boolean) => setFieldTouched(name, touched),
+    };
+    const getInputProps = createGetInputProps({
+      ...helpers,
+      name,
+      hasBeenSubmitted,
+      validationBehavior: options?.validationBehavior,
+    });
+    return {
+      ...helpers,
+      getInputProps,
+    };
+  }, [
+    fieldErrors,
+    name,
+    defaultValues,
+    isTouched,
+    hasBeenSubmitted,
+    options?.validationBehavior,
+    clearError,
+    validateField,
+    setFieldTouched,
+  ]);
 
   return field;
 };

package/src/internal/SingleTypeMultiValueMap.ts

@@ -0,0 +1,37 @@
+import { useRef } from "react";
+
+export class MultiValueMap<Key, Value> {
+  private dict: Map<Key, Value[]> = new Map();
+
+  add = (key: Key, value: Value) => {
+    this.dict.set(key, [...(this.dict.get(key) ?? []), value]);
+    if (this.dict.has(key)) {
+      this.dict.get(key)!.push(value);
+    } else {
+      this.dict.set(key, [value]);
+    }
+  };
+
+  remove = (key: Key, value: Value) => {
+    if (!this.dict.has(key)) return;
+    const array = this.dict.get(key)!;
+    const index = array.indexOf(value);
+    if (index !== -1) array.splice(index, 1);
+    if (array.length === 0) this.dict.delete(key);
+  };
+
+  getAll = (key: Key): Value[] => {
+    return this.dict.get(key) ?? [];
+  };
+
+  has = (key: Key): boolean => this.dict.has(key);
+}
+
+export const useMultiValueMap = <Key, Value>() => {
+  const ref = useRef<MultiValueMap<Key, Value> | null>(null);
+  return () => {
+    if (ref.current) return ref.current;
+    ref.current = new MultiValueMap();
+    return ref.current;
+  };
+};

package/src/internal/formContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { FieldErrors } from "../validation/types";
+import { FieldErrors, TouchedFields } from "../validation/types";
 
 export type FormContextValue = {
   /**
@@ -22,10 +22,34 @@ export type FormContextValue = {
    * Whether or not the form is submitting.
    */
   isSubmitting: boolean;
+  /**
+   * Whether or not a submission has been attempted.
+   * This is true once the form has been submitted, even if there were validation errors.
+   * Resets to false when the form is reset.
+   */
+  hasBeenSubmitted: boolean;
+  /**
+   * Whether or not the form is valid.
+   * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
+   */
+  isValid: boolean;
   /**
    * The default values of the form.
    */
   defaultValues?: { [fieldName: string]: any };
+  /**
+   * Register a custom focus handler to be used when
+   * the field needs to receive focus due to a validation error.
+   */
+  registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+  /**
+   * Any fields that have been touched by the user.
+   */
+  touchedFields: TouchedFields;
+  /**
+   * Change the touched state of the specified field.
+   */
+  setFieldTouched: (fieldName: string, touched: boolean) => void;
 };
 
 export const FormContext = createContext<FormContextValue>({
@@ -33,4 +57,9 @@ export const FormContext = createContext<FormContextValue>({
   clearError: () => {},
   validateField: () => {},
   isSubmitting: false,
+  hasBeenSubmitted: false,
+  isValid: true,
+  registerReceiveFocus: () => () => {},
+  touchedFields: {},
+  setFieldTouched: () => {},
 });

package/src/internal/getInputProps.ts

@@ -0,0 +1,79 @@
+export type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
+
+export type ValidationBehaviorOptions = {
+  initial: ValidationBehavior;
+  whenTouched: ValidationBehavior;
+  whenSubmitted: ValidationBehavior;
+};
+
+export type CreateGetInputPropsOptions = {
+  clearError: () => void;
+  validate: () => void;
+  defaultValue?: any;
+  touched: boolean;
+  setTouched: (touched: boolean) => void;
+  hasBeenSubmitted: boolean;
+  validationBehavior?: Partial<ValidationBehaviorOptions>;
+  name: string;
+};
+
+export type MinimalInputProps = {
+  onChange?: (...args: any[]) => void;
+  onBlur?: (...args: any[]) => void;
+};
+
+export type MinimalResult = {
+  name: string;
+  onChange: (...args: any[]) => void;
+  onBlur: (...args: any[]) => void;
+  defaultValue?: any;
+};
+
+export type GetInputProps = <T extends {}>(
+  props?: T & MinimalInputProps
+) => T & MinimalResult;
+
+const defaultValidationBehavior: ValidationBehaviorOptions = {
+  initial: "onBlur",
+  whenTouched: "onChange",
+  whenSubmitted: "onChange",
+};
+
+export const createGetInputProps = ({
+  clearError,
+  validate,
+  defaultValue,
+  touched,
+  setTouched,
+  hasBeenSubmitted,
+  validationBehavior,
+  name,
+}: CreateGetInputPropsOptions): GetInputProps => {
+  const validationBehaviors = {
+    ...defaultValidationBehavior,
+    ...validationBehavior,
+  };
+
+  return (props = {} as any) => {
+    const behavior = hasBeenSubmitted
+      ? validationBehaviors.whenSubmitted
+      : touched
+      ? validationBehaviors.whenTouched
+      : validationBehaviors.initial;
+    return {
+      ...props,
+      onChange: (...args) => {
+        if (behavior === "onChange") validate();
+        else clearError();
+        return props?.onChange?.(...args);
+      },
+      onBlur: (...args) => {
+        if (behavior === "onBlur") validate();
+        setTouched(true);
+        return props?.onBlur?.(...args);
+      },
+      defaultValue,
+      name,
+    };
+  };
+};

package/src/server.ts

@@ -6,5 +6,21 @@ import { FieldErrors } from "./validation/types";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export const validationError = (errors: FieldErrors) =>
-  json({ fieldErrors: errors }, { status: 422 });
+export const validationError = (
+  errors: FieldErrors,
+  submittedData?: unknown
+) => {
+  if (submittedData) {
+    return json(
+      {
+        fieldErrors: {
+          ...errors,
+          _submittedData: submittedData,
+        },
+      },
+      { status: 422 }
+    );
+  }
+
+  return json({ fieldErrors: errors }, { status: 422 });
+};

package/src/validation/types.ts

@@ -1,5 +1,7 @@
 export type FieldErrors = Record<string, string>;
 
+export type TouchedFields = Record<string, boolean>;
+
 export type FieldErrorsWithData = FieldErrors & { _submittedData: any };
 
 export type GenericObject = { [key: string]: any };
@@ -26,3 +28,9 @@ export type Validator<DataType> = {
     field: string
   ) => ValidateFieldResult;
 };
+
+export type ValidatorData<T extends Validator<any>> = T extends Validator<
+  infer U
+>
+  ? U
+  : never;

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

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

@@ -1,50 +0,0 @@
-"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/validation.test.js

@@ -1,295 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const yup = __importStar(require("yup"));
-const zod_1 = require("zod");
-const __1 = require("..");
-const flatten_1 = require("../internal/flatten");
-const testFormData_1 = require("../test-data/testFormData");
-const withZod_1 = require("./withZod");
-const validationTestCases = [
-    {
-        name: "yup",
-        validator: (0, __1.withYup)(yup.object({
-            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(),
-        })),
-    },
-];
-// Not going to enforce exact error strings here
-const anyString = expect.any(String);
-describe("Validation", () => {
-    describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
-        describe("validate", () => {
-            it("should return the data when valid", () => {
-                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(person)).toEqual({
-                    data: person,
-                    error: undefined,
-                });
-            });
-            it("should return field errors when invalid", () => {
-                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_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,
-                        _submittedData: (0, flatten_1.objectFromPathEntries)([...formData.entries()]),
-                    },
-                });
-            });
-            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", () => {
-                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 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,
-                _submittedData: obj,
-            },
-        });
-    });
-    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,
-                _submittedData: obj,
-            },
-        });
-        expect(validator.validateField(obj, "field1")).toEqual({
-            error: anyString,
-        });
-        expect(validator.validateField(obj, "field2")).toEqual({
-            error: anyString,
-        });
-    });
-});

package/build/validation/withYup.d.ts

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