grg-kit-cli 0.6.10 → 0.6.12

package/README.md

@@ -21,6 +21,10 @@ grg init
 # Or with a specific theme
 grg init --theme claude
 
+# Add or switch theme
+grg add theme claude
+grg add theme modern-minimal
+
 # Add blocks (all files)
 grg add block auth
 grg add block shell
@@ -32,10 +36,14 @@ grg add block shell sidebar
 # Add all blocks
 grg add block --all
 
+# Add components
+grg add component file-upload
+
 # List available resources
 grg list
 grg list blocks
 grg list themes
+grg list components
 ```
 
 ## Commands
@@ -70,12 +78,34 @@ Examples:
 - Updates `src/styles.css` with theme import
 
 **Available themes:**
-- `grg-theme` - Default theme with purple/orange accents
+- `grg-theme` - Default theme with blue accents
 - `claude` - Claude-inspired warm tones
 - `clean-slate` - Minimal grayscale palette
 - `modern-minimal` - Contemporary minimal design
 - `amber-minimal` - Warm amber accents
-- `mocks` - Theme for mockups and prototypes
+- `chroma-clinic` - Professional blue theme for healthcare
+- `bio-lab` - Fresh green theme for life sciences
+- `pharma-teal` - Calming teal for pharmaceutical apps
+- `helix-purple` - DNA-inspired purple for genomics
+
+### `grg add theme`
+
+Add or switch theme in an existing project.
+
+```bash
+grg add theme <themeName>
+
+Options:
+  -o, --output <path>    Custom themes directory (default: "src/themes")
+
+Examples:
+  grg add theme claude           # Download and set claude theme
+  grg add theme modern-minimal   # Download and set modern-minimal
+```
+
+**What it does:**
+- Downloads the theme CSS file to `src/themes/`
+- Updates `src/styles.css` to import the new theme (replaces existing theme import)
 
 ### `grg add block`
 
@@ -97,6 +127,22 @@ Examples:
   grg add block --all                   # All blocks
 ```
 
+### `grg add component`
+
+Add GRG Kit components to your project.
+
+```bash
+grg add component <componentName>
+
+Options:
+  --all                  Add all components
+  -o, --output <path>    Custom output directory
+
+Examples:
+  grg add component file-upload    # Download file-upload component
+  grg add component --all          # All components
+```
+
 **Available blocks and files:**
 
 | Block | Files |
@@ -110,17 +156,23 @@ Examples:
 List available blocks and themes.
 
 ```bash
-grg list [category]
+grg list [category] [options]
+
+Options:
+  --json             Output as JSON (for MCP server integration)
 
 Examples:
   grg list           # Show overview
   grg list blocks    # List all blocks
   grg list themes    # List all themes
+  grg list --json    # Output all resources as JSON
 ```
 
+The `--json` flag outputs structured data used by the MCP server to get resource information.
+
 ### `grg llm-setup`
 
-Generate LLM-specific prompts and rules for AI assistants (Windsurf, Cursor, etc.).
+Generate design system rules for AI assistants (Windsurf, Cursor, Claude Code).
 
 ```bash
 grg llm-setup [options]
@@ -129,60 +181,17 @@ Options:
   -o, --output <path>  Output directory for rules (default: ".windsurf/rules")
 
 Examples:
-  grg llm-setup                    # Windsurf (multiple .md files)
+  grg llm-setup                    # Windsurf/Cursor (design-system.md)
   grg llm-setup --output .claude   # Claude Code (single CLAUDE.md)
 ```
 
-## MCP Server Integration
-
-For AI assistants to automatically discover and use GRG Kit resources:
-
-### 1. Install the MCP Server
-
-```bash
-npm install -g grg-kit-mcp-server
-```
-
-### 2. Configure Your AI Assistant
-
-**Windsurf** (`~/.codeium/windsurf/mcp_config.json`):
-
-```json
-{
-  "mcpServers": {
-    "grg-kit": {
-      "command": "grg-mcp-server"
-    }
-  }
-}
-```
-
-**Claude Code** (`~/.claude/settings.json`):
-
-```json
-{
-  "mcpServers": {
-    "grg-kit": {
-      "command": "grg-mcp-server"
-    }
-  }
-}
-```
-
-### 3. Generate AI Rules
-
-```bash
-cd your-angular-project
-grg llm-setup
-```
-
-### 4. Restart Your IDE
+**What this creates:**
+- `design-system.md` - Component usage patterns, styling rules, import patterns
 
 **What this enables:**
-- ✅ AI automatically searches GRG Kit before writing custom code
-- ✅ AI knows about themes, components, blocks, and examples
 - ✅ AI follows GRG Kit design system patterns
-- ✅ AI can install blocks directly via MCP tools
+- ✅ AI uses Spartan-NG components correctly
+- ✅ AI uses semantic colors instead of raw Tailwind colors
 
 ## Quick Reference
 
@@ -195,6 +204,10 @@ cd my-app
 grg init                        # Default theme
 grg init --theme claude         # Custom theme
 
+# Add/switch theme
+grg add theme claude            # Switch to claude theme
+grg add theme modern-minimal    # Switch to modern-minimal
+
 # Add blocks (all files)
 grg add block auth              # All auth files
 grg add block shell             # All shell layouts
@@ -205,10 +218,14 @@ grg add block auth login        # Just login
 grg add block shell sidebar     # Just sidebar shell
 grg add block --all             # All blocks
 
+# Add components
+grg add component file-upload   # File upload component
+
 # List resources
 grg list                        # Overview
 grg list blocks                 # Available blocks
 grg list themes                 # Available themes
+grg list components             # Available components
 
 # AI setup
 grg llm-setup                   # Generate AI rules

package/bin/grg.js

@@ -41,10 +41,20 @@ addCommand
     await addComponent(componentName, options);
   });
 
+addCommand
+  .command('theme [themeName]')
+  .description('Add or switch theme (e.g., grg add theme claude)')
+  .option('-o, --output <path>', 'Custom themes directory', 'src/themes')
+  .action(async (themeName, options) => {
+    const { addTheme } = require('../commands/add');
+    await addTheme(themeName, options);
+  });
+
 // List command
 program
   .command('list [category]')
   .description('List available blocks and components')
+  .option('--json', 'Output as JSON (for MCP server integration)')
   .action(list);
 
 // LLM Setup command

package/commands/add.js

@@ -4,7 +4,7 @@ const ora = require('ora');
 const fs = require('fs').promises;
 const path = require('path');
 const https = require('https');
-const { fetchCatalog, REPO } = require('../config/catalog-fetcher');
+const { RESOURCES, REPO } = require('../config/resources');
 
 /**
  * Add command - downloads blocks or specific block files
@@ -16,10 +16,6 @@ const { fetchCatalog, REPO } = require('../config/catalog-fetcher');
  *   grg add block --all                   # All blocks with all files
  */
 async function add(blockName, fileIds, options) {
-  // Fetch catalog dynamically (with caching)
-  const spinner = ora('Fetching catalog...').start();
-  const RESOURCES = await fetchCatalog({ silent: true });
-  spinner.stop();
 
   // Handle --all flag (download everything)
   if (options.all) {
@@ -292,4 +288,157 @@ function showComponentUsage(RESOURCES) {
   console.log(chalk.gray('\nRun'), chalk.cyan('grg list components'), chalk.gray('for more details'));
 }
 
-module.exports = { add, addComponent };
+/**
+ * Add theme command - downloads and sets up a theme
+ * Format: grg add theme <themeName>
+ * Examples:
+ *   grg add theme claude           # Download and set claude theme
+ *   grg add theme modern-minimal   # Download and set modern-minimal theme
+ */
+async function addTheme(themeName, options) {
+  // Fetch catalog dynamically (with caching)
+  const spinner = ora('Fetching catalog...').start();
+  const RESOURCES = await fetchCatalog({ silent: true });
+  spinner.stop();
+
+  // Validate theme name
+  if (!themeName) {
+    showThemeUsage(RESOURCES);
+    process.exit(1);
+  }
+
+  const theme = RESOURCES.themes.find(t => t.name === themeName);
+  if (!theme) {
+    console.error(chalk.red(`\nError: Theme "${themeName}" not found`));
+    console.log(chalk.yellow('\nAvailable themes:'));
+    RESOURCES.themes.forEach(t => {
+      console.log(chalk.cyan(`  ${t.name}`), chalk.gray(`- ${t.description}`));
+    });
+    process.exit(1);
+  }
+
+  await downloadTheme(theme, options.output);
+  console.log(chalk.bold.green('✨ Done!'));
+}
+
+/**
+ * Download a theme file
+ */
+async function downloadTheme(theme, customOutput) {
+  const downloadSpinner = ora();
+  const themesDir = customOutput || 'src/themes';
+  const outputPath = path.join(themesDir, theme.file);
+
+  // Ensure themes directory exists
+  await fs.mkdir(themesDir, { recursive: true });
+
+  downloadSpinner.start(`Downloading ${theme.title} theme...`);
+
+  try {
+    const themeUrl = `https://raw.githubusercontent.com/${REPO}/main/${theme.path}`;
+    await downloadFileToPath(themeUrl, outputPath);
+
+    downloadSpinner.succeed(chalk.green(`✓ ${theme.title} theme downloaded`));
+    console.log(chalk.gray(`  Location: ${outputPath}`));
+
+  } catch (error) {
+    downloadSpinner.fail(chalk.red(`Failed to download ${theme.title}`));
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
+
+  // Update styles.css
+  downloadSpinner.start('Updating src/styles.css...');
+  try {
+    const stylesPath = 'src/styles.css';
+    let stylesContent = '';
+    
+    try {
+      stylesContent = await fs.readFile(stylesPath, 'utf-8');
+    } catch (error) {
+      // File doesn't exist, will create it
+      stylesContent = '';
+    }
+
+    const themeImport = `@import './themes/${theme.file}';`;
+    
+    // Check if any theme is already imported
+    const themeImportRegex = /@import\s+['"]\.\/themes\/[^'"]+['"];?\n?/g;
+    const existingThemeImports = stylesContent.match(themeImportRegex);
+    
+    if (existingThemeImports && existingThemeImports.length > 0) {
+      // Remove ALL existing theme imports first
+      stylesContent = stylesContent.replace(themeImportRegex, '');
+      // Clean up any resulting double blank lines
+      stylesContent = stylesContent.replace(/\n{3,}/g, '\n\n');
+      // Add the new theme import after the spartan preset import
+      const spartanImport = '@import "@spartan-ng/brain/hlm-tailwind-preset.css";';
+      if (stylesContent.includes(spartanImport)) {
+        stylesContent = stylesContent.replace(spartanImport, `${spartanImport}\n\n${themeImport}`);
+      } else {
+        // Fallback: add at the beginning
+        stylesContent = themeImport + '\n' + stylesContent;
+      }
+      await fs.writeFile(stylesPath, stylesContent);
+      downloadSpinner.succeed(chalk.green(`✓ Updated theme import in src/styles.css`));
+    } else if (!stylesContent.includes(themeImport)) {
+      // No theme import exists, add required imports
+      const requiredImports = [
+        '@import "@angular/cdk/overlay-prebuilt.css";',
+        '@import "tailwindcss";',
+        '@import "@spartan-ng/brain/hlm-tailwind-preset.css";',
+        '',
+        themeImport
+      ];
+
+      const newContent = requiredImports.join('\n') + '\n';
+      await fs.writeFile(stylesPath, newContent);
+      downloadSpinner.succeed(chalk.green('✓ Created src/styles.css with theme import'));
+    } else {
+      downloadSpinner.succeed(chalk.green('✓ Theme already imported in src/styles.css'));
+    }
+  } catch (error) {
+    downloadSpinner.warn(chalk.yellow('Could not update src/styles.css automatically'));
+    console.log(chalk.gray('\nPlease add the following to your src/styles.css:'));
+    console.log(chalk.cyan(`  @import './themes/${theme.file}';`));
+  }
+
+  console.log();
+}
+
+/**
+ * Download file to a specific path
+ */
+function downloadFileToPath(url, outputPath) {
+  return new Promise((resolve, reject) => {
+    https.get(url, (res) => {
+      if (res.statusCode === 301 || res.statusCode === 302) {
+        // Follow redirect
+        https.get(res.headers.location, (res2) => {
+          handleResponse(res2, outputPath, resolve, reject);
+        }).on('error', reject);
+      } else {
+        handleResponse(res, outputPath, resolve, reject);
+      }
+    }).on('error', reject);
+  });
+}
+
+/**
+ * Show theme usage help
+ */
+function showThemeUsage(RESOURCES) {
+  console.log(chalk.yellow('\nUsage: grg add theme <themeName>\n'));
+  console.log(chalk.bold('Examples:'));
+  console.log(chalk.cyan('  grg add theme claude'), chalk.gray('          # Download and set claude theme'));
+  console.log(chalk.cyan('  grg add theme modern-minimal'), chalk.gray('  # Download and set modern-minimal'));
+  
+  console.log(chalk.bold('\nAvailable themes:'));
+  RESOURCES.themes.forEach(t => {
+    console.log(chalk.cyan(`  ${t.name}`), chalk.gray(`- ${t.description}`));
+  });
+  
+  console.log(chalk.gray('\nRun'), chalk.cyan('grg list themes'), chalk.gray('for more details'));
+}
+
+module.exports = { add, addComponent, addTheme };

package/commands/init.js

@@ -2,6 +2,7 @@ const fs = require('fs').promises;
 const path = require('path');
 const { exec } = require('child_process');
 const { promisify } = require('util');
+const https = require('https');
 const degit = require('degit');
 const chalk = require('chalk');
 const ora = require('ora');
@@ -9,6 +10,28 @@ const { RESOURCES, REPO } = require('../config/resources');
 
 const execAsync = promisify(exec);
 
+/**
+ * Download a file from a URL
+ */
+function downloadFile(url) {
+  return new Promise((resolve, reject) => {
+    https.get(url, (res) => {
+      if (res.statusCode === 301 || res.statusCode === 302) {
+        // Follow redirect
+        return downloadFile(res.headers.location).then(resolve).catch(reject);
+      }
+      if (res.statusCode !== 200) {
+        reject(new Error(`HTTP ${res.statusCode}`));
+        return;
+      }
+
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => resolve(data));
+    }).on('error', reject);
+  });
+}
+
 /**
  * Init command - initializes GRG Kit in an existing Angular project
  * Installs Tailwind CSS v4, runs spartan-ng ui, downloads theme
@@ -45,7 +68,18 @@ async function init(options) {
   console.log(chalk.bold.cyan('\n🚀 Initializing GRG Kit\n'));
   console.log(chalk.gray(`  Theme: ${theme.title}\n`));
 
-  // Step 1: Install Tailwind CSS v4
+  // Step 1: Fresh install of packages
+  spinner.start('Cleaning node_modules and reinstalling packages...');
+  try {
+    await execAsync('rm -rf node_modules && npm install');
+    spinner.succeed(chalk.green('✓ Fresh package install complete'));
+  } catch (error) {
+    spinner.fail(chalk.red('Failed to reinstall packages'));
+    console.error(chalk.gray(error.message));
+    process.exit(1);
+  }
+
+  // Step 2: Install Tailwind CSS v4
   spinner.start('Installing Tailwind CSS v4...');
   try {
     await execAsync('npm install tailwindcss @tailwindcss/postcss postcss --force');
@@ -227,15 +261,12 @@ async function init(options) {
     spinner.warn(chalk.yellow('Themes directory may already exist'));
   }
 
-  // Step 10: Download theme
+  // Step 10: Download theme file
   spinner.start(`Downloading ${theme.title} theme...`);
   try {
-    const emitter = degit(`${REPO}/${theme.path}`, {
-      cache: false,
-      force: true,
-      verbose: false,
-    });
-    await emitter.clone(theme.defaultOutput);
+    const themeUrl = `https://raw.githubusercontent.com/${REPO}/main/${theme.path}`;
+    const themeContent = await downloadFile(themeUrl);
+    await fs.writeFile(theme.defaultOutput, themeContent);
     spinner.succeed(chalk.green(`✓ Downloaded ${theme.title} theme`));
   } catch (error) {
     spinner.fail(chalk.red('Failed to download theme'));

package/commands/list.js

@@ -1,16 +1,34 @@
 const chalk = require('chalk');
-const ora = require('ora');
-const { fetchCatalog } = require('../config/catalog-fetcher');
+const { RESOURCES } = require('../config/resources');
+const { version } = require('../package.json');
 
 /**
  * List command - displays available blocks, components, and themes
- * Usage: grg list [category]
+ * Usage: grg list [category] [--json]
  */
-async function list(category) {
-  // Fetch catalog dynamically
-  const spinner = ora('Fetching catalog...').start();
-  const RESOURCES = await fetchCatalog({ silent: true });
-  spinner.stop();
+async function list(category, options = {}) {
+
+  // JSON output for MCP server integration
+  if (options.json) {
+    const output = {
+      cli: {
+        name: 'grg',
+        version,
+        commands: {
+          init: { usage: 'grg init [--theme <name>]', themeFlag: '--theme' },
+          addBlock: { usage: 'grg add block <blockName> [fileIds...]', validBlocks: RESOURCES.blocks.map(b => b.name) },
+          addComponent: { usage: 'grg add component <componentName>', validComponents: RESOURCES.components.map(c => c.name) },
+          addTheme: { usage: 'grg add theme <themeName>' },
+          list: { usage: 'grg list [category] [--json]' }
+        }
+      },
+      themes: RESOURCES.themes,
+      components: RESOURCES.components,
+      blocks: RESOURCES.blocks
+    };
+    console.log(JSON.stringify(output, null, 2));
+    return;
+  }
 
   if (!category) {
     // Show overview
@@ -25,7 +43,7 @@ async function list(category) {
     console.log(chalk.gray('  Run: grg list components\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('  Add with: grg add theme <name>'));
     console.log(chalk.gray('  Run: grg list themes\n'));
     
     return;
@@ -67,11 +85,11 @@ async function list(category) {
 
     case 'themes':
       console.log(chalk.bold.cyan('\n🎨 Available Themes\n'));
-      console.log(chalk.gray('  Use with: grg init --theme <name>\n'));
+      console.log(chalk.gray('  Use with: grg add theme <name>\n'));
       RESOURCES.themes.forEach(theme => {
         console.log(chalk.bold(`  ${theme.name}`));
         console.log(chalk.gray(`    ${theme.description}`));
-        console.log(chalk.yellow(`    grg init --theme ${theme.name}`));
+        console.log(chalk.yellow(`    grg add theme ${theme.name}`));
         if (theme.tags && theme.tags.length > 0) {
           console.log(chalk.gray(`    Tags: ${theme.tags.join(', ')}`));
         }