@onepercentio/one-ui 0.8.5-beta.7 → 0.9.0

package/dist/hooks/ui/useBreakpoint.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = require("react");
+/**
+ * A hook to trigger changes when the screen resizes
+ * @returns If the current resolution is lower than the specified width
+ */
+function useBreakpoint(breakInto) {
+    const [lowerThanBreakpoint, setIsLowerThanBreakpoint] = (0, react_1.useState)(() => window.visualViewport.width < breakInto);
+    (0, react_1.useEffect)(() => {
+        const onResizeThrottle = (0, throttle_1.default)(() => {
+            setIsLowerThanBreakpoint(window.visualViewport.width < breakInto);
+        }, 1000 / 4);
+        const onResize = () => onResizeThrottle();
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+    return lowerThanBreakpoint;
+}
+exports.default = useBreakpoint;
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/hooks/ui/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/hooks/ui/useBreakpoint.tsx"],"names":[],"mappings":";;;;;AAAA,+DAAuC;AACvC,iCAA4C;AAE5C;;;GAGG;AACH,SAAwB,aAAa,CAAC,SAAiB;IACrD,MAAM,CAAC,mBAAmB,EAAE,wBAAwB,CAAC,GAAG,IAAA,gBAAQ,EAC9D,GAAG,EAAE,CAAC,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,SAAS,CAC/C,CAAC;IACF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;YACrC,wBAAwB,CAAC,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;QACrE,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC;QAC1C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAbD,gCAaC"}

package/dist/hooks/ui/usePaginationControls.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from "react";
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+export default function usePaginationControls(containerRef: RefObject<HTMLDivElement>, { snapToPage, }?: {
+    snapToPage?: boolean;
+}): {
+    controls: JSX.Element[];
+    checkControlsRequirement: () => void;
+};
+export declare enum usePaginationControlsTestIds {
+    LEFT_CONTROL = "page-l",
+    RIGHT_CONTROL = "page-r"
+}

package/dist/hooks/ui/usePaginationControls.js

@@ -0,0 +1,92 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePaginationControlsTestIds = void 0;
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = __importStar(require("react"));
+const FadeIn_1 = __importDefault(require("../../components/FadeIn"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const usePaginationControls_module_scss_1 = __importDefault(require("./usePaginationControls.module.scss"));
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+function usePaginationControls(containerRef, { snapToPage, } = {}) {
+    const [[leftControl, rightControl], setControls] = (0, react_1.useState)([false, false]);
+    const LeftControl = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.LeftControl");
+    const RightControl = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.RightControl");
+    const className = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.className", "");
+    function move(direction) {
+        return () => {
+            const rest = containerRef.current.scrollLeft % containerRef.current.clientWidth;
+            const snapOffset = snapToPage
+                ? direction === "l"
+                    ? rest
+                        ? containerRef.current.clientWidth - rest
+                        : 0
+                    : rest
+                : 0;
+            containerRef.current.scrollBy({
+                left: (containerRef.current.clientWidth - snapOffset) *
+                    (direction === "l" ? -1 : 1),
+                behavior: "smooth",
+            });
+        };
+    }
+    function checkControlsRequirement() {
+        const el = containerRef.current;
+        const shouldHaveAnyControl = el.scrollWidth > el.clientWidth;
+        if (!shouldHaveAnyControl)
+            setControls([false, false]);
+        else {
+            const shouldHaveRightControl = el.scrollLeft < el.scrollWidth - el.clientWidth;
+            const shouldHaveLeftControl = el.scrollLeft > 0;
+            setControls([shouldHaveLeftControl, shouldHaveRightControl]);
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        const throttledCheck = (0, throttle_1.default)(checkControlsRequirement, 1000 / 4);
+        checkControlsRequirement();
+        el.addEventListener("scroll", throttledCheck);
+        return () => el.removeEventListener("scroll", throttledCheck);
+    }, []);
+    return {
+        controls: [
+            react_1.default.createElement(FadeIn_1.default, { active: leftControl, className: `${usePaginationControls_module_scss_1.default.left} ${usePaginationControls_module_scss_1.default.control} ${className}`, "data-testid": usePaginationControlsTestIds.LEFT_CONTROL, onClick: move("l") }, leftControl && react_1.default.createElement(LeftControl, null)),
+            react_1.default.createElement(FadeIn_1.default, { active: rightControl, className: `${usePaginationControls_module_scss_1.default.right} ${usePaginationControls_module_scss_1.default.control} ${className}`, "data-testid": usePaginationControlsTestIds.RIGHT_CONTROL, onClick: move("r") }, rightControl && react_1.default.createElement(RightControl, null)),
+        ],
+        checkControlsRequirement,
+    };
+}
+exports.default = usePaginationControls;
+var usePaginationControlsTestIds;
+(function (usePaginationControlsTestIds) {
+    usePaginationControlsTestIds["LEFT_CONTROL"] = "page-l";
+    usePaginationControlsTestIds["RIGHT_CONTROL"] = "page-r";
+})(usePaginationControlsTestIds = exports.usePaginationControlsTestIds || (exports.usePaginationControlsTestIds = {}));
+//# sourceMappingURL=usePaginationControls.js.map

package/dist/hooks/ui/usePaginationControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationControls.js","sourceRoot":"","sources":["../../../src/hooks/ui/usePaginationControls.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/ui/usePaginationControls.module.scss

@@ -0,0 +1,16 @@
+.control {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.right {
+  right: 0px;
+}
+
+.left {
+  left: 0px;
+}

package/dist/hooks/useAsyncControl.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-export default function useAsyncControl<E = any, F = {}>(functionsToWrap?: F): {
+import { Primitive } from "type-fest";
+export default function useAsyncControl<E = any, F extends {
+    [f: string]: ((...args: any[]) => Promise<any>) | Object | Primitive;
+} = {}>(functionsToWrap?: F): {
     process: (asyncFn: () => Promise<any>) => Promise<any>;
     loading: boolean;
     error: Error | E | undefined;

package/dist/hooks/useAsyncControl.js

@@ -29,12 +29,22 @@ function useAsyncControl(functionsToWrap) {
             setLoading(false);
         }
     }), []);
-    return Object.assign({ process: _process, loading,
+    const { functionsToMemoize, other } = Object.entries(functionsToWrap || {}).reduce((r, [k, func]) => {
+        return Object.assign(Object.assign({}, r), (typeof func === "function"
+            ? {
+                functionsToMemoize: Object.assign(Object.assign({}, r.functionsToMemoize), { [k]: func }),
+            }
+            : {
+                other: Object.assign(Object.assign({}, r.other), { [k]: func }),
+            }));
+    }, {
+        functionsToMemoize: {},
+        other: {},
+    });
+    return Object.assign(Object.assign({ process: _process, loading,
         error,
         setError,
-        setLoading }, Object.entries(functionsToWrap || {}).reduce((r, [k, func]) => {
-        return Object.assign(Object.assign({}, r), { [k]: typeof func === "function" ? (...args) => _process(() => func(...args)) : func });
-    }, {}));
+        setLoading }, other), Object.entries(functionsToMemoize).reduce((r, [k, v]) => (Object.assign(Object.assign({}, r), { [k]: (0, react_1.useMemo)(() => (...args) => _process(() => v(...args)), [v]) })), {}));
 }
 exports.default = useAsyncControl;
 //# sourceMappingURL=useAsyncControl.js.map

package/dist/hooks/useAsyncControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,iCAA8C;AAG9C,SAAwB,eAAe,CAAkB,eAAmB;IAC1E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAa,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAO,OAA2B,EAAE,EAAE;QACjE,IAAI;YACF,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO,MAAM,OAAO,EAAE,CAAC;SACxB;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7D,QAAQ,CAAC,CAAM,CAAC,CAAC;YACjB,MAAM,CAAC,CAAC;SACT;gBAAS;YACR,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,uBACE,OAAO,EAAE,QAAQ,EACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU,IACP,MAAM,CAAC,OAAO,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE;QAC/D,uCACK,CAAC,KACJ,CAAC,CAAC,CAAC,EAAE,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,IAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAE,IAAY,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IACpG;IACH,CAAC,EAAE,EAAO,CAAM,EAChB;AACJ,CAAC;AA/BD,kCA+BC"}
+{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,iCAAuD;AAGvD,SAAwB,eAAe,CAKrC,eAAmB;IACnB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAa,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAO,OAA2B,EAAE,EAAE;QACjE,IAAI;YACF,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO,MAAM,OAAO,EAAE,CAAC;SACxB;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7D,QAAQ,CAAC,CAAM,CAAC,CAAC;YACjB,MAAM,CAAC,CAAC;SACT;gBAAS;YACR,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,OAAO,CAClD,eAAe,IAAI,EAAE,CACtB,CAAC,MAAM,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE;QACf,uCACK,CAAC,GACD,CAAC,OAAO,IAAI,KAAK,UAAU;YAC5B,CAAC,CAAC;gBACE,kBAAkB,kCACb,CAAC,CAAC,kBAAkB,KACvB,CAAC,CAAC,CAAC,EAAE,IAAI,GACV;aACF;YACH,CAAC,CAAC;gBACE,KAAK,kCACA,CAAC,CAAC,KAAK,KACV,CAAC,CAAC,CAAC,EAAE,IAAI,GACV;aACF,CAAC,EACN;IACJ,CAAC,EACD;QACE,kBAAkB,EAAE,EAAE;QACtB,KAAK,EAAE,EAAE;KAIV,CACF,CAAC;IAEF,qCACE,OAAO,EAAE,QAAQ,EACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU,IACP,KAAK,GACL,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAC1C,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCACV,CAAC,KACJ,CAAC,CAAC,CAAC,EAAE,IAAA,eAAO,EACV,GAAG,EAAE,CACH,CAAC,GAAG,IAAW,EAAE,EAAE,CACjB,QAAQ,CAAC,GAAG,EAAE,CAAE,CAAS,CAAC,GAAG,IAAI,CAAC,CAAC,EACvC,CAAC,CAAC,CAAC,CACJ,IACD,EACF,EAAO,CACR,EACD;AACJ,CAAC;AAzED,kCAyEC"}

package/dist/hooks/useContainedRepositioning.d.ts

@@ -3,11 +3,13 @@
  * This hook takes an html and checks if its outside its parent
  * If it is, it should move it so it can be totally visible inside the container
  */
-export default function useContainedRepositioning(focused: boolean, getParent: (el: HTMLElement) => HTMLElement, { offset, scale }?: {
+export default function useContainedRepositioning(focused: boolean, getParent: (el: HTMLElement) => HTMLElement, { offset, scale, offsetLimit, }?: {
     /** The offset the element will be moved by from the closest bound */
     offset?: number;
     /** The scaled element width to be considered. usefull for when the focused element will change size */
     scale?: number;
+    /** Limit offset */
+    offsetLimit?: number;
 }): {
     elementToCheck: import("react").RefObject<HTMLDivElement>;
 };

package/dist/hooks/useContainedRepositioning.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
  * This hook takes an html and checks if its outside its parent
  * If it is, it should move it so it can be totally visible inside the container
  */
-function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1 } = {}) {
+function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1, offsetLimit = Number.POSITIVE_INFINITY, } = {}) {
     const elementToCheck = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const el = elementToCheck.current;
@@ -32,19 +32,23 @@ function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1
                 const offsetOfScale = (elWidth - curr.clientWidth) / 2;
                 const cardLimit = curr.offsetLeft - offsetOfScale + alreadyRight + elWidth;
                 const exceedingSpace = cardLimit - limitOffset;
-                const offsetLeft = curr.offsetLeft - offsetOfScale + alreadyRight - relativeParent.scrollLeft;
+                const offsetLeft = curr.offsetLeft -
+                    offsetOfScale +
+                    alreadyRight -
+                    relativeParent.scrollLeft;
                 const isOverflowedRight = exceedingSpace > 0;
                 const isOverflowedLeft = offsetLeft < 0;
-                const limit = (exceedingSpace + -offsetLeft);
+                const limit = exceedingSpace + -offsetLeft;
                 if (isOverflowedRight) {
-                    curr.style.right = `${exceedingSpace - -Math.min(Math.abs(limit / 2), offset)}px`;
+                    const val = Math.min(exceedingSpace - -Math.min(Math.abs(limit / 2), offset), offsetLimit);
+                    curr.style.right = `${val}px`;
                 }
-                ;
                 if (isOverflowedLeft) {
-                    curr.style.right = `${offsetLeft - Math.min(Math.abs(limit) / 2, offset)}px`;
+                    const val = Math.max(offsetLeft - Math.min(Math.abs(limit) / 2, offset), -offsetLimit);
+                    curr.style.right = `${val}px`;
                 }
                 if (isOverflowedLeft || isOverflowedRight) {
-                    curr.style.zIndex = '1000';
+                    curr.style.zIndex = "1000";
                 }
             }, 50);
             reposition();
@@ -56,9 +60,8 @@ function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1
                 el.style.right = `0px`;
                 const restore = ({ propertyName, currentTarget }) => {
                     const targetTransformation = window.getComputedStyle(currentTarget).right;
-                    if (propertyName === "right" &&
-                        targetTransformation === "0px") {
-                        curr.style.zIndex = '';
+                    if (propertyName === "right" && targetTransformation === "0px") {
+                        curr.style.zIndex = "";
                         el.removeEventListener("transitionend", restore);
                     }
                 };

package/dist/hooks/useContainedRepositioning.js.map

@@ -1 +1 @@
-{"version":3,"file":"useContainedRepositioning.js","sourceRoot":"","sources":["../../src/hooks/useContainedRepositioning.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useContainedRepositioning.js","sourceRoot":"","sources":["../../src/hooks/useContainedRepositioning.ts"],"names":[],"mappings":"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"}

package/dist/hooks/usePaginationControls.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+export default function usePaginationControls(containerRef: RefObject<HTMLDivElement>): void;

package/dist/hooks/usePaginationControls.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+function usePaginationControls(containerRef) { }
+exports.default = usePaginationControls;
+//# sourceMappingURL=usePaginationControls.js.map

package/dist/hooks/usePaginationControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationControls.js","sourceRoot":"","sources":["../../src/hooks/usePaginationControls.ts"],"names":[],"mappings":";;AAEA;;GAEG;AACH,SAAwB,qBAAqB,CAC3C,YAAuC,IACtC,CAAC;AAFJ,wCAEI"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.8.5-beta.7",
+  "version": "0.9.0",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <muritavo@outlook.com>",
@@ -12,7 +12,7 @@
     "@firebase/rules-unit-testing": "^2.0.2",
     "@metamask/providers": "^9.1.0",
     "@muritavo/cypress-toolkit": "^0.8.0",
-    "@muritavo/webpack-microfrontend-scripts": "^0.0.23",
+    "@muritavo/webpack-microfrontend-scripts": "^0.0.24",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",