@ng-shangjc/cli 1.0.0-beta

package/src/commands/init.ts

@@ -0,0 +1,254 @@
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import inquirer from 'inquirer';
+
+export async function initProject() {
+  console.log('🚀 Initializing shangjc in your project...');
+
+  // Check if Angular project
+  if (!fs.existsSync('angular.json')) {
+    console.error('❌ This is not an Angular project.');
+    process.exit(1);
+  }
+
+  // Check if shangjc.config.json already exists
+  if (fs.existsSync('shangjc.config.json')) {
+    console.log('⚠️  shangjc.config.json already exists.');
+    const { overwrite } = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'overwrite',
+        message: 'Do you want to overwrite the existing configuration?',
+        default: false
+      }
+    ]);
+
+    if (!overwrite) {
+      console.log('Initialization cancelled.');
+      return;
+    }
+  }
+
+  // Ask for configuration
+  const config = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'componentsPath',
+      message: 'Where would you like to install components?',
+      default: 'src/ui/shangjc',
+      validate: (input) => {
+        if (!input.trim()) return 'Components path is required';
+        if (!input.startsWith('src/')) return 'Path should be within src directory';
+        return true;
+      }
+    },
+    {
+      type: 'list',
+      name: 'componentType',
+      message: 'Which component type do you prefer?',
+      choices: [
+        { name: 'Standalone (Recommended)', value: 'standalone' },
+        { name: 'Module-based', value: 'module' }
+      ],
+      default: 'standalone'
+    },
+    {
+      type: 'confirm',
+      name: 'installTailwind',
+      message: 'Do you want to configure Tailwind CSS 4?',
+      default: true
+    },
+    {
+      type: 'list',
+      name: 'theme',
+      message: 'Choose your default theme:',
+      choices: [
+        { name: 'Default (Light)', value: 'default' },
+        { name: 'Dark', value: 'dark' },
+        { name: 'Both (Light + Dark)', value: 'both' }
+      ],
+      default: 'both',
+      when: (answers) => answers.installTailwind
+    }
+  ]);
+
+  try {
+    // Create components directory
+    await fs.ensureDir(config.componentsPath);
+    console.log(`✅ Created ${config.componentsPath} directory`);
+
+    // Create shangjc config
+    const configFile = {
+      version: '1.0.0',
+      componentsPath: config.componentsPath,
+      componentType: config.componentType,
+      projectType: 'angular',
+      theme: {
+        current: config.theme || 'default',
+        variants: {
+          default: {
+            primary: 'hsl(var(--primary))',
+            secondary: 'hsl(var(--secondary))',
+            accent: 'hsl(var(--accent))',
+            muted: 'hsl(var(--muted))',
+            destructive: 'hsl(var(--destructive))',
+            background: 'hsl(var(--background))',
+            foreground: 'hsl(var(--foreground))',
+            border: 'hsl(var(--border))',
+            input: 'hsl(var(--input))',
+            ring: 'hsl(var(--ring))'
+          }
+        }
+      },
+      tailwindConfig: config.installTailwind,
+      installedComponents: [],
+      utilsVersion: '^1.0.0'
+    };
+
+    await fs.writeJson('shangjc.config.json', configFile, { spaces: 2 });
+    console.log('✅ Created shangjc.config.json config file');
+
+    if (config.installTailwind) {
+      await setupTailwind();
+    }
+
+    console.log('🎉 shangjc initialized successfully!');
+    console.log('\n📖 Next steps:');
+    console.log('1. Install a component: npx @ng-shangjc/cli install button');
+    console.log('2. Import and use in your components');
+
+  } catch (error) {
+    console.error('❌ Initialization failed:', error);
+    process.exit(1);
+  }
+}
+
+async function setupTailwind() {
+  // Check if tailwind.config.js exists
+  const tailwindConfigPath = 'tailwind.config.js';
+  
+  if (!fs.existsSync(tailwindConfigPath)) {
+    const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+};`;
+
+    await fs.writeFile(tailwindConfigPath, tailwindConfig);
+    console.log('✅ Created tailwind.config.js');
+  }
+
+  // Update global styles with Tailwind 4 @theme directive
+  const globalStylesPath = 'src/styles.css';
+  
+  // Check if styles.css exists, if not try other common locations
+  let stylesPath = globalStylesPath;
+  if (!fs.existsSync(globalStylesPath)) {
+    if (fs.existsSync('src/global.css')) {
+      stylesPath = 'src/global.css';
+    } else if (fs.existsSync('src/app.css')) {
+      stylesPath = 'src/app.css';
+    }
+  }
+
+  const globalStyles = `@import 'tailwindcss';
+
+@theme {
+  --color-primary: 222.2 47.4% 11.2%;
+  --color-primary-foreground: 210 40% 98%;
+  --color-secondary: 210 40% 96.1%;
+  --color-secondary-foreground: 222.2 47.4% 11.2%;
+  --color-muted: 210 40% 96.1%;
+  --color-muted-foreground: 215.4 16.3% 46.9%;
+  --color-accent: 210 40% 96.1%;
+  --color-accent-foreground: 222.2 47.4% 11.2%;
+  --color-destructive: 0 84.2% 60.2%;
+  --color-destructive-foreground: 210 40% 98%;
+  --color-border: 214.3 31.8% 91.4%;
+  --color-input: 214.3 31.8% 91.4%;
+  --color-ring: 222.2 84% 4.9%;
+  --color-background: 0 0% 100%;
+  --color-foreground: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --color-primary: 210 40% 98%;
+  --color-primary-foreground: 222.2 47.4% 11.2%;
+  --color-secondary: 217.2 32.6% 17.5%;
+  --color-secondary-foreground: 210 40% 98%;
+  --color-muted: 217.2 32.6% 17.5%;
+  --color-muted-foreground: 215 20.2% 65.1%;
+  --color-accent: 217.2 32.6% 17.5%;
+  --color-accent-foreground: 210 40% 98%;
+  --color-destructive: 0 62.8% 30.6%;
+  --color-destructive-foreground: 210 40% 98%;
+  --color-border: 217.2 32.6% 17.5%;
+  --color-input: 217.2 32.6% 17.5%;
+  --color-ring: 212.7 26.8% 83.9%;
+  --color-background: 222.2 84% 4.9%;
+  --color-foreground: 210 40% 98%;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`;
+
+  // Append to existing styles or create new file
+  if (fs.existsSync(stylesPath)) {
+    const existingContent = await fs.readFile(stylesPath, 'utf8');
+    if (!existingContent.includes('@import \'tailwindcss\'')) {
+      await fs.appendFile(stylesPath, '\n\n' + globalStyles);
+      console.log(`✅ Updated ${stylesPath} with Tailwind 4 theme`);
+    } else {
+      console.log(`⚠️  ${stylesPath} already contains Tailwind imports`);
+    }
+  } else {
+    await fs.writeFile(stylesPath, globalStyles);
+    console.log(`✅ Created ${stylesPath} with Tailwind 4 theme`);
+  }
+}

package/src/commands/install.ts

@@ -0,0 +1,352 @@
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import inquirer from 'inquirer';
+import { execSync } from 'child_process';
+
+interface ShangjcConfig {
+  version: string;
+  componentsPath: string;
+  componentType: 'standalone' | 'module';
+  projectType: string;
+  theme: {
+    current: string;
+    variants: Record<string, any>;
+  };
+  tailwindConfig: boolean;
+  installedComponents: string[];
+  utilsVersion: string;
+}
+
+const AVAILABLE_COMPONENTS = [
+  'button',
+  'input',
+  'card',
+  'switch',
+  'dialog',
+  'tooltip',
+  'select',
+  'checkbox',
+  'radio-group',
+  'textarea',
+  'badge',
+  'alert'
+];
+
+const COMPONENT_DEPENDENCIES = {
+  button: ['utils'],
+  input: ['utils'],
+  card: ['utils'],
+  switch: ['utils'],
+  dialog: ['utils'],
+  tooltip: ['utils'],
+  select: ['utils'],
+  checkbox: ['utils'],
+  'radio-group': ['utils'],
+  textarea: ['utils'],
+  badge: ['utils'],
+  alert: ['utils']
+};
+
+const COMPONENT_FILES = {
+  button: [
+    'button.component.ts'
+  ],
+  input: [
+    'input.component.ts'
+  ],
+  card: [
+    'card.component.ts'
+  ],
+  switch: [
+    'switch.component.ts'
+  ],
+  dialog: [
+    'dialog.component.ts',
+    'dialog.service.ts'
+  ],
+  tooltip: [
+    'tooltip.component.ts',
+    'tooltip.directive.ts'
+  ],
+  select: [
+    'select.component.ts'
+  ],
+  checkbox: [
+    'checkbox.component.ts'
+  ],
+  'radio-group': [
+    'radio-group.component.ts'
+  ],
+  textarea: [
+    'textarea.component.ts'
+  ],
+  badge: [
+    'badge.component.ts'
+  ],
+  alert: [
+    'alert.component.ts'
+  ]
+};
+
+export async function installComponent(
+  componentName: string,
+  options: { path?: string; mode?: string }
+) {
+  console.log(`🚀 Installing ${componentName} component...`);
+
+  // Validate component name
+  if (!AVAILABLE_COMPONENTS.includes(componentName)) {
+    console.error(`❌ Component "${componentName}" not found.`);
+    console.log(`Available components: ${AVAILABLE_COMPONENTS.join(', ')}`);
+    process.exit(1);
+  }
+
+  // Check if Angular project
+  if (!fs.existsSync('angular.json')) {
+    console.error('❌ This is not an Angular project. Please run this command in an Angular project root.');
+    process.exit(1);
+  }
+
+  // Check for shangjc.config.json
+  const configPath = 'shangjc.config.json';
+  if (!fs.existsSync(configPath)) {
+    console.log('⚠️  shangjc.config.json not found. Running init first...');
+    const { initProject } = await import('./init');
+    await initProject();
+  }
+
+  // Load configuration
+  const config: ShangjcConfig = await fs.readJson(configPath);
+  const componentsPath = options.path || config.componentsPath;
+
+  // Check if component is already installed
+  if (config.installedComponents.includes(componentName)) {
+    console.log(`⚠️  ${componentName} is already installed.`);
+    const { reinstall } = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'reinstall',
+        message: 'Do you want to reinstall it?',
+        default: false
+      }
+    ]);
+
+    if (!reinstall) {
+      console.log('Installation cancelled.');
+      return;
+    }
+  }
+
+  // Show installation summary
+  const dependencies = COMPONENT_DEPENDENCIES[componentName as keyof typeof COMPONENT_DEPENDENCIES] || [];
+  console.log(`\n📋 Installation Summary:`);
+  console.log(`   Component: ${componentName}`);
+  console.log(`   Path: ${componentsPath}/${componentName}`);
+  console.log(`   Type: ${config.componentType}`);
+  if (dependencies.length > 0) {
+    console.log(`   Dependencies: ${dependencies.join(', ')}`);
+  }
+
+  // Confirm installation
+  const { confirm } = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'confirm',
+      message: 'Proceed with installation?',
+      default: true
+    }
+  ]);
+
+  if (!confirm) {
+    console.log('Installation cancelled.');
+    return;
+  }
+
+  try {
+    // Install dependencies first
+    if (dependencies.includes('utils')) {
+      await installUtils();
+    }
+
+    // Install the component package itself
+    await installComponentPackage(componentName);
+
+    // Create destination directory
+    const destDir = path.join(process.cwd(), componentsPath, componentName);
+    await fs.ensureDir(destDir);
+
+    // Get source directory from installed npm package
+    const sourceDir = path.join(process.cwd(), 'node_modules', '@ng-shangjc', componentName, 'src', 'lib');
+    
+    // Copy component files
+    const files = COMPONENT_FILES[componentName as keyof typeof COMPONENT_FILES];
+    
+    for (const file of files) {
+      const sourcePath = path.join(sourceDir, file);
+      const destPath = path.join(destDir, file);
+      
+      if (await fs.pathExists(sourcePath)) {
+        await fs.copy(sourcePath, destPath);
+        console.log(`✅ Copied ${file}`);
+      } else {
+        console.warn(`⚠️  Source file not found: ${sourcePath}`);
+      }
+    }
+
+    // Create index file
+    const indexContent = generateIndexFile(componentName, files, config.componentType);
+    await fs.writeFile(path.join(destDir, 'index.ts'), indexContent);
+    console.log(`✅ Created index.ts`);
+
+    // Copy README
+    const readmePath = path.join(process.cwd(), 'node_modules', '@ng-shangjc', componentName, 'README.md');
+    if (await fs.pathExists(readmePath)) {
+      await fs.copy(readmePath, path.join(destDir, 'README.md'));
+      console.log(`✅ Copied README.md`);
+    }
+
+    // Update configuration
+    if (!config.installedComponents.includes(componentName)) {
+      config.installedComponents.push(componentName);
+      await fs.writeJson(configPath, config, { spaces: 2 });
+      console.log(`✅ Updated shangjc.config.json`);
+    }
+
+    console.log(`🎉 Successfully installed ${componentName} component!`);
+    console.log(`\n📁 Files installed to: ${destDir}`);
+    console.log(`\n📖 Usage:`);
+    console.log(`import { ${getComponentClassName(componentName)} } from './${componentsPath}/${componentName}';`);
+
+  } catch (error) {
+    console.error('❌ Installation failed:', error);
+    process.exit(1);
+  }
+}
+
+async function installUtils() {
+  console.log('📦 Installing utils dependency...');
+  
+  try {
+    // Check if utils is already installed in node_modules
+    const utilsPath = path.join(process.cwd(), 'node_modules', '@ng-shangjc', 'utils');
+    
+    if (!fs.existsSync(utilsPath)) {
+      console.log('Installing @ng-shangjc/utils...');
+      execSync('npm install --save-dev @ng-shangjc/utils', { stdio: 'inherit' });
+    } else {
+      console.log('✅ @ng-shangjc/utils already installed');
+    }
+  } catch (error) {
+    console.error('❌ Failed to install utils:', error);
+    throw error;
+  }
+}
+
+async function installComponentPackage(componentName: string) {
+  console.log(`📦 Installing ${componentName} package...`);
+  
+  try {
+    // Check if component is already installed in node_modules
+    const componentPath = path.join(process.cwd(), 'node_modules', '@ng-shangjc', componentName);
+    
+    if (!fs.existsSync(componentPath)) {
+      console.log(`Installing @ng-shangjc/${componentName}...`);
+      execSync(`npm install --save-dev @ng-shangjc/${componentName}`, { stdio: 'inherit' });
+    } else {
+      console.log(`✅ @ng-shangjc/${componentName} already installed`);
+    }
+  } catch (error) {
+    console.error(`❌ Failed to install ${componentName} package:`, error);
+    console.log(`🔄 Attempting to download files directly...`);
+    
+    // Fallback: try to download files directly from npm registry
+    try {
+      await downloadComponentFiles(componentName);
+      console.log(`✅ Successfully downloaded ${componentName} files directly`);
+    } catch (downloadError) {
+      console.error(`❌ Failed to download ${componentName} files:`, downloadError);
+      throw new Error(`Failed to install ${componentName}: Package installation and direct download both failed`);
+    }
+  }
+}
+
+async function downloadComponentFiles(componentName: string) {
+  const https = require('https');
+  const tar = require('tar');
+  
+  return new Promise<void>((resolve, reject) => {
+    const packageUrl = `https://registry.npmjs.org/@ng-shangjc/${componentName}/-/${componentName}-1.0.0.tgz`;
+    const tempDir = path.join(process.cwd(), '.ng-shangjc-temp');
+    
+    // Ensure temp directory exists
+    fs.ensureDirSync(tempDir);
+    
+    const file = fs.createWriteStream(path.join(tempDir, `${componentName}.tgz`));
+    
+    https.get(packageUrl, (response: any) => {
+      if (response.statusCode !== 200) {
+        reject(new Error(`Failed to download package: ${response.statusCode}`));
+        return;
+      }
+      
+      response.pipe(file);
+      
+      file.on('finish', () => {
+        file.close();
+        
+        // Extract the tarball
+        fs.createReadStream(path.join(tempDir, `${componentName}.tgz`))
+          .pipe(tar.extract({
+            cwd: tempDir,
+            strip: 1 // Remove the package folder
+          }))
+          .on('finish', () => {
+            // Copy the extracted files to node_modules structure
+            const sourceDir = path.join(tempDir, 'src', 'lib');
+            const targetDir = path.join(process.cwd(), 'node_modules', '@ng-shangjc', componentName, 'src', 'lib');
+            
+            fs.ensureDirSync(path.dirname(targetDir));
+            
+            if (fs.existsSync(sourceDir)) {
+              fs.copySync(sourceDir, targetDir);
+            }
+            
+            // Copy README if exists
+            const readmeSource = path.join(tempDir, 'README.md');
+            const readmeTarget = path.join(process.cwd(), 'node_modules', '@ng-shangjc', componentName, 'README.md');
+            
+            if (fs.existsSync(readmeSource)) {
+              fs.copySync(readmeSource, readmeTarget);
+            }
+            
+            // Clean up temp files
+            fs.removeSync(tempDir);
+            
+            resolve();
+          })
+          .on('error', reject);
+      });
+    }).on('error', reject);
+  });
+}
+
+function generateIndexFile(componentName: string, files: string[], mode: string): string {
+  const exports = files
+    .filter(file => file.endsWith('.ts'))
+    .map(file => {
+      const name = file.replace('.ts', '');
+      return `export * from './${name}';`;
+    })
+    .join('\n');
+
+  return `// Generated by ng-shangjc CLI
+// Component: ${componentName}
+// Mode: ${mode}
+
+${exports}
+`;
+}
+
+function getComponentClassName(componentName: string): string {
+  return componentName.charAt(0).toUpperCase() + componentName.slice(1) + 'Component';
+}

package/src/commands/variants.ts

@@ -0,0 +1,45 @@
+import { getComponentVariantConfig, getAllVariantConfigs } from '../utils/variant-configs';
+
+export async function showVariants(componentName?: string) {
+  if (componentName) {
+    // Show variants for specific component
+    const config = getComponentVariantConfig(componentName);
+    
+    if (!config) {
+      console.log(`❌ No variant configuration found for component "${componentName}"`);
+      console.log('\nAvailable components with variants:');
+      const allConfigs = getAllVariantConfigs();
+      allConfigs.forEach(config => {
+        console.log(`  - ${config.component}`);
+      });
+      return;
+    }
+
+    console.log(`\n🎨 Variant configurations for ${config.component}:`);
+    console.log(`   Default variant: ${config.defaultVariant}\n`);
+    
+    config.variants.forEach(variant => {
+      console.log(`   • ${variant.name}${variant.name === config.defaultVariant ? ' (default)' : ''}`);
+      if (variant.description) {
+        console.log(`     ${variant.description}`);
+      }
+      console.log(`     Classes: ${variant.classes}\n`);
+    });
+  } else {
+    // Show all component variants
+    const allConfigs = getAllVariantConfigs();
+    
+    if (allConfigs.length === 0) {
+      console.log('❌ No variant configurations found');
+      return;
+    }
+
+    console.log('\n🎨 All component variant configurations:\n');
+    
+    allConfigs.forEach(config => {
+      console.log(`📦 ${config.component}:`);
+      console.log(`   Variants: ${config.variants.map(v => v.name).join(', ')}`);
+      console.log(`   Default: ${config.defaultVariant}\n`);
+    });
+  }
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import { installComponent } from './commands/install';
+import { initProject } from './commands/init';
+import { showVariants } from './commands/variants';
+
+const program = new Command();
+
+program
+  .name('ng-shangjc')
+  .description('CLI for ng-shangjc UI component library')
+  .version('1.0.0');
+
+program
+  .command('install <component>')
+  .description('Install a component into your project')
+  .option('-p, --path <path>', 'Override installation path from config')
+  .action(installComponent);
+
+program
+  .command('init')
+  .description('Initialize shangjc in your project')
+  .action(initProject);
+
+program
+  .command('variants [component]')
+  .description('Show variant configurations for components')
+  .action(showVariants);
+
+program.parse();