@onepercentio/one-ui 0.28.8 → 0.28.9

package/src/components/AnimatedEntrance/AnimatedEntrance.tsx

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

@@ -0,0 +1,5 @@
+export {
+  default,
+  AnimatedEntranceItem,
+  EntranceType,
+} from "./AnimatedEntrance";

package/src/components/AsyncWrapper/AsyncWrapper.tsx

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

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

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

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

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

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

package/src/components/BucketFill/BucketFill.module.scss

@@ -0,0 +1,36 @@
+@import "../../assets/styles/variables.scss";
+
+.root {
+  position: relative;
+  z-index: 1;
+  > :not(div) {
+    mix-blend-mode: color;
+  }
+  > div > * {
+    mix-blend-mode: color;
+  }
+  &::before,
+  &::after {
+    background: var(--bg);
+    width: 100%;
+    position: absolute;
+    content: " ";
+    z-index: -1;
+    transition: height $fast, background-size $fast;
+  }
+  &::before {
+    opacity: 0;
+    top: 0;
+    height: var(--fill-height);
+  }
+  &::after {
+    opacity: 0.6;
+    bottom: 0;
+    height: var(--empty-height);
+    background-size: 100% var(--bg-offset);
+    background-position: bottom;
+  }
+  .ignoreFill {
+    mix-blend-mode: multiply;
+  }
+}

package/src/components/BucketFill/BucketFill.tsx

@@ -0,0 +1,65 @@
+import React, { PropsWithChildren, ReactNode, useEffect, useRef } from "react";
+import Styles from "./BucketFill.module.scss";
+
+/**
+ * A weird name for a component, but it's objective is to change element colors as the user progresses through a series of steps
+ *
+ * IT IS NOT READY (AND PROBABLY NEVER WILL) FOR FRAGMENT NODES
+ **/
+export default function BucketFill({
+  children,
+  background,
+  fillTo,
+}: {
+  children: ReactNode[];
+  fillTo: number;
+  background: string;
+}) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  function resize() {
+    const childs = rootRef.current!.children;
+    const s = rootRef.current!.style;
+    const elementAtPosition =
+      fillTo === 0 ? null : (childs.item(fillTo - 1) as HTMLElement);
+    const elementOffsetAndHeight =
+      elementAtPosition === null
+        ? 0
+        : elementAtPosition.offsetTop + elementAtPosition.clientHeight;
+    const elementRootHeight = rootRef.current!.clientHeight;
+    const percentToFill = Math.min(
+      (elementOffsetAndHeight * 100) / elementRootHeight,
+      100
+    );
+
+    s.setProperty("--fill-height", `${percentToFill}%`);
+    s.setProperty("--empty-height", `${100 - percentToFill}%`);
+    s.setProperty(
+      "--bg-offset",
+      `${percentToFill === 100 ? -1000 : 100 / ((100 - percentToFill) / 100)}%`
+    );
+  }
+  useEffect(() => {
+    resize();
+    window.addEventListener("resize", resize);
+
+    return () => window.removeEventListener("resize", resize);
+  }, [fillTo]);
+  
+  return (
+    <div
+      ref={rootRef}
+      style={
+        {
+          "--bg": background,
+        } as any
+      }
+      className={Styles.root}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function IgnoreFill({ children }: PropsWithChildren<{}>) {
+  return <div className={Styles.ignoreFill}>{children}</div>;
+}

package/src/components/BucketFill/index.tsx

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

package/src/components/Button/Button.module.scss

@@ -0,0 +1,45 @@
+@import "../../assets/styles/variables.scss";
+
+.button {
+  cursor: pointer;
+  display: block;
+  padding: 16px;
+  border: none;
+  transition: color $fast;
+  color: $digitalBlue;
+  border-radius: $buttonBorderRadius;
+  &:disabled {
+    cursor: initial;
+  }
+}
+
+///"transparent" | "filled" | "outline";
+
+.transparent {
+  background-color: transparent;
+  &:disabled {
+    color: $mediumGray;
+  }
+}
+
+.filled {
+  background-color: $buttonPrimaryBackgroundColor;
+  color: $buttonTextColor;
+  border-width: 0px;
+  &:disabled {
+    color: $mediumGray;
+  }
+}
+
+.outline {
+  border: 1px solid $digitalBlue;
+  background-color: transparent;
+  &:disabled {
+    color: $mediumGray;
+  }
+}
+
+.link {
+  padding: 0px;
+  @extend .transparent;
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,40 @@
+import React, { ElementRef, ForwardedRef, forwardRef } from "react";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+
+type ButtonProps = React.PropsWithChildren<
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: OnepercentUtility.UIElements.ButtonVariants;
+  }
+>;
+
+export function _Button(
+  {
+    children,
+    variant = "transparent",
+    className = "",
+    ...otherProps
+  }: ButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>
+) {
+  const classNameType = useOneUIConfig("component.button.className", {});
+  const Component = useOneUIConfig(
+    "component.button.Component",
+    "button" as any
+  );
+  return (
+    <Component
+      ref={ref}
+      className={`${className} ${classNameType[variant] || ""}`}
+      variant={variant}
+      {...otherProps}
+    >
+      {children}
+    </Component>
+  );
+}
+
+/**
+ * A simple button that can be customized via the provider
+ **/
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(_Button);
+export default Button;

package/src/components/Button/index.tsx

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

package/src/components/Card/Card.module.scss

@@ -0,0 +1,12 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  background: $mainBackgroundColor;
+  padding: 32px;
+  max-width: 640px;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  height: auto;
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from "react";
+import Styles from "./Card.module.scss";
+
+/**
+ * A card layout that holds content
+ **/
+export default function Card({ children, className = "" }: PropsWithChildren<{className?: string}>) {
+  return <div className={`${Styles.container} ${className}`}>{children}</div>;
+}

package/src/components/Card/index.tsx

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

package/src/components/Chart/Chart.e2e.ts

@@ -0,0 +1,4 @@
+export enum ChartDataTestIds {
+  Y_AXIS = "y",
+  X_AXIS = "x",
+}

package/src/components/Chart/Chart.logic.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import View from "./Chart.view";
+import { ChartProps } from "./Chart.types";
+
+/** An proprietary implementation of some chart variations */
+export default function ChartLogic(props: ChartProps) {
+    return <View {...props} />;
+}

package/src/components/Chart/Chart.module.scss

@@ -0,0 +1,58 @@
+@import "../../assets/styles";
+
+.tooltipContainer {
+  > * {
+    padding: 16px;
+    border-radius: 8px;
+    background-color: var(--line-color) !important;
+    color: var(--text-color);
+  }
+
+  &::after,
+  &::before {
+    border-color: var(--line-color) !important;
+  }
+}
+
+.chartRoot {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+  .chartContainer {
+    width: 100%;
+    height: 100%;
+    border-left: 2px solid $primaryColor;
+    border-bottom: 2px solid $primaryColor;
+    svg {
+      height: 100%;
+      width: 100%;
+      circle {
+        fill: var(--point-color);
+      }
+      polyline {
+        stroke: var(--line-color);
+      }
+    }
+  }
+  .yAxis,
+  .xAxis {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    > * {
+      text-align: center;
+    }
+  }
+  .xAxis {
+    border-left: 2px solid $primaryColor;
+    flex-direction: row;
+    > * {
+      flex: 1;
+    }
+  }
+  .yAxis {
+    border-bottom: 2px solid $primaryColor;
+  }
+}

package/src/components/Chart/Chart.types.ts

@@ -0,0 +1,35 @@
+import { ReactElement } from "react";
+
+export type ChartProps = ChartViewProps;
+export type ChartViewProps = {
+  bounds: Readonly<
+    [
+      horizontal: Readonly<[min: number, max: number, incrementRate: number]>,
+      vertical: Readonly<[min: number, max: number, incrementRate: number]>
+    ]
+  >;
+
+  style?: (
+    | Partial<{
+        lineColor: string;
+        pointColor: string;
+        textColor: string;
+      }>
+    | undefined
+  )[];
+
+  data?: Readonly<Readonly<Readonly<[x: number, y: number]>[]>[]>;
+
+  points?: Readonly<
+    Readonly<
+      Readonly<
+        [x: number, y: number, label: ReactElement, onlyOnHover?: boolean]
+      >[]
+    >[]
+  >;
+
+  label: {
+    x: (val: number) => ReactElement;
+    y: (val: number) => ReactElement;
+  };
+};