@gilav21/shadcn-angular 0.0.1

package/src/commands/init.ts

@@ -0,0 +1,155 @@
+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) {
+    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: 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/src/index.ts

@@ -0,0 +1,31 @@
+#!/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/src/registry/index.ts

@@ -0,0 +1,233 @@
+// Component Registry - Defines available components and their file mappings
+// Actual component files are stored in packages/components/ui/
+
+export interface ComponentDefinition {
+  name: string;
+  files: string[]; // Relative paths to component files
+  dependencies?: string[]; // Other components this depends on
+}
+
+export type ComponentName = keyof typeof registry;
+
+// Registry maps component names to their file definitions
+// Files are relative to the components/ui directory
+export const registry: Record<string, ComponentDefinition> = {
+  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'],
+  },
+};