@jobber/hooks 2.4.0 → 2.5.0

package/dist/useBreakpoints/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useBreakpoints";
+export { mockViewportWidth } from "./mockViewportWidth";

package/dist/useBreakpoints/index.js

@@ -0,0 +1,20 @@
+"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 });
+exports.mockViewportWidth = void 0;
+__exportStar(require("./useBreakpoints"), exports);
+var mockViewportWidth_1 = require("./mockViewportWidth");
+Object.defineProperty(exports, "mockViewportWidth", { enumerable: true, get: function () { return mockViewportWidth_1.mockViewportWidth; } });

package/dist/useBreakpoints/mockViewportWidth/index.d.ts

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

package/dist/useBreakpoints/mockViewportWidth/index.js

@@ -0,0 +1,17 @@
+"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("./mockViewportWidth"), exports);

package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.d.ts

@@ -0,0 +1,8 @@
+export declare function mockViewportWidth(): {
+    cleanup: typeof cleanup;
+    setViewportWidth: typeof setViewportWidth;
+};
+declare function setViewportWidth(newWidth: number): void;
+declare function cleanup(): void;
+export declare function isQueryMatching(query: string): boolean | undefined;
+export {};

package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isQueryMatching = exports.mockViewportWidth = void 0;
+const defaultMatchMedia = window.matchMedia;
+const defaultResizeTo = window.resizeTo;
+const defaultInnerWidth = window.innerWidth;
+function mockViewportWidth() {
+    return { cleanup, setViewportWidth };
+}
+exports.mockViewportWidth = mockViewportWidth;
+function setViewportWidth(newWidth) {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: jest.fn().mockImplementation((query) => {
+            const matches = isQueryMatching(query);
+            const instance = {
+                matches: matches,
+                media: query,
+                onchange: null,
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            };
+            window.addEventListener("resize", () => {
+                if (matches != instance.matches) {
+                    instance.matches = matches;
+                    instance.dispatchEvent("change");
+                }
+            });
+            return instance;
+        }),
+    });
+    Object.defineProperty(window, "resizeTo", {
+        value: (width) => {
+            Object.defineProperty(window, "innerWidth", {
+                configurable: true,
+                writable: true,
+                value: width,
+            });
+            window.dispatchEvent(new Event("resize"));
+        },
+    });
+    window.resizeTo(newWidth, window.innerHeight);
+}
+function cleanup() {
+    window.matchMedia = defaultMatchMedia;
+    window.resizeTo = defaultResizeTo;
+    window.innerWidth = defaultInnerWidth;
+}
+function isQueryMatching(query) {
+    const match = query.match(/(\w+)\s*(<|<=|>|>=|=)\s*(\d+)/);
+    if (!match)
+        return false;
+    const { innerWidth } = window;
+    const [, , operator, value] = match;
+    const breakpoint = parseInt(value, 10);
+    switch (operator) {
+        case "<":
+            return innerWidth < breakpoint;
+        case "<=":
+            return innerWidth <= breakpoint;
+        case ">":
+            return innerWidth > breakpoint;
+        case ">=":
+            return innerWidth >= breakpoint;
+        case "=":
+            return innerWidth === breakpoint;
+    }
+}
+exports.isQueryMatching = isQueryMatching;

package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.test.d.ts

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

package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.test.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mockViewportWidth_1 = require("./mockViewportWidth");
+describe("isQueryMatching", () => {
+    it.each([["<"], [">"]])("should return false on %s", operator => {
+        const result = (0, mockViewportWidth_1.isQueryMatching)(`width ${operator} ${window.innerWidth}`);
+        expect(result).toBe(false);
+    });
+    it.each([["<="], [">="], ["="]])("should return true on %s", operator => {
+        const result = (0, mockViewportWidth_1.isQueryMatching)(`width ${operator} ${window.innerWidth}`);
+        expect(result).toBe(true);
+    });
+    it("should return false when the width is not a number", () => {
+        const result = (0, mockViewportWidth_1.isQueryMatching)(`width = not-a-number`);
+        expect(result).toBe(false);
+    });
+});

package/dist/useBreakpoints/useBreakpoints.d.ts

@@ -0,0 +1,20 @@
+export declare const BREAKPOINT_SIZES: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+/**
+ * Hook equivalent of CSS media queries with our
+ * [supported breakpoints](https://atlantis.getjobber.com/?path=/docs/design-breakpoints--page).
+ */
+export declare function useBreakpoints(): {
+    smallAndUp: boolean;
+    mediumAndUp: boolean;
+    largeAndUp: boolean;
+    extraLargeAndUp: boolean;
+    extraSmallOnly: boolean;
+    smallOnly: boolean;
+    mediumOnly: boolean;
+    largeOnly: boolean;
+};

package/dist/useBreakpoints/useBreakpoints.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoints = exports.BREAKPOINT_SIZES = void 0;
+const useMediaQuery_1 = require("./useMediaQuery");
+exports.BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+/**
+ * Hook equivalent of CSS media queries with our
+ * [supported breakpoints](https://atlantis.getjobber.com/?path=/docs/design-breakpoints--page).
+ */
+function useBreakpoints() {
+    const extraSmallOnly = (0, useMediaQuery_1.useMediaQuery)(`(width < ${exports.BREAKPOINT_SIZES.sm}px)`);
+    const smallAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.sm}px)`);
+    const mediumAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.md}px)`);
+    const largeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.lg}px)`);
+    const extraLargeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.xl}px)`);
+    return {
+        smallAndUp,
+        mediumAndUp,
+        largeAndUp,
+        extraLargeAndUp,
+        extraSmallOnly,
+        smallOnly: smallAndUp && !mediumAndUp,
+        mediumOnly: mediumAndUp && !largeAndUp,
+        largeOnly: largeAndUp && !extraLargeAndUp,
+    };
+}
+exports.useBreakpoints = useBreakpoints;

package/dist/useBreakpoints/useBreakpoints.test.d.ts

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

package/dist/useBreakpoints/useBreakpoints.test.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const mockViewportWidth_1 = require("./mockViewportWidth");
+const useBreakpoints_1 = require("./useBreakpoints");
+const { cleanup, setViewportWidth } = (0, mockViewportWidth_1.mockViewportWidth)();
+afterEach(cleanup);
+describe("useBreakpoints", () => {
+    describe("and up", () => {
+        it("should have the correct breakpoint values on xl size screens", () => {
+            setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.xl);
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                smallAndUp: true,
+                mediumAndUp: true,
+                largeAndUp: true,
+                extraLargeAndUp: true,
+            });
+        });
+        it("should have the correct breakpoint values on lg size screens", () => {
+            setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.lg);
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                smallAndUp: true,
+                mediumAndUp: true,
+                largeAndUp: true,
+                extraLargeAndUp: false,
+            });
+        });
+        it("should have the correct breakpoint values on md size screens", () => {
+            setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.md);
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                smallAndUp: true,
+                mediumAndUp: true,
+                largeAndUp: false,
+                extraLargeAndUp: false,
+            });
+        });
+        it("should have the correct breakpoint values on sm size screens", () => {
+            setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.sm);
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                smallAndUp: true,
+                mediumAndUp: false,
+                largeAndUp: false,
+                extraLargeAndUp: false,
+            });
+        });
+    });
+    describe("only", () => {
+        it("should only set the extraSmallOnly to true on smaller than sm", () => {
+            setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.sm - 1);
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                extraSmallOnly: true,
+                smallOnly: false,
+                mediumOnly: false,
+                largeOnly: false,
+            });
+        });
+        it("should only set the smallOnly to true on sm", () => {
+            setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.sm);
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                extraSmallOnly: false,
+                smallOnly: true,
+                mediumOnly: false,
+                largeOnly: false,
+            });
+        });
+        it("should only set the mediumOnly to true on md", () => {
+            setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.md);
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                extraSmallOnly: false,
+                smallOnly: false,
+                mediumOnly: true,
+                largeOnly: false,
+            });
+        });
+        it("should only set the largeOnly to true on lg", () => {
+            setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.lg);
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                extraSmallOnly: false,
+                smallOnly: false,
+                mediumOnly: false,
+                largeOnly: true,
+            });
+        });
+    });
+    describe("in between values", () => {
+        function randomBreakpoint(min, max) {
+            return Math.floor(min + Math.random() * (max - min + 1));
+        }
+        it("should have the correct breakpoint values on higher than xl size screens", () => {
+            setViewportWidth(randomBreakpoint(useBreakpoints_1.BREAKPOINT_SIZES.xl, 10000));
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                smallAndUp: true,
+                mediumAndUp: true,
+                largeAndUp: true,
+                extraLargeAndUp: true,
+            });
+        });
+        it("should have the correct breakpoint values on lg size screens", () => {
+            setViewportWidth(randomBreakpoint(useBreakpoints_1.BREAKPOINT_SIZES.lg, useBreakpoints_1.BREAKPOINT_SIZES.xl));
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                smallAndUp: true,
+                mediumAndUp: true,
+                largeAndUp: true,
+                extraLargeAndUp: false,
+            });
+        });
+        it("should have the correct breakpoint values on md size screens", () => {
+            setViewportWidth(randomBreakpoint(useBreakpoints_1.BREAKPOINT_SIZES.md, useBreakpoints_1.BREAKPOINT_SIZES.lg));
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                smallAndUp: true,
+                mediumAndUp: true,
+                largeAndUp: false,
+                extraLargeAndUp: false,
+            });
+        });
+        it("should have the correct breakpoint values on sm size screens", () => {
+            setViewportWidth(randomBreakpoint(useBreakpoints_1.BREAKPOINT_SIZES.sm, useBreakpoints_1.BREAKPOINT_SIZES.md));
+            const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
+            expect(result.current).toMatchObject({
+                smallAndUp: true,
+                mediumAndUp: false,
+                largeAndUp: false,
+                extraLargeAndUp: false,
+            });
+        });
+    });
+});

package/dist/useBreakpoints/useMediaQuery.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Sets the JS media query listener. Internal use only.
+ */
+export declare function useMediaQuery(CSSMediaQuery: string): boolean;

package/dist/useBreakpoints/useMediaQuery.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaQuery = void 0;
+const react_1 = require("react");
+/**
+ * Sets the JS media query listener. Internal use only.
+ */
+function useMediaQuery(CSSMediaQuery) {
+    const [matches, setMatches] = (0, react_1.useState)(window.matchMedia(CSSMediaQuery).matches);
+    (0, react_1.useEffect)(() => {
+        const media = window.matchMedia(CSSMediaQuery);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        media.addEventListener("change", listener);
+        return () => media.removeEventListener("change", listener);
+    }, [CSSMediaQuery]);
+    return matches;
+}
+exports.useMediaQuery = useMediaQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -45,5 +45,5 @@
     "@apollo/client": "^3.0.0",
     "react": "^18"
   },
-  "gitHead": "f9530a9ef052c5a914c9c9270260b372b720ecf4"
+  "gitHead": "550bbd65bfd7e7b9c9994a4cd05f3df3619d49ec"
 }

package/useBreakpoints.d.ts

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

package/useBreakpoints.js

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