@onepercentio/one-ui 0.28.8 → 0.28.9

package/src/hooks/ui/usePaginationControls.tsx

@@ -0,0 +1,176 @@
+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

@@ -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/src/hooks/ui/useSnapToViewport.ts

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,219 @@
+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

@@ -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/src/hooks/ui/useZoomable.tsx

@@ -0,0 +1,144 @@
+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

@@ -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);
+```