My CLI - Enhanced React Component Manager

A powerful CLI tool for adding React components and hooks from GitHub repositories with intelligent dependency management, project detection, and enhanced developer experience.

🚀 Features

✨ Enhanced Dependency Management

• Automatic dependency detection from component source code
• Missing dependency detection in your project
• Interactive dependency installation with package manager detection
• Support for common UI libraries: Tailwind Variants, Radix UI, Lucide React, etc.

🎯 Smart Project Detection

• Project type detection: Next.js, Vite, Create React App, Gatsby
• Package manager detection: npm, yarn, pnpm, bun
• TypeScript/JavaScript compatibility with automatic file extension handling

🛡️ Safety & Validation

• React project validation before operations
• Directory conflict detection with overwrite confirmation
• File existence checks and error handling

📋 Comprehensive Commands

• add - Add components/hooks with dependency management
• remove - Remove installed components/hooks
• list - List available components and hooks
• info - Show detailed information about components/hooks
• help - Display usage information

📦 Installation

npm install -g @thangvd_17/my-cli

🎮 Usage

Add a Component

# Interactive mode
my-cli add

# Direct command
my-cli add components card
my-cli add hooks use-copy-to-clipboard

Remove a Component

# Interactive mode
my-cli remove

# Direct command
my-cli remove components card
my-cli rm hooks use-copy-to-clipboard  # using alias

List Available Items

# List everything
my-cli list

# List specific type
my-cli list components
my-cli list hooks

Get Component Information

# Interactive mode
my-cli info

# Direct command
my-cli info components card
my-cli info hooks use-copy-to-clipboard

🏗️ Project Structure Support

The CLI automatically detects your project type and adjusts paths accordingly:

Next.js Projects

• Components: ./components/ui/[component-name]/
• Hooks: ./hooks/

Vite/CRA Projects

• Components: ./src/components/ui/[component-name]/
• Hooks: ./src/hooks/

🔧 Development Mode

Set up local development mode for testing with a local repository:

1. Create a .env file in the CLI root:

ENV=development

2. Ensure your local repository is available at the expected path (configurable in config.mjs)

📋 Example Workflow

# 1. List available components
my-cli list components

# 2. Get info about a component before adding
my-cli info components button

# 3. Add the component (with automatic dependency installation)
my-cli add components button

# 4. Later, remove if not needed
my-cli remove components button

🎨 Enhanced UX Features

Interactive Prompts

• Smart defaults based on context
• Arrow key navigation
• Graceful cancellation with Ctrl+C

Informative Output

• Project type and package manager detection
• Dependency analysis and status
• Clear success/error messages
• Installation progress feedback

Safety Checks

• Overwrite confirmations for existing files
• React project validation
• Missing dependency warnings

🛠️ Technical Features

Dependency Detection

The CLI analyzes source code to detect:

• Direct imports (import ... from 'package')
• Dynamic imports (import('package'))
• Require statements (require('package'))

Package Manager Support

• Automatic detection of npm, yarn, pnpm, or bun
• Appropriate install commands for each manager
• Lock file recognition

File Compatibility

• TypeScript to JavaScript conversion for non-TS projects
• Automatic file extension handling
• Path resolution for different project structures

📄 Commands Reference

add [type] [item]

Add a component or hook to your project.

• type: components or hooks
• item: Name of the component/hook

remove [type] [item]

Remove an installed component or hook.

• type: components or hooks
• item: Name of the component/hook
• alias: rm

list [type]

List available components and/or hooks.

• type: components, hooks, or both (default)

info [type] [item]

Show detailed information about a component or hook.

• type: components or hooks
• item: Name of the component/hook

🎯 What's New in v1.0.1

• ✅ Automatic dependency detection and installation
• ✅ Dynamic dependency versions from source repository
• ✅ Project type and package manager detection
• ✅ Remove command for uninstalling components
• ✅ Enhanced info command with dependency analysis
• ✅ Directory conflict detection and resolution
• ✅ TypeScript/JavaScript compatibility
• ✅ Modular architecture with DRY principles
• ✅ Improved error handling and user feedback
• ✅ Support for multiple project structures

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📜 License

MIT © voducthang16

🔗 Repository

GitHub Repository