@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/components/PixelatedScan/PixelatedScan.tsx

@@ -0,0 +1,175 @@
+import React, {
+  ElementRef,
+  ForwardedRef,
+  forwardRef,
+  RefObject,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import chromajs from "chroma-js";
+import Styles from "./PixelatedScan.module.scss";
+
+const AnimDuration = Number(Styles.animationDuration);
+
+/**
+ * This effect scans up and down on the div with a following pixelated trail
+ **/
+export default function PixelatedScan({
+  squaresByLine,
+  color,
+  className = "",
+}: {
+  squaresByLine: number;
+  color: string;
+  className?: string;
+}) {
+  const iteration = useRef(0);
+  const tableRef = useRef<HTMLTableElement>(null);
+  const [config, setConfig] =
+    useState<{ squareSize: number; howMuchLines: number }>();
+
+  useEffect(() => {
+    const squareSize = tableRef.current!.clientWidth / squaresByLine;
+    const howMuchLines = tableRef.current!.clientHeight / squareSize;
+
+    setConfig({
+      squareSize,
+      howMuchLines,
+    });
+  }, []);
+  const rowsDef = useMemo(() => {
+    return new Array(Math.ceil(config?.howMuchLines || 0)).fill(undefined);
+  }, [config]);
+  const lineDef = useMemo(() => {
+    return new Array(squaresByLine).fill(undefined);
+  }, [config]);
+  return (
+    <>
+      <div
+        className={`${Styles.grid} ${Styles.iterate} ${className}`}
+        ref={tableRef}
+      >
+        {rowsDef.map((_, iRow, _rows) => (
+          <GridRow
+            key={`${iRow}`}
+            squares={lineDef}
+            size={config!.squareSize}
+            baseColor={color}
+            lineCount={config!.howMuchLines}
+            lineIndex={iRow}
+            onFinish={
+              iRow === _rows.length - 6
+                ? () => {
+                    tableRef.current!.classList.remove(Styles.iterate);
+                    iteration.current += 1;
+                    if (iteration.current % 2 === 1)
+                      tableRef.current!.classList.add(Styles.inverse);
+                    else tableRef.current!.classList.remove(Styles.inverse);
+                    setTimeout(() => {
+                      tableRef.current!.classList.add(Styles.iterate);
+                    }, 100);
+                  }
+                : undefined
+            }
+          />
+        ))}
+        <div className={Styles.guide} />
+      </div>
+    </>
+  );
+}
+
+function GridRow({
+  onFinish,
+  squares,
+  size,
+  baseColor,
+  lineCount,
+  lineIndex,
+}: {
+  squares: Array<any>;
+  onFinish?: () => void;
+  size: number;
+  baseColor?: string;
+  lineCount: number;
+  lineIndex: number;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const gridItemsRefs = useRef<(ElementRef<typeof GridItem> | null)[]>([]);
+
+  useEffect(() => {
+    function updateColor() {
+      gridItemsRefs.current.forEach((i) => i?.updateColor());
+    }
+    ref.current?.addEventListener("animationend", updateColor);
+
+    return () => {
+      ref.current?.removeEventListener("animationend", updateColor);
+    };
+  }, []);
+  return (
+    <div
+      className={Styles.gridAnimate}
+      onAnimationEnd={onFinish}
+      style={{
+        animationDelay: `${(AnimDuration / lineCount) * (lineIndex - 1)}ms`,
+      }}
+    >
+      {squares.map((_, i) => (
+        <GridItem
+          ref={(refNode) => {
+            gridItemsRefs.current[i] = refNode;
+          }}
+          key={i}
+          size={size}
+          baseColor={baseColor}
+        />
+      ))}
+    </div>
+  );
+}
+
+function _GridItem(
+  {
+    size,
+    baseColor = "#ff0",
+  }: {
+    size: number;
+    baseColor?: string;
+  },
+  externalRef: ForwardedRef<{ updateColor: () => void }>
+) {
+  const ref = useRef<HTMLDivElement>(null);
+  function calculateNewRandomColorStrength() {
+    const color = chromajs.hex(baseColor).alpha(1 - Math.random() * 0.3);
+    return color;
+  }
+  const [randomColorStrength, setRandomColorStrength] =
+    useState<chromajs.Color>(calculateNewRandomColorStrength);
+
+  useImperativeHandle(
+    externalRef,
+    () => ({
+      updateColor: () => {
+        setRandomColorStrength(calculateNewRandomColorStrength());
+      },
+    }),
+    []
+  );
+
+  return (
+    <div
+      ref={ref}
+      className={Styles.gridItem}
+      style={{
+        width: size,
+        height: size,
+        ...({ "--pixel-color": randomColorStrength.hex() } as any),
+      }}
+    />
+  );
+}
+const GridItem = forwardRef(_GridItem);

package/src/components/PixelatedScan/index.tsx

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

package/src/components/Portal/Portal.module.scss

@@ -0,0 +1,3 @@
+.portal > :not(:last-child) {
+  display: none;
+}

package/src/components/Portal/Portal.tsx

@@ -0,0 +1,68 @@
+import ReactDOM from "react-dom";
+import React, {
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  useMemo,
+} from "react";
+import { useRef } from "react";
+import { useEffect } from "react";
+import { useState } from "react";
+import Styles from "./Portal.module.scss";
+
+/**
+ * A react portal implementation with current page fallback
+ **/
+export default function Portal({
+  to,
+  children,
+}: PropsWithChildren<{ to: string }>) {
+  const [target, setTarget] = useState<Element | null>();
+
+  useEffect(() => {
+    const els = document.querySelectorAll(`[data-one-portal="${to}"]`);
+    let latestEl: any;
+    els.forEach((el: any) => {
+      latestEl =
+        Number(el.getAttribute("data-timestamp")) >
+        Number(latestEl?.timestamp || 0)
+          ? el
+          : latestEl;
+    });
+    setTarget(latestEl || null);
+  }, []);
+
+  return target === undefined ? null : (
+    <>{target === null ? children : ReactDOM.createPortal(children, target)}</>
+  );
+}
+
+function _PortalReceiver(
+  {
+    name,
+    className = "",
+    ...props
+  }: {
+    name: string;
+    className?: string;
+  } & Omit<
+    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    "ref"
+  >,
+  _ref: ForwardedRef<HTMLDivElement>
+) {
+  const timestamp = useMemo(() => Date.now(), []);
+  return (
+    <div
+      className={`${Styles.portal} ${className}`}
+      data-one-portal={name}
+      ref={_ref}
+      data-timestamp={timestamp}
+      {...props}
+    />
+  );
+}
+
+export const PortalReceiver = forwardRef(_PortalReceiver);

package/src/components/Portal/index.tsx

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

package/src/components/ProgressBar/ProgressBar.module.scss

@@ -0,0 +1,44 @@
+@use "sass:math";
+@import "../../assets/styles/index.scss";
+
+.container {
+  &.guide {
+    margin: 0.375em;
+  }
+  &.gauge {
+    margin: 0em;
+  }
+  &.sections {
+    width: 100%;
+  }
+  height: 0.25em;
+  background-color: red;
+  position: relative;
+  border-radius: math.div(0.25em, 2);
+  background: var(--progress-bar-bg, #0000);
+  > :first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: green;
+    height: inherit;
+    border-top-left-radius: math.div(0.25em, 2);
+    border-bottom-left-radius: math.div(0.25em, 2);
+    background: var(--progress-bar-bar, var(--digital-blue));
+    transition: width var(--animation-speed-transition, $fast) ease-out;
+  }
+  &.completed > :first-child {
+    border-top-right-radius: math.div(0.25em, 2);
+    border-bottom-right-radius: math.div(0.25em, 2);
+  }
+  &.guide > :last-child {
+    position: absolute;
+    margin-top: math.div(-0.5em, 1.25);
+    margin-left: -0.5em;
+    height: 1em;
+    width: 1em;
+    border-radius: 0.5em;
+    transition: left var(--animation-speed-transition, $fast) ease-out;
+    background: var(--progress-bar-guide, var(--digital-blue));
+  }
+}

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,124 @@
+import React, {
+  ComponentProps,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Styles from "./ProgressBar.module.scss";
+
+/**
+ * Shows a progress bar
+ **/
+export default function ProgressBar({
+  progress,
+  ...props
+}: {
+  /**
+   * Given in percent
+   */
+  progress: number;
+} & (
+  | {
+      /**
+       * Given as css font size
+       */
+      size: number | string;
+      mode?: "gauge" | "guide";
+    }
+  | {
+      /**
+       * Given as pixels
+       */
+      size: number;
+      mode?: "sections";
+      /** The number of sections to split */
+      sections: number;
+    }
+)) {
+  if (props.mode === "sections") {
+    const ref = useRef<SVGSVGElement>(null);
+    const strokeID = useMemo(
+      () => `stroke-${(Math.random() * 100000).toFixed(0)}`,
+      []
+    );
+    const height = props.size;
+    const [width, setWidth] = useState(0);
+    const dashWidth = width / props.sections;
+    const spacing = dashWidth * 0.2;
+    useEffect(() => {
+      setWidth(ref.current!.clientWidth);
+    }, []);
+    return (
+      <svg
+        ref={ref}
+        viewBox={`${-height / 2} 0 ${width + height - spacing} ${height}`}
+        preserveAspectRatio="none"
+        width={"100%"}
+        height={`${height}px`}
+      >
+        <defs>
+          <linearGradient
+            id={`${strokeID}`}
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="0%"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0%" stop-color="blue" />
+            <stop offset={`${progress}%`} stop-color="blue" />
+            <stop offset={`${progress}%`} stop-color="green" />
+            <stop offset="100%" stop-color="green" />
+          </linearGradient>
+        </defs>
+        <line
+          x1="0"
+          y1={height / 2}
+          x2={width}
+          y2={height / 2}
+          stroke={`url(#${strokeID})`}
+          stroke-width={height}
+          stroke-dasharray={`${dashWidth - spacing},${spacing}`}
+          stroke-linecap="round"
+        />
+      </svg>
+    );
+  }
+  const mode = props.mode || "guide";
+  const size = props.size;
+  return (
+    <div
+      className={`${Styles.container} ${Styles[mode]} ${
+        progress === 100 ? Styles.completed : ""
+      }`}
+      style={{ fontSize: size }}
+    >
+      <span style={{ width: `${progress}%` }} />
+      {mode === "guide" && <span style={{ left: `${progress}%` }} />}
+    </div>
+  );
+}
+
+export function BalancedProgressBar({
+  min,
+  max,
+  current,
+  size,
+  ...props
+}: {
+  min: number;
+  max: number;
+  current: number;
+} & Omit<ComponentProps<typeof ProgressBar>, "progress">) {
+  const progress = useMemo(() => {
+    const progressVal = current - min;
+    const maxVal = max - min;
+
+    const currProgress = (progressVal * 100) / maxVal;
+
+    return currProgress;
+  }, [min, max, current]);
+
+  return <ProgressBar size={size} progress={progress} {...props as any} />;
+}

package/src/components/ProgressBar/index.tsx

@@ -0,0 +1 @@
+export { default, BalancedProgressBar } from "./ProgressBar";

package/src/components/ProgressTexts/ProgressTexts.module.scss

@@ -0,0 +1,37 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  font-family: Manrope;
+  transition: max-height $slow;
+  overflow: hidden;
+  max-height: 0px;
+  * {
+    text-align: left;
+  }
+  button {
+    text-align: center;
+  }
+  h1 {
+    font-weight: bold;
+    font-size: 34px;
+    line-height: 41px;
+    color: $spaceBlue !important;
+  }
+  p {
+    font-family: Roboto;
+    font-size: 22px;
+    line-height: 33px;
+  }
+}
+
+.hidden {
+  max-height: 0px !important;
+}
+
+.loading * {
+  color: $spaceBlue !important;
+}
+
+.disabled * {
+  color: $mediumGray !important;
+}

package/src/components/ProgressTexts/ProgressTexts.tsx

@@ -0,0 +1,85 @@
+import React, { ComponentProps, MouseEvent, ReactElement } from "react";
+import Spacing from "../Spacing";
+import Text from "../Text";
+import Styles from "./ProgressTexts.module.scss";
+import Button from "../Button";
+
+type Step = {
+  type: "wait" | "final";
+  title?: string;
+  description?: string | React.ReactElement;
+  action?: {
+    label: string | ReactElement;
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    variant?: ComponentProps<typeof Button>["variant"];
+  };
+};
+
+/**
+ * Displays new texts as they are pushed into the steps property allowing for a nice progress follow experience
+ **/
+export default function ProgressTexts({
+  steps,
+  currentStep,
+  spacingOnEachStep = true,
+}: {
+  /**
+   * Starts at 0
+   */
+  currentStep: number;
+  steps: Step[];
+  spacingOnEachStep?: boolean;
+}) {
+  const _currentStep = steps[currentStep];
+  return (
+    <>
+      {steps.map((s, i) => {
+        function whichClassToUse(
+          step: number,
+          stepType: Step["type"],
+          currentStep: number,
+          currentStepType: Step["type"]
+        ) {
+          const classes = [Styles.container];
+
+          // Decides the color
+          if (stepType !== "final")
+            classes.push(step < currentStep ? Styles.disabled : Styles.loading);
+
+          // Decides if should be visible or not
+          classes.push(
+            currentStep !== step && currentStepType === "final"
+              ? Styles.hidden
+              : ""
+          );
+
+          return classes.join(" ");
+        }
+        return i <= currentStep ? (
+          <div
+            key={String(i)}
+            ref={(a) => {
+              if (a) a.style.maxHeight = `${a.scrollHeight}px`;
+            }}
+            className={whichClassToUse(
+              i,
+              s.type,
+              currentStep,
+              _currentStep.type
+            )}
+          >
+            {s.title && <h1>{s.title}</h1>}
+            {s.description && <p>{s.description}</p>}
+            {s.action && (
+              <Button variant={s.action.variant} onClick={s.action.onClick} disabled={s.action.disabled}>
+                {s.action.label}
+              </Button>
+            )}
+            {spacingOnEachStep !== false ? <Spacing size="large" /> : null}
+          </div>
+        ) : null;
+      })}
+    </>
+  );
+}

package/src/components/ProgressTexts/index.tsx

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

package/src/components/Radio/Radio.module.scss

@@ -0,0 +1,36 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  display: flex;
+  line-height: 1.5em;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  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.8em;
+    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.8em;
+    }
+  }
+  > span:first-child.checked {
+    background-color: $digitalBlue;
+    border: 1px solid $digitalBlue;
+    box-shadow: 0px 0px 12px -4px $digitalBlue;
+  }
+}

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,53 @@
+import React, { PropsWithChildren } from "react";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+import Styles from "./Radio.module.scss";
+
+/**
+ * A simple radio with nice guidelines
+ **/
+export default function Radio({
+  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;
+}> &
+  React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLSpanElement>,
+    HTMLSpanElement
+  >) {
+  const Checkbox = useOneUIConfig(
+    "component.radio.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="radio" name={groupId} id={value} checked={checked} readOnly/>
+      {label}
+    </label>
+  );
+}

package/src/components/Radio/index.tsx

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

package/src/components/SectionContainer/SectionContainer.module.scss

@@ -0,0 +1,30 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .content {
+    width: 100%;
+    max-width: 1200px;
+    &.decorated {
+      position: relative;
+    }
+  }
+  .decoration {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 16px;
+    height: 16px;
+    &.light {
+      background-color: white;
+    }
+    &.dark {
+      background-color: black;
+    }
+  }
+  h1 {
+    margin-bottom: 24px;
+  }
+}