Multi Step Form

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3 
4/**
5 * Multi-step form: a dependency-free form-state layer designed to sit on top of
6 * the <Stepper /> UI. It owns values, per-field errors, touched state, and the
7 * active step, and gates forward navigation on the current step's validator.
8 * Stepper renders the indicator; this drives its `activeStep`.
9 */
10 
11export type StepValidator<V> = (values: V) => Record<string, string> | null
12 
13export interface MultiStepFormStep<V> {
14  id: string
15  validate?: StepValidator<V>
16}
17 
18interface MultiStepFormContextValue<V> {
19  values: V
20  setValue: <K extends keyof V>(name: K, value: V[K]) => void
21  errors: Record<string, string>
22  touched: Record<string, boolean>
23  activeStep: number
24  next: () => void
25  back: () => void
26  goTo: (step: number) => void
27  canGoNext: boolean
28  isStepValid: boolean
29  isFirstStep: boolean
30  isLastStep: boolean
31  submit: () => void
32}
33 
34// One context object reused for every value type; consumers read it through the
35// typed useMultiStepForm<V>() hook below.
36const MultiStepFormContext = React.createContext<MultiStepFormContextValue<unknown> | null>(null)
37 
38export interface MultiStepFormProps<V> {
39  steps: MultiStepFormStep<V>[]
40  initialValues: V
41  onSubmit: (values: V) => void
42  children: React.ReactNode
43}
44 
45export function MultiStepForm<V>({
46  steps,
47  initialValues,
48  onSubmit,
49  children,
50}: MultiStepFormProps<V>) {
51  const [values, setValues] = React.useState<V>(initialValues)
52  const [errors, setErrors] = React.useState<Record<string, string>>({})
53  const [touched, setTouched] = React.useState<Record<string, boolean>>({})
54  const [activeStep, setActiveStep] = React.useState(0)
55 
56  const totalSteps = steps.length
57  const isFirstStep = activeStep === 0
58  const isLastStep = activeStep === totalSteps - 1
59 
60  const setValue = React.useCallback(<K extends keyof V>(name: K, value: V[K]) => {
61    setValues((prev) => ({ ...prev, [name]: value }))
62    setTouched((prev) => ({ ...prev, [name as string]: true }))
63    setErrors((prev) => {
64      if (!(name as string in prev)) return prev
65      const next = { ...prev }
66      delete next[name as string]
67      return next
68    })
69  }, [])
70 
71  // Validate the current step against the latest values. Returns true when the
72  // step has no validator or the validator returns null; otherwise publishes
73  // the errors and returns false.
74  const validateStep = React.useCallback(
75    (step: number): boolean => {
76// … truncated