@onepercentio/one-ui 0.28.8 → 0.28.9

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

@@ -0,0 +1,240 @@
+import React, {
+  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<ElementRef<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

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

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

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

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

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

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

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

package/src/components/CodeInput/CodeInput.tsx

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

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

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

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