@onepercentio/one-ui 0.8.5-beta.1 → 0.8.5-beta.10

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

@@ -1,4 +1,4 @@
-import { Ref } from "react";
+import { RefObject } from "react";
 /**
  * This hook receives a base width of an element and returns how much items fit **vertically** inside the referenced html element
  *
@@ -8,5 +8,5 @@ export default function useElementFit(baseWidth: number, baseHeight?: number): {
     /** The amount of items that are able to fit in the available width */
     itemsToShow?: number;
     /** The ref to be sent to the element that will receive the items */
-    ref: Ref<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement>;
 };

package/dist/hooks/useElementFit.js.map

@@ -1 +1 @@
-{"version":3,"file":"useElementFit.js","sourceRoot":"","sources":["../../src/hooks/useElementFit.ts"],"names":[],"mappings":";;AAAA,iCAA6E;AAE7E;;;;GAIG;AACH,SAAwB,aAAa,CAAC,SAAiB,EAAE,UAAmB;IAOxE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,SAAS,kBAAkB;;QACvB,SAAS,WAAW;YAChB,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,UAAU,KAAK,SAAS;gBACxC,OAAO,CAAC,CAAC;YACb,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAA;QAC5D,CAAC;QACD,IAAK,MAAc,CAAC,SAAS;YAAE,OAAO,CAAC,CAAC;QAExC,MAAM,KAAK,GAAG,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,WAAW,KAAI,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC;QACtE,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAE9D,OAAO,kBAAkB,GAAG,WAAW,EAAE,CAAC;IAC9C,CAAC;IACD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAE,MAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1F,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACrC,SAAS,QAAQ;YACb,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACzC,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACnD,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACH,WAAW;QACX,GAAG;KACN,CAAA;AACL,CAAC;AArCD,gCAqCC"}
+{"version":3,"file":"useElementFit.js","sourceRoot":"","sources":["../../src/hooks/useElementFit.ts"],"names":[],"mappings":";;AAAA,iCAA6E;AAE7E;;;;GAIG;AACH,SAAwB,aAAa,CAAC,SAAiB,EAAE,UAAmB;IAOxE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,SAAS,kBAAkB;;QACvB,SAAS,WAAW;YAChB,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,UAAU,KAAK,SAAS;gBACxC,OAAO,CAAC,CAAC;YACb,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAA;QAC5D,CAAC;QACD,IAAK,MAAc,CAAC,SAAS;YAAE,OAAO,CAAC,CAAC;QAExC,MAAM,KAAK,GAAG,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,WAAW,KAAI,MAAM,CAAC,cAAe,CAAC,KAAK,CAAC;QACvE,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAE9D,OAAO,kBAAkB,GAAG,WAAW,EAAE,CAAC;IAC9C,CAAC;IACD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAE,MAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1F,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACrC,SAAS,QAAQ;YACb,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACzC,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACnD,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACH,WAAW;QACX,GAAG;KACN,CAAA;AACL,CAAC;AArCD,gCAqCC"}

package/dist/hooks/useFreeze.d.ts

@@ -2,4 +2,4 @@
  * This hook pipes a data and when it is set to a falsy value ("", undefined, null, 0),
  * it returns the previous valid value
  */
-export default function useFreeze<T>(something: T): T | null;
+export default function useFreeze<T>(something: T): NonNullable<T> | null;

package/dist/hooks/useHero.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from "react";
+/**
+ * This hook implements the logic for a hero animation between 2 elements
+ */
+export default function useHero(id: string, propsToTransition?: Omit<keyof CSSProperties, "width" | "height" | "top" | "left">[], events?: {
+    /** Returns if the element should be heroed */
+    onHeroDetect?: (el: HTMLDivElement) => boolean;
+    onHeroEnd?: () => void;
+    onHeroStart?: (clone: HTMLDivElement) => void;
+}): {
+    heroRef: import("react").RefObject<HTMLDivElement>;
+    getHerosOnScreen: () => HTMLDivElement[];
+};

package/dist/hooks/useHero.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const ID = (id) => `${id}-hero`;
+/**
+ * This hook implements the logic for a hero animation between 2 elements
+ */
+function useHero(id, propsToTransition = [], events = {}) {
+    const heroRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        heroRef.current.setAttribute("data-hero", id);
+    }, [id]);
+    const getHerosOnScreen = (0, react_1.useCallback)(() => {
+        const otherElements = Array.from(document.querySelectorAll(`[data-hero="${id}"]`));
+        return otherElements;
+    }, [id]);
+    (0, react_1.useEffect)(() => {
+        const allPropsToTransition = [
+            "width",
+            "height",
+            "top",
+            "left",
+            ...propsToTransition,
+        ];
+        const otherElements = getHerosOnScreen().filter(events.onHeroDetect || (() => true));
+        if (process.env.NODE_ENV === "development" && otherElements.length > 2)
+            console.warn("There are too many elements to transition to, I will transition to the first I find", otherElements);
+        const otherElement = otherElements.find((el) => el !== heroRef.current);
+        if (otherElement) {
+            const oldClone = document.querySelector(`[data-hero-clone="${ID(id)}"]`);
+            const clone = (oldClone ||
+                otherElement.cloneNode(true));
+            // Clean up thos properties that can cause confusion since it's a clone
+            clone.style.visibility = "";
+            clone.removeAttribute("data-hero");
+            clone.setAttribute("data-hero-clone", ID(id));
+            // Since a transition is now triggering from the old element, he cannot be considered for other transitions
+            otherElement.removeAttribute("data-hero");
+            /**
+             *
+             * @param el
+             * @returns Returns if it will move
+             */
+            function setCloneToCoordinates(el) {
+                const coordinates = el.getBoundingClientRect();
+                const currentCoordinates = clone.getBoundingClientRect();
+                const willNotMove = coordinates.top === currentCoordinates.top &&
+                    coordinates.left === currentCoordinates.left &&
+                    coordinates.width === currentCoordinates.width &&
+                    coordinates.height === currentCoordinates.height;
+                clone.style.position = "fixed";
+                clone.style.top = `${coordinates.top}px`;
+                clone.style.left = `${coordinates.left}px`;
+                clone.style.width = `${coordinates.width}px`;
+                clone.style.height = `${coordinates.height}px`;
+                return !willNotMove;
+            }
+            if (!oldClone) {
+                setCloneToCoordinates(otherElement);
+                document.body.appendChild(clone);
+            }
+            heroRef.current.style.visibility = "hidden";
+            otherElement.style.visibility = "hidden";
+            clone.style.transition = `${allPropsToTransition
+                .map((prop) => `${prop} var(--animation--speed-fast, 250ms) ease-out`)
+                .join(", ")}`;
+            setTimeout(() => {
+                const cleanup = () => {
+                    if (events.onHeroEnd)
+                        events.onHeroEnd();
+                    clone.remove();
+                    el.style.visibility = "";
+                };
+                if (events.onHeroStart)
+                    events.onHeroStart(clone);
+                if (!heroRef.current)
+                    return;
+                const el = heroRef.current;
+                const willMove = setCloneToCoordinates(el);
+                if (!willMove)
+                    cleanup();
+                else {
+                    for (let propToTransition of propsToTransition)
+                        clone.style[propToTransition] =
+                            el.style[propToTransition];
+                    clone.addEventListener("transitionend", ({ target, currentTarget }) => {
+                        if (target === currentTarget)
+                            cleanup();
+                    });
+                }
+            }, 0);
+        }
+    }, []);
+    return { heroRef, getHerosOnScreen };
+}
+exports.default = useHero;
+//# sourceMappingURL=useHero.js.map

package/dist/hooks/useHero.js.map

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

package/dist/hooks/useMergeRefs.d.ts

@@ -0,0 +1,5 @@
+import { useRef } from "react";
+/**
+ * This function exists so we can work with multiple refs as a single one
+ */
+export default function useMergeRefs<T extends ReturnType<typeof useRef>>(mainRef: T, ...otherRefs: T[]): T;

package/dist/hooks/useMergeRefs.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * This function exists so we can work with multiple refs as a single one
+ */
+function useMergeRefs(mainRef, ...otherRefs) {
+    (0, react_1.useLayoutEffect)(() => {
+        for (let ref of otherRefs)
+            ref.current = mainRef.current;
+    }, []);
+    return mainRef;
+}
+exports.default = useMergeRefs;
+//# sourceMappingURL=useMergeRefs.js.map

package/dist/hooks/useMergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../src/hooks/useMergeRefs.ts"],"names":[],"mappings":";;AAAA,iCAA2D;AAE3D;;GAEG;AACH,SAAwB,YAAY,CAClC,OAAU,EACV,GAAG,SAAc;IAEjB,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,KAAK,IAAI,GAAG,IAAI,SAAS;YAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,OAAO,CAAC;AACjB,CAAC;AARD,+BAQC"}

package/dist/hooks/usePagination.d.ts

@@ -19,11 +19,12 @@ export declare type Paginable<I extends any, A extends any[] = [], E extends any
 /**
  * This returns a ref to be bound to an elements so it can be able to detect when a pagination whould occur
  */
-export declare function useContainerPagination(cb: () => void): {
+export declare function useContainerPagination(cb: () => void, direction?: "h" | "v"): {
     scrollableRef: import("react").RefObject<HTMLDivElement>;
-    customOptionsRef: import("react").MutableRefObject<(() => ({
-        offsetBottom: number;
-    })) | undefined>;
+    customOptionsRef: import("react").MutableRefObject<(() => {
+        offsetBottom?: number;
+        offsetLeft?: number;
+    }) | undefined>;
 };
 /**
  * This function receives an amount of local instances and paginates it

package/dist/hooks/usePagination.js

@@ -33,15 +33,12 @@ function usePagination(request, paginationId = () => "default") {
     const [items, setItems] = (0, react_1.useState)();
     const _a = (0, useAsyncControl_1.default)(), { process } = _a, control = __rest(_a, ["process"]);
     function updateItems(cb) {
-        setItems(prev => [prev[0], cb(), prev[2]]);
+        setItems((prev) => [prev[0], cb(), prev[2]]);
     }
     const _requestPage = (0, react_1.useCallback)(function (page, ...args) {
-        var _a;
         const id = paginationId(...args);
-        if ((_a = paginationData[id]) === null || _a === void 0 ? void 0 : _a.finished)
-            return;
         process(() => __awaiter(this, void 0, void 0, function* () {
-            const result = yield request(page, (items === null || items === void 0 ? void 0 : items[0]) === id ? items === null || items === void 0 ? void 0 : items[1] : undefined, ...args);
+            const result = yield request(page, (items === null || items === void 0 ? void 0 : items[0]) === id && page !== 0 ? items === null || items === void 0 ? void 0 : items[1] : undefined, ...args);
             paginationData[id] = {
                 finished: result.finished,
                 totalItems: result.totalItems,
@@ -57,20 +54,22 @@ function usePagination(request, paginationId = () => "default") {
     }, [items, request]);
     return {
         updateItems,
-        getNextPage: (...args) => _requestPage(((items === null || items === void 0 ? void 0 : items[2]) || 0) + 1, ...args),
+        getNextPage: (...args) => {
+            _requestPage(((items === null || items === void 0 ? void 0 : items[2]) || 0) + 1, ...args);
+        },
         getPage: _requestPage,
         totalItems: (...args) => { var _a; return (_a = paginationData[paginationId(...args)]) === null || _a === void 0 ? void 0 : _a.totalItems; },
         loading: control.loading,
         error: control.error,
         items: items === null || items === void 0 ? void 0 : items[1],
-        setError: control.setError
+        setError: control.setError,
     };
 }
 exports.default = usePagination;
 /**
  * This returns a ref to be bound to an elements so it can be able to detect when a pagination whould occur
  */
-function useContainerPagination(cb) {
+function useContainerPagination(cb, direction = "v") {
     const scrollableRef = (0, react_1.useRef)(null);
     const customOptionsRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
@@ -78,22 +77,30 @@ function useContainerPagination(cb) {
         const scrollElement = el.scrollingElement || el;
         const calculateIfReachedLimit = (0, throttle_1.default)(() => {
             var _a;
-            const customOptions = ((_a = customOptionsRef.current) === null || _a === void 0 ? void 0 : _a.call(customOptionsRef)) || { offsetBottom: 0 };
-            const offsetLimit = scrollElement.scrollHeight - customOptions.offsetBottom - scrollElement.clientHeight * 0.6;
-            const offset = scrollElement.clientHeight + scrollElement.scrollTop;
+            const { offsetBottom = 0, offsetLeft = 0 } = ((_a = customOptionsRef.current) === null || _a === void 0 ? void 0 : _a.call(customOptionsRef)) || {};
+            const offsetLimit = direction === "v"
+                ? scrollElement.scrollHeight -
+                    offsetBottom -
+                    scrollElement.clientHeight * 0.6
+                : scrollElement.scrollWidth -
+                    offsetLeft -
+                    scrollElement.clientWidth * 0.6;
+            const offset = direction === "v"
+                ? scrollElement.clientHeight + scrollElement.scrollTop
+                : scrollElement.clientWidth + scrollElement.scrollLeft;
             if (offset >= offsetLimit) {
                 cb();
             }
         }, 250, {
             leading: false,
-            trailing: true
+            trailing: true,
         });
         el.addEventListener("scroll", calculateIfReachedLimit);
-        return () => el.removeEventListener('scroll', calculateIfReachedLimit);
+        return () => el.removeEventListener("scroll", calculateIfReachedLimit);
     }, [cb]);
     return {
         scrollableRef,
-        customOptionsRef
+        customOptionsRef,
     };
 }
 exports.useContainerPagination = useContainerPagination;
@@ -108,7 +115,7 @@ function useLocalPagination(items, pageSize) {
         return Promise.resolve({
             finished: newArray.length === items.length,
             totalItems: items.length,
-            items: newArray
+            items: newArray,
         });
     }, [pageSize, items]);
     const pagination = usePagination(cb, () => `${instanceID}`);

package/dist/hooks/usePagination.js.map

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

@@ -1,5 +1,5 @@
 import { Contract, ContractOptions, EventData, PastEventOptions } from "web3-eth-contract";
-export declare type AllABIs = OnepercentUtility.ApplicationABIs;
+export declare type AllABIs = readonly any[];
 declare type ExtractMethods<A extends AllABIs[number]> = A extends {
     type: "function";
 } ? A["name"] : never;

package/dist/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../index.d.ts" />
 declare type PrependNextNum<A extends Array<unknown>> = A['length'] extends infer T ? ((t: T, ...a: A) => void) extends ((...x: infer X) => void) ? X : never : never;
 declare type EnumerateInternal<A extends Array<unknown>, N extends number> = {
     0: A;
@@ -22,7 +21,7 @@ export declare type BasicContext<T extends object> = {
 export declare type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
 declare global {
     interface Window {
-        ethereum: any;
+        ethereum: import("@metamask/providers").MetaMaskInpageProvider | undefined;
         PRERENDER: boolean;
         Cypress: any;
     }

package/dist/types.js

@@ -1,4 +1,3 @@
 "use strict";
-/// <reference path="../index.d.ts"/>
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";AAAA,qCAAqC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,26 +1,18 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.8.5-beta.1",
+  "version": "0.8.5-beta.10",
   "description": "A set of reusable components created through the development of Onepercent projects",
-  "files": [
-    "dist",
-    "WebpackConfigs",
-    "cypress/support",
-    "src/types.d.ts"
-  ],
-  "bin": {
-    "start-emulator": "scripts/start-emulator.js"
-  },
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <muritavo@outlook.com>",
   "license": "MIT",
-  "types": "index.d.ts",
+  "types": "src/types.ts",
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@cypress/react": "^5.12.5",
     "@firebase/rules-unit-testing": "^2.0.2",
-    "@muritavo/cypress-toolkit": "^0.7.1",
-    "@muritavo/webpack-microfrontend-scripts": "^0.0.22",
+    "@metamask/providers": "^9.1.0",
+    "@muritavo/cypress-toolkit": "^0.8.0",
+    "@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",
@@ -42,7 +34,7 @@
     "cpy-cli": "^3.1.1",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^5",
-    "cypress": "^10.2.0",
+    "cypress": "^10.9.0",
     "firebase": "^9.8.1",
     "firebase-admin": "^10.2.0",
     "https-browserify": "^1.0.0",
@@ -92,7 +84,7 @@
     "build-storybook": "build-storybook",
     "prebuild": "cd src",
     "copy-css": "cpy --cwd=\"src\" \"**/*.{scss,svg}\" \"../dist\" --parents",
-    "build": "tsc && npm run copy-css && yarn dts-generator --project ./ --out index.d.ts --prefix @onepercentio/one-ui/dist --exclude **/*.stories.* --exclude **/index.* --exclude **/*.test.*",
+    "build": "tsc && npm run copy-css",
     "postbuild": "cd ..",
     "dev": "tsc --watch",
     "test:watch": "jest --watchAll --coverage",
@@ -117,4 +109,4 @@
     "chroma-js": "^2.4.2",
     "use-wallet": "0.13.5"
   }
-}
+}

package/src/types.ts

@@ -0,0 +1,85 @@
+type PrependNextNum<A extends Array<unknown>> = A['length'] extends infer T ? ((t: T, ...a: A) => void) extends ((...x: infer X) => void) ? X : never : never;
+
+type EnumerateInternal<A extends Array<unknown>, N extends number> = { 0: A, 1: EnumerateInternal<PrependNextNum<A>, N> }[N extends A['length'] ? 0 : 1];
+
+export type Enumerate<N extends number> = EnumerateInternal<[], N> extends (infer E)[] ? E : never;
+
+export type Range<FROM extends number, TO extends number> = Exclude<Enumerate<TO>, Enumerate<FROM>>;
+
+export type CommonErrorCodes = "UNEXPECTED_ERROR";
+
+type Decompose<O extends object> = O;
+
+export type BasicContext<T extends object> = {
+  set: <P extends keyof T>(p: P, value: T[typeof p]) => void;
+} & T;
+
+/**
+ * This is usefull for omitting props from union
+ * Check whz contestation model to see an example
+ *
+ * If different models with different properties use the native Omit<O>
+ * Their differences are also omitted generating a single model
+ *
+ * This typing solves that
+ */
+export type DistributiveOmit<T, K extends keyof any> = T extends any
+  ? Omit<T, K>
+  : never;
+
+declare global {
+  interface Window {
+    ethereum: import("@metamask/providers").MetaMaskInpageProvider | undefined;
+    PRERENDER: boolean;
+    Cypress: any;
+  }
+}
+type NestedValue = unknown;
+type FieldValues = unknown;
+
+export declare type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+export declare type EmptyObject = {
+  [K in string | number]: never;
+};
+export declare type NonUndefined<T> = T extends undefined ? never : T;
+export declare type LiteralUnion<T extends U, U extends Primitive> = T | (U & {
+  _?: never;
+});
+export declare type DeepPartial<T> = T extends Array<infer U> ? Array<DeepPartial<U>> : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : T extends {
+  [key in keyof T]: T[key];
+} ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+  } : T;
+export declare type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
+export declare type DeepMap<T, TValue> = {
+  [K in keyof T]?: IsAny<T[K]> extends true ? any : NonNullable<T[K]> extends NestedValue | Date | FileList | File ? TValue : NonUndefined<T[K]> extends object | null ? DeepMap<T[K], TValue> : NonUndefined<T[K]> extends Array<infer U> ? IsAny<U> extends true ? Array<any> : U extends NestedValue | Date | FileList ? Array<TValue> : U extends object ? Array<DeepMap<U, TValue>> : Array<TValue> : TValue;
+};
+export declare type IsFlatObject<T extends object> = Extract<Exclude<T[keyof T], NestedValue | Date | FileList>, any[] | object> extends never ? true : false;
+declare type IsTuple<T extends ReadonlyArray<any>> = number extends T['length'] ? false : true;
+declare type TupleKey<T extends ReadonlyArray<any>> = Exclude<keyof T, keyof any[]>;
+declare type ArrayKey = number;
+declare type PathImpl<K extends string | number, V> = V extends Primitive ? `${K}` : `${K}.${Path<V>}`;
+export declare type Path<T> = T extends ReadonlyArray<infer V>
+  ?
+  IsTuple<T> extends true
+  ? {
+    [K in TupleKey<T>]-?: PathImpl<K & string, T[K]>;
+  }[TupleKey<T>]
+  : PathImpl<ArrayKey, V>
+  : {
+    [K in keyof T]-?: PathImpl<K & string, T[K]>;
+  }[keyof T];
+export declare type FieldPath<TFieldValues extends FieldValues> = Path<TFieldValues>;
+declare type ArrayPathImpl<K extends string | number, V> = V extends Primitive ? never : V extends ReadonlyArray<infer U> ? U extends Primitive ? never : `${K}` | `${K}.${ArrayPath<V>}` : `${K}.${ArrayPath<V>}`;
+export declare type ArrayPath<T> = T extends ReadonlyArray<infer V> ? IsTuple<T> extends true ? {
+  [K in TupleKey<T>]-?: ArrayPathImpl<K & string, T[K]>;
+}[TupleKey<T>] : ArrayPathImpl<ArrayKey, V> : {
+  [K in keyof T]-?: ArrayPathImpl<K & string, T[K]>;
+}[keyof T];
+export declare type FieldArrayPath<TFieldValues extends FieldValues> = ArrayPath<TFieldValues>;
+export declare type PathValue<T, P extends Path<T> | ArrayPath<T>> = P extends `${infer K}.${infer R}` ? K extends keyof T ? R extends Path<T[K]> ? PathValue<T[K], R> : never : K extends `${ArrayKey}` ? T extends ReadonlyArray<infer V> ? PathValue<V, R & Path<V>> : never : never : P extends keyof T ? T[P] : P extends `${ArrayKey}` ? T extends ReadonlyArray<infer V> ? V : never : never;
+export declare type FieldPathValue<TFieldValues extends FieldValues, TFieldPath extends FieldPath<TFieldValues>> = PathValue<TFieldValues, TFieldPath>;
+export declare type FieldArrayPathValue<TFieldValues extends FieldValues, TFieldArrayPath extends FieldArrayPath<TFieldValues>> = PathValue<TFieldValues, TFieldArrayPath>;
+export declare type FieldPathValues<TFieldValues extends FieldValues, TPath extends FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[]> = {} & {
+  [K in keyof TPath]: FieldPathValue<TFieldValues, TPath[K] & FieldPath<TFieldValues>>;
+};