generate-react-cli 11.0.0 → 11.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.
Files changed (2) hide show
  1. package/package.json +4 -4
  2. package/readme.md +107 -311
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "generate-react-cli",
3
- "version": "11.0.0",
3
+ "version": "11.0.1",
4
4
  "description": "A simple React CLI to generate components instantly and more.",
5
5
  "author": "Armin Broubakarian",
6
6
  "license": "MIT",
@@ -43,12 +43,12 @@
43
43
  "chalk": "5.6.2",
44
44
  "commander": "14.0.2",
45
45
  "fs-extra": "11.3.3",
46
- "inquirer": "13.2.0",
47
- "lodash": "4.17.21",
46
+ "inquirer": "13.2.2",
47
+ "lodash": "4.17.23",
48
48
  "replace": "1.2.2"
49
49
  },
50
50
  "devDependencies": {
51
- "@antfu/eslint-config": "7.0.1",
51
+ "@antfu/eslint-config": "7.2.0",
52
52
  "@commitlint/cli": "20.3.1",
53
53
  "@commitlint/config-conventional": "20.3.1",
54
54
  "@semantic-release/commit-analyzer": "13.0.1",
package/readme.md CHANGED
@@ -6,36 +6,41 @@
6
6
  <img src="https://raw.githubusercontent.com/arminbro/generate-react-cli/master/docs/assets/generate-react-cli.svg?raw=true"/>
7
7
  </p>
8
8
 
9
- ## Why?
10
-
11
- To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.
12
-
13
- A short [article](https://dev.to/arminbro/generate-react-cli-1ooh) goes deeper into why we created GRC if you have the time.
14
-
15
- You can also watch an excellent [video](https://www.youtube.com/watch?v=NEvnt3MWttY) tutorial on how to use GRC by [Eric Murphy](https://www.youtube.com/channel/UC5KDiSAFxrDWhmysBcNqtMA).
16
-
17
- ## Table of Contents:
18
-
19
- - [Config file](#config-file)
20
- - [Generate components](#generate-components)
21
- - [Custom component types](#custom-component-types)
22
- - [Custom component templates](#custom-component-templates)
23
- - [Custom component directory](#custom-component-directory)
24
- - [Custom component files](#custom-component-files)
25
-
26
- ## You can run it using npx like this:
27
-
28
- ```
29
- npx generate-react-cli component Box
9
+ A CLI tool to speed up productivity in React projects by generating components instantly with configurable templates.
10
+
11
+ ## Table of Contents
12
+
13
+ - [Quick Start](#quick-start)
14
+ - [Requirements](#requirements)
15
+ - [Config File](#config-file)
16
+ - [Generate Components](#generate-components)
17
+ - [Options](#options)
18
+ - [Custom Component Types](#custom-component-types)
19
+ - [Custom Component Templates](#custom-component-templates)
20
+ - [Template Keywords](#template-keywords)
21
+ - [Custom Component Files](#custom-component-files)
22
+ - [Advanced: Custom Directory](#advanced-custom-directory)
23
+ - [License](#license)
24
+
25
+ ## Quick Start
26
+
27
+ ```bash
28
+ # Generate your first component (creates config on first run)
29
+ npx generate-react-cli component Box
30
+
31
+ # Or install globally
32
+ npm i -g generate-react-cli
33
+ generate-react component Button
30
34
  ```
31
35
 
32
- _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a package runner tool that comes with npm 5.2+)_
36
+ ## Requirements
33
37
 
34
- ## Config File
38
+ - Node.js 22 or higher
39
+ - npm 10 or higher
35
40
 
36
- When you run GRC within your project the first time, it will ask you a series of questions to customize the cli for your project needs (this will create a "generate-react-cli.json" config file).
41
+ ## Config File
37
42
 
38
- #### Example of the **generate-react-cli.json** config file:
43
+ When you run GRC within your project the first time, it will ask you a series of questions to customize the CLI for your project needs (this will create a `generate-react-cli.json` config file).
39
44
 
40
45
  ```json
41
46
  {
@@ -55,21 +60,21 @@ When you run GRC within your project the first time, it will ask you a series of
55
60
  }
56
61
  ```
57
62
 
58
- #### Test library options:
63
+ **Test library options:**
59
64
 
60
- - `Testing Library` - Generates tests using [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
61
- - `Vitest` - Generates tests using [Vitest](https://vitest.dev/) with React Testing Library
62
- - `None` - Generates basic tests using React's createRoot API
65
+ | Option | Description |
66
+ |--------|-------------|
67
+ | `Testing Library` | Uses [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) |
68
+ | `Vitest` | Uses [Vitest](https://vitest.dev/) with React Testing Library |
69
+ | `None` | Basic tests using React's createRoot API |
63
70
 
64
71
  ## Generate Components
65
72
 
66
73
  ```sh
67
- npx generate-react-cli component Box
74
+ npx generate-react-cli component Box
68
75
  ```
69
76
 
70
- This command will create a folder with your component name within your default (e.g. **src/components**) directory, and its corresponding files.
71
-
72
- #### Example of the component files structure:
77
+ This command will create a folder with your component name within your default (e.g., `src/components`) directory, and its corresponding files.
73
78
 
74
79
  ```
75
80
  |-- /src
@@ -80,120 +85,29 @@ This command will create a folder with your component name within your default (
80
85
  |-- Box.test.js
81
86
  ```
82
87
 
83
- ### Options
88
+ ## Options
84
89
 
85
- You can also override some of the GRC component config rules using one-off commands. So for example, let's say you have set **withTest** to be `true` in the `component.default` property. You can override it like this:
90
+ You can override config rules using command-line options:
86
91
 
87
92
  ```sh
88
- npx generate-react-cli component Box --withTest=false
93
+ npx generate-react-cli component Box --withTest=false
89
94
  ```
90
95
 
91
- Or vice versa, if you have set **withTest** to be `false` you can do this:
96
+ | Option | Description | Default |
97
+ |--------|-------------|---------|
98
+ | `--path` | Output directory for the component | Config value |
99
+ | `--type` | [Custom component type](#custom-component-types) to use | `default` |
100
+ | `--withLazy` | Generate a [lazy-loading](https://react.dev/reference/react/lazy) wrapper file | Config value |
101
+ | `--withStory` | Generate a [Storybook](https://storybook.js.org) story file | Config value |
102
+ | `--withStyle` | Generate a stylesheet file | Config value |
103
+ | `--withTest` | Generate a test file | Config value |
104
+ | `--dry-run` | Preview what will be generated without writing files | `false` |
105
+ | `--flat` | Generate files directly in path without creating a folder | `false` |
106
+ | `--customDirectory` | Override the component's folder name ([see below](#advanced-custom-directory)) | Component name |
92
107
 
93
- ```sh
94
- npx generate-react-cli component Box --withTest=true
95
- ```
108
+ ## Custom Component Types
96
109
 
97
- Otherwise, if you don't pass any options, it will just use the default values that you have set in the GRC config file under `component.default`.
98
-
99
- <table>
100
- <tr align="left">
101
- <th>Options</th>
102
- <th>Description</th>
103
- <th>Value Type</th>
104
- <th>Default Value</th>
105
- </tr>
106
-
107
- <tr>
108
- <td width="20%"><b>--path</b></td>
109
- <td width="60%">
110
- Value of the path where you want the component to be generated in (e.g. <b>src/components</b>).
111
- </td>
112
- <td width="20%">String</td>
113
- <td width="20%"><code>component.default.path<code></td>
114
- </tr>
115
-
116
- <tr>
117
- <td width="20%"><b>--type</b></td>
118
- <td width="60%">
119
- You can pass a custom component type that you have configured in the GRC config file that has its own set of component config rules. Read more about <a href="#custom-component-types">custom component types</a>.
120
- </td>
121
- <td width="20%">String</td>
122
- <td width="20%"><code>component.default<code></td>
123
- </tr>
124
-
125
- <tr>
126
- <td width="20%"><b>--withLazy</b></td>
127
- <td width="60%">
128
- Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables <a href="https://react.dev/reference/react/lazy">code splitting</a>) with this component.
129
- </td>
130
- <td width="20%">Boolean</td>
131
- <td width="20%"><code>component.default.withLazy<code></td>
132
- </tr>
133
-
134
- <tr>
135
- <td width="20%"><b>--withStory</b></td>
136
- <td width="60%">
137
- Creates a corresponding (<a href="https://storybook.js.org">storybook</a>) story file with this component.
138
- </td>
139
- <td width="20%">Boolean</td>
140
- <td width="20%"><code>component.default.withStory<code></td>
141
- </tr>
142
-
143
- <tr>
144
- <td width="20%"><b>--withStyle</b></td>
145
- <td width="60%">
146
- Creates a corresponding stylesheet file with this component.
147
- </td>
148
- <td width="20%">Boolean</td>
149
- <td width="20%"><code>component.default.withStyle<code></td>
150
- </tr>
151
-
152
- <tr>
153
- <td width="20%"><b>--withTest</b></td>
154
- <td width="60%">
155
- Creates a corresponding test file with this component.
156
- </td>
157
- <td width="20%">Boolean</td>
158
- <td width="20%"><code>component.default.withTest<code></td>
159
- </tr>
160
-
161
- <tr>
162
- <td width="20%"><b>--dry-run</b></td>
163
- <td width="60%">
164
- Show what will be generated without writing to disk
165
- </td>
166
- <td width="20%">Boolean</td>
167
- <td width="20%"><code>false<code></td>
168
- </tr>
169
-
170
- <tr>
171
- <td width="20%"><b>--flat</b></td>
172
- <td width="60%">
173
- Generate the files in the mentioned path instead of creating new folder for it
174
- </td>
175
- <td width="20%">Boolean</td>
176
- <td width="20%"><code>false<code></td>
177
- </tr>
178
-
179
- <tr>
180
- <td width="20%"><b>--customDirectory</b></td>
181
- <td width="60%">
182
- Template value that overrides the name of the directory of the component to be generated in.<br />
183
- See more under <a href="#custom-component-directory">custom component directory</a>.
184
- </td>
185
- <td width="20%">String</td>
186
- <td width="20%"><code>null</code></td>
187
- </tr>
188
- </table>
189
-
190
- ### Custom component types
191
-
192
- By default, GRC will use the `component.default` configuration rules when running the component command out of the box.
193
-
194
- What if you wanted to generate other types of components that have their own set of config rules (e.g., **page** or **layout**)?
195
-
196
- You can do so by extending the **generate-react-cli.json** config file like this.
110
+ By default, GRC uses the `component.default` configuration. You can define additional component types with their own rules:
197
111
 
198
112
  ```json
199
113
  {
@@ -227,79 +141,38 @@ You can do so by extending the **generate-react-cli.json** config file like this
227
141
  }
228
142
  ```
229
143
 
230
- Now you can generate a component with your custom component types like this:
231
-
232
- ```sh
233
- npx generate-react-cli component HomePage --type=page
234
- ```
144
+ Generate components with custom types:
235
145
 
236
146
  ```sh
237
- npx generate-react-cli component BoxLayout --type=layout
147
+ npx generate-react-cli component HomePage --type=page
148
+ npx generate-react-cli component Sidebar --type=layout
238
149
  ```
239
150
 
240
- You can also pass the same [options](#options) to your custom component types as you would for the default component type.
241
-
242
- ### Custom component templates
151
+ ## Custom Component Templates
243
152
 
244
- You can also create your own custom templates that GRC can use instead of the built-in templates that come with it. We hope this will provide more flexibility for your components that you want to generate.
245
-
246
- There is an optional `customTemplates` object that you can pass to the `component.default` or any of your custom component types within your **generate-react-cli.json** config file.
247
-
248
- #### Example of the `customTemplates` object:
249
-
250
- ```json
251
- "customTemplates": {
252
- "component": "templates/TemplateName.js",
253
- "lazy": "templates/TemplateName.lazy.js",
254
- "story": "templates/TemplateName.story.js",
255
- "style": "templates/TemplateName.style.scss",
256
- "test": "templates/TemplateName.test.js"
257
- },
258
- ```
259
-
260
- The keys represent the type of file, and the values are the paths that point to where your custom template lives in your project/system. Please note the `TemplateName` keyword in the template filename. GRC will use this keyword and replace it with your component name (in whichever format you typed the component name in the command) as the filename.
261
-
262
- #### Example of using the `customTemplates` object within your generate-react-cli.json config file:
153
+ Create your own templates that GRC uses instead of the built-in ones. Add a `customTemplates` object to any component type:
263
154
 
264
155
  ```json
265
156
  {
266
- "usesTypeScript": false,
267
- "usesCssModule": true,
268
- "cssPreprocessor": "scss",
269
- "testLibrary": "Testing Library",
270
157
  "component": {
271
158
  "default": {
272
- "customTemplates": {
273
- "component": "templates/component/TemplateName.js",
274
- "style": "templates/component/TemplateName.style.scss",
275
- "test": "templates/component/TemplateName.test.js"
276
- },
277
159
  "path": "src/components",
278
160
  "withStyle": true,
279
161
  "withTest": true,
280
- "withStory": true,
281
- "withLazy": false
282
- },
283
- "page": {
284
162
  "customTemplates": {
285
- "test": "templates/page/TemplateName.test.js"
286
- },
287
- "path": "src/pages",
288
- "withLazy": true,
289
- "withStory": false,
290
- "withStyle": true,
291
- "withTest": true
163
+ "component": "templates/TemplateName.js",
164
+ "style": "templates/TemplateName.module.css",
165
+ "test": "templates/TemplateName.test.js"
166
+ }
292
167
  }
293
168
  }
294
169
  }
295
170
  ```
296
171
 
297
- Notice in the `page.customTemplates` that we only specified the `test` custom template type. That's because all the custom template types are optional. If you don't set the other types, GRC will default to using the built-in templates it comes with.
298
-
299
- #### Example of a custom component template file:
172
+ Example custom component template:
300
173
 
301
174
  ```jsx
302
- // templates/component/TemplateName.js
175
+ // templates/TemplateName.js
303
176
 
304
177
  import styles from './TemplateName.module.css';
305
178
 
@@ -312,22 +185,10 @@ const TemplateName = () => (
312
185
  export default TemplateName;
313
186
  ```
314
187
 
315
- **Important:** You can use the following keywords within your custom templates to format the component name. Note that the built-in GRC templates use `templatename` casing by default:
316
-
317
- | Keyword | Replacement |
318
- | --------------- | ---------------------------------------------------------------------------------------------- |
319
- | `templatename` | component name in raw case (whichever format the user typed the component name in the command) |
320
- | `TemplateName` | component name in PascalCase |
321
- | `templateName` | component name in camelCase |
322
- | `template-name` | component name in kebab-case |
323
- | `template_name` | component name in snake_case |
324
- | `TEMPLATE_NAME` | component name in uppercase SNAKE_CASE |
325
- | `TEMPLATENAME` | component name in full UPPERCASE |
326
-
327
- #### Example of a custom test template file:
188
+ Example custom test template:
328
189
 
329
190
  ```jsx
330
- // templates/component/TemplateName.test.js
191
+ // templates/TemplateName.test.js
331
192
 
332
193
  import { createRoot } from 'react-dom/client';
333
194
  import TemplateName from './TemplateName';
@@ -340,148 +201,83 @@ it('should mount', () => {
340
201
  });
341
202
  ```
342
203
 
343
- ### Custom component directory
344
-
345
- Using the `customDirectory` you can easily override the directory name for the component generated. For instance, if prefixes are required for particular components or if template names will be mixed, the `customDirectory` option will allow you to override the way that GRC generates the name of the directory where the component files will live.
346
-
347
- The `customDirectory` directive allows all supported casings (see previous section) and can be overridden at the following levels in ascending specific of priority:
348
-
349
- - top
350
- - component.default
351
- - component._type_
352
- - CLI
204
+ All template types are optional. If you don't specify a custom template for a file type, GRC uses its built-in template.
353
205
 
354
- #### Example:
206
+ ## Template Keywords
355
207
 
356
- For React Context Providers in a project, the decision has been made to separate Context generation from the visual components.
208
+ Use these keywords in your custom templates and filenames. GRC replaces them with the component name in various formats:
357
209
 
358
- In a typical configuration the configuration would look as following:
210
+ | Keyword | Output Format | Example (`Box`) |
211
+ |---------|--------------|-----------------|
212
+ | `templatename` | raw (as typed) | `Box` |
213
+ | `TemplateName` | PascalCase | `Box` |
214
+ | `templateName` | camelCase | `box` |
215
+ | `template-name` | kebab-case | `box` |
216
+ | `template_name` | snake_case | `box` |
217
+ | `TEMPLATE_NAME` | UPPER_SNAKE | `BOX` |
218
+ | `TEMPLATENAME` | UPPERCASE | `BOX` |
359
219
 
360
- ```json
361
- {
362
- "provider": {
363
- "path": "src/components/providers",
364
- "withLazy": false,
365
- "withStory": true,
366
- "withStyle": false,
367
- "withTest": true,
368
- "withTypes": true,
369
- "withContext": true,
370
- "customTemplates": {
371
- "component": "src/components/templates/provider/TemplateName.tsx",
372
- "context": "src/components/templates/provider/TemplateName.context.ts",
373
- "story": "src/components/templates/provider/TemplateName.stories.tsx",
374
- "test": "src/components/templates/provider/TemplateName.test.tsx",
375
- "types": "src/components/templates/provider/TemplateName.types.ts"
376
- }
377
- }
378
- }
379
- ```
220
+ ## Custom Component Files
380
221
 
381
- With the configuration above, the component would be required to either follow a full or a minimalistic naming convention.
382
- I.e. the component would either need to be generated as `ThemeProvider` and consequently the context name would be generated as `ThemeProviderContext`, or by renaming the files and templates as `TemplateNameProvider` but with the downside of the component path being generated as `src/components/providers/Theme`. This creates inconsistent naming in the directory containg the component files.
222
+ Add custom files beyond the built-in options (`withStyle`, `withTest`, `withStory`, `withLazy`).
383
223
 
384
- To work around this, the `customDirectory` option can be used to enforce a particular style.
224
+ Example: Adding an `index.js` barrel file for cleaner imports:
385
225
 
386
226
  ```json
387
227
  {
388
- ...
389
- "provider": {
390
- "path": "src/components/providers",
391
- "withLazy": false,
392
- "withStory": true,
393
- "withStyle": false,
228
+ "component": {
229
+ "default": {
230
+ "path": "src/components",
231
+ "withStyle": true,
394
232
  "withTest": true,
395
- "withTypes": true,
396
- "withContext": true,
397
- "customDirectory": "TemplateNameProvider",
233
+ "withIndex": true,
398
234
  "customTemplates": {
399
- "component": "src/components/templates/provider/TemplateNameProvider.tsx",
400
- "context": "src/components/templates/provider/TemplateName.context.ts",
401
- "story": "src/components/templates/provider/TemplateNameProvider.stories.tsx",
402
- "test": "src/components/templates/provider/TemplateNameProvider.test.tsx",
403
- "types": "src/components/templates/provider/TemplateNameProvider.types.ts"
235
+ "index": "templates/index.js"
404
236
  }
237
+ }
405
238
  }
406
- ...
407
239
  }
408
240
  ```
409
241
 
410
- The above configuration would allow you to mix and match different template names and keep naming consistent.
411
-
412
- If we executed GRC with the above configuration (`npx generate-react-cli component Theme --type=provider`), the result would look like this:
413
-
414
- ```fs
415
- src/components/providers/ThemeProvider/Theme.context.ts
416
- src/components/providers/ThemeProvider/ThemeProvider.tsx
417
- src/components/providers/ThemeProvider/ThemeProvider.stories.tsx
418
- src/components/providers/ThemeProvider/ThemeProvider.test.tsx
419
- src/components/providers/ThemeProvider/ThemeProvider.types.ts
420
- ```
421
-
422
- Similarly, this construct could be used as a shortcut for generating other named components, like the `BoxLayout` example above, depending on that could be shortened to:
423
-
424
- ```sh
425
- npx generate-react-cli component Box --type=layout --customDir=TemplateNameLayout
242
+ ```jsx
243
+ // templates/index.js
244
+ export { default } from './TemplateName';
426
245
  ```
427
246
 
428
- Or it could be used to generate files with a naming convention with `Test`, `Lazy`, `Context`, `Theme`, or `Provider` suffixes. Or even combined with skeleton CSS
429
-
430
- ### Custom component files
431
-
432
- GRC comes with corresponding built-in files for a given component if you need them (i.e., `withStyle`, `withTest`, `withStory`, and `withLazy`).
247
+ Custom files require corresponding custom templates in `customTemplates`.
433
248
 
434
- What if you wanted to add custom files of your own?
249
+ ## Advanced: Custom Directory
435
250
 
436
- For example, let's say you wanted to add an `index.js` file for each component, so you don't have to add the additional component name with each import (i.e., `import Box from './components/Box'` instead of `import Box from './components/Box/Box'`).
251
+ Override the generated component's folder name using `customDirectory`. This is useful when you need naming conventions that differ from the component name.
437
252
 
438
- Or maybe you need an additional style file for your component stories.
439
-
440
- You can do so by editing your **generate-react-cli.json** config file like so.
253
+ Example: Generate a `Theme` provider where files live in a `ThemeProvider` folder:
441
254
 
442
255
  ```json
443
256
  {
444
- "usesTypeScript": false,
445
- "usesCssModule": false,
446
- "cssPreprocessor": "css",
447
- "testLibrary": "Testing Library",
448
257
  "component": {
449
- "default": {
450
- "path": "src/components",
451
- "withStyle": true,
258
+ "provider": {
259
+ "path": "src/providers",
452
260
  "withTest": true,
453
- "withStory": true,
454
- "withLazy": false,
455
- "withIndex": true,
456
- "withStoryStyle": true,
261
+ "customDirectory": "TemplateNameProvider",
457
262
  "customTemplates": {
458
- "index": "templates/default/index.js",
459
- "storyStyle": "templates/default/TemplateName.stories.css"
263
+ "component": "templates/TemplateNameProvider.tsx"
460
264
  }
461
265
  }
462
266
  }
463
267
  }
464
268
  ```
465
269
 
466
- ```jsx
467
- // templates/default/index.js
468
-
469
- export { default } from './TemplateName';
270
+ ```sh
271
+ npx generate-react-cli component Theme --type=provider
272
+ # Creates: src/providers/ThemeProvider/ThemeProvider.tsx
470
273
  ```
471
274
 
472
- ```css
473
- /* templates/default/TemplateName.stories.css */
275
+ You can also pass it as a CLI option:
474
276
 
475
- .TemplateName {
476
- }
277
+ ```sh
278
+ npx generate-react-cli component Box --customDirectory=TemplateNameLayout
477
279
  ```
478
280
 
479
- In this case, we added a `withIndex` & `withStoryStyle` to the `component.default`. Note: You can add custom files to any of your custom component types.
480
-
481
- You should also see that we added `index` and `storyStyle` to our `customTemplates` object. That's because custom files require custom templates. Otherwise, you will get an error when you generate a component.
482
-
483
- Also, we used the `TemplateName` keyword for the `storyStyle` custom file. GRC will generate this corresponding file and replace `TemplateName` with the component name.
484
-
485
281
  ## License
486
282
 
487
- Generate React CLI is an open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).
283
+ Generate React CLI is open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).