Wizard

// Shape of the data required by each step is defined by the consumer
type StepMetaData = { title: string, complete: boolean };
type Step1Type = StepMetaData & { step1State?: string };
type Step2Type = StepMetaData & { step2State?: string };
// Wizard schema is an object defined by the consumer with numbers as keys i.e Record<number, T>
// Valid { 1: { a : string } }. Invalid { step1: { a : string } }
type MyWizardSchema = {
  1: Step1Type,
  2: Step2Type,
};
const initialWizardState: MyWizardSchema = {
  1: { title: 'Step 1', step1State: 'step 1 state', complete: false },
  2: { title: 'Step 2', step2State: 'step 2 state', complete: false },
};
// This is used to retrieve the correct wizard from context, also useful for serialization.
const DEMO_WIZARD_ID = 'wizard-demo'
// Create a wizard object with steps, which holds the state for each step. This object returns functions that allows us to manipulate the wizard state.
// Initial state is recorded only once, use the functions return by this hook to manipulate state after that.
const wizard = useCreateWizard({
    id: DEMO_WIZARD_ID,
    initialState: initialWizardState,
    initialStep: 1,
  });
const { stepsState, setWizardState, currentStep, setCurrentStep } = wizard
<Stack gap="small">
  <WizardProgress
    steps={{
      1: {
        title: stepsState[1].title,
        subtitle: 'Subtitle',
        action: {
          label: 'Reset',
          action: () => {
            setWizardState(() => initialWizardState);
            setCurrentStep(1);
          },
        },
        complete: stepsState[1].complete
      },
      2: { title: stepsState[2].title, complete: stepsState[2].complete },
    }}
    currentStep={currentStep}
  />
  {/* WizardProvider is a convenience component that provides wizard state to its children. */}
  <WizardProvider wizard={wizard}>
    <Step1 />
    <Step2 />
  </WizardProvider>
</Stack>;
const Step1 = () => {
  {/* Returns an instance of the wizard from context based on the id provided. Must be used in children of WizardProvider component. */}
  const wizard = useWizard<MyWizardSchema>(DEMO_WIZARD_ID);
  if (!wizard || wizard.currentStep !== 1) return null;
  const { stepsState, nextStep } = wizard;
  const state = stepsState[1];
  return (
    <div>
      <div>{state.step1State}</div>
      <button onClick={nextStep}>Next</button>
    </div>
  );
};
const Step2 = () => {
  const wizard = useWizard<MyWizardSchema>(DEMO_WIZARD_ID);
  if (!wizard || wizard.currentStep !== 2) return null;
  const { stepsState, previousStep } = wizard;
  const state = stepsState[2];
  return (
    <div>
      <div>{state.step2State}</div>
      <button onClick={previousStep}>Previous</button>
    </div>
  );
};

// Grab wizard from local storage if possible
const wizardFromLocalStorage = localStorage.getItem(`wizard:${DEMO_WIZARD_ID}`);
// When resuming a wizard you want to make sure the data is in sync with the step you're on
// This function should evaluate the wizard state and determine which step to resume from
const initalStep = calculateCurrentStepFromWizardState(wizardFromLocalStorage);
const wizard = useCreateWizard({
  id: DEMO_WIZARD_ID,
  // If there's anything in your local storage it will use that as a starting point, otherwise it'll start from the beginning
  initialState: wizardFromLocalStorage || initialWizardState,
  initialStep: initalStep,
});
const Step2 = () => {
  const wizard = useWizard < MyWizardSchema > DEMO_WIZARD_ID;
  if (!wizard || wizard.currentStep !== 2) return null;
  const { stepsState } = wizard;
  const state = stepsState[2];
  const goToThirdParty = () => {
    // We serialize the wizard state before leaving the page
    // Note that we only have to serialize the stepsState
    localStorage.setItem(`wizard:${DEMO_WIZARD_ID}`, stepsState);
    window.location.href = 'http://some3rdparty.com';
  };
  return (
    <div>
      <div>{state.step2State}</div>
      <button onClick={goToThirdParty}>Leave page</button>
    </div>
  );
};