remix-validated-form 5.0.0 → 5.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "Form component and utils for easy form validation in remix",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",

package/src/ValidatedForm.tsx

@@ -51,7 +51,7 @@ type SubactionData<
 // Not all validation libraries support encoding a literal value in the schema type (e.g. yup).
 // This condition here allows us to provide strictness for users who are using a validation library that does support it,
 // but also allows us to support users who are using a validation library that doesn't support it.
-type DefaultValuesForSubaction<
+type DataForSubaction<
   DataType,
   Subaction extends string | undefined
 > = Subaction extends string // Not all validation libraries support encoding a literal value in the schema type.
@@ -70,7 +70,7 @@ export type FormProps<DataType, Subaction extends string | undefined> = {
    * after all validations have been run.
    */
   onSubmit?: (
-    data: DataType,
+    data: DataForSubaction<DataType, Subaction>,
     event: React.FormEvent<HTMLFormElement>
   ) => void | Promise<void>;
   /**
@@ -83,7 +83,7 @@ export type FormProps<DataType, Subaction extends string | undefined> = {
    * Accepts an object of default values for the form
    * that will automatically be propagated to the form fields via `useField`.
    */
-  defaultValues?: Partial<DefaultValuesForSubaction<DataType, Subaction>>;
+  defaultValues?: Partial<DataForSubaction<DataType, Subaction>>;
   /**
    * A ref to the form element.
    */
@@ -362,7 +362,7 @@ export function ValidatedForm<DataType, Subaction extends string | undefined>({
     } else {
       setFieldErrors({});
       const eventProxy = formEventProxy(e);
-      await onSubmit?.(result.data, eventProxy);
+      await onSubmit?.(result.data as any, eventProxy);
       if (eventProxy.defaultPrevented) {
         endSubmit();
         return;

package/src/internal/hooks.ts

@@ -110,7 +110,7 @@ export const useHasActiveFormSubmit = ({
   let navigation = useNavigation();
   const hasActiveSubmission = fetcher
     ? fetcher.state === "submitting"
-    : navigation.state === "submitting";
+    : navigation.state === "submitting" || navigation.state === "loading";
   return hasActiveSubmission;
 };
 

package/tsconfig.json

@@ -4,5 +4,5 @@
     "module": "esnext"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+  "exclude": ["node_modules"]
 }

package/src/validation/validation.test.ts

@@ -1,330 +0,0 @@
-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 * as R from "remeda";
-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";
-import { FORM_ID_FIELD } from "../internal/constants";
-
-// 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().min(1),
-        lastName: z.string().min(1),
-        age: z.optional(z.number()),
-        address: z.preprocess(
-          (value) => (value == null ? {} : value),
-          z.object({
-            streetAddress: z.string().min(1),
-            city: z.string().min(1),
-            country: z.string().min(1),
-          })
-        ),
-        pets: z
-          .object({
-            animal: z.string().min(1),
-            name: z.string().min(1),
-          })
-          .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 omit internal fields", async () => {
-        const person: Person = {
-          firstName: "John",
-          lastName: "Doe",
-          age: 30,
-          address: {
-            streetAddress: "123 Main St",
-            city: "Anytown",
-            country: "USA",
-          },
-          pets: [{ animal: "dog", name: "Fido" }],
-
-          // @ts-expect-error
-          // internal filed technically not part of person type
-          [FORM_ID_FIELD]: "something",
-        };
-        expect(await validator.validate(person)).toEqual({
-          data: R.omit(person as any, [FORM_ID_FIELD]),
-          error: undefined,
-          submittedData: person,
-          formId: "something",
-        });
-      });
-
-      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,
-        });
-      });
-    });
-  });
-});