@gilav21/shadcn-angular 0.0.19 → 0.0.21

package/src/commands/help.ts

@@ -0,0 +1,131 @@
+import chalk from 'chalk';
+import { registry } from '../registry/index.js';
+
+type Category = 'UI' | 'Charts' | 'Layout / Page Building' | 'Animation' | 'Kanban';
+
+const CATEGORY_ORDER: readonly Category[] = ['UI', 'Charts', 'Layout / Page Building', 'Animation', 'Kanban'];
+
+const ANIMATION_COMPONENTS = new Set([
+  'gradient-text', 'flip-text', 'meteors', 'shine-border', 'scroll-progress',
+  'blur-fade', 'ripple', 'marquee', 'word-rotate', 'morphing-text',
+  'typing-animation', 'wobble-card', 'magnetic', 'orbit', 'stagger-children',
+  'particles', 'confetti', 'number-ticker', 'text-reveal', 'streaming-text', 'sparkles',
+]);
+
+const KANBAN_COMPONENTS = new Set(['kanban']);
+
+const LAYOUT_COMPONENTS = new Set(['bento-grid', 'page-builder']);
+
+function categorize(name: string): Category {
+  const def = registry[name];
+  if (!def) return 'UI';
+
+  const hasChartFile = def.files.some(f => f.startsWith('charts/'));
+  if (hasChartFile) return 'Charts';
+
+  if (LAYOUT_COMPONENTS.has(name)) return 'Layout / Page Building';
+  if (ANIMATION_COMPONENTS.has(name)) return 'Animation';
+  if (KANBAN_COMPONENTS.has(name)) return 'Kanban';
+
+  return 'UI';
+}
+
+function buildComponentsByCategory(): Map<Category, readonly string[]> {
+  const groups = new Map<Category, string[]>();
+
+  for (const cat of CATEGORY_ORDER) {
+    groups.set(cat, []);
+  }
+
+  for (const name of Object.keys(registry)) {
+    const cat = categorize(name);
+    const list = groups.get(cat);
+    if (list) list.push(name);
+  }
+
+  for (const list of groups.values()) {
+    list.sort();
+  }
+
+  return groups;
+}
+
+function formatComponentList(names: readonly string[], columns = 4): string {
+  const colWidth = 26;
+  const lines: string[] = [];
+
+  for (let i = 0; i < names.length; i += columns) {
+    const row = names.slice(i, i + columns);
+    lines.push('  ' + row.map(n => n.padEnd(colWidth)).join(''));
+  }
+
+  return lines.join('\n');
+}
+
+function buildCommandsSection(): string[] {
+  const branchDefault = chalk.gray('(default: master)');
+
+  return [
+    chalk.bold('Commands'),
+    '',
+    '  ' + chalk.cyan('init') + '   Initialize shadcn-angular in your project',
+    '    ' + chalk.gray('-y, --yes') + '            Skip confirmation prompt',
+    '    ' + chalk.gray('-d, --defaults') + '       Use default configuration',
+    '    ' + chalk.gray('-b, --branch') + ' <branch> GitHub branch to fetch from ' + branchDefault,
+    '',
+    '  ' + chalk.cyan('add') + '    Add component(s) to your project',
+    '    ' + chalk.gray('[components...]') + '       One or more component names',
+    '    ' + chalk.gray('-y, --yes') + '            Skip confirmation prompt',
+    '    ' + chalk.gray('-o, --overwrite') + '      Overwrite existing files',
+    '    ' + chalk.gray('-a, --all') + '            Add all available components',
+    '    ' + chalk.gray('-p, --path') + ' <path>     Custom install path',
+    '    ' + chalk.gray('--remote') + '             Force remote fetch from GitHub registry',
+    '    ' + chalk.gray('-b, --branch') + ' <branch> GitHub branch to fetch from ' + branchDefault,
+    '',
+    '  ' + chalk.cyan('help') + '   Show this reference',
+    '',
+  ];
+}
+
+function buildOptionalDepsSection(): string[] {
+  return [
+    chalk.bold('Optional Dependencies'),
+    '',
+    '  Some components offer companion packages during installation.',
+    '  With ' + chalk.cyan('--yes') + ' they are skipped; with ' + chalk.cyan('--all') + ' they are included automatically.',
+    '',
+  ];
+}
+
+function buildComponentsSection(): string[] {
+  const groups = buildComponentsByCategory();
+  const lines: string[] = [
+    chalk.bold('Available Components'),
+    '',
+  ];
+
+  for (const [category, names] of groups) {
+    if (names.length === 0) continue;
+    const countLabel = chalk.gray('(' + String(names.length) + ')');
+    lines.push(
+      '  ' + chalk.yellow(category) + ' ' + countLabel,
+      formatComponentList(names),
+      '',
+    );
+  }
+
+  return lines;
+}
+
+export function help(): void {
+  const output = [
+    '',
+    chalk.bold.underline('shadcn-angular CLI'),
+    '',
+    ...buildCommandsSection(),
+    ...buildOptionalDepsSection(),
+    ...buildComponentsSection(),
+  ];
+
+  console.log(output.join('\n'));
+}

package/src/commands/init.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import prompts from 'prompts';
 import chalk from 'chalk';
 import ora from 'ora';
@@ -10,7 +10,9 @@ import { getUtilsTemplate } from '../templates/utils.js';
 import { installPackages } from '../utils/package-manager.js';
 import { writeShortcutRegistryIndex } from '../utils/shortcut-registry.js';
 
-const LIB_REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/lib';
+function getLibRegistryBaseUrl(branch: string) {
+    return `https://raw.githubusercontent.com/gilav21/shadcn-angular/${branch}/packages/components/lib`;
+}
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -22,7 +24,7 @@ function getLocalLibDir(): string | null {
     return null;
 }
 
-async function fetchLibFileContent(file: string): Promise<string> {
+async function fetchLibFileContent(file: string, branch: string): Promise<string> {
     const localLibDir = getLocalLibDir();
     if (localLibDir) {
         const localPath = path.join(localLibDir, file);
@@ -31,7 +33,7 @@ async function fetchLibFileContent(file: string): Promise<string> {
         }
     }
 
-    const url = `${LIB_REGISTRY_BASE_URL}/${file}`;
+    const url = `${getLibRegistryBaseUrl(branch)}/${file}`;
     const response = await fetch(url);
     if (!response.ok) {
         throw new Error(`Failed to fetch library file from ${url}: ${response.statusText}`);
@@ -42,6 +44,7 @@ async function fetchLibFileContent(file: string): Promise<string> {
 interface InitOptions {
     yes?: boolean;
     defaults?: boolean;
+    branch: string;
 }
 
 function resolveProjectPath(cwd: string, inputPath: string): string {
@@ -95,7 +98,6 @@ export async function init(options: InitOptions) {
 
     if (options.defaults || options.yes) {
         config = getDefaultConfig();
-        createShortcutRegistry = true;
     } else {
         const THEME_COLORS: Record<string, string> = {
             zinc: '#71717a',
@@ -227,7 +229,7 @@ export async function init(options: InitOptions) {
         spinner.text = 'Created utils.ts';
 
         const shortcutServicePath = path.join(libDir, 'shortcut-binding.service.ts');
-        const shortcutServiceContent = await fetchLibFileContent('shortcut-binding.service.ts');
+        const shortcutServiceContent = await fetchLibFileContent('shortcut-binding.service.ts', options.branch);
         await fs.writeFile(shortcutServicePath, shortcutServiceContent);
         spinner.text = 'Created shortcut-binding.service.ts';
 

package/src/index.ts

@@ -2,6 +2,7 @@
 import { Command } from 'commander';
 import { init } from './commands/init.js';
 import { add } from './commands/add.js';
+import { help } from './commands/help.js';
 
 const program = new Command();
 
@@ -15,6 +16,7 @@ program
     .description('Initialize shadcn-angular in your project')
     .option('-y, --yes', 'Skip confirmation prompt')
     .option('-d, --defaults', 'Use default configuration')
+    .option('-b, --branch <branch>', 'GitHub branch to fetch components from', 'master')
     .action(init);
 
 program
@@ -26,6 +28,12 @@ program
     .option('-a, --all', 'Add all available components')
     .option('-p, --path <path>', 'The path to add the component to')
     .option('--remote', 'Force remote fetch from GitHub registry')
+    .option('-b, --branch <branch>', 'GitHub branch to fetch components from', 'master')
     .action(add);
 
+program
+    .command('help')
+    .description('Show detailed usage information')
+    .action(help);
+
 program.parse();

package/src/registry/index.ts

@@ -1,10 +1,17 @@
 // Component Registry - Defines available components and their file mappings
 // Actual component files are stored in packages/components/ui/
 
+export interface OptionalDependency {
+  readonly name: string;
+  readonly description: string;
+}
+
 export interface ComponentDefinition {
   name: string;
   files: string[]; // Relative paths to component files
+  peerFiles?: string[]; // Files to update only if they already exist in the user's project
   dependencies?: string[]; // Other components this depends on
+  optionalDependencies?: readonly OptionalDependency[]; // Companion components offered during install
   npmDependencies?: string[]; // NPM packages this depends on
   libFiles?: string[]; // Lib utility files this component requires (e.g. 'xlsx.ts')
   shortcutDefinitions?: {
@@ -143,8 +150,12 @@ export const registry: Record<string, ComponentDefinition> = {
       'data-table/data-table-column-header.component.ts',
       'data-table/data-table-pagination.component.ts',
       'data-table/data-table.types.ts',
+      'data-table/data-table.utils.ts',
       'data-table/index.ts',
     ],
+    peerFiles: [
+      'context-menu-integrations.ts',
+    ],
     dependencies: [
       'table',
       'input',
@@ -157,6 +168,9 @@ export const registry: Record<string, ComponentDefinition> = {
       'icon',
     ],
     libFiles: ['xlsx.ts'],
+    optionalDependencies: [
+      { name: 'context-menu', description: 'Enables right-click context menus on rows and headers' },
+    ],
   },
   dialog: {
     name: 'dialog',
@@ -354,6 +368,9 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'tree',
     files: ['tree.component.ts'],
     dependencies: ['icon'],
+    optionalDependencies: [
+      { name: 'context-menu', description: 'Enables right-click context menus on tree nodes' },
+    ],
   },
   'speed-dial': {
     name: 'speed-dial',

package/src/utils/config.ts

@@ -1,5 +1,5 @@
 import fs from 'fs-extra';
-import path from 'path';
+import path from 'node:path';
 
 export interface Config {
     $schema: string;

package/src/utils/package-manager.ts

@@ -1,6 +1,6 @@
 import { execa } from 'execa';
 import fs from 'fs-extra';
-import path from 'path';
+import path from 'node:path';
 
 export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
 
@@ -33,10 +33,7 @@ export async function installPackages(
     if (packageManager === 'npm') {
         args.push('install');
         if (options.dev) args.push('-D');
-    } else if (packageManager === 'yarn') {
-        args.push('add');
-        if (options.dev) args.push('-D');
-    } else if (packageManager === 'pnpm') {
+    } else if (packageManager === 'yarn' || packageManager === 'pnpm') {
         args.push('add');
         if (options.dev) args.push('-D');
     } else if (packageManager === 'bun') {

package/src/utils/shortcut-registry.ts

@@ -1,5 +1,5 @@
 import fs from 'fs-extra';
-import path from 'path';
+import path from 'node:path';
 import type { Config } from './config.js';
 
 export interface ShortcutRegistryEntry {