@onepercentio/one-ui 0.29.4 → 0.29.6

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

package/src/components/Chart/Chart.view.tsx

@@ -1,241 +0,0 @@
-import React, {
-  ComponentRef,
-  ElementRef,
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import throttle from "lodash/throttle";
-import { ChartViewProps } from "./Chart.types";
-import Styles from "./Chart.module.scss";
-import { ChartDataTestIds } from "./Chart.e2e";
-import AnchoredTooltip from "../AnchoredTooltip";
-
-const DEFAULT_STYLE = {
-  lineColor: "#000",
-  pointColor: "#000",
-  textColor: "#fff",
-};
-
-function FloatingTooltip({
-  children,
-  x,
-  y,
-  hoverOnly,
-  height,
-  style,
-}: {
-  children: ReactNode;
-  x: number;
-  y: number;
-  hoverOnly: boolean;
-  height: number;
-  style: Pick<
-    NonNullable<NonNullable<ChartViewProps["style"]>[number]>,
-    "pointColor" | "lineColor" | "textColor"
-  >;
-}) {
-  const [ope, setOpen] = useState(() => (hoverOnly ? false : true));
-  const ref = useRef<ComponentRef<typeof AnchoredTooltip>>(null);
-  const circleRef = useRef<SVGCircleElement>(null);
-  useEffect(() => {
-    const animateEl = circleRef.current!.children.item(0) as SVGAnimateElement;
-    let interval: NodeJS.Timeout;
-    animateEl.addEventListener("beginEvent", () => {
-      interval = setInterval(() => ref.current!.updatePosition(), 1000 / 24);
-    });
-    animateEl.addEventListener("endEvent", () => {
-      clearInterval(interval);
-      ref.current!.updatePosition();
-    });
-  }, []);
-
-  const actions = useMemo(
-    () =>
-      hoverOnly
-        ? {
-            onMouseEnter: () => setOpen(true),
-            onMouseOut: () => setOpen(false),
-          }
-        : {},
-    [hoverOnly]
-  );
-
-  return (
-    <>
-      <circle
-        ref={circleRef}
-        r={height * 0.01}
-        cx={x}
-        cy={y}
-        style={
-          {
-            "--point-color": style.pointColor,
-          } as any
-        }
-        {...actions}
-      >
-        <animate attributeName="cy" values={`${height};${y}`} dur="1s" />
-      </circle>
-      <AnchoredTooltip
-        ref={ref}
-        containInViewport={false}
-        anchorRef={circleRef as any}
-        open={ope}
-        className={Styles.tooltipContainer}
-        style={{
-          "--line-color": style.lineColor,
-          "--text-color": style.textColor,
-        }}
-      >
-        {children as any}
-      </AnchoredTooltip>
-    </>
-  );
-}
-
-/**
- * Draws a simple line chart with some animation
- **/
-export default function ChartView({
-  bounds: [[startX, endX, stepsX], [startY, endY, stepsY]],
-  data = [],
-  points = [],
-  label,
-  style: groupStyle = [],
-}: ChartViewProps) {
-  const [dim, setDIm] = useState<{ width: number; height: number }>();
-  const chartRef = useRef<HTMLDivElement>(null);
-  useLayoutEffect(() => {
-    setDIm({
-      width: chartRef.current!.clientWidth,
-      height: chartRef.current!.clientHeight,
-    });
-  }, []);
-  const { width, height } = dim || {};
-
-  const howMuchStepsY = useMemo(
-    () => (endY - startY) / stepsY + 1,
-    [endY, startY, stepsY]
-  );
-  const yAxis = useMemo(() => {
-    return new Array(howMuchStepsY).fill(undefined).map((_, i) => {
-      return <span>{label.y(endY - i * stepsY)}</span>;
-    });
-  }, [startY, endY, stepsY, howMuchStepsY]);
-
-  const howMuchStepsX = useMemo(
-    () => (endX - startX) / stepsX + 1,
-    [endX, startX, stepsX]
-  );
-  const xAxis = useMemo(() => {
-    return new Array(howMuchStepsX).fill(undefined).map((_, i) => {
-      return <span>{label.x(startX + i * stepsX)}</span>;
-    });
-  }, [startX, endX, stepsX]);
-
-  const { polylines, tooltips } = useMemo(() => {
-    const calculate =
-      (end: number, start: number, overrideScale: number = 100) =>
-      (point: number) => {
-        const max = end - start;
-        const current = point - start;
-
-        return (current * overrideScale) / max;
-      };
-    const calculateX = calculate(endX, startX, width);
-    const calculateY = calculate(endY, startY, height);
-    return {
-      tooltips: points.map((pointsCategory, i) => {
-        const style = groupStyle[i] || DEFAULT_STYLE;
-        return pointsCategory.map(([x, y, label, onlyOnHover = false]) => {
-          return (
-            <FloatingTooltip
-              x={calculateX(x)}
-              y={height! - calculateY(y)}
-              height={height!}
-              style={style}
-              hoverOnly={onlyOnHover}
-            >
-              {label}
-            </FloatingTooltip>
-          );
-        });
-      }),
-      polylines: data.map((lineData, i) => {
-        const style = groupStyle[i] || DEFAULT_STYLE;
-        const calculateLines = (yOverride?: number) => {
-          return lineData
-            .map(
-              ([x, y]) =>
-                `${calculateX(x)},${
-                  yOverride === undefined ? height! - calculateY(y) : yOverride
-                }`
-            )
-            .join(" ");
-        };
-        return (
-          <polyline
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            points={calculateLines()}
-            fill="none"
-            strokeWidth={5}
-            style={
-              {
-                "--line-color": style.lineColor,
-              } as any
-            }
-          >
-            <animate
-              attributeName="points"
-              attributeType="XML"
-              values={[calculateLines(height), calculateLines()].join("; ")}
-              dur="1s"
-            />
-          </polyline>
-        );
-      }),
-    };
-  }, [data, width, height]);
-
-  const paddingY = useMemo(() => {
-    const stepSizeY = height! / (howMuchStepsY - 1);
-    return stepSizeY / 2;
-  }, [howMuchStepsY, height]);
-
-  const paddingX = useMemo(() => {
-    const stepSizeX = width! / (howMuchStepsX - 1);
-    return stepSizeX / 2;
-  }, [howMuchStepsX, width]);
-
-  return (
-    <div className={Styles.chartRoot}>
-      <div className={Styles.yAxis} data-testid={ChartDataTestIds.Y_AXIS}>
-        {yAxis}
-      </div>
-      <div ref={chartRef} className={Styles.chartContainer}>
-        {width && (
-          <svg
-            className={Styles.chart}
-            viewBox={`${-paddingX} ${-paddingY} ${width + paddingX * 2} ${
-              height! + paddingY * 2
-            }`}
-            preserveAspectRatio="none"
-          >
-            {polylines}
-            {tooltips}
-          </svg>
-        )}
-      </div>
-      &nbsp;
-      <div className={Styles.xAxis} data-testid={ChartDataTestIds.X_AXIS}>
-        {xAxis}
-      </div>
-    </div>
-  );
-}

package/src/components/Chart/index.tsx

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

package/src/components/CheckBox/CheckBox.module.scss

@@ -1,36 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.container {
-  display: flex;
-  line-height: 1.5em;
-  vertical-align: middle;
-  input {
-    max-width: 0px;
-    max-height: 0px;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-
-  > span:first-child {
-    visibility: visible;
-    width: 1.5em;
-    height: 1.5em;
-    border-radius: 0.45em;
-    background-image: url("../../assets/img/svg/checkbox.svg");
-    background-color: transparent;
-    transition: background-color 250ms, border 250ms, box-shadow 250ms;
-    border: 1px solid rgb(40, 43, 53);
-    box-shadow: 0px 0px 0px -4px $digitalBlue;
-    flex-shrink: 0;
-
-    &.wContent {
-      margin-right: 0.45em;
-    }
-  }
-  > span:first-child.checked {
-    background-color: $digitalBlue;
-    border: 1px solid $digitalBlue;
-    box-shadow: 0px 0px 12px -4px $digitalBlue;
-  }
-}

package/src/components/CheckBox/CheckBox.tsx

@@ -1,63 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { useOneUIConfig } from "../../context/OneUIProvider";
-import Styles from "./CheckBox.module.scss";
-
-/**
- * A simple checkbox with nissan guidelines
- **/
-export default function CheckBox({
-  checked,
-  onToggle,
-  label,
-  className = "",
-  size = undefined,
-  groupId,
-  value,
-  ...props
-}: PropsWithChildren<{
-  checked: boolean;
-  onToggle: (checked: boolean) => void;
-  label: React.ReactNode;
-  className?: string;
-  size?: number;
-  groupId: string;
-  value: string;
-}> &
-  Omit<
-    React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLSpanElement>,
-      HTMLSpanElement
-    >,
-    "onToggle"
-  >) {
-  const Checkbox = useOneUIConfig(
-    "component.checkbox.Component",
-    "span" as any
-  ) as any;
-  return (
-    <label
-      className={`${Styles.container} ${className}`}
-      style={{ fontSize: size }}
-      onClick={(e) => {
-        onToggle(!checked);
-        e.preventDefault();
-      }}
-    >
-      <Checkbox
-        {...props}
-        className={`${checked ? Styles.checked : ""} ${
-          label ? Styles.wContent : ""
-        }`}
-      />
-      <input
-        type="checkbox"
-        name={groupId}
-        id={value}
-        checked={checked}
-        readOnly
-      />
-
-      {label}
-    </label>
-  );
-}

package/src/components/CheckBox/index.tsx

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

package/src/components/CodeInput/CodeInput.module.scss

@@ -1,5 +0,0 @@
-.root {
-  min-height: 150px;
-  height: 100%;
-  flex: 1;
-}