@androbinco/library-cli 0.1.0 → 0.3.0

package/README.md

@@ -59,18 +59,20 @@ robin-library-cli
 ```
 
 The CLI will:
-1. Display a welcome message
+1. Display a welcome message with a link to view examples online
 2. Check for React dependency in your `package.json` (warns if not found)
 3. Show an interactive menu of available components
-4. Copy the selected component to `src/components/{component-name}/`
+4. For components with variants, show a submenu to select specific configurations
+5. Copy the selected component to `src/components/{component-name}/`
 
 ### Component Structure & Flow
 
 Flow:
-1. Main menu (for now: Components or Exit)
-2. Components: multiselect prompt — “Please select one or more components”
-3. Copy selected components (one run can copy many)
-4. Post-action prompt: “Do something else?” (loop back to menu) or Exit
+1. Main menu (Components or Exit)
+2. Components: multiselect prompt — "Please select one or more components"
+3. **Submenu Selection** (for components with variants): Some components offer submenus to select specific variants or configurations
+4. Copy selected components (one run can copy many)
+5. Post-action prompt: "Do something else?" (loop back to menu) or Exit
 
 Components are copied to the following structure:
 
@@ -97,33 +99,77 @@ Additional safety:
 
 ## Available Components
 
-### Example Component
-
-- **Name**: `example`
-- **Description**: A simple example component with Hello World
-- **Files**: `example.tsx`
-- **Location**: `src/components/example/example.tsx`
-
-### Button Component
-
-- **Name**: `button`
-- **Description**: Minimal button component
-- **Files**: `button.tsx`
-- **Location**: `src/components/button/button.tsx`
-
-### Card Component
-
-- **Name**: `card`
-- **Description**: Minimal card wrapper
-- **Files**: `card.tsx`
-- **Location**: `src/components/card/card.tsx`
-
-### Hero Component
-
-- **Name**: `hero`
-- **Description**: Minimal hero section
-- **Files**: `hero.tsx`
-- **Location**: `src/components/hero/hero.tsx`
+### Carousel Component
+
+- **Name**: `carousel`
+- **Description**: Carousel component with navigation and pagination
+- **Dependencies**: `embla-carousel-react`, `embla-carousel`, `class-variance-authority`
+- **Files**: 
+  - `carousel.barrel.tsx` (main component)
+  - `components/` (navigation buttons, pagination, provider)
+  - `hooks/` (use-slide-active hook)
+  - `styles/` (embla.css styles)
+  - `examples/` (example implementations)
+- **Location**: `src/components/carousel/`
+- **Features**:
+  - Navigation buttons (prev/next)
+  - Multiple pagination types (dots, numbers, progress bar)
+  - Responsive breakpoints
+  - Loop support
+  - Slide active state tracking
+
+### In-View Component
+
+- **Name**: `in-view`
+- **Description**: In view animations for scroll-triggered effects
+- **Dependencies**: `motion` (Framer Motion)
+- **Location**: `src/components/in-view/`
+- **Variants** (selectable via submenu):
+  - **Grid**: Grid-based animations
+    - Files: `in-view-grid.tsx`, `in-view-animation.tsx`, `data.in-view.ts`
+    - Example: `in-view-grid-showcase.tsx`
+  - **Individual Elements**: Individual element animations
+    - Files: `in-view-hidden-text.tsx`, `in-view-stroke-line.tsx`, `in-view-animation.tsx`, `data.in-view.ts`
+    - Example: `in-view-examples.home.tsx`
+- **Features**:
+  - Scroll-triggered animations
+  - Grid-based and individual element animations
+  - Reusable animation utilities
+  - Type-safe data attributes
+
+### Ticker Component
+
+- **Name**: `ticker`
+- **Description**: Ticker component with hover and non-hover variants
+- **Dependencies**: `motion` (Framer Motion)
+- **Location**: `src/components/ticker/`
+- **Variants** (selectable via submenu):
+  - **Stop on hover ticker (motion)**: MotionTicker with hover stop functionality
+    - Files: `motion-ticker.tsx`, `hooks/` (use-ticker-clones, use-ticker-incremental)
+    - Example: `ticker-hover-showcase.home.tsx`
+  - **Non-stop on hover ticker (css)**: TickerStatic with CSS animations
+    - Files: `css-ticker/css-ticker.tsx`, `css-ticker/ticker.keyframes.css`
+    - Example: `ticker-static-showcase.home.tsx`
+- **Features**:
+  - Infinite scrolling ticker
+  - Hover to pause (motion variant)
+  - CSS-based animation option
+  - Customizable speed and direction
+
+### Scroll Tracker Component
+
+- **Name**: `scroll-tracker`
+- **Description**: Scroll tracker provider for scroll-driven animations
+- **Dependencies**: `motion` (Framer Motion)
+- **Files**:
+  - `scroll-tracker-provider.tsx` (main provider component)
+  - `examples/scroll-tracker-showcase.tsx` (example implementation)
+- **Location**: `src/components/scroll-tracker/`
+- **Features**:
+  - Scroll progress tracking
+  - Context-based scroll state management
+  - Enables scroll-driven animations throughout your app
+  - Works seamlessly with Framer Motion
 
 More components will be added in future updates.
 
@@ -132,6 +178,7 @@ More components will be added in future updates.
 - ✨ Beautiful, modern UI with Astro-like aesthetics
 - 🎯 Interactive component selection
 - 🔍 Automatic React dependency detection
+- 📦 Automatic dependency installation (detects and installs missing npm packages)
 - 🛡️ Safe overwrite handling (checks for empty directories)
 - 📁 Automatic directory creation
 - ⚠️ Helpful warnings and error messages
@@ -141,13 +188,15 @@ More components will be added in future updates.
 
 1. **Dependency Check**: The CLI checks your `package.json` for React. If not found, it displays a warning but still allows you to proceed (you might add React later).
 
-2. **Component Selection**: An interactive menu displays all available components with descriptions.
+2. **Component Selection**: An interactive menu displays all available components with descriptions. You can select multiple components at once. Some components offer submenus to select specific variants or configurations (e.g., Grid vs Individual Elements for in-view animations).
+
+3. **Dependency Installation**: The CLI automatically detects missing dependencies required by selected components and offers to install them using your project's package manager (npm, pnpm, or yarn).
 
-3. **Directory Check**: Before copying, the CLI checks if the destination directory exists and whether it's empty.
+4. **Directory Check**: Before copying, the CLI checks if the destination directory exists and whether it's empty.
 
-4. **Copy Operation**: All files from the component template are copied to `src/components/{component-name}/`, creating directories as needed.
+5. **Copy Operation**: All files from the component template are copied to `src/components/{component-name}/`, creating directories as needed.
 
-5. **Completion**: A success message confirms the component has been added to your project.
+6. **Completion**: A success message confirms the component has been added to your project.
 
 ## Common Use Cases
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@androbinco/library-cli",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Interactive CLI tool to add Robin library components to your project",
   "type": "module",
   "main": "./src/index.js",
@@ -11,13 +11,14 @@
     "src/",
     "README.md"
   ],
-  "keywords": [
-    "cli",
-    "robin",
-    "library",
-    "components",
-    "react"
-  ],
+  "scripts": {
+    "start": "node ./src/index.js",
+    "dev": "node ./src/index.js",
+    "test": "echo \"Error: no test specified for robin-library-cli\" && exit 1",
+    "build": "echo \"robin-library-cli: No build step required.\"",
+    "lint": "echo \"robin-library-cli: Lint not configured.\""
+  },
+  "keywords": ["cli", "robin", "library", "components", "react"],
   "author": "androbinco",
   "license": "MIT",
   "dependencies": {
@@ -29,12 +30,6 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "start": "node ./src/index.js",
-    "dev": "node ./src/index.js",
-    "test": "echo \"Error: no test specified for robin-library-cli\" && exit 1",
-    "build": "echo \"robin-library-cli: No build step required.\"",
-    "lint": "echo \"robin-library-cli: Lint not configured.\""
   }
-}
+}
+

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,25 +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: 'example', description: 'Hello World example', sourceDir: 'example', dependencies: [] },
-  { name: 'button', description: 'Minimal button component', sourceDir: 'button', dependencies: [] },
-  { name: 'card', description: 'Minimal card wrapper', sourceDir: 'card', dependencies: [] },
-  { name: 'hero', description: 'Minimal hero section', sourceDir: 'hero', dependencies: [] },
-  { 
-    name: 'carousel', 
-    description: 'Carousel component with navigation and pagination', 
-    sourceDir: 'carousel', 
-    dependencies: ['embla-carousel-react', 'embla-carousel', 'class-variance-authority'] 
-  }
-];
+// 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({
@@ -40,6 +59,14 @@ async function main() {
   // Beautiful intro
   p.intro('✨ Welcome to Robin Library CLI');
 
+  // Add clickable link using ANSI escape codes for hyperlinks
+  const websiteUrl = 'https://robin-animation-library-620346143712.us-east1.run.app/';
+  const linkText = 'https://robin-animation-library-620346143712.us-east1.run.app/';
+  // ANSI escape code format: \u001b]8;;URL\u0007TEXT\u001b]8;;\u0007
+  const clickableLink = `\u001b]8;;${websiteUrl}\u0007${linkText}\u001b]8;;\u0007`;
+  p.log.info(`You can check examples in ${clickableLink}`);
+  
+
   // Check React dependency
   await checkReactDependency();
 
@@ -52,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>
+  );
+};