WPD CLI - Component Library Manager

A command-line interface for managing and installing React Native components from the WPD component registry.

Installation

npm install -g @weprodev/wpd-cli-polaris

Or use it directly with npx:

npx @weprodev/wpd-cli-polaris <command>

Quick Start

1. Initialize a new project:

   wpd init

2. List available components:

   wpd list

3. Add a component:

   wpd add button

Commands

wpd init

Initializes a new wpd-cli project in the current directory.

wpd init

What it does:

• Creates wpd.config.json configuration file
• Sets up the components directory structure
• Installs required dependencies
• Optionally installs core dependencies (react-native-unistyles, react-native-reanimated)

wpd list

Lists all available components from the registry.

wpd list [options]

Options:

• -c, --category <category> - Filter by category (components, forms, sheets, configs, utilities, types)

Examples:

# List all components
wpd list

# List only UI components
wpd list --category components

# List utility functions
wpd list --category utilities

# List TypeScript types
wpd list --category types

wpd add

Adds a component from the registry to your project.

wpd add <component> [options]

Arguments:

• <component> - Name of the component to add

Options:

• -c, --category <category> - Component category (components, forms, sheets, configs, utilities, types)
• --overwrite - Overwrite existing files without confirmation
• -y, --yes - Skip all confirmation prompts

Examples:

# Add a button component
wpd add button

# Add a form component
wpd add sign-in-form --category forms

# Add utility functions
wpd add helper-styles --category utilities

# Add with auto-confirmation
wpd add confirmation-input --yes

# Force overwrite existing files
wpd add text-input --overwrite

Component Categories

The WPD registry organizes components into the following categories:

📦 Components

UI components like buttons, inputs, progress bars, etc.

• button - Customizable button component
• text-input - Text input with validation
• confirmation-input - OTP/confirmation code input
• select-box - Dropdown select component
• And many more...

📋 Forms

Complete form components with validation.

• sign-in-form - User authentication form
• sign-up-form - User registration form
• forgot-password-form - Password recovery form
• new-password-form - Password reset form

📄 Sheets

Bottom sheet and modal components.

• verification-code-sheet - OTP verification modal

⚙️ Configs

Configuration and theme files.

• theme - Complete theme setup with styling configuration

🛠️ Utilities

Helper functions and styling utilities.

• helper-styles - Dynamic styling utilities
• utils - Collection of utility functions

📝 Types

TypeScript type definitions.

• types - Input states and theme declarations

Configuration

The wpd.config.json file is created during initialization and contains:

{
  "version": "1.0.0",
  "componentsDir": "./src/shared/components",
  "aliases": {
    "@components": "./src/shared/components",
    "@styles": "./src/shared/styles",
    "@types": "./src/shared/types"
  }
}

Configuration Options:

• version - CLI version
• componentsDir - Directory where components will be installed
• aliases - Path aliases for different component types

Dependencies

Components may require the following peer dependencies:

• react-native-unistyles - Styling system
• react-native-reanimated - Animation library
• react-native-nitro-modules - Required by unistyles
• react-native-edge-to-edge - Required by unistyles

The CLI will notify you of required dependencies when adding components.

Internal Dependencies

Components can have internal dependencies that are automatically resolved:

• When you add a component, the CLI automatically installs its dependencies
• Dependencies are resolved across different categories (e.g., a component can depend on utilities or types)
• No manual intervention required - everything is handled automatically

Example: When adding confirmation-input, the CLI automatically installs:

• helper-styles (from utilities category)
• types (from types category)

File Structure

After initialization and adding components, your project structure will look like:

your-project/
├── wpd.config.json
├── src/
│   └── shared/
│       ├── components/
│       │   ├── Button/
│       │   ├── TextInput/
│       │   └── ConfirmationInput/
│       ├── styles/
│       │   └── helper.style.ts
│       └── types/
│           ├── input.type.ts
│           └── react-native-unistyles.d.ts
└── ...

Environment Variables

For development or custom registry usage, you can set:

# GitHub token for private repositories (optional)
export GITHUB_TOKEN=your_github_token

# Custom registry URL (optional)
export WPD_REGISTRY_URL=https://your-custom-registry.com/registry.json

Troubleshooting

Component not found

❌ Component "my-component" not found in registry

Solution: Check available components with wpd list or verify the component name.

No wpd-cli project found

❌ No wpd-cli project found. Run "wpd init" first.

Solution: Run wpd init in your project directory first.

File already exists

File Button.tsx already exists. Overwrite? (y/N)

Solution: Use --overwrite flag or --yes to skip confirmations.

Missing dependencies

📋 Required packages for components to work properly:
Make sure you have these packages installed:
  • react-native-unistyles
  • react-native-reanimated

Solution: Install the listed dependencies using your package manager.

Contributing

To contribute to the WPD CLI or component registry:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

For issues and questions:

• GitHub Issues: Create an issue
• Documentation: This README file

Happy coding with WPD CLI! 🚀