@onepercentio/one-ui 0.29.0 → 0.29.1

package/dist-ts/hooks/useAsyncControl.js

@@ -0,0 +1,67 @@
+import { useCallback, useMemo, useState } from "react";
+export function useRawAsynControl(functionsToWrap, [error, setError], [loading, setLoading]) {
+    const _process = useCallback(async (asyncFn) => {
+        try {
+            setLoading(true);
+            setError(undefined);
+            if (asyncFn instanceof Promise)
+                await asyncFn;
+            else
+                return await asyncFn();
+        }
+        catch (e) {
+            if (process.env.NODE_ENV === "development")
+                console.error(e);
+            setError(e);
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    const { functionsToMemoize, other } = Object.entries(functionsToWrap || {}).reduce((r, [k, func]) => {
+        return {
+            ...r,
+            ...(typeof func === "function"
+                ? {
+                    functionsToMemoize: {
+                        ...r.functionsToMemoize,
+                        [k]: func,
+                    },
+                }
+                : {
+                    other: {
+                        ...r.other,
+                        [k]: func,
+                    },
+                }),
+        };
+    }, {
+        functionsToMemoize: {},
+        other: {},
+    });
+    return {
+        process: _process,
+        loading,
+        error,
+        setError,
+        setLoading,
+        ...other,
+        ...Object.entries(functionsToMemoize).reduce((r, [k, v]) => ({
+            ...r,
+            [k]: useMemo(() => (...args) => _process(() => v(...args)), [v]),
+        }), {}),
+    };
+}
+export function useAsyncControl(functionsToWrap) {
+    const error = useState();
+    const loading = useState(false);
+    return useRawAsynControl(functionsToWrap, error, loading);
+}
+/**
+ * This hook provides a way to handle async operations storing the loading state, or the error when it fails, it does not store information returned from the functions.
+ * @param functionsToWrap The functions to wrap in control.
+ * @returns
+ */
+export default useAsyncControl;
+//# sourceMappingURL=useAsyncControl.js.map

package/dist-ts/hooks/useAsyncControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWvE,MAAM,UAAU,iBAAiB,CAC/B,eAA8B,EAC9B,CAAC,KAAK,EAAE,QAAQ,CAAqB,EACrC,CAAC,OAAO,EAAE,UAAU,CAAe;IAEnC,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE,OAA4C,EAAE,EAAE;QAClF,IAAI,CAAC;YACH,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,IAAI,OAAO,YAAY,OAAO;gBAAE,MAAM,OAAO,CAAC;;gBACzC,OAAO,MAAM,OAAO,EAAE,CAAC;QAC9B,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,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;QACV,CAAC;gBAAS,CAAC;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,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,OAAO;YACL,GAAG,CAAC;YACJ,GAAG,CAAC,OAAO,IAAI,KAAK,UAAU;gBAC5B,CAAC,CAAC;oBACE,kBAAkB,EAAE;wBAClB,GAAG,CAAC,CAAC,kBAAkB;wBACvB,CAAC,CAAC,CAAC,EAAE,IAAI;qBACV;iBACF;gBACH,CAAC,CAAC;oBACE,KAAK,EAAE;wBACL,GAAG,CAAC,CAAC,KAAK;wBACV,CAAC,CAAC,CAAC,EAAE,IAAI;qBACV;iBACF,CAAC;SACP,CAAC;IACJ,CAAC,EACD;QACE,kBAAkB,EAAE,EAAE;QACtB,KAAK,EAAE,EAAE;KAIV,CACF,CAAC;IAEF,OAAO;QACL,OAAO,EAAE,QAAQ;QACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU;QACV,GAAG,KAAK;QACR,GAAG,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAC1C,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACd,GAAG,CAAC;YACJ,CAAC,CAAC,CAAC,EAAE,OAAO,CACV,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;SACF,CAAC,EACF,EAAO,CACR;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAK7B,eAAmB;IACnB,MAAM,KAAK,GAAG,QAAQ,EAAa,CAAC;IACpC,MAAM,OAAO,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEzC,OAAO,iBAAiB,CAAC,eAAe,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;AAC5D,CAAC;AAED;;;;GAIG;AACH,eAAe,eAAe,CAAC"}

package/dist-ts/hooks/useContainedRepositioning.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="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
+ */
+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 | null>;
+};

package/dist-ts/hooks/useContainedRepositioning.js

@@ -0,0 +1,73 @@
+import debounce from "lodash/debounce";
+import { useEffect, useRef } from "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
+ */
+export default function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1, offsetLimit = Number.POSITIVE_INFINITY, } = {}) {
+    const elementToCheck = useRef(null);
+    useEffect(() => {
+        const el = elementToCheck.current;
+        if (!el)
+            return;
+        const curr = el;
+        const relativeParent = getParent(curr);
+        if (process.env.NODE_ENV === "development") {
+            if (window.getComputedStyle(el).position !== "relative")
+                throw new Error("The target element MUST have position relative so it can be moved");
+            if (window.getComputedStyle(relativeParent).position !== "relative")
+                throw new Error("The relative to element MUST have position relative so it can calculate correctly the target position");
+        }
+        if (focused) {
+            curr.style.right = `0px`;
+            const reposition = debounce(() => {
+                const alreadyRight = Number(curr.style.right.replace("px", ""));
+                const limitOffset = relativeParent.scrollLeft + relativeParent.clientWidth;
+                const elWidth = curr.clientWidth * scale;
+                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 isOverflowedRight = exceedingSpace > 0;
+                const isOverflowedLeft = offsetLeft < 0;
+                const limit = exceedingSpace + -offsetLeft;
+                if (isOverflowedRight) {
+                    const val = Math.min(exceedingSpace - -Math.min(Math.abs(limit / 2), offset), offsetLimit);
+                    curr.style.right = `${val}px`;
+                }
+                if (isOverflowedLeft) {
+                    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";
+                }
+            }, 50);
+            reposition();
+            reposition.flush();
+            relativeParent.addEventListener("scroll", reposition, {
+                passive: true
+            });
+            return () => {
+                reposition.cancel();
+                relativeParent.removeEventListener("scroll", reposition);
+                el.style.right = `0px`;
+                const restore = ({ propertyName, currentTarget }) => {
+                    const targetTransformation = window.getComputedStyle(currentTarget).right;
+                    if (propertyName === "right" && targetTransformation === "0px") {
+                        curr.style.zIndex = "";
+                        el.removeEventListener("transitionend", restore);
+                    }
+                };
+                el.addEventListener("transitionend", restore);
+            };
+        }
+    }, [focused]);
+    return {
+        elementToCheck,
+    };
+}
+//# sourceMappingURL=useContainedRepositioning.js.map

package/dist-ts/hooks/useContainedRepositioning.js.map

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

package/dist-ts/hooks/useCustomHistory.d.ts

@@ -0,0 +1,14 @@
+export default function useCustomHistory(): {
+    goBackWithFallback(fallbackRoute: string): void;
+    length: number;
+    action: import("history").Action;
+    location: import("history").Location<unknown>;
+    push(location: import("history").LocationDescriptor<unknown>, state?: unknown): void;
+    replace(location: import("history").LocationDescriptor<unknown>, state?: unknown): void;
+    go(n: number): void;
+    goBack(): void;
+    goForward(): void;
+    block(prompt?: string | boolean | import("history").TransitionPromptHook<unknown> | undefined): import("history").UnregisterCallback;
+    listen(listener: import("history").LocationListener<unknown>): import("history").UnregisterCallback;
+    createHref(location: import("history").LocationDescriptorObject<unknown>): string;
+};

package/dist-ts/hooks/useCustomHistory.js

@@ -0,0 +1,15 @@
+import { useHistory, useLocation } from "react-router-dom";
+export default function useCustomHistory() {
+    const customHistory = useHistory();
+    const { state } = useLocation();
+    return {
+        ...customHistory,
+        goBackWithFallback(fallbackRoute) {
+            if (state?.internalNavigation)
+                customHistory.goBack();
+            else
+                customHistory.push(fallbackRoute);
+        }
+    };
+}
+//# sourceMappingURL=useCustomHistory.js.map

package/dist-ts/hooks/useCustomHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomHistory.js","sourceRoot":"","sources":["../../src/hooks/useCustomHistory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG1D,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACpC,MAAM,aAAa,GAAG,UAAU,EAAE,CAAC;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAA2B,CAAC;IACzD,OAAO;QACH,GAAG,aAAa;QAChB,kBAAkB,CAAC,aAAqB;YACpC,IAAI,KAAK,EAAE,kBAAkB;gBAAE,aAAa,CAAC,MAAM,EAAE,CAAC;;gBACjD,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3C,CAAC;KACJ,CAAA;AACL,CAAC"}

package/dist-ts/hooks/useElementFit.d.ts

@@ -0,0 +1,18 @@
+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
+ *
+ * @param baseWidth The base width of each element
+ */
+export default function useElementFit(baseWidth: number, baseHeight?: number): {
+    /** The amount of items that are able to fit in the available width */
+    howManyItemsFit?: number;
+    /** The amount of items that are able to fit in the available visible space + a row more so it can be scrollable */
+    howManyItemsFitWithExtraRow?: number;
+    /** How many items would fit a single row */
+    howManyItemsByRow?: number;
+    /** How many items until it overflows width */
+    anItemMore?: number;
+    /** The ref to be sent to the element that will receive the items */
+    ref: RefObject<HTMLDivElement | undefined>;
+};

package/dist-ts/hooks/useElementFit.js

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+/**
+ * This hook receives a base width of an element and returns how much items fit **vertically** inside the referenced html element
+ *
+ * @param baseWidth The base width of each element
+ */
+export default function useElementFit(baseWidth, baseHeight) {
+    const ref = useRef(undefined);
+    function calculateDimension() {
+        function howManyItemsStackVertically() {
+            if (!ref.current || baseHeight === undefined)
+                return 1;
+            return Math.floor(ref.current.clientHeight / baseHeight);
+        }
+        if (window.PRERENDER)
+            return {
+                howManyItemsWillBeVisible: 4,
+                byRow: 4,
+            };
+        const width = ref.current?.clientWidth || window.visualViewport.width;
+        const maxItemsHorizontally = Math.floor(width / baseWidth) || 1;
+        if (process.env.NODE_ENV === "development")
+            require("../models/DebugLogger").default(`${useElementFit.name}:clientWidth`, ref.current?.clientWidth);
+        return {
+            howManyItemsWillBeVisible: maxItemsHorizontally * howManyItemsStackVertically(),
+            byRow: maxItemsHorizontally,
+        };
+    }
+    const [itemsToShow, setItemsToShow] = useState(window.PRERENDER
+        ? {
+            byRow: 4,
+            howManyItemsWillBeVisible: 4,
+        }
+        : undefined);
+    useEffect(() => {
+        setItemsToShow(calculateDimension());
+        function onResize() {
+            setItemsToShow(calculateDimension());
+        }
+        window.addEventListener("resize", onResize);
+        return () => {
+            window.removeEventListener("resize", onResize);
+        };
+    }, []);
+    return {
+        howManyItemsFit: itemsToShow?.howManyItemsWillBeVisible,
+        howManyItemsFitWithExtraRow: itemsToShow
+            ? itemsToShow.howManyItemsWillBeVisible + itemsToShow.byRow
+            : undefined,
+        anItemMore: itemsToShow
+            ? itemsToShow.howManyItemsWillBeVisible + 1
+            : undefined,
+        howManyItemsByRow: itemsToShow?.byRow,
+        ref,
+    };
+}
+//# sourceMappingURL=useElementFit.js.map

package/dist-ts/hooks/useElementFit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementFit.js","sourceRoot":"","sources":["../../src/hooks/useElementFit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAmB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CACnC,SAAiB,EACjB,UAAmB;IAcnB,MAAM,GAAG,GAAG,MAAM,CAAiB,SAAS,CAAC,CAAC;IAC9C,SAAS,kBAAkB;QACzB,SAAS,2BAA2B;YAClC,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,UAAU,KAAK,SAAS;gBAAE,OAAO,CAAC,CAAC;YACvD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;QAC5D,CAAC;QACD,IAAK,MAAc,CAAC,SAAS;YAC3B,OAAO;gBACL,yBAAyB,EAAE,CAAC;gBAC5B,KAAK,EAAE,CAAC;aACT,CAAC;QAEJ,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,EAAE,WAAW,IAAI,MAAM,CAAC,cAAe,CAAC,KAAK,CAAC;QACvE,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAEhE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;YACxC,OAAO,CAAC,uBAAuB,CAAC,CAAC,OAAO,CACtC,GAAG,aAAa,CAAC,IAAI,cAAc,EACnC,GAAG,CAAC,OAAO,EAAE,WAAW,CACzB,CAAC;QACJ,OAAO;YACL,yBAAyB,EACvB,oBAAoB,GAAG,2BAA2B,EAAE;YACtD,KAAK,EAAE,oBAAoB;SAC5B,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAG3C,MAAc,CAAC,SAAS;QACvB,CAAC,CAAC;YACE,KAAK,EAAE,CAAC;YACR,yBAAyB,EAAE,CAAC;SAC7B;QACH,CAAC,CAAC,SAAS,CACd,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACrC,SAAS,QAAQ;YACf,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACvC,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,eAAe,EAAE,WAAW,EAAE,yBAAyB;QACvD,2BAA2B,EAAE,WAAW;YACtC,CAAC,CAAC,WAAW,CAAC,yBAAyB,GAAG,WAAW,CAAC,KAAK;YAC3D,CAAC,CAAC,SAAS;QACb,UAAU,EAAE,WAAW;YACrB,CAAC,CAAC,WAAW,CAAC,yBAAyB,GAAG,CAAC;YAC3C,CAAC,CAAC,SAAS;QACb,iBAAiB,EAAE,WAAW,EAAE,KAAK;QACrC,GAAG;KACJ,CAAC;AACJ,CAAC"}

package/dist-ts/hooks/useFirestoreWatch.d.ts

@@ -0,0 +1,12 @@
+import { DocumentChangeType, Unsubscribe } from "firebase/firestore";
+type SnapshotFactoryCb<D extends any> = (changes: {
+    doc: D;
+    type: DocumentChangeType;
+}[]) => void;
+export type SnapshotFactoryReturn<D extends {
+    id: string;
+}> = (cb: SnapshotFactoryCb<D>) => Unsubscribe;
+export default function useFirestoreWatch<D extends {
+    id: string;
+}, P extends any[]>(queryFactory: (...params: P) => SnapshotFactoryReturn<D>, params: P): D[] | undefined;
+export {};

package/dist-ts/hooks/useFirestoreWatch.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+export default function useFirestoreWatch(queryFactory, params) {
+    const [docsList, updateList] = useState();
+    useEffect(() => {
+        const unsub = queryFactory(...params)((changes) => {
+            updateList((prevList = []) => {
+                for (let docChange of changes) {
+                    if (docChange.type === undefined) {
+                        const existing = prevList.find((f) => f.id === docChange.doc.id);
+                        if (existing)
+                            docChange.type = "modified";
+                        else
+                            docChange.type = "added";
+                    }
+                    switch (docChange.type) {
+                        case 'added':
+                            if (!prevList.find((f) => f.id === docChange.doc.id)) {
+                                prevList.unshift(docChange.doc);
+                            }
+                            break;
+                        case 'modified':
+                            prevList = prevList.map((item) => {
+                                if (item.id === docChange.doc.id)
+                                    for (let key in docChange.doc) {
+                                        item[key] = docChange.doc[key];
+                                    }
+                                return item;
+                            });
+                            break;
+                        case 'removed':
+                            prevList = prevList.filter((item) => item.id !== docChange.doc.id);
+                            break;
+                    }
+                }
+                return [...prevList];
+            });
+        });
+        return unsub;
+    }, params);
+    return docsList;
+}
+//# sourceMappingURL=useFirestoreWatch.js.map

package/dist-ts/hooks/useFirestoreWatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFirestoreWatch.js","sourceRoot":"","sources":["../../src/hooks/useFirestoreWatch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAU5C,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAA4C,YAAwD,EAAE,MAAS;IACpJ,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAO,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9C,UAAU,CAAC,CAAC,QAAQ,GAAG,EAAE,EAAE,EAAE;gBACzB,KAAK,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;oBAC5B,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;wBACjC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;wBACjE,IAAI,QAAQ;4BAAE,SAAS,CAAC,IAAI,GAAG,UAAU,CAAA;;4BACpC,SAAS,CAAC,IAAI,GAAG,OAAO,CAAA;oBAC/B,CAAC;oBACD,QAAQ,SAAS,CAAC,IAAI,EAAE,CAAC;wBACrB,KAAK,OAAO;4BACR,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;gCACnD,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;4BACnC,CAAC;4BACD,MAAK;wBACT,KAAK,UAAU;4BACX,QAAQ,GAAG,QAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gCAC9B,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE;oCAC5B,KAAK,IAAI,GAAG,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;wCAC5B,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;oCACnC,CAAC;gCACL,OAAO,IAAI,CAAA;4BACf,CAAC,CAAC,CAAA;4BACF,MAAK;wBACT,KAAK,SAAS;4BACV,QAAQ,GAAG,QAAS,CAAC,MAAM,CACvB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,CACzC,CAAA;4BACD,MAAK;oBACb,CAAC;gBACL,CAAC;gBAED,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAA;YACxB,CAAC,CAAC,CAAA;QAEN,CAAC,CAAC,CAAA;QACF,OAAO,KAAK,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC,CAAC;IAEX,OAAO,QAAQ,CAAC;AACpB,CAAC"}

package/dist-ts/hooks/useForm.d.ts

@@ -0,0 +1,16 @@
+import { BaseForm, FieldDefinition, FieldTypes } from "../components/Form/Form";
+type Intermediary<F extends BaseForm> = {
+    form: F;
+    formValidation: {
+        [k in keyof F]: string;
+    } & {
+        isValid: string | true;
+    };
+    set: <K extends keyof F>(k: K, value: F[K]) => void;
+};
+export type FormControls<C extends FormConfig<any>> = Intermediary<C extends FormConfig<infer F> ? F : never>;
+export type FormConfig<T extends BaseForm> = {
+    [k in keyof T]: FieldDefinition<T, k, FieldTypes>;
+};
+export default function useContextForm<T extends BaseForm>(config: FormConfig<T>, initialState: T): FormControls<FormConfig<T>>;
+export {};

package/dist-ts/hooks/useForm.js

@@ -0,0 +1,27 @@
+import { useMemo, useState } from "react";
+export default function useContextForm(config, initialState) {
+    const [form, setForm] = useState(initialState);
+    const isValid = useMemo(() => !Object.keys(config).some((a) => typeof config[a].validator(form[a], form) === "string"), [form]);
+    const _setFormField = (key, value) => {
+        setForm(prev => ({
+            ...prev,
+            [key]: value
+        }));
+    };
+    const validFormFields = useMemo(() => {
+        return Object.keys(config).reduce((result, field) => {
+            const fieldConfig = config[field];
+            const invalidMessage = fieldConfig.validator(form[field], form);
+            return {
+                ...result,
+                [field]: invalidMessage
+            };
+        }, { isValid });
+    }, [form, isValid]);
+    return {
+        form: form,
+        formValidation: validFormFields,
+        set: _setFormField
+    };
+}
+//# sourceMappingURL=useForm.js.map

package/dist-ts/hooks/useForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.js","sourceRoot":"","sources":["../../src/hooks/useForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAYlD,MAAM,CAAC,OAAO,UAAU,cAAc,CAClC,MAAqB,EACrB,YAAe;IAEf,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAa,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,OAAO,CACnB,GAAG,EAAE,CACD,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CACrB,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,QAAQ,CAChE,EACL,CAAC,IAAI,CAAC,CACT,CAAC;IAEF,MAAM,aAAa,GAAmD,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACjF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACb,GAAG,IAAI;YACP,CAAC,GAAG,CAAC,EAAE,KAAK;SACf,CAAC,CAAC,CAAA;IACP,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,KAAc,EAAE,EAAE;YACzD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAClC,MAAM,cAAc,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;YAChE,OAAO;gBACH,GAAG,MAAM;gBACT,CAAC,KAAK,CAAC,EAAE,cAAc;aAC1B,CAAA;QACL,CAAC,EAAE,EAAE,OAAO,EAA8D,CAAC,CAAA;IAC/E,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO;QACH,IAAI,EAAE,IAAI;QACV,cAAc,EAAE,eAAe;QAC/B,GAAG,EAAE,aAAa;KACd,CAAA;AACZ,CAAC"}

package/dist-ts/hooks/useFreeze.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 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 | undefined;

package/dist-ts/hooks/useFreeze.js

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+/**
+ * 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(something) {
+    const currChildOrPrev = useRef(undefined);
+    currChildOrPrev.current =
+        something === undefined ? currChildOrPrev.current : something;
+    return currChildOrPrev.current;
+}
+//# sourceMappingURL=useFreeze.js.map

package/dist-ts/hooks/useFreeze.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFreeze.js","sourceRoot":"","sources":["../../src/hooks/useFreeze.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAI,SAAY;IAC/C,MAAM,eAAe,GAAG,MAAM,CAAI,SAAS,CAAC,CAAC;IAC7C,eAAe,CAAC,OAAO;QACrB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAChE,OAAO,eAAe,CAAC,OAAO,CAAC;AACjC,CAAC"}

package/dist-ts/hooks/useHero.d.ts

@@ -0,0 +1,68 @@
+import React, { CSSProperties } from "react";
+type ShouldSkip = boolean;
+type Result = [
+    originContainer: Element | VisualViewport,
+    targetContainer: Element | VisualViewport
+];
+/**
+ * This hook implements the logic for a hero animation between 2 elements sharing the same id
+ */
+export default function useHero(id: string, options?: Partial<{
+    propsToTransition: Exclude<keyof CSSProperties, "width" | "height" | "top" | "left">[];
+    /** If set, the default properties (width, height, etc...) will not transition, and propsToTransition will be the only ones that will be transitioned */
+    overridePropsToTransition: boolean;
+    "data-preffix": string;
+    /** This indicates this hero animation will probably be repeated multiple time */
+    repeatable: boolean;
+}>, events?: {
+    /**
+     * Should return if the detected element should be "heroed"
+     *
+     * Usefull for when the hero has 2 possible origins.
+     * For example, one could hero only the current hovered element with el.matches(":hover")
+     */
+    onHeroDetect?: (origin: HTMLDivElement, target: HTMLDivElement) => boolean;
+    /**
+     * Do something when the hero ends
+     *
+     * Usefull for triggering secondary animations
+     */
+    onHeroEnd?: () => void;
+    /** Do somethign with the clone before it goes to the html */
+    onHeroCloned?: (clone: HTMLDivElement) => void;
+    /**
+     * Do something when the hero starts the transition
+     * Here it's usefull to switch classNames with the target.
+     *
+     * If done correctly, it will transition from state a to b smoothly
+     */
+    onHeroStart?: (clone: HTMLDivElement, origin: HTMLDivElement, target: HTMLDivElement) => void;
+    /**
+     * Is called when the hero is coming/going outside the viewport
+     *
+     * By default it's set to skip all heroes that have these conditions
+     *
+     * @returns If the hero should be skipped or not
+     */
+    onHeroSkip?: (origin: HTMLDivElement, target: HTMLDivElement) => ShouldSkip;
+    /**
+     * Called when a hero is skipped
+     */
+    onHeroSkipped?: () => void;
+    /**
+     * Before transition start, setup the properties that will be used for hero animation
+     * @returns The container that will be used to check if the hero is out or in the view
+     */
+    onBeforeTransition?: (origin: HTMLDivElement, target: HTMLDivElement) => Result | Readonly<Result>;
+}): {
+    heroRef: React.RefObject<HTMLDivElement | null>;
+    getHerosOnScreen: () => HTMLDivElement[];
+    trigger: () => void;
+    heroComponentRef: (componentId: string) => (elRef: HTMLDivElement | null) => void;
+};
+type EVENTS_INTERFACE = Parameters<typeof useHero>[2];
+type TRANSITION_TYPES = "ACCELERATION";
+export declare const TRANSITION_FACTORY: {
+    [n in TRANSITION_TYPES]: (events?: EVENTS_INTERFACE) => EVENTS_INTERFACE;
+};
+export {};