@tamilvananmurugan/xlibs/cli.ts

Comprehensive UI component library with Aceternity, MagicUI, and ShadCN components

#!/usr/bin/env node

// CLI Interface for Xlibs
// Handles build configuration and component generation

import { writeFileSync, existsSync, mkdirSync } from 'fs';
import { join } from 'path';
import { Command } from 'commander';
import { parseLayoutSpec, parseUISpec } from './yaml-parser';
import { generateReactApp } from './component-template';

const program = new Command();

program
  .name('xlibs')
  .description('Generate ReactJS frontend applications from YAML specifications')
  .version('1.0.0');

program
  .command('generate')
  .description('Generate a ReactJS application from YAML specifications')
  .argument('<name>', 'Name of the application')
  .option('-l, --layout <file>', 'Layout specification file (YAML/MD)')
  .option('-u, --ui <file>', 'UI specification file (YAML/MD)')
  .option('-b, --build <file>', 'Build configuration file (YAML/MD)')
  .option('-o, --output <dir>', 'Output directory', './output')
  .action((name) => {
    console.log(`Generating ReactJS application: ${name}`);
    
    // Default values for demo purposes
    const layoutFile = './docs/sample-layout.yaml';
    const uiFile = './docs/sample-ui.yaml';
    const outputDir = './output';
    
    try {
      // Parse specifications
      const layoutSpec = parseLayoutSpec(layoutFile);
      const uiSpec = parseUISpec(uiFile);
      
      // Create output directory
      if (!existsSync(outputDir)) {
        mkdirSync(outputDir, { recursive: true });
      }
      
      // Generate React app
      const appCode = generateReactApp(name, layoutSpec, uiSpec, {});
      
      // Write files
      const appDir = join(outputDir, name);
      if (!existsSync(appDir)) {
        mkdirSync(appDir, { recursive: true });
      }
      
      writeFileSync(join(appDir, 'App.tsx'), appCode);
      writeFileSync(join(appDir, 'package.json'), JSON.stringify({
        name,
        version: '1.0.0',
        dependencies: {
          react: '^18.0.0',
          'react-dom': '^18.0.0',
          'tailwindcss': '^3.0.0'
        }
      }, null, 2));
      
      console.log(`✅ Application generated successfully in: ${appDir}`);
      console.log('📁 Files created:');
      console.log(`   - ${join(appDir, 'App.tsx')}`);
      console.log(`   - ${join(appDir, 'package.json')}`);
      console.log('\n🚀 Next steps:');
      console.log(`   1. cd ${appDir}`);
      console.log('   2. npm install');
      console.log('   3. npm start');
      
    } catch (error) {
      console.error('❌ Error generating application:', error);
      process.exit(1);
    }
  });

program
  .command('validate')
  .description('Validate YAML specification files')
  .argument('<file>', 'File to validate')
  .action((file) => {
    console.log(`Validating file: ${file}`);
    
    try {
      if (file.includes('layout')) {
        const layoutSpec = parseLayoutSpec(file);
        console.log('✅ Layout specification is valid');
        console.log('📊 Layout details:', {
          sections: layoutSpec.sections?.length || 0,
          hasHeader: !!layoutSpec.header,
          hasFooter: !!layoutSpec.footer
        });
      } else if (file.includes('ui')) {
        const uiSpec = parseUISpec(file);
        console.log('✅ UI specification is valid');
        console.log('📊 UI details:', {
          hasSpec: !!uiSpec,
          type: uiSpec?.type || 'unknown'
        });
      } else {
        console.log('❓ Unknown file type. Please specify layout or ui file.');
      }
    } catch (error) {
      console.error('❌ Validation failed:', error);
      process.exit(1);
    }
  });

program.parse();