@androbinco/library-cli 0.1.0

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

@@ -0,0 +1,72 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+
+import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+
+import { NavigationProps, useNavigation } from './use-navigation';
+import { PaginationProps, usePagination } from './use-pagination';
+
+type CarouselContextType = {
+  options: EmblaOptionsType;
+  emblaApi: EmblaCarouselType | undefined;
+  setEmblaApi: (emblaApi: EmblaCarouselType | undefined) => void;
+} & PaginationProps &
+  NavigationProps;
+
+export const CarouselContext = createContext<CarouselContextType>({
+  selectedIndex: 0,
+  scrollSnaps: [],
+  onDotButtonClick: () => {},
+
+  prevBtnDisabled: true,
+  nextBtnDisabled: true,
+  options: {},
+  emblaApi: undefined,
+  setEmblaApi: () => {},
+  onPrevButtonClick: () => {},
+  onNextButtonClick: () => {},
+});
+
+export const CarouselProvider = ({
+  children,
+  options,
+}: {
+  children: React.ReactNode;
+  options: EmblaOptionsType;
+}) => {
+  const [emblaApi, setEmblaApi] = useState<EmblaCarouselType | undefined>(undefined);
+
+  const { selectedIndex, scrollSnaps, onDotButtonClick } = usePagination(emblaApi);
+  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } =
+    useNavigation(emblaApi);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        selectedIndex,
+        scrollSnaps,
+        onDotButtonClick,
+        options,
+        emblaApi,
+        setEmblaApi,
+        prevBtnDisabled,
+        nextBtnDisabled,
+        onPrevButtonClick,
+        onNextButtonClick,
+      }}
+    >
+      {children}
+    </CarouselContext.Provider>
+  );
+};
+
+export const useCarouselContext = () => {
+  const context = useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a CarouselProvider');
+  }
+
+  return context;
+};

package/src/templates/carousel/components/provider/use-navigation.tsx

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { EmblaCarouselType } from 'embla-carousel';
+
+export type NavigationProps = {
+  prevBtnDisabled: boolean;
+  nextBtnDisabled: boolean;
+  onPrevButtonClick: () => void;
+  onNextButtonClick: () => void;
+};
+
+export const useNavigation = (embla: EmblaCarouselType | undefined): NavigationProps => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!embla) return;
+    embla.scrollPrev();
+  }, [embla]);
+
+  const onNextButtonClick = useCallback(() => {
+    if (!embla) return;
+    embla.scrollNext();
+  }, [embla]);
+
+  const onSelect = useCallback(
+    (emblaApi: EmblaCarouselType) => {
+      setPrevBtnDisabled(!emblaApi.canScrollPrev());
+      setNextBtnDisabled(!emblaApi.canScrollNext());
+    },
+    [embla],
+  );
+
+  useEffect(() => {
+    if (!embla) return;
+
+    onSelect(embla);
+    embla.on('reInit', onSelect).on('select', onSelect);
+
+    return () => {
+      embla.off('reInit', onSelect);
+      embla.off('select', onSelect);
+    };
+  }, [embla, onSelect]);
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  };
+};

package/src/templates/carousel/components/provider/use-pagination.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { EmblaCarouselType } from 'embla-carousel';
+
+export type PaginationProps = {
+  selectedIndex: number;
+  scrollSnaps: number[];
+  onDotButtonClick: (index: number) => void;
+};
+
+export const usePagination = (emblaApi: EmblaCarouselType | undefined): PaginationProps => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+  const onDotButtonClick = useCallback(
+    (index: number) => {
+      if (!emblaApi) return;
+      emblaApi.scrollTo(index);
+    },
+    [emblaApi],
+  );
+
+  const onInit = useCallback(
+    (emblaApi: EmblaCarouselType) => {
+      setScrollSnaps(emblaApi.scrollSnapList());
+    },
+    [emblaApi],
+  );
+
+  const onSelect = useCallback(
+    (emblaApi: EmblaCarouselType) => {
+      setSelectedIndex(emblaApi.selectedScrollSnap());
+    },
+    [emblaApi],
+  );
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    onInit(emblaApi);
+    onSelect(emblaApi);
+    emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect);
+
+    return () => {
+      emblaApi.off('reInit', onInit);
+      emblaApi.off('reInit', onSelect);
+      emblaApi.off('select', onSelect);
+    };
+  }, [emblaApi, onInit, onSelect]);
+
+  return {
+    selectedIndex,
+    scrollSnaps,
+    onDotButtonClick,
+  };
+};

package/src/templates/carousel/examples/base-cards.carousel.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import useSlideActive from "../hooks/use-slide-active";
+import { cn } from "@/common/utils/classname-builder";
+
+export const BasicImageCard = ({
+  index,
+  className,
+}: {
+  index: number;
+  className?: string;
+}) => (
+  <div
+    className={cn(
+      "flex items-center justify-center relative !max-h-screen overflow-hidden rounded-2xl max-lg:aspect-[9/16] max-lg:min-w-10 lg:aspect-video",
+      className
+    )}
+  >
+    <div
+      className={cn(
+        "relative flex !max-h-screen items-center justify-center overflow-hidden rounded-2xl max-lg:aspect-[9/16] max-lg:min-w-10 lg:aspect-video",
+        className
+      )}
+    >
+      <div className="absolute inset-0 grid h-full w-full place-items-center bg-red-600">
+        <p className="text-body-2 text-grey-50-15">{index}</p>
+      </div>
+    </div>
+    <p className="text-body-2 text-grey-50-15">{index + 1}</p>
+  </div>
+);
+
+export const BasicCard = ({
+  index,
+  className,
+}: {
+  index: number;
+  className?: string;
+}) => (
+  <div
+    className={cn(
+      "flex items-center justify-center !max-h-screen max-lg:aspect-[9/16] max-lg:min-w-10 lg:aspect-video",
+      "h-full w-full rounded-4xl border-2 border-fill-brand-primary bg-bg-primary-inverse transition-all duration-500 ease-out max-lg:scale-y-100",
+      className
+    )}
+  >
+    <p className="text-body-2 text-grey-50-15">{index + 1}</p>
+  </div>
+);
+
+export const CarouselActiveCard = ({ index }: { index: number }) => {
+  const isActive = useSlideActive({ index });
+
+  return (
+    <BasicCard
+      className={isActive ? "scale-y-100 opacity-100" : "scale-y-80 opacity-40"}
+      index={index}
+    />
+  );
+};

package/src/templates/carousel/examples/gallery-carousel.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Carousel } from "../carousel.barrel";
+
+import { BasicImageCard } from "./base-cards.carousel";
+
+export const CarouselWithNumberPagination = ({
+  slides,
+}: {
+  slides: number[];
+}) => {
+  return (
+    <section>
+      <Carousel.Root
+        className="flex flex-col gap-8"
+        options={{
+          duration: 35,
+          slidesToScroll: 2,
+          breakpoints: {
+            "(max-width: 1024px)": {
+              slidesToScroll: 1,
+            },
+          },
+          align: "start",
+        }}
+      >
+        <div className="ml-auto flex w-max flex-row gap-2 px-4 max-lg:px-2">
+          <Carousel.PrevButton variant="primary" />
+          <Carousel.NextButton variant="primary" />
+        </div>
+        <div className="relative w-full">
+          <Carousel.Slides
+            className="w-full gap-4 lg:gap-8"
+            containerClassName="pl-5 pr-7 lg:px-4"
+          >
+            {slides.map((_, index) => (
+              <Carousel.Slide
+                key={index}
+                className="max-lg:[--view-size:90%] lg:[--view-size:40%]"
+              >
+                <BasicImageCard index={index + 1} />
+              </Carousel.Slide>
+            ))}
+          </Carousel.Slides>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Carousel.Pagination type="progress" />
+          <Carousel.Pagination type="number" />
+        </div>
+      </Carousel.Root>
+    </section>
+  );
+};

package/src/templates/carousel/examples/loop-carousel.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Carousel } from "../carousel.barrel";
+
+import { CarouselActiveCard } from "./base-cards.carousel";
+
+export const LoopCenterCarousel = ({ slides }: { slides: number[] }) => {
+  return (
+    <section>
+      <Carousel.Root
+        className="flex flex-col gap-8"
+        options={{
+          loop: true,
+          duration: 35,
+          align: "center",
+          breakpoints: {
+            "(max-width: 1024px)": {
+              align: "start",
+            },
+          },
+        }}
+      >
+        <div className="relative w-full">
+          <Carousel.Slides
+            className="w-full gap-8 px-8"
+            containerClassName="px-2"
+          >
+            {slides.map((_, index) => (
+              <Carousel.Slide
+                key={index}
+                className="max-lg:[--view-size:90%] lg:[--view-size:70%]"
+              >
+                <CarouselActiveCard index={index} />
+              </Carousel.Slide>
+            ))}
+          </Carousel.Slides>
+          <Carousel.Navigation className="max-lg:hidden" />
+        </div>
+        <Carousel.Pagination />
+      </Carousel.Root>
+    </section>
+  );
+};

package/src/templates/carousel/hooks/use-slide-active.tsx

@@ -0,0 +1,9 @@
+import { useCarouselContext } from '../components/provider/carousel.provider';
+
+const useSlideActive = ({ index }: { index: number }) => {
+  const { selectedIndex } = useCarouselContext();
+
+  return selectedIndex === index;
+};
+
+export default useSlideActive;

package/src/templates/carousel/styles/embla.css

@@ -0,0 +1,63 @@
+.embla {
+  --view-size: 100%;
+}
+.embla-slot {
+  flex: 0 0 var(--view-size);
+}
+.view-size-10 {
+  --view-size: 10%;
+}
+.view-size-15 {
+  --view-size: 15%;
+}
+.view-size-20 {
+  --view-size: 20%;
+}
+.view-size-25 {
+  --view-size: 25%;
+}
+.view-size-30 {
+  --view-size: 30%;
+}
+.view-size-35 {
+  --view-size: 35%;
+}
+.view-size-40 {
+  --view-size: 40%;
+}
+.view-size-45 {
+  --view-size: 45%;
+}
+.view-size-50 {
+  --view-size: 50%;
+}
+.view-size-55 {
+  --view-size: 55%;
+}
+.view-size-60 {
+  --view-size: 60%;
+}
+.view-size-65 {
+  --view-size: 65%;
+}
+.view-size-70 {
+  --view-size: 70%;
+}
+.view-size-75 {
+  --view-size: 75%;
+}
+.view-size-80 {
+  --view-size: 80%;
+}
+.view-size-85 {
+  --view-size: 85%;
+}
+.view-size-90 {
+  --view-size: 90%;
+}
+.view-size-95 {
+  --view-size: 95%;
+}
+.view-size-100 {
+  --view-size: 100%;
+}

package/src/templates/example/example.tsx

@@ -0,0 +1,5 @@
+// @ts-nocheck
+
+export default function Example() {
+  return <div>Hello World</div>;
+}

package/src/templates/hero/hero.tsx

@@ -0,0 +1,5 @@
+// @ts-nocheck
+
+export default function Hero() {
+  return <section>Hero section</section>;
+}

package/src/utils/components.js

@@ -0,0 +1,87 @@
+import * as p from '@clack/prompts';
+import {
+  detectPackageManager,
+  collectDependencies,
+  checkMissingDependencies,
+  installDependencies
+} from './dependencies.js';
+import { copyComponent } from './files.js';
+
+export async function handleComponentsFlow(components, templatesDir) {
+  const selectedComponents = await p.multiselect({
+    message: 'Please select one or more components to add (press spacebar to select and return to confirm selection)',
+    options: components.map(comp => ({
+      value: comp.name,
+      label: comp.name,
+      hint: comp.description
+    })),
+    required: true
+  });
+
+  if (p.isCancel(selectedComponents)) {
+    p.cancel('Operation cancelled.');
+    return;
+  }
+
+  if (!selectedComponents.length) {
+    p.log.info('No components selected.');
+    return;
+  }
+
+  // Check and install dependencies
+  const allDependencies = collectDependencies(selectedComponents, components);
+  const missingDependencies = await checkMissingDependencies(allDependencies);
+
+  if (missingDependencies.length > 0) {
+    const packageManager = await detectPackageManager();
+    
+    p.log.info(`The following dependencies are missing: ${missingDependencies.join(', ')}`);
+    
+    const shouldInstall = await p.confirm({
+      message: `Install missing dependencies using ${packageManager.manager}?`,
+      initialValue: true
+    });
+
+    if (p.isCancel(shouldInstall)) {
+      p.log.info('Skipping dependency installation. You can install them manually later.');
+    } else if (shouldInstall) {
+      const installSuccess = await installDependencies(missingDependencies, packageManager);
+      
+      if (!installSuccess) {
+        const continueAnyway = await p.confirm({
+          message: 'Installation failed. Continue with copying components anyway?',
+          initialValue: true
+        });
+        
+        if (p.isCancel(continueAnyway) || !continueAnyway) {
+          p.log.info('Operation cancelled.');
+          return;
+        }
+      }
+    } else {
+      p.log.info('Skipping dependency installation. You can install them manually later.');
+    }
+  }
+
+  // Copy components
+  for (const componentName of selectedComponents) {
+    const component = components.find(c => c.name === componentName);
+    if (!component) {
+      p.log.warn(`Component "${componentName}" not found. Skipping.`);
+      continue;
+    }
+
+    const spinner = p.spinner();
+    spinner.start(`Copying ${component.name} component...`);
+
+    const success = await copyComponent(component, templatesDir);
+
+    if (success) {
+      spinner.stop(`✅ Component ${component.name} copied successfully!`);
+      p.log.success(`Component files are now available at: src/components/${component.name}/`);
+    } else {
+      spinner.stop(`⚠️  Component ${component.name} was not copied.`);
+    }
+  }
+}
+

package/src/utils/dependencies.js

@@ -0,0 +1,134 @@
+import * as p from '@clack/prompts';
+import fs from 'fs-extra';
+import path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+export async function detectPackageManager() {
+  const cwd = process.cwd();
+  
+  if (await fs.pathExists(path.join(cwd, 'pnpm-lock.yaml'))) {
+    return { manager: 'pnpm', command: 'pnpm' };
+  }
+  
+  if (await fs.pathExists(path.join(cwd, 'yarn.lock'))) {
+    return { manager: 'yarn', command: 'yarn' };
+  }
+  
+  if (await fs.pathExists(path.join(cwd, 'package-lock.json'))) {
+    return { manager: 'npm', command: 'npm' };
+  }
+  
+  // Default to pnpm if no lock file found
+  return { manager: 'pnpm', command: 'pnpm' };
+}
+
+export function collectDependencies(selectedComponents, components) {
+  const allDeps = new Set();
+  
+  for (const componentName of selectedComponents) {
+    const component = components.find(c => c.name === componentName);
+    if (component && component.dependencies) {
+      component.dependencies.forEach(dep => allDeps.add(dep));
+    }
+  }
+  
+  return Array.from(allDeps);
+}
+
+export async function checkMissingDependencies(dependencies) {
+  if (dependencies.length === 0) {
+    return [];
+  }
+  
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  
+  if (!(await fs.pathExists(packageJsonPath))) {
+    // If no package.json, all dependencies are "missing" but we'll warn
+    return dependencies;
+  }
+  
+  try {
+    const packageJson = await fs.readJson(packageJsonPath);
+    const installedDeps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    
+    const missing = dependencies.filter(dep => !installedDeps[dep]);
+    return missing;
+  } catch (error) {
+    // If we can't read package.json, assume all are missing
+    return dependencies;
+  }
+}
+
+export async function installDependencies(packages, packageManager) {
+  if (packages.length === 0) {
+    return true;
+  }
+  
+  const { manager, command } = packageManager;
+  
+  // Build install command based on package manager
+  let installCmd;
+  if (manager === 'pnpm') {
+    installCmd = `pnpm add ${packages.join(' ')}`;
+  } else if (manager === 'yarn') {
+    installCmd = `yarn add ${packages.join(' ')}`;
+  } else {
+    installCmd = `npm install ${packages.join(' ')}`;
+  }
+  
+  const spinner = p.spinner();
+  spinner.start(`Installing dependencies with ${manager}...`);
+  
+  try {
+    const { stdout, stderr } = await execAsync(installCmd, {
+      cwd: process.cwd(),
+      maxBuffer: 1024 * 1024 * 10 // 10MB buffer
+    });
+    
+    spinner.stop(`✅ Dependencies installed successfully!`);
+    
+    if (stderr && !stderr.includes('warning')) {
+      p.log.warn(stderr);
+    }
+    
+    return true;
+  } catch (error) {
+    spinner.stop(`❌ Failed to install dependencies`);
+    p.log.error(`Installation error: ${error.message}`);
+    
+    // Show the command that failed
+    p.log.info(`You can manually install with: ${installCmd}`);
+    return false;
+  }
+}
+
+export async function checkReactDependency() {
+  try {
+    const packageJsonPath = path.join(process.cwd(), 'package.json');
+    
+    if (!(await fs.pathExists(packageJsonPath))) {
+      p.log.warn('No package.json found in current directory. Make sure React is installed before using these components.');
+      return false;
+    }
+
+    const packageJson = await fs.readJson(packageJsonPath);
+    const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    
+    if (!deps.react) {
+      p.log.warn('React dependency not found in package.json. These components require React to work properly.');
+      return false;
+    }
+
+    return true;
+  } catch (error) {
+    p.log.warn('Could not check for React dependency. Make sure React is installed before using these components.');
+    return false;
+  }
+}
+