@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/hooks/ui/usePaginationControls.tsx

@@ -1,176 +0,0 @@
-import throttle from "lodash/throttle";
-import React, { RefObject, 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: RefObject<HTMLDivElement>,
-  {
-    snapToPage,
-    baseWidth,
-    snapToCutElement: _snapToCutElement,
-    ...props
-  }: {
-    snapToPage?: boolean;
-    baseWidth?: number;
-    /** This will scroll only until the partially visible element is at the border, instead of scrolling all the container */
-    snapToCutElement?: boolean;
-    "data-testid"?: [left: string, right: string];
-  } = {}
-) {
-  const [controlsState, setControls] = useState<
-    [leftControl: boolean, rightControl: boolean]
-  >([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: "l" | "r", 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: typeof controlsState) => (prev: typeof controlsState) => {
-        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: number | undefined;
-    let lastX: number | undefined;
-
-    const onTouchStart = ({ touches, ...e }: TouchEvent) => {
-      if (!isSameTarget(e)) return;
-      const { pageX } = touches.item(0)!;
-      startingX = pageX;
-    };
-    const onTouchMove = ({ touches, ...e }: TouchEvent) => {
-      if (!isSameTarget(e)) return;
-      const touch = touches.item(0);
-
-      lastX = touch!.pageX;
-    };
-    const onTouchEnd = (e: Event) => {
-      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: [
-      <Fade
-        key={"l"}
-        active={leftControl}
-        className={`${Styles.left} ${Styles.control} ${className}`}
-        data-testid={props["data-testid"]?.[0]}
-        onClick={move("l")}
-      >
-        {leftControl && <LeftControl />}
-      </Fade>,
-      <Fade
-        key={"r"}
-        active={rightControl}
-        className={`${Styles.right} ${Styles.control} ${className}`}
-        data-testid={props["data-testid"]?.[1]}
-        onClick={move("r")}
-      >
-        {rightControl && <RightControl />}
-      </Fade>,
-    ],
-    checkControlsRequirement,
-  };
-}

package/src/hooks/ui/useSnapToViewport.module.scss

@@ -1,6 +0,0 @@
-.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/src/hooks/ui/useSnapToViewport.ts

@@ -1,28 +0,0 @@
-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: number) {
-  const elRef = useRef<HTMLDivElement>(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;
-}

package/src/hooks/ui/useTilt.tsx

@@ -1,219 +0,0 @@
-import throttle from "lodash/throttle";
-import { RefObject, useEffect, useRef, useState } from "react";
-import {
-  flattenMatrix,
-  generateMatrixFromOperations,
-  IDENTITY_MATRIX,
-  invertMatrix,
-} from "../../components/Parallax/math/helpers";
-
-const MAX_TILT = {
-  x: 100,
-  y: 100,
-};
-
-type Options = {
-  round?: boolean;
-  gyroEnabled?: boolean;
-};
-
-export function useTiltUpdates(
-  active: boolean,
-  relativeToEl: RefObject<HTMLDivElement | null>,
-  onTilt: (p: { x: number; y: number }) => void,
-  onInverseMatrix?: (updateFunc: (matrix: number[]) => number[]) => void,
-  sensorScale: number = 1,
-  tiltLimit: { x: number; y: number } = MAX_TILT,
-  options?: Options
-) {
-  useEffect(() => {
-    if (active) {
-      const updatePositions = (relativeToX: number, relativeToY: number) => {
-        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 }: MouseEvent) => {
-        updatePositions(x, y);
-      }, 1000 / 30);
-      const touchHandler = throttle(({ touches }: TouchEvent) => {
-        const { pageX, pageY } = touches[0];
-        updatePositions(pageX, pageY);
-      }, 1000 / 30);
-      window.addEventListener("mousemove", handler);
-      window.addEventListener("touchmove", touchHandler);
-      let _inverseMatrix: number[] | undefined;
-      const _limits: {
-        [k in "beta" | "gamma"]?: [number, number];
-      } = {
-        beta: undefined,
-        gamma: undefined,
-      };
-      const orientationListener: (e: DeviceOrientationEvent) => void = ({
-        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: 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 = 1,
-  maxTilt: { x: number; y: number } = MAX_TILT,
-  options?: Options
-) {
-  const [tilt, setTilt] = useState<{ x: number; y: number }>({
-    x: 0,
-    y: 0,
-  });
-  const [tiltResetMatrix, setTiltResetMatrix] = useState<number[]>(() =>
-    flattenMatrix(IDENTITY_MATRIX())
-  );
-  const relativeTo = useRef<HTMLDivElement>(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: number,
-  elementInitialPosition: number,
-  elementSizeDimension: number,
-  shouldRound: boolean
-) {
-  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: number,
-  maxRotation: number
-) {
-  return relativePosition * maxRotation - maxRotation / 2;
-}

package/src/hooks/ui/useZoomable.module.scss

@@ -1,34 +0,0 @@
-@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/src/hooks/ui/useZoomable.tsx

@@ -1,144 +0,0 @@
-import React, { 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: string) {
-  const zoomableID = useMemo(() => `zoomable-${id}`, []);
-  const getBackdrop = () => {
-    return document.querySelector(
-      `[data-zoomable="${zoomableID}"]`
-    )! as HTMLDivElement;
-  };
-  const { heroRef, trigger } = useHero(
-    zoomableID,
-    {
-      "data-preffix": "zoomable",
-      repeatable: true,
-    },
-    {
-      onHeroStart: (clone, ...args) => {
-        const bd = getBackdrop();
-        const removeCb = ({ currentTarget, target }: TransitionEvent) => {
-          if (target === currentTarget) {
-            if (("unmountComponentAtNode" in ReactDOM) as any)
-              (ReactDOM as any).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<HTMLDivElement>(null);
-  function _unzoom() {
-    trigger();
-  }
-
-  function _zoom() {
-    const el = zoomableEl.current!;
-    const elClone = el.cloneNode(true) as HTMLDivElement;
-    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 (
-        <div
-          ref={(ref) => {
-            if (ref) {
-              ref.appendChild(elClone);
-              (heroRef as any).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(<HeroMount />);
-    } else {
-      createRoot(existingBackdrop).render(<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,
-  };
-}

package/src/hooks/useAsyncControl.ai.md

@@ -1,25 +0,0 @@
-# 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);
-```