@gilav21/shadcn-angular 0.0.14 → 0.0.16

package/src/commands/add.ts

@@ -4,18 +4,20 @@ import { fileURLToPath } from 'url';
 import prompts from 'prompts';
 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';
+import { getConfig } from '../utils/config.js';
+import { registry, type ComponentName } from '../registry/index.js';
+import { installPackages } from '../utils/package-manager.js';
+import { writeShortcutRegistryIndex, type ShortcutRegistryEntry } from '../utils/shortcut-registry.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 // Base URL for the component registry (GitHub raw content)
-const REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/ui';
+const REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/ui';
+const LIB_REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/lib';
 
 // Components source directory (relative to CLI dist folder) for local dev
-function getLocalComponentsDir(): string | null {
+function getLocalComponentsDir(): string | null {
     // From dist/commands/add.js -> packages/components/ui
     const fromDist = path.resolve(__dirname, '../../../components/ui');
     if (fs.existsSync(fromDist)) {
@@ -29,15 +31,38 @@ function getLocalComponentsDir(): string | null {
     return null;
 }
 
-interface AddOptions {
+interface AddOptions {
     yes?: boolean;
     overwrite?: boolean;
     all?: boolean;
     path?: string;
-    remote?: boolean; // Force remote fetch
-}
-
-async function fetchComponentContent(file: string, options: AddOptions): Promise<string> {
+    remote?: boolean; // Force remote fetch
+}
+
+function getLocalLibDir(): string | null {
+    const fromDist = path.resolve(__dirname, '../../../components/lib');
+    if (fs.existsSync(fromDist)) {
+        return fromDist;
+    }
+    return null;
+}
+
+function resolveProjectPath(cwd: string, inputPath: string): string {
+    const resolved = path.resolve(cwd, inputPath);
+    const relative = path.relative(cwd, resolved);
+    if (relative.startsWith('..') || path.isAbsolute(relative)) {
+        throw new Error(`Path must stay inside the project directory: ${inputPath}`);
+    }
+    return resolved;
+}
+
+function aliasToProjectPath(aliasOrPath: string): string {
+    return aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+}
+
+async function fetchComponentContent(file: string, options: AddOptions): Promise<string> {
     const localDir = getLocalComponentsDir();
 
     // 1. Prefer local if available and not forced remote
@@ -62,7 +87,41 @@ async function fetchComponentContent(file: string, options: AddOptions): Promise
         }
         throw error;
     }
-}
+}
+
+async function fetchLibContent(file: string, options: AddOptions): Promise<string> {
+    const localDir = getLocalLibDir();
+
+    if (localDir && !options.remote) {
+        const localPath = path.join(localDir, file);
+        if (await fs.pathExists(localPath)) {
+            return fs.readFile(localPath, 'utf-8');
+        }
+    }
+
+    const url = `${LIB_REGISTRY_BASE_URL}/${file}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch library file from ${url}: ${response.statusText}`);
+    }
+    return response.text();
+}
+
+function collectInstalledShortcutEntries(targetDir: string): ShortcutRegistryEntry[] {
+    const entries: ShortcutRegistryEntry[] = [];
+    for (const definition of Object.values(registry)) {
+        if (!definition.shortcutDefinitions?.length) {
+            continue;
+        }
+        for (const shortcutDefinition of definition.shortcutDefinitions) {
+            const sourcePath = path.join(targetDir, shortcutDefinition.sourceFile);
+            if (fs.existsSync(sourcePath)) {
+                entries.push(shortcutDefinition);
+            }
+        }
+    }
+    return entries;
+}
 
 export async function add(components: string[], options: AddOptions) {
     const cwd = process.cwd();
@@ -121,9 +180,8 @@ export async function add(components: string[], options: AddOptions) {
     };
     componentsToAdd.forEach(c => resolveDeps(c));
 
-    const targetDir = options.path
-        ? path.join(cwd, options.path)
-        : path.join(cwd, 'src/components/ui');
+    const uiBasePath = options.path ?? aliasToProjectPath(config.aliases.ui || 'src/components/ui');
+    const targetDir = resolveProjectPath(cwd, uiBasePath);
 
     // Check for existing files and diff
     const componentsToInstall: ComponentName[] = [];
@@ -149,7 +207,7 @@ export async function add(components: string[], options: AddOptions) {
                     const utilsAlias = config.aliases.utils;
                     remoteContent = remoteContent.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
 
-                    const normalize = (str: string) => str.replace(/\s+/g, '').trim();
+                    const normalize = (str: string) => str.replace(/\r\n/g, '\n').trim();
                     if (normalize(localContent) !== normalize(remoteContent)) {
                         hasChanges = true;
                     }
@@ -265,8 +323,8 @@ export async function add(components: string[], options: AddOptions) {
             spinner.info('No new components installed.');
         }
 
-        if (finalComponents.length > 0) {
-            const npmDependencies = new Set<string>();
+        if (finalComponents.length > 0) {
+            const npmDependencies = new Set<string>();
             for (const name of finalComponents) {
                 const component = registry[name];
                 if (component.npmDependencies) {
@@ -283,11 +341,26 @@ export async function add(components: string[], options: AddOptions) {
                     depSpinner.fail('Failed to install dependencies.');
                     console.error(e);
                 }
-            }
-        }
-
-        if (componentsToSkip.length > 0) {
-            console.log('\n' + chalk.dim('Components skipped (up to date):'));
+            }
+        }
+
+        const shortcutEntries = collectInstalledShortcutEntries(targetDir);
+        if (shortcutEntries.length > 0) {
+            const utilsPathResolved = resolveProjectPath(cwd, aliasToProjectPath(config.aliases.utils) + '.ts');
+            const utilsDir = path.dirname(utilsPathResolved);
+            const shortcutServicePath = path.join(utilsDir, 'shortcut-binding.service.ts');
+
+            if (!await fs.pathExists(shortcutServicePath)) {
+                const shortcutServiceContent = await fetchLibContent('shortcut-binding.service.ts', options);
+                await fs.ensureDir(utilsDir);
+                await fs.writeFile(shortcutServicePath, shortcutServiceContent);
+            }
+        }
+
+        await writeShortcutRegistryIndex(cwd, config, shortcutEntries);
+
+        if (componentsToSkip.length > 0) {
+            console.log('\n' + chalk.dim('Components skipped (up to date):'));
             componentsToSkip.forEach(name => {
                 console.log(chalk.dim('  - ') + chalk.gray(name));
             });

package/src/commands/init.ts

@@ -1,19 +1,66 @@
-import fs from 'fs-extra';
-import path from 'path';
-import prompts from 'prompts';
-import chalk from 'chalk';
-import ora from 'ora';
-import { execa } from 'execa';
-import { getDefaultConfig, type Config } from '../utils/config.js';
-import { getStylesTemplate } from '../templates/styles.js';
-import { getUtilsTemplate } from '../templates/utils.js';
-
-interface InitOptions {
-    yes?: boolean;
-    defaults?: boolean;
-}
-
-export async function init(options: InitOptions) {
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import prompts from 'prompts';
+import chalk from 'chalk';
+import ora from 'ora';
+import { getDefaultConfig, type Config } from '../utils/config.js';
+import { getStylesTemplate } from '../templates/styles.js';
+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';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+function getLocalLibDir(): string | null {
+    const fromDist = path.resolve(__dirname, '../../../components/lib');
+    if (fs.existsSync(fromDist)) {
+        return fromDist;
+    }
+    return null;
+}
+
+async function fetchLibFileContent(file: string): Promise<string> {
+    const localLibDir = getLocalLibDir();
+    if (localLibDir) {
+        const localPath = path.join(localLibDir, file);
+        if (await fs.pathExists(localPath)) {
+            return fs.readFile(localPath, 'utf-8');
+        }
+    }
+
+    const url = `${LIB_REGISTRY_BASE_URL}/${file}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch library file from ${url}: ${response.statusText}`);
+    }
+    return response.text();
+}
+
+interface InitOptions {
+    yes?: boolean;
+    defaults?: boolean;
+}
+
+function resolveProjectPath(cwd: string, inputPath: string): string {
+    const resolved = path.resolve(cwd, inputPath);
+    const relative = path.relative(cwd, resolved);
+    if (relative.startsWith('..') || path.isAbsolute(relative)) {
+        throw new Error(`Path must stay inside the project directory: ${inputPath}`);
+    }
+    return resolved;
+}
+
+function resolveAliasOrPath(cwd: string, aliasOrPath: string): string {
+    const normalized = aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+    return resolveProjectPath(cwd, normalized);
+}
+
+export async function init(options: InitOptions) {
     console.log(chalk.bold('\n🎨 Welcome to shadcn-angular!\n'));
 
     const cwd = process.cwd();
@@ -26,26 +73,30 @@ export async function init(options: InitOptions) {
         process.exit(1);
     }
 
-    // Check if already initialized
-    const componentsJsonPath = path.join(cwd, 'components.json');
-    if (await fs.pathExists(componentsJsonPath)) {
-        const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
-            message: 'components.json already exists. Overwrite?',
-            initial: false,
-        });
-        if (!overwrite) {
-            console.log(chalk.dim('Initialization cancelled.'));
-            return;
+    // Check if already initialized
+    const componentsJsonPath = path.join(cwd, 'components.json');
+    if (await fs.pathExists(componentsJsonPath)) {
+        const overwrite = options.yes
+            ? true
+            : (await prompts({
+                type: 'confirm',
+                name: 'overwrite',
+                message: 'components.json already exists. Overwrite?',
+                initial: false,
+            })).overwrite;
+        if (!overwrite) {
+            console.log(chalk.dim('Initialization cancelled.'));
+            return;
         }
     }
 
-    let config: Config;
+    let config: Config;
+    let createShortcutRegistry = true;
 
-    if (options.defaults || options.yes) {
-        config = getDefaultConfig();
-    } else {
+    if (options.defaults || options.yes) {
+        config = getDefaultConfig();
+        createShortcutRegistry = true;
+    } else {
         const THEME_COLORS: Record<string, string> = {
             zinc: '#71717a',
             slate: '#64748b',
@@ -123,16 +174,22 @@ export async function init(options: InitOptions) {
                 message: 'Where would you like to install utils?',
                 initial: 'src/components/lib',
             },
-            {
-                type: 'text',
-                name: 'globalCss',
-                message: 'Where is your global styles file?',
-                initial: 'src/styles.scss',
-            },
-        ]);
-
-        config = {
-            $schema: 'https://shadcn-angular.dev/schema.json',
+            {
+                type: 'text',
+                name: 'globalCss',
+                message: 'Where is your global styles file?',
+                initial: 'src/styles.scss',
+            },
+            {
+                type: 'confirm',
+                name: 'createShortcutRegistry',
+                message: 'Would you like to create a shortcut registry scaffold?',
+                initial: true,
+            },
+        ]);
+
+        config = {
+            $schema: 'https://shadcn-angular.dev/schema.json',
             style: 'default',
             tailwind: {
                 css: responses.globalCss,
@@ -144,10 +201,10 @@ export async function init(options: InitOptions) {
                 components: responses.componentsPath.replace('src/', '@/'), // Basic heuristic
                 utils: responses.utilsPath.replace('src/', '@/').replace('.ts', ''),
                 ui: responses.componentsPath.replace('src/', '@/'),
-            },
-            iconLibrary: 'lucide-angular',
-        };
-    }
+            },
+        };
+        createShortcutRegistry = responses.createShortcutRegistry ?? true;
+    }
 
     const spinner = ora('Initializing project...').start();
 
@@ -163,26 +220,37 @@ export async function init(options: InitOptions) {
         // If config came from defaults, aliases are set.
         // We can reverse-map alias to path: @/ -> src/
 
-        const utilsPathResolved = config.aliases.utils.replace('@/', 'src/');
-        const utilsDir = path.dirname(path.join(cwd, utilsPathResolved + '.ts')); // utils usually ends in path/to/utils
-
-        await fs.ensureDir(utilsDir);
-        await fs.writeFile(path.join(cwd, utilsPathResolved + '.ts'), getUtilsTemplate());
-        spinner.text = 'Created utils.ts';
-
-        // Create tailwind.css file in the same directory as the global styles
-        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, 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);
-        let userStyles = await fs.pathExists(userStylesPath)
-            ? await fs.readFile(userStylesPath, 'utf-8')
-            : '';
+        const utilsPathResolved = resolveAliasOrPath(cwd, config.aliases.utils + '.ts');
+        const utilsDir = path.dirname(utilsPathResolved); // utils usually ends in path/to/utils
+
+        await fs.ensureDir(utilsDir);
+        await fs.writeFile(utilsPathResolved, getUtilsTemplate());
+        spinner.text = 'Created utils.ts';
+
+        const shortcutServicePath = path.join(utilsDir, 'shortcut-binding.service.ts');
+        const shortcutServiceContent = await fetchLibFileContent('shortcut-binding.service.ts');
+        await fs.writeFile(shortcutServicePath, shortcutServiceContent);
+        spinner.text = 'Created shortcut-binding.service.ts';
+
+        if (createShortcutRegistry) {
+            await writeShortcutRegistryIndex(cwd, config, []);
+            spinner.text = 'Created shortcut-registry.index.ts';
+        }
+
+        // Create tailwind.css file in the same directory as the global styles
+        const userStylesPath = resolveProjectPath(cwd, config.tailwind.css);
+        const stylesDir = path.dirname(userStylesPath);
+        const tailwindCssPath = path.join(stylesDir, 'tailwind.css');
+
+        // Write the tailwind.css file with all Tailwind directives
+        await fs.ensureDir(stylesDir);
+        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
+        let userStyles = await fs.pathExists(userStylesPath)
+            ? await fs.readFile(userStylesPath, 'utf-8')
+            : '';
 
         const tailwindImport = '@import "./tailwind.css";';
         if (!userStyles.includes('tailwind.css')) {
@@ -190,26 +258,24 @@ export async function init(options: InitOptions) {
             userStyles = tailwindImport + '\n\n' + userStyles;
             await fs.writeFile(userStylesPath, userStyles);
             spinner.text = 'Added tailwind.css import to styles';
-        }
-
-        // Create components/ui directory
-        const uiPathResolved = config.aliases.ui.replace('@/', 'src/');
-        const uiDir = path.join(cwd, uiPathResolved);
-        await fs.ensureDir(uiDir);
-        spinner.text = 'Created components directory';
+        }
+
+        // Create components/ui directory
+        const uiDir = resolveAliasOrPath(cwd, config.aliases.ui);
+        await fs.ensureDir(uiDir);
+        spinner.text = 'Created components directory';
 
         // Install dependencies
         spinner.text = 'Installing dependencies...';
-        const dependencies = [
-            'clsx',
-            'tailwind-merge',
+        const dependencies = [
+            'clsx',
+            'tailwind-merge',
             'class-variance-authority',
-            'lucide-angular',
             'tailwindcss',
-            'postcss',
-            '@tailwindcss/postcss'
-        ];
-        await execa('npm', ['install', ...dependencies], { cwd });
+            'postcss',
+            '@tailwindcss/postcss'
+        ];
+        await installPackages(dependencies, { cwd });
 
         // Setup PostCSS - create .postcssrc.json which is the preferred format for Angular
         spinner.text = 'Configuring PostCSS...';
@@ -224,43 +290,6 @@ 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!'));