@onepercentio/one-ui 0.28.8 → 0.29.0

package/src/components/AdaptiveDialog/AdaptiveDialog.tsx

@@ -0,0 +1,97 @@
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import Styles from "./AdaptiveDialog.module.scss";
+import MutableHamburgerButton from "../MutableHamburgerButton";
+import ScrollAndFocusLock from "../utilitary/ScrollAndFocusLock";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+
+/**
+ * This component implements a generic drawer that displays it as a drawer on mobile and as a modal on desktop
+ **/
+export default function AdaptiveDialog({
+  variant = "default",
+  onClose,
+  open = false,
+  className = "",
+  onClickOut,
+  children,
+  onClosed,
+  inline = false,
+}: PropsWithChildren<{
+  variant?: OnepercentUtility.UIElements.AdaptiveDialogVariants;
+  className?: string;
+  open: boolean;
+  onClose?: () => void;
+  onClickOut?: () => void;
+  onClosed?: () => void;
+  /**
+   * Indicates this rendering will write the html inside the current position on dom.
+   * If omitted or false, it will render on the document body, to prevent style bleeding */
+  inline?: boolean;
+}>) {
+  const rootDivRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(open);
+  const [expanded, setExpanded] = useState(false);
+  const variantClass = useOneUIConfig(
+    `component.adaptiveDialog.variant.${variant}`,
+    ""
+  );
+
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+      const toggleVisbility = (e: AnimationEvent) => {
+        if (e.animationName === Styles.backdropDismiss) {
+          onClosed?.();
+          setIsVisible(false);
+          (e.target! as HTMLDivElement).removeEventListener(
+            "animationend",
+            toggleVisbility
+          );
+        }
+      };
+      rootDivRef.current!.addEventListener("animationend", toggleVisbility);
+    }
+  }, [open]);
+
+  const globalClassName = {
+    backdrop: useOneUIConfig("component.adaptiveDialog.backdropClassName", ""),
+    dialog: useOneUIConfig("component.adaptiveDialog.dialogClassName", ""),
+  };
+  const content = (
+    <div
+      ref={rootDivRef}
+      className={`${Styles.backdrop} ${open ? Styles.open : Styles.close} ${
+        expanded ? Styles.expanded : ""
+      } ${globalClassName.backdrop} ${variantClass}`}
+      onClick={onClickOut}
+      onAnimationEnd={({ target, currentTarget }) => {
+        if (target === currentTarget)
+          (target as HTMLDivElement).style.pointerEvents = "initial";
+      }}
+    >
+      <div
+        className={`${Styles.container} ${className} ${globalClassName.dialog}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ScrollAndFocusLock open={open}>
+          {onClose && (
+            <button className={Styles.closeBtn} onClick={onClose}>
+              <MutableHamburgerButton state="closed" size={24} />
+            </button>
+          )}
+          <div onClick={() => setExpanded((p) => !p)} />
+          {children}
+        </ScrollAndFocusLock>
+      </div>
+    </div>
+  );
+
+  return isVisible || open ? (
+    inline ? (
+      content
+    ) : (
+      <>{ReactDOM.createPortal(content, document.body)}</>
+    )
+  ) : null;
+}

package/src/components/AdaptiveDialog/index.tsx

@@ -0,0 +1 @@
+export { default } from './AdaptiveDialog';

package/src/components/AdaptiveSidebar/AdaptiveSidebar.module.scss

@@ -0,0 +1,49 @@
+@import "../../assets/styles/index.scss";
+
+$hamburgerSize: 48;
+$hamburgerOffset: 24;
+
+@value hamburgerSize #{$hamburgerSize};
+
+.hamburger {
+  position: fixed;
+  top: #{$hamburgerOffset}px;
+  left: #{$hamburgerOffset}px;
+}
+
+.hamburger {
+  display: initial;
+}
+
+.hamburger,
+.container {
+  z-index: 1000;
+}
+
+.container {
+  box-sizing: border-box;
+  height: 100%;
+}
+.hamburger.desktop {
+  display: none;
+}
+
+.container.mobile {
+  &.defaultPadding {
+    padding-top: #{$hamburgerSize + $hamburgerOffset * 2}px;
+  }
+  position: fixed;
+  width: 100%;
+  overflow: auto;
+  z-index: 1000;
+  left: 0;
+
+  &.open {
+    transition: transform $veryFast ease-out;
+    transform: translateX(-0%);
+  }
+  &.closed {
+    transition: transform $veryFast ease-in;
+    transform: translateX(-100%);
+  }
+}

package/src/components/AdaptiveSidebar/AdaptiveSidebar.sample.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import AdaptiveSidebar from "./AdaptiveSidebar";
+
+export default function AdaptiveSidebarSample() {
+  return (
+    <AdaptiveSidebar>
+      Experiment with different resolutions to see how this container behaves
+    </AdaptiveSidebar>
+  );
+}

package/src/components/AdaptiveSidebar/AdaptiveSidebar.tsx

@@ -0,0 +1,123 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  PropsWithChildren,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import MutableHamburgerButton from "../MutableHamburgerButton";
+import ScrollAndFocusLock from "../utilitary/ScrollAndFocusLock";
+import Styles from "./AdaptiveSidebar.module.scss";
+import useBreakpoint from "../../hooks/ui/useBreakpoint";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+
+const DefaultVisibilityControl = ({ open }: { open: boolean }) => (
+  <MutableHamburgerButton size={48} state={open ? "closed" : "default"} />
+);
+
+type AdaptiveSidebarControls = {
+  dismiss: () => void;
+};
+function _AdaptiveSidebar(
+  {
+    open: externalOpen,
+    children,
+    className = "",
+    breakInto = 640,
+    visibilityControlComponent:
+      VisibilityControlComponent = DefaultVisibilityControl,
+    ...props
+  }: PropsWithChildren<
+    {
+      /** To control AdaptiveSidebar externally
+       * (created for flows that requires floating views when on mobile)
+       **/
+      open?: boolean;
+      /**
+       * The screen width to turn into responsive mode
+       */
+      breakInto?: number;
+      className?: string;
+      visibilityControlComponent?: (props: {
+        open: boolean;
+      }) => React.ReactElement;
+    } & Omit<React.HTMLProps<HTMLDivElement>, "ref">
+  >,
+  ref: ForwardedRef<AdaptiveSidebarControls>
+) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const _open = externalOpen === undefined ? open : externalOpen;
+  const isMobile = useBreakpoint(breakInto);
+  const globalClassName = useOneUIConfig("component.adaptiveSidebar.className");
+  const globalControlClassName = useOneUIConfig(
+    "component.adaptiveSidebar.controlClassName"
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      dismiss: () => setOpen(false),
+    }),
+    []
+  );
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === "test") return;
+    containerRef.current!.scrollTo({
+      left: 0,
+      behavior: "smooth",
+      top: 0,
+    });
+  }, [_open]);
+  const externalControl = externalOpen !== undefined;
+
+  const content = (
+    <div
+      ref={containerRef}
+      className={`${isMobile ? Styles.mobile : Styles.desktop} ${
+        Styles.container
+      } ${
+        !externalControl &&
+        DefaultVisibilityControl === VisibilityControlComponent
+          ? Styles.defaultPadding
+          : ""
+      } ${_open ? Styles.open : Styles.closed} ${className} ${globalClassName}`}
+      {...props}
+    >
+      <ScrollAndFocusLock open={_open}>{children}</ScrollAndFocusLock>
+    </div>
+  );
+
+  return (
+    <>
+      {isMobile
+        ? createPortal(
+            <>
+              {content}
+              {!externalControl && (
+                <div
+                  className={`${isMobile ? Styles.mobile : Styles.desktop} ${
+                    Styles.hamburger
+                  } ${globalControlClassName}`}
+                  onClick={() => setOpen((a) => !a)}
+                >
+                  <VisibilityControlComponent open={_open} />
+                </div>
+              )}
+            </>,
+            document.body
+          )
+        : content}
+    </>
+  );
+}
+
+/**
+ * A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
+ **/
+const AdaptiveSidebar = forwardRef(_AdaptiveSidebar);
+export default AdaptiveSidebar;

package/src/components/AdaptiveSidebar/index.tsx

@@ -0,0 +1 @@
+export { default } from './AdaptiveSidebar';

package/src/components/AnchoredTooltip/AnchoredTooltip.module.scss

@@ -0,0 +1,64 @@
+@import "../../assets/styles/index.scss";
+
+$arrowDim: 1em;
+
+/**
+* Some notions to take into account
+*/
+
+.tooltipContainer {
+  & > div {
+    background-color: $tooltipBackgroudColor;
+  }
+  // It should not overflow the viewport (screen)
+  max-width: 100vw;
+  max-height: 100vh;
+  min-width: fit-content;
+
+  // It should be floating over some point into the viewport
+  position: fixed;
+
+  // The position will be calculated via the javascript and the context
+
+  transition: top $almostInstant, left $almostInstant, opacity $normal;
+  z-index: 1000;
+
+  pointer-events: none;
+
+  &.open {
+    pointer-events: initial;
+  }
+
+  &::after,
+  &::before {
+    content: " ";
+    width: 0px;
+    height: 0px;
+    border: $arrowDim solid $tooltipBackgroudColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    transform: translateY(-$arrowDim) rotate(-45deg);
+    display: block;
+    margin: auto;
+    position: relative;
+    left: var(--anchor-indicator-offset-left, 0px);
+    z-index: -1;
+  }
+
+  &::before {
+    display: none;
+    transform: translateY($arrowDim) rotate(135deg);
+  }
+  &.anchoredTop {
+    transform: translateY(4px);
+  }
+  &.anchoredBottom {
+    transform: translateY(-4px);
+    &::after {
+      display: none;
+    }
+    &::before {
+      display: block;
+    }
+  }
+}

package/src/components/AnchoredTooltip/AnchoredTooltip.tsx

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

@@ -0,0 +1 @@
+export { default } from './AnchoredTooltip';

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

@@ -0,0 +1,108 @@
+@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;
+}