@onepercentio/one-ui 0.29.0 → 0.29.1

package/dist-ts/hooks/ui/usePaginationControls.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import throttle from "lodash/throttle";
+import { useEffect, useState } from "react";
+import Fade from "../../components/FadeIn";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+import Styles from "./usePaginationControls.module.scss";
+import { isSameTarget } from "../../utils/html.utils";
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+export default function usePaginationControls(containerRef, { snapToPage, baseWidth, snapToCutElement: _snapToCutElement, ...props } = {}) {
+    const [controlsState, setControls] = useState([false, false]);
+    const [leftControl, rightControl] = controlsState;
+    const LeftControl = useOneUIConfig("hook.ui.usePaginationControls.LeftControl");
+    const RightControl = useOneUIConfig("hook.ui.usePaginationControls.RightControl");
+    const className = useOneUIConfig("hook.ui.usePaginationControls.className", "");
+    function move(direction, snapToCutElement = _snapToCutElement) {
+        return () => {
+            if (snapToCutElement ?? false) {
+                const childBaseWidth = baseWidth || containerRef.current.firstElementChild.clientWidth;
+                const howMuchDoesTheScrollAddsUpTo = containerRef.current.scrollLeft / childBaseWidth -
+                    Math.floor((containerRef.current.scrollLeft + (direction === "l" ? -1 : 0)) /
+                        childBaseWidth);
+                const howMuchElementsFitOnAPage = containerRef.current.clientWidth / childBaseWidth;
+                const howMuchElementsFullyFitOnAPage = Math.floor(howMuchElementsFitOnAPage) || 1;
+                const directionScale = direction === "l"
+                    ? 1 - howMuchDoesTheScrollAddsUpTo
+                    : howMuchDoesTheScrollAddsUpTo;
+                const howMuchOfTheRemainingElementIsShown = howMuchElementsFitOnAPage +
+                    directionScale -
+                    howMuchElementsFullyFitOnAPage;
+                const howMuchToScroll = (containerRef.current.clientWidth -
+                    childBaseWidth * howMuchOfTheRemainingElementIsShown) *
+                    (direction === "l" ? -1 : 1);
+                containerRef.current.scrollBy({
+                    left: howMuchToScroll,
+                    behavior: "smooth",
+                });
+            }
+            else {
+                const rest = Math.round(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 updateFunc = (next) => (prev) => {
+            if (prev[0] !== next[0] || prev[1] !== next[1])
+                return next;
+            return prev;
+        };
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const shouldHaveAnyControl = el.scrollWidth > el.clientWidth;
+        if (!shouldHaveAnyControl)
+            setControls(updateFunc([false, false]));
+        else {
+            const shouldHaveRightControl = el.scrollLeft < el.scrollWidth - el.clientWidth;
+            const shouldHaveLeftControl = el.scrollLeft > 0;
+            setControls(updateFunc([shouldHaveLeftControl, shouldHaveRightControl]));
+        }
+    }
+    useEffect(() => {
+        const el = containerRef.current;
+        const throttledCheck = throttle(checkControlsRequirement, 1000 / 4);
+        checkControlsRequirement();
+        let startingX;
+        let lastX;
+        const onTouchStart = ({ touches, ...e }) => {
+            if (!isSameTarget(e))
+                return;
+            const { pageX } = touches.item(0);
+            startingX = pageX;
+        };
+        const onTouchMove = ({ touches, ...e }) => {
+            if (!isSameTarget(e))
+                return;
+            const touch = touches.item(0);
+            lastX = touch.pageX;
+        };
+        const onTouchEnd = (e) => {
+            if (!lastX)
+                return;
+            const dir = lastX > startingX ? "l" : "r";
+            move(dir, true)();
+            startingX = undefined;
+        };
+        el.addEventListener("scroll", throttledCheck, {
+            passive: true,
+        });
+        el.addEventListener("touchstart", onTouchStart);
+        el.addEventListener("touchend", onTouchEnd);
+        el.addEventListener("touchmove", onTouchMove);
+        return () => {
+            el.removeEventListener("scroll", throttledCheck);
+            el.removeEventListener("touchstart", onTouchStart);
+            el.removeEventListener("touchend", onTouchEnd);
+            el.removeEventListener("touchend", onTouchEnd);
+        };
+    }, []);
+    return {
+        controls: [
+            _jsx(Fade, { active: leftControl, className: `${Styles.left} ${Styles.control} ${className}`, "data-testid": props["data-testid"]?.[0], onClick: move("l"), children: leftControl && _jsx(LeftControl, {}) }, "l"),
+            _jsx(Fade, { active: rightControl, className: `${Styles.right} ${Styles.control} ${className}`, "data-testid": props["data-testid"]?.[1], onClick: move("r"), children: rightControl && _jsx(RightControl, {}) }, "r"),
+        ],
+        checkControlsRequirement,
+    };
+}
+//# sourceMappingURL=usePaginationControls.js.map

package/dist-ts/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-ts/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-ts/hooks/ui/useSnapToViewport.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
+ */
+export default function useSnapToViewport(defaultPadding: number): import("react").RefObject<HTMLDivElement | null>;

package/dist-ts/hooks/ui/useSnapToViewport.js

@@ -0,0 +1,19 @@
+import { useLayoutEffect, useRef } from "react";
+import Styles from "./useSnapToViewport.module.scss";
+/**
+ * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
+ */
+export default function useSnapToViewport(defaultPadding) {
+    const elRef = useRef(null);
+    useLayoutEffect(() => {
+        const diff = window.visualViewport.width - elRef.current.clientWidth;
+        const margin = diff / 2;
+        elRef.current.style.setProperty("--overflow-padding", `${margin}px`);
+        elRef.current.style.setProperty("--overflow-margin", `${-margin}px`);
+        elRef.current.style.setProperty("--default-padding", `${defaultPadding}px`);
+        elRef.current.style.setProperty("--default-margin", `${-defaultPadding}px`);
+        elRef.current.classList.add(Styles.applySpacings);
+    }, []);
+    return elRef;
+}
+//# sourceMappingURL=useSnapToViewport.js.map

package/dist-ts/hooks/ui/useSnapToViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnapToViewport.js","sourceRoot":"","sources":["../../../src/hooks/ui/useSnapToViewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,MAAM,iCAAiC,CAAC;AACrD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,cAAsB;IAC9D,MAAM,KAAK,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3C,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,KAAK,CAAC,OAAQ,CAAC,WAAW,CAAC;QAEvE,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC;QAExB,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;QACtE,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;QACtE,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAC9B,mBAAmB,EACnB,GAAG,cAAc,IAAI,CACtB,CAAC;QACF,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAC9B,kBAAkB,EAClB,GAAG,CAAC,cAAc,IAAI,CACvB,CAAC;QACF,KAAK,CAAC,OAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist-ts/hooks/ui/useSnapToViewport.module.scss

@@ -0,0 +1,6 @@
+.applySpacings {
+  padding-left: var(--overflow-padding, var(--default-padding));
+  padding-right: var(--overflow-padding, var(--default-padding));
+  margin-left: var(--overflow-margin, var(--default-margin));
+  margin-right: var(--overflow-margin, var(--default-margin));
+}

package/dist-ts/hooks/ui/useTilt.d.ts

@@ -0,0 +1,46 @@
+import { RefObject } from "react";
+type Options = {
+    round?: boolean;
+    gyroEnabled?: boolean;
+};
+export declare function useTiltUpdates(active: boolean, relativeToEl: RefObject<HTMLDivElement | null>, onTilt: (p: {
+    x: number;
+    y: number;
+}) => void, onInverseMatrix?: (updateFunc: (matrix: number[]) => number[]) => void, sensorScale?: number, tiltLimit?: {
+    x: number;
+    y: number;
+}, options?: Options): void;
+/**
+ * This hook binds to two methods for calculating tilt
+ *
+ * When available: The device sensors
+ * When on desktop: The mouse position relative to a ref
+ */
+export default function useTilt(active: boolean, 
+/**
+ * A scale to increase the values from the sensors
+ *
+ * @hack You can set this value to 0 as a way to disable the tilt calc on mobile
+ */
+sensorScale?: number, maxTilt?: {
+    x: number;
+    y: number;
+}, options?: Options): {
+    /** The element to monitor mouse hover relative to */
+    relativeTo: RefObject<HTMLDivElement | null>;
+    /**
+     * The matrix that represents the original tilt, so it can be used with the tilt prop to tilt relative to the user
+     * Use it on css like so transform: matrix3d(tiltResetMatrix.join(",")) rotateX(tilt.x) rotateY(tilt.y)
+     */
+    tiltResetMatrix: number[];
+    /**
+     * How much tilt should be applied based
+     */
+    tilt: {
+        x: number;
+        y: number;
+    };
+};
+export declare function calculateDistanceRelativeToBounds(mousePosition: number, elementInitialPosition: number, elementSizeDimension: number, shouldRound: boolean): number;
+export declare function givenTheRelativePositionHowMuchToRotate(relativePosition: number, maxRotation: number): number;
+export {};

package/dist-ts/hooks/ui/useTilt.js

@@ -0,0 +1,131 @@
+import throttle from "lodash/throttle";
+import { useEffect, useRef, useState } from "react";
+import { flattenMatrix, generateMatrixFromOperations, IDENTITY_MATRIX, invertMatrix, } from "../../components/Parallax/math/helpers";
+const MAX_TILT = {
+    x: 100,
+    y: 100,
+};
+export function useTiltUpdates(active, relativeToEl, onTilt, onInverseMatrix, sensorScale = 1, tiltLimit = MAX_TILT, options) {
+    useEffect(() => {
+        if (active) {
+            const updatePositions = (relativeToX, relativeToY) => {
+                const el = relativeToEl.current;
+                const rect = el.getBoundingClientRect();
+                const { width: [x0, xW], height: [y0, yH], } = {
+                    width: [rect.left, el.clientWidth],
+                    height: [rect.top, el.clientHeight],
+                };
+                const distanceOffRight = calculateDistanceRelativeToBounds(relativeToX, x0, xW, options?.round ?? true);
+                const distanceOffBottom = calculateDistanceRelativeToBounds(relativeToY, y0, yH, options?.round ?? true);
+                const howMuchToRotateY = givenTheRelativePositionHowMuchToRotate(distanceOffRight, tiltLimit.y);
+                const howMuchToRotateX = givenTheRelativePositionHowMuchToRotate(distanceOffBottom, tiltLimit.x);
+                onTilt({
+                    y: howMuchToRotateX * 2,
+                    x: howMuchToRotateY * 2,
+                });
+            };
+            const handler = throttle(({ x, y }) => {
+                updatePositions(x, y);
+            }, 1000 / 30);
+            const touchHandler = throttle(({ touches }) => {
+                const { pageX, pageY } = touches[0];
+                updatePositions(pageX, pageY);
+            }, 1000 / 30);
+            window.addEventListener("mousemove", handler);
+            window.addEventListener("touchmove", touchHandler);
+            let _inverseMatrix;
+            const _limits = {
+                beta: undefined,
+                gamma: undefined,
+            };
+            const orientationListener = ({ beta, gamma, }) => {
+                beta = beta * 0.5;
+                gamma = gamma * 0.5;
+                if (!_inverseMatrix) {
+                    window.removeEventListener("mousemove", handler);
+                    window.removeEventListener("touchmove", touchHandler);
+                    const offset = 12.5;
+                    _limits.beta = [beta - offset, beta + offset];
+                    _limits.gamma = [gamma - offset, gamma + offset];
+                }
+                const _beta = Math.min(_limits.beta[1], Math.max(_limits.beta[0], beta));
+                const _gamma = Math.min(_limits.gamma[1], Math.max(_limits.gamma[0], gamma));
+                if (!_inverseMatrix && onInverseMatrix) {
+                    onInverseMatrix(() => {
+                        return (_inverseMatrix = flattenMatrix(invertMatrix(generateMatrixFromOperations({
+                            type: "rotateY",
+                            angle: _gamma,
+                        }, {
+                            type: "rotateX",
+                            angle: -_beta,
+                        }))));
+                    });
+                }
+                onTilt({
+                    y: -_beta * sensorScale,
+                    x: _gamma * sensorScale,
+                });
+            };
+            function removeListeners() {
+                window.removeEventListener("mousemove", handler);
+                window.removeEventListener("touchmove", touchHandler);
+            }
+            if (options?.gyroEnabled ?? true) {
+                window.addEventListener("deviceorientation", orientationListener);
+                return () => {
+                    window.removeEventListener("deviceorientation", orientationListener);
+                    removeListeners();
+                };
+            }
+            else {
+                return () => removeListeners();
+            }
+        }
+    }, [active, onInverseMatrix, onTilt]);
+}
+/**
+ * This hook binds to two methods for calculating tilt
+ *
+ * When available: The device sensors
+ * When on desktop: The mouse position relative to a ref
+ */
+export default function useTilt(active, 
+/**
+ * A scale to increase the values from the sensors
+ *
+ * @hack You can set this value to 0 as a way to disable the tilt calc on mobile
+ */
+sensorScale = 1, maxTilt = MAX_TILT, options) {
+    const [tilt, setTilt] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [tiltResetMatrix, setTiltResetMatrix] = useState(() => flattenMatrix(IDENTITY_MATRIX()));
+    const relativeTo = useRef(null);
+    useTiltUpdates(active, relativeTo, setTilt, setTiltResetMatrix, sensorScale, maxTilt, options);
+    return {
+        /** The element to monitor mouse hover relative to */
+        relativeTo,
+        /**
+         * The matrix that represents the original tilt, so it can be used with the tilt prop to tilt relative to the user
+         * Use it on css like so transform: matrix3d(tiltResetMatrix.join(",")) rotateX(tilt.x) rotateY(tilt.y)
+         */
+        tiltResetMatrix,
+        /**
+         * How much tilt should be applied based
+         */
+        tilt,
+    };
+}
+export function calculateDistanceRelativeToBounds(mousePosition, elementInitialPosition, elementSizeDimension, shouldRound) {
+    const normalizeInitialPosition = mousePosition - elementInitialPosition;
+    const doNotAllowGoingBeyondLowerLimit = Math.max(normalizeInitialPosition, 0);
+    const doNotAllowHoingBeyondHigherLimit = Math.min(doNotAllowGoingBeyondLowerLimit, elementSizeDimension);
+    const threeRule = (doNotAllowHoingBeyondHigherLimit * 100) / elementSizeDimension;
+    const result = (shouldRound ? Math.round(threeRule) : threeRule) / 100;
+    return result;
+}
+export function givenTheRelativePositionHowMuchToRotate(relativePosition, maxRotation) {
+    return relativePosition * maxRotation - maxRotation / 2;
+}
+//# sourceMappingURL=useTilt.js.map

package/dist-ts/hooks/ui/useTilt.js.map

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

package/dist-ts/hooks/ui/useZoomable.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Allows an element to be zoomable for fullscreen
+ */
+export default function useZoomable(id: string): {
+    zoomableEl: (providedRef: any) => void;
+};

package/dist-ts/hooks/ui/useZoomable.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
+import Styles from "./useZoomable.module.scss";
+import useHero from "../useHero";
+import { useMergeRefsFunc } from "../useMergeRefs";
+import ownEvent from "../../utils/ownEvent";
+/**
+ * Allows an element to be zoomable for fullscreen
+ */
+export default function useZoomable(id) {
+    const zoomableID = useMemo(() => `zoomable-${id}`, []);
+    const getBackdrop = () => {
+        return document.querySelector(`[data-zoomable="${zoomableID}"]`);
+    };
+    const { heroRef, trigger } = useHero(zoomableID, {
+        "data-preffix": "zoomable",
+        repeatable: true,
+    }, {
+        onHeroStart: (clone, ...args) => {
+            const bd = getBackdrop();
+            const removeCb = ({ currentTarget, target }) => {
+                if (target === currentTarget) {
+                    if (("unmountComponentAtNode" in ReactDOM))
+                        ReactDOM.unmountComponentAtNode(bd);
+                    else
+                        console.error("This component doesn't work with the new versions of react yet...");
+                    bd.remove();
+                }
+            };
+            bd.style.opacity = "0";
+            const middlewayClick = () => {
+                bd.removeEventListener("transitionend", removeCb);
+                clone.removeEventListener("click", middlewayClick);
+                _zoom();
+            };
+            clone.addEventListener("click", middlewayClick);
+            bd.addEventListener("transitionend", removeCb);
+            bd.addEventListener("transitionstart", () => {
+                bd.addEventListener("transitioncancel", ownEvent(() => bd.removeEventListener("transitionend", removeCb)));
+            });
+        },
+    });
+    const zoomableEl = useRef(null);
+    function _unzoom() {
+        trigger();
+    }
+    function _zoom() {
+        const el = zoomableEl.current;
+        const elClone = el.cloneNode(true);
+        elClone.style.visibility = "hidden";
+        function HeroMount() {
+            const { heroRef } = useHero(zoomableID, {
+                "data-preffix": "zoomable",
+                repeatable: true,
+            }, {
+                onHeroStart: (clone, ...args) => {
+                    getBackdrop().style.opacity = "1";
+                    const unzoomCb = () => {
+                        _unzoom();
+                        clone.removeEventListener("click", unzoomCb);
+                    };
+                    clone.addEventListener("click", unzoomCb);
+                },
+                onHeroEnd: () => {
+                    heroRef.current.classList.remove(Styles.zoomableIndicator);
+                },
+            });
+            return (_jsx("div", { ref: (ref) => {
+                    if (ref) {
+                        ref.appendChild(elClone);
+                        heroRef.current = elClone;
+                        const verticalProportion = el.clientWidth / el.clientHeight;
+                        const targetWidth = ref.clientHeight * verticalProportion;
+                        if (targetWidth > ref.clientWidth) {
+                            const horizontalProportion = el.clientHeight / el.clientWidth;
+                            elClone.style.width = ref.clientWidth + "px";
+                            elClone.style.height =
+                                ref.clientWidth * horizontalProportion + "px";
+                        }
+                        else {
+                            elClone.style.height = ref.clientHeight + "px";
+                            elClone.style.width = targetWidth + "px";
+                        }
+                    }
+                } }));
+        }
+        const existingBackdrop = getBackdrop();
+        if (!existingBackdrop) {
+            const backdrop = document.createElement("div");
+            backdrop.classList.add(Styles.backdrop);
+            backdrop.addEventListener("click", _unzoom);
+            backdrop.setAttribute("data-zoomable", zoomableID);
+            document.body.appendChild(backdrop);
+            createRoot(backdrop).render(_jsx(HeroMount, {}));
+        }
+        else {
+            createRoot(existingBackdrop).render(_jsx(HeroMount, {}));
+        }
+    }
+    useEffect(() => {
+        const el = zoomableEl.current;
+        el.classList.add(Styles.zoomableIndicator);
+        el.addEventListener("click", _zoom);
+        return () => {
+            el.classList.remove(Styles.zoomableIndicator);
+            const bd = getBackdrop();
+            if (bd) {
+                bd.style.opacity = "0";
+                bd.addEventListener("transitionend", () => {
+                    bd.remove();
+                });
+            }
+        };
+    }, []);
+    const mergedRefs = useMergeRefsFunc(heroRef, zoomableEl);
+    return {
+        zoomableEl: mergedRefs,
+    };
+}
+//# sourceMappingURL=useZoomable.js.map

package/dist-ts/hooks/ui/useZoomable.js.map

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

package/dist-ts/hooks/ui/useZoomable.module.scss

@@ -0,0 +1,34 @@
+@import "../../assets/styles/variables.scss";
+
+.zoomableIndicator {
+  cursor: zoom-in;
+}
+
+$stubZIndex: 1000000;
+
+.backdrop {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: $stubZIndex;
+  background: var(--zoomable--backdrop-bg, #0009);
+  transition: opacity $fast linear;
+  opacity: 0;
+  > * {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > * {
+      cursor: zoom-out;
+    }
+  }
+}
+
+.backdrop + * {
+  z-index: $stubZIndex + 1;
+  max-width: initial;
+}

package/dist-ts/hooks/useAsyncControl.ai.md

@@ -0,0 +1,25 @@
+# Protecting an async function
+```tsx
+const control = useAsyncControl()
+
+control.process(() => anAsyncFunction());
+```
+
+# Using multiple async functions
+```tsx
+const control = useAsyncControl({
+    asyncFunctionOne,
+    asyncFunctionTwo,
+})
+
+control.asyncFunctionOne();
+control.asyncFunctionTwo();
+```
+
+# Storing data
+```tsx
+const [result, setResult] = useState()
+const control = useAsyncControl({anAsyncFunctionThatReturnsData})
+
+control.anAsyncFunctionThatReturnsData().then(setResult);
+```

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

@@ -0,0 +1,32 @@
+import { SetStateAction } from "react";
+import { Primitive } from "type-fest";
+type Arr<X> = [X, React.Dispatch<SetStateAction<X>>];
+export type FunctionMap = {
+    [f: string]: ((...args: any[]) => Promise<any>) | Object | Primitive;
+};
+export type Control<E extends any = any> = {
+    error?: E;
+    loading: boolean;
+};
+export declare function useRawAsynControl<E = any, F extends FunctionMap = {}>(functionsToWrap: F | undefined, [error, setError]: Arr<E | undefined>, [loading, setLoading]: Arr<boolean>): {
+    process: (asyncFn: (() => Promise<any>) | Promise<any>) => Promise<any>;
+    loading: boolean;
+    error: E | undefined;
+    setError: import("react").Dispatch<SetStateAction<E | undefined>>;
+    setLoading: import("react").Dispatch<SetStateAction<boolean>>;
+} & F;
+export declare function useAsyncControl<E = any, F extends {
+    [f: string]: ((...args: any[]) => Promise<any>) | Object | Primitive;
+} = {}>(functionsToWrap?: F): {
+    process: (asyncFn: Promise<any> | (() => Promise<any>)) => Promise<any>;
+    loading: boolean;
+    error: E | Error | undefined;
+    setError: import("react").Dispatch<SetStateAction<E | Error | undefined>>;
+    setLoading: import("react").Dispatch<SetStateAction<boolean>>;
+} & F;
+/**
+ * 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;