@androbinco/library-cli 0.1.0 → 0.3.0

package/src/templates/in-view/in-view-grid.tsx

@@ -0,0 +1,81 @@
+'use client';
+import { Children, useEffect, useState } from 'react';
+
+import { motion, Transition } from 'motion/react';
+
+import { cn } from '@/common/utils/classname-builder';
+
+import IN_VIEW_ANIMATIONS from './data.in-view';
+
+type GridInViewProps = {
+  breakpoint?: number;
+  children: React.ReactNode;
+  className?: string;
+  effect?: keyof typeof IN_VIEW_ANIMATIONS;
+  columns?: number | { desktop: number; mobile: number };
+  delayDelta?: number;
+  delayByColumn?: boolean;
+  transition?: Omit<Transition, 'delay'>;
+  columnsMobile?: number;
+};
+
+export const GridInView = ({
+  children,
+  className,
+  effect = 'fadeInUp',
+  delayDelta = 0.25,
+  delayByColumn = true,
+  transition = {
+    duration: 0.5,
+    ease: 'easeOut',
+  },
+  breakpoint = 1024,
+  columns = 5,
+}: GridInViewProps) => {
+  const childrenArray = Children.toArray(children);
+  const isColumnsObject = typeof columns === 'object';
+  const [columnsValue, setColumnsValue] = useState(
+    isColumnsObject ? columns.desktop : columns
+  );
+
+  useEffect(() => {
+    if (!delayByColumn) return;
+    if (typeof window === 'undefined' || !isColumnsObject) return;
+    if (window.innerWidth < breakpoint) setColumnsValue(columns.mobile);
+    else setColumnsValue(columns.desktop);
+  }, [columns, isColumnsObject, delayByColumn, breakpoint]);
+  const delayCount = (index: number) =>
+    delayByColumn ? index % columnsValue : index;
+
+  return (
+    <div
+      className={cn(
+        'grid gap-4',
+        '[grid-template-columns:repeat(var(--columns),1fr)]',
+        'max-lg:[grid-template-columns:repeat(var(--columns-mobile),1fr)]',
+        className,
+      )}
+      style={
+        {
+          '--columns': isColumnsObject ? columns.desktop : columns,
+          '--columns-mobile': isColumnsObject ? columns.mobile : columns,
+        } as React.CSSProperties
+      }
+    >
+      {childrenArray.map((item, index) => (
+        <motion.div
+          key={index}
+          initial={IN_VIEW_ANIMATIONS[effect].hidden}
+          transition={{
+            ...transition,
+            delay: delayCount(index) * delayDelta,
+          }}
+          viewport={{ once: true, margin: '-10% 0%' }}
+          whileInView={IN_VIEW_ANIMATIONS[effect].visible}
+        >
+          {item}
+        </motion.div>
+      ))}
+    </div>
+  );
+};

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,30 @@
+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"
+      margin="0%"
+      role="separator"
+      transition={{
+        duration: 0.6,
+        ease: 'easeInOut',
+        ...transition,
+      }}
+      {...props}
+    />
+  );
+};

package/src/templates/lenis/examples/providers.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import React from 'react';
+
+import { QueryClientProvider } from '@tanstack/react-query';
+
+import { LenisProvider } from '@/common/animations/smooth-scroll/lenis.provider';
+import { getQueryClient } from '@/common/hooks/get-query-client';
+
+import { ThemeProvider } from './theme-provider';
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  const queryClient = getQueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider disableTransitionOnChange enableSystem attribute="class" defaultTheme="system">
+        <LenisProvider>{children}</LenisProvider>
+        {/* <ReactQueryDevtools /> */}
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}

package/src/templates/lenis/lenis-provider.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { createContext, useEffect, useState } from 'react';
+
+import { usePathname } from 'next/navigation';
+
+import Lenis from 'lenis';
+
+type LenisContextType = {
+  lenis: Lenis | null;
+};
+
+const LenisContext = createContext<LenisContextType | undefined>(undefined);
+
+export const LenisProvider = ({ children }: { children: React.ReactNode }) => {
+  const [lenis, setLenis] = useState<Lenis | null>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    lenis?.scrollTo(0, { immediate: true });
+  }, [pathname, lenis]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const lenisInstance = new Lenis({
+      lerp: 0.1,
+      smoothWheel: true,
+    });
+
+    setLenis(lenisInstance);
+    const raf = (time: number) => {
+      lenisInstance.raf(time);
+      requestAnimationFrame(raf);
+    };
+
+    const requestId = requestAnimationFrame(raf);
+
+    return () => {
+      lenisInstance.destroy();
+      cancelAnimationFrame(requestId);
+      setLenis(null);
+    };
+  }, []);
+
+  return <LenisContext.Provider value={{ lenis }}>{children}</LenisContext.Provider>;
+};

package/src/templates/scroll-components/hooks/use-client-dimensions.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export const useClientDimensions = () => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    setDimensions({ width: window.innerWidth, height: window.innerHeight });
+    window.addEventListener('resize', () => {
+      setDimensions({ width: window.innerWidth, height: window.innerHeight });
+    });
+
+    return () => {
+      window.removeEventListener('resize', () => {
+        setDimensions({ width: window.innerWidth, height: window.innerHeight });
+      });
+    };
+  }, []);
+
+  return dimensions;
+};

package/src/templates/scroll-components/parallax/examples/parallax-showcase.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { Parallax } from "../parallax/parallax";
+import { Text } from "@/common/ui/text/text";
+
+export const ParallaxShowcase = () => {
+  return (
+    <div className="grid gap-10">
+      <div className="flex flex-col justify-center gap-2 py-3">
+        <Text className="px-8 max-lg:px-4" variant="title.6">
+          Scroll Parallax
+        </Text>
+      </div>
+      <div className="flex flex-col gap-0">
+        <Parallax.Root className="relative h-screen w-full">
+          <Parallax.Image
+            alt="parallax-image"
+            imageClassName="h-screen w-full object-cover"
+            src="https://storage.googleapis.com/testing-mets-bucket/Players_Family_Lounge_21537_d8a8b086cb/Players_Family_Lounge_21537_d8a8b086cb.jpg"
+          />
+        </Parallax.Root>
+        <Parallax.Root className="relative h-[90vh] w-full">
+          <Parallax.Image
+            alt="parallax-image"
+            imageClassName="w-full object-cover"
+            src="https://storage.googleapis.com/testing-mets-bucket/Players_Family_Lounge_21564_3de5bc0bed/Players_Family_Lounge_21564_3de5bc0bed.jpg"
+          />
+        </Parallax.Root>
+        <Parallax.Root className="relative h-[90vh] w-full">
+          <Parallax.Image
+            alt="parallax-image"
+            imageClassName="w-full object-cover"
+            src="https://storage.googleapis.com/testing-mets-bucket/Delta_Sky360_Club_21192_2cee5eec25/Delta_Sky360_Club_21192_2cee5eec25.jpg"
+          />
+        </Parallax.Root>
+      </div>
+      <div className="mx-auto w-full max-w-container">
+        <div className="flex flex-row flex-wrap items-center justify-between gap-4">
+          <div className="flex flex-col items-center gap-2">
+            <Parallax.Root
+              easing="ease-in"
+              offset="200px"
+              className="aspect-[9/16] max-h-150 max-w-100 rounded-2xl overflow-hidden"
+            >
+              <Parallax.Image
+                alt="parallax-image"
+                imageClassName="h-full w-full object-cover"
+                easing="ease-in"
+                src="/img/gallery/gallery-example3.jpg"
+              />
+            </Parallax.Root>
+            <Text>Image text</Text>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Parallax.Root
+              className="aspect-[9/16] max-h-150 max-w-100 rounded-2xl overflow-hidden"
+              easing="ease-in-out"
+              offset="20%"
+            >
+              <Parallax.Image
+                alt="parallax-image"
+                imageClassName="h-full w-full object-cover"
+                easing="ease-in-out"
+                src="/img/gallery/gallery-example2.jpg"
+              />
+            </Parallax.Root>
+            <Text>Image text</Text>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Parallax.Root
+              className="aspect-[9/16] max-h-150 max-w-100 rounded-2xl overflow-hidden"
+              easing="ease-out"
+              offset="10%"
+            >
+              <Parallax.Image
+                alt="parallax-image"
+                imageClassName="h-full w-full object-cover"
+                easing="ease-out"
+                src="/img/gallery/gallery-example1.jpg"
+              />
+            </Parallax.Root>
+            <Text>Image text</Text>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/templates/scroll-components/parallax/parallax.css

@@ -0,0 +1,36 @@
+.parallax-root {
+  position: relative;
+  --parallax-offset: 20%;
+  view-timeline-name: --parallax-tracking;
+}
+
+@keyframes parallax-image {
+  from {
+    transform: translateY(calc((var(--parallax-offset) / 2) * -1));
+  }
+  to {
+    transform: translateY(calc(var(--parallax-offset) / 2));
+  }
+}
+.parallax-container {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.parallax-img {
+  width: 100%;
+  display: block;
+  --calc-height: calc(100% + var(--parallax-offset));
+  height: var(--calc-height);
+  position: relative;
+  animation-timeline: --parallax-tracking;
+  animation-timing-function: linear;
+  animation-range: entry calc(100vh - 100%) exit calc(100vh + (100vh - 100%));
+  top: calc((var(--parallax-offset) / 2) * -1);
+  /* top:0%; */
+  animation-name: parallax-image;
+  animation-fill-mode: both;
+  animation-duration: 1ms;
+  object-fit: cover;
+}

package/src/templates/scroll-components/parallax/parallax.tsx

@@ -0,0 +1,67 @@
+import { cn } from "@/common/utils/classname-builder";
+import "./parallax.css";
+
+type Easing = "linear" | "ease-in-out" | "ease-in" | "ease-out";
+const ParallaxRoot = ({
+  className,
+  children,
+  offset = "200px",
+  easing = "linear",
+}: {
+  className?: string;
+  children: React.ReactNode;
+  easing?: Easing;
+  offset?:
+    | `${number}px`
+    | `${number}%`
+    | `${number}vh`
+    | `${number}vw`
+    | `${number}em`
+    | `${number}rem`
+    | `${number}ex`
+    | `${number}ch`;
+}) => {
+  return (
+    <div
+      className={cn("parallax-root h-max w-max", className)}
+      style={
+        {
+          "--easing": easing,
+          "--parallax-offset": offset,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+};
+
+const ParallaxImage = ({
+  className,
+  src,
+  imageClassName,
+  alt,
+  easing = "linear",
+}: {
+  className?: string;
+  src: string;
+  imageClassName?: string;
+  easing?: Easing;
+  alt: string;
+}) => {
+  return (
+    <div className={cn("parallax-container h-full w-full", className)}>
+      <img
+        alt={alt}
+        className={cn("parallax-img", imageClassName)}
+        src={src}
+        style={{ "--easing": easing } as React.CSSProperties}
+      />
+    </div>
+  );
+};
+
+export const Parallax = {
+  Root: ParallaxRoot,
+  Image: ParallaxImage,
+};

package/src/templates/scroll-components/scale-gallery/components/expanding-element.tsx

@@ -0,0 +1,40 @@
+import { motion, useTransform } from 'motion/react';
+
+import { cn } from '@/common/utils/classname-builder';
+import { useScrollTrackerContext } from '../../scroll-tracker-provider';
+
+export const ExpandingElement = ({
+  scaleOffset,
+  height,
+  children,
+  widthOffset,
+  className,
+}: {
+  scaleOffset: [number, number, number];
+  widthOffset: [number, number, number];
+  height: number | string;
+  className?: string;
+  children?: React.ReactNode;
+}) => {
+  const { scrollYProgress } = useScrollTrackerContext();
+
+  const width = useTransform(scrollYProgress, scaleOffset, widthOffset);
+
+  return (
+    <div className="absolute inset-1/2 -translate-x-1/2 -translate-y-1/2" style={{ height }}>
+      <motion.div
+        className="absolute inset-1/2 flex h-full -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden"
+        style={{ width, height }}
+      >
+        <div
+          className={cn(
+            'absolute inset-1/2 h-full w-full min-w-100 -translate-x-1/2 -translate-y-1/2 object-cover',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </motion.div>
+    </div>
+  );
+};

package/src/templates/scroll-components/scale-gallery/examples/scale-gallery-showcase.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { Text } from "@/common/ui/text/text";
+
+import { ScrollTrackerProvider } from "../scroll-tracker-provider";
+import { ExpandingElement } from "../scale-gallery/components/expanding-element";
+import { useClientDimensions } from "../hooks/use-client-dimensions";
+
+export const ScaleGalleryShowcase = () => {
+  const { width, height } = useClientDimensions();
+
+  return (
+    <div className="space-y-12">
+      <div className="h-screen flex items-center justify-center bg-bg-primary">
+        <Text variant="title.4">Scale Gallery Example</Text>
+      </div>
+
+      <ScrollTrackerProvider height={500} offset={["0 0", "1 1"]}>
+        <Text className="max-lg:px-4 px-8 mb-8" variant="title.6">
+          Gallery with Scale Animation
+        </Text>
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <ExpandingElement
+            className="flex flex-col items-center justify-between gap-2"
+            height={height * 0.5}
+            scaleOffset={[0.05, 0.2, 0.4]}
+            widthOffset={[0, width / 2, width * 0.8]}
+          >
+            <img
+              alt="gallery-1"
+              className="h-full w-full object-cover rounded-lg"
+              src="https://images.pexels.com/photos/34533069/pexels-photo-34533069.jpeg"
+            />
+          </ExpandingElement>
+
+          <ExpandingElement
+            className="flex items-center justify-center"
+            height={height * 0.5}
+            scaleOffset={[0.3, 0.5, 0.7]}
+            widthOffset={[0, width / 2, width * 0.8]}
+          >
+            <img
+              alt="gallery-2"
+              className="h-full w-full object-cover rounded-lg"
+              src="https://images.pexels.com/photos/34712722/pexels-photo-34712722.jpeg"
+            />
+          </ExpandingElement>
+
+          <ExpandingElement
+            className="flex items-center justify-center"
+            height={height * 0.5}
+            scaleOffset={[0.5, 0.8, 0.97]}
+            widthOffset={[0, width / 2, width * 0.8]}
+          >
+            <img
+              alt="gallery-3"
+              className="h-full w-full object-cover rounded-lg"
+              src="https://images.pexels.com/photos/3833517/pexels-photo-3833517.jpeg"
+            />
+          </ExpandingElement>
+        </div>
+      </ScrollTrackerProvider>
+
+      <div className="h-screen flex items-center justify-center bg-bg-primary">
+        <Text variant="title.4">Gallery ends here</Text>
+      </div>
+    </div>
+  );
+};

package/src/templates/scroll-components/scale-gallery/scale-gallery.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { Text } from '@/common/ui/text/text';
+
+import { ScrollTrackerProvider } from '../scroll-tracker-provider';
+import { useClientDimensions } from '../hooks/use-client-dimensions';
+
+import { ExpandingElement } from './components/expanding-element';
+
+export const ScaleGallery = () => {
+  const { width, height } = useClientDimensions();
+
+  return (
+    <ScrollTrackerProvider height={500} offset={['0 0', '1 1']}>
+      <Text className="max-lg:px-4 px-8" variant="title.6">
+        Scale Gallery
+      </Text>
+      <div className='flex h-full w-full flex-col items-center justify-center'>
+        <ExpandingElement
+          className="flex flex-col items-center justify-between gap-2"
+          height={height * 0.5}
+          scaleOffset={[0.05, 0.2, 0.4]}
+          widthOffset={[0, width / 2, width * 0.8]}
+        >
+          <img
+            alt="gallery-image-1"
+            className="h-full w-full object-cover"
+            src="/img/gallery/gallery-example1.jpg"
+          />
+        </ExpandingElement>
+        <ExpandingElement
+          className="flex items-center justify-center"
+          height={height * 0.5}
+          scaleOffset={[0.3, 0.5, 0.7]}
+          widthOffset={[0, width / 2, width * 0.8]}
+        >
+          <img
+            alt="gallery-image-2"
+            className="h-full w-full object-cover"
+            src="https://images.pexels.com/photos/34533069/pexels-photo-34533069.jpeg"
+          />
+        </ExpandingElement>
+        <ExpandingElement
+          className="flex items-center justify-center"
+          height={height * 0.5}
+          scaleOffset={[0.5, 0.8, 0.97]}
+          widthOffset={[0, width / 2, width * 0.8]}
+        >
+          <img
+            alt="gallery-image-3"
+            className="h-full w-full object-cover"
+            src="https://images.pexels.com/photos/34712722/pexels-photo-34712722.jpeg"
+          />
+        </ExpandingElement>
+      </div>
+    </ScrollTrackerProvider>
+  );
+};

package/src/templates/scroll-components/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;
+};