@onepercentio/one-ui 0.29.4 → 0.29.5

package/src/components/LavaLamp/LavaLamp.tsx

@@ -1,131 +0,0 @@
-import React, { PropsWithChildren, useMemo, useRef } from "react";
-import useLavaLampSetup from "./LavaLamp.data";
-import Styles from "./LavaLamp.module.scss";
-
-type LavaLampProps = {
-  /**
-   * Required for defining the dimensions the lava lamp should have
-   */
-  className: string;
-};
-
-/**
- * A peaceful component simulating an interactive lavalamp
- **/
-export default function LavaLamp({
-  className,
-  children,
-}: PropsWithChildren<LavaLampProps>) {
-  const circleRef = useRef<SVGCircleElement>(null);
-
-  const { relativeTo, d, circlesConfig } = useLavaLampSetup(
-    (cx, cy) => {
-      const style: any = circleRef.current!.style;
-      style.cx = cx;
-      style.cy = cy;
-    },
-    (size) => {
-      const style: any = circleRef.current!.style;
-      style.r = size;
-    }
-  );
-
-  const randomCircles = useMemo(() => {
-    return circlesConfig.map(
-      ({ baseSize, startX, startY, translateX, translateY }) => (
-        <circle
-          r={baseSize + Math.random() * (baseSize / 2)}
-          fill="#fff"
-          cx={startX}
-          cy={startY}
-        >
-          <animateTransform
-            additive="sum"
-            attributeName="transform"
-            attributeType="XML"
-            type="translate"
-            values={`0 0; ${translateX} ${translateY}; 0 0;`}
-            dur={`${5 + Math.random() * 5}s`}
-            repeatCount="indefinite"
-          />
-        </circle>
-      )
-    );
-  }, [circlesConfig]);
-
-  return (
-    <div ref={relativeTo} className={`${Styles.root} ${className}`}>
-      {d && (
-        <svg className={Styles.effect} viewBox={`0 0 ${d.width} ${d.height}`}>
-          <filter
-            id={`goo-lava-lamp`}
-            width="10"
-            height="10"
-            x="0%"
-            y="0%"
-            filterRes="1"
-          >
-            <feGaussianBlur
-              in="SourceGraphic"
-              result="blur"
-              stdDeviation="40"
-            />
-            <feColorMatrix
-              in="blur"
-              mode="matrix"
-              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -7"
-              result="goo"
-            />
-          </filter>
-          <mask id={`mask-lava-lamp`}>
-            <g filter={`url(#${`goo-lava-lamp`})`} fill="#fff">
-              {randomCircles}
-              <circle ref={circleRef} fill="#fff" />
-            </g>
-          </mask>
-          <defs>
-            <radialGradient
-              id="grad1"
-              cx="50%"
-              cy="50%"
-              r="50%"
-              fx="50%"
-              fy="50%"
-            >
-              <stop
-                offset="0%"
-                style={{
-                  stopColor: "var(--lava-lamp-color-a)",
-                  stopOpacity: 1,
-                }}
-              />
-              <stop
-                offset="67.33%"
-                style={{
-                  stopColor: "var(--lava-lamp-color-b)",
-                  stopOpacity: 1,
-                }}
-              />
-              <stop
-                offset="88.33%"
-                style={{
-                  stopColor: "var(--lava-lamp-color-c)",
-                  stopOpacity: 1,
-                }}
-              />
-            </radialGradient>
-          </defs>
-          <rect
-            x="-50%"
-            y="-50%"
-            mask={`url(#${`mask-lava-lamp`})`}
-            width="200%"
-            height="200%"
-            style={{ fill: "url(#grad1)" }}
-          ></rect>
-        </svg>
-      )}
-      <div>{children}</div>
-    </div>
-  );
-}

package/src/components/LavaLamp/index.tsx

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

package/src/components/LavaLamp/v2/LavaLamp.module.scss

@@ -1,23 +0,0 @@
-@use 'sass:math';
-
-$transitionMs: math.div(1000, 5);
-$transitionPositionMs: math.div($transitionMs, 2);
-@value transitionMs #{$transitionMs};
-@value transitionPositionMs #{$transitionPositionMs};
-
-.root {
-  position: relative;
-  > canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-  }
-  > div {
-    position: relative;
-    z-index: 1;
-  }
-}

package/src/components/LavaLamp/v2/LavaLamp.tsx

@@ -1,197 +0,0 @@
-import React, { PropsWithChildren, useEffect, useMemo, useRef } from "react";
-import useMergeRefs from "../../../hooks/useMergeRefs";
-import useLavaLampSetup, { transitionPositionMs } from "../LavaLamp.data";
-import Styles from "./LavaLamp.module.scss";
-import { GuideOrb, Orb, OrbDrawer } from "../../../models/Orbs";
-
-export default function LavaLamp({
-  className,
-  children,
-}: PropsWithChildren<{ className: string }>) {
-  const guideConfig = useRef<{
-    x: number;
-    y: number;
-    posTimestamp: number;
-    posIncrement: [x: number, y: number];
-
-    size: number;
-    sizeTimestamp: number;
-    sizeIncrement: number;
-  }>({
-    size: 0,
-    sizeTimestamp: Date.now(),
-    sizeIncrement: 0,
-    x: 0,
-    y: 0,
-    posTimestamp: Date.now(),
-    posIncrement: [0, 0],
-  });
-  const { relativeTo, circlesConfig, d } = useLavaLampSetup(
-    (x, y) => {
-      guideConfig.current.posIncrement = [
-        x - guideConfig.current.x,
-        y - guideConfig.current.y,
-      ];
-      guideConfig.current.x = x;
-      guideConfig.current.y = y;
-      guideConfig.current.posTimestamp = Date.now();
-    },
-    (_size) => {
-      const size = _size * 1.2;
-      guideConfig.current.sizeIncrement =
-        guideConfig.current.size === 0 ? 0 : size - guideConfig.current.size;
-      guideConfig.current.size = size;
-      guideConfig.current.sizeTimestamp = Date.now();
-    }
-  );
-  const _canvasRef = useRef<HTMLCanvasElement>(null);
-  const canvasRef = useMergeRefs(
-    _canvasRef,
-    relativeTo as unknown as typeof _canvasRef
-  );
-  useEffect(() => {
-    if (!d) return;
-    const fc = canvasRef.current!;
-
-    const baseColor =
-      getComputedStyle(relativeTo.current!).getPropertyValue(
-        "--digital-blue"
-      ) || "#000000";
-
-    var c = document.createElement("canvas"),
-      w = (c.width = fc.width = d.width),
-      h = (c.height = fc.height = d.height),
-      ctx = c.getContext("2d")!,
-      fctx = fc.getContext("2d")!, // f means final
-      opts = {
-        orbCount: circlesConfig.length,
-        baseVel: Math.max(d.width * 0.001, 1),
-        addedVel: Math.max(d.width * 0.001, 1),
-
-        alphaThreshold: 200,
-      },
-      orbs = [] as (Orb | GuideOrb)[];
-    class CanvasOrbDrawer implements OrbDrawer {
-      protected gradient?: CanvasGradient;
-
-      private newGradient(color: string, radius: number) {
-        const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
-        gradient.addColorStop(0, `${color}ff`);
-        gradient.addColorStop(0.8, `${color}cc`);
-        gradient.addColorStop(1, `${color}00`);
-
-        return gradient;
-      }
-
-      private oldDrawCircle(x: number, y: number, radius: number) {
-        ctx.fillStyle = this.gradient ?? this.newGradient(baseColor, radius);
-        ctx.translate(x | 0, y | 0);
-        ctx.beginPath();
-        ctx.arc(0, 0, radius, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.translate(-x | 0, -y | 0);
-      }
-      drawOrb(x: number, y: number, radius: number) {
-        this.oldDrawCircle(x, y, radius);
-      }
-
-      constructor(gradientRadius?: number) {
-        if (gradientRadius)
-          this.gradient = this.newGradient(baseColor, gradientRadius);
-      }
-    }
-
-    let animFrame: number;
-    function anim() {
-      animFrame = window.requestAnimationFrame(anim);
-
-      ctx.clearRect(0, 0, w, h);
-      fctx.fillStyle = "#0000";
-      fctx.fillRect(0, 0, w, h);
-
-      for (var i = 0; i < orbs.length; i++) {
-        const thisOrb = orbs[i];
-        if (thisOrb instanceof Orb) {
-          thisOrb.step();
-        } else {
-          thisOrb.step(
-            guideConfig.current!.size,
-            guideConfig.current!.sizeIncrement,
-            guideConfig.current!.sizeTimestamp,
-            guideConfig.current.posTimestamp,
-            guideConfig.current!,
-            {
-              x: guideConfig.current!.posIncrement[0],
-              y: guideConfig.current!.posIncrement[1],
-            }
-          );
-        }
-      }
-
-      var image = ctx.getImageData(0, 0, w, h),
-        data = new Uint8Array(image.data.buffer);
-
-      for (var i = 3; i < data.length; i += 4)
-        data[i] /= data[i] < opts.alphaThreshold ? 6 : 1;
-
-      fctx.putImageData(image, 0, 0);
-    }
-
-    function randomVelocity() {
-      return (opts.baseVel + opts.addedVel * Math.random()) | 0;
-    }
-    const orbBounds = { width: w, height: h };
-
-    for (let circleConfig of circlesConfig) {
-      const radius = circleConfig.baseSize * 1.5;
-      const randomRadius = (radius + (radius / 2) * Math.random()) | 0;
-      const drawerInstance = new CanvasOrbDrawer(randomRadius);
-      orbs.push(
-        new Orb(drawerInstance, randomVelocity(), orbBounds, randomRadius)
-      );
-    }
-    const guideOrbInstance = new GuideOrb(
-      new CanvasOrbDrawer(),
-      transitionPositionMs
-    );
-    let guideOrbAutoInstance: Orb;
-    orbs.push(guideOrbInstance);
-
-    canvasRef.current!.parentElement!.onmouseleave = () => {
-      const indexOfGuide = orbs.indexOf(guideOrbInstance);
-      if (indexOfGuide !== -1) {
-        const drawerInstance = new CanvasOrbDrawer(guideOrbInstance.lastRadius);
-        guideOrbAutoInstance = new Orb(
-          drawerInstance,
-          randomVelocity(),
-          orbBounds,
-          guideOrbInstance.lastRadius
-        );
-        guideOrbAutoInstance.radius = guideOrbInstance.lastRadius;
-        guideOrbAutoInstance.x = guideOrbInstance.lastX;
-        guideOrbAutoInstance.y = guideOrbInstance.lastY;
-        orbs.splice(indexOfGuide, 1);
-        orbs.push(guideOrbAutoInstance);
-      }
-    };
-    canvasRef.current!.parentElement!.onmouseenter = () => {
-      if (orbs.indexOf(guideOrbInstance) === -1) {
-        orbs.push(guideOrbInstance);
-        orbs.splice(orbs.indexOf(guideOrbAutoInstance), 1);
-      }
-    };
-
-    anim();
-
-    return () => {
-      window.cancelAnimationFrame(animFrame);
-    };
-  }, [circlesConfig]);
-
-  return (
-    <div className={`${className} ${Styles.root}`}>
-      <canvas ref={canvasRef} />
-      <div>{children}</div>
-    </div>
-  );
-}

package/src/components/LinkToId/LinkToId.module.scss

@@ -1,4 +0,0 @@
-.root:hover {
-    text-decoration: underline;
-    cursor: pointer;
-}

package/src/components/LinkToId/LinkToId.tsx

@@ -1,51 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import Styles from "./LinkToId.module.scss";
-
-export function scrollToId(
-  id: OnepercentUtility.PageSections,
-  shouldScrollToCenter: boolean = false
-) {
-  const el = document.getElementById(id);
-
-  if (el) {
-    const elStyles = window.getComputedStyle(el);
-    const padding = Number(elStyles.paddingTop.replace(/[^0-9]+/g, ""));
-    const elementPosition = el.offsetTop;
-    const elementHeight = el.clientHeight;
-
-    window.scrollTo({
-      behavior: "smooth",
-      //Go to element, scroll half the screen height scrollback half the element height
-      top: shouldScrollToCenter
-        ? elementPosition + elementHeight / 2 - window.innerHeight / 2
-        : elementPosition + padding,
-    });
-  }
-}
-
-/**
- * This component creates an iteractive element and on click, routes to the specified id
- **/
-export default function LinkToId({
-  children,
-  id,
-  link,
-  scrollToCenter = false,
-}: PropsWithChildren<{
-  id?: OnepercentUtility.PageSections;
-  link?: string;
-  scrollToCenter?: boolean;
-}>) {
-  return link ? (
-    <span className={Styles.root} onClick={() => window.open(link, "_blank")}>
-      {children}
-    </span>
-  ) : (
-    <span
-      className={Styles.root}
-      onClick={() => scrollToId(id!, scrollToCenter)}
-    >
-      {children}
-    </span>
-  );
-}

package/src/components/LinkToId/index.tsx

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

package/src/components/Loader/Loader.module.scss

@@ -1,40 +0,0 @@
-@import "../../assets/styles/variables.scss";
-
-.indicator {
-  white-space: nowrap;
-  font-size: 14px;
-  & span {
-    display: inline-block;
-    width: 0.75em;
-    height: 0.75em;
-    border-radius: 0.375em;
-    margin-left: 4px;
-    background-color: var(--loader--indicator-bg, $digitalBlue);
-    animation-name: transparentToOpaque;
-    animation-duration: $normal;
-    animation-iteration-count: infinite;
-    animation-timing-function: ease-out;
-    &:nth-child(1) {
-      margin-left: initial;
-      animation-delay: 0;
-    }
-    &:nth-child(2) {
-      animation-delay: $veryFast;
-    }
-    &:nth-child(3) {
-      animation-delay: $fast;
-    }
-  }
-}
-
-@keyframes transparentToOpaque {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}

package/src/components/Loader/Loader.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import Styles from "./Loader.module.scss";
-
-/**
- * A simple loader
- **/
-export default function Loader({
-  className = "",
-  ...props
-}: { className?: string } & React.HTMLProps<HTMLDivElement>) {
-  return (
-    <span className={`${Styles.indicator} ${className}`} {...props}>
-      <span />
-      <span />
-      <span />
-    </span>
-  );
-}

package/src/components/Loader/index.tsx

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

package/src/components/LoaderDotsIndicator/LoaderDotsIndicator.tsx

@@ -1,34 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-/**
- * . .. ... . .. ...
- **/
-export default function LoaderDotsIndicator({
-  dotsCount = 3,
-  lockSize = false,
-}: {
-  dotsCount?: number;
-  /** Makes the dots so that they do not affect layout size */
-  lockSize?: boolean;
-}) {
-  const [text, setText] = useState(".");
-  useEffect(() => {
-    const fullText = new Array(dotsCount).fill(".").join("");
-    const intervalId = setInterval(() => {
-      setText((a) => (a === fullText ? "." : a + "."));
-    }, 250);
-
-    return () => clearInterval(intervalId);
-  }, [dotsCount]);
-
-  return (
-    <>
-      {text}
-      {lockSize && (
-        <span style={{ color: "#0000" }}>
-          {new Array(dotsCount - text.length).fill(".")}
-        </span>
-      )}
-    </>
-  );
-}

package/src/components/LoaderDotsIndicator/index.tsx

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

package/src/components/LoopableVideo/LoopableVideo.tsx

@@ -1,37 +0,0 @@
-import React, {
-  DetailedHTMLProps,
-  HTMLAttributes,
-  useLayoutEffect,
-  useRef,
-} from "react";
-
-/**
- * Plays a video and loops between the end and the timestamp you set
- **/
-export default function LoopableVideo({
-  videoSrc,
-  percentToBackTo,
-  ...props
-}: {
-  videoSrc: string;
-  /** A value between 0-1 indicating the timestamp to go back to */
-  percentToBackTo: number;
-} & DetailedHTMLProps<HTMLAttributes<HTMLVideoElement>, HTMLVideoElement>) {
-  if (process.env.NODE_ENV === "development")
-    if (percentToBackTo < 0 || percentToBackTo > 1)
-      throw new Error(`percentToBackTo should be a value between 0-1`);
-  return (
-    <video
-      autoPlay
-      muted
-      onEnded={({ currentTarget }) => {
-        const el = currentTarget as Omit<HTMLVideoElement, keyof HTMLElement>;
-        el.currentTime = el.duration * percentToBackTo;
-        el.play();
-      }}
-      {...props}
-    >
-      <source src={videoSrc} />
-    </video>
-  );
-}

package/src/components/LoopableVideo/index.tsx

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

package/src/components/MainGrid/MainGrid.module.scss

@@ -1,28 +0,0 @@
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-
-  // TODO: Priorize reducing width of empty elements insteas of the main container
-  > :nth-child(1),
-  > :nth-child(3) {
-    flex: 1;
-    max-width: 250px;
-    min-width: 150px;
-  }
-
-  .content {
-    min-width: 250px;
-  }
-
-  > :nth-child(2) {
-    flex: 1;
-    max-width: 1200px;
-  }
-}
-
-.section {
-  align-items: flex-start;
-  min-height: initial;
-}

package/src/components/MainGrid/MainGrid.tsx

@@ -1,68 +0,0 @@
-import React, {
-  ElementRef,
-  ForwardedRef,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-} from "react";
-import UncontrolledTransition from "../UncontrolledTransition";
-import Styles from "./MainGrid.module.scss";
-
-function _MainGrid(
-  {
-    children,
-    leftContent,
-    rightContent,
-  }: {
-    leftContent?: React.ReactElement;
-    rightContent?: React.ReactElement;
-    children: React.ReactElement;
-  },
-  ref: ForwardedRef<
-    Pick<ElementRef<typeof UncontrolledTransition>, "setOrientation">
-  >
-) {
-  const refs = [
-    useRef<ElementRef<typeof UncontrolledTransition>>(null),
-    useRef<ElementRef<typeof UncontrolledTransition>>(null),
-    useRef<ElementRef<typeof UncontrolledTransition>>(null),
-  ];
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      setOrientation: (orientation) => {
-        refs.forEach((r) => r.current?.setOrientation(orientation));
-      },
-    }),
-    []
-  );
-
-  return (
-    <>
-      <div className={Styles.container}>
-        <div className={leftContent ? Styles.content : ""}>
-          <UncontrolledTransition className={Styles.section} ref={refs[0]}>
-            {leftContent}
-          </UncontrolledTransition>
-        </div>
-        <div>
-          <UncontrolledTransition className={Styles.section} ref={refs[1]}>
-            {children}
-          </UncontrolledTransition>
-        </div>
-        <div className={rightContent ? Styles.content : ""}>
-          <UncontrolledTransition className={Styles.section} ref={refs[2]}>
-            {rightContent}
-          </UncontrolledTransition>
-        </div>
-      </div>
-    </>
-  );
-}
-
-/**
- * This layout divides the screen in 3 fragments and provides a responsive adaptation when on mobile
- **/
-const MainGrid = forwardRef(_MainGrid);
-export default MainGrid;

package/src/components/MainGrid/index.tsx

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