remix-validated-form 5.0.2 → 5.1.1-beta.0

package/src/internal/getInputProps.test.ts

@@ -1,251 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import {
-  createGetInputProps,
-  CreateGetInputPropsOptions,
-} from "./getInputProps";
-
-const fakeEvent = { fake: "event" } as any;
-
-describe("getInputProps", () => {
-  describe("initial", () => {
-    it("should validate on blur by default", () => {
-      const options: CreateGetInputPropsOptions = {
-        name: "some-field",
-        defaultValue: "test default value",
-        touched: false,
-        hasBeenSubmitted: false,
-        setTouched: vi.fn(),
-        clearError: vi.fn(),
-        validate: vi.fn(),
-      };
-      const getInputProps = createGetInputProps(options);
-
-      const provided = {
-        onBlur: vi.fn(),
-        onChange: vi.fn(),
-      };
-      const { onChange, onBlur } = getInputProps(provided);
-
-      onChange!(fakeEvent);
-      expect(provided.onChange).toBeCalledTimes(1);
-      expect(provided.onChange).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).not.toBeCalled();
-      expect(options.validate).not.toBeCalled();
-
-      onBlur!(fakeEvent);
-      expect(provided.onBlur).toBeCalledTimes(1);
-      expect(provided.onBlur).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).toBeCalledTimes(1);
-      expect(options.setTouched).toBeCalledWith(true);
-      expect(options.validate).toBeCalledTimes(1);
-    });
-
-    it("should respect provided validation behavior", () => {
-      const options: CreateGetInputPropsOptions = {
-        name: "some-field",
-        defaultValue: "test default value",
-        touched: false,
-        hasBeenSubmitted: false,
-        setTouched: vi.fn(),
-        clearError: vi.fn(),
-        validate: vi.fn(),
-        validationBehavior: {
-          initial: "onChange",
-        },
-      };
-      const getInputProps = createGetInputProps(options);
-
-      const provided = {
-        onBlur: vi.fn(),
-        onChange: vi.fn(),
-      };
-      const { onChange, onBlur } = getInputProps(provided);
-
-      onChange!(fakeEvent);
-      expect(provided.onChange).toBeCalledTimes(1);
-      expect(provided.onChange).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).not.toBeCalled();
-      expect(options.validate).toBeCalledTimes(1);
-
-      onBlur!(fakeEvent);
-      expect(provided.onBlur).toBeCalledTimes(1);
-      expect(provided.onBlur).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).toBeCalledTimes(1);
-      expect(options.setTouched).toBeCalledWith(true);
-      expect(options.validate).toBeCalledTimes(1);
-    });
-
-    it("should not validate when behavior is onSubmit", () => {
-      const options: CreateGetInputPropsOptions = {
-        name: "some-field",
-        defaultValue: "test default value",
-        touched: false,
-        hasBeenSubmitted: false,
-        setTouched: vi.fn(),
-        clearError: vi.fn(),
-        validate: vi.fn(),
-        validationBehavior: {
-          initial: "onSubmit",
-        },
-      };
-      const getInputProps = createGetInputProps(options);
-
-      const provided = {
-        onBlur: vi.fn(),
-        onChange: vi.fn(),
-      };
-      const { onChange, onBlur } = getInputProps(provided);
-
-      onChange!(fakeEvent);
-      expect(provided.onChange).toBeCalledTimes(1);
-      expect(provided.onChange).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).not.toBeCalled();
-      expect(options.validate).not.toBeCalled();
-
-      onBlur!(fakeEvent);
-      expect(provided.onBlur).toBeCalledTimes(1);
-      expect(provided.onBlur).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).toBeCalledTimes(1);
-      expect(options.setTouched).toBeCalledWith(true);
-      expect(options.validate).not.toBeCalled();
-    });
-  });
-
-  describe("whenTouched", () => {
-    it("should validate on change by default", () => {
-      const options: CreateGetInputPropsOptions = {
-        name: "some-field",
-        defaultValue: "test default value",
-        touched: true,
-        hasBeenSubmitted: false,
-        setTouched: vi.fn(),
-        clearError: vi.fn(),
-        validate: vi.fn(),
-      };
-      const getInputProps = createGetInputProps(options);
-
-      const provided = {
-        onBlur: vi.fn(),
-        onChange: vi.fn(),
-      };
-      const { onChange, onBlur } = getInputProps(provided);
-
-      onChange!(fakeEvent);
-      expect(provided.onChange).toBeCalledTimes(1);
-      expect(provided.onChange).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).not.toBeCalled();
-      expect(options.validate).toBeCalledTimes(1);
-
-      onBlur!(fakeEvent);
-      expect(provided.onBlur).toBeCalledTimes(1);
-      expect(provided.onBlur).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).toBeCalledTimes(1);
-      expect(options.setTouched).toBeCalledWith(true);
-      expect(options.validate).toBeCalledTimes(1);
-    });
-
-    it("should respect provided validation behavior", () => {
-      const options: CreateGetInputPropsOptions = {
-        name: "some-field",
-        defaultValue: "test default value",
-        touched: true,
-        hasBeenSubmitted: false,
-        setTouched: vi.fn(),
-        clearError: vi.fn(),
-        validate: vi.fn(),
-        validationBehavior: {
-          whenTouched: "onBlur",
-        },
-      };
-      const getInputProps = createGetInputProps(options);
-
-      const provided = {
-        onBlur: vi.fn(),
-        onChange: vi.fn(),
-      };
-      const { onChange, onBlur } = getInputProps(provided);
-
-      onChange!(fakeEvent);
-      expect(provided.onChange).toBeCalledTimes(1);
-      expect(provided.onChange).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).not.toBeCalled();
-      expect(options.validate).not.toBeCalled();
-
-      onBlur!(fakeEvent);
-      expect(provided.onBlur).toBeCalledTimes(1);
-      expect(provided.onBlur).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).toBeCalledTimes(1);
-      expect(options.setTouched).toBeCalledWith(true);
-      expect(options.validate).toBeCalledTimes(1);
-    });
-  });
-
-  describe("whenSubmitted", () => {
-    it("should validate on change by default", () => {
-      const options: CreateGetInputPropsOptions = {
-        name: "some-field",
-        defaultValue: "test default value",
-        touched: true,
-        hasBeenSubmitted: true,
-        setTouched: vi.fn(),
-        clearError: vi.fn(),
-        validate: vi.fn(),
-      };
-      const getInputProps = createGetInputProps(options);
-
-      const provided = {
-        onBlur: vi.fn(),
-        onChange: vi.fn(),
-      };
-      const { onChange, onBlur } = getInputProps(provided);
-
-      onChange!(fakeEvent);
-      expect(provided.onChange).toBeCalledTimes(1);
-      expect(provided.onChange).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).not.toBeCalled();
-      expect(options.validate).toBeCalledTimes(1);
-
-      onBlur!(fakeEvent);
-      expect(provided.onBlur).toBeCalledTimes(1);
-      expect(provided.onBlur).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).toBeCalledTimes(1);
-      expect(options.setTouched).toBeCalledWith(true);
-      expect(options.validate).toBeCalledTimes(1);
-    });
-
-    it("should respect provided validation behavior", () => {
-      const options: CreateGetInputPropsOptions = {
-        name: "some-field",
-        defaultValue: "test default value",
-        touched: true,
-        hasBeenSubmitted: true,
-        setTouched: vi.fn(),
-        clearError: vi.fn(),
-        validate: vi.fn(),
-        validationBehavior: {
-          whenSubmitted: "onBlur",
-        },
-      };
-      const getInputProps = createGetInputProps(options);
-
-      const provided = {
-        onBlur: vi.fn(),
-        onChange: vi.fn(),
-      };
-      const { onChange, onBlur } = getInputProps(provided);
-
-      onChange!(fakeEvent);
-      expect(provided.onChange).toBeCalledTimes(1);
-      expect(provided.onChange).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).not.toBeCalled();
-      expect(options.validate).not.toBeCalled();
-
-      onBlur!(fakeEvent);
-      expect(provided.onBlur).toBeCalledTimes(1);
-      expect(provided.onBlur).toBeCalledWith(fakeEvent);
-      expect(options.setTouched).toBeCalledTimes(1);
-      expect(options.setTouched).toBeCalledWith(true);
-      expect(options.validate).toBeCalledTimes(1);
-    });
-  });
-});

package/src/internal/getInputProps.ts

@@ -1,94 +0,0 @@
-import * as R from "remeda";
-import { getCheckboxChecked } from "./logic/getCheckboxChecked";
-import { getRadioChecked } from "./logic/getRadioChecked";
-
-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;
-};
-
-type HandledProps = "name" | "defaultValue" | "defaultChecked";
-type Callbacks = "onChange" | "onBlur";
-
-type MinimalInputProps = {
-  onChange?: ((...args: any[]) => void) | undefined;
-  onBlur?: ((...args: any[]) => void) | undefined;
-  defaultValue?: any;
-  defaultChecked?: boolean | undefined;
-  name?: string | undefined;
-  type?: string | undefined;
-};
-
-export type GetInputProps = <T extends MinimalInputProps>(
-  props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>
-) => T;
-
-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 <T extends MinimalInputProps>(props = {} as any) => {
-    const behavior = hasBeenSubmitted
-      ? validationBehaviors.whenSubmitted
-      : touched
-      ? validationBehaviors.whenTouched
-      : validationBehaviors.initial;
-
-    const inputProps: MinimalInputProps = {
-      ...props,
-      onChange: (...args: unknown[]) => {
-        if (behavior === "onChange") validate();
-        else clearError();
-        return props?.onChange?.(...args);
-      },
-      onBlur: (...args: unknown[]) => {
-        if (behavior === "onBlur") validate();
-        setTouched(true);
-        return props?.onBlur?.(...args);
-      },
-      name,
-    };
-
-    if (props.type === "checkbox") {
-      inputProps.defaultChecked = getCheckboxChecked(props.value, defaultValue);
-    } else if (props.type === "radio") {
-      inputProps.defaultChecked = getRadioChecked(props.value, defaultValue);
-    } else if (props.value === undefined) {
-      // We should only set the defaultValue if the input is uncontrolled.
-      inputProps.defaultValue = defaultValue;
-    }
-
-    return R.omitBy(inputProps, (value) => value === undefined) as T;
-  };
-};

package/src/internal/hooks.ts

@@ -1,217 +0,0 @@
-import { useActionData, useMatches, useNavigation } from "@remix-run/react";
-import { useCallback, useContext } from "react";
-import { getPath } from "set-get";
-import invariant from "tiny-invariant";
-import { FieldErrors, ValidationErrorResponseData } from "..";
-import { formDefaultValuesKey } from "./constants";
-import { InternalFormContext, InternalFormContextValue } from "./formContext";
-import { Hydratable, hydratable } from "./hydratable";
-import { useFormStore } from "./state/storeHooks";
-import { InternalFormId } from "./state/types";
-
-export const useInternalFormContext = (
-  formId?: string | symbol,
-  hookName?: string
-) => {
-  const formContext = useContext(InternalFormContext);
-
-  if (formId) return { formId };
-  if (formContext) return formContext;
-
-  throw new Error(
-    `Unable to determine form for ${hookName}. Please use it inside a ValidatedForm or pass a 'formId'.`
-  );
-};
-
-export function useErrorResponseForForm({
-  fetcher,
-  subaction,
-  formId,
-}: InternalFormContextValue): ValidationErrorResponseData | null {
-  const actionData = useActionData<any>();
-  if (fetcher) {
-    if ((fetcher.data as any)?.fieldErrors) return fetcher.data as any;
-    return null;
-  }
-
-  if (!actionData?.fieldErrors) return null;
-
-  // If there's an explicit id, we should ignore data that has the wrong id
-  if (typeof formId === "string" && actionData.formId)
-    return actionData.formId === formId ? actionData : null;
-
-  if (
-    (!subaction && !actionData.subaction) ||
-    actionData.subaction === subaction
-  )
-    return actionData;
-
-  return null;
-}
-
-export const useFieldErrorsForForm = (
-  context: InternalFormContextValue
-): Hydratable<FieldErrors | undefined> => {
-  const response = useErrorResponseForForm(context);
-  const hydrated = useFormStore(context.formId, (state) => state.isHydrated);
-  return hydratable.from(response?.fieldErrors, hydrated);
-};
-
-export const useDefaultValuesFromLoader = ({
-  formId,
-}: InternalFormContextValue) => {
-  const matches = useMatches();
-  if (typeof formId === "string") {
-    const dataKey = formDefaultValuesKey(formId);
-    // If multiple loaders declare the same default values,
-    // we should use the data from the deepest route.
-    const match = matches
-      .reverse()
-      .find(
-        (match) =>
-          match.data && typeof match.data === "object" && dataKey in match.data
-      );
-    return match?.data[dataKey];
-  }
-
-  return null;
-};
-
-export const useDefaultValuesForForm = (
-  context: InternalFormContextValue
-): Hydratable<{ [fieldName: string]: any }> => {
-  const { formId, defaultValuesProp } = context;
-  const hydrated = useFormStore(formId, (state) => state.isHydrated);
-  const errorResponse = useErrorResponseForForm(context);
-  const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
-
-  // Typical flow is:
-  // - Default values only available from props or server
-  //   - Props have a higher priority than server
-  // - State gets hydrated with default values
-  // - After submit, we may need to use values from the error
-
-  if (hydrated) return hydratable.hydratedData();
-  if (errorResponse?.repopulateFields) {
-    invariant(
-      typeof errorResponse.repopulateFields === "object",
-      "repopulateFields returned something other than an object"
-    );
-    return hydratable.serverData(errorResponse.repopulateFields);
-  }
-  if (defaultValuesProp) return hydratable.serverData(defaultValuesProp);
-
-  return hydratable.serverData(defaultValuesFromLoader);
-};
-
-export const useHasActiveFormSubmit = ({
-  fetcher,
-}: InternalFormContextValue): boolean => {
-  let navigation = useNavigation();
-  const hasActiveSubmission = fetcher
-    ? fetcher.state === "submitting"
-    : navigation.state === "submitting" || navigation.state === "loading";
-  return hasActiveSubmission;
-};
-
-export const useFieldTouched = (
-  field: string,
-  { formId }: InternalFormContextValue
-) => {
-  const touched = useFormStore(formId, (state) => state.touchedFields[field]);
-  const setFieldTouched = useFormStore(formId, (state) => state.setTouched);
-  const setTouched = useCallback(
-    (touched: boolean) => setFieldTouched(field, touched),
-    [field, setFieldTouched]
-  );
-  return [touched, setTouched] as const;
-};
-
-export const useFieldError = (
-  name: string,
-  context: InternalFormContextValue
-) => {
-  const fieldErrors = useFieldErrorsForForm(context);
-  const state = useFormStore(
-    context.formId,
-    (state) => state.fieldErrors[name]
-  );
-  return fieldErrors.map((fieldErrors) => fieldErrors?.[name]).hydrateTo(state);
-};
-
-export const useClearError = (context: InternalFormContextValue) => {
-  const { formId } = context;
-  return useFormStore(formId, (state) => state.clearFieldError);
-};
-
-export const useCurrentDefaultValueForField = (
-  formId: InternalFormId,
-  field: string
-) =>
-  useFormStore(formId, (state) => getPath(state.currentDefaultValues, field));
-
-export const useFieldDefaultValue = (
-  name: string,
-  context: InternalFormContextValue
-) => {
-  const defaultValues = useDefaultValuesForForm(context);
-  const state = useCurrentDefaultValueForField(context.formId, name);
-
-  return defaultValues.map((val) => getPath(val, name)).hydrateTo(state);
-};
-
-export const useInternalIsSubmitting = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.isSubmitting);
-
-export const useInternalIsValid = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.isValid());
-
-export const useInternalHasBeenSubmitted = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.hasBeenSubmitted);
-
-export const useSmartValidate = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.smartValidate);
-
-export const useValidate = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.validate);
-
-const noOpReceiver = () => () => {};
-export const useRegisterReceiveFocus = (formId: InternalFormId) =>
-  useFormStore(
-    formId,
-    (state) => state.formProps?.registerReceiveFocus ?? noOpReceiver
-  );
-
-const defaultDefaultValues = {};
-export const useSyncedDefaultValues = (formId: InternalFormId) =>
-  useFormStore(
-    formId,
-    (state) => state.formProps?.defaultValues ?? defaultDefaultValues
-  );
-
-export const useSetTouched = ({ formId }: InternalFormContextValue) =>
-  useFormStore(formId, (state) => state.setTouched);
-
-export const useTouchedFields = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.touchedFields);
-
-export const useFieldErrors = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.fieldErrors);
-
-export const useSetFieldErrors = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.setFieldErrors);
-
-export const useResetFormElement = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.resetFormElement);
-
-export const useSubmitForm = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.submit);
-
-export const useFormActionProp = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.formProps?.action);
-
-export const useFormSubactionProp = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.formProps?.subaction);
-
-export const useFormValues = (formId: InternalFormId) =>
-  useFormStore(formId, (state) => state.getValues);

package/src/internal/hydratable.ts

@@ -1,28 +0,0 @@
-/**
- * The purpose of this type is to simplify the logic
- * around data that needs to come from the server initially,
- * but from the internal state after hydration.
- */
-export type Hydratable<T> = {
-  hydrateTo: (data: T) => T;
-  map: <U>(fn: (data: T) => U) => Hydratable<U>;
-};
-
-const serverData = <T>(data: T): Hydratable<T> => ({
-  hydrateTo: () => data,
-  map: (fn) => serverData(fn(data)),
-});
-
-const hydratedData = <T>(): Hydratable<T> => ({
-  hydrateTo: (hydratedData: T) => hydratedData,
-  map: <U>() => hydratedData<U>(),
-});
-
-const from = <T>(data: T, hydrated: boolean): Hydratable<T> =>
-  hydrated ? hydratedData<T>() : serverData<T>(data);
-
-export const hydratable = {
-  serverData,
-  hydratedData,
-  from,
-};

package/src/internal/logic/getCheckboxChecked.ts

@@ -1,10 +0,0 @@
-export const getCheckboxChecked = (
-  checkboxValue: string | undefined = "on",
-  newValue: unknown
-): boolean | undefined => {
-  if (Array.isArray(newValue))
-    return newValue.some((val) => val === true || val === checkboxValue);
-  if (typeof newValue === "boolean") return newValue;
-  if (typeof newValue === "string") return newValue === checkboxValue;
-  return undefined;
-};

package/src/internal/logic/getRadioChecked.ts

@@ -1,18 +0,0 @@
-export const getRadioChecked = (
-  radioValue: string | undefined = "on",
-  newValue: unknown
-) => {
-  if (typeof newValue === "string") return newValue === radioValue;
-  return undefined;
-};
-
-if (import.meta.vitest) {
-  const { it, expect } = import.meta.vitest;
-  it("getRadioChecked", () => {
-    expect(getRadioChecked("on", "on")).toBe(true);
-    expect(getRadioChecked("on", undefined)).toBe(undefined);
-    expect(getRadioChecked("trueValue", undefined)).toBe(undefined);
-    expect(getRadioChecked("trueValue", "bob")).toBe(false);
-    expect(getRadioChecked("trueValue", "trueValue")).toBe(true);
-  });
-}

package/src/internal/logic/nestedObjectToPathObject.ts

@@ -1,63 +0,0 @@
-export const nestedObjectToPathObject = (
-  val: any,
-  acc: Record<string, any>,
-  path: string
-): any => {
-  if (Array.isArray(val)) {
-    val.forEach((v, index) =>
-      nestedObjectToPathObject(v, acc, `${path}[${index}]`)
-    );
-    return acc;
-  }
-
-  if (typeof val === "object") {
-    Object.entries(val).forEach(([key, value]) => {
-      const nextPath = path ? `${path}.${key}` : key;
-      nestedObjectToPathObject(value, acc, nextPath);
-    });
-    return acc;
-  }
-
-  if (val !== undefined) {
-    acc[path] = val;
-  }
-
-  return acc;
-};
-
-if (import.meta.vitest) {
-  const { describe, expect, it } = import.meta.vitest;
-
-  describe("nestedObjectToPathObject", () => {
-    it("should return an object with the correct path", () => {
-      const result = nestedObjectToPathObject(
-        {
-          a: 1,
-          b: 2,
-          c: { foo: "bar", baz: [true, false] },
-          d: [
-            { foo: "bar", baz: [true, false] },
-            { e: true, f: "hi" },
-          ],
-          g: undefined,
-        },
-        {},
-        ""
-      );
-
-      expect(result).toEqual({
-        a: 1,
-        b: 2,
-        "c.foo": "bar",
-        "c.baz[0]": true,
-        "c.baz[1]": false,
-        "d[0].foo": "bar",
-        "d[0].baz[0]": true,
-        "d[0].baz[1]": false,
-        "d[1].e": true,
-        "d[1].f": "hi",
-      });
-      expect(Object.keys(result)).toHaveLength(10);
-    });
-  });
-}