@androbinco/library-cli 0.1.0 → 0.2.0

package/src/templates/in-view/in-view-hidden-text.tsx

@@ -0,0 +1,45 @@
+import { Transition } from "motion/react";
+
+import { cn } from "@/common/utils/classname-builder";
+
+import InViewAnimation, { InViewAnimationProps } from "./in-view-animation";
+
+export const InViewHiddenText = ({
+  children,
+  className,
+  transition = {
+    duration: 0.6,
+    ease: "easeOut",
+  },
+  ...props
+}: {
+  children: React.ReactNode;
+  className?: string;
+  transition?: Transition;
+  props?: InViewAnimationProps;
+}) => {
+  return (
+    <div className={cn("overflow-hidden", className)}>
+      <InViewAnimation
+        className={cn("origin-left overflow-hidden", className)}
+        customEffect={{
+          hidden: {
+            y: "99%",
+            opacity: 0,
+            rotate: 5,
+          },
+          visible: {
+            y: 0,
+            opacity: 1,
+            rotate: 0,
+          },
+        }}
+        margin="0%"
+        transition={transition}
+        {...props}
+      >
+        {children}
+      </InViewAnimation>
+    </div>
+  );
+};

package/src/templates/in-view/in-view-stroke-line.tsx

@@ -0,0 +1,29 @@
+import { Transition } from "motion/react";
+
+import { cn } from "@/common/utils/classname-builder";
+
+import InViewAnimation, { InViewAnimationProps } from "./in-view-animation";
+
+export const InViewStrokeLine = ({
+  className,
+  transition,
+  ...props
+}: {
+  className?: string;
+} & InViewAnimationProps) => {
+  return (
+    <InViewAnimation
+      aria-label="separator"
+      aria-roledescription="separator"
+      className={cn("h-px w-full bg-red-950", className)}
+      effect="strokeLine"
+      role="separator"
+      transition={{
+        duration: 0.6,
+        ease: "easeInOut",
+        ...transition,
+      }}
+      {...props}
+    />
+  );
+};

package/src/templates/scroll-tracker/examples/scroll-tracker-showcase.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { motion, MotionValue, useSpring, useTransform } from "motion/react";
+
+import {
+  ScrollTrackerProvider,
+  useScrollTrackerContext,
+} from "../scroll-tracker-provider";
+import { Center } from "@/common/ui/containers/center";
+import { Text } from "@/common/ui/text/text";
+
+/* 
+    This is a scroll tracker component that provides scroll-driven animations.
+    It uses the motion library to track scroll progress and provides a context
+    for child components to access the scroll progress.
+
+    To test it you can just use it like this in any page:
+    <ScrollTrackerShowcase />
+*/
+
+const AnimatedText = ({
+  text,
+  motionValue,
+  offsetIntro,
+  opacityOffset = [0, 0.5, 1],
+  yOffset = [100, -20, 0],
+}: {
+  text: string;
+  motionValue: MotionValue<number>;
+  offsetIntro: [number, number] | [number, number, number];
+  opacityOffset?: [number, number] | [number, number, number];
+  yOffset?: [number, number] | [number, number, number];
+}) => {
+  const animateEntry = useTransform(motionValue, offsetIntro, opacityOffset);
+  const y = useSpring(useTransform(motionValue, offsetIntro, yOffset));
+
+  return (
+    <motion.div style={{ opacity: animateEntry, y }}>
+      <Text className="text-white">{text}</Text>
+    </motion.div>
+  );
+};
+
+const ScrollSection = () => {
+  const { scrollYProgress } = useScrollTrackerContext();
+  const text = "SCROLL DRIVEN ANIMATION".split("");
+  const showImage = useTransform(scrollYProgress, [0.3, 1 * 0.9], [0, 1]);
+  const rotateImage = useTransform(scrollYProgress, [0.3, 1 * 0.9], [0, 360]);
+
+  return (
+    <div className="relative flex h-full w-full flex-col items-center justify-center rounded-2xl border-2 border-fill-brand-primary bg-bg-primary-inverse p-2">
+      <motion.div
+        className="absolute top-0 h-2 w-full bg-red-500"
+        style={{ scaleX: scrollYProgress, transformOrigin: "left center" }}
+      />
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-row gap-0.5">
+          {text.map((char, index) => (
+            <AnimatedText
+              key={index}
+              motionValue={scrollYProgress}
+              offsetIntro={[
+                ((index + 1) / text.length) * 0.3,
+                ((index + 1) / text.length) * 0.5,
+                ((index + 1) / text.length) * 0.9,
+              ]}
+              text={char}
+            />
+          ))}
+        </div>
+        <motion.img
+          alt="scroll-tracker-showcase"
+          className="mx-auto size-40 object-contain"
+          src="/img/good-emoji.png"
+          style={{ opacity: showImage, rotate: rotateImage }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const ScrollTrackerShowcase = () => {
+  return (
+    <div className="w-full">
+      <Text className="mb-4">Scroll Tracker</Text>
+      <ScrollTrackerProvider height={200} offset={["0 0", "1 1"]}>
+        <ScrollSection />
+      </ScrollTrackerProvider>
+    </div>
+  );
+};

package/src/templates/scroll-tracker/scroll-tracker-provider.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { createContext, useContext, useRef } from "react";
+
+import { MotionValue, useScroll } from "motion/react";
+
+import { cn } from "@/common/utils/classname-builder";
+
+type Offset =
+  | [number, number]
+  | [`${number} ${number}`, `${number} ${number}`]
+  | [`${number}`, `${number}`];
+
+type ScrollProviderProps = {
+  height?: number;
+  mobileHeight?: string;
+  children: React.ReactNode;
+  offset?: Offset;
+  className?: string;
+  containerClassName?: string;
+};
+type ScrollTrackerContextType = {
+  scrollYProgress: MotionValue<number>;
+};
+const ScrollTrackerContext = createContext<ScrollTrackerContextType>({
+  scrollYProgress: {} as MotionValue<number>,
+});
+
+export const ScrollTrackerProvider = ({
+  height = 500,
+  mobileHeight,
+  children,
+  className,
+  containerClassName,
+  offset = ["0 0", "1 1"],
+}: ScrollProviderProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({ target: ref, offset });
+
+  return (
+    <ScrollTrackerContext.Provider value={{ scrollYProgress }}>
+      <div
+        ref={ref}
+        className={cn(
+          "h-[var(--tracker-mobile-height)] w-full lg:h-[var(--tracker-height)]",
+          containerClassName
+        )}
+        style={
+          {
+            "--tracker-height": `${height}vh`,
+            "--tracker-mobile-height": `${mobileHeight ?? height}vh`,
+          } as React.CSSProperties
+        }
+      >
+        <div
+          className={cn(
+            "sticky top-0 right-0 left-0 h-screen w-full",
+            className
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </ScrollTrackerContext.Provider>
+  );
+};
+
+export const useScrollTrackerContext = () => {
+  const context = useContext(ScrollTrackerContext);
+
+  if (!context) {
+    throw new Error(
+      "useScrollTracker must be used within a ScrollTrackerProvider"
+    );
+  }
+
+  return context;
+};

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

@@ -0,0 +1,61 @@
+'use client';
+import { Fragment, useRef } from 'react';
+
+import { cn } from '@/common/utils/classname-builder';
+
+import { useTickerClones } from '../hooks/use-ticker-clones';
+import './ticker.keyframes.css';
+
+export const TickerStatic = ({
+  direction = 'right',
+  children,
+  speed = 50,
+}: {
+  direction?: 'left' | 'right';
+  speed?: number;
+  delta?: number;
+  children: React.ReactNode;
+}) => {
+  const tickerClone = useRef<HTMLDivElement>(null);
+  const tickerCard = useRef<HTMLDivElement>(null);
+
+  const { clonesNeeded } = useTickerClones({
+    tickerCard,
+    tickerClone,
+    direction,
+    onCloneWrapper(clone) {
+      clone.classList.remove('animate-base-ticker');
+      clone.classList.remove('animate-base-ticker-left');
+    },
+  });
+
+  const baseTickerClass = cn(
+    'flex w-max flex-row',
+    direction === 'right' ? 'animate-base-ticker' : 'animate-base-ticker-left',
+  );
+  const clonedTickerClass = cn(
+    'absolute top-0 h-full w-max',
+    direction === 'right' ? 'animate-cloned-ticker' : 'animate-cloned-ticker-left',
+  );
+
+  return (
+    <div className="ticker group w-full overflow-hidden" role="group">
+      <div className="relative w-full">
+        <div
+          ref={tickerCard}
+          className={cn(baseTickerClass)}
+          style={{ '--ticker-speed': `${speed}s` } as React.CSSProperties}
+        >
+          {Array.from({ length: clonesNeeded }).map((_, index) => {
+            return <Fragment key={index}>{children}</Fragment>;
+          })}
+        </div>
+        <div
+          ref={tickerClone}
+          className={cn(clonedTickerClass)}
+          style={{ '--ticker-speed': `${speed}s` } as React.CSSProperties}
+        />
+      </div>
+    </div>
+  );
+};

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 };
+};