pejay-ui 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# pejay-ui CLI Commands
|
|
2
|
+
|
|
3
|
+
A lightweight CLI tool to initialize, add, and remove React UI components in your projects.
|
|
4
|
+
|
|
5
|
+
## Commands
|
|
6
|
+
|
|
7
|
+
### 1. Initialize Configuration
|
|
8
|
+
Initialize the configuration file `pejay-ui.json` in the root of your project.
|
|
9
|
+
```bash
|
|
10
|
+
npx pejay-ui init
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### 2. Add Component
|
|
14
|
+
Download and install a component, automatically setting up its utilities (like `cn`) and resolving component-to-component dependencies.
|
|
15
|
+
```bash
|
|
16
|
+
npx pejay-ui add <component-name>
|
|
17
|
+
```
|
|
18
|
+
*Example:* `npx pejay-ui add button` or `npx pejay-ui add form/date-picker`
|
|
19
|
+
|
|
20
|
+
### 3. Remove Component
|
|
21
|
+
Safely delete a component's files, and clean up any unused utilities or package dependencies that were installed with it.
|
|
22
|
+
```bash
|
|
23
|
+
npx pejay-ui remove <component-name>
|
|
24
|
+
```
|
|
25
|
+
*Example:* `npx pejay-ui remove button`
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Available Components
|
|
30
|
+
|
|
31
|
+
Below is the list of components you can add to your project using the `add` command:
|
|
32
|
+
|
|
33
|
+
### Buttons
|
|
34
|
+
* **`button`**: Premium interactive button supporting multiple variants (solid, soft, ghost), loaders, and custom hover tooltips.
|
|
35
|
+
|
|
36
|
+
### Form Inputs
|
|
37
|
+
* **`form/input`**: Standard text input field with validation, labels, and error messaging.
|
|
38
|
+
* **`form/amount-input`**: Numeric input configured for currency entry with symbol prefixes and formatting.
|
|
39
|
+
* **`form/checkbox`**: Styled single checkbox input.
|
|
40
|
+
* **`form/checkbox-group`**: Group of checkboxes managing single or multiple selection states with item indices.
|
|
41
|
+
* **`form/email-input`**: Dedicated input for email addresses with prefix icon.
|
|
42
|
+
* **`form/file-input`**: Premium dropzone-style file upload component supporting drag-and-drop and progress/preview states.
|
|
43
|
+
* **`form/number-input`**: Input field for numerical values with increment/decrement steppers.
|
|
44
|
+
* **`form/password-input`**: Secure text input with eye icon toggle to show/hide the password.
|
|
45
|
+
* **`form/phone-input`**: Formatted input field for telephone numbers.
|
|
46
|
+
* **`form/radio`**: Styled radio selection dot.
|
|
47
|
+
* **`form/radio-group`**: Group of mutually exclusive radio options.
|
|
48
|
+
* **`form/range-slider`**: Slider controls for choosing values from a numeric range.
|
|
49
|
+
* **`form/switch`**: Styled toggle switch representing boolean options.
|
|
50
|
+
* **`form/textarea`**: Multiline text area input with character counter/limit indicators.
|
|
51
|
+
* **`form/url-input`**: Styled input field specifically formatted for web addresses/links.
|
|
52
|
+
|
|
53
|
+
### Date & Time Pickers
|
|
54
|
+
* **`form/date-picker`**: Calendar-based date selector popover with inline month/year dropdowns.
|
|
55
|
+
* **`form/date-range-picker`**: Date range selector to pick start and end dates with highlight ranges.
|
|
56
|
+
* **`form/time-picker`**: Dropdown component for picking specific hours, minutes, and AM/PM.
|
|
57
|
+
* **`form/time-range-picker`**: Popover time selector for configuring custom duration intervals.
|
|
58
|
+
|
|
59
|
+
### Dropdowns & Selects
|
|
60
|
+
* **`dropdown/select-input`**: Elegant single-select searchable dropdown input.
|
|
61
|
+
* **`dropdown/multiselect-input`**: Searchable multiselect dropdown which renders selected options as dismissible tag pills.
|