@androbinco/library-cli 0.1.0 → 0.3.0

package/src/templates/ticker/css-ticker/ticker.keyframes.css

@@ -0,0 +1,86 @@
+.ticker {
+  --ticker-speed: 20s;
+}
+.ticker-slow {
+  --ticker-speed: 100s;
+}
+
+@keyframes base-ticker-right {
+  0% {
+    transform: translateX(0%);
+  }
+
+  50% {
+    transform: translateX(100%);
+  }
+
+  50.001% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}
+@keyframes cloned-ticker-right {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+@keyframes base-ticker-left {
+  0% {
+    transform: translateX(0%);
+  }
+
+  50% {
+    transform: translateX(-100%);
+  }
+
+  50.001% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}
+@keyframes cloned-ticker-left {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-200%);
+  }
+}
+.animate-base-ticker {
+  animation-name: base-ticker-right;
+  animation-duration: var(--ticker-speed);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.animate-cloned-ticker {
+  animation-name: cloned-ticker-right;
+  animation-duration: var(--ticker-speed);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.animate-base-ticker-left {
+  animation-name: base-ticker-left;
+  animation-duration: var(--ticker-speed);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.animate-cloned-ticker-left {
+  animation-name: cloned-ticker-left;
+  animation-duration: var(--ticker-speed);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.animate-pause {
+  animation-play-state: paused;
+}

package/src/templates/ticker/examples/ticker-hover-showcase.home.tsx

@@ -0,0 +1,57 @@
+import { MotionTicker } from "../motion-ticker";
+import { Text } from "@/common/ui/text/text";
+
+/* 
+    This is a ticker component that is used to display a list of items in a ticker.
+    It is a wrapper around the motion library and uses the useMotionValue hook to create the ticker.
+    It is a client component that is used to display a list of items in a ticker.
+
+    To test it you can just use it like this in any page:
+    <TickerHoverShowcaseHome />
+*/
+
+const TickerExampleCard = ({
+  text = "BASIC TICKER EXAMPLE",
+}: {
+  text?: string;
+}) => {
+  return (
+    <div className="border-2 border-x-0 border-fill-brand-primary bg-bg-primary-inverse px-5 py-2">
+      <Text className="capitalize" variant="body.2">
+        {text}
+      </Text>
+    </div>
+  );
+};
+const CardWithSpacingExample = ({
+  text = "CARD WITH SPACING EXAMPLE",
+}: {
+  text?: string;
+}) => {
+  return (
+    <div className="px-1">
+      <div className="border-2 border-fill-brand-primary bg-bg-primary-inverse px-5 py-2">
+        <Text className="capitalize" variant="body.2">
+          {text}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export const TickerHoverShowcaseHome = () => {
+  return (
+    <div className="flex flex-col gap-12">
+      <Text className="px-4 pb-15" variant="title.6">
+        Ticker with hover stop
+      </Text>
+      <MotionTicker>
+        <CardWithSpacingExample text="TICKER EXAMPLE" />
+        <CardWithSpacingExample text="HOVER TICKER" />
+      </MotionTicker>
+      <MotionTicker direction="left">
+        <TickerExampleCard text="TICKER EXAMPLE" />
+      </MotionTicker>
+    </div>
+  );
+};

package/src/templates/ticker/examples/ticker-static-showcase.home.tsx

@@ -0,0 +1,56 @@
+import { TickerStatic } from "../css-ticker/css-ticker";
+import { Text } from "@/common/ui/text/text";
+
+/* 
+    This is a ticker component that is used to display a list of items in a ticker.
+    It is a wrapper around the css library and uses the css animations to create the ticker.
+    It is a client component that is used to display a list of items in a ticker.
+
+    To test it you can just use it like this in any page:  
+*/
+
+const TickerExampleCard = ({
+  text = "BASIC TICKER EXAMPLE",
+}: {
+  text?: string;
+}) => {
+  return (
+    <div className="border-2 border-x-0 border-fill-brand-primary bg-bg-primary-inverse px-5 py-2">
+      <Text className="capitalize" variant="body.2">
+        {text}
+      </Text>
+    </div>
+  );
+};
+const CardWithSpacingExample = ({
+  text = "CARD WITH SPACING EXAMPLE",
+}: {
+  text?: string;
+}) => {
+  return (
+    <div className="px-1">
+      <div className="border-2 border-fill-brand-primary bg-bg-primary-inverse px-5 py-2">
+        <Text className="capitalize" variant="body.2">
+          {text}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export const TickerStaticShowcaseHome = () => {
+  return (
+    <div className="flex flex-col gap-12">
+      <Text className="px-4 pb-15" variant="title.6">
+        Ticker static
+      </Text>
+      <TickerStatic>
+        <TickerExampleCard text="STATIC TICKER EXAMPLE" />
+        <TickerExampleCard text="TICKER" />
+      </TickerStatic>
+      <TickerStatic direction="left">
+        <CardWithSpacingExample text="TICKER EXAMPLE" />
+      </TickerStatic>
+    </div>
+  );
+};

package/src/templates/ticker/hooks/use-ticker-clones.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useTickerClones = ({
+  tickerCard,
+  tickerClone,
+  onCloneWrapper,
+  direction,
+}: {
+  tickerCard: React.RefObject<HTMLDivElement | null>;
+  tickerClone: React.RefObject<HTMLDivElement | null>;
+  onCloneWrapper?: (clone: HTMLElement) => void;
+  direction: 'left' | 'right';
+}) => {
+  const calculatedWidth = useRef(0);
+  const [clonesNeeded, setClonesNeeded] = useState(1);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const sizeCloneNeeded = () => {
+      const tickerCardContent = Array.from(tickerCard.current?.childNodes ?? []).reduce(
+        (acc, child) => {
+          if (child.nodeType === Node.TEXT_NODE) {
+            return acc;
+          }
+
+          return acc + (child as HTMLElement)?.offsetWidth;
+        },
+        0,
+      );
+
+      const tickerCardWidth = tickerCardContent;
+
+      if (!tickerCardWidth) return;
+      calculatedWidth.current = tickerCardWidth;
+      const clonesCalc = Math.ceil(window.outerWidth / tickerCardWidth);
+
+      if (clonesCalc > 1) setClonesNeeded(clonesCalc);
+    };
+
+    sizeCloneNeeded();
+    window.addEventListener('resize', sizeCloneNeeded);
+
+    return () => {
+      window.removeEventListener('resize', sizeCloneNeeded);
+    };
+  }, [tickerCard]);
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const clonedTickerContent = tickerCard.current?.cloneNode(true) as HTMLElement;
+
+    if (!clonedTickerContent) return;
+    if (tickerClone?.current?.childNodes.length) {
+      tickerClone.current.removeChild(tickerClone.current.childNodes[0]);
+    }
+    clonedTickerContent.id = 'ticker-content-clone';
+
+    if (onCloneWrapper) onCloneWrapper(clonedTickerContent);
+
+    const tickerCardWidth = tickerCard.current?.offsetWidth;
+
+    tickerClone.current?.style.setProperty(
+      'left',
+      direction === 'right' ? `-${tickerCardWidth}px` : `${tickerCardWidth}px`,
+      'important',
+    );
+    tickerClone.current?.appendChild(clonedTickerContent);
+  }, [clonesNeeded, tickerCard, tickerClone, direction, onCloneWrapper]);
+
+  return { clonesNeeded, calculatedWidth };
+};

package/src/templates/ticker/hooks/use-ticker-incremental.tsx

@@ -0,0 +1,72 @@
+'use client';
+import { useEffect, useRef } from 'react';
+
+import { MotionValue, useMotionValue, useMotionValueEvent } from 'motion/react';
+
+const directionModifier = {
+  left: false,
+  right: true,
+};
+
+export const useTickerIncremental = ({
+  direction,
+  speed,
+  delta,
+  stopIncrement,
+  onStop,
+}: {
+  speed: number;
+  delta: number;
+  direction: 'left' | 'right';
+  stopIncrement?: boolean;
+  onStop?: (x: MotionValue<number>) => void;
+}) => {
+  const x = useMotionValue(0);
+  const lastTimeRef = useRef<number>(0);
+  const fpsRef = useRef(60);
+  const translateX = useMotionValue('0%');
+  const clonedTranslateX = useMotionValue('0%');
+  const requestRef = useRef<number>(0);
+
+  useMotionValueEvent(x, 'change', (value) => {
+    const modifier = directionModifier[direction] ? 1 : -1;
+
+    translateX.set(`${modifier * (value > 100 ? value - 200 : value)}%`);
+    clonedTranslateX.set(`${modifier * value}%`);
+  });
+
+  useEffect(() => {
+    if (stopIncrement) {
+      cancelAnimationFrame(requestRef.current);
+      onStop?.(x);
+
+      return;
+    }
+    const animate = (now: number) => {
+      const currentX = x.get();
+      const deltaMs = now - lastTimeRef.current;
+
+      lastTimeRef.current = now;
+
+      fpsRef.current = 1000 / deltaMs;
+
+      if (currentX >= 200) {
+        x.set(0);
+      } else {
+        const newX = Number((currentX + speed * delta).toFixed(4));
+
+        x.set(newX);
+      }
+
+      requestRef.current = requestAnimationFrame(animate);
+    };
+
+    requestRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(requestRef.current);
+    };
+  }, [speed, delta, x, stopIncrement, onStop]);
+
+  return { x, x1: translateX, x2: clonedTranslateX, fps: fpsRef };
+};

package/src/templates/ticker/motion-ticker.tsx

@@ -0,0 +1,93 @@
+'use client';
+import { Fragment, useRef, useState } from 'react';
+
+import { animate, motion, useInView } from 'motion/react';
+
+import { cn } from '@/common/utils/classname-builder';
+
+import { useTickerClones } from './hooks/use-ticker-clones';
+import { useTickerIncremental } from './hooks/use-ticker-incremental';
+type MotionTickerProps = {
+  direction?: 'left' | 'right';
+  speed?: number;
+  delta?: number;
+  className?: string;
+  wrapperClassName?: string;
+  children: React.ReactNode;
+  hoverStop?: boolean;
+};
+
+export const MotionTicker = ({
+  direction = 'right',
+  speed = 1,
+  delta = 0.05,
+  className,
+  children,
+  wrapperClassName,
+  hoverStop = true,
+}: MotionTickerProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tickerClone = useRef<HTMLDivElement>(null);
+  const cardWrapper = useRef<HTMLDivElement>(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const isInView = useInView(containerRef, {
+    once: false,
+    margin: '50% 0%',
+  });
+  const { clonesNeeded } = useTickerClones({ tickerCard: cardWrapper, tickerClone, direction });
+  const calculateProportionalDuration = (distance: number, fps?: number) => {
+    const distancePerFrame = speed * delta;
+    const framesNeeded = distance / distancePerFrame;
+
+    return framesNeeded / (fps ?? 60); // calc is based on 60fps
+  };
+  const { x1, x2, fps } = useTickerIncremental({
+    speed,
+    direction,
+    delta,
+    stopIncrement: isHovering || !isInView,
+    onStop: async (motionValue) => {
+      if (!isInView) return;
+      const distance = 3;
+      const EASE_OUT_COMPENSATION = 1.15;
+      const duration =
+        calculateProportionalDuration(distance, fps?.current) * EASE_OUT_COMPENSATION;
+
+      return await animate(motionValue, motionValue.get() + distance, {
+        duration,
+        ease: 'easeOut',
+      });
+    },
+  });
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('group relative w-full overflow-hidden', wrapperClassName)}
+      role="group"
+      onMouseEnter={() => {
+        if (!hoverStop) return;
+        setIsHovering(true);
+      }}
+      onMouseLeave={() => {
+        if (!hoverStop) return;
+        setIsHovering(false);
+      }}
+    >
+      <motion.div
+        ref={cardWrapper}
+        className={cn('flex w-max flex-row', className)}
+        style={{ x: x1 }}
+      >
+        {Array.from({ length: clonesNeeded }).map((_, index) => {
+          return <Fragment key={index}>{children}</Fragment>;
+        })}
+      </motion.div>
+      <motion.div
+        ref={tickerClone}
+        className={cn('absolute top-0 h-full w-max', className)}
+        style={{ x: x2 }}
+      />
+    </div>
+  );
+};