@ng-shangjc/cli 1.0.0-beta

package/README.md

@@ -0,0 +1,216 @@
+# @ng-shangjc/cli
+
+A powerful CLI tool for managing and installing ng-shangjc UI components in your Angular projects.
+
+## Installation
+
+Install the CLI globally:
+
+```bash
+npm install -g @ng-shangjc/cli
+```
+
+Or use npx to run without installation:
+
+```bash
+npx @ng-shangjc/cli <command>
+```
+
+## Prerequisites
+
+- Angular project (angular.json must be present)
+- Node.js 16 or higher
+- npm or yarn package manager
+
+## Commands
+
+### `init`
+
+Initialize shangjc configuration in your Angular project.
+
+```bash
+ng-shangjc init
+```
+
+This command will:
+- Verify you're in an Angular project
+- Create a `shangjc.config.json` configuration file
+- Prompt for component installation preferences
+- Set up your project for component installations
+
+**Configuration options:**
+- **Components Path**: Where to install components (default: `src/ui/shangjc`)
+- **Component Type**: Standalone (recommended) or Module-based
+- **Project Type**: Angular application setup
+- **Theme Configuration**: Default theme and variants
+- **Tailwind Config**: Whether to configure Tailwind CSS
+
+### `install`
+
+Install a specific component into your project.
+
+```bash
+ng-shangjc install <component>
+```
+
+**Options:**
+- `-p, --path <path>`: Override the installation path from config
+
+**Examples:**
+```bash
+# Install button component
+ng-shangjc install button
+
+# Install to custom path
+ng-shangjc install button --path src/components/ui
+
+# Install dialog component
+ng-shangjc install dialog
+```
+
+**Available Components:**
+- `button` - Button component with variants
+- `input` - Input field component
+- `card` - Card container component
+- `switch` - Toggle switch component
+- `dialog` - Modal dialog component
+- `tooltip` - Tooltip component
+- `select` - Select dropdown component
+- `checkbox` - Checkbox component
+- `radio-group` - Radio button group component
+- `textarea` - Textarea component
+- `badge` - Badge component
+- `alert` - Alert/notification component
+
+**Installation Process:**
+1. Validates component availability
+2. Checks for existing installation
+3. Installs dependencies (like @ng-shangjc/utils)
+4. Copies component files to your project
+5. Generates index.ts file
+6. Updates shangjc.config.json
+7. Provides usage instructions
+
+### `variants`
+
+Show variant configurations for components.
+
+```bash
+# Show all component variants
+ng-shangjc variants
+
+# Show variants for specific component
+ng-shangjc variants button
+```
+
+This command displays:
+- Available variants for each component
+- Default variant settings
+- CSS classes for each variant
+- Variant descriptions
+
+## Configuration File
+
+The CLI creates and manages a `shangjc.config.json` file in your project root:
+
+```json
+{
+  "version": "1.0.0",
+  "componentsPath": "src/ui/shangjc",
+  "componentType": "standalone",
+  "projectType": "angular",
+  "theme": {
+    "current": "default",
+    "variants": {
+      "button": ["primary", "secondary", "outline"],
+      "card": ["default", "elevated"]
+    }
+  },
+  "tailwindConfig": true,
+  "installedComponents": ["button", "input"],
+  "utilsVersion": "1.0.0"
+}
+```
+
+## Component Usage
+
+After installing components, you can import and use them in your Angular application:
+
+```typescript
+// Import the component
+import { ButtonComponent } from './ui/shangjc/button';
+
+// Use in your component
+@Component({
+  selector: 'app-example',
+  template: `
+    <shangjc-button variant="primary" size="md">
+      Click me
+    </shangjc-button>
+  `,
+  standalone: true,
+  imports: [ButtonComponent]
+})
+export class ExampleComponent {}
+```
+
+## Features
+
+- **Interactive Setup**: Guided initialization with prompts
+- **Dependency Management**: Automatic installation of required dependencies
+- **Configuration Management**: Centralized config file for project settings
+- **Component Variants**: Support for multiple component themes and styles
+- **Path Validation**: Ensures components are installed in valid locations
+- **Reinstallation Support**: Option to reinstall existing components
+- **Error Handling**: Clear error messages and validation
+
+## Troubleshooting
+
+### "Not an Angular project" error
+Ensure you're running the CLI from the root directory of your Angular project where `angular.json` is located.
+
+### Component installation fails
+- Check that you have sufficient permissions
+- Verify your network connection for dependency installation
+- Ensure the target directory is writable
+
+### Configuration issues
+- Delete `shangjc.config.json` and run `ng-shangjc init` again
+- Check that your components path starts with `src/`
+
+## Development
+
+For CLI development:
+
+```bash
+# Clone the repository
+git clone <repository-url>
+
+# Install dependencies
+npm install
+
+# Build the CLI
+npm run build
+
+# Run in development mode
+npm run dev
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+## License
+
+This project is licensed under the MIT License.
+
+## Support
+
+For issues and questions:
+- Create an issue on GitHub
+- Check the documentation
+- Review existing issues for solutions

package/dist/commands/init.js

@@ -0,0 +1,280 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initProject = initProject;
+const fs = __importStar(require("fs-extra"));
+const inquirer_1 = __importDefault(require("inquirer"));
+async function initProject() {
+    console.log('🚀 Initializing shangjc in your project...');
+    // Check if Angular project
+    if (!fs.existsSync('angular.json')) {
+        console.error('❌ This is not an Angular project.');
+        process.exit(1);
+    }
+    // Check if shangjc.config.json already exists
+    if (fs.existsSync('shangjc.config.json')) {
+        console.log('⚠️  shangjc.config.json already exists.');
+        const { overwrite } = await inquirer_1.default.prompt([
+            {
+                type: 'confirm',
+                name: 'overwrite',
+                message: 'Do you want to overwrite the existing configuration?',
+                default: false
+            }
+        ]);
+        if (!overwrite) {
+            console.log('Initialization cancelled.');
+            return;
+        }
+    }
+    // Ask for configuration
+    const config = await inquirer_1.default.prompt([
+        {
+            type: 'input',
+            name: 'componentsPath',
+            message: 'Where would you like to install components?',
+            default: 'src/ui/shangjc',
+            validate: (input) => {
+                if (!input.trim())
+                    return 'Components path is required';
+                if (!input.startsWith('src/'))
+                    return 'Path should be within src directory';
+                return true;
+            }
+        },
+        {
+            type: 'list',
+            name: 'componentType',
+            message: 'Which component type do you prefer?',
+            choices: [
+                { name: 'Standalone (Recommended)', value: 'standalone' },
+                { name: 'Module-based', value: 'module' }
+            ],
+            default: 'standalone'
+        },
+        {
+            type: 'confirm',
+            name: 'installTailwind',
+            message: 'Do you want to configure Tailwind CSS 4?',
+            default: true
+        },
+        {
+            type: 'list',
+            name: 'theme',
+            message: 'Choose your default theme:',
+            choices: [
+                { name: 'Default (Light)', value: 'default' },
+                { name: 'Dark', value: 'dark' },
+                { name: 'Both (Light + Dark)', value: 'both' }
+            ],
+            default: 'both',
+            when: (answers) => answers.installTailwind
+        }
+    ]);
+    try {
+        // Create components directory
+        await fs.ensureDir(config.componentsPath);
+        console.log(`✅ Created ${config.componentsPath} directory`);
+        // Create shangjc config
+        const configFile = {
+            version: '1.0.0',
+            componentsPath: config.componentsPath,
+            componentType: config.componentType,
+            projectType: 'angular',
+            theme: {
+                current: config.theme || 'default',
+                variants: {
+                    default: {
+                        primary: 'hsl(var(--primary))',
+                        secondary: 'hsl(var(--secondary))',
+                        accent: 'hsl(var(--accent))',
+                        muted: 'hsl(var(--muted))',
+                        destructive: 'hsl(var(--destructive))',
+                        background: 'hsl(var(--background))',
+                        foreground: 'hsl(var(--foreground))',
+                        border: 'hsl(var(--border))',
+                        input: 'hsl(var(--input))',
+                        ring: 'hsl(var(--ring))'
+                    }
+                }
+            },
+            tailwindConfig: config.installTailwind,
+            installedComponents: [],
+            utilsVersion: '^1.0.0'
+        };
+        await fs.writeJson('shangjc.config.json', configFile, { spaces: 2 });
+        console.log('✅ Created shangjc.config.json config file');
+        if (config.installTailwind) {
+            await setupTailwind();
+        }
+        console.log('🎉 shangjc initialized successfully!');
+        console.log('\n📖 Next steps:');
+        console.log('1. Install a component: npx @ng-shangjc/cli install button');
+        console.log('2. Import and use in your components');
+    }
+    catch (error) {
+        console.error('❌ Initialization failed:', error);
+        process.exit(1);
+    }
+}
+async function setupTailwind() {
+    // Check if tailwind.config.js exists
+    const tailwindConfigPath = 'tailwind.config.js';
+    if (!fs.existsSync(tailwindConfigPath)) {
+        const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+};`;
+        await fs.writeFile(tailwindConfigPath, tailwindConfig);
+        console.log('✅ Created tailwind.config.js');
+    }
+    // Update global styles with Tailwind 4 @theme directive
+    const globalStylesPath = 'src/styles.css';
+    // Check if styles.css exists, if not try other common locations
+    let stylesPath = globalStylesPath;
+    if (!fs.existsSync(globalStylesPath)) {
+        if (fs.existsSync('src/global.css')) {
+            stylesPath = 'src/global.css';
+        }
+        else if (fs.existsSync('src/app.css')) {
+            stylesPath = 'src/app.css';
+        }
+    }
+    const globalStyles = `@import 'tailwindcss';
+
+@theme {
+  --color-primary: 222.2 47.4% 11.2%;
+  --color-primary-foreground: 210 40% 98%;
+  --color-secondary: 210 40% 96.1%;
+  --color-secondary-foreground: 222.2 47.4% 11.2%;
+  --color-muted: 210 40% 96.1%;
+  --color-muted-foreground: 215.4 16.3% 46.9%;
+  --color-accent: 210 40% 96.1%;
+  --color-accent-foreground: 222.2 47.4% 11.2%;
+  --color-destructive: 0 84.2% 60.2%;
+  --color-destructive-foreground: 210 40% 98%;
+  --color-border: 214.3 31.8% 91.4%;
+  --color-input: 214.3 31.8% 91.4%;
+  --color-ring: 222.2 84% 4.9%;
+  --color-background: 0 0% 100%;
+  --color-foreground: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --color-primary: 210 40% 98%;
+  --color-primary-foreground: 222.2 47.4% 11.2%;
+  --color-secondary: 217.2 32.6% 17.5%;
+  --color-secondary-foreground: 210 40% 98%;
+  --color-muted: 217.2 32.6% 17.5%;
+  --color-muted-foreground: 215 20.2% 65.1%;
+  --color-accent: 217.2 32.6% 17.5%;
+  --color-accent-foreground: 210 40% 98%;
+  --color-destructive: 0 62.8% 30.6%;
+  --color-destructive-foreground: 210 40% 98%;
+  --color-border: 217.2 32.6% 17.5%;
+  --color-input: 217.2 32.6% 17.5%;
+  --color-ring: 212.7 26.8% 83.9%;
+  --color-background: 222.2 84% 4.9%;
+  --color-foreground: 210 40% 98%;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`;
+    // Append to existing styles or create new file
+    if (fs.existsSync(stylesPath)) {
+        const existingContent = await fs.readFile(stylesPath, 'utf8');
+        if (!existingContent.includes('@import \'tailwindcss\'')) {
+            await fs.appendFile(stylesPath, '\n\n' + globalStyles);
+            console.log(`✅ Updated ${stylesPath} with Tailwind 4 theme`);
+        }
+        else {
+            console.log(`⚠️  ${stylesPath} already contains Tailwind imports`);
+        }
+    }
+    else {
+        await fs.writeFile(stylesPath, globalStyles);
+        console.log(`✅ Created ${stylesPath} with Tailwind 4 theme`);
+    }
+}