@matthew.ngo/reform/src/features/wizard/useReformWizard.ts

A flexible and powerful React form management library with advanced validation, state observation, and multi-group support

import { useFormWizard } from "./useFormWizard";
import { FormWizardConfig } from "./types";
import { ReformReturn } from "../../types";
import { useMemo } from "react";

/**
 * Hook wrapper for form wizard functionality in Reform forms
 * 
 * @template T - The type of form data
 * @param reform - Reform hook return value
 * @param config - Configuration for the form wizard
 * @returns Form wizard state and methods
 * 
 * @example
 * // Basic usage
 * const reform = useReform<UserForm>({...});
 * const wizard = useReformWizard(reform, {
 *   steps: [
 *     { id: 'personal', label: 'Personal Info', groupIndices: [0] },
 *     { id: 'contact', label: 'Contact Info', groupIndices: [1] }
 *   ]
 * });
 * 
 * // Navigate between steps
 * <button onClick={wizard.nextStep}>Next</button>
 */
export const useReformWizard = <T extends Record<string, any>>(
  reform: ReformReturn<T>,
  config: FormWizardConfig<T>
) => {
  // Memoize config to prevent unnecessary re-renders
  const memoizedConfig = useMemo(() => ({
    ...config,
    steps: config.steps,
    initialStepId: config.initialStepId || config.steps[0]?.id || "",
    validateOnNext: config.validateOnNext ?? true,
    allowSkipSteps: config.allowSkipSteps ?? false,
    markCompletedOnLeave: config.markCompletedOnLeave ?? true,
    persistState: config.persistState ?? false,
    persistStateKey: config.persistStateKey ?? "reform-wizard-state",
  }), [
    // Use JSON.stringify for complex objects to compare by value
    JSON.stringify(config.steps),
    config.initialStepId,
    config.validateOnNext,
    config.allowSkipSteps,
    config.markCompletedOnLeave,
    config.persistState,
    config.persistStateKey,
    config.onStepCompleted,
    config.onWizardCompleted
  ]);

  // Use the optimized form wizard hook with memoized config
  return useFormWizard(reform, memoizedConfig);
};