62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
/**
|
|
* Zustand store for managing onboarding state
|
|
*
|
|
* @see https://www.figma.com/design/cfMOy1RJasIu3QyzAMBFxB/Laconic?node-id=571-3500&m=dev
|
|
*/
|
|
|
|
import { create } from 'zustand';
|
|
import { type OnboardingFormData, type Step } from './types';
|
|
|
|
/**
|
|
* State management for the onboarding flow
|
|
* @interface OnboardingState
|
|
* @property {Step} currentStep - Current active step
|
|
* @property {OnboardingFormData} formData - Collected form data
|
|
* @property {(step: Step) => void} setCurrentStep - Updates the current step
|
|
* @property {(data: Partial<OnboardingFormData>) => void} setFormData - Updates form data
|
|
* @property {() => void} nextStep - Moves to the next step
|
|
* @property {() => void} previousStep - Moves to the previous step
|
|
*/
|
|
interface OnboardingState {
|
|
currentStep: Step;
|
|
formData: OnboardingFormData;
|
|
setCurrentStep: (step: Step) => void;
|
|
setFormData: (data: Partial<OnboardingFormData>) => void;
|
|
nextStep: () => void;
|
|
previousStep: () => void;
|
|
}
|
|
|
|
/** Order of steps in the onboarding flow */
|
|
const STEP_ORDER: Step[] = ['connect', 'configure', 'deploy'];
|
|
|
|
/**
|
|
* Zustand store for managing onboarding state
|
|
* Used across all onboarding components to maintain flow state
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* const { currentStep, formData, nextStep } = useOnboarding()
|
|
* ```
|
|
*/
|
|
export const useOnboarding = create<OnboardingState>((set) => ({
|
|
currentStep: 'connect',
|
|
formData: {},
|
|
setCurrentStep: (step) => set({ currentStep: step }),
|
|
setFormData: (data) =>
|
|
set((state) => ({
|
|
formData: { ...state.formData, ...data },
|
|
})),
|
|
nextStep: () =>
|
|
set((state) => {
|
|
const currentIndex = STEP_ORDER.indexOf(state.currentStep);
|
|
const nextStep = STEP_ORDER[currentIndex + 1];
|
|
return nextStep ? { currentStep: nextStep } : state;
|
|
}),
|
|
previousStep: () =>
|
|
set((state) => {
|
|
const currentIndex = STEP_ORDER.indexOf(state.currentStep);
|
|
const previousStep = STEP_ORDER[currentIndex - 1];
|
|
return previousStep ? { currentStep: previousStep } : state;
|
|
}),
|
|
}));
|