@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/Parallax/math/helpers.ts

@@ -1,289 +0,0 @@
-export type Matrix3D = [
-  [number, number, number, number],
-  [number, number, number, number],
-  [number, number, number, number],
-  [number, number, number, number]
-];
-export type OperationData =
-  | {
-      type: "rotateX" | "rotateY" | "rotateZ";
-      angle: number;
-    }
-  | {
-      type: "translate";
-      x: number;
-      y: number;
-      z: number;
-    }
-  | {
-      type: "scale";
-      factorX: number;
-      factorY: number;
-      factorZ: number;
-    }
-  | {
-      type: "perspective";
-      fieldOfViewInRadians: number;
-      aspect: number;
-      near: number;
-      far: number;
-    }
-  | {
-      type: "matrix";
-      matrix: Matrix3D;
-    };
-export function IDENTITY_MATRIX() {
-  return [
-    [1, 0, 0, 0], // cos, -sin, ?
-    [0, 1, 0, 0], // sin, cos, ?
-    [0, 0, 1, 0], // TranslationX, TranslationY, ?
-    [0, 0, 0, 1],
-  ] as Matrix3D;
-}
-export function generateMatrixFromOperations(
-  ...operations: OperationData[]
-): Matrix3D {
-  let resultingMatrix: Matrix3D | undefined = undefined;
-  for (let operation of operations) {
-    const matrix =
-      operation.type === "matrix" ? operation.matrix : IDENTITY_MATRIX();
-    switch (operation.type) {
-      case "perspective":
-        const f = Math.tan(
-          Math.PI * 0.5 - 0.5 * operation.fieldOfViewInRadians
-        );
-        const rangeInv = 1.0 / (operation.near - operation.far);
-
-        matrix[0][0] = f / operation.aspect;
-        matrix[1][1] = f;
-        matrix[2][2] = (operation.near + operation.far) * rangeInv;
-        matrix[2][3] = -1;
-        matrix[3][2] = operation.near * operation.far * rangeInv * 2;
-        matrix[3][3] = 0;
-        break;
-      case "translate":
-        matrix[3][0] = operation.x;
-        matrix[3][1] = operation.y;
-        matrix[3][2] = operation.z;
-        break;
-      case "rotateX":
-      case "rotateY":
-      case "rotateZ":
-        const angleToRadians = (operation.angle * Math.PI) / 180;
-        const sinAngle = Math.sin(angleToRadians);
-        const cosAngle = Math.cos(angleToRadians);
-        switch (operation.type) {
-          case "rotateZ":
-            matrix[0][0] = cosAngle;
-            matrix[1][1] = cosAngle;
-            matrix[1][0] = -sinAngle;
-            matrix[0][1] = sinAngle;
-            break;
-          case "rotateY":
-            matrix[0][0] = cosAngle;
-            matrix[2][2] = cosAngle;
-            matrix[0][2] = -sinAngle;
-            matrix[2][0] = sinAngle;
-            break;
-          case "rotateX":
-            matrix[1][1] = cosAngle;
-            matrix[2][2] = cosAngle;
-            matrix[2][1] = -sinAngle;
-            matrix[1][2] = sinAngle;
-            break;
-        }
-        break;
-      case "scale":
-        matrix[0][0] = operation.factorX;
-        matrix[1][1] = operation.factorY;
-        matrix[2][2] = operation.factorZ;
-        break;
-    }
-    if (resultingMatrix) {
-      resultingMatrix = multiplyMatrixes(resultingMatrix, matrix) as Matrix3D;
-    } else {
-      resultingMatrix = matrix;
-    }
-  }
-
-  return resultingMatrix || IDENTITY_MATRIX();
-}
-
-type NumberMatrix = readonly (readonly number[])[];
-export function multiplyMatrixes<X extends NumberMatrix>(
-  matrix1: X,
-  matrix2: NumberMatrix & { length: X[number]["length"] }
-) {
-  const resultingMatrix: number[][] = [];
-  if (
-    process.env.NODE_ENV === "development" &&
-    matrix2.length !== matrix1[0].length
-  ) {
-    throw new Error(`For the multiplication of matrixes to work you need to provide the matrix1 containing the amount of columns as the same amount of rows from matrix 2.
-You provided ${matrix1[0].length} columns and ${matrix2.length} rows`);
-  }
-  for (let i0 in matrix1) {
-    for (let i in matrix2[0]) {
-      let dimensionResult = 0;
-      for (let i2 in matrix1[0]) {
-        dimensionResult += matrix1[i0][i2] * matrix2[i2][i];
-      }
-      if (!resultingMatrix[i0]) resultingMatrix[i0] = [];
-      resultingMatrix[i0][i] = dimensionResult;
-    }
-  }
-  return resultingMatrix;
-}
-
-export function invertMatrix(matrix: Matrix3D) {
-  const m = flattenMatrix(matrix);
-  let det: number = 0;
-  const inv = [];
-
-  inv[0] =
-    m[5] * m[10] * m[15] -
-    m[5] * m[11] * m[14] -
-    m[9] * m[6] * m[15] +
-    m[9] * m[7] * m[14] +
-    m[13] * m[6] * m[11] -
-    m[13] * m[7] * m[10];
-
-  inv[4] =
-    -m[4] * m[10] * m[15] +
-    m[4] * m[11] * m[14] +
-    m[8] * m[6] * m[15] -
-    m[8] * m[7] * m[14] -
-    m[12] * m[6] * m[11] +
-    m[12] * m[7] * m[10];
-
-  inv[8] =
-    m[4] * m[9] * m[15] -
-    m[4] * m[11] * m[13] -
-    m[8] * m[5] * m[15] +
-    m[8] * m[7] * m[13] +
-    m[12] * m[5] * m[11] -
-    m[12] * m[7] * m[9];
-
-  inv[12] =
-    -m[4] * m[9] * m[14] +
-    m[4] * m[10] * m[13] +
-    m[8] * m[5] * m[14] -
-    m[8] * m[6] * m[13] -
-    m[12] * m[5] * m[10] +
-    m[12] * m[6] * m[9];
-
-  inv[1] =
-    -m[1] * m[10] * m[15] +
-    m[1] * m[11] * m[14] +
-    m[9] * m[2] * m[15] -
-    m[9] * m[3] * m[14] -
-    m[13] * m[2] * m[11] +
-    m[13] * m[3] * m[10];
-
-  inv[5] =
-    m[0] * m[10] * m[15] -
-    m[0] * m[11] * m[14] -
-    m[8] * m[2] * m[15] +
-    m[8] * m[3] * m[14] +
-    m[12] * m[2] * m[11] -
-    m[12] * m[3] * m[10];
-
-  inv[9] =
-    -m[0] * m[9] * m[15] +
-    m[0] * m[11] * m[13] +
-    m[8] * m[1] * m[15] -
-    m[8] * m[3] * m[13] -
-    m[12] * m[1] * m[11] +
-    m[12] * m[3] * m[9];
-
-  inv[13] =
-    m[0] * m[9] * m[14] -
-    m[0] * m[10] * m[13] -
-    m[8] * m[1] * m[14] +
-    m[8] * m[2] * m[13] +
-    m[12] * m[1] * m[10] -
-    m[12] * m[2] * m[9];
-
-  inv[2] =
-    m[1] * m[6] * m[15] -
-    m[1] * m[7] * m[14] -
-    m[5] * m[2] * m[15] +
-    m[5] * m[3] * m[14] +
-    m[13] * m[2] * m[7] -
-    m[13] * m[3] * m[6];
-
-  inv[6] =
-    -m[0] * m[6] * m[15] +
-    m[0] * m[7] * m[14] +
-    m[4] * m[2] * m[15] -
-    m[4] * m[3] * m[14] -
-    m[12] * m[2] * m[7] +
-    m[12] * m[3] * m[6];
-
-  inv[10] =
-    m[0] * m[5] * m[15] -
-    m[0] * m[7] * m[13] -
-    m[4] * m[1] * m[15] +
-    m[4] * m[3] * m[13] +
-    m[12] * m[1] * m[7] -
-    m[12] * m[3] * m[5];
-
-  inv[14] =
-    -m[0] * m[5] * m[14] +
-    m[0] * m[6] * m[13] +
-    m[4] * m[1] * m[14] -
-    m[4] * m[2] * m[13] -
-    m[12] * m[1] * m[6] +
-    m[12] * m[2] * m[5];
-
-  inv[3] =
-    -m[1] * m[6] * m[11] +
-    m[1] * m[7] * m[10] +
-    m[5] * m[2] * m[11] -
-    m[5] * m[3] * m[10] -
-    m[9] * m[2] * m[7] +
-    m[9] * m[3] * m[6];
-
-  inv[7] =
-    m[0] * m[6] * m[11] -
-    m[0] * m[7] * m[10] -
-    m[4] * m[2] * m[11] +
-    m[4] * m[3] * m[10] +
-    m[8] * m[2] * m[7] -
-    m[8] * m[3] * m[6];
-
-  inv[11] =
-    -m[0] * m[5] * m[11] +
-    m[0] * m[7] * m[9] +
-    m[4] * m[1] * m[11] -
-    m[4] * m[3] * m[9] -
-    m[8] * m[1] * m[7] +
-    m[8] * m[3] * m[5];
-
-  inv[15] =
-    m[0] * m[5] * m[10] -
-    m[0] * m[6] * m[9] -
-    m[4] * m[1] * m[10] +
-    m[4] * m[2] * m[9] +
-    m[8] * m[1] * m[6] -
-    m[8] * m[2] * m[5];
-
-  det = m[0] * inv[0] + m[1] * inv[4] + m[2] * inv[8] + m[3] * inv[12];
-
-  if (det === 0)
-    throw new Error(
-      "Determinator is equal to 0. This matrix cannot be inverted"
-    );
-
-  det = 1.0 / det;
-
-  return inv.reduce((r, val, i) => {
-    const row = Math.floor(i / 4);
-    if (!r[row]) r[row] = [];
-    r[row][i % 4] = val * det;
-    return r;
-  }, [] as number[][]) as Matrix3D;
-}
-export function flattenMatrix(matrix: number[][]) {
-  return matrix.reduce((f, dimension) => [...f, ...dimension], [] as number[]);
-}

package/src/components/PasswordInput/PasswordInput.module.scss

@@ -1,17 +0,0 @@
-.inputContainer {
-  &.creation {
-    padding-bottom: 54px;
-  }
-  position: relative;
-
-  .rules {
-    position: absolute;
-    bottom: 0px;
-  }
-
-  &.icon > :first-child > :last-child {
-    top: initial;
-    align-self: center;
-    margin-top: -18px;
-  }
-}

package/src/components/PasswordInput/PasswordInput.tsx

@@ -1,154 +0,0 @@
-import React, {
-  ChangeEvent,
-  ForwardedRef,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-} from "react";
-import { useOneUIConfig } from "../../context/OneUIProvider";
-import Input from "../Input";
-import Text from "../Text";
-import Styles from "./PasswordInput.module.scss";
-
-export type AVAILABLE_PASSWORD_VALIDATION_RULES = "size" | "duplication";
-
-const BASE_VALIDATION = [
-  { code: "size", validate: (pass: string) => pass.length >= 8 },
-] as const;
-const RULES = [
-  {
-    code: "duplication",
-    validate: (pass: string) => {
-      for (let i = 0; i < pass.length; i++) {
-        const charCode = pass.charCodeAt(i);
-        const [firstNext, secondNext] = [
-          pass.charCodeAt(i + 1) || 0,
-          pass.charCodeAt(i + 2) || 0,
-        ];
-
-        if (firstNext - charCode === 1 && secondNext - firstNext === 1) {
-          return false;
-        }
-      }
-      return true;
-    },
-  },
-  ...BASE_VALIDATION,
-] as const;
-
-function _PasswordInput(
-  props: ({
-    value: string;
-    error?: string;
-  } & (
-    | {
-        mode: "input";
-        onChange: (password: string) => void;
-      }
-    | {
-        mode: "creation";
-        onChange: (password: string, isValid: boolean) => void;
-        messages: {
-          invalidRules: { [r in AVAILABLE_PASSWORD_VALIDATION_RULES]: string };
-          rulesTitle: string;
-        };
-      }
-    | {
-        mode: "comparision";
-        otherPassword: string;
-        onChange: (password: string, isEqual: boolean) => void;
-        messages: {
-          passwordsAreDifferent: string;
-        };
-      }
-  )) &
-    Omit<React.ComponentProps<typeof Input>, "value" | "onChange" | "ref">,
-  ref: ForwardedRef<{ validatePassword: (pass: string) => boolean }>
-) {
-  const [isPasswordVisibile, setIPV] = useState(false);
-  const { passwordHidden, passwordVisible } = useOneUIConfig(
-    "component.passwordInput.iconSrc"
-  );
-  function _validatePassword(password: string) {
-    switch (props.mode) {
-      case "creation":
-        return RULES.reduce(
-          (isValid, R) => isValid && R.validate(password),
-          true as boolean
-        );
-      case "comparision":
-        return password === props.otherPassword;
-      case "input":
-        return BASE_VALIDATION.reduce(
-          (isValid, R) => isValid && R.validate(password),
-          true as boolean
-        );
-    }
-  }
-
-  useImperativeHandle(ref, () => ({
-    validatePassword: (pass) => _validatePassword(pass),
-  }));
-
-  function _onChange(e: ChangeEvent<HTMLInputElement>) {
-    const password = e.target.value;
-    switch (props.mode) {
-      case "comparision":
-      case "creation":
-        props.onChange(password, _validatePassword(password));
-        break;
-      case "input":
-        props.onChange(password);
-        break;
-    }
-  }
-
-  return (
-    <div
-      className={`${Styles.inputContainer} ${Styles[props.mode]} ${
-        Styles.icon
-      }`}
-    >
-      <Input
-        value={props.value}
-        onChange={_onChange}
-        type={!isPasswordVisibile ? "password" : ""}
-        icon={{
-          src: isPasswordVisibile ? passwordHidden : passwordVisible,
-          onMouseLeave: () => setIPV(false),
-          onMouseDown: () => setIPV(true),
-          onMouseUp: () => setIPV(false),
-          onTouchMove: () => setIPV(false),
-          onTouchStart: () => setIPV(true),
-          onTouchEnd: () => setIPV(false),
-        }}
-        error={
-          props.mode === "comparision" && !_validatePassword(props.value)
-            ? props.messages.passwordsAreDifferent
-            : props.error
-        }
-        disabled={props.disabled}
-        placeholder={props.placeholder}
-      />
-      {props.mode === "creation" && (
-        <div className={Styles.rules} data-testid="password-rules">
-          <Text type="caption">{props.messages.rulesTitle}</Text>
-          {RULES.map((R) => (
-            <Text
-              key={R.code}
-              type={R.validate(props.value) ? "caption" : "error"}
-            >
-              - {props.messages.invalidRules[R.code]}
-            </Text>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * A Input based wrapper to handle inputing of password
- **/
-const PasswordInput = forwardRef(_PasswordInput);
-export default PasswordInput;

package/src/components/PasswordInput/index.tsx

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

package/src/components/PingPongText/PingPongText.module.scss

@@ -1,4 +0,0 @@
-.pingPong {
-    width: 100%;
-    overflow: hidden;
-}

package/src/components/PingPongText/PingPongText.tsx

@@ -1,83 +0,0 @@
-import React, {
-  ComponentProps,
-  PropsWithChildren,
-  useEffect,
-  useRef,
-} from "react";
-import Text from "../Text/Text";
-import Styles from "./PingPongText.module.scss";
-import useMouseHover from "../../hooks/ui/useMouseHover";
-
-const HOW_MUCH_PIXELS_TO_SCROLL_PER_SECOND = 50;
-const RIGHT_TEXT_MULTIPLIER = 5;
-
-/**
- * A component that keeps an overflow piece of text visible by continously scrolling it back and forward
- **/
-export default function PingPongText({
-  ...props
-}: ComponentProps<typeof Text>) {
-  const textRef = useRef<HTMLParagraphElement>(null);
-  const { uiEvents, hovering } = useMouseHover();
-
-  useEffect(() => {
-    if (!hovering) {
-      let scrollingInterval: NodeJS.Timeout;
-      let scrollStartTimeout: NodeJS.Timeout;
-      scrollStartTimeout = setTimeout(() => {
-        const textEl = textRef.current;
-        if (!textEl) return;
-        const overflowWidth = textEl.scrollWidth;
-        const viewWidth = textEl.clientWidth;
-        const secondsPerFrame = 1000 / 60;
-        const howMuchToMove =
-          (secondsPerFrame * HOW_MUCH_PIXELS_TO_SCROLL_PER_SECOND) / 1000;
-
-        if (overflowWidth > viewWidth) {
-          scrollingInterval = scrollText();
-          function scrollText(direction: "l" | "r" = "r") {
-            return setInterval(() => {
-              const reachedEnd =
-                direction === "r"
-                  ? textEl!.scrollLeft >= overflowWidth - viewWidth
-                  : textEl!.scrollLeft === 0;
-              if (reachedEnd) {
-                clearInterval(scrollingInterval);
-                scrollStartTimeout = setTimeout(
-                  () => {
-                    scrollingInterval = scrollText(
-                      direction === "r" ? "l" : "r"
-                    );
-                  },
-                  direction === "r" ? 2000 : 1000
-                );
-              } else {
-                if (direction === "r")
-                  textEl!.scrollTo(textEl!.scrollLeft + howMuchToMove, 0);
-                else {
-                  textEl!.scrollTo(
-                    textEl!.scrollLeft - howMuchToMove * RIGHT_TEXT_MULTIPLIER,
-                    0
-                  );
-                }
-              }
-            }, secondsPerFrame);
-          }
-        }
-      }, 1000);
-      return () => {
-        clearTimeout(scrollStartTimeout);
-        clearInterval(scrollingInterval);
-      };
-    }
-  }, [hovering]);
-
-  return (
-    <Text
-      ref={textRef}
-      {...(uiEvents as any)}
-      {...props}
-      className={`${Styles.pingPong} ${props.className || ""}`}
-    />
-  );
-}

package/src/components/PingPongText/index.tsx

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

package/src/components/PixelatedScan/PixelatedScan.module.scss

@@ -1,86 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-$animationDurationMs: 2000;
-
-@value animationDuration #{$animationDurationMs};
-
-$animationDuration: #{$animationDurationMs}ms;
-
-.guide {
-  width: 100%;
-  position: absolute;
-  animation-duration: $animationDuration;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  animation-fill-mode: forwards;
-  animation-timing-function: linear;
-  min-height: 10px;
-  top: 0;
-  &::after {
-    content: " ";
-    width: 100%;
-    height: 10px;
-    background: $pixelatedGuideBackground;
-  }
-}
-
-.grid {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  bottom: 0px;
-  overflow: hidden;
-  > * {
-    display: flex;
-    opacity: 0;
-    &.guide {
-      opacity: 1;
-    }
-  }
-  &.inverse {
-    transform: rotateX(180deg);
-  }
-}
-
-.gridItem {
-  background-color: var(--pixel-color);
-}
-
-.gridAnimate {
-  animation-duration: #{$animationDurationMs}ms;
-}
-
-.iterate {
-  .guide {
-    animation-name: upAndDown;
-  }
-  .gridAnimate {
-    animation-name: onAndOff;
-    will-change: opacity;
-  }
-}
-
-@keyframes onAndOff {
-  0% {
-    opacity: 0;
-  }
-
-  10% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes upAndDown {
-  0% {
-    height: 0%;
-  }
-  100% {
-    height: 100%;
-  }
-}