feat: add useStep hook

README.md

@@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-40.3%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-69.11%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-45.16%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-40.3%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-39.2%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-68.11%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-43.75%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-39.2%25-red.svg?style=flat) |

hooks/use-local-storage.ts

@@ -3,7 +3,7 @@ import { type Dispatch, type SetStateAction, useEffect, useRef, useState } from
 import { parseJson } from "../utils/parse-json";
 import { useEventListener } from "./use-event-listener";
 
-const isNil = (val) => val == null;
+const isNil = (val: unknown) => val == null;
 
 type SetValue<T> = Dispatch<SetStateAction<T>>;
 

hooks/use-step.ts

@@ -0,0 +1,62 @@
+import { type Dispatch, type SetStateAction, useCallback, useState } from "react";
+
+type UseStepActions = {
+  goToNextStep: () => void;
+  goToPrevStep: () => void;
+  reset: () => void;
+  canGoToNextStep: boolean;
+  canGoToPrevStep: boolean;
+  setStep: Dispatch<SetStateAction<number>>;
+};
+
+type SetStepCallbackType = (step: number | ((step: number) => number)) => void;
+
+export function useStep(maxStep: number): [number, UseStepActions] {
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const canGoToNextStep = currentStep + 1 <= maxStep;
+  const canGoToPrevStep = currentStep - 1 > 0;
+
+  const setStep = useCallback<SetStepCallbackType>(
+    (step) => {
+      // Allow value to be a function so we have the same API as useState
+      const newStep = step instanceof Function ? step(currentStep) : step;
+
+      if (newStep >= 1 && newStep <= maxStep) {
+        setCurrentStep(newStep);
+        return;
+      }
+
+      throw new Error("Step not valid");
+    },
+    [maxStep, currentStep],
+  );
+
+  const goToNextStep = useCallback(() => {
+    if (canGoToNextStep) {
+      setCurrentStep((step) => step + 1);
+    }
+  }, [canGoToNextStep]);
+
+  const goToPrevStep = useCallback(() => {
+    if (canGoToPrevStep) {
+      setCurrentStep((step) => step - 1);
+    }
+  }, [canGoToPrevStep]);
+
+  const reset = useCallback(() => {
+    setCurrentStep(1);
+  }, []);
+
+  return [
+    currentStep,
+    {
+      goToNextStep,
+      goToPrevStep,
+      canGoToNextStep,
+      canGoToPrevStep,
+      setStep,
+      reset,
+    },
+  ];
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.109",
+  "version": "0.0.110",
   "private": false,
   "sideEffects": false,
   "type": "module",