@androbinco/library-cli 0.2.0 → 0.3.0

package/src/templates/faqs-accordion/examples/faqs-showcase.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { FaqsAccordion, MOCK_FAQS_DATA } from '../faqs-accordion';
+
+/**
+ * Example showcase for FaqsAccordion component
+ *
+ * This simulates a Strapi API call with mock data.
+ * In production, replace MOCK_FAQS_DATA with:
+ *
+ * const response = await fetch('your-strapi-url/api/faqs?populate=questions');
+ * const faqs = await response.json();
+ */
+export default function FaqsShowcase() {
+  // Simulating Strapi response with mock data
+  const faqsData = MOCK_FAQS_DATA;
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="container mx-auto px-4">
+        <h1 className="mb-12 text-center text-4xl font-bold">
+          FAQs Accordion Example
+        </h1>
+
+        <FaqsAccordion faqs={faqsData} />
+
+        {/* Example with custom styling */}
+        <div className="mt-16">
+          <h2 className="mb-8 text-center text-3xl font-bold">
+            Custom Styled Version
+          </h2>
+          <FaqsAccordion
+            faqs={faqsData}
+            className="rounded-lg bg-white p-8 shadow-lg"
+            questionClassName="text-blue-600"
+            answerClassName="text-gray-700"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/templates/faqs-accordion/faqs-accordion.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import * as Accordion from '@radix-ui/react-accordion';
+import { FaqsAccordionProps } from './types';
+
+const ChevronDownIcon = ({ className }: { className?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M6 9L12 15L18 9"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const FaqsAccordion = ({
+  faqs,
+  className = '',
+  questionClassName = '',
+  answerClassName = '',
+}: FaqsAccordionProps) => {
+  return (
+    <div className={`mx-auto w-full max-w-[910px] ${className}`}>
+      <h2 className="mb-8 text-3xl font-bold">{faqs.title}</h2>
+
+      <Accordion.Root type="single" collapsible className="w-full">
+        {faqs.questions.map((faq, index) => (
+          <div key={faq.id}>
+            <Accordion.Item value={`item-${faq.id}`} className="border-b">
+              <Accordion.Header>
+                <Accordion.Trigger
+                  className={`group flex w-full items-center justify-between py-6 text-left transition-all hover:opacity-80 ${questionClassName}`}
+                >
+                  <span className="text-lg font-semibold">{faq.question}</span>
+                  <ChevronDownIcon className="transition-transform duration-300 group-data-[state=open]:rotate-180" />
+                </Accordion.Trigger>
+              </Accordion.Header>
+
+              <Accordion.Content
+                className={`overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down ${answerClassName}`}
+              >
+                <div className="pb-6 text-base text-gray-600">
+                  {faq.answer}
+                </div>
+              </Accordion.Content>
+            </Accordion.Item>
+          </div>
+        ))}
+      </Accordion.Root>
+    </div>
+  );
+};
+
+export default FaqsAccordion;
+
+export type {
+  FaqsAccordionProps,
+  FaqsResponse,
+  FaqQuestion,
+} from './types';
+export { MOCK_FAQS_DATA } from './mock-data';

package/src/templates/faqs-accordion/mock-data.ts

@@ -0,0 +1,38 @@
+import { FaqsResponse } from './types';
+
+export const MOCK_FAQS_DATA: FaqsResponse = {
+  id: 1,
+  title: 'Frequently Asked Questions',
+  questions: [
+    {
+      id: 1,
+      question: 'What is the return policy?',
+      answer:
+        'You can return any item within 30 days of purchase for a full refund. Items must be in original condition with tags attached.',
+    },
+    {
+      id: 2,
+      question: 'How long does shipping take?',
+      answer:
+        'Standard shipping takes 5-7 business days. Express shipping is available and takes 2-3 business days.',
+    },
+    {
+      id: 3,
+      question: 'Do you ship internationally?',
+      answer:
+        'Yes, we ship to over 50 countries worldwide. International shipping times vary by location.',
+    },
+    {
+      id: 4,
+      question: 'How do I track my order?',
+      answer:
+        'Once your order ships, you\'ll receive a tracking number via email. You can use this to track your package on our website.',
+    },
+    {
+      id: 5,
+      question: 'What payment methods do you accept?',
+      answer:
+        'We accept all major credit cards, PayPal, Apple Pay, and Google Pay for your convenience.',
+    },
+  ],
+};

package/src/templates/faqs-accordion/types.ts

@@ -0,0 +1,18 @@
+export type FaqQuestion = {
+  id: number;
+  question: string;
+  answer: string;
+};
+
+export type FaqsResponse = {
+  id: number;
+  title: string;
+  questions: FaqQuestion[];
+};
+
+export type FaqsAccordionProps = {
+  faqs: FaqsResponse;
+  className?: string;
+  questionClassName?: string;
+  answerClassName?: string;
+};

package/src/templates/in-view/data.in-view.ts

@@ -49,7 +49,7 @@ const IN_VIEW_ANIMATIONS = {
   },
   strokeLine: {
     hidden: {
-      scaleX: 0,
+      scaleX: 0.001,
       transformOrigin: 'left center',
     },
     visible: {

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

@@ -1,19 +1,19 @@
-"use client";
-import { FC, ReactNode } from "react";
+'use client';
+import { FC, ReactNode } from 'react';
 
 import {
   motion,
   MotionProps,
   TargetAndTransition,
   Transition,
-} from "motion/react";
+} from 'motion/react';
 
-import IN_VIEW_ANIMATIONS from "./data.in-view";
+import IN_VIEW_ANIMATIONS from './data.in-view';
 
 const transitionsDefault: Transition = {
   duration: 0.6,
   delay: 0,
-  ease: "easeInOut",
+  ease: 'easeInOut',
 };
 
 export type InViewAnimationProps = {
@@ -33,11 +33,11 @@ export type InViewAnimationProps = {
   React.HTMLAttributes<HTMLDivElement>;
 
 const InViewAnimation: FC<InViewAnimationProps> = ({
-  margin = "-10% 0%",
+  margin = '-10% 0%',
   execute = true,
   transition = {},
   customEffect,
-  effect = "fadeInUp",
+  effect = 'fadeInUp',
   once = true,
   style,
   className,

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

@@ -1,62 +1,64 @@
-"use client";
-import { Children, useEffect, useState } from "react";
+'use client';
+import { Children, useEffect, useState } from 'react';
 
-import { motion, Transition } from "motion/react";
+import { motion, Transition } from 'motion/react';
 
-import { cn } from "@/common/utils/classname-builder";
+import { cn } from '@/common/utils/classname-builder';
 
-import IN_VIEW_ANIMATIONS from "./data.in-view";
+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">;
+  transition?: Omit<Transition, 'delay'>;
   columnsMobile?: number;
 };
 
 export const GridInView = ({
   children,
   className,
-  effect = "fadeInUp",
-  delayDelta = 0.3,
+  effect = 'fadeInUp',
+  delayDelta = 0.25,
   delayByColumn = true,
   transition = {
     duration: 0.5,
-    ease: "easeOut",
+    ease: 'easeOut',
   },
+  breakpoint = 1024,
   columns = 5,
 }: GridInViewProps) => {
   const childrenArray = Children.toArray(children);
-  const isColumnsObject = typeof columns === "object";
+  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 < 1024) setColumnsValue(columns.mobile);
+    if (typeof window === 'undefined' || !isColumnsObject) return;
+    if (window.innerWidth < breakpoint) setColumnsValue(columns.mobile);
     else setColumnsValue(columns.desktop);
-  }, [columns, isColumnsObject, delayByColumn]);
+  }, [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
+        '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,
+          '--columns': isColumnsObject ? columns.desktop : columns,
+          '--columns-mobile': isColumnsObject ? columns.mobile : columns,
         } as React.CSSProperties
       }
     >
@@ -68,7 +70,7 @@ export const GridInView = ({
             ...transition,
             delay: delayCount(index) * delayDelta,
           }}
-          viewport={{ once: true, margin: "-10% 0%" }}
+          viewport={{ once: true, margin: '-10% 0%' }}
           whileInView={IN_VIEW_ANIMATIONS[effect].visible}
         >
           {item}

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

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

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

@@ -1,8 +1,8 @@
-import { Transition } from "motion/react";
+import { Transition } from 'motion/react';
 
-import { cn } from "@/common/utils/classname-builder";
+import { cn } from '@/common/utils/classname-builder';
 
-import InViewAnimation, { InViewAnimationProps } from "./in-view-animation";
+import InViewAnimation, { InViewAnimationProps } from './in-view-animation';
 
 export const InViewStrokeLine = ({
   className,
@@ -15,12 +15,13 @@ export const InViewStrokeLine = ({
     <InViewAnimation
       aria-label="separator"
       aria-roledescription="separator"
-      className={cn("h-px w-full bg-red-950", className)}
+      className={cn('h-px w-full bg-red-950', className)}
       effect="strokeLine"
+      margin="0%"
       role="separator"
       transition={{
         duration: 0.6,
-        ease: "easeInOut",
+        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,
+};