@gilav21/shadcn-angular 0.0.15 → 0.0.17

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;
-}
+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();
+}
 
-export async function init(options: InitOptions) {
+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',
-            },
-        ]);
+            {
+                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',
+        config = {
+            $schema: 'https://shadcn-angular.dev/schema.json',
             style: 'default',
             tailwind: {
                 css: responses.globalCss,
@@ -144,9 +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/', '@/'),
-            },
-        };
-    }
+            },
+        };
+        createShortcutRegistry = responses.createShortcutRegistry ?? true;
+    }
 
     const spinner = ora('Initializing project...').start();
 
@@ -162,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')) {
@@ -189,25 +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',
             '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...';

package/src/registry/index.ts

@@ -6,6 +6,12 @@ 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;
+    sourceFile: string;
+  }[];
 }
 
 export type ComponentName = keyof typeof registry;
@@ -49,6 +55,7 @@ export const registry: Record<string, ComponentDefinition> = {
   button: {
     name: 'button',
     files: ['button.component.ts'],
+    dependencies: ['ripple'],
   },
   'button-group': {
     name: 'button-group',
@@ -89,6 +96,13 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'command',
     files: ['command.component.ts'],
     dependencies: ['dialog'],
+    shortcutDefinitions: [
+      {
+        exportName: 'COMMAND_DIALOG_SHORTCUT_DEFINITIONS',
+        componentName: 'command-dialog',
+        sourceFile: 'command.component.ts',
+      },
+    ],
   },
   'context-menu': {
     name: 'context-menu',
@@ -142,6 +156,7 @@ export const registry: Record<string, ComponentDefinition> = {
       'component-outlet',
       'icon',
     ],
+    libFiles: ['xlsx.ts'],
   },
   dialog: {
     name: 'dialog',
@@ -353,7 +368,7 @@ export const registry: Record<string, ComponentDefinition> = {
   'emoji-picker': {
     name: 'emoji-picker',
     files: ['emoji-picker.component.ts', 'emoji-data.ts'],
-    dependencies: ['button', 'input', 'scroll-area', 'popover'],
+    dependencies: ['input', 'scroll-area', 'tooltip'],
   },
   'rich-text-editor': {
     name: 'rich-text-editor',
@@ -362,18 +377,31 @@ export const registry: Record<string, ComponentDefinition> = {
       'rich-text-toolbar.component.ts',
       'rich-text-sanitizer.service.ts',
       'rich-text-markdown.service.ts',
+      'rich-text-paste-normalizer.service.ts',
+      'rich-text-command-registry.service.ts',
       'rich-text-mention.component.ts',
       'rich-text-image-resizer.component.ts',
+      'rich-text-locales.ts',
     ],
     dependencies: [
       'button',
       'separator',
       'popover',
       'emoji-picker',
+      'autocomplete',
       'select',
       'input',
+      'dialog',
       'scroll-area',
     ],
+    libFiles: ['pdf-parser.ts', 'image-validator.ts', 'svg-sanitizer.ts'],
+    shortcutDefinitions: [
+      {
+        exportName: 'RICH_TEXT_SHORTCUT_DEFINITIONS',
+        componentName: 'rich-text-editor',
+        sourceFile: 'rich-text-editor.component.ts',
+      },
+    ],
   },
   // Chart Components
   'pie-chart': {
@@ -475,4 +503,75 @@ export const registry: Record<string, ComponentDefinition> = {
     files: ['split-button.component.ts'],
     dependencies: ['button', 'dropdown-menu'],
   },
+  // Animations
+  'gradient-text': {
+    name: 'gradient-text',
+    files: ['gradient-text.component.ts'],
+  },
+  'flip-text': {
+    name: 'flip-text',
+    files: ['flip-text.component.ts'],
+  },
+  meteors: {
+    name: 'meteors',
+    files: ['meteors.component.ts'],
+  },
+  'shine-border': {
+    name: 'shine-border',
+    files: ['shine-border.component.ts'],
+  },
+  'scroll-progress': {
+    name: 'scroll-progress',
+    files: ['scroll-progress.component.ts'],
+  },
+  'blur-fade': {
+    name: 'blur-fade',
+    files: ['blur-fade.component.ts'],
+  },
+  ripple: {
+    name: 'ripple',
+    files: ['ripple.directive.ts'],
+  },
+  marquee: {
+    name: 'marquee',
+    files: ['marquee.component.ts'],
+  },
+  'word-rotate': {
+    name: 'word-rotate',
+    files: ['word-rotate.component.ts'],
+  },
+  'morphing-text': {
+    name: 'morphing-text',
+    files: ['morphing-text.component.ts'],
+  },
+  'typing-animation': {
+    name: 'typing-animation',
+    files: ['typing-animation.component.ts'],
+  },
+  'wobble-card': {
+    name: 'wobble-card',
+    files: ['wobble-card.component.ts'],
+  },
+  magnetic: {
+    name: 'magnetic',
+    files: ['magnetic.directive.ts'],
+  },
+  orbit: {
+    name: 'orbit',
+    files: ['orbit.component.ts'],
+  },
+  'stagger-children': {
+    name: 'stagger-children',
+    files: ['stagger-children.component.ts'],
+  },
+  particles: {
+    name: 'particles',
+    files: ['particles.component.ts'],
+  },
+  // Kanban
+  kanban: {
+    name: 'kanban',
+    files: ['kanban.component.ts'],
+    dependencies: ['badge', 'avatar', 'scroll-area', 'separator'],
+  },
 };

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/shortcut-registry.ts

@@ -0,0 +1,79 @@
+import fs from 'fs-extra';
+import path from 'path';
+import type { Config } from './config.js';
+
+export interface ShortcutRegistryEntry {
+    exportName: string;
+    componentName: string;
+    sourceFile: string;
+}
+
+function aliasToProjectPath(aliasOrPath: string): string {
+    return aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+}
+
+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 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');
+}
+
+export async function writeShortcutRegistryIndex(
+    cwd: string,
+    config: Config,
+    entries: ShortcutRegistryEntry[],
+): Promise<string> {
+    const registryPath = getShortcutRegistryIndexPath(cwd, config);
+    await fs.ensureDir(path.dirname(registryPath));
+
+    const uniqueEntries = Array.from(new Map(entries.map(entry => [entry.exportName, entry])).values())
+        .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 imports = uniqueEntries
+        .map(entry => {
+            const importPath = `${uiAlias}/${entry.sourceFile.replace(/\.ts$/, '')}`;
+            return `import { ${entry.exportName} } from '${importPath}';`;
+        })
+        .join('\n');
+
+    const catalogItems = uniqueEntries
+        .map(entry => `  { componentName: '${entry.componentName}', definitions: ${entry.exportName} },`)
+        .join('\n');
+
+    const content = `// Auto-generated by shadcn-angular CLI. Do not edit manually.
+import type { ShortcutBindingService, ShortcutDefinition } from '${shortcutServiceImport}';
+${imports ? `${imports}\n` : ''}
+export const GENERATED_SHORTCUT_CATALOG: ReadonlyArray<{
+  componentName: string;
+  definitions: ReadonlyArray<ShortcutDefinition>;
+}> = [
+${catalogItems}
+];
+
+export function registerGeneratedShortcutCatalog(shortcuts: ShortcutBindingService): void {
+  for (const entry of GENERATED_SHORTCUT_CATALOG) {
+    shortcuts.defineShortcuts(entry.componentName, [...entry.definitions]);
+  }
+}
+`;
+
+    await fs.writeFile(registryPath, content);
+    return registryPath;
+}