remix-validated-form 5.0.2 → 5.1.0

package/src/internal/state/fieldArray.tsx

@@ -1,197 +0,0 @@
-import { nanoid } from "nanoid";
-import React, { useMemo, useRef, useState } from "react";
-import { useCallback } from "react";
-import invariant from "tiny-invariant";
-import { InternalFormContextValue } from "../formContext";
-import {
-  useFieldDefaultValue,
-  useFieldError,
-  useInternalFormContext,
-  useInternalHasBeenSubmitted,
-  useSmartValidate,
-} from "../hooks";
-import * as arrayUtil from "./arrayUtil";
-import { useRegisterControlledField } from "./controlledFields";
-import { useFormStore } from "./storeHooks";
-
-export type FieldArrayValidationBehavior = "onChange" | "onSubmit";
-
-export type FieldArrayValidationBehaviorOptions = {
-  initial: FieldArrayValidationBehavior;
-  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,
-  validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>
-) => {
-  const value = useFieldDefaultValue(field, context);
-  useRegisterControlledField(context, field);
-  const hasBeenSubmitted = useInternalHasBeenSubmitted(context.formId);
-  const validateField = useSmartValidate(context.formId);
-  const error = useFieldError(field, context);
-
-  const resolvedValidationBehavior: FieldArrayValidationBehaviorOptions = {
-    initial: "onSubmit",
-    whenSubmitted: "onChange",
-    ...validationBehavior,
-  };
-
-  const behavior = hasBeenSubmitted
-    ? resolvedValidationBehavior.whenSubmitted
-    : resolvedValidationBehavior.initial;
-
-  const maybeValidate = useCallback(() => {
-    if (behavior === "onChange") {
-      validateField({ alwaysIncludeErrorsFromFields: [field] });
-    }
-  }, [behavior, field, validateField]);
-
-  invariant(
-    value === undefined || value === null || Array.isArray(value),
-    `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`
-  );
-
-  const arr = useFormStore(
-    context.formId,
-    (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 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> = {
-  push: (item: Item) => void;
-  swap: (indexA: number, indexB: number) => void;
-  move: (from: number, to: number) => void;
-  insert: (index: number, value: Item) => void;
-  unshift: (value: Item) => void;
-  remove: (index: number) => void;
-  pop: () => void;
-  replace: (index: number, value: Item) => void;
-};
-
-export type UseFieldArrayOptions = {
-  formId?: string;
-  validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>;
-};
-
-export function useFieldArray<Item = any>(
-  name: string,
-  { formId, validationBehavior }: UseFieldArrayOptions = {}
-) {
-  const context = useInternalFormContext(formId, "FieldArray");
-
-  return useInternalFieldArray(context, name, validationBehavior) as [
-    items: FieldArrayItem<Item>[],
-    helpers: FieldArrayHelpers,
-    error: string | undefined
-  ];
-}
-
-export type FieldArrayProps<Item> = {
-  name: string;
-  children: (
-    items: FieldArrayItem<Item>[],
-    helpers: FieldArrayHelpers<Item>,
-    error: string | undefined
-  ) => React.ReactNode;
-  formId?: string;
-  validationBehavior?: FieldArrayValidationBehaviorOptions;
-};
-
-export function FieldArray<Item = any>({
-  name,
-  children,
-  formId,
-  validationBehavior,
-}: FieldArrayProps<Item>) {
-  const context = useInternalFormContext(formId, "FieldArray");
-  const [value, helpers, error] = useInternalFieldArray(
-    context,
-    name,
-    validationBehavior
-  );
-  return <>{children(value, helpers, error)}</>;
-}

package/src/internal/state/storeHooks.ts

@@ -1,9 +0,0 @@
-import { FormState, useRootFormStore } from "./createFormStore";
-import { InternalFormId } from "./types";
-
-export const useFormStore = <T>(
-  formId: InternalFormId,
-  selector: (state: FormState) => T
-) => {
-  return useRootFormStore((state) => selector(state.form(formId)));
-};

package/src/internal/state/types.ts

@@ -1 +0,0 @@
-export type InternalFormId = string | symbol;

package/src/internal/submissionCallbacks.ts

@@ -1,15 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export function useSubmitComplete(isSubmitting: boolean, callback: () => void) {
-  const isPending = useRef(false);
-  useEffect(() => {
-    if (isSubmitting) {
-      isPending.current = true;
-    }
-
-    if (!isSubmitting && isPending.current) {
-      isPending.current = false;
-      callback();
-    }
-  });
-}

package/src/internal/util.ts

@@ -1,39 +0,0 @@
-import type React from "react";
-import { useEffect, useLayoutEffect, useRef } from "react";
-import * as R from "remeda";
-
-export const omit = (obj: any, ...keys: string[]) => {
-  const result = { ...obj };
-  for (const key of keys) {
-    delete result[key];
-  }
-  return result;
-};
-
-export const mergeRefs = <T = any>(
-  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined>
-): React.RefCallback<T> => {
-  return (value: T) => {
-    refs.filter(Boolean).forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref != null) {
-        (ref as React.MutableRefObject<T | null>).current = value;
-      }
-    });
-  };
-};
-
-export const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
-
-export const useDeepEqualsMemo = <T>(item: T): T => {
-  const ref = useRef<T>(item);
-  const areEqual = ref.current === item || R.equals(ref.current, item);
-  useEffect(() => {
-    if (!areEqual) {
-      ref.current = item;
-    }
-  });
-  return areEqual ? ref.current : item;
-};

package/src/server.ts

@@ -1,53 +0,0 @@
-import { json } from "@remix-run/server-runtime";
-import {
-  formDefaultValuesKey,
-  FORM_DEFAULTS_FIELD,
-} from "./internal/constants";
-import {
-  ValidatorError,
-  ValidationErrorResponseData,
-} from "./validation/types";
-
-/**
- * Takes the errors from a `Validator` and returns a `Response`.
- * When you return this from your action, `ValidatedForm` on the frontend will automatically
- * display the errors on the correct fields on the correct form.
- *
- * You can also provide a second argument to `validationError`
- * to specify how to repopulate the form when JS is disabled.
- *
- * @example
- * ```ts
- * const result = validator.validate(await request.formData());
- * if (result.error) return validationError(result.error, result.submittedData);
- * ```
- */
-export function validationError(
-  error: ValidatorError,
-  repopulateFields?: unknown,
-  init?: ResponseInit
-) {
-  return json<ValidationErrorResponseData>(
-    {
-      fieldErrors: error.fieldErrors,
-      subaction: error.subaction,
-      repopulateFields,
-      formId: error.formId,
-    },
-    { status: 422, ...init }
-  );
-}
-
-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>
-): FormDefaults => ({
-  [formDefaultValuesKey(formId)]: defaultValues,
-});

package/src/unreleased/formStateHooks.ts

@@ -1,170 +0,0 @@
-import { useMemo } from "react";
-import {} from "../internal/getInputProps";
-import {
-  useInternalFormContext,
-  useClearError,
-  useSetTouched,
-  useDefaultValuesForForm,
-  useFieldErrorsForForm,
-  useInternalIsSubmitting,
-  useInternalHasBeenSubmitted,
-  useTouchedFields,
-  useInternalIsValid,
-  useFieldErrors,
-  useValidate,
-  useSetFieldErrors,
-  useResetFormElement,
-  useSyncedDefaultValues,
-  useFormActionProp,
-  useFormSubactionProp,
-  useSubmitForm,
-  useFormValues,
-  useSmartValidate,
-} from "../internal/hooks";
-import {
-  FieldErrors,
-  TouchedFields,
-  ValidationResult,
-} from "../validation/types";
-
-export type FormState = {
-  fieldErrors: FieldErrors;
-  isSubmitting: boolean;
-  hasBeenSubmitted: boolean;
-  touchedFields: TouchedFields;
-  defaultValues: { [fieldName: string]: any };
-  action?: string;
-  subaction?: string;
-  isValid: boolean;
-};
-
-/**
- * Returns information about the form.
- *
- * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
- */
-export const useFormState = (formId?: string): FormState => {
-  const formContext = useInternalFormContext(formId, "useFormState");
-  const isSubmitting = useInternalIsSubmitting(formContext.formId);
-  const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
-  const touchedFields = useTouchedFields(formContext.formId);
-  const isValid = useInternalIsValid(formContext.formId);
-  const action = useFormActionProp(formContext.formId);
-  const subaction = useFormSubactionProp(formContext.formId);
-
-  const syncedDefaultValues = useSyncedDefaultValues(formContext.formId);
-  const defaultValuesToUse = useDefaultValuesForForm(formContext);
-  const hydratedDefaultValues =
-    defaultValuesToUse.hydrateTo(syncedDefaultValues);
-
-  const fieldErrorsFromState = useFieldErrors(formContext.formId);
-  const fieldErrorsToUse = useFieldErrorsForForm(formContext);
-  const hydratedFieldErrors = fieldErrorsToUse.hydrateTo(fieldErrorsFromState);
-
-  return useMemo(
-    () => ({
-      action,
-      subaction,
-      defaultValues: hydratedDefaultValues,
-      fieldErrors: hydratedFieldErrors ?? {},
-      hasBeenSubmitted,
-      isSubmitting,
-      touchedFields,
-      isValid,
-    }),
-    [
-      action,
-      hasBeenSubmitted,
-      hydratedDefaultValues,
-      hydratedFieldErrors,
-      isSubmitting,
-      isValid,
-      subaction,
-      touchedFields,
-    ]
-  );
-};
-
-export type FormHelpers = {
-  /**
-   * Clear the error of the specified field.
-   */
-  clearError: (fieldName: string) => void;
-  /**
-   * Validate the specified field.
-   */
-  validateField: (fieldName: string) => Promise<string | null>;
-  /**
-   * Change the touched state of the specified field.
-   */
-  setTouched: (fieldName: string, touched: boolean) => void;
-  /**
-   * Validate the whole form and populate any errors.
-   */
-  validate: () => Promise<ValidationResult<unknown>>;
-  /**
-   * Clears all errors on the form.
-   */
-  clearAllErrors: () => void;
-  /**
-   * Resets the form.
-   *
-   * _Note_: The equivalent behavior can be achieved by calling formElement.reset()
-   * or clicking a button element with `type="reset"`.
-   */
-  reset: () => void;
-  /**
-   * Submits the form, running all validations first.
-   *
-   * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
-   */
-  submit: () => void;
-  /**
-   * Returns the current form values as FormData
-   */
-  getValues: () => FormData;
-};
-
-/**
- * Returns helpers that can be used to update the form state.
- *
- * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
- */
-export const useFormHelpers = (formId?: string): FormHelpers => {
-  const formContext = useInternalFormContext(formId, "useFormHelpers");
-  const setTouched = useSetTouched(formContext);
-  const validateField = useSmartValidate(formContext.formId);
-  const validate = useValidate(formContext.formId);
-  const clearError = useClearError(formContext);
-  const setFieldErrors = useSetFieldErrors(formContext.formId);
-  const reset = useResetFormElement(formContext.formId);
-  const submit = useSubmitForm(formContext.formId);
-  const getValues = useFormValues(formContext.formId);
-  return useMemo(
-    () => ({
-      setTouched,
-      validateField: async (fieldName: string) => {
-        const res = await validateField({
-          alwaysIncludeErrorsFromFields: [fieldName],
-        });
-        return res.error?.fieldErrors[fieldName] ?? null;
-      },
-      clearError,
-      validate,
-      clearAllErrors: () => setFieldErrors({}),
-      reset,
-      submit,
-      getValues,
-    }),
-    [
-      clearError,
-      reset,
-      setFieldErrors,
-      setTouched,
-      submit,
-      validate,
-      validateField,
-      getValues,
-    ]
-  );
-};

package/src/userFacingFormContext.ts

@@ -1,147 +0,0 @@
-import { useCallback, useMemo } from "react";
-import {
-  useInternalFormContext,
-  useRegisterReceiveFocus,
-} from "./internal/hooks";
-import { useFormHelpers, useFormState } from "./unreleased/formStateHooks";
-import {
-  FieldErrors,
-  TouchedFields,
-  ValidationResult,
-} 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;
-  /**
-   * The `subaction` prop of the form.
-   */
-  subaction?: 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;
-  /**
-   * Validate the whole form and populate any errors.
-   */
-  validate: () => Promise<ValidationResult<unknown>>;
-  /**
-   * Clears all errors on the form.
-   */
-  clearAllErrors: () => void;
-  /**
-   * Resets the form.
-   *
-   * _Note_: The equivalent behavior can be achieved by calling formElement.reset()
-   * or clicking a button element with `type="reset"`.
-   */
-  reset: () => void;
-  /**
-   * Submits the form, running all validations first.
-   *
-   * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
-   */
-  submit: () => void;
-  /**
-   * Returns the current form values as FormData
-   */
-  getValues: () => FormData;
-};
-
-/**
- * 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 state = useFormState(formId);
-  const {
-    clearError: internalClearError,
-    setTouched,
-    validateField,
-    clearAllErrors,
-    validate,
-    reset,
-    submit,
-    getValues,
-  } = useFormHelpers(formId);
-
-  const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
-
-  const clearError = useCallback(
-    (...names: string[]) => {
-      names.forEach((name) => {
-        internalClearError(name);
-      });
-    },
-    [internalClearError]
-  );
-
-  return useMemo(
-    () => ({
-      ...state,
-      setFieldTouched: setTouched,
-      validateField,
-      clearError,
-      registerReceiveFocus,
-      clearAllErrors,
-      validate,
-      reset,
-      submit,
-      getValues,
-    }),
-    [
-      clearAllErrors,
-      clearError,
-      registerReceiveFocus,
-      reset,
-      setTouched,
-      state,
-      submit,
-      validate,
-      validateField,
-      getValues,
-    ]
-  );
-};

package/src/validation/createValidator.ts

@@ -1,53 +0,0 @@
-import * as R from "remeda";
-import { CreateValidatorArg, GenericObject, Validator } from "..";
-import { FORM_ID_FIELD } from "../internal/constants";
-import { objectFromPathEntries } from "../internal/flatten";
-
-const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
-  // A slightly janky way of determining if the data is a FormData object
-  // since node doesn't really have FormData
-  if ("entries" in data && typeof data.entries === "function")
-    return objectFromPathEntries([...data.entries()]);
-  return objectFromPathEntries(Object.entries(data));
-};
-
-const omitInternalFields = (data: GenericObject): GenericObject =>
-  R.omit(data, [FORM_ID_FIELD]);
-
-/**
- * Used to create a validator for a form.
- * It provides built-in handling for unflattening nested objects and
- * extracting the values from FormData.
- */
-export function createValidator<T>(
-  validator: CreateValidatorArg<T>
-): Validator<T> {
-  return {
-    validate: async (value) => {
-      const data = preprocessFormData(value);
-      const result = await validator.validate(omitInternalFields(data));
-
-      if (result.error) {
-        return {
-          data: undefined,
-          error: {
-            fieldErrors: result.error,
-            subaction: data.subaction,
-            formId: data[FORM_ID_FIELD],
-          },
-          submittedData: data,
-          formId: data[FORM_ID_FIELD],
-        };
-      }
-
-      return {
-        data: result.data,
-        error: undefined,
-        submittedData: data,
-        formId: data[FORM_ID_FIELD],
-      };
-    },
-    validateField: (data: GenericObject | FormData, field: string) =>
-      validator.validateField(preprocessFormData(data), field),
-  };
-}