@jobber/hooks 2.15.1-export-use-69f7bac.88 → 2.16.0

package/README.md

@@ -14,6 +14,7 @@ Shared hooks for components in Atlantis.
 - [useOnKeyDown](../?path=/docs/hooks-useonkeydown--docs)
 - [useRefocusOnActivator](../?path=/docs/hooks-userefocusonactivator--docs)
 - [useResizeObserver](../?path=/docs/hooks-useresizeobserver--docs)
+- [useStepper](../?path=/docs/hooks-usestepper--docs)
 - [useWindowDimensions](../?path=/docs/hooks-usewindowdimensions--docs)
 
 ## Installing

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export * from "./useBool";
 export * from "./useBreakpoints";
 export * from "./useCallbackRef";
 export * from "./useCollectionQuery";
-export * from "./useDebounce";
 export * from "./useFocusTrap";
 export * from "./useFormState";
 export * from "./useInView";
@@ -14,4 +13,5 @@ export * from "./useRefocusOnActivator";
 export * from "./useResizeObserver";
 export * from "./useSafeLayoutEffect";
 export * from "./useShowClear";
+export * from "./useStepper";
 export * from "./useWindowDimensions";

package/dist/index.js

@@ -18,7 +18,6 @@ __exportStar(require("./useBool"), exports);
 __exportStar(require("./useBreakpoints"), exports);
 __exportStar(require("./useCallbackRef"), exports);
 __exportStar(require("./useCollectionQuery"), exports);
-__exportStar(require("./useDebounce"), exports);
 __exportStar(require("./useFocusTrap"), exports);
 __exportStar(require("./useFormState"), exports);
 __exportStar(require("./useInView"), exports);
@@ -30,4 +29,5 @@ __exportStar(require("./useRefocusOnActivator"), exports);
 __exportStar(require("./useResizeObserver"), exports);
 __exportStar(require("./useSafeLayoutEffect"), exports);
 __exportStar(require("./useShowClear"), exports);
+__exportStar(require("./useStepper"), exports);
 __exportStar(require("./useWindowDimensions"), exports);

package/dist/useStepper/index.d.ts

@@ -0,0 +1 @@
+export { useStepper } from "./useStepper";

package/dist/useStepper/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStepper = void 0;
+var useStepper_1 = require("./useStepper");
+Object.defineProperty(exports, "useStepper", { enumerable: true, get: function () { return useStepper_1.useStepper; } });

package/dist/useStepper/useStepper.d.ts

@@ -0,0 +1,12 @@
+interface UseStepOptions<StepName extends string> {
+    defaultStep?: StepName;
+}
+export declare function useStepper<StepName extends string>(steps: readonly StepName[], options?: UseStepOptions<StepName>): {
+    goToStep: (step: StepName) => void;
+    goToNextStep: () => void;
+    goToPreviousStep: () => void;
+    currentStep: StepName;
+    isFirst: boolean;
+    isLast: boolean;
+};
+export {};

package/dist/useStepper/useStepper.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStepper = useStepper;
+const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+function useStepper(steps, options = {}) {
+    var _a;
+    const firstStep = (_a = options === null || options === void 0 ? void 0 : options.defaultStep) !== null && _a !== void 0 ? _a : steps[0];
+    (0, tiny_invariant_1.default)(firstStep, "Steps array cannot be empty");
+    const [currentStep, setCurrentStep] = (0, react_1.useState)(firstStep);
+    const currentActiveStep = (0, react_1.useMemo)(() => ({
+        currentStep,
+        isFirst: currentStep === steps[0],
+        isLast: currentStep === steps[steps.length - 1],
+    }), [currentStep, steps]);
+    const handlers = (0, react_1.useMemo)(() => ({
+        goToStep: (step) => {
+            setCurrentStep(step);
+        },
+        goToNextStep: () => {
+            setCurrentStep(prevCurrentStep => {
+                const currentIndex = steps.indexOf(prevCurrentStep);
+                const nextStep = steps[Math.min(currentIndex + 1, steps.length - 1)];
+                (0, tiny_invariant_1.default)(nextStep, `Index out of bounds: ${currentIndex + 1}`);
+                return nextStep;
+            });
+        },
+        goToPreviousStep: () => {
+            setCurrentStep(prevCurrentStep => {
+                const currentIndex = steps.indexOf(prevCurrentStep);
+                const previousStep = steps[Math.max(currentIndex - 1, 0)];
+                (0, tiny_invariant_1.default)(previousStep, `Index out of bounds: ${currentIndex - 1}`);
+                return previousStep;
+            });
+        },
+    }), [steps, setCurrentStep]);
+    return Object.assign(Object.assign({}, currentActiveStep), handlers);
+}

package/dist/useStepper/useStepper.test.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const steps = ["step1", "step2", "step3"];
+describe("useStepper", () => {
+    it("initializes with first step when no initial step provided", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, _1.useStepper)(steps));
+        expect(result.current.currentStep).toBe("step1");
+        expect(result.current.isFirst).toBe(true);
+        expect(result.current.isLast).toBe(false);
+    });
+    it("initializes with provided initial step", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, _1.useStepper)(["step1", "step2", "step3"], {
+            defaultStep: "step2",
+        }));
+        expect(result.current.currentStep).toBe("step2");
+        expect(result.current.isFirst).toBe(false);
+        expect(result.current.isLast).toBe(false);
+    });
+    it("moves to next step when nextStep is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, _1.useStepper)(steps));
+        (0, react_1.act)(() => {
+            result.current.goToNextStep();
+        });
+        expect(result.current.currentStep).toBe("step2");
+        expect(result.current.isLast).toBe(false);
+        expect(result.current.isFirst).toBe(false);
+    });
+    it("moves to previous step when previousStep is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, _1.useStepper)(steps, {
+            defaultStep: "step2",
+        }));
+        (0, react_1.act)(() => {
+            result.current.goToPreviousStep();
+        });
+        expect(result.current.currentStep).toBe("step1");
+        expect(result.current.isLast).toBe(false);
+        expect(result.current.isFirst).toBe(true);
+    });
+    it("does not move past the last step", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, _1.useStepper)(steps, {
+            defaultStep: "step3",
+        }));
+        (0, react_1.act)(() => {
+            result.current.goToNextStep();
+        });
+        expect(result.current.currentStep).toBe("step3");
+        expect(result.current.isLast).toBe(true);
+        expect(result.current.isFirst).toBe(false);
+    });
+    it("does not move before the first step", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, _1.useStepper)(steps, {
+            defaultStep: "step1",
+        }));
+        (0, react_1.act)(() => {
+            result.current.goToPreviousStep();
+        });
+        expect(result.current.currentStep).toBe("step1");
+        expect(result.current.isFirst).toBe(true);
+        expect(result.current.isLast).toBe(false);
+    });
+    it("moves to specific step when goToStep is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, _1.useStepper)(steps));
+        (0, react_1.act)(() => {
+            result.current.goToStep("step3");
+        });
+        expect(result.current.currentStep).toBe("step3");
+        expect(result.current.isLast).toBe(true);
+        expect(result.current.isFirst).toBe(false);
+    });
+    describe("error handling", () => {
+        it("throws error when steps array is empty", () => {
+            expect(() => {
+                (0, react_1.renderHook)(() => (0, _1.useStepper)([]));
+            }).toThrow(new Error("Invariant failed: Steps array cannot be empty"));
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.15.1-export-use-69f7bac.88+69f7bac8",
+  "version": "2.16.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -20,7 +20,7 @@
   ],
   "devDependencies": {
     "@apollo/react-testing": "^4.0.0",
-    "@jobber/formatters": "^0.4.1-export-use-69f7bac.274+69f7bac8",
+    "@jobber/formatters": "^0.4.0",
     "@types/lodash": "4.14.136",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -31,6 +31,7 @@
   "dependencies": {
     "lodash": "^4.17.20",
     "resize-observer-polyfill": "^1.5.1",
+    "tiny-invariant": "^1.3.3",
     "ts-xor": "^1.0.8",
     "use-resize-observer": "^6.1.0"
   },
@@ -38,5 +39,5 @@
     "@apollo/client": "^3.0.0",
     "react": "^18.2.0"
   },
-  "gitHead": "69f7bac808b5c8f20f459bad3b158f7578a36384"
+  "gitHead": "c2a9c186f140e9ba404a4c45240f59ac2c517936"
 }

package/useStepper.d.ts

@@ -0,0 +1 @@
+export * from "./dist/useStepper";

package/{useDebounce.js → useStepper.js}

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 
-var useDebounce = require("./dist/useDebounce");
+var useStepper = require("./dist/useStepper");
 
-Object.keys(useDebounce).forEach(function(key) {
+Object.keys(useStepper).forEach(function(key) {
   if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return useDebounce[key];
+      return useStepper[key];
     },
   });
 });

package/dist/useDebounce/index.d.ts

@@ -1 +0,0 @@
-export * from "./useDebounce";

package/dist/useDebounce/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useDebounce"), exports);

package/dist/useDebounce/useDebounce.d.ts

@@ -1,11 +0,0 @@
-import debounce from "lodash/debounce";
-type AnyFunction = (...args: any[]) => any;
-/**
- * A hook to easily manage debounced functions, including their cleanup.
- * @param func The function to debounce.
- * @param wait The number of milliseconds to delay.
- * @param options Optional debounce settings.
- * @returns The debounced function.
- */
-export declare function useDebounce<T extends AnyFunction>(func: T, wait: number, options?: Parameters<typeof debounce>[2]): ((...args: Parameters<T>) => any) & import("lodash").Cancelable;
-export {};

package/dist/useDebounce/useDebounce.js

@@ -1,37 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDebounce = useDebounce;
-const react_1 = require("react");
-const debounce_1 = __importDefault(require("lodash/debounce"));
-/**
- * A hook to easily manage debounced functions, including their cleanup.
- * @param func The function to debounce.
- * @param wait The number of milliseconds to delay.
- * @param options Optional debounce settings.
- * @returns The debounced function.
- */
-function useDebounce(func, wait, options) {
-    const funcRef = (0, react_1.useRef)(func);
-    // We're keeping the provided func wrapped in a ref to avoid forcing the consumer to memoize it.
-    // This is a defense against consumers who aren't memoizing their functions.. or if they are
-    // memoized but invalidating too frequently due to possible bugs.
-    if (funcRef.current !== func) {
-        funcRef.current = func;
-    }
-    const debounced = (0, react_1.useMemo)(() => {
-        return (0, debounce_1.default)((...args) => funcRef.current(...args), wait, options);
-        // Note: do not add any dependencies! There is currently no use case where we would change
-        // the wait delay or options between renders. By not tracking as dependencies, this allows
-        // consumers of useDebounce to provide a raw object for options rather than forcing them to
-        // memoize that param. Same with the func they provide, we're using a ref to keep that up
-        // to date and to avoid forcing the consumer to memoize it.
-    }, []);
-    (0, react_1.useEffect)(() => {
-        // If the debounced function is recreated (or unmounted), cancel the last call.
-        return () => debounced.cancel();
-    }, [debounced]);
-    return debounced;
-}

package/dist/useDebounce/useDebounce.test.js

@@ -1,111 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_2 = require("@testing-library/react");
-const useDebounce_1 = require("./useDebounce");
-const DEBOUNCE_WAIT = 300;
-describe("useDebounce", () => {
-    beforeEach(() => {
-        jest.useFakeTimers();
-    });
-    afterEach(() => {
-        jest.useRealTimers();
-    });
-    it("should debounce the function call", () => __awaiter(void 0, void 0, void 0, function* () {
-        const mockFn = jest.fn();
-        const { result } = (0, react_2.renderHook)(() => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT));
-        result.current("test");
-        expect(mockFn).not.toHaveBeenCalled();
-        // Fast-forward time
-        (0, react_2.act)(() => {
-            jest.advanceTimersByTime(DEBOUNCE_WAIT);
-        });
-        expect(mockFn).toHaveBeenCalledWith("test");
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    }));
-    it("should cancel pending debounced calls on unmount", () => {
-        const mockFn = jest.fn();
-        const { result, unmount } = (0, react_2.renderHook)(() => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT));
-        result.current("test");
-        unmount();
-        // Fast-forward time
-        (0, react_2.act)(() => {
-            jest.advanceTimersByTime(DEBOUNCE_WAIT);
-        });
-        expect(mockFn).not.toHaveBeenCalled();
-    });
-    it("should handle multiple calls within the debounce period", () => {
-        const mockFn = jest.fn();
-        const { result } = (0, react_2.renderHook)(() => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT));
-        result.current("first");
-        // Fast-forward half the debounce time
-        (0, react_2.act)(() => {
-            jest.advanceTimersByTime(DEBOUNCE_WAIT / 2);
-        });
-        result.current("second");
-        // Fast-forward remaining debounce time
-        (0, react_2.act)(() => {
-            jest.advanceTimersByTime(DEBOUNCE_WAIT);
-        });
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenCalledWith("second");
-    });
-    it("should work with React components", () => __awaiter(void 0, void 0, void 0, function* () {
-        function DebouncedComponent() {
-            const [value, setValue] = (0, react_1.useState)("");
-            const [debouncedValue, setDebouncedValue] = (0, react_1.useState)("");
-            const debouncedSetValue = (0, useDebounce_1.useDebounce)((newValue) => {
-                setDebouncedValue(newValue);
-            }, DEBOUNCE_WAIT);
-            (0, react_1.useEffect)(() => {
-                debouncedSetValue(value);
-            }, [value, debouncedSetValue]);
-            return (react_1.default.createElement("div", null,
-                react_1.default.createElement("input", { "data-testid": "input", value: value, onChange: e => setValue(e.target.value) }),
-                react_1.default.createElement("div", { "data-testid": "debounced-value" }, debouncedValue)));
-        }
-        (0, react_2.render)(react_1.default.createElement(DebouncedComponent, null));
-        const input = react_2.screen.getByTestId("input");
-        const debouncedValue = react_2.screen.getByTestId("debounced-value");
-        // Using fireEvent instead of userEvent
-        react_2.fireEvent.change(input, { target: { value: "test" } });
-        expect(debouncedValue.textContent).toBe("");
-        // Fast-forward time
-        (0, react_2.act)(() => {
-            jest.advanceTimersByTime(DEBOUNCE_WAIT + 100);
-        });
-        expect(debouncedValue.textContent).toBe("test");
-    }), 10000); // 10 second timeout
-});

package/useDebounce.d.ts

@@ -1 +0,0 @@
-export * from "./dist/useDebounce";