@ng-cn/core 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-cn/core",
-  "version": "1.0.02",
+  "version": "1.0.03",
   "description": "Beautifully designed Angular components built with Tailwind CSS v4 - The official Angular port of shadcn/ui",
   "keywords": [
     "angular",

package/schematics/README.md

@@ -9,12 +9,43 @@ Angular schematics for installing shadcn-angular components individually.
 First, add shadcn-angular to your project:
 
 ```bash
-ng add shadcn-angular
+ng add @ng-cn/core
 ```
 
 This will:
 - Install required dependencies (lucide-angular, class-variance-authority, clsx, tailwind-merge, @angular/cdk)
 - Set up the project for shadcn-angular components
+- **Prompt you to select components** to install initially (multi-select checkbox)
+
+### Interactive Component Selection
+
+When running `ng add @ng-cn/core`, you'll be presented with an interactive multi-select prompt:
+
+```
+? Which components would you like to add? (Press space to select, enter to confirm)
+❯◯ Button - Displays a button or a component that looks like a button
+ ◯ Card - Displays a card with header, content, and footer
+ ◯ Input - Displays a form input field
+ ◯ Label - Renders an accessible label associated with controls
+ ◯ Checkbox - A control that allows toggling between checked and not checked
+ ...
+```
+
+Use **space** to select/deselect components and **enter** to confirm your selection.
+
+### Skip Component Selection
+
+If you want to skip the component selection prompt:
+
+```bash
+ng add @ng-cn/core --components=button,card,input
+```
+
+Or to skip adding any components initially:
+
+```bash
+ng add @ng-cn/core --components=
+```
 
 ### Install Individual Components
 

package/schematics/ng-add/index.d.ts

@@ -3,6 +3,7 @@ interface NgAddOptions {
     project?: string;
     skipInstall?: boolean;
     skipStyles?: boolean;
+    components?: string[];
 }
 export declare function ngAdd(options: NgAddOptions): Rule;
 export {};

package/schematics/ng-add/index.js

@@ -279,6 +279,27 @@ function ngAdd(options) {
                 context.logger.info('   ✓ Path aliases already set');
             }
         }
+        // Install selected components
+        if (options.components && options.components.length > 0) {
+            context.logger.info('');
+            context.logger.info('📦 Selected Components');
+            const packageJson = JSON.parse(tree.read(packageJsonPath).toString('utf-8'));
+            for (const component of options.components) {
+                const packageName = `@ng-cn/${component}`;
+                if (!packageJson.dependencies?.[packageName]) {
+                    packageJson.dependencies = packageJson.dependencies || {};
+                    packageJson.dependencies[packageName] = 'latest';
+                    context.logger.info(`   + ${packageName}`);
+                }
+                else {
+                    context.logger.info(`   ✓ ${packageName} already installed`);
+                }
+            }
+            tree.overwrite(packageJsonPath, JSON.stringify(packageJson, null, 2));
+            if (!options.skipInstall) {
+                context.addTask(new tasks_1.NodePackageInstallTask());
+            }
+        }
         // Success message with ASCII art banner
         context.logger.info('');
         context.logger.info('');
@@ -291,10 +312,23 @@ function ngAdd(options) {
         context.logger.info('');
         context.logger.info('  ✅ Setup complete! shadcn for Angular');
         context.logger.info('');
+        // Show selected components summary if any were installed
+        if (options.components && options.components.length > 0) {
+            context.logger.info('╭──────────────────────────────────────────────────╮');
+            context.logger.info('│  ✨ Components installed:                        │');
+            context.logger.info('│                                                  │');
+            for (const component of options.components) {
+                const paddedComponent = `@ng-cn/${component}`.padEnd(40);
+                context.logger.info(`│     ${paddedComponent}│`);
+            }
+            context.logger.info('│                                                  │');
+            context.logger.info('╰──────────────────────────────────────────────────╯');
+            context.logger.info('');
+        }
         context.logger.info('╭──────────────────────────────────────────────────╮');
         context.logger.info('│  🚀 Next steps:                                  │');
         context.logger.info('│                                                  │');
-        context.logger.info('│  1. Add components:                              │');
+        context.logger.info('│  1. Add more components:                         │');
         context.logger.info('│     ng g @ng-cn/core:c button                    │');
         context.logger.info('│     ng g @ng-cn/core:c card                      │');
         context.logger.info('│                                                  │');
@@ -302,7 +336,7 @@ function ngAdd(options) {
         context.logger.info('│     npm i @ng-cn/button @ng-cn/card              │');
         context.logger.info('│                                                  │');
         context.logger.info('│  3. Import and use:                              │');
-        context.logger.info("│     import { Button } from '@/ui/button';        │");
+        context.logger.info("│     import { Button } from '@ng-cn/button';      │");
         context.logger.info('│                                                  │');
         context.logger.info('│  📚 Docs: https://shadcn-angular.tigayon.com     │');
         context.logger.info('╰──────────────────────────────────────────────────╯');

package/schematics/ng-add/index.ts

@@ -6,6 +6,7 @@ interface NgAddOptions {
   project?: string;
   skipInstall?: boolean;
   skipStyles?: boolean;
+  components?: string[];
 }
 
 // CSS Variables template for shadcn theming
@@ -302,6 +303,31 @@ export function ngAdd(options: NgAddOptions): Rule {
       }
     }
 
+    // Install selected components
+    if (options.components && options.components.length > 0) {
+      context.logger.info('');
+      context.logger.info('📦 Selected Components');
+
+      const packageJson = JSON.parse(tree.read(packageJsonPath)!.toString('utf-8'));
+
+      for (const component of options.components) {
+        const packageName = `@ng-cn/${component}`;
+        if (!packageJson.dependencies?.[packageName]) {
+          packageJson.dependencies = packageJson.dependencies || {};
+          packageJson.dependencies[packageName] = 'latest';
+          context.logger.info(`   + ${packageName}`);
+        } else {
+          context.logger.info(`   ✓ ${packageName} already installed`);
+        }
+      }
+
+      tree.overwrite(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+      if (!options.skipInstall) {
+        context.addTask(new NodePackageInstallTask());
+      }
+    }
+
     // Success message with ASCII art banner
     context.logger.info('');
     context.logger.info('');
@@ -314,10 +340,25 @@ export function ngAdd(options: NgAddOptions): Rule {
     context.logger.info('');
     context.logger.info('  ✅ Setup complete! shadcn for Angular');
     context.logger.info('');
+
+    // Show selected components summary if any were installed
+    if (options.components && options.components.length > 0) {
+      context.logger.info('╭──────────────────────────────────────────────────╮');
+      context.logger.info('│  ✨ Components installed:                        │');
+      context.logger.info('│                                                  │');
+      for (const component of options.components) {
+        const paddedComponent = `@ng-cn/${component}`.padEnd(40);
+        context.logger.info(`│     ${paddedComponent}│`);
+      }
+      context.logger.info('│                                                  │');
+      context.logger.info('╰──────────────────────────────────────────────────╯');
+      context.logger.info('');
+    }
+
     context.logger.info('╭──────────────────────────────────────────────────╮');
     context.logger.info('│  🚀 Next steps:                                  │');
     context.logger.info('│                                                  │');
-    context.logger.info('│  1. Add components:                              │');
+    context.logger.info('│  1. Add more components:                         │');
     context.logger.info('│     ng g @ng-cn/core:c button                    │');
     context.logger.info('│     ng g @ng-cn/core:c card                      │');
     context.logger.info('│                                                  │');
@@ -325,7 +366,7 @@ export function ngAdd(options: NgAddOptions): Rule {
     context.logger.info('│     npm i @ng-cn/button @ng-cn/card              │');
     context.logger.info('│                                                  │');
     context.logger.info('│  3. Import and use:                              │');
-    context.logger.info("│     import { Button } from '@/ui/button';        │");
+    context.logger.info("│     import { Button } from '@ng-cn/button';      │");
     context.logger.info('│                                                  │');
     context.logger.info('│  📚 Docs: https://shadcn-angular.tigayon.com     │');
     context.logger.info('╰──────────────────────────────────────────────────╯');

package/schematics/ng-add/schema.json

@@ -20,6 +20,49 @@
       "type": "boolean",
       "default": false,
       "description": "Skip creating ng-cn.scss styles file."
+    },
+    "components": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "default": [],
+      "description": "Components to install initially.",
+      "x-prompt": {
+        "message": "Which components would you like to add? (Press space to select, enter to confirm)",
+        "type": "list",
+        "multiselect": true,
+        "items": [
+          { "value": "button", "label": "Button - Displays a button or a component that looks like a button" },
+          { "value": "card", "label": "Card - Displays a card with header, content, and footer" },
+          { "value": "input", "label": "Input - Displays a form input field" },
+          { "value": "label", "label": "Label - Renders an accessible label associated with controls" },
+          { "value": "checkbox", "label": "Checkbox - A control that allows toggling between checked and not checked" },
+          { "value": "select", "label": "Select - Displays a list of options for the user to pick from" },
+          { "value": "dialog", "label": "Dialog - A window overlaid on the primary window" },
+          { "value": "toast", "label": "Toast - A succinct message that is displayed temporarily" },
+          { "value": "dropdown-menu", "label": "Dropdown Menu - Displays a menu when triggered" },
+          { "value": "tabs", "label": "Tabs - A set of layered sections of content" },
+          { "value": "table", "label": "Table - A responsive table component" },
+          { "value": "avatar", "label": "Avatar - An image element with a fallback for representing the user" },
+          { "value": "badge", "label": "Badge - Displays a badge or a component that looks like a badge" },
+          { "value": "alert", "label": "Alert - Displays a callout for user attention" },
+          { "value": "tooltip", "label": "Tooltip - A popup that displays information related to an element" },
+          { "value": "progress", "label": "Progress - Displays an indicator showing the completion progress" },
+          { "value": "skeleton", "label": "Skeleton - Use to show a placeholder while content is loading" },
+          { "value": "separator", "label": "Separator - Visually or semantically separates content" },
+          { "value": "switch", "label": "Switch - A control that allows toggling between checked and not checked" },
+          { "value": "textarea", "label": "Textarea - Displays a form textarea" },
+          { "value": "accordion", "label": "Accordion - A vertically stacked set of interactive headings" },
+          { "value": "sheet", "label": "Sheet - Extends the Dialog component to display complementary content" },
+          { "value": "popover", "label": "Popover - Displays rich content in a portal, triggered by a button" },
+          { "value": "calendar", "label": "Calendar - A date field component for entering and editing dates" },
+          { "value": "command", "label": "Command - Fast, composable, unstyled command menu" },
+          { "value": "form", "label": "Form - Building forms with validation" },
+          { "value": "sidebar", "label": "Sidebar - A composable, themeable and customizable sidebar" },
+          { "value": "spinner", "label": "Spinner - Loading indicator animations" }
+        ]
+      }
     }
   }
 }

package/schematics/test-schematic.js

@@ -57,15 +57,15 @@ const MOCK_STYLES_CSS = `/* You can add global styles to this file, and also imp
 
 async function runTests() {
   console.log('\n🧪 Testing ng-add schematic...\n');
-  
+
   const runner = new SchematicTestRunner('schematics', collectionPath);
-  
+
   // Create a mock project tree using HostTree
   const appTree = new HostTree();
   appTree.create('/package.json', MOCK_PACKAGE_JSON);
   appTree.create('/tsconfig.json', MOCK_TSCONFIG);
   appTree.create('/src/styles.css', MOCK_STYLES_CSS);
-  
+
   console.log('📁 Created mock project with:');
   console.log('   - /package.json');
   console.log('   - /tsconfig.json (with comments)');
@@ -74,9 +74,9 @@ async function runTests() {
   try {
     // Run the ng-add schematic
     const tree = await runner.runSchematic('ng-add', { skipInstall: true }, appTree);
-    
+
     console.log('✅ Schematic executed successfully!\n');
-    
+
     // Verify files were created
     const expectedFiles = [
       '/src/app/lib/utils/cn.ts',
@@ -84,7 +84,7 @@ async function runTests() {
       '/src/app/lib/components/ui/.gitkeep',
       '/src/ng-cn.scss'
     ];
-    
+
     console.log('📄 Checking created files:');
     for (const file of expectedFiles) {
       if (tree.exists(file)) {
@@ -93,13 +93,13 @@ async function runTests() {
         console.log(`   ❌ Missing: ${file}`);
       }
     }
-    
+
     // Verify tsconfig was updated
     console.log('\n⚙️  Checking tsconfig.json:');
     const tsconfigContent = tree.read('/tsconfig.json').toString('utf-8');
     const tsconfig = JSON.parse(tsconfigContent);
     const paths = tsconfig.compilerOptions?.paths || {};
-    
+
     const expectedPaths = ['@/*', '@/lib/*', '@/ui/*', '@/utils/*'];
     for (const p of expectedPaths) {
       if (paths[p]) {
@@ -108,7 +108,7 @@ async function runTests() {
         console.log(`   ❌ Missing path alias: ${p}`);
       }
     }
-    
+
     // Verify styles were imported
     console.log('\n🎨 Checking styles:');
     const stylesContent = tree.read('/src/styles.css').toString('utf-8');
@@ -117,7 +117,7 @@ async function runTests() {
     } else {
       console.log('   ❌ ng-cn.scss not imported');
     }
-    
+
     // Verify dependencies
     console.log('\n📦 Checking dependencies:');
     const packageJsonContent = tree.read('/package.json').toString('utf-8');
@@ -130,9 +130,9 @@ async function runTests() {
         console.log(`   ❌ Missing: ${dep}`);
       }
     }
-    
+
     console.log('\n✨ All tests passed!\n');
-    
+
   } catch (error) {
     console.error('\n❌ Schematic failed with error:');
     console.error(error);