remix-validated-form 4.6.12 → 5.0.1

package/src/internal/state/fieldArray.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from "react";
+import { nanoid } from "nanoid";
+import React, { useMemo, useRef, useState } from "react";
 import { useCallback } from "react";
 import invariant from "tiny-invariant";
 import { InternalFormContextValue } from "../formContext";
@@ -7,8 +8,9 @@ import {
   useFieldError,
   useInternalFormContext,
   useInternalHasBeenSubmitted,
-  useValidateField,
+  useSmartValidate,
 } from "../hooks";
+import * as arrayUtil from "./arrayUtil";
 import { useRegisterControlledField } from "./controlledFields";
 import { useFormStore } from "./storeHooks";
 
@@ -19,6 +21,19 @@ export type FieldArrayValidationBehaviorOptions = {
   whenSubmitted: FieldArrayValidationBehavior;
 };
 
+export type FieldArrayItem<T> = {
+  /**
+   * The default value of the item.
+   * This does not update as the field is changed by the user.
+   */
+  defaultValue: T;
+  /**
+   * A unique key for the item.
+   * Use this as the key prop when rendering the item.
+   */
+  key: string;
+};
+
 const useInternalFieldArray = (
   context: InternalFormContextValue,
   field: string,
@@ -27,7 +42,7 @@ const useInternalFieldArray = (
   const value = useFieldDefaultValue(field, context);
   useRegisterControlledField(context, field);
   const hasBeenSubmitted = useInternalHasBeenSubmitted(context.formId);
-  const validateField = useValidateField(context.formId);
+  const validateField = useSmartValidate(context.formId);
   const error = useFieldError(field, context);
 
   const resolvedValidationBehavior: FieldArrayValidationBehaviorOptions = {
@@ -42,7 +57,7 @@ const useInternalFieldArray = (
 
   const maybeValidate = useCallback(() => {
     if (behavior === "onChange") {
-      validateField(field);
+      validateField({ alwaysIncludeErrorsFromFields: [field] });
     }
   }, [behavior, field, validateField]);
 
@@ -56,47 +71,74 @@ const useInternalFieldArray = (
     (state) => state.controlledFields.array
   );
 
+  const arrayValue = useMemo<unknown[]>(() => value ?? [], [value]);
+  const keyRef = useRef<string[]>([]);
+
+  // If the lengths don't match up it means one of two things
+  // 1. The array has been modified outside of this hook
+  // 2. We're initializing the array
+  if (keyRef.current.length !== arrayValue.length) {
+    keyRef.current = arrayValue.map(() => nanoid());
+  }
+
   const helpers = useMemo(
     () => ({
       push: (item: any) => {
         arr.push(field, item);
+        keyRef.current.push(nanoid());
         maybeValidate();
       },
       swap: (indexA: number, indexB: number) => {
         arr.swap(field, indexA, indexB);
+        arrayUtil.swap(keyRef.current, indexA, indexB);
         maybeValidate();
       },
       move: (from: number, to: number) => {
         arr.move(field, from, to);
+        arrayUtil.move(keyRef.current, from, to);
         maybeValidate();
       },
       insert: (index: number, value: any) => {
         arr.insert(field, index, value);
+        arrayUtil.insert(keyRef.current, index, nanoid());
         maybeValidate();
       },
       unshift: (value: any) => {
         arr.unshift(field, value);
+        keyRef.current.unshift(nanoid());
         maybeValidate();
       },
       remove: (index: number) => {
         arr.remove(field, index);
+        arrayUtil.remove(keyRef.current, index);
         maybeValidate();
       },
       pop: () => {
         arr.pop(field);
+        keyRef.current.pop();
         maybeValidate();
       },
       replace: (index: number, value: any) => {
         arr.replace(field, index, value);
+        keyRef.current[index] = nanoid();
         maybeValidate();
       },
     }),
     [arr, field, maybeValidate]
   );
 
-  const arrayValue = useMemo(() => value ?? [], [value]);
-
-  return [arrayValue, helpers, error] as const;
+  const valueWithKeys = useMemo(() => {
+    const result: { defaultValue: any; key: string }[] = [];
+    arrayValue.forEach((item, index) => {
+      result[index] = {
+        key: keyRef.current[index],
+        defaultValue: item,
+      };
+    });
+    return result;
+  }, [arrayValue]);
+
+  return [valueWithKeys, helpers, error] as const;
 };
 
 export type FieldArrayHelpers<Item = any> = {
@@ -122,29 +164,29 @@ export function useFieldArray<Item = any>(
   const context = useInternalFormContext(formId, "FieldArray");
 
   return useInternalFieldArray(context, name, validationBehavior) as [
-    itemDefaults: Item[],
+    items: FieldArrayItem<Item>[],
     helpers: FieldArrayHelpers,
     error: string | undefined
   ];
 }
 
-export type FieldArrayProps = {
+export type FieldArrayProps<Item> = {
   name: string;
   children: (
-    itemDefaults: any[],
-    helpers: FieldArrayHelpers,
+    items: FieldArrayItem<Item>[],
+    helpers: FieldArrayHelpers<Item>,
     error: string | undefined
   ) => React.ReactNode;
   formId?: string;
   validationBehavior?: FieldArrayValidationBehaviorOptions;
 };
 
-export const FieldArray = ({
+export function FieldArray<Item = any>({
   name,
   children,
   formId,
   validationBehavior,
-}: FieldArrayProps) => {
+}: FieldArrayProps<Item>) {
   const context = useInternalFormContext(formId, "FieldArray");
   const [value, helpers, error] = useInternalFieldArray(
     context,
@@ -152,4 +194,4 @@ export const FieldArray = ({
     validationBehavior
   );
   return <>{children(value, helpers, error)}</>;
-};
+}

package/src/server.ts

@@ -42,6 +42,9 @@ export type FormDefaults = {
   [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };
 
+// FIXME: Remove after https://github.com/egoist/tsup/issues/813 is fixed
+export type internal_FORM_DEFAULTS_FIELD = typeof FORM_DEFAULTS_FIELD;
+
 export const setFormDefaults = <DataType = any>(
   formId: string,
   defaultValues: Partial<DataType>

package/src/unreleased/formStateHooks.ts

@@ -11,7 +11,6 @@ import {
   useTouchedFields,
   useInternalIsValid,
   useFieldErrors,
-  useValidateField,
   useValidate,
   useSetFieldErrors,
   useResetFormElement,
@@ -20,6 +19,7 @@ import {
   useFormSubactionProp,
   useSubmitForm,
   useFormValues,
+  useSmartValidate,
 } from "../internal/hooks";
 import {
   FieldErrors,
@@ -133,7 +133,7 @@ export type FormHelpers = {
 export const useFormHelpers = (formId?: string): FormHelpers => {
   const formContext = useInternalFormContext(formId, "useFormHelpers");
   const setTouched = useSetTouched(formContext);
-  const validateField = useValidateField(formContext.formId);
+  const validateField = useSmartValidate(formContext.formId);
   const validate = useValidate(formContext.formId);
   const clearError = useClearError(formContext);
   const setFieldErrors = useSetFieldErrors(formContext.formId);
@@ -143,7 +143,12 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
   return useMemo(
     () => ({
       setTouched,
-      validateField,
+      validateField: async (fieldName: string) => {
+        const res = await validateField({
+          alwaysIncludeErrorsFromFields: [fieldName],
+        });
+        return res.error?.fieldErrors[fieldName] ?? null;
+      },
       clearError,
       validate,
       clearAllErrors: () => setFieldErrors({}),

package/src/validation/types.ts

@@ -44,7 +44,10 @@ export type Validator<DataType> = {
   validate: (
     unvalidatedData: GenericObject
   ) => Promise<ValidationResult<DataType>>;
-  validateField: (
+  /**
+   * @deprecated Will be removed in a future version of remix-validated-form
+   */
+  validateField?: (
     unvalidatedData: GenericObject,
     field: string
   ) => Promise<ValidateFieldResult>;

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,
-        });
-      });
-    });
-  });
-});