react-vite-themes/dist/hooks/useMultiStepForm.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { createContext, useContext, useState, useCallback } from 'react';
// Create context
const MultiStepFormContext = createContext(null);
// Hook to use MultiStepForm context
export const useMultiStepForm = () => {
    const context = useContext(MultiStepFormContext);
    if (!context) {
        throw new Error('useMultiStepForm must be used within a MultiStepForm component');
    }
    return context;
};
// Hook to create MultiStepForm state
export const useMultiStepFormState = (steps, initialData = {}, onSubmit) => {
    const [currentStep, setCurrentStep] = useState(0);
    const [formData, setFormData] = useState(initialData);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const totalSteps = steps.length;
    const isFirstStep = currentStep === 0;
    const isLastStep = currentStep === totalSteps - 1;
    // Update field value
    const updateField = useCallback((name, value) => {
        setFormData(prev => ({ ...prev, [name]: value }));
    }, []);
    // Navigate to next step
    const nextStep = useCallback(() => {
        if (!isLastStep) {
            setCurrentStep(prev => prev + 1);
        }
    }, [isLastStep]);
    // Navigate to previous step
    const prevStep = useCallback(() => {
        if (!isFirstStep) {
            setCurrentStep(prev => prev - 1);
        }
    }, [isFirstStep]);
    // Go to specific step
    const goToStep = useCallback((step) => {
        if (step >= 0 && step < totalSteps) {
            setCurrentStep(step);
        }
    }, [totalSteps]);
    // Check if step is valid (placeholder - can be enhanced with validation)
    const isStepValid = useCallback((step) => {
        // For now, all steps are considered valid
        // This can be enhanced with step-specific validation
        return step >= 0 && step < totalSteps;
    }, [totalSteps]);
    // Handle form submission
    const handleSubmit = useCallback(async () => {
        if (isSubmitting)
            return;
        setIsSubmitting(true);
        try {
            if (onSubmit) {
                await onSubmit(formData);
            }
        }
        catch (error) {
            console.error('MultiStepForm submission error:', error);
        }
        finally {
            setIsSubmitting(false);
        }
    }, [formData, onSubmit, isSubmitting]);
    // Context value
    const contextValue = {
        currentStep,
        totalSteps,
        formData,
        updateField,
        nextStep,
        prevStep,
        goToStep,
        isFirstStep,
        isLastStep,
        isStepValid,
        isSubmitting,
        // Placeholder functions - these will be overridden by the actual MultiStepForm component
        handleNext: async () => { },
        handlePrev: () => { },
        handleSubmit: async () => { },
        validateCurrentStep: async () => true,
        triggerFormValidation: async () => { }
    };
    return {
        contextValue,
        handleSubmit
    };
};
export { MultiStepFormContext };