@onepercentio/one-ui 0.28.8 → 0.28.9

package/src/hooks/useHero.ts

@@ -0,0 +1,512 @@
+import React, {
+  CSSProperties,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import ownEvent from "../utils/ownEvent";
+import Styles from "./useHero.module.scss";
+
+const ID = (id: string) => `${id}-hero`;
+type ShouldSkip = boolean;
+type Result = [
+  originContainer: Element | VisualViewport,
+  targetContainer: Element | VisualViewport
+];
+const viewport = window.visualViewport!;
+const DATA_TAG_HERO_COMPONENT = "data-hero-component";
+
+function triggerDynamicComponents(
+  clone: HTMLDivElement,
+  componentsFromOriginThatWillAppear: HTMLDivElement[],
+  origin: HTMLDivElement
+) {
+  const idsThatWillAppear = componentsFromOriginThatWillAppear.map((a) =>
+    a.getAttribute(DATA_TAG_HERO_COMPONENT)
+  );
+  const preexistingComponents = Array.from(
+    clone.querySelectorAll(`[${DATA_TAG_HERO_COMPONENT}]`)
+  ) as HTMLDivElement[];
+  const removedElements: HTMLDivElement[] = preexistingComponents.filter(
+    (el) =>
+      !idsThatWillAppear.includes(el.getAttribute(DATA_TAG_HERO_COMPONENT))
+  );
+
+  for (let elementThatIsBeingRemoved of removedElements) {
+    for (let heightKey of ["height", "minHeight", "maxHeight"] as const)
+      elementThatIsBeingRemoved.style[
+        heightKey
+      ] = `${elementThatIsBeingRemoved.clientHeight}px`;
+  }
+  setTimeout(() => {
+    for (let elementThatIsBeingRemoved of removedElements) {
+      for (let heightKey of ["height", "minHeight", "maxHeight"] as const)
+        elementThatIsBeingRemoved.style[heightKey] = `0px`;
+      elementThatIsBeingRemoved.style.opacity = `0`;
+    }
+  }, 0);
+
+  for (let componentThatWillAppear of componentsFromOriginThatWillAppear) {
+    const alreadyInjectedElement = !!clone.querySelector(
+      `[${DATA_TAG_HERO_COMPONENT}="${componentThatWillAppear.getAttribute(
+        DATA_TAG_HERO_COMPONENT
+      )}"]`
+    );
+    if (!alreadyInjectedElement) {
+      function recursiveBuildPath(
+        fromElement: HTMLElement,
+        pathSuffix: string = ""
+      ): string | undefined {
+        if (fromElement === origin) return pathSuffix;
+        const parent = fromElement.parentElement!;
+        const parentChilds = Array.from(parent.children);
+        const elChildSelector = `:nth-child(${
+          parentChilds.indexOf(fromElement) + 1
+        })`;
+
+        if (fromElement !== origin)
+          return recursiveBuildPath(
+            parent,
+            `${elChildSelector}${pathSuffix ? `>${pathSuffix}` : ""}`
+          );
+        else return pathSuffix;
+      }
+      const whatIsTheElementPathFromCloneElement = recursiveBuildPath(
+        componentThatWillAppear.parentElement!
+      );
+      const insertAtIndex = Array.from(
+        componentThatWillAppear.parentElement!.children
+      ).indexOf(componentThatWillAppear);
+
+      const targetElementClone = componentThatWillAppear.cloneNode(
+        true
+      ) as HTMLDivElement;
+      for (let heightKey of ["height", "minHeight", "maxHeight"] as const)
+        targetElementClone.style[heightKey] = "0px";
+      const shouldBeInsertedAtElement = whatIsTheElementPathFromCloneElement
+        ? clone.querySelector(whatIsTheElementPathFromCloneElement)!
+        : clone;
+      const remainingIndexes = Array.from(shouldBeInsertedAtElement.children)
+        .map((el, i) =>
+          removedElements.includes(el as HTMLDivElement) ? undefined : i
+        )
+        .filter((e) => e !== undefined) as number[];
+
+      if (insertAtIndex === remainingIndexes.length)
+        shouldBeInsertedAtElement.append(targetElementClone);
+      else
+        shouldBeInsertedAtElement.insertBefore(
+          targetElementClone,
+          shouldBeInsertedAtElement.childNodes.item(
+            remainingIndexes[insertAtIndex]
+          )
+        );
+      setTimeout(() => {
+        for (let heightKey of ["height", "minHeight", "maxHeight"] as const)
+          targetElementClone.style[
+            heightKey
+          ] = `${componentThatWillAppear.clientHeight}px`;
+      }, 0);
+    }
+  }
+}
+
+const ALWAYS_TRANSITION = ["top", "left"];
+
+/**
+ * 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;
+  }> = {
+    propsToTransition: [],
+  },
+  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>;
+  } = {}
+) {
+  const {
+    propsToTransition: _p = [],
+    "data-preffix": dataPreffix,
+    repeatable,
+  } = options;
+  const propsToTransition = useMemo(
+    () =>
+      _p.map((p) => p.replace(/([A-Z])/g, (_, val) => `-${val.toLowerCase()}`)),
+    [_p]
+  );
+  const _dataPreffix = dataPreffix ? `-${dataPreffix}` : "";
+  const dataProperty = `data${_dataPreffix}-hero`;
+  const heroRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    heroRef.current!.setAttribute(dataProperty, id);
+  }, [id]);
+
+  const getHerosOnScreen = useCallback(() => {
+    const otherElements = (
+      Array.from(
+        document.querySelectorAll(`[${dataProperty}="${id}"]`)
+      ) as HTMLDivElement[]
+    ).filter((el) => el !== heroRef.current);
+    return otherElements;
+  }, [id]);
+
+  function triggerHeroAnimation() {
+    const allPropsToTransition = options.overridePropsToTransition
+      ? [...ALWAYS_TRANSITION, ...propsToTransition]
+      : ["width", "height", ...ALWAYS_TRANSITION, ...propsToTransition];
+    const shouldHeroFn = events.onHeroDetect || ((...a: any[]) => true);
+    const otherElements = getHerosOnScreen().filter((el) =>
+      shouldHeroFn(el, heroRef.current!)
+    );
+    const currentElement = heroRef.current!;
+    const currentElCoordinates = currentElement.getBoundingClientRect();
+
+    if (process.env.NODE_ENV === "development" && otherElements.length > 2)
+      console.warn(
+        "There are too many elements to transition to, I will transition to the first I find",
+        otherElements
+      );
+    const otherElement = otherElements.find(
+      (el) => el !== heroRef.current!
+    ) as HTMLDivElement;
+
+    if (otherElement) {
+      const [originContainer, targetContainer] = events.onBeforeTransition
+        ? events.onBeforeTransition(otherElement, heroRef.current!)
+        : [viewport, viewport];
+      const shouldSkip =
+        isElementOutsideContainer(targetContainer, currentElCoordinates) ||
+        isElementOutsideContainer(
+          originContainer,
+          otherElement.getBoundingClientRect()
+        )
+          ? (events.onHeroSkip || (() => true))(otherElement, heroRef.current!)
+          : false;
+      if (shouldSkip) {
+        events.onHeroSkipped?.();
+        return;
+      }
+      const oldClone = document.querySelector(
+        `[${dataProperty}-clone="${ID(id)}"]`
+      );
+      const clone = (oldClone ||
+        otherElement.cloneNode(true)) as HTMLDivElement;
+
+      if (events.onHeroCloned && !oldClone) events.onHeroCloned(clone);
+
+      // Clean up thos properties that can cause confusion since it's a clone
+      clone.style.visibility = "";
+      clone.removeAttribute(dataProperty);
+
+      clone.setAttribute(`${dataProperty}-clone`, ID(id));
+
+      /**
+       * If it's repeatable, we should keep the flag that indicates the hero existance
+       */
+      if (!repeatable)
+        // Since a transition is now triggering from the old element, he cannot be considered for other transitions
+        otherElement.removeAttribute(dataProperty);
+
+      function willTheHeroMove(origin: DOMRect, target: DOMRect) {
+        return !(
+          origin.top === target.top &&
+          origin.left === target.left &&
+          origin.width === target.width &&
+          origin.height === target.height
+        );
+      }
+
+      /**
+       *
+       * @param el
+       * @returns Returns if it will move
+       */
+      function setCloneToCoordinatesOf(el: HTMLDivElement) {
+        const coordinates = el.getBoundingClientRect();
+        const currentCoordinates = clone.getBoundingClientRect();
+        const willMove = willTheHeroMove(coordinates, currentCoordinates);
+
+        clone.style.position = "fixed";
+        clone.style.top = `${coordinates.top}px`;
+        clone.style.left = `${coordinates.left}px`;
+        if (allPropsToTransition.includes("width"))
+          clone.style.width = `${coordinates.width}px`;
+        if (allPropsToTransition.includes("height"))
+          clone.style.height = `${coordinates.height}px`;
+
+        return willMove;
+      }
+
+      const coordinates = otherElement.getBoundingClientRect();
+      const currentCoordinates = heroRef.current!.getBoundingClientRect();
+      const itWontMove = !willTheHeroMove(coordinates, currentCoordinates);
+      if (itWontMove) return;
+
+      if (!oldClone) {
+        /** Set the clone over the starting element */
+        setCloneToCoordinatesOf(otherElement);
+        document.body.appendChild(clone);
+      }
+      heroRef.current!.style.visibility = "hidden";
+      otherElement.style.visibility = "hidden";
+
+      for (let propToTransition of propsToTransition) {
+        clone.style[propToTransition as any] =
+          window.getComputedStyle(otherElement)[propToTransition as any];
+      }
+
+      clone.style.transition = `${allPropsToTransition
+        .map(
+          (prop) =>
+            `${prop.replace(
+              /[A-Z]/g,
+              (sub) => `-${sub.toLowerCase()}`
+            )} var(--animation--speed-fast, 250ms) ease-out`
+        )
+        .join(", ")}`;
+
+      setTimeout(() => {
+        const elItWillTransitionTo = heroRef.current;
+        const cleanup = () => {
+          if (events.onHeroEnd) events.onHeroEnd();
+          if (elItWillTransitionTo) {
+            if (repeatable)
+              elItWillTransitionTo!.setAttribute(dataProperty, id);
+            elItWillTransitionTo.style.visibility = "";
+          }
+          setTimeout(() => {
+            clone.remove();
+          }, 0);
+        };
+        triggerDynamicComponents(
+          clone,
+          Array.from(
+            heroRef.current!.querySelectorAll(`[${DATA_TAG_HERO_COMPONENT}]`)
+          ) as HTMLDivElement[],
+          currentElement
+        );
+        if (events.onHeroStart) {
+          events.onHeroStart(clone, otherElement, heroRef.current!);
+        }
+        if (!elItWillTransitionTo) {
+          cleanup();
+          return;
+        }
+        /** Set the clone over the new position */
+        const willMove = setCloneToCoordinatesOf(elItWillTransitionTo);
+        if (!willMove) cleanup();
+        else {
+          for (let propToTransition of propsToTransition)
+            clone.style[propToTransition as any] =
+              window.getComputedStyle(elItWillTransitionTo)[
+                propToTransition as any
+              ];
+          let initialOffset: number;
+          const s = ({ target }: MouseEvent) => {
+            const d = target as HTMLDivElement;
+            if (d.contains(elItWillTransitionTo)) {
+              if (initialOffset === undefined) initialOffset = d.scrollTop;
+              else
+                clone.style.marginTop = `${-(d.scrollTop - initialOffset)}px`;
+            }
+          };
+          const transitionEndCb = ownEvent(
+            ({ target, currentTarget }: TransitionEvent) => {
+              if (target === currentTarget) cleanup();
+              document.removeEventListener("scroll", s as any, true);
+            }
+          );
+          document.addEventListener("scroll", s as any, true);
+          clone.addEventListener("transitionend", transitionEndCb);
+          clone.addEventListener("transitionstart", () => {
+            const onCancelCb = ownEvent((e) => {
+              clone.removeEventListener("transitionend", transitionEndCb);
+              clone.removeEventListener("transitioncancel", onCancelCb);
+            });
+            clone.addEventListener("transitioncancel", onCancelCb);
+          });
+        }
+      }, 0);
+    }
+  }
+
+  useEffect(() => {
+    triggerHeroAnimation();
+  }, []);
+
+  return {
+    heroRef,
+    getHerosOnScreen,
+    trigger: triggerHeroAnimation,
+    heroComponentRef:
+      (componentId: string) => (elRef: HTMLDivElement | null) => {
+        if (elRef) {
+          elRef.setAttribute(DATA_TAG_HERO_COMPONENT, componentId);
+          elRef.classList.add(Styles.component);
+        }
+      },
+  };
+}
+
+function isElementOutsideViewport(coordinates: DOMRect) {
+  const elementOverflowsViewport =
+    coordinates.left >= viewport.width || coordinates.top >= viewport.height;
+  const elementUnderflowsViewport =
+    coordinates.left <= -coordinates.width ||
+    coordinates.top <= -coordinates.height;
+  return elementOverflowsViewport || elementUnderflowsViewport;
+}
+
+function isElementOutsideContainer(
+  container: VisualViewport | Element,
+  coordinates: DOMRect
+) {
+  if (container instanceof VisualViewport) {
+    return isElementOutsideViewport(coordinates);
+  } else {
+    const containerBounds = container.getBoundingClientRect();
+
+    const isContainerOutsideViewport =
+      isElementOutsideViewport(containerBounds);
+
+    if (isContainerOutsideViewport) return true;
+
+    const elementOverflowsViewport =
+      coordinates.left >= containerBounds.left + containerBounds.width ||
+      coordinates.top >= containerBounds.top + containerBounds.height;
+
+    const elementUnderflowsViewport =
+      containerBounds.left - coordinates.left >= coordinates.width ||
+      containerBounds.top - coordinates.top >= coordinates.height;
+
+    return elementUnderflowsViewport || elementOverflowsViewport;
+  }
+}
+
+type EVENTS_INTERFACE = Parameters<typeof useHero>[2];
+type TRANSITION_TYPES = "ACCELERATION";
+function centerPoint(rect: DOMRect) {
+  return [rect.left + rect.width / 2, rect.top + rect.height / 2] as const;
+}
+const angle = (
+  pointA: readonly [x: number, y: number],
+  pointB: readonly [x: number, y: number]
+) =>
+  Number(
+    (
+      Math.atan2(pointA[1] - pointB[1], pointA[0] - pointB[0]) *
+      (179.08 / Math.PI)
+    ).toFixed(5)
+  );
+export const TRANSITION_FACTORY: {
+  [n in TRANSITION_TYPES]: (events?: EVENTS_INTERFACE) => EVENTS_INTERFACE;
+} = {
+  ACCELERATION: (events) => ({
+    ...events,
+    onHeroStart(clone, origin, target) {
+      if (events?.onHeroStart) events.onHeroStart(clone, origin, target);
+      clone.classList.add(Styles.acceleration);
+      const centerPointOrigin = centerPoint(origin.getBoundingClientRect());
+      const centerPointDestination = centerPoint(
+        target.getBoundingClientRect()
+      );
+      const angleBetweenElements = angle(
+        centerPointOrigin,
+        centerPointDestination
+      );
+      const vectorX = Math.sin(angleBetweenElements);
+      const vectorY = Math.cos(angleBetweenElements);
+
+      const rotateY = (10 * vectorY).toFixed(0);
+      const originX = (vectorY + 1) * 50;
+
+      const rotateX = -(10 * vectorX).toFixed(0);
+      const originY = (vectorX + 1) * 50;
+
+      clone.style.setProperty(
+        "--stage-1",
+        `rotateY(${rotateY}deg) rotateX(${-rotateX}deg)`
+      );
+      clone.style.setProperty(
+        "--stage-2",
+        `rotateY(${-rotateY * 0.3}deg) rotateX(${rotateX * 0.3}deg)`
+      );
+      clone.style.setProperty("--origin-1", `${originX}% ${originY}%`);
+      clone.style.setProperty(
+        "--origin-2",
+        `${100 - originX}% ${100 - originY}%`
+      );
+      document.body.style.perspective = "100vw";
+    },
+    onHeroEnd() {
+      if (events?.onHeroEnd) events.onHeroEnd();
+      document.body.style.perspective = "";
+    },
+  }),
+};

package/src/hooks/useIntersection.ts

@@ -0,0 +1,32 @@
+import { useMemo, useRef } from "react";
+
+export default function useIntersection() {
+  const { current: targetMap } = useRef<[HTMLOrSVGElement, () => void][]>([]);
+  const { current: observer } = useRef(
+    ("IntersectionObserver" in window) ? new IntersectionObserver((els) => {
+      els.forEach((e, i) => {
+        const result = targetMap.find((el) => el[0] === e.target as any);
+        if (result && e.isIntersecting) {
+          result[1]();
+        }
+      });
+    }) : null
+  );
+  return useMemo(() => {
+    return {
+      observe: (e: HTMLOrSVGElement, cb: () => void) => {
+        targetMap.push([e, cb]);
+        if (observer)
+        observer.observe(e as any);
+      },
+      unobserve: (e: HTMLOrSVGElement) => {
+        if (observer)
+        observer.unobserve(e as any);
+        targetMap.splice(
+          targetMap.findIndex((el) => el[0] === e),
+          1
+        );
+      },
+    };
+  }, []);
+}

package/src/hooks/useMergeRefs.ts

@@ -0,0 +1,29 @@
+import { RefObject, useLayoutEffect, useRef } from "react";
+
+/**
+ * This function exists so we can work with multiple refs as a single one
+ */
+export default function useMergeRefs<T extends ReturnType<typeof useRef>>(
+  mainRef: T,
+  ...otherRefs: T[]
+) {
+  useLayoutEffect(() => {
+    for (let ref of otherRefs) ref.current = mainRef.current;
+  }, []);
+  return mainRef;
+}
+
+/**
+ * This function exists so we can work with multiple refs as a single one, almost immediatly
+ */
+export function useMergeRefsFunc<
+  T extends ReturnType<typeof useRef> | ((ref: any) => void)
+>(mainRef: T, ...otherRefs: T[]) {
+  return (providedRef: any) => {
+    if (providedRef)
+      for (let ref of [mainRef, ...otherRefs]) {
+        if (typeof ref === "function") ref(providedRef);
+        else ref.current = providedRef;
+      }
+  };
+}

package/src/hooks/useObserve.ts

@@ -0,0 +1,24 @@
+import { useEffect, useLayoutEffect, useState } from "react";
+import "./shims/ObjectWatchShim.js";
+
+interface Object {
+  watch<T extends Object>(prop: (keyof T)[], handler: () => void): () => void;
+  unwatch(): void;
+}
+
+export default function useObserve<T extends any>(
+  toObserve: T | T[],
+  keysToObserve: (keyof T)[]
+) {
+  const [_, ss] = useState(0);
+  useLayoutEffect(() => {
+    const arr = Array.isArray(toObserve) ? toObserve : [toObserve]
+    const unwatchers = arr.map(object => (object as Object).watch(keysToObserve as any, () => {
+      ss((p) => {
+        return p + 1
+      });
+    }))
+
+    return () => unwatchers.forEach(unwatch => unwatch())
+  }, [toObserve]);
+}