grg-kit-cli 0.6.2 → 0.6.4

package/README.md

@@ -21,9 +21,15 @@ grg init
 # Or with a specific theme
 grg init --theme claude
 
-# Add blocks
-grg add block --auth
-grg add block --shell
+# Add blocks (all files)
+grg add block auth
+grg add block shell
+
+# Add specific files from a block
+grg add block auth login
+grg add block shell sidebar
+
+# Add all blocks
 grg add block --all
 
 # List available resources
@@ -73,24 +79,32 @@ Examples:
 
 ### `grg add block`
 
-Add blocks to your project.
+Add blocks or specific block files to your project.
 
 ```bash
-grg add block [options]
+grg add block <blockName> [fileIds...]
 
 Options:
-  --all       Add all blocks
-  --auth      Add authentication block (login, signup, forgot password)
-  --shell     Add app shell block (sidebar, header, content area)
-  --settings  Add settings block (settings page with sidebar navigation)
-  -o, --output <path>  Custom output directory
+  --all                  Add all blocks
+  -o, --output <path>    Custom output directory
 
 Examples:
-  grg add block --auth
-  grg add block --shell --settings
-  grg add block --all
+  grg add block auth                    # All auth files
+  grg add block auth login              # Only login
+  grg add block auth login register     # Login and register
+  grg add block shell sidebar           # Only sidebar shell
+  grg add block shell topnav topnav-footer  # Topnav variants
+  grg add block --all                   # All blocks
 ```
 
+**Available blocks and files:**
+
+| Block | Files |
+|-------|-------|
+| `auth` | `login`, `register`, `forgot-password` |
+| `shell` | `sidebar`, `sidebar-footer`, `topnav`, `topnav-footer`, `collapsible`, `collapsible-footer` |
+| `settings` | `profile`, `security`, `notification`, `danger-zone` |
+
 ### `grg list [category]`
 
 List available blocks and themes.
@@ -181,11 +195,14 @@ cd my-app
 grg init                        # Default theme
 grg init --theme claude         # Custom theme
 
-# Add blocks
-grg add block --auth            # Auth pages
-grg add block --shell           # App shell
-grg add block --settings        # Settings page
-grg add block --auth --shell    # Multiple blocks
+# Add blocks (all files)
+grg add block auth              # All auth files
+grg add block shell             # All shell layouts
+grg add block settings          # All settings pages
+
+# Add specific files
+grg add block auth login        # Just login
+grg add block shell sidebar     # Just sidebar shell
 grg add block --all             # All blocks
 
 # List resources

package/bin/grg.js

@@ -24,12 +24,9 @@ program
 const addCommand = program.command('add').description('Add resources to your project');
 
 addCommand
-  .command('block')
-  .description('Add blocks to your project')
+  .command('block [blockName] [fileIds...]')
+  .description('Add blocks to your project (e.g., grg add block auth login)')
   .option('--all', 'Add all blocks')
-  .option('--auth', 'Add authentication block (login, signup, forgot password)')
-  .option('--shell', 'Add app shell block (sidebar, header, content area)')
-  .option('--settings', 'Add settings block (settings page with sidebar navigation)')
   .option('-o, --output <path>', 'Custom output directory')
   .action(add);
 

package/commands/add.js

@@ -1,59 +1,81 @@
 const degit = require('degit');
 const chalk = require('chalk');
 const ora = require('ora');
+const fs = require('fs').promises;
+const path = require('path');
+const https = require('https');
 const { fetchCatalog, REPO } = require('../config/catalog-fetcher');
 
 /**
- * Add command - downloads blocks
- * Format: grg add block [options]
+ * Add command - downloads blocks or specific block files
+ * Format: grg add block <blockName> [fileIds...]
  * Examples:
- *   grg add block --auth
- *   grg add block --shell --settings
- *   grg add block --all
+ *   grg add block auth                    # All auth files
+ *   grg add block auth login register     # Only login and register
+ *   grg add block shell sidebar           # Only sidebar shell
+ *   grg add block --all                   # All blocks with all files
  */
-async function add(options) {
+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();
 
-  // Determine which blocks to add
-  const blocksToAdd = [];
-  
+  // Handle --all flag (download everything)
   if (options.all) {
-    blocksToAdd.push(...RESOURCES.blocks);
-  } else {
-    if (options.auth) {
-      const block = RESOURCES.blocks.find(b => b.name === 'auth');
-      if (block) blocksToAdd.push(block);
-    }
-    if (options.shell) {
-      const block = RESOURCES.blocks.find(b => b.name === 'shell');
-      if (block) blocksToAdd.push(block);
-    }
-    if (options.settings) {
-      const block = RESOURCES.blocks.find(b => b.name === 'settings');
-      if (block) blocksToAdd.push(block);
+    console.log(chalk.bold.cyan(`\n📦 Adding all blocks\n`));
+    
+    for (const block of RESOURCES.blocks) {
+      await downloadBlock(block, null, options.output);
     }
+    
+    console.log(chalk.bold.green('✨ Done!'));
+    return;
   }
 
-  if (blocksToAdd.length === 0) {
-    console.log(chalk.yellow('\nNo blocks specified. Use one of the following options:\n'));
-    console.log(chalk.cyan('  grg add block --all'), chalk.gray('       Add all blocks'));
-    console.log(chalk.cyan('  grg add block --auth'), chalk.gray('      Add authentication block'));
-    console.log(chalk.cyan('  grg add block --shell'), chalk.gray('     Add app shell block'));
-    console.log(chalk.cyan('  grg add block --settings'), chalk.gray('  Add settings block'));
-    console.log(chalk.gray('\nRun'), chalk.cyan('grg list blocks'), chalk.gray('for more details'));
+  // Validate block name
+  if (!blockName) {
+    showUsage(RESOURCES);
     process.exit(1);
   }
 
-  console.log(chalk.bold.cyan(`\n📦 Adding ${blocksToAdd.length} block(s)\n`));
+  const block = RESOURCES.blocks.find(b => b.name === blockName);
+  if (!block) {
+    console.error(chalk.red(`\nError: Block "${blockName}" not found`));
+    console.log(chalk.yellow('\nAvailable blocks:'));
+    RESOURCES.blocks.forEach(b => {
+      console.log(chalk.cyan(`  ${b.name}`), chalk.gray(`- ${b.description}`));
+    });
+    process.exit(1);
+  }
 
-  const downloadSpinner = ora();
+  // Validate file IDs if provided
+  if (fileIds && fileIds.length > 0) {
+    const invalidFiles = fileIds.filter(id => !block.files?.find(f => f.id === id));
+    if (invalidFiles.length > 0) {
+      console.error(chalk.red(`\nError: Invalid file(s) for ${blockName}: ${invalidFiles.join(', ')}`));
+      console.log(chalk.yellow('\nAvailable files:'));
+      block.files?.forEach(f => {
+        console.log(chalk.cyan(`  ${f.id}`), chalk.gray(`- ${f.title}`));
+      });
+      process.exit(1);
+    }
+  }
+
+  await downloadBlock(block, fileIds, options.output);
+  console.log(chalk.bold.green('✨ Done!'));
+}
 
-  for (const block of blocksToAdd) {
-    const outputPath = options.output 
-      ? `${options.output}/${block.name}` 
+/**
+ * Download a block (all files or specific files)
+ */
+async function downloadBlock(block, fileIds, customOutput) {
+  const downloadSpinner = ora();
+  
+  // If no specific files requested, or block has no files array, download entire block
+  if (!fileIds || fileIds.length === 0 || !block.files || block.files.length === 0) {
+    const outputPath = customOutput 
+      ? `${customOutput}/${block.name}` 
       : block.defaultOutput;
 
     downloadSpinner.start(`Downloading ${block.title}...`);
@@ -70,7 +92,6 @@ async function add(options) {
       downloadSpinner.succeed(chalk.green(`✓ ${block.title} added`));
       console.log(chalk.gray(`  Location: ${outputPath}`));
       
-      // Show dependencies if any
       if (block.dependencies && block.dependencies.length > 0) {
         console.log(chalk.gray(`  Dependencies: ${block.dependencies.join(', ')}`));
       }
@@ -80,9 +101,99 @@ async function add(options) {
       downloadSpinner.fail(chalk.red(`Failed to download ${block.title}`));
       console.error(chalk.red(error.message));
     }
+    return;
   }
 
-  console.log(chalk.bold.green('✨ Done!'));
+  // Download specific files
+  const filesToDownload = block.files.filter(f => fileIds.includes(f.id));
+  const outputDir = customOutput || block.defaultOutput;
+
+  console.log(chalk.bold.cyan(`\n📦 Adding ${filesToDownload.length} file(s) from ${block.title}\n`));
+
+  // Ensure output directory exists
+  await fs.mkdir(outputDir, { recursive: true });
+
+  for (const file of filesToDownload) {
+    downloadSpinner.start(`Downloading ${file.title}...`);
+
+    try {
+      const fileUrl = `https://raw.githubusercontent.com/${REPO}/main/${block.path}/${file.file}`;
+      const outputPath = path.join(outputDir, file.file);
+      
+      await downloadFile(fileUrl, outputPath);
+
+      downloadSpinner.succeed(chalk.green(`✓ ${file.title} added`));
+      console.log(chalk.gray(`  Location: ${outputPath}`));
+
+    } catch (error) {
+      downloadSpinner.fail(chalk.red(`Failed to download ${file.title}`));
+      console.error(chalk.red(error.message));
+    }
+  }
+
+  if (block.dependencies && block.dependencies.length > 0) {
+    console.log(chalk.gray(`\nDependencies: ${block.dependencies.join(', ')}`));
+  }
+  console.log();
+}
+
+/**
+ * Download a single file from URL
+ */
+function downloadFile(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);
+  });
+}
+
+function handleResponse(res, outputPath, resolve, reject) {
+  if (res.statusCode !== 200) {
+    reject(new Error(`HTTP ${res.statusCode}`));
+    return;
+  }
+
+  let data = '';
+  res.on('data', chunk => data += chunk);
+  res.on('end', async () => {
+    try {
+      await fs.writeFile(outputPath, data, 'utf-8');
+      resolve();
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
+
+/**
+ * Show usage help
+ */
+function showUsage(RESOURCES) {
+  console.log(chalk.yellow('\nUsage: grg add block <blockName> [fileIds...]\n'));
+  console.log(chalk.bold('Examples:'));
+  console.log(chalk.cyan('  grg add block auth'), chalk.gray('                 # All auth files'));
+  console.log(chalk.cyan('  grg add block auth login'), chalk.gray('           # Only login'));
+  console.log(chalk.cyan('  grg add block auth login register'), chalk.gray('  # Login and register'));
+  console.log(chalk.cyan('  grg add block shell sidebar'), chalk.gray('        # Only sidebar shell'));
+  console.log(chalk.cyan('  grg add block --all'), chalk.gray('                # All blocks'));
+  
+  console.log(chalk.bold('\nAvailable blocks:'));
+  RESOURCES.blocks.forEach(b => {
+    console.log(chalk.cyan(`  ${b.name}`), chalk.gray(`- ${b.description}`));
+    if (b.files && b.files.length > 0) {
+      console.log(chalk.gray(`    Files: ${b.files.map(f => f.id).join(', ')}`));
+    }
+  });
+  
+  console.log(chalk.gray('\nRun'), chalk.cyan('grg list blocks'), chalk.gray('for more details'));
 }
 
 module.exports = { add };

package/config/.catalog-cache.json

@@ -0,0 +1 @@
+{"timestamp":1765202627293,"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"},{"name":"stepper","title":"Stepper","description":"Multi-step form component with progress indicator","tags":["form","wizard","multi-step","progress"],"dependencies":["@spartan-ng/helm/button","@spartan-ng/helm/card"],"path":"templates/ui/components/stepper","defaultOutput":"src/app/components/stepper"}],"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/config/catalog-fetcher.js

@@ -124,7 +124,8 @@ async function fetchCatalog(options = {}) {
       blocks: catalog.blocks.map(b => ({
         ...b,
         path: `templates/ui/blocks/${b.name}`,
-        defaultOutput: `src/app/blocks/${b.name}`
+        defaultOutput: `src/app/blocks/${b.name}`,
+        files: b.files || []
       }))
     };
 

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "grg-kit-cli",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "CLI tool for pulling GRG Kit resources into your Angular project",
   "main": "index.js",
   "bin": {
     "grg": "./bin/grg.js"
   },
   "scripts": {
-    "generate": "node scripts/generate-resources.js",
-    "prepublishOnly": "npm run generate",
+    "catalog": "node scripts/generate-resources.js",
+    "prepublishOnly": "npm run catalog",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [

package/scripts/generate-resources.js

@@ -298,9 +298,33 @@ module.exports = { RESOURCES, REPO };
   
   const totalFiles = catalogBlocks.reduce((sum, b) => sum + (b.files?.length || 0), 0);
   
+  // Read CLI version from package.json
+  const cliPackage = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json'), 'utf-8'));
+  
   const catalog = {
-    version: '1.0.0',
+    _generated: 'AUTO-GENERATED FILE - DO NOT EDIT MANUALLY. Run: pnpm catalog',
+    version: '1.0.1',
     lastUpdated: new Date().toISOString().split('T')[0],
+    cli: {
+      name: 'grg',
+      version: cliPackage.version,
+      commands: {
+        init: {
+          usage: 'grg init [--theme <name>]',
+          description: 'Initialize GRG Kit in current Angular project',
+          themeFlag: '--theme'
+        },
+        addBlock: {
+          usage: 'grg add block <blockName> [fileIds...]',
+          description: 'Add blocks to your project',
+          validBlocks: catalogBlocks.map(b => b.name)
+        },
+        list: {
+          usage: 'grg list [category]',
+          description: 'List available resources'
+        }
+      }
+    },
     themes: catalogThemes,
     components: catalogComponents,
     blocks: catalogBlocks