Multi-step viewer hook

1'use client'
2import type { JSX } from 'react'
3import { createContext, type ReactNode, useContext, useState } from 'react'
4
5export interface Stepfields {
6	fields: string[]
7	component: JSX.Element
8}
9
10export interface UseMultiFormStepsReturn {
11	steps: Stepfields[]
12	currentStepIndex: number
13	currentStepData: Stepfields
14	progress: number
15	isFirstStep: boolean
16	isLastStep: boolean
17	goToNext: () => Promise<boolean>
18	goToPrevious: () => void
19	goToFirstStep: () => void
20	goToStep: (stepNumber: number) => void
21	setSteps: (newSteps: Stepfields[]) => void
22}
23
24// Context type
25interface MultiStepFormContextType extends UseMultiFormStepsReturn {}
26
27// Create context
28const MultiStepFormContext = createContext<MultiStepFormContextType | null>(
29	null,
30)
31
32// Provider props
33interface MultiStepFormProviderProps {
34	children: ReactNode
35	stepsFields: Stepfields[]
36	onStepValidation?: (step: Stepfields) => Promise<boolean> | boolean
37}
38
39// Provider component
40export function MultiStepFormProvider({
41	children,
42	stepsFields,
43	onStepValidation,
44}: MultiStepFormProviderProps) {
45	const [steps, setStepsState] = useState<Stepfields[]>(stepsFields)
46	const [currentStepIndex, setCurrentStepIndex] = useState(1)
47
48	const goToNext = async () => {
49		const currentStepData = steps[currentStepIndex - 1]
50
51		if (onStepValidation) {
52			const isValid = await onStepValidation(currentStepData)
53			if (!isValid) return false
54		}
55
56		if (currentStepIndex < steps.length) {
57			setCurrentStepIndex((prev) => prev + 1)
58			return true
59		}
60		return false
61	}
62
63	const goToPrevious = () => {
64		if (currentStepIndex > 1) {
65			setCurrentStepIndex((prev) => prev - 1)
66		}
67	}
68
69	const goToFirstStep = () => {
70		setCurrentStepIndex(1)
71	}
72
73	const goToStep = (stepNumber: number) => {
74		if (stepNumber >= 1 && stepNumber <= steps.length) {
75			setCurrentStepIndex(stepNumber)
76		}
77	}
78
79	const setSteps = (newSteps: Stepfields[]) => {
80		setStepsState(newSteps)
81		// Reset to first step if current step is out of bounds
82		if (currentStepIndex > newSteps.length) {
83			setCurrentStepIndex(1)
84		}
85	}
86
87	const value: MultiStepFormContextType = {
88		steps,
89		currentStepIndex: currentStepIndex,
90		currentStepData: steps[currentStepIndex - 1],
91		progress: (currentStepIndex / steps.length) * 100,
92		isFirstStep: currentStepIndex === 1,
93		isLastStep: currentStepIndex === steps.length,
94		goToNext,
95		goToPrevious,
96		goToFirstStep,
97		goToStep,
98		setSteps,
99	}
100
101// … truncated