@onepercentio/one-ui 0.29.4 → 0.29.5

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

package/src/components/CodeInput/CodeInput.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useMemo, useRef } from "react";
-import { Uri } from "monaco-editor";
-import Styles from "./CodeInput.module.scss";
-import Loader from "../Loader";
-import useModule from "../../hooks/utility/useModule";
-
-window.MonacoEnvironment = {
-  getWorkerUrl: function (moduleId, label) {
-    if (label === "typescript" || label === "javascript")
-      return "./ts.worker.js";
-    return "./editor.worker.js";
-  },
-};
-
-/**
- * Allows the user to input code using monaco editor
- **/
-export default function CodeInput({
-  codeSample,
-  onChange,
-  mode,
-}: {
-  codeSample?: string;
-  onChange?: (code: string) => void;
-  mode?: "dark" | "light";
-}) {
-  const divRef = useRef<HTMLDivElement>(null);
-  const Monaco = useModule(() => import("monaco-editor"));
-  const content = useMemo(() => {
-    if (!Monaco) return <Loader />;
-    else {
-      return null;
-    }
-  }, [Monaco]);
-  const editorRef =
-    useRef<import("monaco-editor").editor.IStandaloneCodeEditor>(undefined);
-  useEffect(() => {
-    if (Monaco) {
-      Monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: true,
-      });
-      const editor = Monaco.editor.create(divRef.current!, {
-        language: "typescript",
-        scrollBeyondLastLine: false,
-        minimap: { enabled: false },
-        folding: false,
-        readOnly: !onChange,
-        theme: mode === "dark" ? "vs-dark" : undefined,
-        automaticLayout: true
-      });
-      editor.onDidContentSizeChange(() => {
-        if (!editorRef.current) {
-          editorRef.current = editor;
-        }
-      });
-      editor.onDidChangeModelContent(() => {
-        if (onChange) onChange(editor.getModel()!.getValue());
-      });
-      const model = Monaco.editor.createModel(
-        codeSample || "",
-        "typescript",
-        Uri.file(`example.tsx`)
-      );
-      editor.setModel(model);
-      return () => {
-        model.dispose();
-      };
-    }
-  }, [Monaco]);
-  useEffect(() => {
-    if (!codeSample) return;
-    const editor = editorRef.current;
-    if (!editor) return;
-    const model = editor.getModel();
-    if (!model) return;
-    const currentValue = model.getValue();
-    if (codeSample !== currentValue) model.setValue(codeSample);
-  }, [codeSample]);
-  return (
-    <div ref={divRef} className={Styles.root}>
-      {content}
-    </div>
-  );
-}

package/src/components/CodeInput/index.tsx

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

package/src/components/Collapsable/Collapsable.module.scss

@@ -1,42 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.container {
-  > .title {
-    cursor: pointer;
-    margin: 0px;
-    display: block;
-  }
-}
-
-.open .title::after {
-  transform: translateX(-0.5em) rotateX(180deg) rotateZ(45deg);
-}
-.closed .title::after {
-  transform: translateX(-0.5em) rotateX(0deg) rotateZ(45deg);
-}
-
-.content {
-  width: 100%;
-  max-width: 500px;
-  overflow: hidden;
-  transition: height $fast ease-in;
-  height: 0px;
-  &.float {
-    width: initial;
-    max-width: initial;
-    position: fixed;
-    z-index: 100;
-    background: $mainBackgroundColor;
-    overflow: auto;
-  }
-  &.block {
-    box-sizing: initial;
-  }
-  &.transitionMarginTop {
-    transition: height $fast ease-in, margin-top $fast ease-in;
-  }
-}
-
-.open {
-  transition: height $fast ease-out;
-}