@onepercentio/one-ui 0.28.8 → 0.28.9

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

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

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

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

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

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

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

package/src/components/PingPongText/PingPongText.tsx

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

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

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

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