remix-validated-form 4.3.0 → 4.3.1-beta.0

package/src/validation/validation.test.ts

@@ -0,0 +1,304 @@
+import { anyString, TestFormData } from "@remix-validated-form/test-utils";
+import { withYup } from "@remix-validated-form/with-yup/src";
+import { withZod } from "@remix-validated-form/with-zod";
+import { Validator } from "remix-validated-form/src";
+import { objectFromPathEntries } from "remix-validated-form/src/internal/flatten";
+import { describe, it, expect } from "vitest";
+import * as yup from "yup";
+import { z } from "zod";
+
+// If adding an adapter, write a validator that validates this shape
+type Person = {
+  firstName: string;
+  lastName: string;
+  age?: number;
+  address: {
+    streetAddress: string;
+    city: string;
+    country: string;
+  };
+  pets?: {
+    animal: string;
+    name: string;
+  }[];
+};
+
+type ValidationTestCase = {
+  name: string;
+  validator: Validator<Person>;
+};
+
+const validationTestCases: ValidationTestCase[] = [
+  {
+    name: "yup",
+    validator: 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: withZod(
+      z.object({
+        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(),
+      })
+    ),
+  },
+];
+
+describe("Validation", () => {
+  describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
+    describe("validate", () => {
+      it("should return the data when valid", async () => {
+        const person: Person = {
+          firstName: "John",
+          lastName: "Doe",
+          age: 30,
+          address: {
+            streetAddress: "123 Main St",
+            city: "Anytown",
+            country: "USA",
+          },
+          pets: [{ animal: "dog", name: "Fido" }],
+        };
+        expect(await validator.validate(person)).toEqual({
+          data: person,
+          error: undefined,
+          submittedData: person,
+        });
+      });
+
+      it("should return field errors when invalid", async () => {
+        const obj = { age: "hi!", pets: [{ animal: "dog" }] };
+        expect(await validator.validate(obj)).toEqual({
+          data: undefined,
+          error: {
+            fieldErrors: {
+              firstName: anyString,
+              lastName: anyString,
+              age: anyString,
+              "address.city": anyString,
+              "address.country": anyString,
+              "address.streetAddress": anyString,
+              "pets[0].name": anyString,
+            },
+            subaction: undefined,
+          },
+          submittedData: obj,
+        });
+      });
+
+      it("should unflatten data when validating", async () => {
+        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(await 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,
+          submittedData: objectFromPathEntries(Object.entries(data)),
+        });
+      });
+
+      it("should accept FormData directly and return errors", async () => {
+        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(await validator.validate(formData)).toEqual({
+          data: undefined,
+          error: {
+            fieldErrors: {
+              "address.city": anyString,
+              "pets[0].name": anyString,
+            },
+            subaction: undefined,
+          },
+          submittedData: objectFromPathEntries([...formData.entries()]),
+        });
+      });
+
+      it("should accept FormData directly and return valid data", async () => {
+        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(await 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,
+          subaction: undefined,
+          submittedData: objectFromPathEntries([...formData.entries()]),
+        });
+      });
+
+      it("should return the subaction in the ValidatorError if there is one", async () => {
+        const person = {
+          lastName: "Doe",
+          age: 20,
+          address: {
+            streetAddress: "123 Main St",
+            city: "Anytown",
+            country: "USA",
+          },
+          pets: [{ animal: "dog", name: "Fido" }],
+          subaction: "updatePerson",
+        };
+        expect(await validator.validate(person)).toEqual({
+          error: {
+            fieldErrors: {
+              firstName: anyString,
+            },
+            subaction: "updatePerson",
+          },
+          data: undefined,
+          submittedData: person,
+        });
+      });
+    });
+
+    describe("validateField", () => {
+      it("should not return an error if field is valid", async () => {
+        const person = {
+          firstName: "John",
+          lastName: {}, // invalid, but we should only be validating firstName
+        };
+        expect(await validator.validateField(person, "firstName")).toEqual({
+          error: undefined,
+        });
+      });
+      it("should not return an error if a nested field is valid", async () => {
+        const person = {
+          firstName: "John",
+          lastName: {}, // invalid, but we should only be validating firstName
+          address: {
+            streetAddress: "123 Main St",
+            city: "Anytown",
+            country: "USA",
+          },
+          pets: [{ animal: "dog", name: "Fido" }],
+        };
+        expect(
+          await validator.validateField(person, "address.streetAddress")
+        ).toEqual({
+          error: undefined,
+        });
+        expect(await validator.validateField(person, "address.city")).toEqual({
+          error: undefined,
+        });
+        expect(
+          await validator.validateField(person, "address.country")
+        ).toEqual({
+          error: undefined,
+        });
+        expect(await validator.validateField(person, "pets[0].animal")).toEqual(
+          {
+            error: undefined,
+          }
+        );
+        expect(await validator.validateField(person, "pets[0].name")).toEqual({
+          error: undefined,
+        });
+      });
+
+      it("should return an error if field is invalid", async () => {
+        const person = {
+          firstName: "John",
+          lastName: {},
+          address: {
+            streetAddress: "123 Main St",
+            city: 1234,
+          },
+        };
+        expect(await validator.validateField(person, "lastName")).toEqual({
+          error: anyString,
+        });
+      });
+
+      it("should return an error if a nested field is invalid", async () => {
+        const person = {
+          firstName: "John",
+          lastName: {},
+          address: {
+            streetAddress: "123 Main St",
+            city: 1234,
+          },
+          pets: [{ animal: "dog" }],
+        };
+        expect(
+          await validator.validateField(person, "address.country")
+        ).toEqual({
+          error: anyString,
+        });
+        expect(await validator.validateField(person, "pets[0].name")).toEqual({
+          error: anyString,
+        });
+      });
+    });
+  });
+});

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext"
+  },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
 }

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { makeConfig } from "vite-config";
+
+export default makeConfig({
+  lib: "remix-validated-form",
+  external: ["react", "@remix-run/react", "@remix-run/server-runtime"],
+  dir: __dirname,
+});

package/.turbo/turbo-test.log

@@ -1,11 +0,0 @@
-$ jest src
-No tests found, exiting with code 1
-Run with `--passWithNoTests` to exit with code 0
-In /Users/aaronpettengill/dev/remix-validated-form/packages/remix-validated-form
-  68 files checked.
-  testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 2 matches
-  testPathIgnorePatterns: /node_modules/ - 68 matches
-  testRegex:  - 0 matches
-Pattern: src - 0 matches
-info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-error Command failed with exit code 1.

package/browser/components.d.ts

@@ -1,7 +0,0 @@
-import { HTMLProps } from "react";
-declare type WithRequiredName<T extends {
-    name?: string;
-}> = T & Required<Pick<T, "name">>;
-export declare const ValidatedInput: ({ name, form, ...rest }: WithRequiredName<HTMLProps<HTMLInputElement>>) => JSX.Element;
-export declare const ValidatedTextarea: ({ name, form, ...rest }: WithRequiredName<HTMLProps<HTMLTextAreaElement>>) => JSX.Element;
-export {};

package/browser/components.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useField } from ".";
-export const ValidatedInput = ({ name, form, ...rest }) => {
-    const { getInputProps } = useField(name, { formId: form });
-    return _jsx("input", { ...getInputProps(rest) }, void 0);
-};
-export const ValidatedTextarea = ({ name, form, ...rest }) => {
-    const { getInputProps } = useField(name, { formId: form });
-    return _jsx("textarea", { ...getInputProps(rest) }, void 0);
-};

package/browser/internal/SingleTypeMultiValueMap.d.ts

@@ -1,9 +0,0 @@
-export declare class MultiValueMap<Key, Value> {
-    private dict;
-    add: (key: Key, value: Value) => void;
-    remove: (key: Key, value: Value) => void;
-    getAll: (key: Key) => Value[];
-    entries: () => IterableIterator<[Key, Value[]]>;
-    has: (key: Key) => boolean;
-}
-export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/SingleTypeMultiValueMap.js

@@ -1,41 +0,0 @@
-import { useRef } from "react";
-export class MultiValueMap {
-    constructor() {
-        this.dict = new Map();
-        this.add = (key, value) => {
-            var _a;
-            this.dict.set(key, [...((_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : []), value]);
-            if (this.dict.has(key)) {
-                this.dict.get(key).push(value);
-            }
-            else {
-                this.dict.set(key, [value]);
-            }
-        };
-        this.remove = (key, 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);
-        };
-        this.getAll = (key) => {
-            var _a;
-            return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
-        };
-        this.entries = () => this.dict.entries();
-        this.has = (key) => this.dict.has(key);
-    }
-}
-export const useMultiValueMap = () => {
-    const ref = useRef(null);
-    return () => {
-        if (ref.current)
-            return ref.current;
-        ref.current = new MultiValueMap();
-        return ref.current;
-    };
-};

package/browser/internal/customState.d.ts

@@ -1,105 +0,0 @@
-import { Atom } from "jotai";
-import { InternalFormId } from "./state/atomUtils";
-export declare const unregisterAtomsFamily: {
-    (param: InternalFormId): Atom<Atom<any>[]> & {
-        write: (get: {
-            <Value>(atom: Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: Atom<any>[] | ((prev: Atom<any>[]) => Atom<any>[])) => void;
-        onMount?: (<S extends (update: Atom<any>[] | ((prev: Atom<any>[]) => Atom<any>[])) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: Atom<any>[];
-    };
-    remove(param: InternalFormId): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-};
-export declare const createCustomFormState: <T>(defaultValue: T) => {
-    __atomFamily: {
-        (param: InternalFormId): Atom<T> & {
-            write: (get: {
-                <Value>(atom: Atom<Value | Promise<Value>>): Value;
-                <Value_1>(atom: Atom<Promise<Value_1>>): Value_1;
-                <Value_2>(atom: Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-            } & {
-                <Value_3>(atom: Atom<Value_3 | Promise<Value_3>>, options: {
-                    unstable_promise: true;
-                }): Value_3 | Promise<Value_3>;
-                <Value_4>(atom: Atom<Promise<Value_4>>, options: {
-                    unstable_promise: true;
-                }): Value_4 | Promise<Value_4>;
-                <Value_5>(atom: Atom<Value_5>, options: {
-                    unstable_promise: true;
-                }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-            }, set: {
-                <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-                <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-            }, update: T | ((prev: T) => T)) => void;
-            onMount?: (<S extends import("jotai/core/atom").SetAtom<T | ((prev: T) => T), void>>(setAtom: S) => void | (() => void)) | undefined;
-        } & {
-            init: T;
-        };
-        remove(param: InternalFormId): void;
-        setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-    };
-    __registerAtom: Atom<null> & {
-        write: (get: {
-            <Value>(atom: Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: InternalFormId) => void;
-        onMount?: (<S_1 extends (update: InternalFormId) => void>(setAtom: S_1) => void | (() => void)) | undefined;
-    } & {
-        init: null;
-    };
-    __unregisterAtom: Atom<null> & {
-        write: (get: {
-            <Value>(atom: Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: InternalFormId) => void;
-        onMount?: (<S_1 extends (update: InternalFormId) => void>(setAtom: S_1) => void | (() => void)) | undefined;
-    } & {
-        init: null;
-    };
-};
-export declare const useCustomFormState: <T>(state: ReturnType<typeof createCustomFormState>, formId: InternalFormId) => readonly [T, (value: T) => void];

package/browser/internal/customState.js

@@ -1,46 +0,0 @@
-import { atom } from "jotai";
-import { useAtomCallback } from "jotai/utils";
-import { useCallback, useEffect } from "react";
-import { useFormAtom } from "./hooks";
-import { formAtomFamily } from "./state/atomUtils";
-export const unregisterAtomsFamily = formAtomFamily([]);
-export const createCustomFormState = (defaultValue) => {
-    const atomFamily = formAtomFamily(defaultValue);
-    const refCountFamily = formAtomFamily(0);
-    const registerAtom = atom(null, (get, set, formId) => {
-        const refCountAtom = refCountFamily(formId);
-        set(refCountAtom, (prev) => prev + 1);
-        const newRefCount = get(refCountAtom);
-        if (newRefCount === 1) {
-            set(unregisterAtomsFamily(formId), (prev) => [...prev, unregisterAtom]);
-        }
-    });
-    const unregisterAtom = atom(null, (get, set, formId) => {
-        const refCountAtom = refCountFamily(formId);
-        set(refCountAtom, (prev) => prev - 1);
-        const newRefCount = get(refCountAtom);
-        if (newRefCount === 0) {
-            set(unregisterAtomsFamily(formId), (prev) => prev.filter((item) => item !== unregisterAtom));
-            atomFamily.remove(formId);
-            refCountFamily.remove(formId);
-        }
-    });
-    return {
-        __atomFamily: atomFamily,
-        __registerAtom: registerAtom,
-        __unregisterAtom: unregisterAtom,
-    };
-};
-export const useCustomFormState = (state, formId) => {
-    const atom = state.__atomFamily(formId);
-    const [value, setValue] = useFormAtom(atom);
-    const register = useAtomCallback(useCallback((_get, set) => set(state.__registerAtom, formId), [formId, state.__registerAtom]));
-    const unregister = useAtomCallback(useCallback((_get, set) => set(state.__unregisterAtom, formId), [formId, state.__unregisterAtom]));
-    useEffect(() => {
-        register();
-        return () => {
-            unregister();
-        };
-    }, [register, unregister]);
-    return [value, setValue];
-};

package/browser/internal/hooks-valtio.d.ts

@@ -1,18 +0,0 @@
-import { useUpdateAtom } from "jotai/utils";
-import { FieldErrors, ValidationErrorResponseData } from "..";
-import { InternalFormContextValue } from "./formContext";
-import { Hydratable } from "./hydratable";
-export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
-export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
-export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
-export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
-export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
-    [fieldName: string]: any;
-}>;
-export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
-export declare const useFieldTouched: (name: string, { formId }: InternalFormContextValue) => boolean;
-export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
-export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
-export declare const useFormUpdateAtom: typeof useUpdateAtom;
-export declare const useClearError: (context: InternalFormContextValue) => (name: string) => void;
-export declare const useSetTouched: (context: InternalFormContextValue) => (name: string, touched: boolean) => void;