slicejs-cli 2.0.14 → 2.1.0

package/client.js

@@ -5,16 +5,16 @@ import initializeProject from "./commands/init/init.js";
 import createComponent from "./commands/createComponent/createComponent.js";
 import listComponents from "./commands/listComponents/listComponents.js";
 import deleteComponent from "./commands/deleteComponent/deleteComponent.js";
+import getComponent, { listComponents as listRemoteComponents, syncComponents } from "./commands/getComponent/getComponent.js";
+import versionChecker from "./commands/utils/versionChecker.js";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 import validations from "./commands/Validations.js";
-
+import Print from "./commands/Print.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-
-
 const loadConfig = () => {
   try {
     const configPath = path.join(__dirname, "../../src/sliceConfig.json");
@@ -31,118 +31,257 @@ const getCategories = () => {
   return config && config.paths?.components ? Object.keys(config.paths.components) : [];
 };
 
-const sliceClient = program;
+// Function to run version check for all commands
+async function runWithVersionCheck(commandFunction, ...args) {
+  // Run the command first
+  const result = await commandFunction(...args);
+  
+  // Then check for updates (non-blocking)
+  setTimeout(() => {
+    versionChecker.checkForUpdates(false);
+  }, 100);
+  
+  return result;
+}
 
-sliceClient.version("1.0.0").description("CLI for managing framework components");
+const sliceClient = program;
 
-// COMPONENT COMMAND GROUP
-const componentCommand = sliceClient.command("component").description("Manage components");
+sliceClient.version("2.1.0").description("CLI for managing Slice.js framework components");
 
-//create init command
+// INIT COMMAND
 sliceClient
   .command("init")
-  .description("Initialize a new SliceJS project")
-  .action(() => {
-    initializeProject();
+  .description("Initialize a new Slice.js project")
+  .action(async () => {
+    await runWithVersionCheck(() => {
+      initializeProject();
+      return Promise.resolve();
+    });
   });
 
-// CREATE COMPONENT
+// VERSION COMMAND
+sliceClient
+  .command("version")
+  .alias("v")
+  .description("Show version information and check for updates")
+  .action(async () => {
+    await versionChecker.showVersionInfo();
+  });
+
+// COMPONENT COMMAND GROUP - For local component management
+const componentCommand = sliceClient.command("component").alias("comp").description("Manage local project components");
+
+// CREATE LOCAL COMPONENT
 componentCommand
   .command("create")
-  .description("Create a new component")
+  .alias("new")
+  .description("Create a new component in your local project")
   .action(async () => {
-    const categories = getCategories();
-    if (categories.length === 0) {
-      console.error("No categories available. Check your configuration.");
-      return;
-    }
+    await runWithVersionCheck(async () => {
+      const categories = getCategories();
+      if (categories.length === 0) {
+        Print.error("No categories available. Check your configuration.");
+        return;
+      }
+
+      const answers = await inquirer.prompt([
+        {
+          type: "input",
+          name: "componentName",
+          message: "Enter the component name:",
+          validate: (input) => (input ? true : "Component name cannot be empty"),
+        },
+        {
+          type: "list",
+          name: "category",
+          message: "Select the component category:",
+          choices: categories,
+        }])
 
-    const answers = await inquirer.prompt([
-      {
-        type: "input",
-        name: "componentName",
-        message: "Enter the component name:",
-        validate: (input) => (input ? true : "Component name cannot be empty"),
-      },
-      {
-        type: "list",
-        name: "category",
-        message: "Select the component category:",
-        choices: categories,
-      }])
-
-      if(validations.getCategoryType(answers.category)==='Visual'){
-        const properties = await inquirer.prompt([
-          {
-            type: "input",
-            name: "properties",
-            message: "Enter the properties (comma separated):"
-          },
-        ]);
-        answers.properties = properties.properties.split(",").map((prop) => prop.trim());
-      } else {
-        answers.properties = [];
+        if(validations.getCategoryType(answers.category)==='Visual'){
+          const properties = await inquirer.prompt([
+            {
+              type: "input",
+              name: "properties",
+              message: "Enter the properties (comma separated):"
+            },
+          ]);
+          answers.properties = properties.properties.split(",").map((prop) => prop.trim());
+        } else {
+          answers.properties = [];
+        }
+      
+      if (createComponent(answers.componentName, answers.category, answers.properties)) {
+        listComponents();
       }
-    
-    if (createComponent(answers.componentName, answers.category, answers.properties)) {
-      listComponents();
-    }
+    });
   });
 
+// LIST LOCAL COMPONENTS
+componentCommand
+  .command("list")
+  .alias("ls")
+  .description("List all components in your local project")
+  .action(async () => {
+    await runWithVersionCheck(() => {
+      listComponents();
+      return Promise.resolve();
+    });
+  });
 
-// DELETE COMPONENT
+// DELETE LOCAL COMPONENT
 componentCommand
   .command("delete")
-  .description("Delete an existing component")
+  .alias("remove")
+  .description("Delete a component from your local project")
   .action(async () => {
-    const categories = getCategories();
-    if (categories.length === 0) {
-      console.error("No categories available. Check your configuration.");
-      return;
-    }
+    await runWithVersionCheck(async () => {
+      const categories = getCategories();
+      if (categories.length === 0) {
+        Print.error("No categories available. Check your configuration.");
+        return;
+      }
+
+      deleteComponent();
+    });
+  });
+
+// REGISTRY COMMAND GROUP - For component registry operations
+const registryCommand = sliceClient.command("registry").alias("reg").description("Manage components from official Slice.js repository");
+
+// GET COMPONENTS FROM REGISTRY
+registryCommand
+  .command("get [components...]")
+  .description("Download and install components from official repository")
+  .option("-f, --force", "Force overwrite existing components")
+  .option("-s, --service", "Install Service components instead of Visual")
+  .action(async (components, options) => {
+    await runWithVersionCheck(async () => {
+      await getComponent(components, {
+        force: options.force,
+        service: options.service
+      });
+    });
+  });
 
-    const answers = await inquirer.prompt([
-      {
-        type: "input",
-        name: "componentName",
-        message: "Enter the component name to delete:",
-        validate: (input) => (input ? true : "Component name cannot be empty"),
-      },
-      {
-        type: "list",
-        name: "category",
-        message: "Select the component category:",
-        choices: categories,
-      },
-    ]);
-
-    const confirm = await inquirer.prompt([
-      {
-        type: "confirm",
-        name: "confirmation",
-        message: `Are you sure you want to delete ${answers.componentName}?`,
-      },
-    ]);
-
-    if (!confirm.confirmation) {
+// LIST REGISTRY COMPONENTS
+registryCommand
+  .command("list")
+  .alias("ls")
+  .description("List all available components in the official repository")
+  .action(async () => {
+    await runWithVersionCheck(async () => {
+      await listRemoteComponents();
+    });
+  });
+
+// SYNC COMPONENTS FROM REGISTRY
+registryCommand
+  .command("sync")
+  .description("Update all local components to latest versions from repository")
+  .option("-f, --force", "Force update without confirmation")
+  .action(async (options) => {
+    await runWithVersionCheck(async () => {
+      await syncComponents({
+        force: options.force
+      });
+    });
+  });
+
+// SHORTCUTS - Top-level convenient commands
+sliceClient
+  .command("get [components...]")
+  .description("🚀 Quick install components from registry (shortcut for registry get)")
+  .option("-f, --force", "Force overwrite existing components")
+  .option("-s, --service", "Install Service components instead of Visual")
+  .action(async (components, options) => {
+    await runWithVersionCheck(async () => {
+      if (!components || components.length === 0) {
+        Print.info("💡 Tip: Use 'slice registry list' to see available components");
+        Print.info("📖 Usage examples:");
+        console.log("   slice get Button Card Input");
+        console.log("   slice get FetchManager --service");
+        console.log("   slice registry list");
+        return;
+      }
       
-      return;
-    }
-    
+      await getComponent(components, {
+        force: options.force,
+        service: options.service
+      });
+    });
+  });
 
-    if (deleteComponent(answers.componentName, answers.category)) {
-      listComponents();
-    }
+sliceClient
+  .command("browse")
+  .description("📚 Quick browse available components (shortcut for registry list)")
+  .action(async () => {
+    await runWithVersionCheck(async () => {
+      await listRemoteComponents();
+    });
+  });
 
+sliceClient
+  .command("sync")
+  .description("🔄 Quick sync local components (shortcut for registry sync)")
+  .option("-f, --force", "Force update without confirmation")
+  .action(async (options) => {
+    await runWithVersionCheck(async () => {
+      await syncComponents({
+        force: options.force
+      });
+    });
+  });
 
+// UPDATE COMMAND
+sliceClient
+  .command("update")
+  .alias("upgrade")
+  .description("Check for and show available updates for CLI and framework")
+  .action(async () => {
+    Print.info("🔄 Checking for updates...");
+    const updateInfo = await versionChecker.checkForUpdates(false);
+    
+    if (updateInfo) {
+      if (updateInfo.cli.status === 'current' && updateInfo.framework.status === 'current') {
+        Print.success("✅ All components are up to date!");
+      }
+    } else {
+      Print.warning("⚠️  Could not check for updates. Please check your internet connection.");
+    }
   });
 
-// LIST COMPONENTS
-componentCommand
-  .command("list")
-  .description("List all components")
-  .action(() => {
-    listComponents();
+// Enhanced help
+sliceClient
+  .option("--no-version-check", "Skip version check for this command")
+  .configureHelp({
+    sortSubcommands: true,
+    subcommandTerm: (cmd) => cmd.name() + ' ' + cmd.usage()
   });
 
-sliceClient.parse(process.argv);
+// Custom help
+sliceClient.addHelpText('after', `
+💡 Common Usage Examples:
+  slice init                     - Initialize new Slice.js project
+  slice get Button Card Input    - Install Visual components from registry  
+  slice get FetchManager -s      - Install Service component from registry
+  slice browse                   - Browse all available components
+  slice sync                     - Update local components to latest versions
+  slice component create         - Create new local component
+  slice update                   - Check for CLI/framework updates
+
+📚 Command Categories:
+  • init, version, update        - Project setup and maintenance
+  • get, browse, sync            - Quick registry shortcuts  
+  • component <cmd>              - Local component management
+  • registry <cmd>               - Official repository operations
+
+🔗 More info: https://slice-js-docs.vercel.app/
+`);
+
+// Default action
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+}
+
+program.parse();

package/commands/getComponent/getComponent.js

@@ -0,0 +1,586 @@
+// commands/getComponent/getComponent.js
+
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import inquirer from "inquirer";
+import validations from "../Validations.js";
+import Print from "../Print.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Base URL del repositorio de documentación de Slice.js
+const DOCS_REPO_BASE_URL = 'https://raw.githubusercontent.com/VKneider/slice.js/main/src/Components';
+const COMPONENTS_REGISTRY_URL = 'https://raw.githubusercontent.com/VKneider/slice.js/main/src/Components/components.js';
+
+class ComponentRegistry {
+  constructor() {
+    this.componentsRegistry = null;
+  }
+
+  async loadRegistry() {
+    Print.info('📡 Cargando registro de componentes del repositorio oficial...');
+    
+    try {
+      const response = await fetch(COMPONENTS_REGISTRY_URL);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const content = await response.text();
+      
+      // Parse the components.js file content
+      const match = content.match(/const components = ({[\s\S]*?});/);
+      if (!match) {
+        throw new Error('Invalid components.js format from repository');
+      }
+
+      this.componentsRegistry = eval('(' + match[1] + ')');
+      Print.success('✅ Registro de componentes cargado exitosamente');
+      
+    } catch (error) {
+      Print.error(`❌ Error cargando registro de componentes: ${error.message}`);
+      Print.info('💡 Verifica tu conexión a internet y que el repositorio sea accesible');
+      throw error;
+    }
+  }
+
+  async getLocalComponents() {
+    try {
+      const componentsPath = path.join(__dirname, '../../../src/Components/components.js');
+      
+      if (!await fs.pathExists(componentsPath)) {
+        return {};
+      }
+
+      const content = await fs.readFile(componentsPath, 'utf8');
+      const match = content.match(/const components = ({[\s\S]*?});/);
+      
+      if (!match) {
+        return {};
+      }
+
+      return eval('(' + match[1] + ')');
+    } catch (error) {
+      Print.warning('⚠️  No se pudo leer el registro local de componentes');
+      return {};
+    }
+  }
+
+  async findUpdatableComponents() {
+    const localComponents = await this.getLocalComponents();
+    const updatableComponents = [];
+
+    Object.entries(localComponents).forEach(([name, category]) => {
+      // Check if component exists in remote registry
+      if (this.componentsRegistry[name] && this.componentsRegistry[name] === category) {
+        // Check if local component directory exists
+        const categoryPath = validations.getCategoryPath(category);
+        const componentPath = path.join(__dirname, '../../../src', categoryPath, name);
+        
+        if (fs.pathExistsSync(componentPath)) {
+          updatableComponents.push({
+            name,
+            category,
+            path: componentPath,
+            description: this.getComponentDescription(name, category)
+          });
+        }
+      }
+    });
+
+    return updatableComponents;
+  }
+
+  getAvailableComponents(category = null) {
+    if (!this.componentsRegistry) return {};
+    
+    const components = {};
+    Object.entries(this.componentsRegistry).forEach(([name, componentCategory]) => {
+      if (!category || componentCategory === category) {
+        components[name] = {
+          name,
+          category: componentCategory,
+          files: componentCategory === 'Visual' ? 
+            [`${name}.js`, `${name}.html`, `${name}.css`] : 
+            [`${name}.js`],
+          description: this.getComponentDescription(name, componentCategory)
+        };
+      }
+    });
+    
+    return components;
+  }
+
+  getComponentDescription(componentName, category) {
+    const descriptions = {
+      // Visual Components
+      'Button': 'Interactive button component with customizable styling and events',
+      'Card': 'Flexible container component for displaying content in card format',
+      'Input': 'Form input component with validation and multiple input types support',
+      'Checkbox': 'Checkbox input component with custom styling and state management',
+      'Switch': 'Toggle switch component for binary state selection',
+      'Select': 'Dropdown selection component with search and multi-select support',
+      'Details': 'Collapsible details component for expandable content sections',
+      'Grid': 'Responsive grid layout component for organizing content',
+      'Icon': 'Icon display component with multiple icon libraries support',
+      'Layout': 'Main layout component for application page structure',
+      'Loading': 'Loading indicator component with multiple animation styles',
+      'Navbar': 'Navigation bar component with responsive design and menu support',
+      'TreeView': 'Hierarchical tree view component for nested data display',
+      'TreeItem': 'Individual tree item component used within TreeView',
+      'DropDown': 'Dropdown menu component for contextual actions',
+      'Route': 'Single route component for client-side routing',
+      'MultiRoute': 'Multiple route handler component for complex routing',
+      'NotFound': '404 error page component for unmatched routes',
+      
+      // Service Components
+      'FetchManager': 'HTTP request manager service for API communication',
+      'LocalStorageManager': 'Local storage management service for browser storage',
+      'IndexedDbManager': 'IndexedDB database management service for client-side storage',
+      'Translator': 'Internationalization service for multi-language support',
+      'Link': 'Navigation link service for programmatic routing'
+    };
+
+    return descriptions[componentName] || `${componentName} component from Slice.js framework (${category})`;
+  }
+
+  async downloadComponentFiles(componentName, category, targetPath) {
+    const component = this.getAvailableComponents(category)[componentName];
+    
+    if (!component) {
+      throw new Error(`Component ${componentName} not found in ${category} category`);
+    }
+
+    const downloadedFiles = [];
+    Print.info(`📥 Descargando ${componentName} desde el repositorio oficial...`);
+
+    for (const fileName of component.files) {
+      const githubUrl = `${DOCS_REPO_BASE_URL}/${category}/${componentName}/${fileName}`;
+      const localPath = path.join(targetPath, fileName);
+
+      try {
+        const response = await fetch(githubUrl);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText} para ${fileName}`);
+        }
+
+        const content = await response.text();
+        await fs.writeFile(localPath, content, 'utf8');
+        downloadedFiles.push(fileName);
+        
+        console.log(`  ✅ ${fileName}`);
+      } catch (error) {
+        Print.error(`  ❌ Error descargando ${fileName}: ${error.message}`);
+        throw error;
+      }
+    }
+
+    return downloadedFiles;
+  }
+
+  async updateLocalRegistry(componentName, category) {
+    const componentsPath = path.join(__dirname, '../../../src/Components/components.js');
+    
+    try {
+      let content = await fs.readFile(componentsPath, 'utf8');
+      
+      // Parse existing components
+      const componentsMatch = content.match(/const components = ({[\s\S]*?});/);
+      if (!componentsMatch) {
+        throw new Error('Invalid components.js format in local project');
+      }
+
+      const componentsObj = eval('(' + componentsMatch[1] + ')');
+      
+      // Add new component if it doesn't exist
+      if (!componentsObj[componentName]) {
+        componentsObj[componentName] = category;
+
+        // Generate new content
+        const sortedComponents = Object.keys(componentsObj)
+          .sort()
+          .reduce((obj, key) => {
+            obj[key] = componentsObj[key];
+            return obj;
+          }, {});
+
+        const newComponentsString = JSON.stringify(sortedComponents, null, 2)
+          .replace(/"/g, '"')
+          .replace(/: "/g, ': "')
+          .replace(/",\n/g, '",\n');
+
+        const newContent = `const components = ${newComponentsString}; export default components;`;
+        
+        await fs.writeFile(componentsPath, newContent, 'utf8');
+        Print.success(`📝 Registrado ${componentName} en components.js local`);
+      } else {
+        Print.info(`📄 ${componentName} ya existe en el registro local`);
+      }
+      
+    } catch (error) {
+      Print.error(`❌ Error actualizando components.js local: ${error.message}`);
+      throw error;
+    }
+  }
+
+  async installComponent(componentName, category, force = false) {
+    const availableComponents = this.getAvailableComponents(category);
+
+    if (!availableComponents[componentName]) {
+      throw new Error(`Componente '${componentName}' no encontrado en la categoría '${category}' del repositorio oficial`);
+    }
+
+    const categoryPath = validations.getCategoryPath(category);
+    const targetPath = path.join(__dirname, '../../../src', categoryPath, componentName);
+
+    // Check if component already exists
+    if (await fs.pathExists(targetPath) && !force) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'overwrite',
+          message: `El componente '${componentName}' ya existe localmente. ¿Deseas sobrescribirlo con la versión del repositorio?`,
+          default: false
+        }
+      ]);
+      
+      if (!overwrite) {
+        Print.info('⏭️  Instalación cancelada por el usuario');
+        return false;
+      }
+    }
+
+    try {
+      // Create component directory
+      await fs.ensureDir(targetPath);
+
+      // Download component files
+      const downloadedFiles = await this.downloadComponentFiles(componentName, category, targetPath);
+
+      // Update components registry
+      await this.updateLocalRegistry(componentName, category);
+
+      Print.success(`✅ ${componentName} actualizado exitosamente desde el repositorio oficial!`);
+      console.log(`📁 Ubicación: src/${categoryPath}/${componentName}/`);
+      console.log(`📄 Archivos: ${downloadedFiles.join(', ')}`);
+
+      return true;
+
+    } catch (error) {
+      Print.error(`❌ Error actualizando ${componentName}: ${error.message}`);
+      // Clean up partial installation
+      if (await fs.pathExists(targetPath)) {
+        await fs.remove(targetPath);
+      }
+      throw error;
+    }
+  }
+
+  async installMultipleComponents(componentNames, category = 'Visual', force = false) {
+    const results = [];
+    Print.info(`🚀 Obteniendo ${componentNames.length} componentes ${category} del repositorio oficial...\n`);
+
+    for (const componentName of componentNames) {
+      try {
+        const result = await this.installComponent(componentName, category, force);
+        results.push({ name: componentName, success: result });
+      } catch (error) {
+        Print.error(`❌ Error con ${componentName}: ${error.message}\n`);
+        results.push({ name: componentName, success: false, error: error.message });
+      }
+    }
+
+    // Summary
+    const successful = results.filter(r => r.success).length;
+    const failed = results.filter(r => !r.success).length;
+
+    console.log(`\n📊 Resumen de instalación:`);
+    Print.success(`✅ Exitosos: ${successful}`);
+    if (failed > 0) {
+      Print.error(`❌ Fallidos: ${failed}`);
+      results.filter(r => !r.success).forEach(r => {
+        console.log(`  • ${r.name}: ${r.error}`);
+      });
+    }
+
+    return results;
+  }
+
+  async updateAllComponents(force = false) {
+    Print.info('🔄 Buscando componentes actualizables...');
+    
+    const updatableComponents = await this.findUpdatableComponents();
+    
+    if (updatableComponents.length === 0) {
+      Print.info('✅ No se encontraron componentes locales que coincidan con el repositorio oficial');
+      Print.info('💡 Usa "npm run slice:browse" para ver componentes disponibles');
+      return true;
+    }
+
+    console.log(`\n📦 Encontrados ${updatableComponents.length} componentes actualizables:\n`);
+    updatableComponents.forEach(comp => {
+      const icon = comp.category === 'Visual' ? '🎨' : '⚙️';
+      console.log(`${icon} ${comp.name} (${comp.category})`);
+    });
+
+    if (!force) {
+      const { confirmUpdate } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'confirmUpdate',
+          message: `¿Deseas actualizar todos estos componentes a las versiones del repositorio oficial?`,
+          default: true
+        }
+      ]);
+
+      if (!confirmUpdate) {
+        Print.info('⏭️  Actualización cancelada por el usuario');
+        return false;
+      }
+    }
+
+    // Group by category for efficient processing
+    const visualComponents = updatableComponents.filter(c => c.category === 'Visual').map(c => c.name);
+    const serviceComponents = updatableComponents.filter(c => c.category === 'Service').map(c => c.name);
+
+    let allResults = [];
+
+    // Update Visual components
+    if (visualComponents.length > 0) {
+      Print.info(`\n🎨 Actualizando ${visualComponents.length} componentes Visual...`);
+      const visualResults = await this.installMultipleComponents(visualComponents, 'Visual', true);
+      allResults = allResults.concat(visualResults);
+    }
+
+    // Update Service components
+    if (serviceComponents.length > 0) {
+      Print.info(`\n⚙️  Actualizando ${serviceComponents.length} componentes Service...`);
+      const serviceResults = await this.installMultipleComponents(serviceComponents, 'Service', true);
+      allResults = allResults.concat(serviceResults);
+    }
+
+    // Final summary
+    const totalSuccessful = allResults.filter(r => r.success).length;
+    const totalFailed = allResults.filter(r => !r.success).length;
+
+    console.log(`\n🎯 Resumen final de actualización:`);
+    Print.success(`✅ Componentes actualizados: ${totalSuccessful}`);
+    
+    if (totalFailed > 0) {
+      Print.error(`❌ Componentes fallidos: ${totalFailed}`);
+    } else {
+      Print.success(`🚀 ¡Todos tus componentes están ahora actualizados a las últimas versiones oficiales!`);
+    }
+
+    return totalFailed === 0;
+  }
+
+  displayAvailableComponents() {
+    if (!this.componentsRegistry) {
+      Print.error('❌ No se pudo cargar el registro de componentes');
+      return;
+    }
+
+    console.log('\n📚 Componentes disponibles en el repositorio oficial de Slice.js:\n');
+
+    const visualComponents = this.getAvailableComponents('Visual');
+    const serviceComponents = this.getAvailableComponents('Service');
+
+    Print.info('🎨 Visual Components (UI):');
+    Object.entries(visualComponents).forEach(([name, info]) => {
+      console.log(`  • ${name}: ${info.description}`);
+    });
+
+    Print.info('\n⚙️  Service Components (Logic):');
+    Object.entries(serviceComponents).forEach(([name, info]) => {
+      console.log(`  • ${name}: ${info.description}`);
+    });
+
+    console.log(`\n💡 Ejemplos de uso:`);
+    console.log(`npm run slice:get Button Card Input`);
+    console.log(`npm run slice:get FetchManager --service`);
+    console.log(`npm run slice:sync              # Actualizar componentes existentes`);
+  }
+
+  async interactiveInstall() {
+    const { componentType } = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'componentType',
+        message: 'Selecciona el tipo de componente a obtener del repositorio:',
+        choices: [
+          { name: '🎨 Visual Components (UI)', value: 'Visual' },
+          { name: '⚙️  Service Components (Logic)', value: 'Service' }
+        ]
+      }
+    ]);
+
+    const availableComponents = this.getAvailableComponents(componentType);
+    const componentChoices = Object.entries(availableComponents).map(([name, info]) => ({
+      name: `${name} - ${info.description}`,
+      value: name
+    }));
+
+    if (componentType === 'Visual') {
+      const { installMode } = await inquirer.prompt([
+        {
+          type: 'list',
+          name: 'installMode',
+          message: '¿Cómo deseas obtener los componentes Visual?',
+          choices: [
+            { name: 'Obtener uno solo', value: 'single' },
+            { name: 'Obtener múltiples', value: 'multiple' }
+          ]
+        }
+      ]);
+
+      if (installMode === 'multiple') {
+        const { selectedComponents } = await inquirer.prompt([
+          {
+            type: 'checkbox',
+            name: 'selectedComponents',
+            message: 'Selecciona los componentes Visual a obtener del repositorio:',
+            choices: componentChoices,
+            validate: (input) => {
+              if (input.length === 0) {
+                return 'Debes seleccionar al menos un componente';
+              }
+              return true;
+            }
+          }
+        ]);
+
+        await this.installMultipleComponents(selectedComponents, componentType);
+      } else {
+        const { selectedComponent } = await inquirer.prompt([
+          {
+            type: 'list',
+            name: 'selectedComponent',
+            message: 'Selecciona un componente Visual:',
+            choices: componentChoices
+          }
+        ]);
+
+        await this.installComponent(selectedComponent, componentType);
+      }
+    } else {
+      const { selectedComponent } = await inquirer.prompt([
+        {
+          type: 'list',
+          name: 'selectedComponent',
+          message: 'Selecciona un componente Service:',
+          choices: componentChoices
+        }
+      ]);
+
+      await this.installComponent(selectedComponent, componentType);
+    }
+  }
+
+  findComponentInRegistry(componentName) {
+    if (!this.componentsRegistry) return null;
+    
+    const normalizedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+    
+    if (this.componentsRegistry[normalizedName]) {
+      return {
+        name: normalizedName,
+        category: this.componentsRegistry[normalizedName]
+      };
+    }
+    
+    return null;
+  }
+}
+
+// Main get function
+async function getComponents(componentNames = [], options = {}) {
+  const registry = new ComponentRegistry();
+  
+  try {
+    await registry.loadRegistry();
+  } catch (error) {
+    Print.error('No se pudo cargar el registro de componentes del repositorio oficial');
+    Print.info('💡 Verifica tu conexión a internet y vuelve a intentar');
+    return false;
+  }
+
+  // Interactive mode if no components specified
+  if (!componentNames || componentNames.length === 0) {
+    await registry.interactiveInstall();
+    return true;
+  }
+
+  // Determine category
+  const category = options.service ? 'Service' : 'Visual';
+
+  if (componentNames.length === 1) {
+    // Single component install
+    const componentInfo = registry.findComponentInRegistry(componentNames[0]);
+    
+    if (!componentInfo) {
+      Print.error(`Componente '${componentNames[0]}' no encontrado en el repositorio oficial`);
+      Print.info('💡 Usa "npm run slice:browse" para ver componentes disponibles');
+      return false;
+    }
+
+    // Use the category from registry unless Service is explicitly requested
+    const actualCategory = options.service ? 'Service' : componentInfo.category;
+
+    try {
+      await registry.installComponent(componentInfo.name, actualCategory, options.force);
+      return true;
+    } catch (error) {
+      Print.error(`Error: ${error.message}`);
+      return false;
+    }
+  } else {
+    // Multiple components install
+    const normalizedComponents = componentNames.map(name => 
+      name.charAt(0).toUpperCase() + name.slice(1)
+    );
+
+    try {
+      await registry.installMultipleComponents(normalizedComponents, category, options.force);
+      return true;
+    } catch (error) {
+      Print.error(`Error: ${error.message}`);
+      return false;
+    }
+  }
+}
+
+// List components function
+async function listComponents() {
+  const registry = new ComponentRegistry();
+  
+  try {
+    await registry.loadRegistry();
+    registry.displayAvailableComponents();
+    return true;
+  } catch (error) {
+    Print.error('No se pudo cargar el registro de componentes del repositorio oficial');
+    Print.info('💡 Verifica tu conexión a internet y vuelve a intentar');
+    return false;
+  }
+}
+
+// Sync components function - NEW
+async function syncComponents(options = {}) {
+  const registry = new ComponentRegistry();
+  
+  try {
+    await registry.loadRegistry();
+    return await registry.updateAllComponents(options.force);
+  } catch (error) {
+    Print.error('No se pudo cargar el registro de componentes del repositorio oficial');
+    Print.info('💡 Verifica tu conexión a internet y vuelve a intentar');
+    return false;
+  }
+}
+
+export default getComponents;
+export { listComponents, syncComponents };

package/commands/utils/VersionChecker.js

@@ -0,0 +1,165 @@
+// commands/utils/VersionChecker.js
+
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import Print from "../Print.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+class VersionChecker {
+  constructor() {
+    this.currentCliVersion = null;
+    this.currentFrameworkVersion = null;
+    this.latestCliVersion = null;
+    this.latestFrameworkVersion = null;
+  }
+
+  async getCurrentVersions() {
+    try {
+      // Get CLI version
+      const cliPackagePath = path.join(__dirname, '../../package.json');
+      const cliPackage = await fs.readJson(cliPackagePath);
+      this.currentCliVersion = cliPackage.version;
+
+      // Get Framework version from node_modules
+      const frameworkPackagePath = path.join(__dirname, '../../../../node_modules/slicejs-web-framework/package.json');
+      if (await fs.pathExists(frameworkPackagePath)) {
+        const frameworkPackage = await fs.readJson(frameworkPackagePath);
+        this.currentFrameworkVersion = frameworkPackage.version;
+      }
+
+      // Get Project's CLI version
+      const projectPackagePath = path.join(__dirname, '../../../../package.json');
+      if (await fs.pathExists(projectPackagePath)) {
+        const projectPackage = await fs.readJson(projectPackagePath);
+        if (projectPackage.dependencies && projectPackage.dependencies['slicejs-cli']) {
+          // This could be different from the currently running CLI version
+        }
+      }
+
+      return {
+        cli: this.currentCliVersion,
+        framework: this.currentFrameworkVersion
+      };
+    } catch (error) {
+      return null;
+    }
+  }
+
+  async getLatestVersions() {
+    try {
+      // Check CLI version
+      const cliResponse = await fetch('https://registry.npmjs.org/slicejs-cli/latest', {
+        headers: { 'Accept': 'application/json' }
+      });
+      
+      if (cliResponse.ok) {
+        const cliData = await cliResponse.json();
+        this.latestCliVersion = cliData.version;
+      }
+
+      // Check Framework version  
+      const frameworkResponse = await fetch('https://registry.npmjs.org/slicejs-web-framework/latest', {
+        headers: { 'Accept': 'application/json' }
+      });
+      
+      if (frameworkResponse.ok) {
+        const frameworkData = await frameworkResponse.json();
+        this.latestFrameworkVersion = frameworkData.version;
+      }
+
+      return {
+        cli: this.latestCliVersion,
+        framework: this.latestFrameworkVersion
+      };
+    } catch (error) {
+      // Silent fail - don't interrupt commands for version check failures
+      return null;
+    }
+  }
+
+  compareVersions(current, latest) {
+    if (!current || !latest) return null;
+    
+    const currentParts = current.split('.').map(Number);
+    const latestParts = latest.split('.').map(Number);
+    
+    for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
+      const currentPart = currentParts[i] || 0;
+      const latestPart = latestParts[i] || 0;
+      
+      if (latestPart > currentPart) return 'outdated';
+      if (currentPart > latestPart) return 'newer';
+    }
+    
+    return 'current';
+  }
+
+  async checkForUpdates(silent = false) {
+    try {
+      const current = await this.getCurrentVersions();
+      if (!current) return;
+
+      const latest = await this.getLatestVersions();
+      if (!latest) return;
+
+      const cliStatus = this.compareVersions(current.cli, latest.cli);
+      const frameworkStatus = this.compareVersions(current.framework, latest.framework);
+
+      if (!silent && (cliStatus === 'outdated' || frameworkStatus === 'outdated')) {
+        console.log(''); // Line break
+        Print.warning('📦 Actualizaciones Disponibles:');
+        
+        if (cliStatus === 'outdated') {
+          console.log(`   🔧 CLI: ${current.cli} → ${latest.cli}`);
+          console.log(`       npm update slicejs-cli`);
+        }
+        
+        if (frameworkStatus === 'outdated') {
+          console.log(`   ⚡ Framework: ${current.framework} → ${latest.framework}`);
+          console.log(`       npm update slicejs-web-framework`);
+        }
+        
+        console.log('   📚 Changelog: https://github.com/VKneider/slice.js/releases');
+        console.log(''); // Line break
+      }
+
+      return {
+        cli: { current: current.cli, latest: latest.cli, status: cliStatus },
+        framework: { current: current.framework, latest: latest.framework, status: frameworkStatus }
+      };
+
+    } catch (error) {
+      // Silent fail - don't interrupt commands
+      return null;
+    }
+  }
+
+  async showVersionInfo() {
+    const current = await this.getCurrentVersions();
+    const latest = await this.getLatestVersions();
+    
+    console.log('\n📋 Información de Versiones:');
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    
+    if (current?.cli) {
+      const cliStatus = this.compareVersions(current.cli, latest?.cli);
+      const statusIcon = cliStatus === 'current' ? '✅' : cliStatus === 'outdated' ? '🔄' : '🆕';
+      console.log(`${statusIcon} CLI: v${current.cli}${latest?.cli && latest.cli !== current.cli ? ` (latest: v${latest.cli})` : ''}`);
+    }
+    
+    if (current?.framework) {
+      const frameworkStatus = this.compareVersions(current.framework, latest?.framework);
+      const statusIcon = frameworkStatus === 'current' ? '✅' : frameworkStatus === 'outdated' ? '🔄' : '🆕';
+      console.log(`${statusIcon} Framework: v${current.framework}${latest?.framework && latest.framework !== current.framework ? ` (latest: v${latest.framework})` : ''}`);
+    }
+    
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
+  }
+}
+
+// Singleton instance
+const versionChecker = new VersionChecker();
+
+export default versionChecker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.0.14",
+  "version": "2.1.0",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "scripts": {
@@ -20,6 +20,6 @@
     "commander": "^12.0.0",
     "fs-extra": "^11.2.0",
     "inquirer": "^12.4.2",
-    "slicejs-web-framework": "^1.0.6"
+    "slicejs-web-framework": "latest"
   }
 }

package/post.js

@@ -2,64 +2,112 @@ import fs from 'fs';
 import { fileURLToPath } from 'url';
 import path from 'path';
 import Print from './commands/Print.js';
-import initializeProject from './commands/init/init.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const projectName = path.basename(__dirname); // Obtiene el nombre de la carpeta actual
+const projectName = path.basename(__dirname);
 
 const projectPackageJsonPath = path.resolve(__dirname, '../../package.json');
 
-// Verifica si el archivo package.json existe
+// Check if package.json file exists
 fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
     .then(() => {
-        // El archivo package.json existe, por lo que lo leemos y agregamos los comandos
+        // The package.json file exists, so we read it and add the commands
         return fs.promises.readFile(projectPackageJsonPath, 'utf8');
     })
     .then(data => {
-        // Convierte el contenido del archivo a un objeto JSON
+        // Convert the file content to a JSON object
         const projectPackageJson = JSON.parse(data);
 
-        // Agrega los comandos personalizados a los scripts del proyecto
+        // Add custom commands to the project scripts
         projectPackageJson.scripts = projectPackageJson.scripts || {};
+        
+        // Main project commands
+        projectPackageJson.scripts['slice:init'] = 'node node_modules/slicejs-cli/client.js init';
+        projectPackageJson.scripts['slice:start'] = 'node api/index.js';
+        projectPackageJson.scripts['slice:version'] = 'node node_modules/slicejs-cli/client.js version';
+        projectPackageJson.scripts['slice:update'] = 'node node_modules/slicejs-cli/client.js update';
+        
+        // Local component commands
         projectPackageJson.scripts['slice:create'] = 'node node_modules/slicejs-cli/client.js component create';
         projectPackageJson.scripts['slice:list'] = 'node node_modules/slicejs-cli/client.js component list';
         projectPackageJson.scripts['slice:delete'] = 'node node_modules/slicejs-cli/client.js component delete';
-        projectPackageJson.scripts['slice:init'] = 'node node_modules/slicejs-cli/client.js init';
+        
+        // Main repository commands (most used shortcuts)
+        projectPackageJson.scripts['slice:get'] = 'node node_modules/slicejs-cli/client.js get';
+        projectPackageJson.scripts['slice:browse'] = 'node node_modules/slicejs-cli/client.js browse';
+        projectPackageJson.scripts['slice:sync'] = 'node node_modules/slicejs-cli/client.js sync';
+        
+        // Detailed registry commands (for advanced users)
+        projectPackageJson.scripts['slice:registry-get'] = 'node node_modules/slicejs-cli/client.js registry get';
+        projectPackageJson.scripts['slice:registry-list'] = 'node node_modules/slicejs-cli/client.js registry list';
+        projectPackageJson.scripts['slice:registry-sync'] = 'node node_modules/slicejs-cli/client.js registry sync';
+        
+        // Legacy/compatibility commands
         projectPackageJson.scripts['run'] = 'node api/index.js';
-        projectPackageJson.scripts['slice:start'] = 'node api/index.js';
         projectPackageJson.scripts['development'] = 'node api/index.js';
 
-        // add type module
+        // Module configuration
         projectPackageJson.type = 'module';
         projectPackageJson.engines = {
             "node": "20.x"
         };
         
-        // Escribe el nuevo contenido en el package.json del proyecto
-         fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(projectPackageJson, null, 2), 'utf8');
-         return Print.success("Run 'npm run slice:init' to initialize your project");
+        // Write the new content to package.json
+        return fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(projectPackageJson, null, 2), 'utf8');
     })
     .then(() => {
-        console.log('SliceJS CLI commands added to package.json.');
+        console.log('✅ SliceJS CLI commands added to package.json');
+        console.log('\n🚀 Main commands:');
+        console.log('  npm run slice:init         - Initialize Slice.js project');
+        console.log('  npm run slice:get Button   - Get components from official repository');
+        console.log('  npm run slice:browse       - View all available components');
+        console.log('  npm run slice:sync         - Update local components to latest versions');
+        console.log('  npm run slice:start        - Start development server');
+        console.log('\n⚙️  Local component management:');
+        console.log('  npm run slice:create       - Create local component');
+        console.log('  npm run slice:list         - List local components');
+        console.log('  npm run slice:delete       - Delete local component');
+        console.log('\n🔧 Utilities:');
+        console.log('  npm run slice:version      - View version information');
+        console.log('  npm run slice:update       - Check for available updates');
+        console.log('\n🎯 To get started: npm run slice:init');
+        console.log('💡 Tip: Use "slice:sync" to keep your components updated');
     })
     .catch(err => {
         if (err.code === 'ENOENT') {
-            // El archivo package.json no existe, así que creamos uno nuevo con los comandos
+            // The package.json file doesn't exist, so we create a new one with the commands
             const defaultPackageJson = {
-                name: "project-name", // Utiliza el nombre de la carpeta como nombre del proyecto
+                name: projectName,
                 version: '1.0.0',
-                description: 'Project description',
+                description: 'Slice.js project',
                 main: 'api/index.js',
                 scripts: {
+                    // Main commands
+                    'slice:init': 'node node_modules/slicejs-cli/client.js init',
+                    'slice:start': 'node node_modules/slicejs-cli/client.js start',
+                    'slice:version': 'node node_modules/slicejs-cli/client.js version',
+                    'slice:update': 'node node_modules/slicejs-cli/client.js update',
+                    
+                    // Local components
                     'slice:create': 'node node_modules/slicejs-cli/client.js component create',
                     'slice:list': 'node node_modules/slicejs-cli/client.js component list',
                     'slice:delete': 'node node_modules/slicejs-cli/client.js component delete',
-                    "run": "node api/index.js",
-                    "slice:start": "node api/index.js",
-                    "slice:init": "node node_modules/slicejs-cli/client.js init"
+                    
+                    // Official repository (shortcuts)
+                    'slice:get': 'node node_modules/slicejs-cli/client.js get',
+                    'slice:browse': 'node node_modules/slicejs-cli/client.js browse',
+                    'slice:sync': 'node node_modules/slicejs-cli/client.js sync',
+                    
+                    // Detailed registry
+                    'slice:registry-get': 'node node_modules/slicejs-cli/client.js registry get',
+                    'slice:registry-list': 'node node_modules/slicejs-cli/client.js registry list',
+                    'slice:registry-sync': 'node node_modules/slicejs-cli/client.js registry sync',
+                    
+                    // Legacy
+                    'run': 'node api/index.js'
                 },
-                keywords: [],
+                keywords: ['slicejs', 'web-framework', 'components'],
                 author: '',
                 license: 'ISC',
                 type: 'module',
@@ -67,18 +115,32 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
                     "node": "20.x"
                 }
             };
-            // Guardamos el nuevo package.json
-             fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(defaultPackageJson, null, 2), 'utf8');
-             return Print.success("Run 'npm run slice:init' to initialize your project");
+            
+            // Save the new package.json
+            return fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(defaultPackageJson, null, 2), 'utf8');
         } else {
             console.error('Error:', err);
+            throw err;
         }
     })
     .then(() => {
-        console.log('Created package.json with SliceJS CLI commands.');
+        console.log('✅ Created package.json with SliceJS CLI commands.');
+        console.log('\n🚀 Main commands:');
+        console.log('  npm run slice:init         - Initialize Slice.js project');
+        console.log('  npm run slice:get Button   - Get components from official repository');
+        console.log('  npm run slice:browse       - View all available components');
+        console.log('  npm run slice:sync         - Update local components to latest versions');
+        console.log('  npm run slice:start        - Start development server');
+        console.log('\n⚙️  Local component management:');
+        console.log('  npm run slice:create       - Create local component');
+        console.log('  npm run slice:list         - List local components');
+        console.log('  npm run slice:delete       - Delete local component');
+        console.log('\n🔧 Utilities:');
+        console.log('  npm run slice:version      - View version information');
+        console.log('  npm run slice:update       - Check for available updates');
+        console.log('\n🎯 To get started: npm run slice:init');
+        console.log('💡 Tip: Use "slice:sync" to keep your components updated');
     })
     .catch(err => {
-        console.error('Error:', err);
-    })
-
-
+        console.error('Error creating package.json:', err);
+    });