@gilav21/shadcn-angular 0.0.11 → 0.0.12

package/dist/commands/add.js

@@ -6,6 +6,7 @@ import chalk from 'chalk';
 import ora from 'ora';
 import { getConfig } from '../utils/config.js';
 import { registry } from '../registry/index.js';
+import { installPackages } from '../utils/package-manager.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 // Base URL for the component registry (GitHub raw content)
@@ -231,6 +232,26 @@ export async function add(components, options) {
         else {
             spinner.info('No new components installed.');
         }
+        if (finalComponents.length > 0) {
+            const npmDependencies = new Set();
+            for (const name of finalComponents) {
+                const component = registry[name];
+                if (component.npmDependencies) {
+                    component.npmDependencies.forEach(dep => npmDependencies.add(dep));
+                }
+            }
+            if (npmDependencies.size > 0) {
+                const depSpinner = ora('Installing dependencies...').start();
+                try {
+                    await installPackages(Array.from(npmDependencies), { cwd });
+                    depSpinner.succeed('Dependencies installed.');
+                }
+                catch (e) {
+                    depSpinner.fail('Failed to install dependencies.');
+                    console.error(e);
+                }
+            }
+        }
         if (componentsToSkip.length > 0) {
             console.log('\n' + chalk.dim('Components skipped (up to date):'));
             componentsToSkip.forEach(name => {

package/dist/registry/index.d.ts

@@ -2,6 +2,7 @@ export interface ComponentDefinition {
     name: string;
     files: string[];
     dependencies?: string[];
+    npmDependencies?: string[];
 }
 export type ComponentName = keyof typeof registry;
 export declare const registry: Record<string, ComponentDefinition>;

package/dist/registry/index.js

@@ -89,6 +89,29 @@ export const registry = {
         files: ['date-picker.component.ts'],
         dependencies: ['calendar'],
     },
+    chat: {
+        name: 'chat',
+        files: ['chat.component.ts'],
+        dependencies: ['avatar', 'button', 'textarea', 'scroll-area'],
+    },
+    'streaming-text': {
+        name: 'streaming-text',
+        files: ['streaming-text.component.ts'],
+    },
+    sparkles: {
+        name: 'sparkles',
+        files: ['sparkles.component.ts'],
+        dependencies: ['button'],
+    },
+    'code-block': {
+        name: 'code-block',
+        files: ['code-block.component.ts'],
+        dependencies: ['button', 'scroll-area'],
+    },
+    'text-reveal': {
+        name: 'text-reveal',
+        files: ['text-reveal.component.ts'],
+    },
     'data-table': {
         name: 'data-table',
         files: [
@@ -217,6 +240,7 @@ export const registry = {
     sidebar: {
         name: 'sidebar',
         files: ['sidebar.component.ts'],
+        dependencies: ['scroll-area', 'tooltip'],
     },
     skeleton: {
         name: 'skeleton',

package/dist/utils/package-manager.d.ts

@@ -0,0 +1,6 @@
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
+export declare function getPackageManager(cwd: string): Promise<PackageManager>;
+export declare function installPackages(packages: string[], options: {
+    cwd: string;
+    dev?: boolean;
+}): Promise<void>;

package/dist/utils/package-manager.js

@@ -0,0 +1,49 @@
+import { execa } from 'execa';
+import fs from 'fs-extra';
+import path from 'path';
+export async function getPackageManager(cwd) {
+    const userAgent = process.env['npm_config_user_agent'];
+    if (userAgent) {
+        if (userAgent.startsWith('yarn'))
+            return 'yarn';
+        if (userAgent.startsWith('pnpm'))
+            return 'pnpm';
+        if (userAgent.startsWith('bun'))
+            return 'bun';
+        return 'npm';
+    }
+    // Check for lock files
+    if (await fs.pathExists(path.join(cwd, 'yarn.lock')))
+        return 'yarn';
+    if (await fs.pathExists(path.join(cwd, 'pnpm-lock.yaml')))
+        return 'pnpm';
+    if (await fs.pathExists(path.join(cwd, 'bun.lockb')))
+        return 'bun';
+    return 'npm';
+}
+export async function installPackages(packages, options) {
+    const packageManager = await getPackageManager(options.cwd);
+    const args = [];
+    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') {
+        args.push('add');
+        if (options.dev)
+            args.push('-D');
+    }
+    else if (packageManager === 'bun') {
+        args.push('add');
+        if (options.dev)
+            args.push('-d');
+    }
+    args.push(...packages);
+    await execa(packageManager, args, { cwd: options.cwd });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gilav21/shadcn-angular",
-    "version": "0.0.11",
+    "version": "0.0.12",
     "description": "CLI for adding shadcn-angular components to your project",
     "bin": {
         "shadcn-angular": "./dist/index.js"
@@ -32,4 +32,4 @@
         "@types/prompts": "^2.4.9",
         "typescript": "^5.5.0"
     }
-}
+}

package/src/commands/add.ts

@@ -6,6 +6,7 @@ import chalk from 'chalk';
 import ora from 'ora';
 import { getConfig } from '../utils/config.js';
 import { registry, type ComponentName } from '../registry/index.js';
+import { installPackages } from '../utils/package-manager.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -264,6 +265,27 @@ export async function add(components: string[], options: AddOptions) {
             spinner.info('No new components installed.');
         }
 
+        if (finalComponents.length > 0) {
+            const npmDependencies = new Set<string>();
+            for (const name of finalComponents) {
+                const component = registry[name];
+                if (component.npmDependencies) {
+                    component.npmDependencies.forEach(dep => npmDependencies.add(dep));
+                }
+            }
+
+            if (npmDependencies.size > 0) {
+                const depSpinner = ora('Installing dependencies...').start();
+                try {
+                    await installPackages(Array.from(npmDependencies), { cwd });
+                    depSpinner.succeed('Dependencies installed.');
+                } catch (e) {
+                    depSpinner.fail('Failed to install dependencies.');
+                    console.error(e);
+                }
+            }
+        }
+
         if (componentsToSkip.length > 0) {
             console.log('\n' + chalk.dim('Components skipped (up to date):'));
             componentsToSkip.forEach(name => {

package/src/registry/index.ts

@@ -5,6 +5,7 @@ export interface ComponentDefinition {
   name: string;
   files: string[]; // Relative paths to component files
   dependencies?: string[]; // Other components this depends on
+  npmDependencies?: string[]; // NPM packages this depends on
 }
 
 export type ComponentName = keyof typeof registry;
@@ -98,6 +99,29 @@ export const registry: Record<string, ComponentDefinition> = {
     files: ['date-picker.component.ts'],
     dependencies: ['calendar'],
   },
+  chat: {
+    name: 'chat',
+    files: ['chat.component.ts'],
+    dependencies: ['avatar', 'button', 'textarea', 'scroll-area'],
+  },
+  'streaming-text': {
+    name: 'streaming-text',
+    files: ['streaming-text.component.ts'],
+  },
+  sparkles: {
+    name: 'sparkles',
+    files: ['sparkles.component.ts'],
+    dependencies: ['button'],
+  },
+  'code-block': {
+    name: 'code-block',
+    files: ['code-block.component.ts'],
+    dependencies: ['button', 'scroll-area'],
+  },
+  'text-reveal': {
+    name: 'text-reveal',
+    files: ['text-reveal.component.ts'],
+  },
   'data-table': {
     name: 'data-table',
     files: [
@@ -137,6 +161,7 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'field',
     files: ['field.component.ts'],
   },
+
   'file-upload': {
     name: 'file-upload',
     files: ['file-upload.component.ts'],
@@ -226,6 +251,7 @@ export const registry: Record<string, ComponentDefinition> = {
   sidebar: {
     name: 'sidebar',
     files: ['sidebar.component.ts'],
+    dependencies: ['scroll-area', 'tooltip'],
   },
   skeleton: {
     name: 'skeleton',

package/src/utils/package-manager.ts

@@ -0,0 +1,50 @@
+import { execa } from 'execa';
+import fs from 'fs-extra';
+import path from 'path';
+
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
+
+export async function getPackageManager(cwd: string): Promise<PackageManager> {
+    const userAgent = process.env['npm_config_user_agent'];
+
+    if (userAgent) {
+        if (userAgent.startsWith('yarn')) return 'yarn';
+        if (userAgent.startsWith('pnpm')) return 'pnpm';
+        if (userAgent.startsWith('bun')) return 'bun';
+        return 'npm';
+    }
+
+    // Check for lock files
+    if (await fs.pathExists(path.join(cwd, 'yarn.lock'))) return 'yarn';
+    if (await fs.pathExists(path.join(cwd, 'pnpm-lock.yaml'))) return 'pnpm';
+    if (await fs.pathExists(path.join(cwd, 'bun.lockb'))) return 'bun';
+
+    return 'npm';
+}
+
+export async function installPackages(
+    packages: string[],
+    options: { cwd: string; dev?: boolean }
+) {
+    const packageManager = await getPackageManager(options.cwd);
+
+    const args: string[] = [];
+
+    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') {
+        args.push('add');
+        if (options.dev) args.push('-D');
+    } else if (packageManager === 'bun') {
+        args.push('add');
+        if (options.dev) args.push('-d');
+    }
+
+    args.push(...packages);
+
+    await execa(packageManager, args, { cwd: options.cwd });
+}