@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/InfinityScroll/InfinityScroll.tsx

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

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

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

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

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

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

package/src/components/InstantCounter/InstantCounter.tsx

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

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

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

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

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