@androbinco/library-cli 0.1.0 → 0.3.0

package/src/utils/components.js

@@ -5,82 +5,615 @@ 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;
+// Component registry
+export 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-components',
+    description: 'Scroll-driven animation components',
+    sourceDir: 'scroll-components',
+    hasSubmenu: true,
+    submenuOptions: [
+      {
+        value: 'scroll-tracker',
+        label: 'Scroll Tracker Provider',
+        description: 'Scroll progress tracking provider for animations',
+        examples: ['scroll-tracker-showcase.tsx']
+      },
+      {
+        value: 'parallax-image',
+        label: 'Parallax Image',
+        description: 'CSS-based parallax effect using scroll-driven animations',
+        examples: ['parallax/examples/parallax-showcase.tsx']
+      },
+      {
+        value: 'scale-gallery',
+        label: 'Scale Gallery',
+        description: 'Expanding gallery with scroll-driven scaling',
+        examples: ['scale-gallery/examples/scale-gallery-showcase.tsx']
+      }
+    ],
+    dependencies: ['motion']
+  },
+  {
+    name: 'strapi-dynamic-zone',
+    description: 'Type-safe renderer for Strapi Dynamic Zones with React',
+    sourceDir: 'strapi-dynamic-zone',
+    dependencies: [],
+    examples: ['page.tsx', 'renderers.tsx', 'types.ts']
+  },
+  {
+    name: 'faqs-accordion',
+    description: 'Accessible FAQ accordion component using Radix UI',
+    sourceDir: 'faqs-accordion',
+    dependencies: ['@radix-ui/react-accordion'],
+    examples: ['faqs-showcase.tsx']
+  },
+  {
+    name: 'lenis',
+    description: 'Smooth scroll provider with Lenis',
+    sourceDir: 'lenis',
+    dependencies: ['lenis'],
+    examples: ['providers.tsx']
+  }
+];
+
+// Helper functions for CLI commands
+export function getComponentByName(name) {
+  return COMPONENTS.find(c => c.name === name);
+}
+
+export function getVariantByName(component, variantName) {
+  if (!component.hasSubmenu || !component.submenuOptions) return null;
+  return component.submenuOptions.find(v => v.value === variantName);
+}
+
+export function getFilesForVariant(component, variant) {
+  const files = [];
+
+  if (component.name === 'ticker') {
+    if (variant.value === 'hover') {
+      files.push('motion-ticker.tsx');
+      files.push('hooks');
+    } else if (variant.value === 'non-hover') {
+      files.push('css-ticker');
+      files.push('hooks');
+    }
+  } else if (component.name === 'scroll-components') {
+    if (variant.value === 'scroll-tracker') {
+      files.push('scroll-tracker-provider.tsx');
+    } else if (variant.value === 'parallax-image') {
+      files.push('parallax/parallax.tsx');
+      files.push('parallax/parallax.css');
+    } else if (variant.value === 'scale-gallery') {
+      files.push('scale-gallery/scale-gallery.tsx');
+      files.push('scale-gallery/components/expanding-element.tsx');
+      files.push('hooks/use-client-dimensions.ts');
+      files.push('scroll-tracker-provider.tsx');
+    }
+  } else if (component.name === 'in-view' && variant.hasNestedSubmenu) {
+    // Copy all files for the variant
+    for (const nested of variant.nestedSubmenuOptions) {
+      files.push(nested.file);
+    }
   }
 
-  if (!selectedComponents.length) {
-    p.log.info('No components selected.');
-    return;
+  return files;
+}
+
+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 };
   }
 
-  // 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
+  while (true) {
+    // Show submenu with options and go back
+    const submenuOptions = component.submenuOptions.map(option => ({
+      value: option.value,
+      label: option.label,
+      hint: option.description || ''
+    }));
+
+    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 if (component.name === 'scroll-components') {
+          // Handle scroll-components submenu options
+          if (selectedValue === 'scroll-tracker') {
+            allComponentsToCopy.add('scroll-tracker-provider.tsx');
+          } else if (selectedValue === 'parallax-image') {
+            allComponentsToCopy.add('parallax/parallax.tsx');
+            allComponentsToCopy.add('parallax/parallax.css');
+          } else if (selectedValue === 'scale-gallery') {
+            allComponentsToCopy.add('scale-gallery/scale-gallery.tsx');
+            allComponentsToCopy.add('scale-gallery/components/expanding-element.tsx');
+            allComponentsToCopy.add('hooks/use-client-dimensions.ts');
+
+            // Check if scroll-tracker-provider exists, if not add it
+            const trackerExists = await checkComponentExists(component.name, 'scroll-tracker-provider.tsx');
+            if (!trackerExists) {
+              allComponentsToCopy.add('scroll-tracker-provider.tsx');
+            }
+          }
+        } 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 (!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();
         
-        if (p.isCancel(continueAnyway) || !continueAnyway) {
-          p.log.info('Operation cancelled.');
-          return;
+        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 = [];
 
-  // 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.`);
+  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
+        })),
+        { value: '__go_back__', label: '← Go back', hint: 'Return to main menu' }
+      ],
+      required: true
+    });
+
+    if (p.isCancel(selectedComponents)) {
+      p.cancel('Operation cancelled.');
+      return;
+    }
+
+    // Check if user selected go back
+    if (selectedComponents.includes('__go_back__')) {
+      return { goBack: true };
+    }
+
+    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.`);
+      }
     }
   }
 }