@cloudwick/astral-ui-cli 0.5.0 → 1.0.0

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 CHANGED
@@ -30,14 +30,11 @@ yarn global add @cloudwick/astral-ui-cli
30
30
  # Initialize your project
31
31
  npx @cloudwick/astral-ui-cli init
32
32
 
33
- # Follow instructions to set up path aliases
34
- npx @cloudwick/astral-ui-cli setup-aliases
35
-
36
33
  # Add components
37
34
  npx @cloudwick/astral-ui-cli add button card
38
35
 
39
36
  # Start using in your code
40
- import { Button } from '@components/ui/button';
37
+ import { Button } from '@components/button';
41
38
  import { cn } from '@utils';
42
39
  import { keyboardKeys, mobileBreakPoint } from '@constants';
43
40
  ```
@@ -46,8 +43,8 @@ import { keyboardKeys, mobileBreakPoint } from '@constants';
46
43
 
47
44
  For the best experience, follow these steps in order:
48
45
 
49
- 1. **Initialize** your project with `npx @cloudwick/astral-ui-cli init`
50
- 2. **Set up path aliases** using `npx @cloudwick/astral-ui-cli setup-aliases` and follow the instructions
46
+ 1. **Initialize** your project with `npx @cloudwick/astral-ui-cli init` - this will display path alias setup instructions for your project type
47
+ 2. **Configure path aliases** in your project following the instructions shown during initialization
51
48
  3. **Add components** with `npx @cloudwick/astral-ui-cli add [component...]`
52
49
  4. **Repair Tailwind** if needed with `npx @cloudwick/astral-ui-cli repair-tailwind`
53
50
  5. **Import and use** components in your application
@@ -70,6 +67,7 @@ This command will:
70
67
  - Add utility functions
71
68
  - Add Inter font files for consistent typography
72
69
  - Set up font CSS for proper font rendering
70
+ - Display detailed path alias setup instructions based on your project type (Next.js, Vite, Webpack, CRA, etc.)
73
71
 
74
72
  #### Options
75
73
 
@@ -77,40 +75,19 @@ This command will:
77
75
  |--------|-------|-------------|
78
76
  | `--yes` | `-y` | Skip confirmation prompts |
79
77
  | `--defaults` | `-d` | Use default configuration |
80
- | `--force` | `-f` | Force overwrite of existing configuration |
81
- | `--cwd <dir>` | `-c` | Specify the working directory |
82
- | `--silent` | `-s` | Mute output |
83
-
84
- ### `setup-aliases`
85
-
86
- Display instructions for setting up path aliases in your project.
87
-
88
- ```bash
89
- npx @cloudwick/astral-ui-cli setup-aliases
90
- ```
91
-
92
- This command will:
93
- - Analyze your project structure
94
- - Detect the type of project (Next.js, Vite, Webpack, etc.)
95
- - Provide specific instructions for configuring path aliases based on your project type
96
- - Check for special configurations like tsconfig.app.json (used in Angular projects)
97
-
98
- #### Options
99
-
100
- | Option | Alias | Description |
101
- |--------|-------|-------------|
102
78
  | `--cwd <dir>` | `-c` | Specify the working directory |
103
79
  | `--silent` | `-s` | Mute output |
104
80
 
105
- #### Examples
81
+ **Note:** When files already exist, backups are automatically created before replacing them.
106
82
 
107
- ```bash
108
- # Generate instructions for current directory
109
- npx @cloudwick/astral-ui-cli setup-aliases
83
+ The init command automatically detects your project type and provides specific path alias configuration instructions for:
84
+ - **Next.js**: Uses tsconfig.json/jsconfig.json for aliases
85
+ - **Vite**: Provides vite.config.js/ts configuration
86
+ - **Webpack**: Provides webpack.config.js configuration
87
+ - **Create React App**: Provides CRACO setup instructions
88
+ - **Generic**: Provides base configuration for other project types
110
89
 
111
- # Generate instructions for a specific project
112
- npx @cloudwick/astral-ui-cli setup-aliases --cwd ./my-project
113
- ```
90
+ Additionally, the CLI detects tsconfig.app.json (used by some frameworks for application-specific TypeScript settings) and provides guidance for configuring it.
114
91
 
115
92
  ### `add`
116
93
 
@@ -124,8 +101,6 @@ npx @cloudwick/astral-ui-cli add [component...]
124
101
 
125
102
  | Option | Alias | Description |
126
103
  |--------|-------|-------------|
127
- | `--yes` | `-y` | Skip confirmation prompts |
128
- | `--overwrite` | `-o` | Overwrite existing files |
129
104
  | `--cwd <dir>` | `-c` | Specify the working directory |
130
105
  | `--all` | `-a` | Add all available components |
131
106
  | `--path <path>` | `-p` | Specify the path to add the component to |
@@ -133,6 +108,8 @@ npx @cloudwick/astral-ui-cli add [component...]
133
108
  | `--skip-dependencies` | | Skip installing internal component dependencies |
134
109
  | `--list` | `-l` | List all available components |
135
110
 
111
+ **Note:** When a component already exists, you will be prompted before replacing it. A backup is automatically created when replacing.
112
+
136
113
  #### Examples
137
114
 
138
115
  ```bash
@@ -181,19 +158,17 @@ The CSS structure created will match exactly what the `init` command creates, in
181
158
 
182
159
  | Option | Alias | Description |
183
160
  |--------|-------|-------------|
184
- | `--force` | `-f` | Force overwrite of existing configuration without prompting |
185
161
  | `--cwd <dir>` | `-c` | Specify the working directory |
186
162
  | `--silent` | `-s` | Mute output |
187
163
 
164
+ **Note:** The command will prompt before replacing existing files and automatically create backups.
165
+
188
166
  #### Example Usage
189
167
 
190
168
  ```bash
191
169
  # Basic repair
192
170
  npx @cloudwick/astral-ui-cli repair-tailwind
193
171
 
194
- # Force overwrite existing files
195
- npx @cloudwick/astral-ui-cli repair-tailwind --force
196
-
197
172
  # Repair in a specific directory
198
173
  npx @cloudwick/astral-ui-cli repair-tailwind --cwd ./my-project
199
174
  ```
@@ -233,7 +208,6 @@ You can use this schema in your editor or CI to validate your configuration. It
233
208
  - `$schema` (string): URI of this schema file.
234
209
  - `tailwind` (object): Paths to your Tailwind config (`config`) and CSS file (`css`).
235
210
  - `aliases` (object): Directories for `components`, `utils`, and `constants`.
236
- - `extensions` (string[]): File extensions to search for components.
237
211
 
238
212
  For full details, see `schema/components-config.schema.json` in your project.
239
213
 
@@ -266,8 +240,8 @@ After adding components, you can import and use them in your application:
266
240
  ### React/Next.js Example
267
241
 
268
242
  ```tsx
269
- import { Button } from '@components/ui/button';
270
- import { Card, CardHeader, CardContent } from '@components/ui/card';
243
+ import { Button } from '@components/button';
244
+ import { Card, CardHeader, CardContent } from '@components/card';
271
245
  import { cn } from '@utils';
272
246
  import { keyboardKeys, mobileBreakPoint } from '@constants';
273
247
 
@@ -342,9 +316,9 @@ If you're having problems with imports:
342
316
  1. **Check your configuration**: Make sure the paths in tsconfig.json/jsconfig.json match your project structure
343
317
  2. **Framework-specific issues**:
344
318
  - **Next.js**: Make sure you're using the correct import format for your Next.js version
345
- - **Angular**: Configure paths in tsconfig.app.json instead of tsconfig.json
319
+ - **tsconfig.app.json**: If your project uses tsconfig.app.json, configure paths there as well
346
320
  - **Create React App**: You'll need CRACO or similar to enable path aliases
347
- 3. **Verify setup**: Run `npx @cloudwick/astral-ui-cli setup-aliases` again to get fresh instructions
321
+ 3. **Verify setup**: The path alias setup instructions are shown during `init` - you can run `npx @cloudwick/astral-ui-cli init` again to see them
348
322
  4. **Check components.json**: Make sure the paths in the "aliases" section match your project structure
349
323
 
350
324
  ### Styling Issues