@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/AdaptiveContainer/AdaptiveContainer.tsx

@@ -1,200 +0,0 @@
-import React, {
-  ComponentProps,
-  ElementRef,
-  FunctionComponent,
-  HTMLAttributes,
-  HTMLProps,
-  JSX,
-  ReactElement,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import { TransitionAnimationTypes } from "../Transition";
-import UncontrolledTransition from "../UncontrolledTransition";
-import Styles from "./AdaptiveContainer.module.scss";
-
-/**
- * A container that animates width changes across content updates
- **/
-export default function AdaptiveContainer<
-  E extends keyof JSX.IntrinsicElements | FunctionComponent
->({
-  children,
-  className = "",
-  containerElement: _Wrapper = "div" as any,
-  direction = "h",
-  strict = true,
-  ...otherProps
-}: {
-  containerElement?: E;
-  children: ReactElement;
-  /**
-   * The direction in which the content will be resized
-   *
-   *     "h" // When the content will change in width
-   *     "v" // When the content will change in height
-   */
-  direction?: "h" | "v" | "both";
-  className?: string;
-  contentClassName?: string;
-  /**
-   * true: It will animate restricting to the height when it was rendered
-   * false: It will animate trying to reach the height when it was rendered, growing in size if the content inside it changes */
-  strict?: boolean;
-} & ComponentProps<E>) {
-  const animatedProperty = useMemo(() => {
-    if (!strict && direction !== "v")
-      throw new Error(
-        `Strict false only works with direction "v" at the moment`
-      );
-    switch (direction) {
-      case "both":
-        return ["width", "height"] as const
-      case "h":
-        return ("width" as const);
-      case "v":
-        return strict ? ("height" as const) : ("minHeight" as const);
-    }
-  }, [direction, strict]);
-  const uncontrolledRef =
-    useRef<ElementRef<typeof UncontrolledTransition>>(null);
-  const buttonRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const transitionContainer = uncontrolledRef.current!.sectionRef.current;
-    if (transitionContainer)
-      if (direction === "both") {
-        transitionContainer.style.width = `${transitionContainer.clientWidth}px`;
-        transitionContainer.style.height = `${transitionContainer.clientHeight}px`;
-      } else if (direction === "h") {
-        transitionContainer.style.width = `${transitionContainer.clientWidth}px`;
-        transitionContainer.style[animatedProperty as "width"] = ``;
-      } else {
-        transitionContainer.style[
-          animatedProperty as "height"
-        ] = `${transitionContainer.clientHeight}px`;
-        transitionContainer.style.width = ``;
-      }
-    const t = setTimeout(() => {
-      if (uncontrolledRef.current) {
-        const transitionContainer = uncontrolledRef.current.sectionRef.current;
-        if (transitionContainer) {
-          const screenThatWillEnter =
-            transitionContainer.lastChild as HTMLDivElement;
-
-          if (screenThatWillEnter) {
-            function resetFactory(
-              param: "minHeight" | "height" | "width",
-              target: number
-            ) {
-              const resetPropertyInstance = (e: Pick<TransitionEvent, "propertyName">) => {
-                if (e.propertyName !== param) return;
-                setTimeout(() => {
-                  if (transitionContainer?.style[param] === `${target}px`) {
-                    transitionContainer!.style[param] = "";
-                  }
-                }, 100);
-
-                if (transitionContainer)
-                  transitionContainer.removeEventListener(
-                    "transitionend",
-                    resetPropertyInstance
-                  );
-              };
-              return resetPropertyInstance;
-            }
-            if (direction === "both") {
-              const contentSize = {
-                width: screenThatWillEnter.clientWidth,
-                height: screenThatWillEnter.scrollHeight
-              };
-
-              const targetSize = {
-                width: `${contentSize.width}px`,
-                height: `${contentSize.height}px`
-              };
-
-              const prevSize = {
-                width: transitionContainer.style.width,
-                height: transitionContainer.style.height
-              };
-
-              transitionContainer.style.width = targetSize.width;
-              transitionContainer.style.height = targetSize.height;
-
-              if (Array.isArray(animatedProperty))
-                for (let prop of animatedProperty as ('width' | 'height')[]) {
-                  const resetProperty = resetFactory(
-                    prop,
-                    contentSize[prop]
-                  );
-                  if (targetSize[prop] === prevSize[prop])
-                    resetProperty({ propertyName: prop });
-                  else
-                    transitionContainer.addEventListener(
-                      "transitionend",
-                      resetProperty
-                    );
-                }
-            } else if (direction === "h") {
-              const contentWidth = screenThatWillEnter.clientWidth;
-              const targetWidth = `${contentWidth}px`;
-              const prevWidth = transitionContainer.style.width;
-              transitionContainer.style.width = targetWidth;
-              const func = resetFactory("width", contentWidth);
-              if (targetWidth === prevWidth) func({ propertyName: "width" });
-              else transitionContainer.addEventListener("transitionend", func);
-            } else {
-              const _animatedProperty = animatedProperty as "width"
-              const contentHeight = screenThatWillEnter.scrollHeight;
-              const targetHeight = `${contentHeight}px`;
-              const prevHeight = transitionContainer.style[_animatedProperty];
-              transitionContainer.style[_animatedProperty] = targetHeight;
-              const resetProperty = resetFactory(
-                _animatedProperty,
-                contentHeight
-              );
-              if (targetHeight === prevHeight)
-                resetProperty({ propertyName: _animatedProperty });
-              else
-                transitionContainer.addEventListener(
-                  "transitionend",
-                  resetProperty
-                );
-            }
-          }
-        }
-      }
-    }, 100);
-    return () => clearTimeout(t);
-  }, [children.key, direction]);
-  const Wrapper = _Wrapper as any;
-  const directionClass = direction in Styles ? Styles[direction] : "";
-
-  return (
-    <>
-      <Wrapper className={`${className}`} ref={buttonRef} {...otherProps}>
-        <UncontrolledTransition
-          ref={uncontrolledRef}
-          transitionType={TransitionAnimationTypes.CUSTOM}
-          lockTransitionWidth={false}
-          config={{
-            backward: {
-              elementExiting: Styles.fadeOutAbsolute,
-              elementEntering: Styles.fadeInDelayed,
-            },
-            forward: {
-              elementExiting: Styles.fadeOutAbsolute,
-              elementEntering: Styles.fadeInDelayed,
-            },
-          }}
-          className={`${Styles.resetSection} ${directionClass}`}
-          contentClassName={otherProps.contentClassName}
-        >
-          {children}
-        </UncontrolledTransition>
-      </Wrapper>
-    </>
-  );
-}

package/src/components/AdaptiveContainer/index.tsx

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

package/src/components/AdaptiveDialog/AdaptiveDialog.module.scss

@@ -1,147 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.backdrop {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  transition: backdrop-filter $veryFast linear;
-  backdrop-filter: var(--adaptive-dialog-backdrop-backdrop, initial);
-  pointer-events: none;
-
-  @media screen and (orientation: "portrait") {
-    align-items: flex-end;
-  }
-}
-.backdrop,
-.container {
-  animation-duration: $fast;
-  animation-fill-mode: forwards;
-}
-
-.open {
-  &.backdrop {
-    animation-name: backdropAppear;
-  }
-  .container {
-    animation-name: reveal;
-  }
-  @media screen and (orientation: "portrait") {
-    .container {
-      animation-timing-function: ease-in-out;
-      animation-name: slideUp;
-      transform: translateY(100%);
-    }
-  }
-}
-
-.close {
-  &.backdrop {
-    animation-name: backdropDismiss;
-  }
-
-  .container {
-    animation-name: dismiss;
-  }
-
-  @media screen and (orientation: "portrait") {
-    .container {
-      animation-name: slideDown;
-    }
-  }
-}
-
-.container {
-  > .closeBtn {
-    position: absolute;
-    right: 16px;
-    top: 16px;
-    background: none;
-    border: none;
-    width: auto;
-    height: auto;
-    padding: 0px !important;
-  }
-  padding: 16px 32px;
-  position: relative;
-  width: 100%;
-  max-width: 640px;
-  background: $mainBackgroundColor;
-  backdrop-filter: var(--adaptive-dialog-backdrop, initial);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  max-height: 90% !important;
-  overscroll-behavior: contain;
-  @media screen and (orientation: "portrait") {
-    min-height: initial;
-    align-items: flex-start;
-  }
-}
-
-@keyframes backdropAppear {
-  0% {
-    background-color: #0000;
-  }
-
-  100% {
-    background-color: #0005;
-  }
-}
-
-@keyframes backdropDismiss {
-  0% {
-    background-color: #0005;
-  }
-
-  100% {
-    background-color: #0000;
-  }
-}
-
-@keyframes reveal {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes dismiss {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes slideUp {
-  0% {
-    min-height: 0px;
-    transform: translateY(100%);
-  }
-
-  100% {
-    min-height: 0px;
-    transform: translateY(0%);
-  }
-}
-
-@keyframes slideDown {
-  0% {
-    transform: translateY(0%);
-  }
-
-  100% {
-    min-height: 0px;
-    transform: translateY(100%);
-  }
-}

package/src/components/AdaptiveDialog/AdaptiveDialog.tsx

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

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

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