@onepercentio/one-ui 0.28.8 → 0.28.9

package/src/components/InfinityScroll/InfinityScroll.tsx

@@ -0,0 +1,187 @@
+import React, {
+  createRef,
+  ForwardedRef,
+  forwardRef,
+  MutableRefObject,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Styles from "./InfinityScroll.module.scss";
+
+export function shouldIncrementPage(
+  howMuchTheParentScrolled: number,
+  prevSectionPosition: number,
+  nextSectionPosition: number
+): -1 | 0 | 1 {
+  if (howMuchTheParentScrolled === nextSectionPosition) return 1;
+  else if (howMuchTheParentScrolled === prevSectionPosition) return -1;
+  else return 0;
+}
+
+export function keys(currPage: number) {
+  return [currPage % 3, (currPage + 1) % 3, (currPage + 2) % 3]
+    .map((a) => `step_${a}`)
+    .reverse();
+}
+
+export function getItemsFactory<T extends any>(
+  pageSize: number,
+  items: T[],
+  isCountTheSameOrLowerThanPage: boolean
+) {
+  return function getItems(
+    page: number,
+    offset: number,
+    _pageSize: number = pageSize
+  ) {
+    let from = page * _pageSize + offset;
+    if (from < 0) from = items.length + from;
+    if (from > items.length) from = from - items.length;
+    const to = from + _pageSize;
+    const slicedItems = items.slice(from, to);
+
+    if (slicedItems.length < _pageSize && !isCountTheSameOrLowerThanPage) {
+      slicedItems.push(...getItems(0, 0, _pageSize - slicedItems.length));
+    }
+    return slicedItems.map((i, index) =>
+      typeof i === "object"
+        ? {
+            ...i,
+            key: index,
+          }
+        : i
+    );
+  };
+}
+function _InfinityScroll(
+  {
+    items,
+    pageSize,
+    initialPage = 0,
+    pageClass,
+    className = "",
+  }: {
+    items: (React.ReactElement | string)[];
+    pageSize: number;
+    initialPage?: number;
+    pageClass?: string;
+    className?: string;
+  },
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const [currPage, setCurrPage] = useState({
+    page: initialPage,
+    offset: 0,
+  });
+  const parentDiv = useMemo(() => {
+    return (ref as MutableRefObject<HTMLDivElement | null>) || createRef();
+  }, [ref]);
+  const prevDiv = useRef<HTMLDivElement>(null);
+  const currDiv = useRef<HTMLDivElement>(null);
+  const nextDiv = useRef<HTMLDivElement>(null);
+
+  const isCountTheSameOrLowerThanPage = items.length <= pageSize;
+
+  const getItems = useMemo(
+    () => getItemsFactory(pageSize, items, isCountTheSameOrLowerThanPage),
+    [pageSize, items, isCountTheSameOrLowerThanPage]
+  );
+
+  useLayoutEffect(() => {
+    if (isCountTheSameOrLowerThanPage || (window as any).PRERENDER) return;
+    const viewportWidth = parentDiv.current!.clientWidth;
+    const centerScroll = parentDiv.current!.scrollWidth / 2;
+    parentDiv.current!.scrollTo({
+      left: centerScroll - viewportWidth / 2,
+    });
+  }, [isCountTheSameOrLowerThanPage, currPage.page, currPage.offset, items]);
+  const [beforeKey, currKey, afterKey] = keys(currPage.page);
+
+  return (
+    <div
+      ref={parentDiv}
+      className={`${Styles.container} ${className}`}
+      data-testid={InfinityDataTestId.ROOT}
+      onScroll={
+        !isCountTheSameOrLowerThanPage
+          ? () => {
+              const pageToIncrement = shouldIncrementPage(
+                Math.round(parentDiv.current!.scrollLeft),
+                prevDiv.current!.offsetLeft,
+                nextDiv.current!.offsetLeft
+              );
+
+              if (pageToIncrement) {
+                setCurrPage((prev) => {
+                  let nextPage = prev.page + pageToIncrement;
+                  let offset = prev.offset;
+                  if (nextPage < 0) {
+                    nextPage = Math.round(items.length / pageSize) - 1;
+                    const finalIndex = (nextPage + 1) * pageSize + offset;
+                    const maxIndex = items.length;
+                    const remainingItems = maxIndex + offset - finalIndex;
+                    offset += remainingItems;
+                    if (offset === -(items.length - 1)) offset = 1;
+                  }
+                  let nextIndex = nextPage * pageSize + offset;
+                  if (nextIndex > items.length) {
+                    offset = nextIndex - items.length;
+                    nextPage = 0;
+                  }
+                  return {
+                    page: nextPage,
+                    offset,
+                  };
+                });
+              }
+            }
+          : undefined
+      }
+    >
+      {!isCountTheSameOrLowerThanPage && (
+        <div
+          key={beforeKey}
+          className={pageClass}
+          data-testid={InfinityDataTestId.PREV_PAGE}
+          ref={prevDiv}
+        >
+          {getItems(currPage.page - 1, currPage.offset)}
+        </div>
+      )}
+      <div
+        key={currKey}
+        className={pageClass}
+        data-testid={InfinityDataTestId.CURR_PAGE}
+        ref={currDiv}
+      >
+        {getItems(currPage.page, currPage.offset)}
+      </div>
+      {!isCountTheSameOrLowerThanPage && (
+        <div
+          key={afterKey}
+          className={pageClass}
+          data-testid={InfinityDataTestId.NEXT_PAGE}
+          ref={nextDiv}
+        >
+          {getItems(currPage.page + 1, currPage.offset)}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Manages a set of divs that allows the effect of inifinite scrolling between elements
+ **/
+const InfinityScroll = forwardRef(_InfinityScroll);
+export default InfinityScroll;
+
+export enum InfinityDataTestId {
+  PREV_PAGE = "infinity-prev",
+  CURR_PAGE = "infinity-curr",
+  NEXT_PAGE = "infinity-next",
+  ROOT = "infinity-parent",
+}

package/src/components/InfinityScroll/index.tsx

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

package/src/components/Input/Input.module.scss

@@ -0,0 +1,71 @@
+@import "../../assets/styles/index.scss";
+
+.inputContainer {
+  position: relative;
+  display: flex;
+  font-size: 22px;
+  line-height: 33px;
+  .icon {
+    position: absolute;
+    top: 1.5px;
+    right: 1.5px;
+    min-height: 30px;
+    min-width: 30px;
+    cursor: pointer;
+    user-select: none;
+    &img {
+      height: 30px;
+      width: 30px;
+    }
+  }
+  &.withIcon {
+    padding-right: 33px;
+  }
+  input,
+  textarea {
+    border: none;
+    background-color: transparent;
+    width: 100%;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: $mainFontFamily;
+    color: var(--input-text-color, $spaceBlue);
+    margin-bottom: 18px;
+    outline: none;
+    &:placeholder-shown ~ .border {
+      animation-iteration-count: infinite;
+      animation-duration: $verySlow;
+      animation-name: pulse;
+      animation-delay: $slow;
+    }
+  }
+  & .border {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 18px;
+    height: 1px;
+    background-color: $spaceBlue;
+    opacity: 0;
+  }
+  .caption {
+    position: absolute;
+    bottom: 0px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/src/components/Input/Input.tsx

@@ -0,0 +1,134 @@
+import React, {
+  ChangeEventHandler,
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+  ReactElement,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+import Text from "../Text";
+import Styles from "./Input.module.scss";
+
+export type InputProps = {
+  decoration?: React.ReactElement | null;
+  error?: string | ReactElement;
+  hideError?: "onfocus";
+  placeholder?: string;
+  disclaimer?: string | ReactElement;
+  multiline?: number;
+  border?: boolean;
+  icon?: {
+    onClick?: () => void;
+  } & DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, any>;
+  Icon?: React.ReactElement;
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  containerProps?: Omit<React.HTMLProps<HTMLDivElement>, "ref">;
+  value?: string;
+  'data-testid'?: string;
+} & Omit<
+  React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>,
+  "ref" | "onChange" | 'value'
+>;
+function _Input(
+  {
+    error,
+    placeholder = " ",
+    hideError,
+    icon,
+    Icon,
+    autoFocus,
+    disclaimer,
+    multiline,
+    decoration = null,
+    border: propBorder,
+    containerProps,
+    className: localClassName,
+    ...otherProps
+  }: InputProps,
+  ref: ForwardedRef<any>
+) {
+  const className = useOneUIConfig("component.input.className");
+  const globalBorder = useOneUIConfig("component.input.border");
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  useImperativeHandle(ref, () => inputRef.current, []);
+  const shouldShowError = useMemo(() => {
+    if (hideError === "onfocus") return !focused;
+    return !!error;
+  }, [focused, error, hideError]);
+  useEffect(() => {
+    if (autoFocus) {
+      const t = setTimeout(() => {
+        inputRef.current!.focus();
+      }, 500);
+      return () => clearTimeout(t);
+    }
+  }, [autoFocus]);
+  const Component = multiline ? "textarea" : "input";
+  const withBorder = useMemo(() => {
+    if (propBorder !== undefined) return propBorder;
+    return globalBorder;
+  }, [propBorder, globalBorder]);
+  return (
+    <div
+      className={`${Styles.inputContainer} ${
+        false ? Styles.withIcon : ""
+      } ${className} ${localClassName}`}
+      {...containerProps}
+    >
+      {decoration}
+      <Component
+        ref={inputRef as any}
+        placeholder={placeholder}
+        rows={multiline}
+        {...otherProps}
+        onFocus={(e) => {
+          setFocused(true);
+          if (otherProps.onFocus) otherProps.onFocus(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          if (otherProps.onBlur) otherProps.onBlur(e);
+        }}
+      />
+      {withBorder && <div className={Styles.border} />}
+      {error && shouldShowError ? (
+        <Text
+          title={typeof error === "string" ? error : ""}
+          data-testid={InputTestIds.ERROR}
+          className={Styles.caption}
+          type="error"
+        >
+          {error}
+        </Text>
+      ) : disclaimer ? (
+        <Text
+          title={typeof disclaimer === "string" ? disclaimer : ""}
+          type="caption"
+          className={Styles.caption}
+          data-testid={InputTestIds.DISCLAIMER}
+        >
+          {disclaimer}
+        </Text>
+      ) : null}
+      {Icon && <div className={Styles.icon}>{Icon}</div>}
+      {icon && <img className={Styles.icon} {...icon} />}
+    </div>
+  );
+}
+
+export enum InputTestIds {
+  DISCLAIMER = "disclaimer",
+  ERROR = "error",
+}
+
+/**
+ * A transparent input with some prebuilt states common to the application
+ **/
+const Input = forwardRef(_Input);
+export default Input;

package/src/components/Input/index.tsx

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

package/src/components/InstantCounter/InstantCounter.tsx

@@ -0,0 +1,77 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { FormatNumberOptions, useIntl } from "react-intl";
+
+function _InstantCounter(
+  {
+    from = 0,
+    to,
+    framesPerSecond = 30,
+    durationInSeconds,
+    formatOptions = {},
+    autoStart = true,
+  }: {
+    from?: number;
+    to: number;
+    framesPerSecond?: number; //Usefull for testing
+    durationInSeconds: number;
+    formatOptions?: FormatNumberOptions;
+    autoStart?: boolean;
+  },
+  ref: ForwardedRef<{ start: () => void }>
+) {
+  const [started, setStarted] = useState(autoStart);
+  const initialValue = useRef<number>(from);
+  const spanRef = useRef<HTMLSpanElement>(null);
+  const { formatNumber } = useIntl();
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      start: () => setStarted(true),
+    }),
+    []
+  );
+
+  useEffect(() => {
+    if (started) {
+      const incrementBy =
+        (to - initialValue.current) / (framesPerSecond * durationInSeconds);
+      spanRef.current!.innerHTML = formatNumber(
+        initialValue.current!,
+        formatOptions
+      );
+
+      const intervalId = setInterval(() => {
+        initialValue.current! += incrementBy;
+        spanRef.current!.innerHTML = formatNumber(
+          initialValue.current!,
+          formatOptions
+        );
+        if (Math.round(initialValue.current) === Math.round(to)) {
+          clearInterval(intervalId);
+        }
+      }, 1000 / framesPerSecond);
+      return () => {
+        clearInterval(intervalId);
+      };
+    }
+  }, [started, to]);
+  return (
+    <>
+      <span ref={spanRef} />
+    </>
+  );
+}
+
+/**
+ * Increments the numbers from 0 to the provided value
+ **/
+const InstantCounter = forwardRef(_InstantCounter);
+export default InstantCounter;

package/src/components/InstantCounter/index.tsx

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

package/src/components/LavaLamp/LavaLamp.data.tsx

@@ -0,0 +1,114 @@
+import { throttle as t } from "lodash";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTiltUpdates } from "../../hooks/ui/useTilt";
+import Styles from "./LavaLamp.module.scss";
+
+const transitionMs = Number(Styles.transitionMs);
+export const transitionPositionMs = Number(Styles.transitionPositionMs);
+
+export default function useLavaLampSetup(
+  onUpdatePosition: (x: number, y: number) => void,
+  onUpdateSize: (size: number) => void
+) {
+  const [d, setDim] = useState<{ width: number; height: number }>();
+  const relativeTo = useRef<HTMLDivElement>(null);
+
+  const prevTilt = useRef<{ x: number; y: number }>(undefined);
+
+  useEffect(() => {
+    const baseWidth = Math.min(relativeTo.current!.clientWidth, 1440);
+    setDim({
+      width: baseWidth,
+      height:
+        baseWidth *
+        (relativeTo.current!.clientHeight / relativeTo.current!.clientWidth),
+    });
+  }, []);
+
+  const updateTiltCb = useMemo(() => {
+    const throttlePosition = t;
+    if (!d) return () => {};
+    const baseSize = Math.min(d.width, d.height) * 0.1;
+    let acceleration = t(
+      (currTilt: { x: number; y: number }) => {
+        if (!prevTilt.current) {
+          prevTilt.current = currTilt;
+          return;
+        }
+
+        const diff = {
+          x: Math.abs(prevTilt.current.x - currTilt.x),
+          y: Math.abs(prevTilt.current.y - currTilt.y),
+        };
+
+        const baseDiff = Math.max(diff.x, diff.y);
+        const percent = (baseDiff * 100) / 90;
+
+        onUpdateSize(baseSize + baseSize * (percent / 100));
+
+        prevTilt.current = currTilt!;
+      },
+      transitionMs,
+      {
+        leading: false,
+        trailing: true,
+      }
+    );
+    let movement = throttlePosition(
+      (currTilt: { x: number; y: number }) => {
+        const [x, y] = [currTilt.x + 100, currTilt.y + 100];
+        const [cx, cy] = [(d!.width * x) / 200, (d!.height * y) / 200];
+        onUpdatePosition(cx, cy);
+      },
+      transitionPositionMs,
+      {
+        leading: false,
+        trailing: true,
+      }
+    );
+    return (tilt: NonNullable<typeof prevTilt.current>) => {
+      if (!d) return;
+      acceleration(tilt);
+      movement(tilt);
+    };
+  }, [d]);
+  useTiltUpdates(
+    true,
+    relativeTo,
+    updateTiltCb,
+    undefined,
+    undefined,
+    undefined,
+    {
+      round: false,
+      gyroEnabled: false,
+    }
+  );
+  const circlesConfig = useMemo(() => {
+    if (!d) return [];
+    const baseSize = Math.min(d.width, d.height) * 0.15;
+    return new Array(10).fill(undefined).map((_, i) => {
+      const mod = i % 2;
+      const startX =
+        Math.random() * d.width * 0.5 + (mod === 0 ? 0 : d.width * 0.5);
+      const translateX = startX - (startX + 50 + Math.random() * 200);
+      const startY =
+        Math.random() * d.height * 0.75 + (mod === 0 ? 0 : d.height * 0.25);
+      const translateY = startY - (startY + 50 + Math.random() * 200);
+
+      return {
+        baseSize,
+        startX,
+        startY,
+        translateX,
+        translateY,
+      };
+    });
+  }, [d]);
+
+  return {
+    relativeTo,
+    d,
+    circlesConfig,
+  };
+}

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

@@ -0,0 +1,26 @@
+@use 'sass:math';
+
+$transitionMs: math.div(1000, 5);
+$transitionPositionMs: math.div($transitionMs, 2);
+@value transitionMs #{$transitionMs};
+@value transitionPositionMs #{$transitionPositionMs};
+
+.root {
+  position: relative;
+  svg.effect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    circle {
+      will-change: r, cx, cy;
+      transition: r #{$transitionMs}ms linear,
+        cx #{$transitionPositionMs}ms linear,
+        cy #{$transitionPositionMs}ms linear;
+    }
+  }
+  > div {
+    z-index: 1;
+  }
+}