@gilav21/shadcn-angular 0.0.1

package/dist/commands/add.d.ts

@@ -0,0 +1,9 @@
+interface AddOptions {
+    yes?: boolean;
+    overwrite?: boolean;
+    all?: boolean;
+    path?: string;
+    remote?: boolean;
+}
+export declare function add(components: string[], options: AddOptions): Promise<void>;
+export {};

package/dist/commands/add.js

@@ -0,0 +1,161 @@
+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 { getConfig } from '../utils/config.js';
+import { registry } from '../registry/index.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/main/packages/components/ui';
+// Components source directory (relative to CLI dist folder) for local dev
+function getLocalComponentsDir() {
+    // From dist/commands/add.js -> packages/components/ui
+    const fromDist = path.resolve(__dirname, '../../../components/ui');
+    if (fs.existsSync(fromDist)) {
+        return fromDist;
+    }
+    // Fallback: from src/commands/add.ts -> packages/components/ui
+    const fromSrc = path.resolve(__dirname, '../../../components/ui');
+    if (fs.existsSync(fromSrc)) {
+        return fromSrc;
+    }
+    return null;
+}
+async function fetchComponentContent(file, options) {
+    const localDir = getLocalComponentsDir();
+    // 1. Prefer local if available and not forced remote
+    if (localDir && !options.remote) {
+        const localPath = path.join(localDir, file);
+        if (await fs.pathExists(localPath)) {
+            return fs.readFile(localPath, 'utf-8');
+        }
+    }
+    // 2. Fetch from remote registry
+    const url = `${REGISTRY_BASE_URL}/${file}`;
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch component from ${url}: ${response.statusText}`);
+        }
+        return await response.text();
+    }
+    catch (error) {
+        if (localDir) {
+            throw new Error(`Component file not found locally or remotely: ${file}`);
+        }
+        throw error;
+    }
+}
+export async function add(components, options) {
+    const cwd = process.cwd();
+    // Load config
+    const config = await getConfig(cwd);
+    if (!config) {
+        console.log(chalk.red('Error: components.json not found.'));
+        console.log(chalk.dim('Run `npx shadcn-angular init` first.'));
+        process.exit(1);
+    }
+    // Get components to add
+    let componentsToAdd = [];
+    if (options.all) {
+        componentsToAdd = Object.keys(registry);
+    }
+    else if (components.length === 0) {
+        const { selected } = await prompts({
+            type: 'multiselect',
+            name: 'selected',
+            message: 'Which components would you like to add?',
+            choices: Object.keys(registry).map(name => ({
+                title: name,
+                value: name,
+            })),
+            hint: '- Space to select, Enter to confirm',
+        });
+        componentsToAdd = selected;
+    }
+    else {
+        componentsToAdd = components;
+    }
+    if (!componentsToAdd || componentsToAdd.length === 0) {
+        console.log(chalk.dim('No components selected.'));
+        return;
+    }
+    // Validate components exist
+    const invalidComponents = componentsToAdd.filter(c => !registry[c]);
+    if (invalidComponents.length > 0) {
+        console.log(chalk.red(`Invalid component(s): ${invalidComponents.join(', ')}`));
+        console.log(chalk.dim('Available components: ' + Object.keys(registry).join(', ')));
+        process.exit(1);
+    }
+    // Resolve dependencies
+    const allComponents = new Set();
+    const resolveDeps = (name) => {
+        if (allComponents.has(name))
+            return;
+        allComponents.add(name);
+        const component = registry[name];
+        if (component.dependencies) {
+            component.dependencies.forEach(dep => resolveDeps(dep));
+        }
+    };
+    componentsToAdd.forEach(c => resolveDeps(c));
+    const targetDir = options.path
+        ? path.join(cwd, options.path)
+        : path.join(cwd, 'src/components/ui');
+    // Check for existing files
+    const existing = [];
+    for (const name of allComponents) {
+        const component = registry[name];
+        for (const file of component.files) {
+            const targetPath = path.join(targetDir, file);
+            if (await fs.pathExists(targetPath)) {
+                existing.push(file);
+            }
+        }
+    }
+    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;
+        }
+    }
+    const spinner = ora('Installing components...').start();
+    try {
+        await fs.ensureDir(targetDir);
+        for (const name of allComponents) {
+            const component = registry[name];
+            for (const file of component.files) {
+                const targetPath = path.join(targetDir, file);
+                try {
+                    const content = await fetchComponentContent(file, options);
+                    await fs.ensureDir(path.dirname(targetPath));
+                    await fs.writeFile(targetPath, content);
+                    spinner.text = `Added ${file}`;
+                }
+                catch (err) {
+                    spinner.warn(`Could not add ${file}: ${err.message}`);
+                }
+            }
+        }
+        spinner.succeed(chalk.green(`Added ${allComponents.size} component(s)`));
+        console.log('\n' + chalk.dim('Components added:'));
+        allComponents.forEach(name => {
+            console.log(chalk.dim('  - ') + chalk.cyan(name));
+        });
+        console.log('');
+    }
+    catch (error) {
+        spinner.fail('Failed to add components');
+        console.error(error);
+        process.exit(1);
+    }
+}

package/dist/commands/init.d.ts

@@ -0,0 +1,6 @@
+interface InitOptions {
+    yes?: boolean;
+    defaults?: boolean;
+}
+export declare function init(options: InitOptions): Promise<void>;
+export {};

package/dist/commands/init.js

@@ -0,0 +1,135 @@
+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 } from '../utils/config.js';
+import { getStylesTemplate } from '../templates/styles.js';
+import { getUtilsTemplate } from '../templates/utils.js';
+export async function init(options) {
+    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)) {
+        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;
+        }
+    }
+    let config;
+    if (options.defaults || options.yes) {
+        config = getDefaultConfig();
+    }
+    else {
+        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' },
+                ],
+                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,
+            },
+            {
+                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',
+                message: 'Where is your global CSS file?',
+                initial: 'src/styles.scss',
+            },
+        ]);
+        config = {
+            $schema: 'https://shadcn-angular.dev/schema.json',
+            style: responses.style,
+            tailwind: {
+                css: responses.globalCss,
+                baseColor: responses.baseColor,
+                cssVariables: true,
+            },
+            aliases: {
+                components: '@/components',
+                utils: '@/lib/utils',
+                ui: '@/components/ui',
+            },
+            iconLibrary: 'lucide-angular',
+        };
+    }
+    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
+        const utilsDir = path.join(cwd, config.aliases.utils.replace('@/', 'src/').replace('/utils', ''));
+        await fs.ensureDir(utilsDir);
+        await fs.writeFile(path.join(utilsDir, 'utils.ts'), getUtilsTemplate());
+        spinner.text = 'Created utils.ts';
+        // Create/update styles file
+        const stylesPath = path.join(cwd, config.tailwind.css);
+        const existingStyles = await fs.pathExists(stylesPath)
+            ? await fs.readFile(stylesPath, 'utf-8')
+            : '';
+        if (!existingStyles.includes('--background:')) {
+            await fs.writeFile(stylesPath, getStylesTemplate(config.tailwind.baseColor) + '\n' + existingStyles);
+            spinner.text = 'Updated styles with theme variables';
+        }
+        // Create components/ui directory
+        const uiDir = path.join(cwd, 'src/components/ui');
+        await fs.ensureDir(uiDir);
+        spinner.text = 'Created components directory';
+        // Install dependencies
+        spinner.text = 'Installing dependencies...';
+        await execa('npm', ['install', 'clsx', 'tailwind-merge', 'class-variance-authority', '@angular/cdk', 'lucide-angular'], { cwd });
+        spinner.succeed(chalk.green('Project initialized successfully!'));
+        console.log('\n' + chalk.bold('Next steps:'));
+        console.log(chalk.dim('  1. Add components: ') + chalk.cyan('npx shadcn-angular add button'));
+        console.log(chalk.dim('  2. Import and use in your templates'));
+        console.log('');
+    }
+    catch (error) {
+        spinner.fail('Failed to initialize project');
+        console.error(error);
+        process.exit(1);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { init } from './commands/init.js';
+import { add } from './commands/add.js';
+const program = new Command();
+program
+    .name('shadcn-angular')
+    .description('CLI for adding shadcn-angular components to your Angular project')
+    .version('0.0.1');
+program
+    .command('init')
+    .description('Initialize shadcn-angular in your project')
+    .option('-y, --yes', 'Skip confirmation prompt')
+    .option('-d, --defaults', 'Use default configuration')
+    .action(init);
+program
+    .command('add')
+    .description('Add a component to your project')
+    .argument('[components...]', 'The components to add')
+    .option('-y, --yes', 'Skip confirmation prompt')
+    .option('-o, --overwrite', 'Overwrite existing files')
+    .option('-a, --all', 'Add all available components')
+    .option('-p, --path <path>', 'The path to add the component to')
+    .option('--remote', 'Force remote fetch from GitHub registry')
+    .action(add);
+program.parse();

package/dist/registry/index.d.ts

@@ -0,0 +1,7 @@
+export interface ComponentDefinition {
+    name: string;
+    files: string[];
+    dependencies?: string[];
+}
+export type ComponentName = keyof typeof registry;
+export declare const registry: Record<string, ComponentDefinition>;

package/dist/registry/index.js

@@ -0,0 +1,224 @@
+// Component Registry - Defines available components and their file mappings
+// Actual component files are stored in packages/components/ui/
+// Registry maps component names to their file definitions
+// Files are relative to the components/ui directory
+export const registry = {
+    accordion: {
+        name: 'accordion',
+        files: ['accordion.component.ts'],
+    },
+    alert: {
+        name: 'alert',
+        files: ['alert.component.ts'],
+    },
+    'alert-dialog': {
+        name: 'alert-dialog',
+        files: ['alert-dialog.component.ts'],
+        dependencies: ['button'],
+    },
+    'aspect-ratio': {
+        name: 'aspect-ratio',
+        files: ['aspect-ratio.component.ts'],
+    },
+    avatar: {
+        name: 'avatar',
+        files: ['avatar.component.ts'],
+    },
+    badge: {
+        name: 'badge',
+        files: ['badge.component.ts'],
+    },
+    breadcrumb: {
+        name: 'breadcrumb',
+        files: ['breadcrumb.component.ts'],
+    },
+    button: {
+        name: 'button',
+        files: ['button.component.ts'],
+    },
+    'button-group': {
+        name: 'button-group',
+        files: ['button-group.component.ts'],
+        dependencies: ['button', 'separator'],
+    },
+    calendar: {
+        name: 'calendar',
+        files: ['calendar.component.ts'],
+        dependencies: ['button'],
+    },
+    card: {
+        name: 'card',
+        files: ['card.component.ts'],
+    },
+    carousel: {
+        name: 'carousel',
+        files: ['carousel.component.ts'],
+        dependencies: ['button'],
+    },
+    checkbox: {
+        name: 'checkbox',
+        files: ['checkbox.component.ts'],
+    },
+    collapsible: {
+        name: 'collapsible',
+        files: ['collapsible.component.ts'],
+    },
+    command: {
+        name: 'command',
+        files: ['command.component.ts'],
+        dependencies: ['dialog', 'separator'],
+    },
+    'context-menu': {
+        name: 'context-menu',
+        files: ['context-menu.component.ts'],
+    },
+    'date-picker': {
+        name: 'date-picker',
+        files: ['date-picker.component.ts'],
+        dependencies: ['calendar', 'popover', 'button'],
+    },
+    dialog: {
+        name: 'dialog',
+        files: ['dialog.component.ts'],
+    },
+    drawer: {
+        name: 'drawer',
+        files: ['drawer.component.ts'],
+    },
+    'dropdown-menu': {
+        name: 'dropdown-menu',
+        files: ['dropdown-menu.component.ts'],
+    },
+    empty: {
+        name: 'empty',
+        files: ['empty.component.ts'],
+    },
+    field: {
+        name: 'field',
+        files: ['field.component.ts'],
+    },
+    'hover-card': {
+        name: 'hover-card',
+        files: ['hover-card.component.ts'],
+    },
+    input: {
+        name: 'input',
+        files: ['input.component.ts'],
+    },
+    'input-group': {
+        name: 'input-group',
+        files: ['input-group.component.ts'],
+        dependencies: ['input', 'button'],
+    },
+    'input-otp': {
+        name: 'input-otp',
+        files: ['input-otp.component.ts'],
+    },
+    kbd: {
+        name: 'kbd',
+        files: ['kbd.component.ts'],
+    },
+    label: {
+        name: 'label',
+        files: ['label.component.ts'],
+    },
+    menubar: {
+        name: 'menubar',
+        files: ['menubar.component.ts'],
+    },
+    'native-select': {
+        name: 'native-select',
+        files: ['native-select.component.ts'],
+    },
+    'navigation-menu': {
+        name: 'navigation-menu',
+        files: ['navigation-menu.component.ts'],
+    },
+    pagination: {
+        name: 'pagination',
+        files: ['pagination.component.ts'],
+        dependencies: ['button'],
+    },
+    popover: {
+        name: 'popover',
+        files: ['popover.component.ts'],
+    },
+    progress: {
+        name: 'progress',
+        files: ['progress.component.ts'],
+    },
+    'radio-group': {
+        name: 'radio-group',
+        files: ['radio-group.component.ts'],
+    },
+    resizable: {
+        name: 'resizable',
+        files: ['resizable.component.ts'],
+    },
+    'scroll-area': {
+        name: 'scroll-area',
+        files: ['scroll-area.component.ts'],
+    },
+    select: {
+        name: 'select',
+        files: ['select.component.ts'],
+    },
+    separator: {
+        name: 'separator',
+        files: ['separator.component.ts'],
+    },
+    sheet: {
+        name: 'sheet',
+        files: ['sheet.component.ts'],
+    },
+    sidebar: {
+        name: 'sidebar',
+        files: ['sidebar.component.ts'],
+        dependencies: ['button', 'sheet', 'separator', 'tooltip', 'input', 'skeleton'],
+    },
+    skeleton: {
+        name: 'skeleton',
+        files: ['skeleton.component.ts'],
+    },
+    slider: {
+        name: 'slider',
+        files: ['slider.component.ts'],
+    },
+    spinner: {
+        name: 'spinner',
+        files: ['spinner.component.ts'],
+    },
+    switch: {
+        name: 'switch',
+        files: ['switch.component.ts'],
+    },
+    table: {
+        name: 'table',
+        files: ['table.component.ts'],
+    },
+    tabs: {
+        name: 'tabs',
+        files: ['tabs.component.ts'],
+    },
+    textarea: {
+        name: 'textarea',
+        files: ['textarea.component.ts'],
+    },
+    toast: {
+        name: 'toast',
+        files: ['toast.component.ts'],
+    },
+    toggle: {
+        name: 'toggle',
+        files: ['toggle.component.ts'],
+    },
+    'toggle-group': {
+        name: 'toggle-group',
+        files: ['toggle-group.component.ts'],
+        dependencies: ['toggle'],
+    },
+    tooltip: {
+        name: 'tooltip',
+        files: ['tooltip.component.ts'],
+    },
+};

package/dist/templates/styles.d.ts

@@ -0,0 +1,3 @@
+type BaseColor = 'neutral' | 'slate' | 'stone' | 'gray' | 'zinc';
+export declare function getStylesTemplate(baseColor?: BaseColor): string;
+export {};