@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/components/LavaLamp/LavaLamp.tsx

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

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

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

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

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

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

package/src/components/LinkToId/LinkToId.tsx

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

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

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

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

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

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

package/src/components/LoaderDotsIndicator/LoaderDotsIndicator.tsx

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

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

package/src/components/LoopableVideo/LoopableVideo.tsx

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

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

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

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

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

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