@gilav21/shadcn-angular 0.0.9 → 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

@@ -36,29 +36,66 @@ export async function init(options) {
         config = getDefaultConfig();
     }
     else {
+        const THEME_COLORS = {
+            zinc: '#71717a',
+            slate: '#64748b',
+            stone: '#78716c',
+            gray: '#6b7280',
+            neutral: '#737373',
+            red: '#ef4444',
+            rose: '#f43f5e',
+            orange: '#f97316', // bright orange
+            green: '#22c55e',
+            blue: '#3b82f6',
+            yellow: '#eab308',
+            violet: '#8b5cf6',
+            amber: '#d97706', // warm amber for preview
+        };
+        const themeChoices = [
+            { title: 'Zinc', value: 'zinc' },
+            { title: 'Slate', value: 'slate' },
+            { title: 'Stone', value: 'stone' },
+            { title: 'Gray', value: 'gray' },
+            { title: 'Neutral', value: 'neutral' },
+            { title: 'Red', value: 'red' },
+            { title: 'Rose', value: 'rose' },
+            { title: 'Orange', value: 'orange' },
+            { title: 'Green', value: 'green' },
+            { title: 'Blue', value: 'blue' },
+            { title: 'Yellow', value: 'yellow' },
+            { title: 'Violet', value: 'violet' },
+            { title: 'Amber', value: 'amber' },
+        ].map(c => ({
+            ...c,
+            title: `${chalk.hex(THEME_COLORS[c.value])('██')} ${c.title}`
+        }));
+        const baseColorChoices = [
+            { title: 'Neutral', value: 'neutral' },
+            { title: 'Slate', value: 'slate' },
+            { title: 'Stone', value: 'stone' },
+            { title: 'Gray', value: 'gray' },
+            { title: 'Zinc', value: 'zinc' },
+        ].map(c => ({
+            ...c,
+            title: `${chalk.hex(THEME_COLORS[c.value])('██')} ${c.title}`
+        }));
         const responses = await prompts([
             {
                 type: 'select',
-                name: 'style',
-                message: 'Which style would you like to use?',
-                choices: [
-                    { title: 'Default', value: 'default' },
-                    { title: 'New York', value: 'new-york' },
-                ],
+                name: 'baseColor',
+                message: 'Which color would you like to use as base color?',
+                choices: baseColorChoices,
                 initial: 0,
             },
             {
                 type: 'select',
-                name: 'baseColor',
-                message: 'Which color would you like to use as base color?',
-                choices: [
-                    { title: 'Neutral', value: 'neutral' },
-                    { title: 'Slate', value: 'slate' },
-                    { title: 'Stone', value: 'stone' },
-                    { title: 'Gray', value: 'gray' },
-                    { title: 'Zinc', value: 'zinc' },
-                ],
-                initial: 0,
+                name: 'theme',
+                message: 'Which color would you like to use for the main theme?',
+                choices: themeChoices,
+                initial: (prev) => {
+                    const index = themeChoices.findIndex(c => c.value === prev);
+                    return index === -1 ? 0 : index;
+                },
             },
             {
                 type: 'text',
@@ -81,10 +118,11 @@ export async function init(options) {
         ]);
         config = {
             $schema: 'https://shadcn-angular.dev/schema.json',
-            style: responses.style,
+            style: 'default',
             tailwind: {
                 css: responses.globalCss,
                 baseColor: responses.baseColor,
+                theme: responses.theme,
                 cssVariables: true,
             },
             aliases: {
@@ -115,7 +153,7 @@ export async function init(options) {
         const stylesDir = path.dirname(path.join(cwd, config.tailwind.css));
         const tailwindCssPath = path.join(stylesDir, 'tailwind.css');
         // Write the tailwind.css file with all Tailwind directives
-        await fs.writeFile(tailwindCssPath, getStylesTemplate(config.tailwind.baseColor));
+        await fs.writeFile(tailwindCssPath, getStylesTemplate(config.tailwind.baseColor, config.tailwind.theme));
         spinner.text = 'Created tailwind.css';
         // Add import to the user's global styles file if not already present
         const userStylesPath = path.join(cwd, config.tailwind.css);
@@ -157,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

@@ -7,6 +7,11 @@ export const registry = {
         name: 'accordion',
         files: ['accordion.component.ts'],
     },
+    autocomplete: {
+        name: 'autocomplete',
+        files: ['autocomplete.component.ts', 'highlight.pipe.ts'],
+        dependencies: ['popover', 'command', 'badge'],
+    },
     alert: {
         name: 'alert',
         files: ['alert.component.ts'],
@@ -61,6 +66,15 @@ export const registry = {
         name: 'collapsible',
         files: ['collapsible.component.ts'],
     },
+    'color-picker': {
+        name: 'color-picker',
+        files: ['color-picker.component.ts'],
+        dependencies: ['popover', 'input', 'tabs'],
+    },
+    confetti: {
+        name: 'confetti',
+        files: ['confetti.directive.ts'],
+    },
     command: {
         name: 'command',
         files: ['command.component.ts'],
@@ -75,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'],
@@ -95,6 +128,11 @@ export const registry = {
         name: 'field',
         files: ['field.component.ts'],
     },
+    'file-upload': {
+        name: 'file-upload',
+        files: ['file-upload.component.ts'],
+        dependencies: ['button', 'progress'],
+    },
     'hover-card': {
         name: 'hover-card',
         files: ['hover-card.component.ts'],
@@ -105,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',
@@ -131,6 +170,10 @@ export const registry = {
         name: 'navigation-menu',
         files: ['navigation-menu.component.ts'],
     },
+    'number-ticker': {
+        name: 'number-ticker',
+        files: ['number-ticker.component.ts'],
+    },
     pagination: {
         name: 'pagination',
         files: ['pagination.component.ts'],
@@ -147,6 +190,10 @@ export const registry = {
         name: 'radio-group',
         files: ['radio-group.component.ts'],
     },
+    rating: {
+        name: 'rating',
+        files: ['rating.component.ts'],
+    },
     resizable: {
         name: 'resizable',
         files: ['resizable.component.ts'],
@@ -183,6 +230,10 @@ export const registry = {
         name: 'spinner',
         files: ['spinner.component.ts'],
     },
+    stepper: {
+        name: 'stepper',
+        files: ['stepper.component.ts'],
+    },
     switch: {
         name: 'switch',
         files: ['switch.component.ts'],
@@ -199,6 +250,10 @@ export const registry = {
         name: 'textarea',
         files: ['textarea.component.ts'],
     },
+    timeline: {
+        name: 'timeline',
+        files: ['timeline.component.ts'],
+    },
     toast: {
         name: 'toast',
         files: ['toast.component.ts'],
@@ -215,6 +270,10 @@ export const registry = {
         name: 'tooltip',
         files: ['tooltip.component.ts'],
     },
+    tree: {
+        name: 'tree',
+        files: ['tree.component.ts'],
+    },
     'speed-dial': {
         name: 'speed-dial',
         files: ['speed-dial.component.ts'],
@@ -223,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',
@@ -250,4 +309,69 @@ export const registry = {
             'scroll-area',
         ],
     },
+    // Chart Components
+    'pie-chart': {
+        name: 'pie-chart',
+        files: [
+            'charts/pie-chart.component.ts',
+            'charts/chart.types.ts',
+            'charts/chart.utils.ts',
+        ],
+    },
+    'pie-chart-drilldown': {
+        name: 'pie-chart-drilldown',
+        files: [
+            'charts/pie-chart-drilldown.component.ts',
+            'charts/chart.types.ts',
+            'charts/chart.utils.ts',
+        ],
+    },
+    'bar-chart': {
+        name: 'bar-chart',
+        files: [
+            'charts/bar-chart.component.ts',
+            'charts/chart.types.ts',
+            'charts/chart.utils.ts',
+        ],
+    },
+    'bar-chart-drilldown': {
+        name: 'bar-chart-drilldown',
+        files: [
+            'charts/bar-chart-drilldown.component.ts',
+            'charts/chart.types.ts',
+            'charts/chart.utils.ts',
+        ],
+    },
+    'stacked-bar-chart': {
+        name: 'stacked-bar-chart',
+        files: [
+            'charts/stacked-bar-chart.component.ts',
+            'charts/chart.types.ts',
+            'charts/chart.utils.ts',
+        ],
+    },
+    'column-range-chart': {
+        name: 'column-range-chart',
+        files: [
+            'charts/column-range-chart.component.ts',
+            'charts/chart.types.ts',
+            'charts/chart.utils.ts',
+        ],
+    },
+    'bar-race-chart': {
+        name: 'bar-race-chart',
+        files: [
+            'charts/bar-race-chart.component.ts',
+            'charts/chart.types.ts',
+            'charts/chart.utils.ts',
+        ],
+    },
+    'org-chart': {
+        name: 'org-chart',
+        files: [
+            'charts/org-chart.component.ts',
+            'charts/chart.types.ts',
+            'charts/chart.utils.ts',
+        ],
+    },
 };

package/dist/templates/styles.d.ts

@@ -1,3 +1,4 @@
 type BaseColor = 'neutral' | 'slate' | 'stone' | 'gray' | 'zinc';
-export declare function getStylesTemplate(baseColor?: BaseColor): string;
+type ThemeColor = 'zinc' | 'slate' | 'stone' | 'gray' | 'neutral' | 'red' | 'rose' | 'orange' | 'green' | 'blue' | 'yellow' | 'violet' | 'amber';
+export declare function getStylesTemplate(baseColor?: BaseColor, themeColor?: ThemeColor): string;
 export {};