@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/PixelatedScan/PixelatedScan.tsx

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

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

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

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

package/src/components/Portal/Portal.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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