@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/AnchoredTooltip/AnchoredTooltip.tsx

@@ -1,250 +0,0 @@
-import React, {
-  ForwardedRef,
-  forwardRef,
-  JSX,
-  ReactNode,
-  RefObject,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import ReactDOM from "react-dom";
-import { useOneUIConfig } from "../../context/OneUIProvider";
-import FadeIn from "../FadeIn";
-import Styles from "./AnchoredTooltip.module.scss";
-
-type Props = {
-  children: JSX.Element;
-  anchorRef: RefObject<HTMLElement | null>;
-  open: boolean;
-  className?: string;
-  /**
-   * Indicates the tooltip should be always visible on viewport
-   *
-   * @default true
-   */
-  containInViewport?: boolean;
-
-  style?: any;
-  alignment?: AnchoredTooltipAlignment;
-};
-
-function getPositionOnViewport(element: HTMLElement) {
-  return element.getBoundingClientRect();
-}
-
-export enum AnchoredTooltipAlignment {
-  LEFT,
-  CENTER,
-  RIGHT,
-}
-
-export enum AnchoredTooltipAnchor {
-  TOP,
-  BOTTOM,
-}
-
-function calculateTooltipFromAnchor(
-  anchorRef: HTMLElement,
-  tooltipRef: HTMLDivElement,
-  containInViewport: boolean,
-  alignTo: AnchoredTooltipAlignment = AnchoredTooltipAlignment.CENTER,
-  anchorTo: AnchoredTooltipAnchor = AnchoredTooltipAnchor.TOP
-) {
-  const anchorPosition = getPositionOnViewport(anchorRef);
-
-  const shouldAnchorToBottom =
-    anchorTo === AnchoredTooltipAnchor.BOTTOM ||
-    tooltipRef.clientHeight > anchorPosition.top;
-
-  let top = anchorPosition.top - tooltipRef.clientHeight;
-
-  /**
-   * The terms mean:
-   * anchorPosition.left    = The left to get to the left border of the anchor (visible element)
-   * anchorPosition.width   = The width of the anchor (visible element)
-   * tooltipRef.clientWidth = The width of the content
-   */
-  let left = (() => {
-    switch (alignTo) {
-      case AnchoredTooltipAlignment.CENTER:
-        return (
-          anchorPosition.left +
-          anchorPosition.width / 2 -
-          tooltipRef.clientWidth / 2
-        );
-      case AnchoredTooltipAlignment.LEFT:
-        return anchorPosition.left;
-      case AnchoredTooltipAlignment.RIGHT:
-        return (
-          anchorPosition.left + anchorPosition.width - tooltipRef.clientWidth
-        );
-    }
-  })();
-
-  if (shouldAnchorToBottom)
-    top += tooltipRef.clientHeight + anchorRef.clientHeight;
-
-  if (containInViewport && top < 0) top = 0;
-  const offset = top + tooltipRef.clientHeight - window.innerHeight;
-  if (containInViewport && offset > 0) {
-    top -= offset;
-  }
-  const offsetLeft = left + tooltipRef.clientWidth - window.innerWidth;
-  if (containInViewport && offsetLeft > 0) {
-    left -= offsetLeft;
-  }
-  if (containInViewport && left < 0) {
-    left = 0;
-  }
-
-  const maxLeftOffsetIndicator = tooltipRef.clientWidth / 2 - 60;
-  const tooltipCenter = tooltipRef.clientWidth / 2 + left;
-  const anchorPositionCenter = anchorPosition.left + anchorPosition.width / 2;
-
-  const offsetTooltip = anchorPositionCenter - tooltipCenter;
-  const minOffsetTooltip = -(tooltipRef.clientWidth / 2) + 60;
-
-  const offsetIndicatorLeft =
-    offsetLeft > 0
-      ? offsetLeft > maxLeftOffsetIndicator
-        ? maxLeftOffsetIndicator
-        : offsetLeft
-      : offsetTooltip < 0
-      ? offsetTooltip < minOffsetTooltip
-        ? minOffsetTooltip
-        : offsetTooltip
-      : 0;
-
-  return {
-    offset,
-    offsetIndicatorLeft,
-    top,
-    left,
-    shouldAnchorToBottom,
-  };
-}
-
-export function updateTooltipPosition(
-  tooltipRef: HTMLDivElement,
-  anchorRef: HTMLElement,
-  limitToViewport: boolean = true,
-  alignment: AnchoredTooltipAlignment = AnchoredTooltipAlignment.CENTER,
-  anchorTo: AnchoredTooltipAnchor = AnchoredTooltipAnchor.TOP
-) {
-  const { top, left, shouldAnchorToBottom, offsetIndicatorLeft } =
-    calculateTooltipFromAnchor(
-      anchorRef,
-      tooltipRef,
-      limitToViewport,
-      alignment,
-      anchorTo
-    );
-  if (limitToViewport) {
-    const maxHeight = window.innerHeight - top;
-    tooltipRef.style.maxHeight = `${maxHeight - 32}px`;
-  }
-  tooltipRef.style.top = `${top}px`;
-  tooltipRef.style.left = `${left}px`;
-  tooltipRef.style.setProperty(
-    "--anchor-indicator-offset-left",
-    `${offsetIndicatorLeft}px`
-  );
-  if (shouldAnchorToBottom) {
-    tooltipRef.classList.remove(Styles.anchoredTop);
-    tooltipRef.classList.add(Styles.anchoredBottom);
-  } else {
-    tooltipRef.classList.add(Styles.anchoredTop);
-    tooltipRef.classList.remove(Styles.anchoredBottom);
-  }
-
-  return { shouldAnchorToBottom };
-}
-function _AnchoredTooltip(
-  { containInViewport = true, alignment, ...props }: Props,
-  ref: ForwardedRef<{ updatePosition: () => void } | null>
-) {
-  const { open, children, anchorRef } = props;
-  const tooltipRef = useRef<HTMLDivElement>(null);
-  const className = useOneUIConfig("component.tooltip.className");
-  const [realClosed, setRealClosed] = useState(!open);
-
-  useEffect(() => {
-    if (open) setRealClosed(false);
-  }, [open]);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      updatePosition: () => {
-        updateTooltipPosition(
-          tooltipRef.current!,
-          anchorRef.current!,
-          containInViewport,
-          alignment
-        );
-      },
-    }),
-    [containInViewport]
-  );
-
-  useEffect(() => {
-    if (open && !realClosed) {
-      if (anchorRef.current && tooltipRef.current)
-        updateTooltipPosition(
-          tooltipRef.current,
-          anchorRef.current,
-          containInViewport,
-          alignment
-        );
-      const scrollHandler = () => {
-        if (anchorRef.current && tooltipRef.current)
-          updateTooltipPosition(
-            tooltipRef.current,
-            anchorRef.current,
-            containInViewport,
-            alignment
-          );
-      };
-      window.addEventListener("scroll", scrollHandler, {
-        passive: true,
-      });
-      return () => {
-        window.removeEventListener("scroll", scrollHandler);
-      };
-    }
-  }, [open, anchorRef, realClosed]);
-
-  useLayoutEffect(() => {
-    if (!tooltipRef.current) return;
-    if (open) tooltipRef.current!.classList.add(Styles.open);
-    else tooltipRef.current!.classList.remove(Styles.open);
-  }, [open]);
-
-  return !realClosed || open ? (
-    <>
-      {ReactDOM.createPortal(
-        <FadeIn
-          onClick={(e) => e.stopPropagation()}
-          ref={tooltipRef}
-          className={`${Styles.tooltipContainer} ${
-            props.className || ""
-          } ${className}`}
-          style={props.style}
-          onHidden={() => setRealClosed(true)}
-        >
-          {open && !realClosed ? <div>{children}</div> : undefined}
-        </FadeIn>,
-        document.body
-      )}
-    </>
-  ) : null;
-}
-
-/**
- * This tooltip anchors itself to an element and handles positioning relative to the anchored element
- **/
-const AnchoredTooltip = forwardRef(_AnchoredTooltip);
-export default AnchoredTooltip;

package/src/components/AnchoredTooltip/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./AnchoredTooltip";
-export * from "./AnchoredTooltip";

package/src/components/AnimatedEntrance/AnimatedEntrance.module.scss

@@ -1,108 +0,0 @@
-@use 'sass:math';
-@keyframes expand {
-  0% {
-    transform: translateX(100%);
-  }
-
-  35% {
-    transform: translateX(100%);
-  }
-
-  85% {
-    transform: translateX(-5%);
-  }
-
-  100% {
-    transform: translateX(0%);
-  }
-}
-
-@keyframes exiting {
-  100% {
-    transform: translateX(100%);
-  }
-
-  65% {
-    transform: translateX(100%);
-  }
-
-  50% {
-    opacity: 0;
-  }
-
-  15% {
-    transform: translateX(-5%);
-    opacity: 1;
-  }
-
-  0% {
-    transform: translateX(0%);
-  }
-}
-$duration: 1s;
-
-.elementExiting {
-  animation-duration: $duration !important;
-  animation-name: exiting;
-  position: absolute;
-}
-
-.elementEntering {
-  animation-duration: $duration !important;
-  animation-name: expand;
-}
-.elementExitingReverse {
-  animation-duration: $duration !important;
-  animation-name: exiting;
-}
-
-.elementEnteringReverse {
-  animation-duration: $duration !important;
-  animation-name: expand;
-  position: absolute;
-}
-
-.resetHeight {
-  transition: max-height math.div($duration, 2) $duration * 0.2;
-  min-height: initial;
-  align-items: flex-start !important;
-  flex-shrink: 0;
-  > * {
-    justify-content: flex-start !important;
-  }
-}
-
-.maxHeight {
-  max-height: 0px;
-}
-
-@keyframes nothing {
-  100% {
-    transform: translateX(0%);
-  }
-
-  0% {
-    transform: translateX(0%);
-  }
-}
-
-.elementShrinking {
-  animation-duration: $duration !important;
-  animation-name: nothing;
-  position: absolute;
-}
-
-.elementExpanding {
-  animation-duration: $duration !important;
-  animation-name: nothing;
-}
-.elementShrinkingReverse {
-  animation-duration: $duration !important;
-  animation-name: nothing;
-}
-
-.elementExpandingReverse {
-  animation-duration: $duration !important;
-  animation-name: nothing;
-  position: absolute;
-}

package/src/components/AnimatedEntrance/AnimatedEntrance.tsx

@@ -1,227 +0,0 @@
-import React, {
-  ElementRef,
-  Fragment,
-  Key,
-  ReactElement,
-  TransitionEvent,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { TransitionAnimationTypes } from "../Transition";
-import UncontrolledTransition from "../UncontrolledTransition";
-import Styles from "./AnimatedEntrance.module.scss";
-
-export enum EntranceType {
-  SLIDE_AND_EXPAND,
-  EXPAND,
-}
-
-const CONFIGS_BY_ENTRANCE_TYPE = {
-  [EntranceType.SLIDE_AND_EXPAND]: {
-    forward: {
-      elementEntering: Styles.elementEntering,
-      elementExiting: Styles.elementExiting,
-    },
-    backward: {
-      elementEntering: Styles.elementEnteringReverse,
-      elementExiting: Styles.elementExitingReverse,
-    },
-  },
-  [EntranceType.EXPAND]: {
-    forward: {
-      elementEntering: Styles.elementExpanding,
-      elementExiting: Styles.elementShrinking,
-    },
-    backward: {
-      elementEntering: Styles.elementExpandingReverse,
-      elementExiting: Styles.elementShrinkingReverse,
-    },
-  },
-};
-
-export function AnimatedEntranceItem({
-  children,
-  noEntranceAnimation,
-  onRemoveChildren,
-  entranceType,
-}: {
-  children: ReactElement;
-  noEntranceAnimation: boolean;
-  onRemoveChildren: (key: Key) => void;
-  entranceType: EntranceType;
-}) {
-  const uncontRef = useRef<ElementRef<typeof UncontrolledTransition>>(null);
-  const [screen, setScreen] = useState<ReactElement | string | null>(
-    noEntranceAnimation ? children : <Fragment key={"null"} />
-  );
-  console.log(screen, children.key)
-  useLayoutEffect(() => {
-    if (String(children.key).includes("-nullated") && uncontRef.current) {
-      uncontRef.current!.setOrientation("backward");
-    }
-  }, [children.key]);
-
-  useEffect(() => {
-    setScreen(String(children.key));
-  }, [children.key]);
-
-  useEffect(() => {
-    if (screen === null) return;
-    const x = setTimeout(() => {
-      const key = String(typeof screen === "string" ? screen : screen.key!);
-      if (key === "null" || key.includes("-nullated")) {
-        uncontRef.current!.sectionRef.current!.style.maxHeight = `${uncontRef.current!.sectionRef.current!.scrollHeight
-          }px`;
-        setTimeout(() => {
-          uncontRef.current!.sectionRef.current!.style.maxHeight = `0px`;
-        }, 100);
-      } else {
-        uncontRef.current!.sectionRef.current!.style.maxHeight = `${uncontRef.current!.sectionRef.current!.scrollHeight
-          }px`;
-        if (!noEntranceAnimation) {
-          const restoreAutoHeight = ({
-            target,
-            currentTarget,
-          }: TransitionEvent<HTMLDivElement>) => {
-            if (target !== currentTarget) return;
-            uncontRef.current!.sectionRef.current!.style.removeProperty(
-              "max-height"
-            );
-            uncontRef.current!.sectionRef.current!.classList.remove(
-              Styles.maxHeight
-            );
-            uncontRef.current!.sectionRef.current!.removeEventListener(
-              "transitionend",
-              restoreAutoHeight as any
-            );
-          };
-          uncontRef.current!.sectionRef.current!.addEventListener(
-            "transitionend",
-            restoreAutoHeight as any
-          );
-        } else {
-          uncontRef.current!.sectionRef.current!.style.removeProperty(
-            "max-height"
-          );
-          uncontRef.current!.sectionRef.current!.classList.remove(
-            Styles.maxHeight
-          );
-        }
-      }
-    }, 100);
-    return () => {
-      clearTimeout(x);
-    };
-  }, [typeof screen === "object" ? screen?.key : screen]);
-
-  const firstRenderClass = useMemo(
-    () => (noEntranceAnimation ? "" : Styles.maxHeight),
-    [screen === null]
-  );
-
-  return (
-    <UncontrolledTransition
-      ref={uncontRef}
-      transitionType={TransitionAnimationTypes.CUSTOM}
-      className={`${Styles.resetHeight} ${firstRenderClass}`}
-      lockTransitionWidth
-      key={String(children.key).replace("-nullated", "")}
-      onDiscardStep={(k) => {
-        if (k !== "null") {
-          onRemoveChildren(k!);
-          setScreen(null);
-        }
-      }}
-      config={CONFIGS_BY_ENTRANCE_TYPE[entranceType]}
-    >
-      {screen === null ? (
-        <Fragment key={"null"} />
-      ) : typeof screen === "string" ? (
-        (children.key?.endsWith("-nullated") && screen.endsWith("-nullated"))
-          ? <Fragment key={children.key + "-null"} />
-          : children
-      ) : (
-        screen
-      )}
-    </UncontrolledTransition>
-  );
-}
-
-/**
- * Animates the entrance and exit of a component
- **/
-export default function AnimatedEntrance({
-  children,
-  entranceType = EntranceType.SLIDE_AND_EXPAND,
-}: {
-  children: ReactElement[];
-  entranceType?: EntranceType;
-}) {
-  const firstRef = useRef(true);
-  useEffect(() => {
-    firstRef.current = false;
-  }, []);
-  const prevChildren = useRef([] as typeof children);
-  const childrenDelayed = useMemo(() => {
-    const newChildren = children.filter(
-      (c) => !prevChildren.current.find((a) => a.key === c.key)
-    );
-    const filteredOutChildren = prevChildren.current.map((c) => {
-      return children.find((a) => a.key === c.key) ? ( // If the previous child still exists, mantain
-        c
-      ) : (
-        // If not, toggle to null to animate exit
-        <Fragment
-          key={
-            String(c.key).includes("-nullated") ? c.key : `${c.key}-nullated`
-          }
-        >
-          {prevChildren.current.find(a => a.key === c.key)}
-        </Fragment>
-      );
-    });
-
-    for (let child of newChildren) {
-      const previousChildKey = children[children.indexOf(child) - 1]?.key;
-      if (previousChildKey) {
-        filteredOutChildren.splice(
-          filteredOutChildren.findIndex((a) => a.key === previousChildKey) + 1,
-          0,
-          child
-        );
-      } else {
-        filteredOutChildren.unshift(child);
-      }
-    }
-
-    return filteredOutChildren;
-  }, [children]);
-  prevChildren.current = childrenDelayed;
-
-  console.log(childrenDelayed.map(a => a.key));
-
-
-  return (
-    <>
-      {childrenDelayed.map((child) => (
-        <AnimatedEntranceItem
-          key={String(child.key!).replace("-nullated", "")}
-          noEntranceAnimation={firstRef.current}
-          entranceType={entranceType}
-          onRemoveChildren={(k) => {
-
-            (prevChildren.current = prevChildren.current.filter(
-              (a) => a.key !== String(k) + "-nullated"
-            ))
-          }
-          }
-        >
-          {children.find((c) => c.key === child.key) || child}
-        </AnimatedEntranceItem>
-      ))}
-    </>
-  );
-}

package/src/components/AnimatedEntrance/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./AnimatedEntrance";
-export * from "./AnimatedEntrance";

package/src/components/AsyncWrapper/AsyncWrapper.tsx

@@ -1,38 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { useOneUIContext } from "../../context/OneUIProvider";
-import AdaptiveDialog from "../AdaptiveDialog";
-import Button from "../Button";
-import Loader from "../Loader";
-import Text from "../Text";
-
-/**
- * This is a generic implementation of the loading, and error handling
- **/
-export default function AsyncWrapper({
-  loading,
-  error,
-  onClose,
-  onRetry,
-  children,
-}: PropsWithChildren<{
-  loading: boolean;
-  error: boolean;
-  onClose: () => void;
-  onRetry: () => void;
-}>) {
-  const {
-    LoadingComponent = Loader,
-    messages,
-  } = useOneUIContext().component.asyncWrapper;
-
-  return (
-    <>
-      {children}
-      <AdaptiveDialog open={error} onClose={onClose}>
-        <Text type="highlightTitle">{messages.error.title}</Text>
-        <Button onClick={() => onRetry()}>{messages.error.retryBtn}</Button>
-      </AdaptiveDialog>
-      {loading ? <LoadingComponent /> : null}
-    </>
-  );
-}

package/src/components/AsyncWrapper/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./AsyncWrapper";
-export * from "./AsyncWrapper";

package/src/components/Avatar/Avatar.module.scss

@@ -1,22 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.container {
-  &.noImg {
-    background-color: $avatarBackgroundColor;
-  }
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border-radius: 0.5em;
-
-  > span,
-  > img {
-    font-size: 0.4em;
-    width: inherit;
-    height: inherit;
-    text-align: center;
-    line-height: 2.5em;
-    display: block;
-    color: $digitalBlue;
-  }
-}

package/src/components/Avatar/Avatar.tsx

@@ -1,31 +0,0 @@
-import React, { useMemo } from "react";
-import Styles from "./Avatar.module.scss";
-
-/**
- * A simple avatar that shows the image of the user or it's initials as fallback
- **/
-export default function Avatar({
-  name,
-  imgSrc,
-  size = 48,
-}: {
-  imgSrc?: string;
-  name: string;
-  size?: number;
-}) {
-  const initials = useMemo(() => {
-    const nameParts = name.trim().split(" ");
-    if (nameParts.length === 1) return nameParts[0].charAt(0).toUpperCase();
-    const [firstName, lastName] = [nameParts[0], nameParts.slice(-1)[0]];
-    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-  }, [name]);
-  return (
-    <div
-      className={`${Styles.container} ${imgSrc ? "" : Styles.noImg}`}
-      style={{ fontSize: size }}
-      title={name}
-    >
-      {imgSrc ? <img src={imgSrc} alt={name} /> : <span>{initials}</span>}
-    </div>
-  );
-}

package/src/components/Avatar/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./Avatar";
-export * from "./Avatar";