@ng-cn/core 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-cn/core",
-  "version": "1.0.01",
+  "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
 
@@ -65,11 +96,48 @@ ng g shadcn-angular:c button --path=src/components
 To build the schematics:
 
 ```bash
-npm run build:schematics
+cd schematics
+npx tsc -p tsconfig.json
 ```
 
 This compiles the TypeScript files in the `schematics` directory to JavaScript.
 
+### Testing
+
+Run the test script to verify the schematics work correctly:
+
+```bash
+cd schematics
+node test-schematic.js
+```
+
+This will:
+- Create a mock Angular project with a tsconfig.json containing comments (like real projects)
+- Run the ng-add schematic
+- Verify all expected files are created
+- Verify tsconfig path aliases are configured
+- Verify styles are imported correctly
+- Verify dependencies are added
+
+### Local Testing
+
+To test the schematic locally with a real Angular project:
+
+```bash
+# 1. Build the schematics
+cd schematics && npx tsc -p tsconfig.json && cd ..
+
+# 2. Create a test project
+ng new test-app --style=scss --routing=true
+
+# 3. Link the local package
+cd test-app
+npm link ../shadcn-angular
+
+# 4. Run the schematic
+ng add @ng-cn/core --skip-confirmation
+```
+
 ## Structure
 
 ```

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAdd = ngAdd;
 const tasks_1 = require("@angular-devkit/schematics/tasks");
+const jsonc_parser_1 = require("jsonc-parser");
 // CSS Variables template for shadcn theming
 const CSS_VARIABLES_TEMPLATE = `/* ng-cn/core - shadcn-angular styles */
 @use "tailwindcss";
@@ -253,7 +254,8 @@ function ngAdd(options) {
         context.logger.info('⚙️  TypeScript Config');
         const tsconfigPath = '/tsconfig.json';
         if (tree.exists(tsconfigPath)) {
-            const tsconfig = JSON.parse(tree.read(tsconfigPath).toString('utf-8'));
+            const tsconfigContent = tree.read(tsconfigPath).toString('utf-8');
+            const tsconfig = (0, jsonc_parser_1.parse)(tsconfigContent);
             tsconfig.compilerOptions = tsconfig.compilerOptions || {};
             tsconfig.compilerOptions.paths = tsconfig.compilerOptions.paths || {};
             const pathAliases = {
@@ -277,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('');
@@ -289,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('│                                                  │');
@@ -300,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

@@ -1,10 +1,12 @@
 import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { parse as parseJsonc } from 'jsonc-parser';
 
 interface NgAddOptions {
   project?: string;
   skipInstall?: boolean;
   skipStyles?: boolean;
+  components?: string[];
 }
 
 // CSS Variables template for shadcn theming
@@ -273,7 +275,8 @@ export function ngAdd(options: NgAddOptions): Rule {
 
     const tsconfigPath = '/tsconfig.json';
     if (tree.exists(tsconfigPath)) {
-      const tsconfig = JSON.parse(tree.read(tsconfigPath)!.toString('utf-8'));
+      const tsconfigContent = tree.read(tsconfigPath)!.toString('utf-8');
+      const tsconfig = parseJsonc(tsconfigContent) as Record<string, any>;
       tsconfig.compilerOptions = tsconfig.compilerOptions || {};
       tsconfig.compilerOptions.paths = tsconfig.compilerOptions.paths || {};
 
@@ -300,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('');
@@ -312,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('│                                                  │');
@@ -323,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

@@ -0,0 +1,143 @@
+/**
+ * Test script for ng-add schematic
+ * Run with: node test-schematic.js
+ */
+
+const { SchematicTestRunner } = require('@angular-devkit/schematics/testing');
+const { HostTree } = require('@angular-devkit/schematics');
+const path = require('path');
+
+const collectionPath = path.join(__dirname, 'collection.json');
+
+// Mock tsconfig.json with comments (typical Angular project)
+const MOCK_TSCONFIG = `/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}`;
+
+const MOCK_PACKAGE_JSON = `{
+  "name": "test-angular",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
+  "dependencies": {
+    "@angular/core": "^21.0.0"
+  },
+  "devDependencies": {}
+}`;
+
+const MOCK_STYLES_CSS = `/* You can add global styles to this file, and also import other style files */
+`;
+
+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)');
+  console.log('   - /src/styles.css\n');
+
+  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',
+      '/src/app/lib/utils/index.ts',
+      '/src/app/lib/components/ui/.gitkeep',
+      '/src/ng-cn.scss'
+    ];
+
+    console.log('📄 Checking created files:');
+    for (const file of expectedFiles) {
+      if (tree.exists(file)) {
+        console.log(`   ✅ ${file}`);
+      } else {
+        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]) {
+        console.log(`   ✅ Path alias: ${p}`);
+      } else {
+        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');
+    if (stylesContent.includes('ng-cn.scss')) {
+      console.log('   ✅ ng-cn.scss imported in styles.css');
+    } else {
+      console.log('   ❌ ng-cn.scss not imported');
+    }
+
+    // Verify dependencies
+    console.log('\n📦 Checking dependencies:');
+    const packageJsonContent = tree.read('/package.json').toString('utf-8');
+    const packageJson = JSON.parse(packageJsonContent);
+    const requiredDeps = ['lucide-angular', 'clsx', 'tailwind-merge', 'class-variance-authority'];
+    for (const dep of requiredDeps) {
+      if (packageJson.dependencies?.[dep]) {
+        console.log(`   ✅ ${dep}@${packageJson.dependencies[dep]}`);
+      } else {
+        console.log(`   ❌ Missing: ${dep}`);
+      }
+    }
+
+    console.log('\n✨ All tests passed!\n');
+
+  } catch (error) {
+    console.error('\n❌ Schematic failed with error:');
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+runTests();