@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/PaginationIndicator/PaginationIndicator.tsx

@@ -1,365 +0,0 @@
-import React, {
-  ComponentProps,
-  ForwardedRef,
-  forwardRef,
-  RefObject,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-const MAX_BALLS = 7;
-const eachBallWidthEm = 1.2;
-
-const CENTER_GUIDE_BALL = 1;
-
-export enum PaginationIndicatorMode {
-  /** This will make the guide ball be kept on center  */
-  CENTERED,
-
-  /** This will make the guide ball move, while the indicator balls keep in place */
-  START,
-}
-export function PaginationIndicatorView({
-  size,
-  page: currentPage,
-  pages: decimalPages,
-  className,
-  onClickPage,
-  mode = PaginationIndicatorMode.CENTERED,
-  infinite,
-}: {
-  size: number;
-  page: number;
-  pages: number;
-  className?: string;
-  onClickPage?: (page: number) => void;
-  mode?: PaginationIndicatorMode;
-  infinite?: boolean;
-}) {
-  const maxBalls = useMemo(() => (infinite ? 5 : MAX_BALLS), [infinite]);
-  const page = useMemo(() => {
-    const floor = Math.floor(decimalPages);
-    const modulus = decimalPages % floor;
-
-    if (currentPage > floor) {
-      const currentFloorModulus = currentPage % floor;
-      const equivalent = (currentFloorModulus * 100) / modulus;
-
-      return floor + equivalent / 100;
-    } else {
-      return currentPage;
-    }
-  }, [currentPage, decimalPages]);
-  const rand = useMemo(() => Math.random().toString(), []);
-  const pageIndex = page - 1;
-  const pages = useMemo(() => Math.ceil(decimalPages), [decimalPages]);
-  const numBalls = useMemo(() => {
-    const numBalls = pages >= maxBalls ? maxBalls : Math.ceil(pages);
-
-    return numBalls;
-  }, [pages]);
-
-  const indexForTheBallsCenter = useMemo(
-    () => (infinite ? numBalls - 5 : numBalls - 1) / 2,
-    [numBalls, infinite]
-  );
-  const balls = useMemo(() => {
-    const indexForLastPages = pages + 1 - indexForTheBallsCenter;
-    /**
-     * Is the page index (position of the center)
-     * after the first pages and
-     * before the last pages */
-    const isCenterPage =
-      numBalls >= maxBalls &&
-      pageIndex > indexForTheBallsCenter &&
-      pageIndex < indexForLastPages - 1;
-    let modulus =
-      pageIndex %
-      (1 + (indexForTheBallsCenter - Math.floor(indexForTheBallsCenter)));
-    const resetPageIndex = isCenterPage
-      ? indexForTheBallsCenter + modulus
-      : pages < maxBalls
-      ? pageIndex
-      : pageIndex >= indexForLastPages - 1
-      ? numBalls - (pages - pageIndex)
-      : pageIndex;
-    const left = eachBallWidthEm * resetPageIndex;
-    const { pushBallsToRightBy, pushBallsToLeftBy, pushGuideToRightBy } =
-      mode === PaginationIndicatorMode.CENTERED
-        ? {
-            pushBallsToRightBy: Math.min(pages, maxBalls) * eachBallWidthEm,
-            pushBallsToLeftBy: left,
-            pushGuideToRightBy: 0,
-          }
-        : {
-            pushBallsToRightBy: (eachBallWidthEm - 0.5) / 2,
-            pushBallsToLeftBy: 0,
-            pushGuideToRightBy: left,
-          };
-    let pushToLeft: number = 0;
-    return new Array(CENTER_GUIDE_BALL + numBalls)
-      .fill(undefined)
-      .map((_, i) => {
-        const isLastBall = i === numBalls - 1;
-        const isFirstBall = i === 0;
-
-        if (i === numBalls) {
-          const diameter = 0.45 * 2;
-          const padding = (eachBallWidthEm - diameter) / 2;
-          return (
-            <rect
-              fill="#fff"
-              width={`${diameter}em`}
-              height={`${diameter}em`}
-              x={`${
-                pushBallsToRightBy - padding + pushGuideToRightBy - pushToLeft
-              }em`}
-              y={`${padding}em`}
-              rx={`${diameter / 2}em`}
-            />
-          );
-        }
-
-        const ballSize =
-          numBalls < maxBalls
-            ? 0.5
-            : page <= indexForTheBallsCenter + 1 && isLastBall
-            ? 0
-            : pageIndex >= indexForLastPages - 1 && isFirstBall
-            ? 0
-            : isCenterPage
-            ? isFirstBall
-              ? 0.5 - modulus * 0.5
-              : isLastBall
-              ? modulus * 0.5
-              : 0.5
-            : 0.5;
-
-        if (i === 0 && mode === PaginationIndicatorMode.START)
-          pushToLeft = (0.5 - ballSize) * 2.4;
-
-        return (
-          <rect
-            key={`guide-${i}`}
-            width={`${ballSize * 1.2}em`}
-            height={`${ballSize * 1.2}em`}
-            x={`${
-              pushBallsToRightBy +
-              i * eachBallWidthEm -
-              pushBallsToLeftBy -
-              pushToLeft
-            }em`}
-            y={`${(eachBallWidthEm - ballSize * 1.2) / 2}em`}
-            rx={`${(ballSize * 1.2) / 2}em`}
-            onClick={() => {
-              if (onClickPage) {
-                const pageClicked =
-                  (!isCenterPage
-                    ? pageIndex >= indexForLastPages - 1
-                      ? Math.floor(page) - resetPageIndex - 1
-                      : 0
-                    : Math.floor(page) - (indexForTheBallsCenter + 1)) +
-                  1 +
-                  i;
-                onClickPage(Math.round(pageClicked));
-              }
-            }}
-          />
-        );
-      });
-  }, [indexForTheBallsCenter, pageIndex, pages]);
-  const [guideBall, ...pageBalls] = balls.reverse();
-  let width = eachBallWidthEm * Math.min(pages, maxBalls) * 2;
-  if (mode === PaginationIndicatorMode.START) width /= 2;
-
-  return (
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      style={{
-        width: `${width}em`,
-        minWidth: `${width}em`,
-        height: "1.2em",
-        fontSize: `${size}px`,
-      }}
-    >
-      <filter id={`goo-${rand}`}>
-        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5" />
-        <feColorMatrix
-          in="blur"
-          mode="matrix"
-          values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
-          result="goo"
-        />
-        <feBlend in2="goo" in="SourceGraphic" result="mix" />
-      </filter>
-      <mask id={`mask-${rand}`}>
-        <g filter={`url(#${`goo-${rand}`})`} fill="#fff">
-          {[pageBalls]}
-          {guideBall}
-        </g>
-      </mask>
-      <rect
-        x="0"
-        y="0"
-        mask={`url(#${`mask-${rand}`})`}
-        width="100%"
-        height="100%"
-        style={{ fill: "var(--digital-blue)" }}
-      ></rect>
-      {onClickPage && (
-        <g opacity={0} style={{ cursor: "pointer" }}>
-          {pageBalls}
-        </g>
-      )}
-    </svg>
-  );
-}
-
-export function AnimatedPaginationIndicator(
-  props: ComponentProps<typeof PaginationIndicatorView> & {
-    duration: number;
-  }
-) {
-  const prevPage = useRef(props.page);
-  const [pageProgress, setPageProgress] = useState(props.page);
-  useEffect(() => {
-    const diff = props.page - prevPage.current;
-    const diffPerStep = diff / 60;
-
-    const interval = setInterval(() => {
-      setPageProgress((prev) => {
-        const next = prev + diffPerStep;
-        if (diff < 0) {
-          if (next <= props.page) {
-            clearInterval(interval);
-            return props.page;
-          }
-        } else {
-          if (next >= props.page) {
-            clearInterval(interval);
-            return props.page;
-          }
-        }
-        return Number(next.toFixed(2));
-      });
-    }, props.duration / 60);
-
-    return () => {
-      prevPage.current = props.page;
-      clearInterval(interval);
-    };
-  }, [props.page]);
-
-  return <PaginationIndicatorView {...props} page={pageProgress} />;
-}
-
-function _PaginationIndicator(
-  {
-    scrollableRef,
-    estimatedWidth,
-    size,
-    className = "",
-    onClickPage,
-    mode,
-    infinite,
-  }: {
-    scrollableRef: RefObject<HTMLDivElement>;
-    estimatedWidth?: number;
-    size: number;
-    className?: string;
-    onClickPage?: (page: number) => void;
-  } & Pick<ComponentProps<typeof PaginationIndicatorView>, "mode" | "infinite">,
-  ref: ForwardedRef<{
-    refreshPages: () => void;
-  }>
-) {
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const [defs, setDefs] =
-    useState<{
-      pages: number;
-    }>();
-
-  const refreshPages = useCallback(() => {
-    if (!scrollableRef.current) return;
-    const maxWidth =
-      estimatedWidth === undefined
-        ? scrollableRef.current!.scrollWidth
-        : estimatedWidth;
-
-    const pages = maxWidth / scrollableRef.current!.clientWidth;
-    if (pages > 1)
-      setDefs({
-        pages: infinite ? pages + 2 : pages,
-      });
-  }, [estimatedWidth, infinite]);
-
-  useEffect(() => refreshPages(), [refreshPages]);
-
-  const updatePageIndicators = useCallback(
-    (target: HTMLDivElement, pages: number) => {
-      if (!scrollableRef.current) return;
-      const eachPageWidth = scrollableRef.current!.clientWidth;
-      const page = 1 + target.scrollLeft / eachPageWidth;
-      const lastPageProgress = Math.floor(pages) + 1;
-      const maximumProgress = pages + 1;
-
-      const diffToMax = maximumProgress - lastPageProgress;
-      const currentProgressOnDiff = page - lastPageProgress;
-
-      if (page > lastPageProgress) {
-        const p = lastPageProgress + currentProgressOnDiff / diffToMax;
-        setCurrentPage(p);
-      } else setCurrentPage(page);
-    },
-    []
-  );
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      refreshPages,
-    }),
-    []
-  );
-
-  useEffect(() => {
-    if (!defs) return;
-    const el = scrollableRef.current!;
-    const onScroll = (e: Event) =>
-      updatePageIndicators(e.currentTarget as HTMLDivElement, defs.pages);
-    updatePageIndicators(el, defs.pages);
-    el.addEventListener("scroll", onScroll, {
-      passive: true,
-    });
-    return () => {
-      el.removeEventListener("scroll", onScroll);
-    };
-  }, [defs]);
-
-  const pages = useMemo(() => (defs ? defs.pages : undefined), [defs]);
-
-  return !pages ? null : (
-    <PaginationIndicatorView
-      pages={pages}
-      page={currentPage}
-      size={size}
-      className={className}
-      onClickPage={onClickPage}
-      mode={mode}
-      infinite={infinite}
-    />
-  );
-}
-
-/**
- * A cool component to indicate how many pages are
- **/
-const PaginationIndicator = forwardRef(_PaginationIndicator);
-export default PaginationIndicator;

package/src/components/PaginationIndicator/index.tsx

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

package/src/components/Parallax/Parallax.module.scss

@@ -1,28 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.parallax {
-  display: flex;
-  position: relative;
-  transition: transform $fast;
-  overflow: hidden;
-  user-select: none;
-  transform: translate3d(0, 0, 0);
-}
-
-.reflection {
-  transform: translateX(-50%) translateY(-50%);
-  width: 40%;
-  pointer-events: none;
-  &::after {
-    background: radial-gradient(#fff2, #fff2 5%, #aaa0 50%);
-    background-size: 100% 100%;
-    content: "";
-    display: block;
-    padding-bottom: 100%;
-    border-radius: 50%;
-    background-repeat: no-repeat;
-  }
-  position: absolute;
-  left: -50%;
-  top: -50%;
-}

package/src/components/Parallax/Parallax.tsx

@@ -1,225 +0,0 @@
-import React, {
-  DetailedHTMLProps,
-  ForwardedRef,
-  forwardRef,
-  HTMLAttributes,
-  MutableRefObject,
-  PropsWithChildren,
-  useEffect,
-  useRef,
-} from "react";
-import { throttle } from "lodash";
-import Styles from "./Parallax.module.scss";
-import {
-  flattenMatrix,
-  generateMatrixFromOperations,
-  invertMatrix,
-} from "./math/helpers";
-import { calculateDistanceRelativeToBounds, givenTheRelativePositionHowMuchToRotate } from "../../hooks/ui/useTilt";
-
-const MAXIMUM_PARALLAX = {
-  x: 20,
-  y: 20,
-};
-
-type Props = PropsWithChildren<{
-  className?: string;
-  active: boolean;
-  onClick?: (e: any) => void;
-  reflection?: boolean;
-  maxParallax?: {
-    x: number;
-    y: number;
-  };
-}> &
-  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-
-function _Parallax(
-  {
-    children,
-    className = "",
-    active,
-    onClick,
-    reflection,
-    maxParallax = MAXIMUM_PARALLAX,
-    ...props
-  }: Props,
-  ref: ForwardedRef<HTMLDivElement>
-) {
-  const parallaxableRef = useRef<HTMLDivElement>(null);
-  const reflectionRef = useRef<HTMLDivElement>(null);
-  const multiplierRef = useRef<number>(1);
-  const initialPositionRef = useRef<string>(undefined);
-  useEffect(() => {
-    if (ref)
-      (ref as MutableRefObject<HTMLDivElement>).current =
-        parallaxableRef.current!;
-    const el = parallaxableRef.current!;
-    if (active && !initialPositionRef.current) {
-      initialPositionRef.current = getComputedStyle(el).transform;
-      if (initialPositionRef.current === "none")
-        initialPositionRef.current = "";
-      el.style.transform = `${initialPositionRef.current} rotateX(0deg) rotateY(0deg) translateZ(0px)`;
-    }
-    // eslint-disable-next-line
-  }, [active]);
-
-  useEffect(() => {
-    const el = parallaxableRef.current!;
-    if (active) {
-      const updatePositions = (relativeToX: number, relativeToY: number) => {
-        const rect = el.getBoundingClientRect();
-        const {
-          width: [x0, xW],
-          height: [y0, yH],
-        } = {
-          width: [rect.left, el.clientWidth],
-          height: [rect.top, el.clientHeight],
-        };
-        const distanceOffRight = calculateDistanceRelativeToBounds(
-          relativeToX,
-          x0,
-          xW,
-          true
-        );
-        const distanceOffBottom = calculateDistanceRelativeToBounds(
-          relativeToY,
-          y0,
-          yH,
-          true
-        );
-        const howMuchToRotateY =
-          givenTheRelativePositionHowMuchToRotate(
-            distanceOffRight,
-            maxParallax.y
-          ) * multiplierRef.current;
-        const howMuchToRotateX =
-          givenTheRelativePositionHowMuchToRotate(
-            distanceOffBottom,
-            maxParallax.x
-          ) * multiplierRef.current;
-
-        const howMuchToOpacify = Math.abs(
-          Math.abs(distanceOffBottom - 0.5) / 0.5
-        );
-        const howMuchToOpacifyHorizontal = Math.max(
-          Math.abs(Math.abs(distanceOffRight - 0.5) / 0.5),
-          Math.abs(Math.abs(distanceOffBottom - 0.5) / 0.5)
-        );
-
-        el.style.transform = `${initialPositionRef.current
-          } rotateY(${howMuchToRotateY}deg) rotateX(${-howMuchToRotateX}deg) translateZ(${multiplierRef.current === 1 ? 0 : -30
-          }px)`;
-
-        if (reflectionRef.current) {
-          reflectionRef.current.style.left = `${(1 - distanceOffRight) * 100}%`;
-          reflectionRef.current.style.top = `${(1 - distanceOffBottom) * 100}%`;
-          reflectionRef.current.style.opacity = `${Math.min(
-            howMuchToOpacify,
-            howMuchToOpacifyHorizontal
-          )}`;
-        }
-      };
-      const handler = throttle(({ x, y }: MouseEvent) => {
-        updatePositions(x, y);
-      }, 1000 / 30);
-      const touchHandler = throttle(({ touches }: TouchEvent) => {
-        const { pageX, pageY } = touches[0];
-        updatePositions(pageX, pageY);
-      }, 1000 / 30);
-      const mouseDownHandler = () => {
-        multiplierRef.current = 1.5;
-      };
-      const mouseUpHandler = () => {
-        multiplierRef.current = 1;
-      };
-      window.addEventListener("mousemove", handler);
-      window.addEventListener("touchmove", touchHandler);
-      let _inverseMatrix: number[] | undefined;
-      const _limits: {
-        [k in "beta" | "gamma"]?: [number, number];
-      } = {
-        beta: undefined,
-        gamma: undefined,
-      };
-      const orientationListener: (e: DeviceOrientationEvent) => void = ({
-        beta,
-        gamma,
-      }) => {
-        beta = beta! * 0.5;
-        gamma = gamma! * 0.5;
-        if (!_inverseMatrix) {
-          window.removeEventListener("mousemove", handler);
-          window.removeEventListener("touchmove", touchHandler);
-          const offset = 12.5;
-          _limits.beta = [beta! - offset, beta! + offset];
-          _limits.gamma = [gamma! - offset, gamma! + offset];
-        }
-        const _beta = Math.min(
-          _limits.beta![1],
-          Math.max(_limits.beta![0], beta!)
-        );
-        const _gamma = Math.min(
-          _limits.gamma![1],
-          Math.max(_limits.gamma![0], gamma!)
-        );
-        if (!_inverseMatrix) {
-          _inverseMatrix = flattenMatrix(
-            invertMatrix(
-              generateMatrixFromOperations(
-                {
-                  type: "rotateY",
-                  angle: _gamma!,
-                },
-                {
-                  type: "rotateX",
-                  angle: -_beta!,
-                }
-              )
-            )
-          );
-        }
-        el.style.transform = `matrix3d(${_inverseMatrix.join(
-          ","
-        )}) rotateX(${-_beta!}deg) rotateY(${_gamma}deg)`;
-      };
-      window.addEventListener("deviceorientation", orientationListener);
-      window.addEventListener("touchend", () => {
-        _inverseMatrix = undefined;
-      });
-      el.addEventListener("touchstart", mouseDownHandler);
-      el.addEventListener("touchend", mouseUpHandler);
-      el.addEventListener("mousedown", mouseDownHandler);
-      el.addEventListener("mouseup", mouseUpHandler);
-
-      return () => {
-        window.removeEventListener("deviceorientation", orientationListener);
-        window.removeEventListener("mousemove", handler);
-        window.removeEventListener("touchmove", touchHandler);
-        el.removeEventListener("mousedown", mouseDownHandler);
-        el.removeEventListener("mouseup", mouseUpHandler);
-        el.removeEventListener("touchstart", mouseDownHandler);
-        el.removeEventListener("touchend", mouseUpHandler);
-        // el.style.transform = initialPositionRef.current!;
-        el.style.transform = `rotateX(0deg) rotateY(0deg) translateZ(0px)`;
-      };
-    }
-  }, [active]);
-  return (
-    <div
-      onClick={onClick}
-      ref={parallaxableRef}
-      className={`${Styles.parallax} ${className}`}
-      {...props}
-    >
-      {children}
-      {reflection && <div ref={reflectionRef} className={Styles.reflection} />}
-    </div>
-  );
-}
-
-/**
- * It holds a children and animates a tilt effect relative to mouse position
- **/
-const Parallax = forwardRef(_Parallax);
-export default Parallax;

package/src/components/Parallax/index.tsx

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