Merge pull request #2 from izadoesdev/main

Suhaib3100 · web-flow · commit b28ec9e73da3 · 2025-04-02T15:36:35.000+05:30
feat(commands): list to download all components at once
diff --git a/cli-component/bin/cli.js b/cli-component/bin/cli.js
@@ -10,7 +10,7 @@ welcome();
 
 program
   .name('once-ui-cli')
-  .description('CLI tool for adding Once UI  components')
+  .description('CLI tool for adding Once UI components')
   .version('1.0.0');
 
 program
@@ -19,9 +19,15 @@ program
   .action(init);
 
 program
-  .command('add <component>')
-  .description('Add a specific component')
-  .action(add);
+  .command('add [components...]')
+  .description('Add specific components or start interactive selection')
+  .action((components) => {
+    if (components && components.length > 0) {
+      add(components.join(' '));
+    } else {
+      add();
+    }
+  });
 
 program
   .command('list')
diff --git a/cli-component/package-lock.json b/cli-component/package-lock.json
diff --git a/cli-component/package.json b/cli-component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "once-ui-cli",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "CLI tool for managing Once UI components",
   "type": "module",
   "bin": {
diff --git a/cli-component/src/commands/add.js b/cli-component/src/commands/add.js
@@ -1,31 +1,79 @@
 import { components } from '../utils/components.js';
 import { installComponent } from '../utils/installer.js';
-import { error, success } from '../utils/logger.js';
+import { error, success, info } from '../utils/logger.js';
 import boxen from 'boxen';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+
+function getProgress(current, total) {
+  const width = 20;
+  const filled = Math.round((current / total) * width);
+  const bar = '█'.repeat(filled) + '░'.repeat(width - filled);
+  const percent = Math.round((current / total) * 100);
+  return `${bar} ${percent}%`;
+}
+
+async function installComponents(componentsToInstall) {
+  if (componentsToInstall.length === 0) return;
+
+  console.log(boxen(
+    `\n🚀 Adding ${componentsToInstall.length} components: ${componentsToInstall.join(', ')}\n`,
+    { padding: 1, borderStyle: 'round', borderColor: 'cyan' }
+  ));
+
+  info('Adding components in: ./once-ui/components\n');
+
+  for (let i = 0; i < componentsToInstall.length; i++) {
+    const component = componentsToInstall[i];
+    try {
+      const progress = getProgress(i + 1, componentsToInstall.length);
+      process.stdout.write(chalk.cyan(`[${progress}] Installing ${component}...\r`));
+      await installComponent(component);
+      console.log(chalk.green(`✓ ${component} installed                                 `));
+    } catch (err) {
+      error(`Failed to add ${component}: ${err.message}`);
+    }
+  }
+
+  console.log(boxen(
+    `\n✨ All components have been added!\n`,
+    { padding: 1, borderStyle: 'round', borderColor: 'cyan' }
+  ));
+}
 
 export async function add(componentName) {
-  // Convert component name to lowercase for case-insensitive comparison
-  const normalizedComponentName = componentName.toLowerCase();
-  const normalizedComponents = components.map(c => c.toLowerCase());
-  
-  // Find the original case version of the component
-  const originalComponentName = components.find(c => c.toLowerCase() === normalizedComponentName);
-  
-  // Check if the component exists
-  if (!normalizedComponents.includes(normalizedComponentName)) {
-    error(`Component "${componentName}" not found.`);
+  // If no component name provided, show interactive selection
+  if (!componentName) {
+    const choices = components.map(c => ({ name: c, value: c }));
+    const { selectedComponents } = await inquirer.prompt([{
+      type: 'checkbox',
+      name: 'selectedComponents',
+      message: 'Select components to add (space to select, a to select all):',
+      choices,
+      pageSize: 15,
+      loop: true
+    }]);
+
+    return installComponents(selectedComponents);
+  }
+
+  // Handle direct component names
+  const requestedComponents = componentName.split(' ').filter(Boolean);
+  const validComponents = requestedComponents.filter(name => 
+    components.find(c => c.toLowerCase() === name.toLowerCase())
+  );
+
+  if (validComponents.length !== requestedComponents.length) {
+    const invalidComponents = requestedComponents.filter(name => 
+      !components.find(c => c.toLowerCase() === name.toLowerCase())
+    );
+    error(`Some components were not found: ${invalidComponents.join(', ')}`);
     console.log(boxen(
       `Available components:\n${components.join(', ')}`,
       { padding: 1, margin: 1, borderStyle: 'round', borderColor: 'cyan' }
     ));
     return;
   }
 
-  // Proceed to install the component using the original case version
-  try {
-    await installComponent(originalComponentName);
-    success(`${originalComponentName} added successfully!`);
-  } catch (err) {
-    error(`Failed to add ${originalComponentName}: ${err.message}`);
-  }
+  return installComponents(validComponents);
 }
diff --git a/cli-component/src/utils/installer.js b/cli-component/src/utils/installer.js
@@ -3,8 +3,6 @@ import path from 'path';
 import axios from 'axios';
 import { fetchComponentContent, fetchStyleContent, fetchStyleFile, fetchTokenFile } from './github.js';
 import { getDependencies } from './parser.js';
-import { createSpinner } from './spinner.js';
-import { info } from './logger.js';
 
 async function detectProjectStructure() {
   // Check for Next.js app directory structure
@@ -36,32 +34,22 @@ export async function installComponent(componentName, targetDir = null) {
     targetDir = await detectProjectStructure();
   }
 
-  const spinner = createSpinner(`Adding ${componentName}...`);
-
   try {
     await fs.ensureDir(targetDir);
 
-    // Show installation directory on first component
-    if (!global.installPathShown) {
-      info(` Adding components in: ${targetDir}`);
-      global.installPathShown = true;
-    }
-
     // If it's a SCSS file
     if (componentName.endsWith('.module.scss')) {
       const componentBaseName = componentName.replace('.module.scss', '');
       const styleContent = await fetchStyleContent(componentBaseName);
       if (styleContent) {
         await installFile(componentName, styleContent, targetDir);
-        spinner.succeed(`Added style: ${componentName}`);
       }
       return;
     }
 
     // Fetch and install the component
     const content = await fetchComponentContent(componentName);
     if (!content) {
-      spinner.succeed(`Failed to fetch ${componentName}`);
       return;
     }
 
@@ -74,8 +62,6 @@ export async function installComponent(componentName, targetDir = null) {
       await installFile(`${componentName}.module.scss`, styleContent, targetDir);
     }
 
-    spinner.succeed(`${componentName} added`);
-
     // Install dependencies
     const dependencies = await getDependencies(content);
     for (const dep of dependencies) {
@@ -103,150 +89,113 @@ export async function installComponent(componentName, targetDir = null) {
     // Install config.js file
     await installConfigFile();
   } catch (error) {
-    // Suppress error messages
+    throw error;
   }
 }
 
 async function createIconsFile() {
   const iconsFilePath = './once-ui/icons.ts';
   const iconsContent = await fetchIconsContent();
-
   await installFile('icons.ts', iconsContent, './once-ui');
 }
 
 async function fetchIconsContent() {
   const GITHUB_ICONS_URL = 'https://raw.githubusercontent.com/once-ui-system/nextjs-starter/main/src/once-ui/icons.ts';
-
   try {
     const response = await axios.get(GITHUB_ICONS_URL);
     return response.data;
   } catch (err) {
-    return ''; // Suppress error
+    return '';
   }
 }
 
 async function installInterfacesAndTypes() {
-  const interfacesFilePath = './once-ui/interfaces.ts';
-  const typesFilePath = './once-ui/types.ts';
-
   const interfacesContent = await fetchInterfacesContent();
   const typesContent = await fetchTypesContent();
-
   await installFile('interfaces.ts', interfacesContent, './once-ui');
   await installFile('types.ts', typesContent, './once-ui');
 }
 
 async function fetchInterfacesContent() {
   const GITHUB_INTERFACES_URL = 'https://raw.githubusercontent.com/once-ui-system/nextjs-starter/main/src/once-ui/interfaces.ts';
-
   try {
     const response = await axios.get(GITHUB_INTERFACES_URL);
     return response.data;
   } catch (err) {
-    return ''; // Suppress error
+    return '';
   }
 }
 
 async function fetchTypesContent() {
   const GITHUB_TYPES_URL = 'https://raw.githubusercontent.com/once-ui-system/nextjs-starter/main/src/once-ui/types.ts';
-
   try {
     const response = await axios.get(GITHUB_TYPES_URL);
     return response.data;
   } catch (err) {
-    return ''; // Suppress error
+    return '';
   }
 }
 
 async function installUseDebounce() {
   const hooksDir = './once-ui/hooks';
-  await fs.ensureDir(hooksDir); // Create hooks directory if it doesn't exist
-
-  const useDebounceFilePath = './once-ui/hooks/useDebounce.ts';
+  await fs.ensureDir(hooksDir);
   const useDebounceContent = await fetchUseDebounceContent();
-
   await installFile('useDebounce.ts', useDebounceContent, hooksDir);
 }
 
 async function fetchUseDebounceContent() {
   const GITHUB_USE_DEBOUNCE_URL = 'https://raw.githubusercontent.com/once-ui-system/nextjs-starter/main/src/once-ui/hooks/useDebounce.ts';
-
   try {
     const response = await axios.get(GITHUB_USE_DEBOUNCE_URL);
     return response.data;
   } catch (err) {
-    return ''; // Suppress error
+    return '';
   }
 }
 
 async function installConfigFile() {
   const resourcesDir = './once-ui/resources';
-  await fs.ensureDir(resourcesDir); // Create resources directory if it doesn't exist
-
-  const configFilePath = './once-ui/resources/config.js';
+  await fs.ensureDir(resourcesDir);
   const configContent = await fetchConfigContent();
-
   await installFile('config.js', configContent, resourcesDir);
 }
 
 async function fetchConfigContent() {
   const GITHUB_CONFIG_URL = 'https://raw.githubusercontent.com/once-ui-system/nextjs-starter/main/src/once-ui/resources/config.js';
-
   try {
     const response = await axios.get(GITHUB_CONFIG_URL);
     return response.data;
   } catch (err) {
-    return ''; // Suppress error
+    return '';
   }
 }
 
 async function installStylesAndTokens() {
   const stylesDir = './once-ui/styles';
   const tokensDir = './once-ui/tokens';
 
-  // Create directories for styles and tokens
   await fs.ensureDir(stylesDir);
   await fs.ensureDir(tokensDir);
 
-  // List of styles to install
   const styles = [
-    'background.scss',
-    'border.scss',
-    'breakpoints.scss',
-    'color.scss',
-    'display.scss',
-    'flex.scss',
-    'global.scss',
-    'grid.scss',
-    'index.scss',
-    'layout.scss',
-    'position.scss',
-    'shadow.scss',
-    'size.scss',
-    'spacing.scss',
-    'typography.scss',
+    'background.scss', 'border.scss', 'breakpoints.scss',
+    'color.scss', 'display.scss', 'flex.scss', 'global.scss',
+    'grid.scss', 'index.scss', 'layout.scss', 'position.scss',
+    'shadow.scss', 'size.scss', 'spacing.scss', 'typography.scss',
     'utilities.scss'
   ];
 
-  // Install styles
   for (const style of styles) {
     const styleContent = await fetchStyleFile(style);
     await installFile(style, styleContent, stylesDir);
   }
 
-  // List of tokens to install
   const tokens = [
-    'border.scss',
-    'function.scss',
-    'index.scss',
-    'layout.scss',
-    'scheme.scss',
-    'shadow.scss',
-    'theme.scss',
-    'typography.scss'
+    'border.scss', 'function.scss', 'index.scss',
+    'layout.scss', 'scheme.scss', 'shadow.scss',
+    'theme.scss', 'typography.scss'
   ];
 
-  // Install tokens
   for (const token of tokens) {
     const tokenContent = await fetchTokenFile(token);
     await installFile(token, tokenContent, tokensDir);

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "once-ui-cli",`
`3`		`- "version": "3.1.1",`
	`3`	`+ "version": "3.1.2",`
`4`	`4`	`"description": "CLI tool for managing Once UI components",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"bin": {`