@gilav21/shadcn-angular 0.0.16 → 0.0.18

package/src/commands/init.ts

@@ -38,7 +38,7 @@ async function fetchLibFileContent(file: string): Promise<string> {
     }
     return response.text();
 }
-
+
 interface InitOptions {
     yes?: boolean;
     defaults?: boolean;
@@ -61,18 +61,18 @@ function resolveAliasOrPath(cwd: string, aliasOrPath: string): string {
 }
 
 export async function init(options: InitOptions) {
-    console.log(chalk.bold('\n🎨 Welcome to shadcn-angular!\n'));
-
-    const cwd = process.cwd();
-
-    // Check if this is an Angular project
-    const angularJsonPath = path.join(cwd, 'angular.json');
-    if (!await fs.pathExists(angularJsonPath)) {
-        console.log(chalk.red('Error: This does not appear to be an Angular project.'));
-        console.log(chalk.dim('Please run this command in the root of your Angular project.'));
-        process.exit(1);
-    }
-
+    console.log(chalk.bold('\n🎨 Welcome to shadcn-angular!\n'));
+
+    const cwd = process.cwd();
+
+    // Check if this is an Angular project
+    const angularJsonPath = path.join(cwd, 'angular.json');
+    if (!await fs.pathExists(angularJsonPath)) {
+        console.log(chalk.red('Error: This does not appear to be an Angular project.'));
+        console.log(chalk.dim('Please run this command in the root of your Angular project.'));
+        process.exit(1);
+    }
+
     // Check if already initialized
     const componentsJsonPath = path.join(cwd, 'components.json');
     if (await fs.pathExists(componentsJsonPath)) {
@@ -87,93 +87,93 @@ export async function init(options: InitOptions) {
         if (!overwrite) {
             console.log(chalk.dim('Initialization cancelled.'));
             return;
-        }
-    }
-
+        }
+    }
+
     let config: Config;
     let createShortcutRegistry = true;
-
+
     if (options.defaults || options.yes) {
         config = getDefaultConfig();
         createShortcutRegistry = true;
     } else {
-        const THEME_COLORS: Record<string, string> = {
-            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: 'baseColor',
-                message: 'Which color would you like to use as base color?',
-                choices: baseColorChoices,
-                initial: 0,
-            },
-            {
-                type: 'select',
-                name: 'theme',
-                message: 'Which color would you like to use for the main theme?',
-                choices: themeChoices,
-                initial: (prev: string) => {
-                    const index = themeChoices.findIndex(c => c.value === prev);
-                    return index === -1 ? 0 : index;
-                },
-            },
-            {
-                type: 'text',
-                name: 'componentsPath',
-                message: 'Where would you like to install components?',
-                initial: 'src/components/ui',
-            },
-            {
-                type: 'text',
-                name: 'utilsPath',
-                message: 'Where would you like to install utils?',
-                initial: 'src/components/lib',
-            },
+        const THEME_COLORS: Record<string, string> = {
+            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: 'baseColor',
+                message: 'Which color would you like to use as base color?',
+                choices: baseColorChoices,
+                initial: 0,
+            },
+            {
+                type: 'select',
+                name: 'theme',
+                message: 'Which color would you like to use for the main theme?',
+                choices: themeChoices,
+                initial: (prev: string) => {
+                    const index = themeChoices.findIndex(c => c.value === prev);
+                    return index === -1 ? 0 : index;
+                },
+            },
+            {
+                type: 'text',
+                name: 'componentsPath',
+                message: 'Where would you like to install components?',
+                initial: 'src/components/ui',
+            },
+            {
+                type: 'text',
+                name: 'utilsPath',
+                message: 'Where would you like to install utils?',
+                initial: 'src/components/lib',
+            },
             {
                 type: 'text',
                 name: 'globalCss',
@@ -187,47 +187,46 @@ export async function init(options: InitOptions) {
                 initial: true,
             },
         ]);
-
+
         config = {
             $schema: 'https://shadcn-angular.dev/schema.json',
-            style: 'default',
-            tailwind: {
-                css: responses.globalCss,
-                baseColor: responses.baseColor,
-                theme: responses.theme,
-                cssVariables: true,
-            },
-            aliases: {
-                components: responses.componentsPath.replace('src/', '@/'), // Basic heuristic
-                utils: responses.utilsPath.replace('src/', '@/').replace('.ts', ''),
-                ui: responses.componentsPath.replace('src/', '@/'),
+            style: 'default',
+            tailwind: {
+                css: responses.globalCss,
+                baseColor: responses.baseColor,
+                theme: responses.theme,
+                cssVariables: true,
+            },
+            aliases: {
+                components: responses.componentsPath.replace('src/', '@/'), // Basic heuristic
+                utils: responses.utilsPath.replace('src/', '@/').replace('.ts', ''),
+                ui: responses.componentsPath.replace('src/', '@/'),
             },
         };
         createShortcutRegistry = responses.createShortcutRegistry ?? true;
     }
-
-    const spinner = ora('Initializing project...').start();
-
-    try {
-        // Write components.json
-        await fs.writeJson(componentsJsonPath, config, { spaces: 2 });
-        spinner.text = 'Created components.json';
-
-        // Create utils directory and file
-        // Resolve path from the config alias, assuming @/ maps to src/ logic for file creation if not provided directly
-        // But we have the 'responses' object from CLI prompt only in the else block above!
-        // So we should rely on config to reconstruct the path, or better yet, if we are in 'defaults' mode, check what config is.
-        // If config came from defaults, aliases are set.
-        // We can reverse-map alias to path: @/ -> src/
-
-        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());
+
+    const spinner = ora('Initializing project...').start();
+
+    try {
+        // Write components.json
+        await fs.writeJson(componentsJsonPath, config, { spaces: 2 });
+        spinner.text = 'Created components.json';
+
+        // Create utils directory and file
+        // Resolve path from the config alias, assuming @/ maps to src/ logic for file creation if not provided directly
+        // But we have the 'responses' object from CLI prompt only in the else block above!
+        // So we should rely on config to reconstruct the path, or better yet, if we are in 'defaults' mode, check what config is.
+        // If config came from defaults, aliases are set.
+        // We can reverse-map alias to path: @/ -> src/
+
+        const libDir = resolveAliasOrPath(cwd, config.aliases.utils);
+
+        await fs.ensureDir(libDir);
+        await fs.writeFile(path.join(libDir, 'utils.ts'), getUtilsTemplate());
         spinner.text = 'Created utils.ts';
 
-        const shortcutServicePath = path.join(utilsDir, 'shortcut-binding.service.ts');
+        const shortcutServicePath = path.join(libDir, 'shortcut-binding.service.ts');
         const shortcutServiceContent = await fetchLibFileContent('shortcut-binding.service.ts');
         await fs.writeFile(shortcutServicePath, shortcutServiceContent);
         spinner.text = 'Created shortcut-binding.service.ts';
@@ -251,63 +250,63 @@ export async function init(options: InitOptions) {
         let userStyles = await fs.pathExists(userStylesPath)
             ? await fs.readFile(userStylesPath, 'utf-8')
             : '';
-
-        const tailwindImport = '@import "./tailwind.css";';
-        if (!userStyles.includes('tailwind.css')) {
-            // Add import at the top of the file
-            userStyles = tailwindImport + '\n\n' + userStyles;
-            await fs.writeFile(userStylesPath, userStyles);
-            spinner.text = 'Added tailwind.css import to styles';
+
+        const tailwindImport = '@import "./tailwind.css";';
+        if (!userStyles.includes('tailwind.css')) {
+            // Add import at the top of the file
+            userStyles = tailwindImport + '\n\n' + userStyles;
+            await fs.writeFile(userStylesPath, userStyles);
+            spinner.text = 'Added tailwind.css import to styles';
         }
 
         // 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...';
+
+        // Install dependencies
+        spinner.text = 'Installing dependencies...';
         const dependencies = [
             'clsx',
             'tailwind-merge',
-            'class-variance-authority',
-            'tailwindcss',
+            'class-variance-authority',
+            'tailwindcss',
             'postcss',
             '@tailwindcss/postcss'
         ];
         await installPackages(dependencies, { cwd });
-
-        // Setup PostCSS - create .postcssrc.json which is the preferred format for Angular
-        spinner.text = 'Configuring PostCSS...';
-        const postcssrcPath = path.join(cwd, '.postcssrc.json');
-
-        if (!await fs.pathExists(postcssrcPath)) {
-            const configContent = {
-                plugins: {
-                    '@tailwindcss/postcss': {}
-                }
-            };
-            await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
-        }
-
-
-        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'));
-        console.log(chalk.dim('  2. Import and use in your templates'));
-        console.log(chalk.dim('  3. Update your ') + chalk.bold('tsconfig.json') + chalk.dim(' paths:'));
-        console.log(chalk.dim('    "compilerOptions": {'));
-        console.log(chalk.dim('      "baseUrl": ".",'));
-        console.log(chalk.dim('      "paths": {'));
-        console.log(chalk.dim('        "@/*": ["./src/*"]'));
-        console.log(chalk.dim('      }'));
-        console.log(chalk.dim('    }'));
-        console.log('');
-
-    } catch (error) {
-        spinner.fail('Failed to initialize project');
-        console.error(error);
-        process.exit(1);
-    }
-}
+
+        // Setup PostCSS - create .postcssrc.json which is the preferred format for Angular
+        spinner.text = 'Configuring PostCSS...';
+        const postcssrcPath = path.join(cwd, '.postcssrc.json');
+
+        if (!await fs.pathExists(postcssrcPath)) {
+            const configContent = {
+                plugins: {
+                    '@tailwindcss/postcss': {}
+                }
+            };
+            await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
+        }
+
+
+        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'));
+        console.log(chalk.dim('  2. Import and use in your templates'));
+        console.log(chalk.dim('  3. Update your ') + chalk.bold('tsconfig.json') + chalk.dim(' paths:'));
+        console.log(chalk.dim('    "compilerOptions": {'));
+        console.log(chalk.dim('      "baseUrl": ".",'));
+        console.log(chalk.dim('      "paths": {'));
+        console.log(chalk.dim('        "@/*": ["./src/*"]'));
+        console.log(chalk.dim('      }'));
+        console.log(chalk.dim('    }'));
+        console.log('');
+
+    } catch (error) {
+        spinner.fail('Failed to initialize project');
+        console.error(error);
+        process.exit(1);
+    }
+}

package/src/registry/index.ts

@@ -6,6 +6,7 @@ export interface ComponentDefinition {
   files: string[]; // Relative paths to component files
   dependencies?: string[]; // Other components this depends on
   npmDependencies?: string[]; // NPM packages this depends on
+  libFiles?: string[]; // Lib utility files this component requires (e.g. 'xlsx.ts')
   shortcutDefinitions?: {
     exportName: string;
     componentName: string;
@@ -155,6 +156,7 @@ export const registry: Record<string, ComponentDefinition> = {
       'component-outlet',
       'icon',
     ],
+    libFiles: ['xlsx.ts'],
   },
   dialog: {
     name: 'dialog',
@@ -392,6 +394,7 @@ export const registry: Record<string, ComponentDefinition> = {
       'dialog',
       'scroll-area',
     ],
+    libFiles: ['pdf-parser.ts', 'image-validator.ts', 'svg-sanitizer.ts'],
     shortcutDefinitions: [
       {
         exportName: 'RICH_TEXT_SHORTCUT_DEFINITIONS',

package/src/templates/utils.ts

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge';
  * Utility function for merging Tailwind CSS classes with proper precedence
  */
 export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
+    return twMerge(clsx(inputs));
 }
 
 /**
@@ -17,5 +17,35 @@ export function isRtl(el: HTMLElement): boolean {
     return getComputedStyle(el).direction === 'rtl';
 }
 
+/**
+ * Returns the bounding rect of the nearest ancestor that clips overflow
+ * (overflow: hidden | auto | scroll | clip on either axis).
+ * Falls back to the full viewport rect when no such ancestor exists.
+ *
+ * Use this instead of \`window.innerWidth/innerHeight\` when calculating
+ * popup collision boundaries so that containers like sidebars or
+ * fixed-height scroll panes are respected.
+ */
+export function getClippingRect(element: HTMLElement): DOMRect {
+    let parent = element.parentElement;
+    while (parent && parent !== document.documentElement) {
+        const style = window.getComputedStyle(parent);
+        if (
+            /^(hidden|auto|scroll|clip)$/.test(style.overflowX) ||
+            /^(hidden|auto|scroll|clip)$/.test(style.overflowY)
+        ) {
+            return parent.getBoundingClientRect();
+        }
+        parent = parent.parentElement;
+    }
+    return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+}
+
+/**
+ * Check if the user prefers reduced motion via the OS-level accessibility setting.
+ */
+export function prefersReducedMotion(): boolean {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
 `;
 }

package/src/utils/config.ts

@@ -29,7 +29,7 @@ export function getDefaultConfig(): Config {
         },
         aliases: {
             components: '@/components',
-            utils: '@/components/lib/utils',
+            utils: '@/components/lib',
             ui: '@/components/ui',
         },
     };

package/src/utils/shortcut-registry.ts

@@ -24,9 +24,8 @@ function resolveProjectPath(cwd: string, inputPath: string): string {
 }
 
 function getShortcutRegistryIndexPath(cwd: string, config: Config): string {
-    const utilsFilePath = resolveProjectPath(cwd, aliasToProjectPath(config.aliases.utils) + '.ts');
-    const utilsDir = path.dirname(utilsFilePath);
-    return path.join(utilsDir, 'shortcut-registry.index.ts');
+    const libDir = resolveProjectPath(cwd, aliasToProjectPath(config.aliases.utils));
+    return path.join(libDir, 'shortcut-registry.index.ts');
 }
 
 export async function writeShortcutRegistryIndex(
@@ -41,10 +40,7 @@ export async function writeShortcutRegistryIndex(
         .sort((a, b) => a.exportName.localeCompare(b.exportName));
 
     const uiAlias = config.aliases.ui;
-    const utilsAliasDir = config.aliases.utils.includes('/')
-        ? config.aliases.utils.slice(0, config.aliases.utils.lastIndexOf('/'))
-        : config.aliases.utils;
-    const shortcutServiceImport = `${utilsAliasDir}/shortcut-binding.service`;
+    const shortcutServiceImport = `${config.aliases.utils}/shortcut-binding.service`;
 
     const imports = uniqueEntries
         .map(entry => {