@onepercentio/one-ui 0.29.4 → 0.29.5

package/src/components/AnimatedEntrance/AnimatedEntrance.tsx

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

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

package/src/components/AsyncWrapper/AsyncWrapper.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,58 +0,0 @@
-@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.tsx

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

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

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