Multi-Step Wizard Form With a Context-Driven State Machine in React

import { createContext, useContext, useReducer, useMemo } from 'react';
import { wizardMachine, transition, canLeave } from './wizardMachine';

const WizardContext = createContext(null);

function reducer(state, action) {
  switch (action.type) {
    case 'PATCH':
      return { ...state, data: { ...state.data, ...action.patch } };
    case 'NEXT': {
      const next = transition(state.state, 'NEXT', state.data);
      if (next === state.state) return state;
      return { ...state, state: next, history: [...state.history, state.state] };
    }
    case 'BACK': {
      const prev = transition(state.state, 'BACK', state.data);
      return { ...state, state: prev, history: state.history.slice(0, -1) };
    }
    default:
      return state;
  }
}

export function WizardProvider({ children, initialData = {} }) {
  const [state, dispatch] = useReducer(reducer, {
    state: wizardMachine.initial,
    data: initialData,
    history: [],
  });

  const value = useMemo(() => ({
    step: state.state,
    data: state.data,
    canAdvance: canLeave(state.state, state.data),
    canGoBack: state.history.length > 0,
    patch: (patch) => dispatch({ type: 'PATCH', patch }),
    next: () => dispatch({ type: 'NEXT' }),
    back: () => dispatch({ type: 'BACK' }),
  }), [state]);

  return <WizardContext.Provider value={value}>{children}</WizardContext.Provider>;
}

export function useWizard() {
  const ctx = useContext(WizardContext);
  if (!ctx) throw new Error('useWizard must be used within a WizardProvider');
  return ctx;
}

import { WizardProvider, useWizard } from './WizardContext';
import AccountStep from './steps/AccountStep';
import ProfileStep from './steps/ProfileStep';
import BillingStep from './steps/BillingStep';
import ReviewStep from './steps/ReviewStep';

const STEP_COMPONENTS = {
  account: AccountStep,
  profile: ProfileStep,
  billing: BillingStep,
  review: ReviewStep,
};

const STEP_ORDER = ['account', 'profile', 'billing', 'review'];

function WizardShell({ onComplete }) {
  const { step, canAdvance, canGoBack, next, back } = useWizard();
  const StepComponent = STEP_COMPONENTS[step];
  const isLast = step === 'review';

  return (
    <form onSubmit={(e) => e.preventDefault()} className="wizard">
      <ol className="wizard__progress">
        {STEP_ORDER.map((id) => (
          <li key={id} aria-current={id === step ? 'step' : undefined}>{id}</li>
        ))}
      </ol>

      <StepComponent />

      <footer className="wizard__nav">
        <button type="button" onClick={back} disabled={!canGoBack}>Back</button>
        {isLast ? (
          <button type="button" onClick={onComplete} disabled={!canAdvance}>Submit</button>
        ) : (
          <button type="button" onClick={next} disabled={!canAdvance}>Continue</button>
        )}
      </footer>
    </form>
  );
}

export default function WizardForm({ initialData, onComplete }) {
  return (
    <WizardProvider initialData={initialData}>
      <WizardShell onComplete={onComplete} />
    </WizardProvider>
  );
}