remix-validated-form 4.0.2 → 4.1.0

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

package/src/validation/createValidator.ts

@@ -1,4 +1,5 @@
 import { CreateValidatorArg, GenericObject, Validator } from "..";
+import { FORM_ID_FIELD } from "../internal/constants";
 import { objectFromPathEntries } from "../internal/flatten";
 
 const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
@@ -28,8 +29,10 @@ export function createValidator<T>(
           error: {
             fieldErrors: result.error,
             subaction: data.subaction,
+            formId: data[FORM_ID_FIELD],
           },
           submittedData: data,
+          formId: data[FORM_ID_FIELD],
         };
       }
 
@@ -37,6 +40,7 @@ export function createValidator<T>(
         data: result.data,
         error: undefined,
         submittedData: data,
+        formId: data[FORM_ID_FIELD],
       };
     },
     validateField: (data: GenericObject | FormData, field: string) =>

package/src/validation/types.ts

@@ -6,16 +6,18 @@ export type GenericObject = { [key: string]: any };
 
 export type ValidatorError = {
   subaction?: string;
+  formId?: string;
   fieldErrors: FieldErrors;
 };
 
 export type ValidationErrorResponseData = {
   subaction?: string;
+  formId?: string;
   fieldErrors: FieldErrors;
   repopulateFields?: unknown;
 };
 
-export type BaseResult = { submittedData: GenericObject };
+export type BaseResult = { submittedData: GenericObject; formId?: string };
 export type ErrorResult = BaseResult & {
   error: ValidatorError;
   data: undefined;