@androbinco/library-cli 0.1.0 → 0.2.0

package/src/templates/ticker/motion-ticker.tsx

@@ -0,0 +1,93 @@
+'use client';
+import { Fragment, useRef, useState } from 'react';
+
+import { animate, motion, useInView } from 'motion/react';
+
+import { cn } from '@/common/utils/classname-builder';
+
+import { useTickerClones } from './hooks/use-ticker-clones';
+import { useTickerIncremental } from './hooks/use-ticker-incremental';
+type MotionTickerProps = {
+  direction?: 'left' | 'right';
+  speed?: number;
+  delta?: number;
+  className?: string;
+  wrapperClassName?: string;
+  children: React.ReactNode;
+  hoverStop?: boolean;
+};
+
+export const MotionTicker = ({
+  direction = 'right',
+  speed = 1,
+  delta = 0.05,
+  className,
+  children,
+  wrapperClassName,
+  hoverStop = true,
+}: MotionTickerProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tickerClone = useRef<HTMLDivElement>(null);
+  const cardWrapper = useRef<HTMLDivElement>(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const isInView = useInView(containerRef, {
+    once: false,
+    margin: '50% 0%',
+  });
+  const { clonesNeeded } = useTickerClones({ tickerCard: cardWrapper, tickerClone, direction });
+  const calculateProportionalDuration = (distance: number, fps?: number) => {
+    const distancePerFrame = speed * delta;
+    const framesNeeded = distance / distancePerFrame;
+
+    return framesNeeded / (fps ?? 60); // calc is based on 60fps
+  };
+  const { x1, x2, fps } = useTickerIncremental({
+    speed,
+    direction,
+    delta,
+    stopIncrement: isHovering || !isInView,
+    onStop: async (motionValue) => {
+      if (!isInView) return;
+      const distance = 3;
+      const EASE_OUT_COMPENSATION = 1.15;
+      const duration =
+        calculateProportionalDuration(distance, fps?.current) * EASE_OUT_COMPENSATION;
+
+      return await animate(motionValue, motionValue.get() + distance, {
+        duration,
+        ease: 'easeOut',
+      });
+    },
+  });
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('group relative w-full overflow-hidden', wrapperClassName)}
+      role="group"
+      onMouseEnter={() => {
+        if (!hoverStop) return;
+        setIsHovering(true);
+      }}
+      onMouseLeave={() => {
+        if (!hoverStop) return;
+        setIsHovering(false);
+      }}
+    >
+      <motion.div
+        ref={cardWrapper}
+        className={cn('flex w-max flex-row', className)}
+        style={{ x: x1 }}
+      >
+        {Array.from({ length: clonesNeeded }).map((_, index) => {
+          return <Fragment key={index}>{children}</Fragment>;
+        })}
+      </motion.div>
+      <motion.div
+        ref={tickerClone}
+        className={cn('absolute top-0 h-full w-max', className)}
+        style={{ x: x2 }}
+      />
+    </div>
+  );
+};

package/src/utils/components.js

@@ -5,82 +5,433 @@ import {
   checkMissingDependencies,
   installDependencies
 } from './dependencies.js';
-import { copyComponent } from './files.js';
+import { copyComponent, checkComponentExists } from './files.js';
+import fs from 'fs-extra';
+import path from 'path';
 
-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;
+export async function handleSubmenuFlow(component, templatesDir) {
+  if (!component.hasSubmenu || !component.submenuOptions || component.submenuOptions.length === 0) {
+    p.log.error(`Component "${component.name}" is not configured for submenu flow.`);
+    return { goBack: false };
   }
 
-  if (!selectedComponents.length) {
-    p.log.info('No components selected.');
-    return;
-  }
+  while (true) {
+    // Show submenu with options and go back
+    const submenuOptions = component.submenuOptions.map(option => ({
+      value: option.value,
+      label: option.label,
+      hint: option.description || ''
+    }));
 
-  // 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
+    const selectedOptions = await p.multiselect({
+      message: `Select options for ${component.name} (press spacebar to select and return to confirm selection)`,
+      options: [
+        ...submenuOptions,
+        { value: '__go_back__', label: '← Go back', hint: 'Return to component selection' }
+      ],
+      required: 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 (p.isCancel(selectedOptions)) {
+      p.cancel('Operation cancelled.');
+      return { goBack: false };
+    }
+
+    // Check if user selected go back
+    if (selectedOptions.includes('__go_back__')) {
+      return { goBack: true };
+    }
+
+    // Remove go back from selected options
+    const filteredOptions = selectedOptions.filter(opt => opt !== '__go_back__');
+
+    if (!filteredOptions.length) {
+      p.log.info('No options selected.');
+      continue;
+    }
+
+    // Process each selected option
+    const allComponentsToCopy = new Set();
+    const allExamplesToCopy = [];
+    const requiredComponents = new Set();
+    let shouldRestartSubmenu = false;
+
+    for (const selectedValue of filteredOptions) {
+      const option = component.submenuOptions.find(opt => opt.value === selectedValue);
+      if (!option) continue;
+
+      // Collect examples
+      if (option.examples) {
+        allExamplesToCopy.push(...option.examples);
+      }
+
+      // Handle nested submenu
+      if (option.hasNestedSubmenu && option.nestedSubmenuOptions) {
+        // Filter components based on existence check
+        const availableComponents = [];
+        const optionRequiredComponents = new Set();
+        
+        for (const nestedOption of option.nestedSubmenuOptions) {
+          // Check if component should be filtered out
+          if (nestedOption.checkExists) {
+            const exists = await checkComponentExists(component.name, nestedOption.file);
+            if (exists) {
+              continue; // Skip if already exists
+            }
+          }
+
+          // Track required components for this option
+          if (nestedOption.required) {
+            optionRequiredComponents.add(nestedOption.file);
+            requiredComponents.add(nestedOption.file);
+          }
+
+          availableComponents.push({
+            value: nestedOption.value,
+            label: nestedOption.file.replace('.tsx', '').replace('.ts', ''),
+            hint: nestedOption.required ? 'Required' : 'Optional'
+          });
+        }
+
+        if (availableComponents.length === 0) {
+          p.log.info(`All components for "${option.label}" already exist. Skipping.`);
+          continue;
+        }
+
+        // Show nested submenu with go back
+        const nestedSelected = await p.multiselect({
+          message: `Select components for ${option.label} (press spacebar to select and return to confirm selection)`,
+          options: [
+            ...availableComponents,
+            { value: '__go_back__', label: '← Go back', hint: 'Return to previous menu' }
+          ],
+          required: true
+        });
+
+        if (p.isCancel(nestedSelected)) {
+          p.cancel('Operation cancelled.');
+          return { goBack: false };
+        }
+
+        // Check if user selected go back in nested menu
+        if (nestedSelected.includes('__go_back__')) {
+          shouldRestartSubmenu = true;
+          break; // Break out of for loop to restart submenu
+        }
+
+        // Remove go back and collect selected components
+        const filteredNested = nestedSelected.filter(opt => opt !== '__go_back__');
+        
+        for (const nestedValue of filteredNested) {
+          const nestedOption = option.nestedSubmenuOptions.find(opt => opt.value === nestedValue);
+          if (nestedOption) {
+            allComponentsToCopy.add(nestedOption.file);
+          }
+        }
+
+        // Add required components for this option
+        for (const requiredFile of optionRequiredComponents) {
+          allComponentsToCopy.add(requiredFile);
+        }
+      } else {
+        // Handle ticker component specifically
+        if (component.name === 'ticker') {
+          if (selectedValue === 'hover') {
+            // Hover option: copy motion-ticker.tsx
+            allComponentsToCopy.add('motion-ticker.tsx');
+          } else if (selectedValue === 'non-hover') {
+            // Non-hover option: copy css-ticker directory
+            allComponentsToCopy.add('css-ticker');
+          }
+        } else {
+          // No nested submenu - copy all component files (legacy behavior)
+          // This maintains backward compatibility
+        }
+      }
+    }
+
+    // For ticker component, automatically add hooks folder if it doesn't exist
+    if (component.name === 'ticker' && allComponentsToCopy.size > 0) {
+      const hooksDestPath = path.resolve(process.cwd(), 'src', 'components', component.name, 'hooks');
+      if (!(await fs.pathExists(hooksDestPath))) {
+        allComponentsToCopy.add('hooks');
+      }
+    }
+
+    // If user selected go back from nested menu, restart submenu
+    if (shouldRestartSubmenu) {
+      continue;
+    }
+
+    // If we have components to copy (from nested submenu), proceed with selective copying
+    if (allComponentsToCopy.size > 0) {
+      // Check and install dependencies
+      // For ticker hover variant, motion is required
+      let dependencies = component.dependencies || [];
+      if (component.name === 'ticker') {
+        // Check if hover variant is selected
+        const hoverSelected = filteredOptions.includes('hover');
+        if (hoverSelected) {
+          // Motion is required for hover variant
+          dependencies = ['motion'];
+        } else {
+          // No dependencies needed for non-hover variant only
+          dependencies = [];
+        }
+      }
+      const missingDependencies = await checkMissingDependencies(dependencies);
       
-      if (!installSuccess) {
-        const continueAnyway = await p.confirm({
-          message: 'Installation failed. Continue with copying components anyway?',
+      // For ticker hover variant, motion is required (not optional)
+      if (component.name === 'ticker' && filteredOptions.includes('hover') && missingDependencies.includes('motion')) {
+        const packageManager = await detectPackageManager();
+        
+        p.log.info('Motion dependency is required for the hover ticker variant.');
+        
+        const shouldInstall = await p.confirm({
+          message: `Install motion dependency using ${packageManager.manager}?`,
           initialValue: true
         });
+
+        if (p.isCancel(shouldInstall) || !shouldInstall) {
+          p.log.error('Motion dependency is required for hover ticker variant. Operation cancelled.');
+          return { goBack: false };
+        }
+
+        const installSuccess = await installDependencies(['motion'], packageManager);
         
-        if (p.isCancel(continueAnyway) || !continueAnyway) {
-          p.log.info('Operation cancelled.');
-          return;
+        if (!installSuccess) {
+          const continueAnyway = await p.confirm({
+            message: 'Installation failed. Continue with copying component anyway?',
+            initialValue: false
+          });
+          
+          if (p.isCancel(continueAnyway) || !continueAnyway) {
+            p.log.info('Operation cancelled.');
+            return { goBack: false };
+          }
+        }
+      } else 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 component anyway?',
+              initialValue: true
+            });
+            
+            if (p.isCancel(continueAnyway) || !continueAnyway) {
+              p.log.info('Operation cancelled.');
+              return { goBack: false };
+            }
+          }
+        } else {
+          p.log.info('Skipping dependency installation. You can install them manually later.');
         }
       }
+
+      // Copy selected components
+      const spinner = p.spinner();
+      spinner.start(`Copying ${component.name} components...`);
+
+      const componentsArray = Array.from(allComponentsToCopy);
+      const success = await copyComponent(component, templatesDir, allExamplesToCopy, componentsArray);
+
+      if (success) {
+        spinner.stop(`✅ Component ${component.name} copied successfully!`);
+        p.log.success(`Component files are now available at: src/components/${component.name}/`);
+        if (allExamplesToCopy.length > 0) {
+          p.log.success(`Examples are available at: src/components/${component.name}/examples/`);
+        }
+      } else {
+        spinner.stop(`⚠️  Component ${component.name} was not copied.`);
+      }
+
+      return { goBack: false };
     } else {
-      p.log.info('Skipping dependency installation. You can install them manually later.');
+      // Legacy behavior: copy all files if no nested submenu was used
+      // Check and install dependencies
+      const dependencies = component.dependencies || [];
+      const missingDependencies = await checkMissingDependencies(dependencies);
+
+      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 component anyway?',
+              initialValue: true
+            });
+            
+            if (p.isCancel(continueAnyway) || !continueAnyway) {
+              p.log.info('Operation cancelled.');
+              return { goBack: false };
+            }
+          }
+        } else {
+          p.log.info('Skipping dependency installation. You can install them manually later.');
+        }
+      }
+
+      // Copy component with selected examples
+      const spinner = p.spinner();
+      spinner.start(`Copying ${component.name} component...`);
+
+      const success = await copyComponent(component, templatesDir, allExamplesToCopy);
+
+      if (success) {
+        spinner.stop(`✅ Component ${component.name} copied successfully!`);
+        p.log.success(`Component files are now available at: src/components/${component.name}/`);
+        if (allExamplesToCopy.length > 0) {
+          p.log.success(`Examples are available at: src/components/${component.name}/examples/`);
+        }
+      } else {
+        spinner.stop(`⚠️  Component ${component.name} was not copied.`);
+      }
+
+      return { goBack: false };
     }
   }
+}
+
+export async function handleComponentsFlow(components, templatesDir) {
+  let regularComponents = [];
+  let componentsWithSubmenu = [];
+
+  while (true) {
+    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
+    });
 
-  // 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.`);
+    if (p.isCancel(selectedComponents)) {
+      p.cancel('Operation cancelled.');
+      return;
+    }
+
+    if (!selectedComponents.length) {
+      p.log.info('No components selected.');
+      return;
+    }
+
+    // Separate components with submenu from regular components
+    componentsWithSubmenu = [];
+    regularComponents = [];
+
+    for (const componentName of selectedComponents) {
+      const component = components.find(c => c.name === componentName);
+      if (!component) {
+        p.log.warn(`Component "${componentName}" not found. Skipping.`);
+        continue;
+      }
+
+      if (component.hasSubmenu) {
+        componentsWithSubmenu.push(component);
+      } else {
+        regularComponents.push(component);
+      }
+    }
+
+    // Handle components with submenu
+    let shouldGoBack = false;
+    for (const component of componentsWithSubmenu) {
+      const result = await handleSubmenuFlow(component, templatesDir);
+      // If user selected go back, break and show component selection again
+      if (result && result.goBack) {
+        shouldGoBack = true;
+        break;
+      }
+    }
+
+    // If user selected go back, continue loop to show component selection again
+    if (shouldGoBack) {
       continue;
     }
 
-    const spinner = p.spinner();
-    spinner.start(`Copying ${component.name} component...`);
+    // If we processed all components without go back, exit the loop
+    break;
+  }
 
-    const success = await copyComponent(component, templatesDir);
+  // Handle regular components
+  if (regularComponents.length > 0) {
+    // Check and install dependencies for regular components
+    const regularComponentNames = regularComponents.map(c => c.name);
+    const allDependencies = collectDependencies(regularComponentNames, components);
+    const missingDependencies = await checkMissingDependencies(allDependencies);
 
-    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.`);
+    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 regular components
+    for (const component of regularComponents) {
+      const spinner = p.spinner();
+      spinner.start(`Copying ${component.name} component...`);
+
+      const examplesToCopy = component.examples || [];
+const success = await copyComponent(component, templatesDir, examplesToCopy);
+
+      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.`);
+      }
     }
   }
 }