@androbinco/library-cli 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@androbinco/library-cli",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Interactive CLI tool to add Robin library components to your project",
   "type": "module",
   "main": "./src/index.js",

package/src/commands/add.js

@@ -0,0 +1,107 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import {
+  COMPONENTS,
+  getComponentByName,
+  getVariantByName,
+  getFilesForVariant
+} from '../utils/components.js';
+import {
+  detectPackageManager,
+  checkMissingDependencies,
+  installDependencies
+} from '../utils/dependencies.js';
+import { copyComponent } from '../utils/files.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const TEMPLATES_DIR = path.join(__dirname, '..', 'templates');
+
+export async function handleAdd(args) {
+  const [componentName, variantName] = args;
+
+  if (!componentName) {
+    console.error('Error: Component name is required');
+    console.log('Usage: add <component> [variant]');
+    console.log('Run "list" to see available components');
+    process.exit(1);
+  }
+
+  const component = getComponentByName(componentName);
+
+  if (!component) {
+    console.error(`Error: Component "${componentName}" not found`);
+    console.log('Available components:');
+    COMPONENTS.forEach(c => console.log(`  - ${c.name}`));
+    process.exit(1);
+  }
+
+  // Check if component requires variant
+  if (component.hasSubmenu && !variantName) {
+    console.error(`Error: Component "${componentName}" requires a variant`);
+    console.log('Available variants:');
+    component.submenuOptions.forEach(v => console.log(`  - ${v.value}: ${v.description}`));
+    process.exit(1);
+  }
+
+  // Get variant if specified
+  let variant = null;
+  let filesToCopy = null;
+  let examplesToCopy = [];
+
+  if (component.hasSubmenu && variantName) {
+    variant = getVariantByName(component, variantName);
+
+    if (!variant) {
+      console.error(`Error: Variant "${variantName}" not found for component "${componentName}"`);
+      console.log('Available variants:');
+      component.submenuOptions.forEach(v => console.log(`  - ${v.value}: ${v.description}`));
+      process.exit(1);
+    }
+
+    filesToCopy = getFilesForVariant(component, variant);
+    examplesToCopy = variant.examples || [];
+  } else {
+    // Simple component without variant
+    examplesToCopy = component.examples || [];
+  }
+
+  // Determine dependencies
+  let dependencies = component.dependencies || [];
+
+  // For ticker non-hover, no motion needed
+  if (component.name === 'ticker' && variantName === 'non-hover') {
+    dependencies = [];
+  }
+
+  // Check and install dependencies
+  if (dependencies.length > 0) {
+    const missingDependencies = await checkMissingDependencies(dependencies);
+
+    if (missingDependencies.length > 0) {
+      console.log(`Installing dependencies: ${missingDependencies.join(', ')}`);
+      const packageManager = await detectPackageManager();
+      const success = await installDependencies(missingDependencies, packageManager);
+
+      if (!success) {
+        console.warn('Warning: Failed to install some dependencies. You may need to install them manually.');
+      }
+    }
+  }
+
+  // Copy component
+  console.log(`Copying ${componentName}${variantName ? ` (${variantName})` : ''}...`);
+
+  const success = await copyComponent(component, TEMPLATES_DIR, examplesToCopy, filesToCopy);
+
+  if (success) {
+    console.log(`✅ Component ${componentName} copied successfully!`);
+    console.log(`Files are available at: src/components/${componentName}/`);
+    if (examplesToCopy.length > 0) {
+      console.log(`Examples are available at: src/components/${componentName}/examples/`);
+    }
+  } else {
+    console.error(`❌ Failed to copy component ${componentName}`);
+    process.exit(1);
+  }
+}

package/src/commands/list.js

@@ -0,0 +1,51 @@
+import { COMPONENTS, getComponentByName } from '../utils/components.js';
+
+export function handleList(args) {
+  const [componentName] = args;
+
+  if (!componentName) {
+    // List all components
+    console.log('Available components:\n');
+
+    for (const component of COMPONENTS) {
+      console.log(`  ${component.name}`);
+      console.log(`    ${component.description}`);
+
+      if (component.hasSubmenu) {
+        console.log(`    Variants: ${component.submenuOptions.map(v => v.value).join(', ')}`);
+      }
+
+      console.log('');
+    }
+
+    console.log('Usage:');
+    console.log('  add <component>           Copy a component');
+    console.log('  add <component> <variant> Copy a specific variant');
+    console.log('  list <component>          List variants for a component');
+  } else {
+    // List variants for specific component
+    const component = getComponentByName(componentName);
+
+    if (!component) {
+      console.error(`Error: Component "${componentName}" not found`);
+      console.log('Run "list" to see all available components');
+      process.exit(1);
+    }
+
+    console.log(`Component: ${component.name}`);
+    console.log(`Description: ${component.description}`);
+    console.log(`Dependencies: ${component.dependencies?.join(', ') || 'none'}`);
+
+    if (component.hasSubmenu) {
+      console.log('\nVariants:');
+      for (const variant of component.submenuOptions) {
+        console.log(`  ${variant.value}`);
+        console.log(`    ${variant.description}`);
+      }
+
+      console.log(`\nUsage: add ${component.name} <variant>`);
+    } else {
+      console.log(`\nUsage: add ${component.name}`);
+    }
+  }
+}

package/src/index.js

@@ -4,83 +4,44 @@ import * as p from '@clack/prompts';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { checkReactDependency } from './utils/dependencies.js';
-import { handleComponentsFlow } from './utils/components.js';
+import { handleComponentsFlow, COMPONENTS } from './utils/components.js';
+import { handleAdd } from './commands/add.js';
+import { handleList } from './commands/list.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const TEMPLATES_DIR = path.join(__dirname, 'templates');
 
-// Component registry
-const COMPONENTS = [
-  { 
-    name: 'carousel', 
-    description: 'Carousel component with navigation and pagination', 
-    sourceDir: 'carousel', 
-    dependencies: ['embla-carousel-react', 'embla-carousel', 'class-variance-authority'] 
-  },
-  {
-    name: 'in-view',
-    description: 'In view animations',
-    sourceDir: 'in-view',
-    hasSubmenu: true,
-    submenuOptions: [
-      {
-        value: 'grid',
-        label: 'Grid',
-        description: 'Grid-based animations',
-        hasNestedSubmenu: true,
-        nestedSubmenuOptions: [
-          { value: 'in-view-grid', file: 'in-view-grid.tsx', required: true },
-          { value: 'in-view-animation', file: 'in-view-animation.tsx', required: false, checkExists: true },
-          { value: 'data.in-view', file: 'data.in-view.ts', required: true }
-        ],
-        examples: ['in-view-grid-showcase.tsx']
-      },
-      {
-        value: 'individual',
-        label: 'Individual Elements',
-        description: 'Individual element animations',
-        hasNestedSubmenu: true,
-        nestedSubmenuOptions: [
-          { value: 'in-view-hidden-text', file: 'in-view-hidden-text.tsx', required: true },
-          { value: 'in-view-stroke-line', file: 'in-view-stroke-line.tsx', required: true },
-          { value: 'in-view-animation', file: 'in-view-animation.tsx', required: false, checkExists: true },
-          { value: 'data.in-view', file: 'data.in-view.ts', required: true }
-        ],
-        examples: ['in-view-examples.home.tsx']
-      }
-    ],
-    dependencies: ['motion']
-  },
-  {
-    name: 'ticker',
-    description: 'Ticker component with hover and non-hover variants',
-    sourceDir: 'ticker',
-    hasSubmenu: true,
-    submenuOptions: [
-      {
-        value: 'hover',
-        label: 'Stop on hover ticker (motion)',
-        description: 'MotionTicker with hover stop functionality',
-        examples: ['ticker-hover-showcase.home.tsx']
-      },
-      {
-        value: 'non-hover',
-        label: 'Non-stop on hover ticker (css)',
-        description: 'TickerStatic with CSS animations',
-        examples: ['ticker-static-showcase.home.tsx']
-      }
-    ],
-    dependencies: ['motion']
-  },
-  {
-    name: 'scroll-tracker',
-    description: 'Scroll tracker provider for scroll-driven animations',
-    sourceDir: 'scroll-tracker',
-    dependencies: ['motion'],
-    examples: ['scroll-tracker-showcase.tsx']
-  }
-];
+// Parse command line arguments
+const args = process.argv.slice(2);
+const command = args[0];
+
+// Handle direct commands (non-interactive mode)
+if (command === 'add') {
+  await handleAdd(args.slice(1));
+  process.exit(0);
+}
+
+if (command === 'list') {
+  handleList(args.slice(1));
+  process.exit(0);
+}
+
+if (command === 'help' || command === '--help' || command === '-h') {
+  console.log('Robin Library CLI\n');
+  console.log('Usage:');
+  console.log('  robin-library-cli              Interactive mode');
+  console.log('  robin-library-cli add <comp>   Add a component');
+  console.log('  robin-library-cli list         List all components');
+  console.log('  robin-library-cli list <comp>  List variants for a component');
+  console.log('  robin-library-cli help         Show this help\n');
+  console.log('Examples:');
+  console.log('  robin-library-cli add carousel');
+  console.log('  robin-library-cli add ticker hover');
+  console.log('  robin-library-cli add scroll-components parallax-image');
+  console.log('  robin-library-cli list ticker');
+  process.exit(0);
+}
 
 async function mainMenu() {
   const action = await p.select({
@@ -118,7 +79,11 @@ async function main() {
     }
 
     if (action === 'components') {
-      await handleComponentsFlow(COMPONENTS, TEMPLATES_DIR);
+      const result = await handleComponentsFlow(COMPONENTS, TEMPLATES_DIR);
+      // If user selected go back, skip the "do more" prompt and show main menu again
+      if (result && result.goBack) {
+        continue;
+      }
     }
 
     const doMore = await p.select({

package/src/templates/carousel/components/navigation-buttons.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { ComponentPropsWithRef } from "react";
 
 import { cva, VariantProps } from "class-variance-authority";

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

@@ -0,0 +1,69 @@
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/common/utils/classname-builder';
+
+import { useCarouselContext } from '../provider/carousel.provider';
+
+type DotButtonVariants = VariantProps<typeof dotButtonVariants>['variant'];
+
+export type DotPaginationProps = {
+  scrollSnaps: number[];
+  variant?: 'primary';
+  className?: string;
+};
+const dotButtonVariants = cva(
+  'size-3 cursor-pointer rounded-full transition-all duration-300 ease-out',
+  {
+    variants: {
+      variant: {
+        primary: 'focus:outline-2',
+      },
+      selected: {
+        true: 'w-9',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'primary',
+        selected: true,
+        className: 'bg-indigo-900',
+      },
+      {
+        variant: 'primary',
+        selected: false,
+        className: 'bg-indigo-500',
+      },
+    ],
+  },
+);
+
+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}
+    />
+  );
+};
+
+export const BulletPagination = ({
+  scrollSnaps,
+  className,
+  variant = 'primary',
+  ...restProps
+}: DotPaginationProps) => (
+  <div className={cn('mx-auto flex w-max gap-2', className)} {...restProps}>
+    {scrollSnaps.map((_, index) => (
+      <DotButton key={index} index={index} variant={variant} />
+    ))}
+  </div>
+);

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

@@ -0,0 +1,30 @@
+import { VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/common/utils/classname-builder';
+import { Text } from '@/common/ui/text/text';
+import { textVariants } from '@/common/ui/text/text.styles';
+
+export type NumberPaginationProps = {
+  className?: string;
+  variant?: VariantProps<typeof textVariants>['variant'];
+  textClassName?: string;
+  selectedIndex: number;
+  scrollSnaps: number[];
+};
+
+export const NumberPagination = ({
+  className,
+  variant,
+  textClassName,
+  selectedIndex,
+  scrollSnaps,
+  ...props
+}: NumberPaginationProps) => {
+  return (
+    <div className={cn('mx-auto flex w-max gap-2', className)} {...props}>
+      <Text className={textClassName} variant={variant}>
+        {selectedIndex + 1} / {scrollSnaps.length}
+      </Text>
+    </div>
+  );
+};

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

@@ -0,0 +1,99 @@
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/common/utils/classname-builder';
+
+import { useSlideProgress } from './use-slide-progress';
+
+const effects = {
+  scale: (selectedIndex: number, totalItems: number) => ({
+    transformOrigin: 'left',
+    transform: `scaleX(${(selectedIndex + 1) / totalItems})`,
+  }),
+  slider: (selectedIndex: number, totalItems: number) => {
+    if (totalItems === 0) return {};
+    const width = Math.ceil(100 / totalItems);
+    const left = Math.ceil((selectedIndex / totalItems) * 100);
+
+    return {
+      width: `${width}%`,
+      cursor: 'grab',
+      transformOrigin: 'left',
+      left: `${left}%`,
+    };
+  },
+};
+
+export type ProgressPaginationProps = {
+  className?: string;
+  selectedIndex: number;
+  scrollSnaps: number[];
+  effect?: keyof typeof effects;
+  onDotButtonClick: (index: number) => void;
+  variant?: VariantProps<typeof backgroundVariants>['variant'];
+};
+
+const backgroundVariants = cva('relative mx-auto flex w-200 max-w-full overflow-hidden', {
+  variants: {
+    variant: {
+      primary: 'h-2 rounded-full bg-grey-50-30',
+    },
+    effect: {
+      slider: 'bg-grey-50-6',
+      scale: 'bg-grey-50-30',
+    },
+  },
+});
+const progressVariants = cva('linear absolute bottom-0 left-0 transition-all duration-300', {
+  variants: {
+    variant: {
+      primary: 'h-full rounded-full bg-indigo-500',
+    },
+    effect: {
+      slider: '',
+      scale: 'pointer-events-none !w-full',
+    },
+  },
+});
+
+export const ProgressPagination = ({
+  className,
+  selectedIndex,
+  scrollSnaps,
+  onDotButtonClick,
+  variant = 'primary',
+  effect = 'scale',
+  ...props
+}: ProgressPaginationProps) => {
+  const isSlider = effect === 'slider';
+  const { isDragging, barRef, setIsDragging } = useSlideProgress({ isActive: isSlider });
+
+  return (
+    <div className={cn(backgroundVariants({ variant, effect }), className)} {...props}>
+      <button
+        ref={barRef}
+        className={cn(progressVariants({ variant, effect }))}
+        style={{ ...effects[effect](selectedIndex, scrollSnaps.length) }}
+        onMouseDown={() => {
+          if (!isSlider) return;
+          setIsDragging(true);
+        }}
+        onMouseUp={() => setIsDragging(false)}
+      />
+
+      {scrollSnaps.map((_, index) => (
+        <div
+          key={index}
+          className={cn('h-full w-full', !isDragging && 'cursor-pointer')}
+          onMouseDown={() => {
+            onDotButtonClick(index);
+            if (!isSlider) return;
+            setIsDragging(true);
+          }}
+          onMouseEnter={() => {
+            if (isDragging) onDotButtonClick(index);
+          }}
+        />
+      ))}
+    </div>
+  );
+};

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]();
 };