@onepercentio/one-ui 0.29.4 → 0.29.5

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

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

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

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

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

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

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

@@ -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;
-}