@androbinco/library-cli 0.1.0 → 0.3.0

package/src/templates/carousel/components/pagination/progress/use-slide-progress.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useSlideProgress = ({ isActive }: { isActive: boolean }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const barRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!isActive) return;
+    const cancelDrag = () => setIsDragging(false);
+
+    if (isDragging) {
+      document.body.addEventListener('mouseup', cancelDrag);
+      document.body.addEventListener('touchend', cancelDrag);
+      barRef.current?.style.setProperty('cursor', 'grabbing');
+      document.body.style.setProperty('cursor', 'grabbing');
+    }
+    if (!isDragging) {
+      document.body.removeEventListener('mouseup', cancelDrag);
+      document.body.removeEventListener('touchend', cancelDrag);
+      document.body.style.setProperty('cursor', 'default');
+      barRef.current?.style.setProperty('cursor', 'grab');
+    }
+
+    return () => {
+      document.body.removeEventListener('mouseup', cancelDrag);
+      document.body.removeEventListener('touchend', cancelDrag);
+    };
+  }, [isDragging, isActive]);
+
+  return { isDragging, barRef, setIsDragging };
+};

package/src/templates/carousel/components/pagination.tsx

@@ -1,89 +1,54 @@
+'use client';
 import React from 'react';
 
-import { cva, VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/common/utils/classname-builder';
-
 import { useCarouselContext } from './provider/carousel.provider';
 
-export const Pagination: React.FC<
-  React.HTMLAttributes<HTMLDivElement> & { type?: 'dot' | 'number' | 'progress' }
-> = ({ className, type = 'dot', ...props }) => {
+import { BulletPagination, DotPaginationProps } from './pagination/bullet.pagination.carousel';
+import { NumberPagination, NumberPaginationProps } from './pagination/number.pagination.carousel';
+import {
+  ProgressPagination,
+  ProgressPaginationProps,
+} from './pagination/progress/progress.pagination.carousel';
+
+type OmitContext<T> = Omit<T, 'selectedIndex' | 'scrollSnaps' | 'onDotButtonClick'>;
+type PaginationProps =
+  | ({ type: 'number' } & OmitContext<NumberPaginationProps>)
+  | ({ type: 'progress' } & OmitContext<ProgressPaginationProps>)
+  | ({ type: 'bullet' } & OmitContext<DotPaginationProps>);
+
+export const Pagination = (props: PaginationProps) => {
+  const { type, variant, className, ...restProps } = props;
   const { scrollSnaps, selectedIndex, onDotButtonClick } = useCarouselContext();
 
-  if (type === 'number')
-    return (
-      <div className={cn('mx-auto flex w-max gap-2', className)} {...props}>
-        <p className="text-body-2 text-grey-50-15">
-          {selectedIndex + 1} / {scrollSnaps.length}
-        </p>
-      </div>
-    );
-  if (type === 'progress')
-    return (
-      <div
-        className={cn(
-          'relative mx-auto flex h-2 w-200 max-w-full gap-2 overflow-hidden rounded-full bg-bg-primary',
-          className,
-        )}
-        {...props}
-      >
-        <div
-          className="pointer-events-none absolute bottom-0 left-0 h-2 w-full bg-fill-brand-primary transition-all duration-300 ease-out"
-          style={{
-            transformOrigin: 'left',
-            transform: `scaleX(${(selectedIndex + 1) / scrollSnaps.length})`,
-          }}
-        />
-        {scrollSnaps.map((_, index) => (
-          <div
-            key={index}
-            className="h-2 w-full cursor-pointer"
-            onClick={() => onDotButtonClick(index)}
-          />
-        ))}
-      </div>
-    );
-
-  if (type === 'dot')
-    return (
-      <div className={cn('mx-auto flex w-max gap-2', className)} {...props}>
-        {scrollSnaps.map((_, index) => (
-          <DotButton key={index} index={index} variant="primary" />
-        ))}
-      </div>
-    );
-};
-
-type DotButtonVariants = VariantProps<typeof dotButtonVariants>['variant'];
-const dotButtonVariants = cva(
-  'size-3 cursor-pointer rounded-full transition-all duration-300 ease-out focus:outline-2',
-  {
-    variants: {
-      variant: {
-        primary: 'bg-fill-brand-primary',
-      },
-      selected: {
-        true: 'w-9 !bg-amber-950',
-        false: '',
-      },
-    },
-  },
-);
-
-export const DotButton: React.FC<{ index: number; variant: DotButtonVariants }> = ({
-  index,
-  variant = 'primary',
-  ...restProps
-}) => {
-  const { selectedIndex, onDotButtonClick } = useCarouselContext();
-
-  return (
-    <button
-      className={dotButtonVariants({ variant, selected: selectedIndex === index })}
-      disabled={selectedIndex === index}
-      onClick={() => onDotButtonClick(index)}
-      {...restProps}
-    />
-  );
+  const paginationComponents = {
+    number: () => (
+      <NumberPagination
+        className={className}
+        scrollSnaps={scrollSnaps}
+        selectedIndex={selectedIndex}
+        variant={variant as NumberPaginationProps['variant']}
+        {...restProps}
+      />
+    ),
+    progress: () => (
+      <ProgressPagination
+        className={className}
+        scrollSnaps={scrollSnaps}
+        selectedIndex={selectedIndex}
+        variant={variant as ProgressPaginationProps['variant']}
+        onDotButtonClick={onDotButtonClick}
+        {...restProps}
+      />
+    ),
+    bullet: () => (
+      <BulletPagination
+        className={className}
+        scrollSnaps={scrollSnaps}
+        variant={variant as DotPaginationProps['variant']}
+        {...restProps}
+      />
+    ),
+  } as const;
+
+  return paginationComponents[type]();
 };

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

@@ -0,0 +1,89 @@
+const IN_VIEW_ANIMATIONS = {
+  fadeInUp: {
+    hidden: {
+      y: '100px',
+      opacity: 0,
+    },
+    visible: {
+      opacity: 1,
+      y: '0%',
+    },
+  },
+  fadeInLeft: {
+    hidden: { opacity: 0, transform: `translateX(-100px)` },
+    visible: { opacity: 1, transform: `translateX(0px)` },
+  },
+  fadeInDown: {
+    hidden: { opacity: 0, transform: `translateY(-50px)` },
+    visible: { opacity: 1, transform: `translateY(0px)` },
+  },
+  fadeInRight: {
+    hidden: { opacity: 0, transform: `translateX(100px)` },
+    visible: { opacity: 1, transform: `translateX(0px)` },
+  },
+  opacity: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+  },
+  imgBlur: {
+    hidden: {
+      filter: 'blur(10px)',
+      backdropFilter: 'blur(10px)',
+      WebkitBackdropFilter: 'blur(10px)',
+      overflow: 'hidden',
+    },
+    visible: {
+      overflow: 'hidden',
+      filter: 'blur(0px)',
+      backdropFilter: 'blur(0px)',
+      WebkitBackdropFilter: 'blur(0)',
+    },
+  },
+  scaleX: {
+    hidden: {
+      scaleX: 0,
+    },
+    visible: {
+      scaleX: 1,
+    },
+  },
+  strokeLine: {
+    hidden: {
+      scaleX: 0.001,
+      transformOrigin: 'left center',
+    },
+    visible: {
+      scaleX: 1,
+      transformOrigin: 'left center',
+    },
+  },
+  slideInUp: {
+    hidden: {
+      y: '85%',
+    },
+    visible: {
+      y: '0%',
+    },
+  },
+  slideInLeftFull: {
+    hidden: {
+      x: '-100%',
+    },
+    visible: {
+      x: '0%',
+    },
+  },
+  fadeInRightFull: {
+    hidden: {
+      opacity: 0,
+      x: '100%',
+    },
+    visible: {
+      opacity: 1,
+      x: '0%',
+    },
+  },
+};
+
+export default IN_VIEW_ANIMATIONS;
+

package/src/templates/in-view/examples/in-view-examples.home.tsx

@@ -0,0 +1,101 @@
+import { Fragment } from "react";
+
+import InViewAnimation from "../in-view-animation";
+import { InViewHiddenText } from "../in-view/in-view-hidden-text";
+import { InViewStrokeLine } from "../in-view/in-view-stroke-line";
+import { Text } from "@/common/ui/text/text";
+
+const InViewExampleCard = ({ text }: { text?: string }) => {
+  return (
+    <div className="flex flex-col items-center justify-center h-50 w-full rounded-2xl border-2 border-fill-brand-primary bg-bg-primary-inverse p-2">
+      <Text
+        className="text-text-interactive-neutral-primary-inverse"
+        variant="title.6"
+      >
+        {text}
+      </Text>
+    </div>
+  );
+};
+
+export const InViewExamplesHome = () => {
+  return (
+    <div className="container mx-auto max-w-480">
+      <Text className="pb-15" variant="title.6">
+        In View Examples {"(Individual Elements)"}
+      </Text>
+      <div className="grid w-full gap-2 gap-y-2 overflow-hidden max-lg:grid-cols-1 lg:grid-cols-3 lg:gap-y-10">
+        <InViewAnimation effect="fadeInLeft">
+          <InViewExampleCard text="Fade Left Effect" />
+        </InViewAnimation>
+        <InViewAnimation
+          effect="opacity"
+          transition={{
+            delay: 0.2,
+          }}
+        >
+          <InViewExampleCard text="Opacity Effect" />
+        </InViewAnimation>
+        <InViewAnimation effect="fadeInRight">
+          <InViewExampleCard text="Fade Right Effect" />
+        </InViewAnimation>
+        <div className="flex w-full flex-col flex-wrap justify-end gap-5 lg:col-span-2">
+          <InViewStrokeLine
+            className="bg-fill-brand-primary opacity-40"
+            transition={{
+              duration: 0.8,
+            }}
+          />
+          <InViewHiddenText>
+            <Text className="py-1 text-grey-100-80">
+              Hidden text effect and stroke line
+            </Text>
+          </InViewHiddenText>
+
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Fragment key={index}>
+              <InViewStrokeLine
+                className="bg-fill-brand-primary opacity-40"
+                transition={{
+                  duration: 0.8,
+                  delay: 0.1 * (index + 1),
+                }}
+              />
+              <InViewHiddenText
+                transition={{
+                  delay: 0.2 * (index + 1),
+                }}
+              >
+                <Text className="text-grey-100-80">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                </Text>
+              </InViewHiddenText>
+            </Fragment>
+          ))}
+          <InViewStrokeLine
+            className="bg-fill-brand-primary opacity-40"
+            transition={{
+              duration: 0.8,
+              delay: 0.4,
+            }}
+          />
+        </div>
+        <InViewAnimation
+          className="lg:col-start-3"
+          effect="imgBlur"
+          once={false}
+        >
+          <Center className="relative h-102 w-full overflow-hidden rounded-2xl bg-fill-brand-primary">
+            <img alt="Placeholder" src="/img/racti-sireno.jpeg" />
+            <Text
+              className="absolute bottom-1/4 rounded-2xl bg-grey-50-30 p-2 text-text-primary"
+              variant="title.6"
+            >
+              Blur Effect
+            </Text>
+          </Center>
+        </InViewAnimation>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { GridInView } from "@/common/animations/in-view/in-view-grid";
+import { Center } from "@/common/ui/containers/center";
+import { Text } from "@/common/ui/text/text";
+import { cn } from "@/common/utils/classname-builder";
+
+const CardComponent = ({
+  pepito,
+  className,
+}: {
+  pepito: number;
+  className?: string;
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center h-50 w-full rounded-2xl border-2 border-fill-brand-primary bg-bg-primary-inverse p-2">
+      <Text>{pepito}</Text>
+    </div>
+  );
+};
+
+export const InViewGridShowcase = () => {
+  return (
+    <>
+      <div>
+        <h1>In View Grid:</h1>
+        <GridInView columns={5} delayByColumn={false}>
+          {Array.from({ length: 10 }, (_, index) => index).map((item) => (
+            <CardComponent key={item} pepito={item + 1} />
+          ))}
+        </GridInView>
+      </div>
+      <div>
+        <h1>In View Grid with delay by column:</h1>
+        <GridInView columns={{ desktop: 4, mobile: 2 }}>
+          {Array.from({ length: 12 }, (_, index) => index).map((item) => (
+            <CardComponent key={item} className="h-100" pepito={item + 1} />
+          ))}
+        </GridInView>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,72 @@
+'use client';
+import { FC, ReactNode } from 'react';
+
+import {
+  motion,
+  MotionProps,
+  TargetAndTransition,
+  Transition,
+} from 'motion/react';
+
+import IN_VIEW_ANIMATIONS from './data.in-view';
+
+const transitionsDefault: Transition = {
+  duration: 0.6,
+  delay: 0,
+  ease: 'easeInOut',
+};
+
+export type InViewAnimationProps = {
+  margin?: string;
+  transition?: Transition;
+  effect?: keyof typeof IN_VIEW_ANIMATIONS;
+  customEffect?: {
+    hidden: TargetAndTransition;
+    visible: TargetAndTransition;
+  };
+  execute?: boolean;
+  once?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: ReactNode;
+} & MotionProps &
+  React.HTMLAttributes<HTMLDivElement>;
+
+const InViewAnimation: FC<InViewAnimationProps> = ({
+  margin = '-10% 0%',
+  execute = true,
+  transition = {},
+  customEffect,
+  effect = 'fadeInUp',
+  once = true,
+  style,
+  className,
+  children,
+  ...props
+}) => (
+  <motion.div
+    className={className}
+    initial={customEffect?.hidden || IN_VIEW_ANIMATIONS[effect].hidden}
+    style={style}
+    transition={{
+      ...transitionsDefault,
+      ...transition,
+    }}
+    viewport={
+      execute
+        ? {
+            once,
+            margin,
+          }
+        : {}
+    }
+    whileInView={
+      execute ? customEffect?.visible || IN_VIEW_ANIMATIONS[effect].visible : {}
+    }
+    {...props}
+  >
+    {children}
+  </motion.div>
+);
+
+export default InViewAnimation;