@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/Transition/Transition.tsx

@@ -1,495 +0,0 @@
-import React, {
-  AnimationEvent,
-  createRef,
-  CSSProperties,
-  DetailedHTMLProps,
-  ForwardedRef,
-  forwardRef,
-  Key,
-  MutableRefObject,
-  ReactElement,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import Styles from "./Transition.module.scss";
-
-export type TransitionTypeDefinitions =
-  | {
-      transitionType?:
-        | TransitionAnimationTypes.SLIDE
-        | TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN
-        | TransitionAnimationTypes.FADE
-        | TransitionAnimationTypes.COIN_FLIP;
-    }
-  | {
-      transitionType?: TransitionAnimationTypes.POP_FROM_ELEMENT_ID;
-      elementId: string;
-    }
-  | {
-      transitionType?: TransitionAnimationTypes.MASK;
-      /**
-       * It provides the transition container so you can create a dynamic svg to mask with
-       */
-      maskFactory: (container: HTMLDivElement) => string;
-    }
-  | {
-      transitionType?: TransitionAnimationTypes.CUSTOM;
-      config: ReturnType<typeof TransitionClasses>;
-    };
-
-export type TransitionProps = {
-  step: number;
-  className?: string;
-  contentStyle?: React.CSSProperties;
-  contentClassName?: string;
-  children: (React.ReactElement | undefined)[];
-  onDiscardStep?: (discardedKey: React.Key, startedAnimationAt: number) => void;
-  lockTransitionWidth?: boolean;
-  lockTransitionHeight?: boolean;
-} & TransitionTypeDefinitions &
-  Omit<
-    DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>,
-    "className" | "children"
-  >;
-
-function TransitionClasses(
-  type: NonNullable<
-    Exclude<TransitionProps["transitionType"], TransitionAnimationTypes.CUSTOM>
-  >
-): {
-  /**
-   * Applied to the element that was not visible and is now entering the screen
-   */
-  backward: {
-    elementEntering: string;
-    elementExiting: string;
-  };
-  /**
-   * Applied to the element that was visible and now is exiting the screen
-   */
-  forward: {
-    elementEntering: string;
-    elementExiting: string;
-  };
-} {
-  switch (type) {
-    case TransitionAnimationTypes.COIN_FLIP:
-      return {
-        backward: {
-          elementExiting: Styles.flipBottomUpOut,
-          elementEntering: Styles.flipBottomUpIn,
-        },
-        forward: {
-          elementExiting: Styles.flipBottomUpOut,
-          elementEntering: Styles.flipBottomUpIn,
-        },
-      };
-    case TransitionAnimationTypes.FADE:
-      return {
-        backward: {
-          elementExiting: Styles.fadeOutAbsolute,
-          elementEntering: Styles.fadeInDelayed,
-        },
-        forward: {
-          elementExiting: Styles.fadeOutAbsolute,
-          elementEntering: Styles.fadeInDelayed,
-        },
-      };
-    case TransitionAnimationTypes.SLIDE:
-      return {
-        backward: {
-          elementEntering: Styles.entranceLeft,
-          elementExiting: "",
-        },
-        forward: {
-          elementEntering: "",
-          elementExiting: Styles.exitLeft,
-        },
-      };
-    case TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN:
-    case TransitionAnimationTypes.POP_FROM_ELEMENT_ID:
-      return {
-        backward: {
-          elementEntering: Styles.fadeIn,
-          elementExiting: Styles.scaleOut,
-        },
-        forward: {
-          elementEntering: Styles.scaleIn,
-          elementExiting: Styles.fadeOut,
-        },
-      };
-    case TransitionAnimationTypes.MASK:
-      return {
-        backward: {
-          elementEntering: Styles.stubEntering,
-          elementExiting: Styles.stub,
-        },
-        forward: {
-          elementEntering: Styles.stubEntering,
-          elementExiting: Styles.stub,
-        },
-      };
-  }
-}
-
-type ChildrenWrapper = ((props: {
-  children: TransitionProps["children"][number];
-}) => ReactElement) & {
-  createdAt: number;
-  associatedKey: Key;
-  toRemoveKeys?: Key[];
-  externalProps: { [k: string]: any };
-};
-
-function ChildrenWrapperFactory(
-  func: (p: { children: TransitionProps["children"] }) => ReactElement,
-  key: Key,
-  externalPropsContainer: { [k: string]: any },
-  /** This is used to prevent newer "duplicated" keys from being removed after the new element finished animation */
-  timestamp: number,
-  toRemoveKeys?: Key[]
-): ChildrenWrapper {
-  (func as any).createdAt = timestamp;
-  (func as any).associatedKey = key;
-  (func as any).toRemoveKeys = toRemoveKeys;
-  (func as any).externalProps = externalPropsContainer;
-  return func as unknown as ChildrenWrapper;
-}
-function _Transition(
-  {
-    step,
-    contentStyle,
-    contentClassName = "",
-    children,
-    className,
-    onDiscardStep,
-    lockTransitionWidth = false,
-    lockTransitionHeight = false,
-    ...props
-  }: TransitionProps,
-  _containerRef: ForwardedRef<HTMLDivElement | null>
-) {
-  const containerRef = useMemo(
-    () =>
-      (_containerRef as MutableRefObject<HTMLDivElement | null>) || createRef(),
-    [_containerRef]
-  );
-  const preTransitionDetails = useRef<CSSProperties>({
-    transformOrigin: "initial",
-  });
-  const [childrenWrappers, setChildrenWrappers] = useState<
-    (ChildrenWrapper | undefined)[]
-  >(() => {
-    const externalProps = {
-      "data-testid": "transition-container",
-      key: String(children[step]?.key || step),
-      style: contentStyle,
-      className: contentClassName,
-    };
-    const func = ChildrenWrapperFactory(
-      ({ children }) => <div {...externalProps}>{children}</div>,
-      children[step]!.key || step,
-      externalProps,
-      Date.now(),
-      []
-    );
-    return [func];
-  });
-
-  const prevStep = useRef(step);
-  const prevChild = useRef(children[step]);
-
-  useEffect(() => () => {
-    prevChild.current = children[step];
-  });
-
-  useEffect(() => {
-    containerRef.current!.style.overflow = "hidden";
-    const transitionClasses =
-      props.transitionType === TransitionAnimationTypes.CUSTOM
-        ? props.config
-        : TransitionClasses(
-            props.transitionType || TransitionAnimationTypes.SLIDE
-          );
-
-    if (
-      prevChild.current !== null &&
-      children[step]?.key === prevChild.current?.key // I'm rendering the same screen
-    ) {
-      return () => {
-        prevStep.current = step;
-      };
-    }
-
-    const key = children[step]?.key || step;
-
-    if (prevStep.current !== step && lockTransitionWidth)
-      containerRef.current!.style.width = `${
-        containerRef.current!.clientWidth
-      }px`;
-
-    if (prevStep.current !== step && lockTransitionHeight)
-      containerRef.current!.style.height = `${
-        containerRef.current!.clientHeight
-      }px`;
-    const transitionMask =
-      props.transitionType === TransitionAnimationTypes.MASK
-        ? props.maskFactory(containerRef.current!)
-        : "";
-    const insertedAt = Date.now();
-
-    /** This runs on backwards */
-    if (prevStep.current > step) {
-      const stepToRemove = prevStep.current;
-      const prevKeyToRemove = prevChild.current?.key || stepToRemove;
-      setChildrenWrappers((screensBeforeChangingStep) => {
-        const enteringScreenRef = createRef<HTMLDivElement>();
-        const [FirstNextScreen, ...restOfScreens] =
-          screensBeforeChangingStep.filter(
-            (a) => a?.associatedKey !== String(key)
-          );
-
-        if (FirstNextScreen) {
-          Object.assign(FirstNextScreen.externalProps, {
-            "data-testid": "transition-container",
-            style: { ...contentStyle, WebkitMaskImage: transitionMask },
-            className: `${transitionClasses.backward.elementExiting}`,
-          });
-        }
-        function animationEndListener(event: AnimationEvent<HTMLDivElement>) {
-          if (event.target !== event.currentTarget) return;
-
-          const isAnimationFromExpectedState =
-            enteringScreenRef.current?.classList.contains(
-              transitionClasses.backward.elementEntering
-            );
-          enteringScreenRef.current?.classList.remove(
-            transitionClasses.backward.elementEntering
-          );
-          setChildrenWrappers((screensAfterTheCurrentStepEntered) => {
-            if (onDiscardStep) {
-              if (isAnimationFromExpectedState)
-                onDiscardStep(prevKeyToRemove, insertedAt);
-              if (FirstNextScreen && FirstNextScreen.toRemoveKeys)
-                FirstNextScreen.toRemoveKeys.forEach(onDiscardStep);
-            }
-            return screensAfterTheCurrentStepEntered.filter((s) => {
-              const shouldKeep =
-                (s?.associatedKey !== String(prevKeyToRemove) &&
-                  !FirstNextScreen?.toRemoveKeys?.some(
-                    (k) => String(k) === String(s?.associatedKey)
-                  )) ||
-                s!.createdAt! > insertedAt;
-              return shouldKeep;
-            });
-          });
-          event.currentTarget.removeEventListener(
-            "animationend",
-            animationEndListener as any
-          );
-        }
-        const propsContainer = {
-          ref: enteringScreenRef,
-          "data-testid": "transition-container",
-          key,
-          className: `${transitionClasses.backward.elementEntering} ${contentClassName}`,
-          style: {
-            ...contentStyle,
-          },
-          onAnimationEnd: animationEndListener,
-        };
-        const newWrapper = ChildrenWrapperFactory(
-          ({ children }) => {
-            return <div {...propsContainer}>{children}</div>;
-          },
-          key,
-          propsContainer,
-          insertedAt,
-          [prevKeyToRemove, ...(FirstNextScreen?.toRemoveKeys || [])]
-        );
-        if (FirstNextScreen)
-          return [
-            newWrapper,
-            FirstNextScreen ||
-              ChildrenWrapperFactory(
-                () => <React.Fragment />,
-                "",
-                {},
-                insertedAt
-              ),
-            ...restOfScreens,
-          ];
-        else return [newWrapper];
-      });
-    } else if (prevStep.current < step) {
-      const stepToDelete = prevStep.current;
-      const prevKeyToRemove = String(prevChild.current?.key || stepToDelete);
-      setChildrenWrappers((screensBeforeChangingStep) => {
-        const lastIndex = screensBeforeChangingStep.length - 1;
-        const lastWrapper = screensBeforeChangingStep[lastIndex];
-        const nextScreenRef = createRef<HTMLDivElement>();
-        if (lastWrapper) {
-          Object.assign(lastWrapper.externalProps, {
-            "data-testid": "transition-container",
-            style: { ...contentStyle, WebkitMaskImage: transitionMask },
-            className: `${contentClassName} ${transitionClasses.forward.elementExiting}`,
-            onAnimationEnd: (e: AnimationEvent) => {
-              if (e.target !== e.currentTarget) return;
-              if (transitionClasses.forward.elementEntering)
-                nextScreenRef.current?.classList.remove(
-                  transitionClasses.forward.elementEntering
-                );
-              if (onDiscardStep) onDiscardStep(prevKeyToRemove, insertedAt);
-              setChildrenWrappers((screensAfterTheCurrentStepEntered) => {
-                const nextState = screensAfterTheCurrentStepEntered.filter(
-                  (s) => {
-                    const shouldMantain =
-                      s?.associatedKey !== String(prevKeyToRemove) ||
-                      s.createdAt > insertedAt;
-                    return shouldMantain;
-                  }
-                );
-                return nextState;
-              });
-            },
-          });
-        }
-        const propsContainer = {
-          ref: nextScreenRef,
-          "data-testid": "transition-container",
-          key,
-          style: {
-            ...contentStyle,
-          },
-          className: `${contentClassName} ${transitionClasses.forward.elementEntering}`,
-        };
-        const newWrapper = ChildrenWrapperFactory(
-          ({ children }) => {
-            return <div {...propsContainer}>{children}</div>;
-          },
-          key,
-          propsContainer,
-          insertedAt
-        );
-        return [
-          ...screensBeforeChangingStep.slice(0, lastIndex),
-          lastWrapper ||
-            ChildrenWrapperFactory(
-              () => <React.Fragment />,
-              "fallback",
-              {},
-              insertedAt
-            ),
-          newWrapper,
-        ];
-      });
-    }
-    return () => {
-      prevStep.current = step;
-    };
-  }, [step]);
-
-  useEffect(() => {
-    if (childrenWrappers.length === 1 && lockTransitionWidth)
-      containerRef.current!.style.width = "";
-    if (childrenWrappers.length === 1 && lockTransitionHeight)
-      containerRef.current!.style.height = "";
-  }, [childrenWrappers.length !== 1]);
-
-  useEffect(() => {
-    if (
-      props.transitionType === TransitionAnimationTypes.POP_FROM_ELEMENT_ID &&
-      "elementId" in props
-    ) {
-      const element = document.querySelector(
-        `#${props.elementId}`
-      ) as HTMLDivElement;
-
-      if (element) {
-        const { clientWidth, clientHeight } = containerRef.current!;
-
-        const offsetX =
-          element.clientLeft + element.offsetLeft + element.clientWidth / 2;
-        const offsetY =
-          element.clientTop + element.offsetTop + element.clientHeight / 2;
-        const percentX = (offsetX * 100) / clientWidth;
-        const percentY = (offsetY * 100) / clientHeight;
-        preTransitionDetails.current.transformOrigin = `${percentX}% ${percentY}%`;
-
-        Object.assign(containerRef.current!.style, {
-          transformOrigin: `${percentX}% ${percentY}%`,
-        });
-      }
-    } else {
-      Object.assign(containerRef.current!.style, preTransitionDetails.current);
-    }
-
-    if (childrenWrappers.length === 1) {
-      containerRef.current!.style.overflow = "";
-    }
-  }, [childrenWrappers.length]);
-
-  const propsToSpread = { ...props } as any;
-  delete propsToSpread.transitionType;
-  delete propsToSpread.config;
-
-  return (
-    <>
-      <section
-        {...propsToSpread}
-        onClick={(e) => {
-          const {
-            currentTarget: { offsetTop, offsetLeft, clientWidth, clientHeight },
-            clientX,
-            clientY,
-          } = e;
-          const offsetX = clientX - offsetLeft;
-          const offsetY = clientY - offsetTop;
-          const percentX = (offsetX * 100) / clientWidth;
-          const percentY = (offsetY * 100) / clientHeight;
-
-          if (
-            props.transitionType ===
-              TransitionAnimationTypes.POP_FROM_ELEMENT_ID ||
-            props.transitionType ===
-              TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN
-          )
-            preTransitionDetails.current.transformOrigin = `${percentX}% ${percentY}%`;
-          if (props.onClick) props.onClick(e as any);
-        }}
-        data-testid="transition-controller"
-        ref={containerRef}
-        className={`${Styles.section} ${className}`}
-      >
-        {(childrenWrappers as ChildrenWrapper[]).map((Wrapper) => {
-          const childToRender = children.find(
-            (a, i) => (a?.key || i) === Wrapper?.associatedKey
-          );
-          return (
-            <Wrapper key={`${Wrapper!.associatedKey} ${Wrapper.createdAt}`}>
-              <>{childToRender}</>
-            </Wrapper>
-          );
-        })}
-      </section>
-    </>
-  );
-}
-
-export enum TransitionAnimationTypes {
-  SLIDE,
-  POP_FROM_CLICK_ORIGIN,
-  POP_FROM_ELEMENT_ID,
-  FADE,
-  COIN_FLIP,
-  MASK,
-  CUSTOM,
-}
-
-/**
- * Handles the transition between multiple children and recycling of elements
- **/
-const Transition = forwardRef(_Transition);
-export default Transition;

package/src/components/Transition/index.tsx

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

package/src/components/UncontrolledTransition/UncontrolledTransition.ai.md

@@ -1,9 +0,0 @@
-# Animating component transition
-
-When the key changes, a the transition between components will be controlled by UncontrolledTransition
-
-```tsx
-<UncontrolledTransition>
-    <AComponent key={DYNAMIC_KEY}>
-</UncontrolledTransition>
-```

package/src/components/UncontrolledTransition/UncontrolledTransition.sample.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { useState } from "react";
-import UncontrolledTransition from "../UncontrolledTransition";
-import Button from "../Button";
-
-function colorGen() {
-  return [255 * Math.random(), 255 * Math.random(), 255 * Math.random()];
-}
-
-export default function Example() {
-  const [color, setColor] = useState(colorGen);
-  const rgb = `rgb(${color.join(",")})`;
-  return (
-    <UncontrolledTransition>
-      <div
-        key={color.join("")}
-        style={{
-          width: "100vw",
-          height: "100vh",
-          backgroundColor: rgb,
-          textAlign: "center",
-        }}
-      >
-        <Button variant="filled" onClick={() => setColor(colorGen())}>
-          Click to transition
-        </Button>
-        <h2>RGB</h2>
-        <p>{color[0].toFixed(0)}</p>
-        <p>{color[1].toFixed(0)}</p>
-        <p>{color[2].toFixed(0)}</p>
-      </div>
-    </UncontrolledTransition>
-  );
-}

package/src/components/UncontrolledTransition/UncontrolledTransition.tsx

@@ -1,143 +0,0 @@
-import React, {
-  DetailedHTMLProps,
-  ForwardedRef,
-  forwardRef,
-  Key,
-  RefObject,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import Transition from "../Transition";
-import {
-  TransitionProps,
-  TransitionTypeDefinitions,
-} from "../Transition/Transition";
-
-function _UncontrolledTransition(
-  {
-    className = "",
-    contentClassName,
-    children = <React.Fragment key="default"></React.Fragment>,
-    lockTransitionWidth = true,
-    lockTransitionHeight = false,
-    contentStyle,
-    onDiscardStep,
-    ...props
-  }: {
-    className?: string;
-    contentClassName?: string;
-    children?: React.ReactElement;
-    lockTransitionWidth?: boolean;
-    lockTransitionHeight?: boolean;
-    onDiscardStep?: (key: Key) => void;
-  } & Pick<TransitionProps, "contentStyle"> &
-    TransitionTypeDefinitions &
-    Omit<
-      DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>,
-      "className" | "children" | "ref"
-    >,
-  ref: ForwardedRef<{
-    setOrientation: (orientation: "forward" | "backward") => void;
-    sectionRef: RefObject<HTMLDivElement | null>;
-  }>
-) {
-  const sectionRef = useRef<HTMLDivElement>(null);
-  const [{ childStack, offset }, setChildStack] = useState<{
-    childStack: (React.ReactElement & { createdAt: number })[];
-    offset: number;
-  }>(() => ({
-    childStack: [{ ...children, createdAt: Date.now() }],
-    offset: 1,
-  }));
-  const orientation = useRef<"forward" | "backward">("forward");
-  function setOrientation(a: typeof orientation.current) {
-    orientation.current = a;
-  }
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      setOrientation,
-      sectionRef,
-    }),
-    []
-  );
-
-  useLayoutEffect(() => {
-    if (process.env.NODE_ENV !== "production" && !children.key)
-      throw new Error(
-        "The provided child should have a key property, please provide it"
-      );
-    if (childStack.length === 1 && childStack[0].key === children.key) return;
-    if (orientation.current === "forward")
-      setChildStack((p) => ({
-        ...p,
-        childStack: [...p.childStack, { ...children, createdAt: Date.now() }],
-      }));
-    else
-      setChildStack((p) => ({
-        ...p,
-        childStack: [{ ...children, createdAt: Date.now() }, ...p.childStack],
-      }));
-  }, [children.key]);
-
-  useEffect(() => {
-    if (orientation.current === "backward") {
-      setChildStack((prev) => {
-        return {
-          ...prev,
-          offset: prev.childStack.length,
-        };
-      });
-    }
-  }, [childStack.length]);
-
-  childStack.forEach((a, i, arr) => {
-    if (a.key === children.key)
-      arr[i] = { ...children, createdAt: a.createdAt };
-  });
-
-  const predictedStep = childStack.length - offset;
-
-  return (
-    <>
-      {childStack.length ? (
-        <Transition
-          ref={sectionRef}
-          contentStyle={contentStyle}
-          className={className}
-          step={predictedStep}
-          onDiscardStep={(discardedKey, animatedAt) => {
-            setTimeout(() => {
-              if (onDiscardStep) onDiscardStep(discardedKey);
-              orientation.current = "forward";
-              setChildStack((prev) => {
-                return {
-                  childStack: prev.childStack.filter((a) => {
-                    return a.key !== discardedKey || a.createdAt > animatedAt;
-                  }),
-                  offset: prev.offset === 1 ? 1 : prev.offset - 1,
-                };
-              });
-            }, 0)
-          }}
-          lockTransitionWidth={lockTransitionWidth}
-          lockTransitionHeight={lockTransitionHeight}
-          contentClassName={contentClassName}
-          {...props}
-        >
-          {childStack}
-        </Transition>
-      ) : null}
-    </>
-  );
-}
-
-/**
- * This component receives child with key and applies a transition when the key changes, allowing to swap elements with a fine transition.
- **/
-export const UncontrolledTransition = forwardRef(_UncontrolledTransition);
-export default UncontrolledTransition;

package/src/components/UncontrolledTransition/index.tsx

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