@onepercentio/one-ui 0.28.8 → 0.28.9

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.28.8",
+  "version": "0.28.9",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.ts",
+  "exports": {
+    "./*": "./src/*.ts"
+  },
   "devDependencies": {
     "@babel/cli": "^7.22.9",
     "@babel/core": "^7.22.9",

package/src/assets/img/svg/checkbox.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7 -7 38 38">
+    <path style="stroke: #EDEDED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3px" fill="none" d="M22.9 3.7l-15.2 16.6-6.6-7.1" />
+</svg>

package/src/assets/styles/index.scss

@@ -0,0 +1,2 @@
+@import "./variables.scss";
+@import "./mixins.scss";

package/src/assets/styles/mixins.scss

@@ -0,0 +1,12 @@
+@mixin iteractibleElement() {
+  & {
+    cursor: pointer;
+    transition: transform $fast;
+  }
+  &:hover {
+    transform: scale(1.2);
+  }
+  &:active {
+    transform: scale(1.1);
+  }
+}

package/src/assets/styles/variables.scss

@@ -0,0 +1,49 @@
+$digitalBlue: var(--digital-blue, #558eff);
+$mediumGray: var(--medium-gray, #bababa);
+$lightGray: var(--light-gray, #d6d6d6);
+$spaceBlue: var(--space-blue, #0f113a);
+$warningRed: var(--warning-red, #e84b4b);
+$sunsetPink: var(--sunset-pink, #ff3e7d);
+$darkestGray: var(--darkest-gray, #727272);
+$gray: var(--gray, #0f113a);
+$success: var(--success, lightgreen);
+$successDark: var(--success-dark, green);
+$mainBackgroundColor: var(--bg-color, white);
+$primaryColor: var(--primary-color, var(--digital-blue));
+$elevation: var(--card-elevation, 0px 4px 10px rgba(0, 0, 0, 0.1));
+
+$mainFontFamily: var(--main-font, Roboto);
+$secondaryFontFamily: var(--second-font, Manrope);
+
+$headerFillBackgroundColor: var(--header-background-color, $digitalBlue);
+$headerBackgroundColor: var(--header-divider-bg-color, #467eea);
+$headerTextColor: var(--header-text-color, #94b8ff);
+$headerBrightColor: var(--header-bright-color, white);
+
+$tableRowBgColor: var(--table-row-bg-color, white);
+$tableRowBorderColor: var(--table-row-border-color, #bec1ca);
+
+$buttonBorderRadius: var(--button-border-radius, 8px);
+$buttonTextColor: var(--button-text-color, white);
+
+$tooltipBackgroudColor: var(--tooltip-background-color, $digitalBlue);
+
+$checkboxBaseColor: var(--checkbox-base-color, $digitalBlue);
+
+$textDefaultColor: var(--text-default-color, $digitalBlue);
+
+$buttonPrimaryBackgroundColor: var(--button-primary-bg-color, #1e22aa);
+
+$fileInputBackgroundColor: var(--file-input-bg-color, #f2f6f7);
+$fileInputBorderColor: var(--file-input-border-color, #dce1e8);
+
+$avatarBackgroundColor: var(--avatar-bg-color, $lightGray);
+
+$pixelatedGuideBackground: var(--pixelated-scan-bg, var(--digital-blue));
+
+$almostInstant: var(--animation--speed-almostInstant, 50ms);
+$veryFast: var(--animation--speed-veryfast, 125ms);
+$fast: var(--animation--speed-fast, 250ms);
+$normal: var(--animation--speed-normal, 500ms);
+$slow: var(--animation--speed-slow, 1s);
+$verySlow: var(--animation--speed-veryslow, 2s);

package/src/components/AdaptiveButton/AdaptiveButton.module.scss

@@ -0,0 +1,7 @@
+.resetButton {
+  min-width: 0px !important;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}

package/src/components/AdaptiveButton/AdaptiveButton.tsx

@@ -0,0 +1,26 @@
+import React, { ComponentProps, ReactElement } from "react";
+import AdaptiveContainer from "../AdaptiveContainer";
+import Button from "../Button";
+import Styles from "./AdaptiveButton.module.scss";
+
+/**
+ * A button that adapts it's width according to the content size
+ **/
+export default function AdaptiveButton({
+  children,
+  className = "",
+  ...buttonProps
+}: {
+  children: ReactElement;
+} & ComponentProps<typeof Button>) {
+  return (
+    <AdaptiveContainer
+      containerElement={Button}
+      className={`${Styles.resetButton} ${className}`}
+      direction="both"
+      {...buttonProps}
+    >
+      {children}
+    </AdaptiveContainer>
+  );
+}

package/src/components/AdaptiveButton/index.tsx

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

package/src/components/AdaptiveContainer/AdaptiveContainer.module.scss

@@ -0,0 +1,53 @@
+.resetSection {
+  min-height: 0px;
+  transition: width var(--adaptive-container-transition-time, 400ms) linear,
+    height var(--adaptive-container-transition-time, 400ms) linear,
+    min-height var(--adaptive-container-transition-time, 400ms) linear;
+  transition-timing-function: linear;
+  overflow: hidden;
+  align-items: flex-start;
+  &.h,&.both {
+    > * {
+      min-width: auto !important;
+    }
+  }
+  &.v,&.both {
+    > * {
+      min-height: initial;
+    }
+  }
+}
+
+@keyframes fadeInDelayed {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOutDelayed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeInDelayed {
+  animation-name: fadeInDelayed;
+  animation-duration: 500ms !important;
+}
+
+.fadeOutAbsolute {
+  position: absolute;
+  animation-name: fadeOutDelayed;
+  animation-duration: 500ms !important;
+}

package/src/components/AdaptiveContainer/AdaptiveContainer.tsx

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

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

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

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

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