grg-kit-cli 0.6.9 → 0.6.11

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
@@ -77,6 +85,25 @@ Examples:
 - `amber-minimal` - Warm amber accents
 - `mocks` - Theme for mockups and prototypes
 
+### `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`
 
 Add blocks or specific block files to your project.
@@ -97,6 +124,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 |
@@ -195,6 +238,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 +252,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,6 +41,15 @@ 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]')

package/commands/add.js

@@ -292,4 +292,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,10 +68,21 @@ 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');
+    await execAsync('npm install tailwindcss @tailwindcss/postcss postcss --force');
     spinner.succeed(chalk.green('✓ Tailwind CSS v4 installed'));
   } catch (error) {
     spinner.fail(chalk.red('Failed to install Tailwind CSS v4'));
@@ -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

@@ -25,7 +25,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 +67,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(', ')}`));
         }

package/commands/llm-setup.js

@@ -861,10 +861,11 @@ AI Workflow:
 1. mcp2_list_available_resources({ category: "themes" })
    → Show: claude, amber-minimal, etc.
    
-2. Themes are set via: grg init --theme <name>
-   → Run: grg init --theme claude
+2. mcp2_install_resource({ resource: "claude" })
+   → Returns command: "grg add theme claude"
    
-3. Update src/styles.css import if needed
+3. Run the command via run_command tool
+   → Theme is downloaded and styles.css is updated automatically
 \`\`\`
 
 ### Example 4: User Wants a Form Component

package/config/.catalog-cache.json

@@ -0,0 +1 @@
+{"timestamp":1765262345803,"data":{"themes":[{"name":"amber-minimal","title":"Amber Minimal","description":"Warm amber accents","file":"amber-minimal.css","tags":["minimal","warm","amber","orange"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/amber-minimal.css","defaultOutput":"src/themes/amber-minimal.css"},{"name":"claude","title":"Claude","description":"Claude-inspired warm tones","file":"claude.css","tags":["warm","orange","brown","claude"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/claude.css","defaultOutput":"src/themes/claude.css"},{"name":"clean-slate","title":"Clean Slate","description":"Minimal grayscale palette","file":"clean-slate.css","tags":["minimal","grayscale","neutral","clean"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/clean-slate.css","defaultOutput":"src/themes/clean-slate.css"},{"name":"grg-theme","title":"Grg Theme","description":"Default theme with purple/orange accents","file":"grg-theme.css","tags":["default","purple","orange","colorful"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/grg-theme.css","defaultOutput":"src/themes/grg-theme.css"},{"name":"mocks","title":"Mocks","description":"Theme for mockups and prototypes","file":"mocks.css","tags":["mockup","prototype","design"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/mocks.css","defaultOutput":"src/themes/mocks.css"},{"name":"modern-minimal","title":"Modern Minimal","description":"Contemporary minimal design","file":"modern-minimal.css","tags":["minimal","modern","contemporary","clean"],"features":["dark-mode","tailwind-v4","spartan-ng","oklch"],"path":"templates/ui/themes/modern-minimal.css","defaultOutput":"src/themes/modern-minimal.css"}],"components":[{"name":"file-upload","title":"File Upload","description":"Drag and drop file upload component","tags":["file","upload","form","drag-drop"],"dependencies":["@spartan-ng/helm/button"],"path":"templates/ui/components/file-upload","defaultOutput":"src/app/components/file-upload"}],"blocks":[{"name":"auth","title":"Auth","description":"Authentication pages (login, signup, forgot password)","tags":["auth","login","signup","authentication","form"],"dependencies":["@spartan-ng/helm/button","@spartan-ng/helm/card","@spartan-ng/helm/form-field"],"files":[{"id":"forgot-password","file":"forgot-password.component.ts","title":"Forgot Password","description":"Forgot Password"},{"id":"login","file":"login.component.ts","title":"Login","description":"Login"},{"id":"register","file":"register.component.ts","title":"Register","description":"Register"}],"path":"templates/ui/blocks/auth","defaultOutput":"src/app/blocks/auth"},{"name":"settings","title":"Settings","description":"Settings pages: profile, notifications, security, danger zone","tags":["settings","preferences","account","profile","security"],"dependencies":["@spartan-ng/helm/button","@spartan-ng/helm/card","@spartan-ng/helm/form-field","@spartan-ng/helm/switch"],"files":[{"id":"danger-zone","file":"danger-zone.component.ts","title":"Danger Zone","description":"Danger Zone"},{"id":"notification","file":"notification-settings.component.ts","title":"Notification Settings","description":"Notification Settings"},{"id":"profile","file":"profile-settings.component.ts","title":"Profile Settings","description":"Profile Settings"},{"id":"security","file":"security-settings.component.ts","title":"Security Settings","description":"Security Settings"}],"path":"templates/ui/blocks/settings","defaultOutput":"src/app/blocks/settings"},{"name":"shell","title":"Shell","description":"Application shell layouts: sidebar, topnav, collapsible - each with optional footer variant","tags":["shell","layout","sidebar","header","footer","navigation","topnav","collapsible"],"dependencies":["@spartan-ng/helm/button","@spartan-ng/helm/icon","@spartan-ng/helm/dropdown-menu"],"files":[{"id":"collapsible-footer","file":"collapsible-shell-footer.component.ts","title":"Collapsible Shell Footer","description":"Collapsible Shell Footer"},{"id":"collapsible","file":"collapsible-shell.component.ts","title":"Collapsible Shell","description":"Collapsible Shell"},{"id":"sidebar-footer","file":"sidebar-shell-footer.component.ts","title":"Sidebar Shell Footer","description":"Sidebar Shell Footer"},{"id":"sidebar","file":"sidebar-shell.component.ts","title":"Sidebar Shell","description":"Sidebar Shell"},{"id":"topnav-footer","file":"topnav-shell-footer.component.ts","title":"Topnav Shell Footer","description":"Topnav Shell Footer"},{"id":"topnav","file":"topnav-shell.component.ts","title":"Topnav Shell","description":"Topnav Shell"}],"path":"templates/ui/blocks/shell","defaultOutput":"src/app/blocks/shell"}]}}

package/package.json

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

package/scripts/generate-resources.js

@@ -314,11 +314,21 @@ module.exports = { RESOURCES, REPO };
           description: 'Initialize GRG Kit in current Angular project',
           themeFlag: '--theme'
         },
+        addTheme: {
+          usage: 'grg add theme <themeName>',
+          description: 'Add or switch theme in existing project',
+          validThemes: catalogThemes.map(t => t.name)
+        },
         addBlock: {
           usage: 'grg add block <blockName> [fileIds...]',
           description: 'Add blocks to your project',
           validBlocks: catalogBlocks.map(b => b.name)
         },
+        addComponent: {
+          usage: 'grg add component <componentName>',
+          description: 'Add GRG components to your project',
+          validComponents: catalogComponents.map(c => c.name)
+        },
         list: {
           usage: 'grg list [category]',
           description: 'List available resources'