Merge pull request 'feat(ui): history stack for stepper' (#4834) from ui/fix-backwards-nav-installer into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4834

pkgs/clan-app/ui/src/hooks/stepper.tsx

@@ -3,7 +3,6 @@ import {
   createContext,
   createSignal,
   JSX,
-  Setter,
   useContext,
 } from "solid-js";
 import { createStore, SetStoreFunction, Store } from "solid-js/store";
@@ -28,9 +27,15 @@ export function createStepper<
   s: { steps: T },
   stepOpts: StepOptions<StepId, StoreType>,
 ): StepperReturn<T, T[number]["id"]> {
-  const [activeStep, setActiveStep] = createSignal<T[number]["id"]>(
+  const [history, setHistory] = createSignal<T[number]["id"][]>([
     stepOpts.initialStep,
-  );
+  ]);
+
+  const activeStep = () => history()[history().length - 1];
+
+  const setActiveStep = (id: T[number]["id"]) => {
+    setHistory((prev) => [...prev, id]);
+  };
 
   const store: StoreTuple<StoreType> = createStore<StoreType>(
     stepOpts.initialStoreData ?? ({} as StoreType),
@@ -66,19 +71,19 @@ export function createStepper<
       setActiveStep(s.steps[currentIndex + 1].id);
     },
     previous: () => {
-      const currentIndex = s.steps.findIndex(
-        (step) => step.id === activeStep(),
-      );
-      if (currentIndex <= 0) {
+      const hist = history();
+      if (hist.length <= 1) {
         throw new Error("No previous step available");
       }
-      setActiveStep(s.steps[currentIndex - 1].id);
+
+      setHistory((prev) => {
+        const update = prev.slice(0, -1);
+        setActiveStep(update[update.length - 1]);
+        return update;
+      });
     },
     hasPrevious: () => {
-      const currentIndex = s.steps.findIndex(
-        (step) => step.id === activeStep(),
-      );
-      return currentIndex > 0;
+      return history().length > 1;
     },
     hasNext: () => {
       const currentIndex = s.steps.findIndex(
@@ -96,7 +101,7 @@ export interface StepperReturn<
 > {
   _store: never;
   activeStep: Accessor<StepId>;
-  setActiveStep: Setter<StepId>;
+  setActiveStep: (id: StepId) => void;
   currentStep: () => T[number];
   next: () => void;
   previous: () => void;