@jobber/hooks 2.15.1-export-use-69f7bac.88 → 2.17.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

@@ -14,4 +14,5 @@ export * from "./useRefocusOnActivator";
 export * from "./useResizeObserver";
 export * from "./useSafeLayoutEffect";
 export * from "./useShowClear";
+export * from "./useStepper";
 export * from "./useWindowDimensions";

package/dist/index.js

@@ -30,4 +30,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/useDebounce/index.d.ts

@@ -1 +1 @@
-export * from "./useDebounce";
+export { useDebounce } from "./useDebounce";

package/dist/useDebounce/index.js

@@ -1,17 +1,5 @@
 "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);
+exports.useDebounce = void 0;
+var useDebounce_1 = require("./useDebounce");
+Object.defineProperty(exports, "useDebounce", { enumerable: true, get: function () { return useDebounce_1.useDebounce; } });

package/dist/useDebounce/useDebounce.d.ts

@@ -1,4 +1,4 @@
-import debounce from "lodash/debounce";
+import { debounce } from "es-toolkit";
 type AnyFunction = (...args: any[]) => any;
 /**
  * A hook to easily manage debounced functions, including their cleanup.
@@ -7,5 +7,5 @@ type AnyFunction = (...args: any[]) => any;
  * @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 declare function useDebounce<T extends AnyFunction>(func: T, wait: number, options?: Parameters<typeof debounce>[2]): import("es-toolkit").DebouncedFunction<(...args: Parameters<T>) => any>;
 export {};

package/dist/useDebounce/useDebounce.js

@@ -1,11 +1,9 @@
 "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"));
+const es_toolkit_1 = require("es-toolkit");
+const useCallbackRef_1 = require("../useCallbackRef");
 /**
  * A hook to easily manage debounced functions, including their cleanup.
  * @param func The function to debounce.
@@ -14,21 +12,15 @@ const debounce_1 = __importDefault(require("lodash/debounce"));
  * @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 funcRef = (0, useCallbackRef_1.useCallbackRef)(func);
+    // Note: do not add additional 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.
     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.
-    }, []);
+        return (0, es_toolkit_1.debounce)((...args) => funcRef(...args), wait, options);
+    }, [funcRef]);
     (0, react_1.useEffect)(() => {
         // If the debounced function is recreated (or unmounted), cancel the last call.
         return () => debounced.cancel();

package/dist/useDebounce/useDebounce.test.js

@@ -31,9 +31,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_2 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const useDebounce_1 = require("./useDebounce");
 const DEBOUNCE_WAIT = 300;
 describe("useDebounce", () => {
@@ -48,7 +52,6 @@ describe("useDebounce", () => {
         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);
         });
@@ -60,7 +63,6 @@ describe("useDebounce", () => {
         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);
         });
@@ -70,18 +72,47 @@ describe("useDebounce", () => {
         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 not recreate debounced function when options object reference changes", () => {
+        const mockFn = jest.fn();
+        const debounceEgdesOption = ["trailing"];
+        // Use a function that returns a new options object each time
+        const { result, rerender } = (0, react_2.renderHook)(({ options }) => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT, options), { initialProps: { options: { edges: debounceEgdesOption } } });
+        const debounceRef = result.current;
+        rerender({ options: { edges: debounceEgdesOption } });
+        expect(debounceRef).toBe(result.current);
+    });
+    it("should not recreate debounced function when options config changes", () => {
+        const mockFn = jest.fn();
+        // Largely arbitrary, this value x 2 must simply be less than the debounce wait
+        const TIME_INCREMENT_LESSER_THAN_DEBOUNCE_WAIT = 1;
+        // Start with trailing edge
+        const debounceEgdesOption = ["trailing"];
+        // Use a function that returns a new options object each time
+        const { result, rerender } = (0, react_2.renderHook)(({ options }) => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT, options), { initialProps: { options: { edges: debounceEgdesOption } } });
+        result.current("first");
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(TIME_INCREMENT_LESSER_THAN_DEBOUNCE_WAIT);
+        });
+        expect(mockFn).not.toHaveBeenCalled();
+        // This means it calls immediately at the leading edge of the timeout.
+        rerender({ options: { edges: ["leading"] } });
+        result.current("second");
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(TIME_INCREMENT_LESSER_THAN_DEBOUNCE_WAIT);
+        });
+        // The config change should be ignored, options are hardcoded
+        expect(mockFn).not.toHaveBeenCalled();
+    });
     it("should work with React components", () => __awaiter(void 0, void 0, void 0, function* () {
         function DebouncedComponent() {
             const [value, setValue] = (0, react_1.useState)("");
@@ -99,13 +130,61 @@ describe("useDebounce", () => {
         (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" } });
+        const user = user_event_1.default.setup({ advanceTimers: jest.advanceTimersByTime });
+        yield user.type(input, "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
+    }), 10000);
+    it("should properly handle options object", () => __awaiter(void 0, void 0, void 0, function* () {
+        function DebouncedComponent() {
+            const [count, setCount] = (0, react_1.useState)(0);
+            const [debouncedCount, setDebouncedCount] = (0, react_1.useState)(0);
+            const options = {
+                edges: ["leading", "trailing"],
+            };
+            const debouncedSetCount = (0, useDebounce_1.useDebounce)((value) => {
+                setDebouncedCount(value);
+            }, DEBOUNCE_WAIT, options);
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("button", { "data-testid": "increment", onClick: () => {
+                        const newCount = count + 1;
+                        setCount(newCount);
+                        debouncedSetCount(newCount);
+                    }, type: "button" }, "Increment"),
+                react_1.default.createElement("div", { "data-testid": "count" }, count),
+                react_1.default.createElement("div", { "data-testid": "debounced-count" }, debouncedCount)));
+        }
+        (0, react_2.render)(react_1.default.createElement(DebouncedComponent, null));
+        const incrementButton = react_2.screen.getByTestId("increment");
+        const debouncedCount = react_2.screen.getByTestId("debounced-count");
+        const user = user_event_1.default.setup({ advanceTimers: jest.advanceTimersByTime });
+        yield user.click(incrementButton);
+        // With leading edge, the value should be updated immediately
+        expect(debouncedCount.textContent).toBe("1");
+        yield user.click(incrementButton);
+        yield user.click(incrementButton);
+        // Additional clicks shouldn't update immediately (debounced)
+        expect(debouncedCount.textContent).toBe("1");
+        // After the debounce period, the trailing edge should update with the latest value
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(DEBOUNCE_WAIT);
+        });
+        expect(debouncedCount.textContent).toBe("3");
+    }));
+    it("should abort debounced function when signal is aborted", () => __awaiter(void 0, void 0, void 0, function* () {
+        const mockFn = jest.fn();
+        const controller = new AbortController();
+        const { result } = (0, react_2.renderHook)(() => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT, { signal: controller.signal }));
+        result.current("test");
+        (0, react_2.act)(() => {
+            controller.abort();
+        });
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(DEBOUNCE_WAIT + 100);
+        });
+        expect(mockFn).not.toHaveBeenCalled();
+    }));
 });

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.d.ts

@@ -0,0 +1 @@
+export {};

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.17.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",
@@ -29,8 +29,10 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
+    "es-toolkit": "^1.39.7",
     "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 +40,5 @@
     "@apollo/client": "^3.0.0",
     "react": "^18.2.0"
   },
-  "gitHead": "69f7bac808b5c8f20f459bad3b158f7578a36384"
+  "gitHead": "5b2a570f0d657e82d04a8d60964242f67da3fab0"
 }

package/useStepper.d.ts

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

package/useStepper.js

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