grg-kit-cli 0.2.0 → 0.3.1

package/commands/init.js

@@ -1,15 +1,19 @@
 const fs = require('fs').promises;
 const path = require('path');
+const { exec } = require('child_process');
+const { promisify } = require('util');
 const degit = require('degit');
 const chalk = require('chalk');
 const ora = require('ora');
 const { RESOURCES, REPO } = require('../config/resources');
 
+const execAsync = promisify(exec);
+
 /**
  * Init command - initializes GRG Kit in the project
- * Creates themes directory and downloads a theme
+ * Creates Angular project, installs Tailwind CSS v4, runs spartan-ng ui, downloads theme
  */
-async function init(options) {
+async function init(projectName, options) {
   const themeName = options.theme || 'grg-theme';
   const theme = RESOURCES.themes.find(t => t.name === themeName);
 
@@ -21,37 +25,161 @@ async function init(options) {
   }
 
   console.log(chalk.bold.cyan('\n🚀 Initializing GRG Kit\n'));
+  console.log(chalk.gray(`  Project: ${projectName}`));
+  console.log(chalk.gray(`  Theme: ${theme.title}\n`));
+
+  const spinner = ora();
 
-  // Step 1: Create themes directory
-  const spinner = ora('Creating themes directory...').start();
+  // Step 1: Create Angular project
+  spinner.start(`Creating Angular project "${projectName}"...`);
   try {
-    await fs.mkdir('src/themes', { recursive: true });
-    spinner.succeed(chalk.green('✓ Created src/themes directory'));
+    await execAsync(`ng new ${projectName} --style=css`, { stdio: 'pipe' });
+    spinner.succeed(chalk.green(`✓ Created Angular project "${projectName}"`));
   } catch (error) {
-    spinner.fail(chalk.red('Failed to create themes directory'));
+    spinner.fail(chalk.red('Failed to create Angular project'));
     console.error(chalk.red(error.message));
     process.exit(1);
   }
 
-  // Step 2: Download theme
-  spinner.start(`Downloading ${theme.title}...`);
+  // Change to project directory for remaining steps
+  process.chdir(projectName);
+
+  // Step 2: Install Tailwind CSS v4
+  spinner.start('Installing Tailwind CSS v4...');
   try {
-    const emitter = degit(`${REPO}/${theme.path}`, {
+    await execAsync('pnpm install tailwindcss @tailwindcss/postcss postcss', { stdio: 'pipe' });
+    spinner.succeed(chalk.green('✓ Tailwind CSS v4 installed'));
+  } catch (error) {
+    spinner.warn(chalk.yellow('Tailwind CSS installation skipped (may already be installed)'));
+  }
+
+  // Step 3: Create .postcssrc.json
+  spinner.start('Creating PostCSS configuration...');
+  try {
+    const postcssConfig = {
+      plugins: {
+        '@tailwindcss/postcss': {}
+      }
+    };
+    await fs.writeFile('.postcssrc.json', JSON.stringify(postcssConfig, null, 2) + '\n');
+    spinner.succeed(chalk.green('✓ Created .postcssrc.json'));
+  } catch (error) {
+    spinner.warn(chalk.yellow('Could not create .postcssrc.json (may already exist)'));
+  }
+
+  // Step 4: Install Spartan-NG CLI
+  spinner.start('Installing Spartan-NG CLI...');
+  try {
+    await execAsync('pnpm install -D @spartan-ng/cli', { stdio: 'pipe' });
+    spinner.succeed(chalk.green('✓ Spartan-NG CLI installed'));
+  } catch (error) {
+    spinner.warn(chalk.yellow('Spartan-NG CLI installation skipped'));
+  }
+
+  // Step 5: Create components.json config file
+  spinner.start('Creating Spartan-NG configuration...');
+  try {
+    const componentsConfig = {
+      componentsPath: 'libs/ui',
+      importAlias: '@spartan-ng/helm'
+    };
+    await fs.writeFile('components.json', JSON.stringify(componentsConfig, null, 2) + '\n');
+    spinner.succeed(chalk.green('✓ Created components.json'));
+  } catch (error) {
+    spinner.warn(chalk.yellow('Could not create components.json'));
+  }
+
+  // Step 6: Update tsconfig.json with paths for Spartan-NG
+  spinner.start('Configuring TypeScript paths...');
+  try {
+    const tsconfigPath = 'tsconfig.json';
+    let tsconfigContent = await fs.readFile(tsconfigPath, 'utf-8');
+    
+    // Strip comments from tsconfig (Angular generates tsconfig with comments)
+    tsconfigContent = tsconfigContent
+      .replace(/\/\*[\s\S]*?\*\//g, '') // Remove block comments
+      .replace(/\/\/.*/g, '');          // Remove line comments
+    
+    const tsconfig = JSON.parse(tsconfigContent);
+    
+    // Add baseUrl and paths for @spartan-ng/helm
+    tsconfig.compilerOptions = tsconfig.compilerOptions || {};
+    tsconfig.compilerOptions.baseUrl = '.';
+    tsconfig.compilerOptions.paths = {
+      '@spartan-ng/helm/*': ['./libs/ui/*/src/index.ts']
+    };
+    
+    await fs.writeFile(tsconfigPath, JSON.stringify(tsconfig, null, 2) + '\n');
+    spinner.succeed(chalk.green('✓ Configured TypeScript paths'));
+  } catch (error) {
+    spinner.warn(chalk.yellow('Could not update tsconfig.json'));
+    console.error(chalk.gray(error.message));
+  }
+
+  // Step 7: Run Spartan-NG UI generator (install all components)
+  spinner.start('Installing all Spartan-NG UI components...');
+  try {
+    const { spawn } = require('child_process');
+    await new Promise((resolve, reject) => {
+      const child = spawn('pnpm', ['ng', 'g', '@spartan-ng/cli:ui', 'all', '--defaults'], {
+        stdio: 'inherit',
+        shell: true
+      });
+      child.on('close', (code) => {
+        if (code === 0) resolve();
+        else reject(new Error(`Process exited with code ${code}`));
+      });
+      child.on('error', reject);
+    });
+    spinner.succeed(chalk.green('✓ All Spartan-NG UI components installed'));
+  } catch (error) {
+    spinner.fail(chalk.red('Failed to run Spartan-NG UI generator'));
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
+
+  // Step 8: Download Spartan-NG examples
+  spinner.start('Downloading Spartan-NG examples...');
+  try {
+    const examplesEmitter = degit(`${REPO}/templates/spartan-examples`, {
       cache: false,
       force: true,
       verbose: false,
     });
+    await examplesEmitter.clone('libs/examples');
+    spinner.succeed(chalk.green('✓ Downloaded Spartan-NG examples to libs/examples'));
+  } catch (error) {
+    spinner.warn(chalk.yellow('Could not download Spartan-NG examples'));
+    console.error(chalk.gray(error.message));
+  }
 
+  // Step 9: Create themes directory
+  spinner.start('Creating themes directory...');
+  try {
+    await fs.mkdir('src/themes', { recursive: true });
+    spinner.succeed(chalk.green('✓ Created themes directory'));
+  } catch (error) {
+    spinner.warn(chalk.yellow('Themes directory may already exist'));
+  }
+
+  // Step 10: Download theme
+  spinner.start(`Downloading ${theme.title} theme...`);
+  try {
+    const emitter = degit(`${REPO}/${theme.path}`, {
+      cache: false,
+      force: true,
+      verbose: false,
+    });
     await emitter.clone(theme.defaultOutput);
-    spinner.succeed(chalk.green(`✓ Downloaded ${theme.title}`));
+    spinner.succeed(chalk.green(`✓ Downloaded ${theme.title} theme`));
   } catch (error) {
     spinner.fail(chalk.red('Failed to download theme'));
     console.error(chalk.red(error.message));
     process.exit(1);
   }
 
-  // Step 3: Check and update styles.css
-  spinner.start('Checking src/styles.css...');
+  // Step 11: Update styles.css
+  spinner.start('Updating src/styles.css...');
   try {
     const stylesPath = 'src/styles.css';
     let stylesContent = '';
@@ -66,7 +194,6 @@ async function init(options) {
     const themeImport = `@import './themes/${theme.file}';`;
     
     if (!stylesContent.includes(themeImport)) {
-      // Add required imports if not present
       const requiredImports = [
         '@import "@angular/cdk/overlay-prebuilt.css";',
         '@import "tailwindcss";',
@@ -89,13 +216,17 @@ async function init(options) {
 
   // Success message
   console.log(chalk.bold.green('\n✨ GRG Kit initialized successfully!\n'));
-  console.log(chalk.gray('Theme installed:'), chalk.cyan(theme.title));
-  console.log(chalk.gray('Description:'), theme.description);
+  
+  console.log(chalk.bold('Installed:'));
+  console.log(chalk.gray('  Tailwind CSS:'), chalk.cyan('v4 with PostCSS'));
+  console.log(chalk.gray('  Spartan-NG:'), chalk.cyan('All UI components in libs/ui'));
+  console.log(chalk.gray('  Examples:'), chalk.cyan('56+ component examples in libs/examples'));
+  console.log(chalk.gray('  Theme:'), chalk.cyan(theme.title));
   
   console.log(chalk.yellow('\nNext steps:'));
-  console.log(chalk.gray('  1. Run'), chalk.cyan('grg list'), chalk.gray('to see available resources'));
-  console.log(chalk.gray('  2. Add components with'), chalk.cyan('grg add component:<name>'));
-  console.log(chalk.gray('  3. Add examples with'), chalk.cyan('grg add examples:all'));
+  console.log(chalk.gray('  1.'), chalk.cyan(`cd ${projectName}`));
+  console.log(chalk.gray('  2. Run'), chalk.cyan('grg list blocks'), chalk.gray('to see available blocks'));
+  console.log(chalk.gray('  3. Add blocks with'), chalk.cyan('grg add block --auth'));
   console.log();
 }
 

package/commands/list.js

@@ -2,91 +2,59 @@ const chalk = require('chalk');
 const { RESOURCES } = require('../config/resources');
 
 /**
- * List command - displays available resources
+ * List command - displays available blocks and themes
  * Usage: grg list [category]
  */
 async function list(category) {
   if (!category) {
-    // Show all categories
+    // Show overview
     console.log(chalk.bold.cyan('\n📦 GRG Kit Resources\n'));
     
+    console.log(chalk.bold('Blocks') + chalk.gray(` (${RESOURCES.blocks.length} available)`));
+    console.log(chalk.gray('  Add with: grg add block --<name>'));
+    console.log(chalk.gray('  Run: grg list blocks\n'));
+    
     console.log(chalk.bold('Themes') + chalk.gray(` (${RESOURCES.themes.length} available)`));
+    console.log(chalk.gray('  Set with: grg init --theme <name>'));
     console.log(chalk.gray('  Run: grg list themes\n'));
     
-    console.log(chalk.bold('Components') + chalk.gray(` (${RESOURCES.components.length} available)`));
-    console.log(chalk.gray('  Run: grg list components\n'));
-    
-    console.log(chalk.bold('Layouts') + chalk.gray(` (${RESOURCES.layouts.length} available)`));
-    console.log(chalk.gray('  Run: grg list layouts\n'));
-    
-    console.log(chalk.bold('Spartan-NG Examples') + chalk.gray(` (${RESOURCES.examples.components.length}+ available)`));
-    console.log(chalk.gray('  Run: grg list examples\n'));
+    console.log(chalk.gray('Components and spartan-ng examples are installed automatically with'), chalk.cyan('grg init'));
+    console.log();
     
     return;
   }
 
   switch (category) {
+    case 'blocks':
+      console.log(chalk.bold.cyan('\n🧱 Available Blocks\n'));
+      RESOURCES.blocks.forEach(block => {
+        console.log(chalk.bold(`  ${block.name}`));
+        console.log(chalk.gray(`    ${block.description}`));
+        console.log(chalk.yellow(`    grg add block --${block.name}`));
+        if (block.tags && block.tags.length > 0) {
+          console.log(chalk.gray(`    Tags: ${block.tags.join(', ')}`));
+        }
+        console.log();
+      });
+      break;
+
     case 'themes':
       console.log(chalk.bold.cyan('\n🎨 Available Themes\n'));
+      console.log(chalk.gray('  Use with: grg init --theme <name>\n'));
       RESOURCES.themes.forEach(theme => {
         console.log(chalk.bold(`  ${theme.name}`));
         console.log(chalk.gray(`    ${theme.description}`));
-        console.log(chalk.yellow(`    grg add theme:${theme.name}`));
-        if (theme.tags.length > 0) {
+        console.log(chalk.yellow(`    grg init --theme ${theme.name}`));
+        if (theme.tags && theme.tags.length > 0) {
           console.log(chalk.gray(`    Tags: ${theme.tags.join(', ')}`));
         }
         console.log();
       });
       break;
 
-    case 'components':
-      console.log(chalk.bold.cyan('\n🧩 Available Components\n'));
-      RESOURCES.components.forEach(component => {
-        console.log(chalk.bold(`  ${component.name}`));
-        console.log(chalk.gray(`    ${component.description}`));
-        console.log(chalk.yellow(`    grg add component:${component.name}`));
-        if (component.tags.length > 0) {
-          console.log(chalk.gray(`    Tags: ${component.tags.join(', ')}`));
-        }
-        console.log();
-      });
-      break;
-
-    case 'layouts':
-      console.log(chalk.bold.cyan('\n📐 Available Layouts\n'));
-      RESOURCES.layouts.forEach(layout => {
-        console.log(chalk.bold(`  ${layout.name}`));
-        console.log(chalk.gray(`    ${layout.description}`));
-        console.log(chalk.yellow(`    grg add layout:${layout.name}`));
-        if (layout.tags.length > 0) {
-          console.log(chalk.gray(`    Tags: ${layout.tags.join(', ')}`));
-        }
-        console.log();
-      });
-      break;
-
-    case 'examples':
-      console.log(chalk.bold.cyan('\n📚 Available Spartan-NG Examples\n'));
-      
-      // Show "all" option first
-      console.log(chalk.bold(`  all`) + chalk.gray(' (recommended)'));
-      console.log(chalk.gray(`    ${RESOURCES.examples.all.description}`));
-      console.log(chalk.yellow(`    grg add examples:all`));
-      console.log();
-      
-      console.log(chalk.gray('  Or add individual component examples:\n'));
-      
-      RESOURCES.examples.components.forEach(example => {
-        console.log(chalk.bold(`  ${example.name}`));
-        console.log(chalk.gray(`    ${example.description}`));
-        console.log(chalk.yellow(`    grg add examples:${example.name}`));
-        console.log();
-      });
-      break;
-
     default:
       console.error(chalk.red(`Error: Unknown category "${category}"`));
-      console.log(chalk.yellow('Valid categories: themes, components, layouts, examples'));
+      console.log(chalk.yellow('Valid categories: blocks, themes'));
       process.exit(1);
   }
 }