@gilav21/shadcn-angular 0.0.10 → 0.0.11

package/dist/commands/add.js

@@ -105,67 +105,139 @@ export async function add(components, options) {
     const targetDir = options.path
         ? path.join(cwd, options.path)
         : path.join(cwd, 'src/components/ui');
-    // Check for existing files
-    const existing = [];
+    // Check for existing files and diff
+    const componentsToInstall = [];
+    const componentsToSkip = [];
+    const conflictingComponents = [];
+    const contentCache = new Map();
+    const checkSpinner = ora('Checking for conflicts...').start();
     for (const name of allComponents) {
         const component = registry[name];
+        let hasChanges = false;
+        let isFullyPresent = true;
         for (const file of component.files) {
             const targetPath = path.join(targetDir, file);
             if (await fs.pathExists(targetPath)) {
-                existing.push(file);
+                const localContent = await fs.readFile(targetPath, 'utf-8');
+                try {
+                    let remoteContent = await fetchComponentContent(file, options);
+                    // Transform imports for comparison
+                    const utilsAlias = config.aliases.utils;
+                    remoteContent = remoteContent.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    const normalize = (str) => str.replace(/\s+/g, '').trim();
+                    if (normalize(localContent) !== normalize(remoteContent)) {
+                        hasChanges = true;
+                    }
+                    contentCache.set(file, remoteContent); // Cache for installation
+                }
+                catch (error) {
+                    // unexpected error fetching remote
+                    console.warn(`Could not fetch remote content for comparison: ${file}`);
+                    hasChanges = true; // Assume changed/unknown
+                }
+            }
+            else {
+                isFullyPresent = false;
             }
         }
+        if (isFullyPresent && !hasChanges) {
+            componentsToSkip.push(name);
+        }
+        else if (hasChanges) {
+            conflictingComponents.push(name);
+        }
+        else {
+            componentsToInstall.push(name);
+        }
     }
-    if (existing.length > 0 && !options.overwrite && !options.yes) {
-        const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
-            message: `The following files already exist: ${existing.join(', ')}. Overwrite?`,
-            initial: false,
-        });
-        if (!overwrite) {
-            console.log(chalk.dim('Installation cancelled.'));
-            return;
+    checkSpinner.stop();
+    let componentsToOverwrite = [];
+    if (conflictingComponents.length > 0) {
+        if (options.overwrite) {
+            componentsToOverwrite = conflictingComponents;
+        }
+        else if (options.yes) {
+            componentsToOverwrite = []; // Skip conflicts in non-interactive mode unless --overwrite
+        }
+        else {
+            console.log(chalk.yellow(`\n${conflictingComponents.length} component(s) have local changes or are different from remote.`));
+            const { selected } = await prompts({
+                type: 'multiselect',
+                name: 'selected',
+                message: 'Select components to OVERWRITE (Unselected will be skipped):',
+                choices: conflictingComponents.map(name => ({
+                    title: name,
+                    value: name,
+                })),
+                hint: '- Space to select, Enter to confirm',
+            });
+            componentsToOverwrite = selected || [];
         }
     }
+    // Final list of components to process
+    // We process:
+    // 1. componentsToInstall (Brand new or partial)
+    // 2. componentsToOverwrite (User selected)
+    // We SKIP:
+    // 1. componentsToSkip (Identical)
+    // 2. conflictingComponents NOT in componentsToOverwrite
+    const finalComponents = [...componentsToInstall, ...componentsToOverwrite];
+    if (finalComponents.length === 0 && componentsToSkip.length > 0) {
+        console.log(chalk.green(`\nAll components are up to date! (${componentsToSkip.length} skipped)`));
+        return;
+    }
+    if (finalComponents.length === 0) {
+        console.log(chalk.dim('\nNo components to install.'));
+        return;
+    }
     const spinner = ora('Installing components...').start();
     let successCount = 0;
     try {
         await fs.ensureDir(targetDir);
-        for (const name of allComponents) {
+        for (const name of finalComponents) {
             const component = registry[name];
             let componentSuccess = true;
             for (const file of component.files) {
                 const targetPath = path.join(targetDir, file);
                 try {
-                    let content = await fetchComponentContent(file, options);
-                    // Transform imports
-                    // Replace ../lib/utils (or similar relative paths) with the configured alias
-                    const utilsAlias = config.aliases.utils;
-                    content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    let content = contentCache.get(file);
+                    if (!content) {
+                        content = await fetchComponentContent(file, options);
+                        // Transform imports if not already transformed (cached is transformed)
+                        const utilsAlias = config.aliases.utils;
+                        content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    }
                     await fs.ensureDir(path.dirname(targetPath));
                     await fs.writeFile(targetPath, content);
-                    spinner.text = `Added ${file}`;
+                    // spinner.text = `Added ${file}`; // Too verbose?
                 }
                 catch (err) {
                     spinner.warn(`Could not add ${file}: ${err.message}`);
                     componentSuccess = false;
                 }
             }
-            if (componentSuccess)
+            if (componentSuccess) {
                 successCount++;
+                spinner.text = `Added ${name}`;
+            }
         }
         if (successCount > 0) {
-            spinner.succeed(chalk.green(`Added ${successCount} component(s)`));
+            spinner.succeed(chalk.green(`Success! Added ${successCount} component(s)`));
             console.log('\n' + chalk.dim('Components added:'));
-            allComponents.forEach(name => {
+            finalComponents.forEach(name => {
                 console.log(chalk.dim('  - ') + chalk.cyan(name));
             });
-            console.log('');
         }
         else {
-            spinner.fail(chalk.red('Failed to add any components.'));
+            spinner.info('No new components installed.');
+        }
+        if (componentsToSkip.length > 0) {
+            console.log('\n' + chalk.dim('Components skipped (up to date):'));
+            componentsToSkip.forEach(name => {
+                console.log(chalk.dim('  - ') + chalk.gray(name));
+            });
         }
+        console.log('');
     }
     catch (error) {
         spinner.fail('Failed to add components');

package/dist/commands/init.js

@@ -195,6 +195,35 @@ export async function init(options) {
             };
             await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
         }
+        // Configure app.config.ts with Lucide icons
+        spinner.text = 'Configuring icons in app.config.ts...';
+        const appConfigPath = path.join(cwd, 'src/app/app.config.ts');
+        if (await fs.pathExists(appConfigPath)) {
+            let appConfigContent = await fs.readFile(appConfigPath, 'utf-8');
+            // Add imports
+            if (!appConfigContent.includes('LucideAngularModule')) {
+                const iconImports = "import { LucideAngularModule, ArrowDown, ArrowUp, ChevronsUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-angular';";
+                appConfigContent = iconImports + '\n' + appConfigContent;
+            }
+            if (!appConfigContent.includes('importProvidersFrom')) {
+                appConfigContent = "import { importProvidersFrom } from '@angular/core';\n" + appConfigContent;
+            }
+            // Add provider
+            const providerCode = `
+    importProvidersFrom(LucideAngularModule.pick({ 
+      ArrowDown, 
+      ArrowUp, 
+      ChevronsUpDown, 
+      ChevronLeft, 
+      ChevronRight, 
+      ChevronsLeft, 
+      ChevronsRight 
+    }))`;
+            if (!appConfigContent.includes('LucideAngularModule.pick')) {
+                appConfigContent = appConfigContent.replace(/providers:\s*\[/, `providers: [${providerCode},`);
+                await fs.writeFile(appConfigPath, appConfigContent);
+            }
+        }
         spinner.succeed(chalk.green('Project initialized successfully!'));
         console.log('\n' + chalk.bold('Next steps:'));
         console.log(chalk.dim('  1. Add components: ') + chalk.cyan('npx @gilav21/shadcn-angular add button'));

package/dist/index.js

@@ -6,7 +6,7 @@ const program = new Command();
 program
     .name('shadcn-angular')
     .description('CLI for adding shadcn-angular components to your Angular project')
-    .version('0.0.8');
+    .version('0.0.10');
 program
     .command('init')
     .description('Initialize shadcn-angular in your project')

package/dist/registry/index.js

@@ -89,6 +89,25 @@ export const registry = {
         files: ['date-picker.component.ts'],
         dependencies: ['calendar'],
     },
+    'data-table': {
+        name: 'data-table',
+        files: [
+            'data-table/data-table.component.ts',
+            'data-table/data-table-column-header.component.ts',
+            'data-table/data-table-pagination.component.ts',
+            'data-table/data-table.types.ts',
+            'data-table/cell-host.directive.ts',
+        ],
+        dependencies: [
+            'table',
+            'input',
+            'button',
+            'checkbox',
+            'select',
+            'pagination',
+            'popover',
+        ],
+    },
     dialog: {
         name: 'dialog',
         files: ['dialog.component.ts'],
@@ -124,7 +143,8 @@ export const registry = {
     },
     'input-group': {
         name: 'input-group',
-        files: ['input-group.component.ts'],
+        files: ['input-group.component.ts', 'input-group.token.ts'],
+        dependencies: ['input'],
     },
     'input-otp': {
         name: 'input-otp',
@@ -262,7 +282,7 @@ export const registry = {
     'chip-list': {
         name: 'chip-list',
         files: ['chip-list.component.ts'],
-        dependencies: ['badge', 'button'],
+        dependencies: ['badge', 'button', 'input', 'input-group'],
     },
     'emoji-picker': {
         name: 'emoji-picker',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gilav21/shadcn-angular",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "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

@@ -124,38 +124,106 @@ export async function add(components: string[], options: AddOptions) {
         ? path.join(cwd, options.path)
         : path.join(cwd, 'src/components/ui');
 
-    // Check for existing files
-    const existing: string[] = [];
+    // Check for existing files and diff
+    const componentsToInstall: ComponentName[] = [];
+    const componentsToSkip: string[] = [];
+    const conflictingComponents: ComponentName[] = [];
+    const contentCache = new Map<string, string>();
+
+    const checkSpinner = ora('Checking for conflicts...').start();
+
     for (const name of allComponents) {
         const component = registry[name];
+        let hasChanges = false;
+        let isFullyPresent = true;
+
         for (const file of component.files) {
             const targetPath = path.join(targetDir, file);
             if (await fs.pathExists(targetPath)) {
-                existing.push(file);
+                const localContent = await fs.readFile(targetPath, 'utf-8');
+
+                try {
+                    let remoteContent = await fetchComponentContent(file, options);
+                    // Transform imports for comparison
+                    const utilsAlias = config.aliases.utils;
+                    remoteContent = remoteContent.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+
+                    const normalize = (str: string) => str.replace(/\s+/g, '').trim();
+                    if (normalize(localContent) !== normalize(remoteContent)) {
+                        hasChanges = true;
+                    }
+                    contentCache.set(file, remoteContent); // Cache for installation
+                } catch (error) {
+                    // unexpected error fetching remote
+                    console.warn(`Could not fetch remote content for comparison: ${file}`);
+                    hasChanges = true; // Assume changed/unknown
+                }
+            } else {
+                isFullyPresent = false;
             }
         }
+
+        if (isFullyPresent && !hasChanges) {
+            componentsToSkip.push(name);
+        } else if (hasChanges) {
+            conflictingComponents.push(name);
+        } else {
+            componentsToInstall.push(name);
+        }
     }
 
-    if (existing.length > 0 && !options.overwrite && !options.yes) {
-        const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
-            message: `The following files already exist: ${existing.join(', ')}. Overwrite?`,
-            initial: false,
-        });
-        if (!overwrite) {
-            console.log(chalk.dim('Installation cancelled.'));
-            return;
+    checkSpinner.stop();
+
+    let componentsToOverwrite: ComponentName[] = [];
+
+    if (conflictingComponents.length > 0) {
+        if (options.overwrite) {
+            componentsToOverwrite = conflictingComponents;
+        } else if (options.yes) {
+            componentsToOverwrite = []; // Skip conflicts in non-interactive mode unless --overwrite
+        } else {
+            console.log(chalk.yellow(`\n${conflictingComponents.length} component(s) have local changes or are different from remote.`));
+            const { selected } = await prompts({
+                type: 'multiselect',
+                name: 'selected',
+                message: 'Select components to OVERWRITE (Unselected will be skipped):',
+                choices: conflictingComponents.map(name => ({
+                    title: name,
+                    value: name,
+                })),
+                hint: '- Space to select, Enter to confirm',
+            });
+            componentsToOverwrite = selected || [];
         }
     }
 
+    // Final list of components to process
+    // We process:
+    // 1. componentsToInstall (Brand new or partial)
+    // 2. componentsToOverwrite (User selected)
+    // We SKIP:
+    // 1. componentsToSkip (Identical)
+    // 2. conflictingComponents NOT in componentsToOverwrite
+
+    const finalComponents = [...componentsToInstall, ...componentsToOverwrite];
+
+    if (finalComponents.length === 0 && componentsToSkip.length > 0) {
+        console.log(chalk.green(`\nAll components are up to date! (${componentsToSkip.length} skipped)`));
+        return;
+    }
+
+    if (finalComponents.length === 0) {
+        console.log(chalk.dim('\nNo components to install.'));
+        return;
+    }
+
     const spinner = ora('Installing components...').start();
     let successCount = 0;
 
     try {
         await fs.ensureDir(targetDir);
 
-        for (const name of allComponents) {
+        for (const name of finalComponents) {
             const component = registry[name];
             let componentSuccess = true;
 
@@ -163,35 +231,48 @@ export async function add(components: string[], options: AddOptions) {
                 const targetPath = path.join(targetDir, file);
 
                 try {
-                    let content = await fetchComponentContent(file, options);
+                    let content = contentCache.get(file);
+                    if (!content) {
+                        content = await fetchComponentContent(file, options);
+                        // Transform imports if not already transformed (cached is transformed)
+                        const utilsAlias = config.aliases.utils;
+                        content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    }
 
-                    // Transform imports
-                    // Replace ../lib/utils (or similar relative paths) with the configured alias
-                    const utilsAlias = config.aliases.utils;
-                    content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
                     await fs.ensureDir(path.dirname(targetPath));
                     await fs.writeFile(targetPath, content);
-                    spinner.text = `Added ${file}`;
+                    // spinner.text = `Added ${file}`; // Too verbose?
                 } catch (err: any) {
                     spinner.warn(`Could not add ${file}: ${err.message}`);
                     componentSuccess = false;
                 }
             }
-            if (componentSuccess) successCount++;
+            if (componentSuccess) {
+                successCount++;
+                spinner.text = `Added ${name}`;
+            }
         }
 
         if (successCount > 0) {
-            spinner.succeed(chalk.green(`Added ${successCount} component(s)`));
+            spinner.succeed(chalk.green(`Success! Added ${successCount} component(s)`));
 
             console.log('\n' + chalk.dim('Components added:'));
-            allComponents.forEach(name => {
+            finalComponents.forEach(name => {
                 console.log(chalk.dim('  - ') + chalk.cyan(name));
             });
-            console.log('');
         } else {
-            spinner.fail(chalk.red('Failed to add any components.'));
+            spinner.info('No new components installed.');
         }
 
+        if (componentsToSkip.length > 0) {
+            console.log('\n' + chalk.dim('Components skipped (up to date):'));
+            componentsToSkip.forEach(name => {
+                console.log(chalk.dim('  - ') + chalk.gray(name));
+            });
+        }
+
+        console.log('');
+
     } catch (error) {
         spinner.fail('Failed to add components');
         console.error(error);

package/src/commands/init.ts

@@ -224,6 +224,44 @@ export async function init(options: InitOptions) {
             await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
         }
 
+        // Configure app.config.ts with Lucide icons
+        spinner.text = 'Configuring icons in app.config.ts...';
+        const appConfigPath = path.join(cwd, 'src/app/app.config.ts');
+
+        if (await fs.pathExists(appConfigPath)) {
+            let appConfigContent = await fs.readFile(appConfigPath, 'utf-8');
+
+            // Add imports
+            if (!appConfigContent.includes('LucideAngularModule')) {
+                const iconImports = "import { LucideAngularModule, ArrowDown, ArrowUp, ChevronsUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-angular';";
+                appConfigContent = iconImports + '\n' + appConfigContent;
+            }
+
+            if (!appConfigContent.includes('importProvidersFrom')) {
+                appConfigContent = "import { importProvidersFrom } from '@angular/core';\n" + appConfigContent;
+            }
+
+            // Add provider
+            const providerCode = `
+    importProvidersFrom(LucideAngularModule.pick({ 
+      ArrowDown, 
+      ArrowUp, 
+      ChevronsUpDown, 
+      ChevronLeft, 
+      ChevronRight, 
+      ChevronsLeft, 
+      ChevronsRight 
+    }))`;
+
+            if (!appConfigContent.includes('LucideAngularModule.pick')) {
+                appConfigContent = appConfigContent.replace(
+                    /providers:\s*\[/,
+                    `providers: [${providerCode},`
+                );
+                await fs.writeFile(appConfigPath, appConfigContent);
+            }
+        }
+
         spinner.succeed(chalk.green('Project initialized successfully!'));
 
         console.log('\n' + chalk.bold('Next steps:'));

package/src/index.ts

@@ -8,7 +8,7 @@ const program = new Command();
 program
     .name('shadcn-angular')
     .description('CLI for adding shadcn-angular components to your Angular project')
-    .version('0.0.8');
+    .version('0.0.10');
 
 program
     .command('init')

package/src/registry/index.ts

@@ -98,6 +98,25 @@ export const registry: Record<string, ComponentDefinition> = {
     files: ['date-picker.component.ts'],
     dependencies: ['calendar'],
   },
+  'data-table': {
+    name: 'data-table',
+    files: [
+      'data-table/data-table.component.ts',
+      'data-table/data-table-column-header.component.ts',
+      'data-table/data-table-pagination.component.ts',
+      'data-table/data-table.types.ts',
+      'data-table/cell-host.directive.ts',
+    ],
+    dependencies: [
+      'table',
+      'input',
+      'button',
+      'checkbox',
+      'select',
+      'pagination',
+      'popover',
+    ],
+  },
   dialog: {
     name: 'dialog',
     files: ['dialog.component.ts'],
@@ -133,7 +152,8 @@ export const registry: Record<string, ComponentDefinition> = {
   },
   'input-group': {
     name: 'input-group',
-    files: ['input-group.component.ts'],
+    files: ['input-group.component.ts', 'input-group.token.ts'],
+    dependencies: ['input'],
   },
   'input-otp': {
     name: 'input-otp',
@@ -271,7 +291,7 @@ export const registry: Record<string, ComponentDefinition> = {
   'chip-list': {
     name: 'chip-list',
     files: ['chip-list.component.ts'],
-    dependencies: ['badge', 'button'],
+    dependencies: ['badge', 'button', 'input', 'input-group'],
   },
   'emoji-picker': {
     name: 'emoji-picker',