grg-kit-cli 0.3.0 → 0.3.2

package/README.md

@@ -5,19 +5,20 @@ CLI tool for initializing Angular projects with GRG Kit and adding blocks.
 ## Installation
 
 ```bash
-npm install -g grg-kit-cli
+pnpm install -g grg-kit-cli
 ```
 
 ## Quick Start
 
 ```bash
-# Initialize GRG Kit (theme + all components + spartan-ng examples)
-grg init
+# Initialize a new Angular project with GRG Kit
+grg init my-app
 
 # Initialize with a specific theme
-grg init --theme claude
+grg init my-app --theme claude
 
-# Add blocks
+# Add blocks (inside project directory)
+cd my-app
 grg add block --auth
 grg add block --shell
 grg add block --all
@@ -30,27 +31,30 @@ grg list themes
 
 ## Commands
 
-### `grg init`
+### `grg init <project-name>`
 
-Initialize GRG Kit in your Angular project. Downloads theme, all components, and all spartan-ng examples in one shot.
+Create a new Angular project with GRG Kit fully configured. One command to set up everything.
 
 ```bash
-grg init [options]
+grg init <project-name> [options]
 
 Options:
   -t, --theme <name>  Theme to install (default: "grg-theme")
 
 Examples:
-  grg init
-  grg init --theme claude
-  grg init -t modern-minimal
+  grg init my-app
+  grg init my-app --theme claude
+  grg init dashboard -t modern-minimal
 ```
 
 **What it does:**
-- Creates `src/themes`, `src/app/components`, `src/app/spartan-examples` directories
+- Creates Angular project with CSS styling
+- Installs Tailwind CSS v4 (`tailwindcss @tailwindcss/postcss postcss`)
+- Creates `.postcssrc.json` with PostCSS configuration
+- Installs and configures Spartan-NG CLI
+- Runs `ng g @spartan-ng/cli:ui all` to install all Spartan-NG UI components
+- Downloads 56+ Spartan-NG examples to `libs/examples`
 - Downloads the selected theme
-- Downloads all GRG Kit components
-- Downloads all spartan-ng examples (56+)
 - Updates `src/styles.css` with theme import
 
 **Available themes:**
@@ -116,7 +120,7 @@ For AI assistants to automatically discover and use GRG Kit resources:
 ### 1. Install the MCP Server
 
 ```bash
-npm install -g @grg-kit/mcp-server
+pnpm install -g @grg-kit/mcp-server
 ```
 
 ### 2. Configure Your AI Assistant
@@ -164,10 +168,11 @@ grg llm-prompts
 
 ```bash
 # Initialize project
-grg init                        # Default theme
-grg init --theme claude         # Custom theme
+grg init my-app                        # Default theme
+grg init my-app --theme claude         # Custom theme
 
-# Add blocks
+# Add blocks (inside project directory)
+cd my-app
 grg add block --auth            # Auth pages
 grg add block --shell           # App shell
 grg add block --settings        # Settings page

package/bin/grg.js

@@ -15,14 +15,16 @@ program
 
 // Init command - sets up everything in one shot
 program
-  .command('init')
-  .description('Initialize GRG Kit: sets up styles.css with theme, adds all components and spartan-ng examples')
+  .command('init <project-name>')
+  .description('Initialize GRG Kit: creates Angular project with zoneless, sets up styles.css with theme, adds all components')
   .option('-t, --theme <name>', 'Theme to install (grg-theme, claude, clean-slate, modern-minimal, amber-minimal, mocks)', 'grg-theme')
   .action(init);
 
-// Add block command
-program
-  .command('add block')
+// Add command with block subcommand
+const addCommand = program.command('add').description('Add resources to your project');
+
+addCommand
+  .command('block')
   .description('Add blocks to your project')
   .option('--all', 'Add all blocks')
   .option('--auth', 'Add authentication block (login, signup, forgot password)')

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
- * Downloads theme, all components, and all spartan-ng examples in one shot
+ * 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,74 +25,160 @@ 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 directories
-  spinner.start('Creating directories...');
+  // Step 1: Create Angular project
+  spinner.start(`Creating Angular project "${projectName}"...`);
   try {
-    await fs.mkdir('src/themes', { recursive: true });
-    await fs.mkdir('src/app/components', { recursive: true });
-    await fs.mkdir('src/app/spartan-examples', { recursive: true });
-    spinner.succeed(chalk.green('✓ Created directories'));
+    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 directories'));
+    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} theme...`);
+  // 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/spartan-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/spartan-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 emitter.clone(theme.defaultOutput);
-    spinner.succeed(chalk.green(`✓ Downloaded ${theme.title} theme`));
+    await examplesEmitter.clone('libs/examples');
+    spinner.succeed(chalk.green('✓ Downloaded Spartan-NG examples to libs/examples'));
   } catch (error) {
-    spinner.fail(chalk.red('Failed to download theme'));
-    console.error(chalk.red(error.message));
-    process.exit(1);
+    spinner.warn(chalk.yellow('Could not download Spartan-NG examples'));
+    console.error(chalk.gray(error.message));
   }
 
-  // Step 3: Download all components
-  spinner.start(`Downloading ${RESOURCES.components.length} components...`);
+  // Step 9: Create themes directory
+  spinner.start('Creating themes directory...');
   try {
-    for (const component of RESOURCES.components) {
-      const emitter = degit(`${REPO}/${component.path}`, {
-        cache: false,
-        force: true,
-        verbose: false,
-      });
-      await emitter.clone(component.defaultOutput);
-    }
-    spinner.succeed(chalk.green(`✓ Downloaded ${RESOURCES.components.length} components`));
+    await fs.mkdir('src/themes', { recursive: true });
+    spinner.succeed(chalk.green('✓ Created themes directory'));
   } catch (error) {
-    spinner.fail(chalk.red('Failed to download components'));
-    console.error(chalk.red(error.message));
-    process.exit(1);
+    spinner.warn(chalk.yellow('Themes directory may already exist'));
   }
 
-  // Step 4: Download all spartan-ng examples
-  const examplesAll = RESOURCES.examples.all;
-  spinner.start(`Downloading spartan-ng examples (${examplesAll.count})...`);
+  // Step 10: Download theme
+  spinner.start(`Downloading ${theme.title} theme...`);
   try {
-    const emitter = degit(`${REPO}/${examplesAll.path}`, {
+    const emitter = degit(`${REPO}/${theme.path}`, {
       cache: false,
       force: true,
       verbose: false,
     });
-    await emitter.clone(examplesAll.defaultOutput);
-    spinner.succeed(chalk.green(`✓ Downloaded spartan-ng examples (${examplesAll.count})`));
+    await emitter.clone(theme.defaultOutput);
+    spinner.succeed(chalk.green(`✓ Downloaded ${theme.title} theme`));
   } catch (error) {
-    spinner.fail(chalk.red('Failed to download spartan-ng examples'));
+    spinner.fail(chalk.red('Failed to download theme'));
     console.error(chalk.red(error.message));
     process.exit(1);
   }
 
-  // Step 5: Update styles.css
+  // Step 11: Update styles.css
   spinner.start('Updating src/styles.css...');
   try {
     const stylesPath = 'src/styles.css';
@@ -128,13 +218,15 @@ async function init(options) {
   console.log(chalk.bold.green('\n✨ GRG Kit initialized successfully!\n'));
   
   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.gray('  Components:'), chalk.cyan(`${RESOURCES.components.length} components`));
-  console.log(chalk.gray('  Examples:'), chalk.cyan(`${examplesAll.count} spartan-ng examples`));
   
   console.log(chalk.yellow('\nNext steps:'));
-  console.log(chalk.gray('  1. Run'), chalk.cyan('grg list'), chalk.gray('to see available blocks'));
-  console.log(chalk.gray('  2. Add blocks with'), chalk.cyan('grg add <block-name>'));
+  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/config/resources.js

@@ -156,13 +156,13 @@ const RESOURCES = {
       "prefix": "grg"
     }
   ],
-  "layouts": [
+  "blocks": [
     {
       "name": "auth",
-      "title": "Auth Layout",
+      "title": "Auth Block",
       "description": "Authentication pages layout (login, signup, forgot password)",
       "path": "templates/ui/layouts/auth",
-      "defaultOutput": "src/app/layouts/auth",
+      "defaultOutput": "src/app/blocks/auth",
       "tags": [
         "auth",
         "login",
@@ -177,20 +177,24 @@ const RESOURCES = {
     },
     {
       "name": "settings",
-      "title": "Settings Layout",
-      "description": "settings layout",
+      "title": "Settings Block",
+      "description": "settings block",
       "path": "templates/ui/layouts/settings",
-      "defaultOutput": "src/app/layouts/settings",
-      "tags": [],
+      "defaultOutput": "src/app/blocks/settings",
+      "tags": [
+        "settings"
+      ],
       "dependencies": []
     },
     {
       "name": "shell",
-      "title": "Shell Layout",
-      "description": "shell layout",
+      "title": "Shell Block",
+      "description": "shell block",
       "path": "templates/ui/layouts/shell",
-      "defaultOutput": "src/app/layouts/shell",
-      "tags": [],
+      "defaultOutput": "src/app/blocks/shell",
+      "tags": [
+        "shell"
+      ],
       "dependencies": []
     }
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grg-kit-cli",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "CLI tool for pulling GRG Kit resources into your Angular project",
   "main": "index.js",
   "bin": {

package/scripts/README.md

@@ -16,7 +16,7 @@ Ensures the CLI always has up-to-date resource definitions based on what's actua
 
 ```bash
 # Run manually
-npm run generate
+pnpm run generate
 
 # Or directly
 node scripts/generate-resources.js
@@ -26,7 +26,7 @@ node scripts/generate-resources.js
 
 The script runs automatically before publishing:
 ```bash
-npm publish  # Runs prepublishOnly hook → npm run generate
+pnpm publish  # Runs prepublishOnly hook → pnpm run generate
 ```
 
 ### What It Does
@@ -96,6 +96,6 @@ const COMPONENT_METADATA = {
 
 1. Add new resource to `templates/` directory
 2. (Optional) Add metadata to script constants
-3. Run `npm run generate`
+3. Run `pnpm run generate`
 4. Test with `grg list` or `grg add`
-5. Publish with `npm publish` (auto-generates)
+5. Publish with `pnpm publish` (auto-generates)

package/scripts/generate-resources.js

@@ -50,8 +50,8 @@ const COMPONENT_METADATA = {
   }
 };
 
-// Layout metadata
-const LAYOUT_METADATA = {
+// Block metadata (formerly layouts)
+const BLOCK_METADATA = {
   'dashboard': {
     description: 'Full dashboard layout with sidebar and header',
     tags: ['dashboard', 'admin', 'sidebar', 'navigation'],
@@ -187,25 +187,25 @@ function generateComponents() {
     });
 }
 
-function generateLayouts() {
-  const layoutsDir = path.join(TEMPLATES_DIR, 'ui/layouts');
-  const dirs = scanDirectory(layoutsDir);
+function generateBlocks() {
+  const blocksDir = path.join(TEMPLATES_DIR, 'ui/layouts');
+  const dirs = scanDirectory(blocksDir);
   
   return dirs
     .filter(dir => dir.isDirectory())
     .map(dir => {
-      const metadata = LAYOUT_METADATA[dir.name] || {
-        description: `${dir.name} layout`,
-        tags: [],
+      const metadata = BLOCK_METADATA[dir.name] || {
+        description: `${dir.name} block`,
+        tags: [dir.name],
         dependencies: []
       };
       
       return {
         name: dir.name,
-        title: dir.name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ') + ' Layout',
+        title: dir.name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ') + ' Block',
         description: metadata.description,
         path: `templates/ui/layouts/${dir.name}`,
-        defaultOutput: `src/app/layouts/${dir.name}`,
+        defaultOutput: `src/app/blocks/${dir.name}`,
         tags: metadata.tags,
         dependencies: metadata.dependencies
       };
@@ -253,12 +253,12 @@ function generateResourcesFile() {
   
   const themes = generateThemes();
   const components = generateComponents();
-  const layouts = generateLayouts();
+  const blocks = generateBlocks();
   const examples = generateExamples();
   
   console.log(`✓ Found ${themes.length} themes`);
   console.log(`✓ Found ${components.length} components`);
-  console.log(`✓ Found ${layouts.length} layouts`);
+  console.log(`✓ Found ${blocks.length} blocks`);
   console.log(`✓ Found ${examples.components.length} example components`);
   
   const output = `/**
@@ -267,7 +267,7 @@ function generateResourcesFile() {
  * Run: node scripts/generate-resources.js to update
  */
 
-const RESOURCES = ${JSON.stringify({ themes, components, layouts, examples }, null, 2)};
+const RESOURCES = ${JSON.stringify({ themes, components, blocks, examples }, null, 2)};
 
 const REPO = 'Genesis-Research/grg-kit';
 
@@ -279,7 +279,7 @@ module.exports = { RESOURCES, REPO };
   console.log('\n📦 Resource Summary:');
   console.log(`   Themes: ${themes.length}`);
   console.log(`   Components: ${components.length}`);
-  console.log(`   Layouts: ${layouts.length}`);
+  console.log(`   Blocks: ${blocks.length}`);
   console.log(`   Examples: ${examples.components.length}`);
 }