remix-validated-form 4.0.1-beta.1 → 4.1.0-beta.1

package/src/index.ts

@@ -3,4 +3,4 @@ export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/createValidator";
-export type { FormContextValue } from "./internal/formContext";
+export * from "./userFacingFormContext";

package/src/internal/constants.ts

@@ -0,0 +1,4 @@
+export const FORM_ID_FIELD = "__rvfInternalFormId" as const;
+export const FORM_DEFAULTS_FIELD = "__rvfInternalFormDefaults" as const;
+export const formDefaultValuesKey = (formId: string) =>
+  `${FORM_DEFAULTS_FIELD}_${formId}`;

package/src/internal/formContext.ts

@@ -1,54 +1,13 @@
+import { useFetcher } from "@remix-run/react";
 import { createContext } from "react";
-import { FieldErrors, TouchedFields } from "../validation/types";
 
-export type FormContextValue = {
-  /**
-   * All the errors in all the fields in the form.
-   */
-  fieldErrors: FieldErrors;
-  /**
-   * Clear the errors of the specified fields.
-   */
-  clearError: (...names: string[]) => void;
-  /**
-   * Validate the specified field.
-   */
-  validateField: (fieldName: string) => Promise<string | null>;
-  /**
-   * The `action` prop of the form.
-   */
+export type InternalFormContextValue = {
+  formId: string | symbol;
   action?: string;
-  /**
-   * 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.
-   */
-  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;
+  subaction?: string;
+  defaultValuesProp?: { [fieldName: string]: any };
+  fetcher?: ReturnType<typeof useFetcher>;
 };
 
-export const FormContext = createContext<FormContextValue | null>(null);
+export const InternalFormContext =
+  createContext<InternalFormContextValue | null>(null);

package/src/internal/getInputProps.ts

@@ -1,3 +1,5 @@
+import omitBy from "lodash/omitBy";
+
 export type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
 
 export type ValidationBehaviorOptions = {
@@ -68,7 +70,7 @@ export const createGetInputProps = ({
       ? validationBehaviors.whenTouched
       : validationBehaviors.initial;
 
-    const inputProps: T = {
+    const inputProps: MinimalInputProps = {
       ...props,
       onChange: (...args: unknown[]) => {
         if (behavior === "onChange") validate();
@@ -83,19 +85,19 @@ export const createGetInputProps = ({
       name,
     };
 
-    if (inputProps.type === "checkbox") {
+    if (props.type === "checkbox") {
       const value = props.value ?? "on";
       inputProps.defaultChecked = getCheckboxDefaultChecked(
         value,
         defaultValue
       );
-    } else if (inputProps.type === "radio") {
+    } else if (props.type === "radio") {
       const value = props.value ?? "on";
       inputProps.defaultChecked = defaultValue === value;
     } else {
       inputProps.defaultValue = defaultValue;
     }
 
-    return inputProps;
+    return omitBy(inputProps, (value) => value === undefined) as T;
   };
 };

package/src/internal/hooks.ts

@@ -0,0 +1,200 @@
+import { useActionData, useMatches, useTransition } from "@remix-run/react";
+import { Atom } from "jotai";
+import { useAtomValue, useUpdateAtom } from "jotai/utils";
+import lodashGet from "lodash/get";
+import identity from "lodash/identity";
+import { useCallback, useContext, useMemo } from "react";
+import { ValidationErrorResponseData } from "..";
+import { formDefaultValuesKey } from "./constants";
+import { InternalFormContext, InternalFormContextValue } from "./formContext";
+import {
+  ATOM_SCOPE,
+  clearErrorAtom,
+  fieldDefaultValueAtom,
+  fieldErrorAtom,
+  fieldTouchedAtom,
+  FormAtom,
+  formRegistry,
+  isHydratedAtom,
+  setTouchedAtom,
+} from "./state";
+
+type FormSelectorAtomCreator<T> = (formState: FormAtom) => Atom<T>;
+const USE_HYDRATED_STATE = Symbol("USE_HYDRATED_STATE");
+
+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 form or pass a 'formId'.`
+  );
+};
+
+export const useContextSelectAtom = <T>(
+  formId: string | symbol,
+  selectorAtomCreator: FormSelectorAtomCreator<T>
+) => {
+  const formAtom = formRegistry(formId);
+  const selectorAtom = useMemo(
+    () => selectorAtomCreator(formAtom),
+    [formAtom, selectorAtomCreator]
+  );
+  return useAtomValue(selectorAtom, ATOM_SCOPE);
+};
+
+export const useUnknownFormContextSelectAtom = <T>(
+  formId: string | symbol | undefined,
+  selectorAtomCreator: FormSelectorAtomCreator<T>,
+  hookName: string
+) => {
+  const formContext = useInternalFormContext(formId, hookName);
+  return useContextSelectAtom(formContext.formId, selectorAtomCreator);
+};
+
+export const useHydratableSelector = <T, U>(
+  { formId }: InternalFormContextValue,
+  atomCreator: FormSelectorAtomCreator<T>,
+  dataToUse: U | typeof USE_HYDRATED_STATE,
+  selector: (data: U) => T = identity
+) => {
+  const dataFromState = useContextSelectAtom(formId, atomCreator);
+  return dataToUse === USE_HYDRATED_STATE ? dataFromState : selector(dataToUse);
+};
+
+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) => {
+  const response = useErrorResponseForForm(context);
+  const hydrated = useContextSelectAtom(context.formId, isHydratedAtom);
+  return hydrated ? USE_HYDRATED_STATE : response?.fieldErrors;
+};
+
+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 && dataKey in match.data);
+    return match?.data[dataKey];
+  }
+
+  return null;
+};
+
+export const useDefaultValuesForForm = (context: InternalFormContextValue) => {
+  const { formId, defaultValuesProp } = context;
+  const hydrated = useContextSelectAtom(formId, isHydratedAtom);
+  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 USE_HYDRATED_STATE;
+  if (errorResponse?.repopulateFields) return errorResponse.repopulateFields;
+  if (defaultValuesProp) return defaultValuesProp;
+  return defaultValuesFromLoader;
+};
+
+export const useHasActiveFormSubmit = ({
+  fetcher,
+}: InternalFormContextValue): boolean => {
+  const transition = useTransition();
+  const hasActiveSubmission = fetcher
+    ? fetcher.state === "submitting"
+    : !!transition.submission;
+  return hasActiveSubmission;
+};
+
+export const useFieldTouched = (
+  name: string,
+  { formId }: InternalFormContextValue
+) => {
+  const atomCreator = useMemo(() => fieldTouchedAtom(name), [name]);
+  return useContextSelectAtom(formId, atomCreator);
+};
+
+export const useFieldError = (
+  name: string,
+  context: InternalFormContextValue
+) => {
+  return useHydratableSelector(
+    context,
+    useMemo(() => fieldErrorAtom(name), [name]),
+    useFieldErrorsForForm(context),
+    (fieldErrors) => fieldErrors?.[name]
+  );
+};
+
+export const useFieldDefaultValue = (
+  name: string,
+  context: InternalFormContextValue
+) => {
+  return useHydratableSelector(
+    context,
+    useMemo(() => fieldDefaultValueAtom(name), [name]),
+    useDefaultValuesForForm(context),
+    (val) => lodashGet(val, name)
+  );
+};
+
+export const useFormUpdateAtom: typeof useUpdateAtom = (atom) =>
+  useUpdateAtom(atom, ATOM_SCOPE);
+
+export const useClearError = (context: InternalFormContextValue) => {
+  const clearError = useFormUpdateAtom(clearErrorAtom);
+  return useCallback(
+    (name: string) => {
+      clearError({ name, formAtom: formRegistry(context.formId) });
+    },
+    [clearError, context.formId]
+  );
+};
+
+export const useSetTouched = (context: InternalFormContextValue) => {
+  const setTouched = useFormUpdateAtom(setTouchedAtom);
+  return useCallback(
+    (name: string, touched: boolean) => {
+      setTouched({ name, formAtom: formRegistry(context.formId), touched });
+    },
+    [setTouched, context.formId]
+  );
+};

package/src/internal/state.ts

@@ -0,0 +1,210 @@
+import { atom } from "jotai";
+import { atomWithImmer } from "jotai/immer";
+import { atomFamily, selectAtom } from "jotai/utils";
+import lodashGet from "lodash/get";
+import { FieldErrors, TouchedFields } from "../validation/types";
+
+export const ATOM_SCOPE = Symbol("remix-validated-form-scope");
+
+export type FormState = {
+  // Actual state
+  hydrated: boolean;
+  fieldErrors?: FieldErrors;
+  isSubmitting: boolean;
+  hasBeenSubmitted: boolean;
+  touchedFields: TouchedFields;
+
+  // Populated by the form component
+  formId?: string;
+  action?: string;
+  subaction?: string;
+  defaultValues?: { [fieldName: string]: any };
+  validateField: (fieldName: string) => Promise<string | null>;
+  registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+};
+
+export type FormAtom = ReturnType<typeof formRegistry>;
+
+export type FieldState = {
+  touched: boolean;
+  defaultValue?: any;
+  error?: string;
+};
+
+export const formRegistry = atomFamily((formId: string | symbol) =>
+  atomWithImmer<FormState>({
+    hydrated: false,
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+
+    // The symbol version is just to keep things straight with the `atomFamily`
+    formId: typeof formId === "string" ? formId : undefined,
+
+    // Will change upon hydration -- these will never actually be used
+    validateField: () => Promise.resolve(null),
+    registerReceiveFocus: () => () => {},
+  })
+);
+
+export const fieldErrorAtom = (name: string) => (formAtom: FormAtom) =>
+  selectAtom(formAtom, (formState) => formState.fieldErrors?.[name]);
+
+export const fieldTouchedAtom = (name: string) => (formAtom: FormAtom) =>
+  selectAtom(formAtom, (formState) => formState.touchedFields[name]);
+
+export const fieldDefaultValueAtom = (name: string) => (formAtom: FormAtom) =>
+  selectAtom(
+    formAtom,
+    (formState) =>
+      formState.defaultValues && lodashGet(formState.defaultValues, name)
+  );
+
+// Selector atoms
+
+export const formSelectorAtom =
+  <T>(selector: (state: FormState) => T) =>
+  (formAtom: FormAtom) =>
+    selectAtom(formAtom, selector);
+
+export const fieldErrorsAtom = formSelectorAtom((state) => state.fieldErrors);
+export const touchedFieldsAtom = formSelectorAtom(
+  (state) => state.touchedFields
+);
+export const actionAtom = formSelectorAtom((state) => state.action);
+export const hasBeenSubmittedAtom = formSelectorAtom(
+  (state) => state.hasBeenSubmitted
+);
+export const validateFieldAtom = formSelectorAtom(
+  (state) => state.validateField
+);
+export const registerReceiveFocusAtom = formSelectorAtom(
+  (state) => state.registerReceiveFocus
+);
+export const isSubmittingAtom = formSelectorAtom((state) => state.isSubmitting);
+export const defaultValuesAtom = formSelectorAtom(
+  (state) => state.defaultValues
+);
+export const isValidAtom = formSelectorAtom(
+  (state) => Object.keys(state.fieldErrors ?? {}).length === 0
+);
+export const isHydratedAtom = formSelectorAtom((state) => state.hydrated);
+
+// Update atoms
+
+export type FieldAtomArgs = {
+  name: string;
+  formAtom: FormAtom;
+};
+
+export const clearErrorAtom = atom(
+  null,
+  (get, set, { name, formAtom }: FieldAtomArgs) =>
+    set(formAtom, (state) => {
+      delete state.fieldErrors?.[name];
+      return state;
+    })
+);
+
+export const addErrorAtom = atom(
+  null,
+  (get, set, { name, formAtom, error }: FieldAtomArgs & { error: string }) =>
+    set(formAtom, (state) => {
+      if (!state.fieldErrors) state.fieldErrors = {};
+      state.fieldErrors[name] = error;
+      return state;
+    })
+);
+
+export const setFieldErrorsAtom = atom(
+  null,
+  (
+    get,
+    set,
+    { formAtom, fieldErrors }: { fieldErrors: FieldErrors; formAtom: FormAtom }
+  ) =>
+    set(formAtom, (state) => {
+      state.fieldErrors = fieldErrors;
+      return state;
+    })
+);
+
+export const setTouchedAtom = atom(
+  null,
+  (
+    get,
+    set,
+    { name, formAtom, touched }: FieldAtomArgs & { touched: boolean }
+  ) =>
+    set(formAtom, (state) => {
+      state.touchedFields[name] = touched;
+      return state;
+    })
+);
+
+export const resetAtom = atom(
+  null,
+  (get, set, { formAtom }: { formAtom: FormAtom }) => {
+    set(formAtom, (state) => {
+      state.fieldErrors = {};
+      state.touchedFields = {};
+      state.hasBeenSubmitted = false;
+      return state;
+    });
+  }
+);
+
+export const startSubmitAtom = atom(
+  null,
+  (get, set, { formAtom }: { formAtom: FormAtom }) => {
+    set(formAtom, (state) => {
+      state.hasBeenSubmitted = true;
+      state.isSubmitting = true;
+      return state;
+    });
+  }
+);
+
+export const endSubmitAtom = atom(
+  null,
+  (get, set, { formAtom }: { formAtom: FormAtom }) => {
+    set(formAtom, (state) => {
+      state.isSubmitting = false;
+      return state;
+    });
+  }
+);
+
+type SyncFormContextArgs = {
+  defaultValues?: { [fieldName: string]: any };
+  action?: string;
+  subaction?: string;
+  validateField: FormState["validateField"];
+  registerReceiveFocus: FormState["registerReceiveFocus"];
+  formAtom: FormAtom;
+};
+export const syncFormContextAtom = atom(
+  null,
+  (
+    get,
+    set,
+    {
+      defaultValues,
+      action,
+      subaction,
+      formAtom,
+      validateField,
+      registerReceiveFocus,
+    }: SyncFormContextArgs
+  ) => {
+    set(formAtom, (state) => {
+      state.defaultValues = defaultValues;
+      state.action = action;
+      state.subaction = subaction;
+      state.registerReceiveFocus = registerReceiveFocus;
+      state.validateField = validateField;
+      state.hydrated = true;
+      return state;
+    });
+  }
+);

package/src/internal/util.ts

@@ -1,4 +1,5 @@
 import type React from "react";
+import { useEffect, useLayoutEffect } from "react";
 
 export const omit = (obj: any, ...keys: string[]) => {
   const result = { ...obj };
@@ -21,3 +22,6 @@ export const mergeRefs = <T = any>(
     });
   };
 };
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/src/server.ts

@@ -1,4 +1,8 @@
 import { json } from "@remix-run/server-runtime";
+import {
+  formDefaultValuesKey,
+  FORM_DEFAULTS_FIELD,
+} from "./internal/constants";
 import {
   ValidatorError,
   ValidationErrorResponseData,
@@ -27,7 +31,19 @@ export function validationError(
       fieldErrors: error.fieldErrors,
       subaction: error.subaction,
       repopulateFields,
+      formId: error.formId,
     },
     { status: 422 }
   );
 }
+
+export type FormDefaults = {
+  [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
+};
+
+export const setFormDefaults = <DataType = any>(
+  formId: string,
+  defaultValues: Partial<DataType>
+): FormDefaults => ({
+  [formDefaultValuesKey(formId)]: defaultValues,
+});

package/src/userFacingFormContext.ts

@@ -0,0 +1,129 @@
+import { useCallback } from "react";
+import { useIsSubmitting, useIsValid } from "./hooks";
+import {
+  useClearError,
+  useContextSelectAtom,
+  useDefaultValuesForForm,
+  useFieldErrorsForForm,
+  useHydratableSelector,
+  useInternalFormContext,
+  useSetTouched,
+} from "./internal/hooks";
+import {
+  actionAtom,
+  defaultValuesAtom,
+  fieldErrorsAtom,
+  hasBeenSubmittedAtom,
+  registerReceiveFocusAtom,
+  touchedFieldsAtom,
+  validateFieldAtom,
+} from "./internal/state";
+import { FieldErrors, TouchedFields } from "./validation/types";
+
+export type FormContextValue = {
+  /**
+   * All the errors in all the fields in the form.
+   */
+  fieldErrors: FieldErrors;
+  /**
+   * Clear the errors of the specified fields.
+   */
+  clearError: (...names: string[]) => void;
+  /**
+   * Validate the specified field.
+   */
+  validateField: (fieldName: string) => Promise<string | null>;
+  /**
+   * The `action` prop of the form.
+   */
+  action?: string;
+  /**
+   * 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.
+   */
+  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;
+};
+
+/**
+ * Provides access to some of the internal state of the form.
+ */
+export const useFormContext = (formId?: string): FormContextValue => {
+  // Try to access context so we get our error specific to this hook if it's not there
+  const context = useInternalFormContext(formId, "useFormContext");
+
+  const action = useContextSelectAtom(context.formId, actionAtom);
+  const isSubmitting = useIsSubmitting(formId);
+  const hasBeenSubmitted = useContextSelectAtom(
+    context.formId,
+    hasBeenSubmittedAtom
+  );
+  const isValid = useIsValid(formId);
+  const defaultValues = useHydratableSelector(
+    context,
+    defaultValuesAtom,
+    useDefaultValuesForForm(context)
+  );
+  const fieldErrors = useHydratableSelector(
+    context,
+    fieldErrorsAtom,
+    useFieldErrorsForForm(context)
+  );
+
+  const setFieldTouched = useSetTouched(context);
+  const touchedFields = useContextSelectAtom(context.formId, touchedFieldsAtom);
+  const validateField = useContextSelectAtom(context.formId, validateFieldAtom);
+  const registerReceiveFocus = useContextSelectAtom(
+    context.formId,
+    registerReceiveFocusAtom
+  );
+
+  const internalClearError = useClearError(context);
+  const clearError = useCallback(
+    (...names: string[]) => {
+      names.forEach((name) => {
+        internalClearError(name);
+      });
+    },
+    [internalClearError]
+  );
+
+  return {
+    isSubmitting,
+    hasBeenSubmitted,
+    isValid,
+    defaultValues,
+    clearError,
+    fieldErrors: fieldErrors ?? {},
+    action,
+    setFieldTouched,
+    touchedFields,
+    validateField,
+    registerReceiveFocus,
+  };
+};