generate-react-cli 10.1.0 → 11.0.1

package/bin/generate-react.js

@@ -12,7 +12,6 @@ function isNotValidNodeVersion() {
       details: 'Generate React CLI requires Node 22 or higher',
       suggestions: [
         'Update your Node.js version to 22 or higher',
-        'Use nvm to manage multiple Node versions: nvm install 22',
       ],
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "10.1.0",
+  "version": "11.0.1",
   "description": "A simple React CLI to generate components instantly and more.",
   "author": "Armin Broubakarian",
   "license": "MIT",
@@ -43,12 +43,12 @@
     "chalk": "5.6.2",
     "commander": "14.0.2",
     "fs-extra": "11.3.3",
-    "inquirer": "13.2.0",
-    "lodash": "4.17.21",
+    "inquirer": "13.2.2",
+    "lodash": "4.17.23",
     "replace": "1.2.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "7.0.1",
+    "@antfu/eslint-config": "7.2.0",
     "@commitlint/cli": "20.3.1",
     "@commitlint/config-conventional": "20.3.1",
     "@semantic-release/commit-analyzer": "13.0.1",

package/readme.md

@@ -6,36 +6,41 @@
   <img src="https://raw.githubusercontent.com/arminbro/generate-react-cli/master/docs/assets/generate-react-cli.svg?raw=true"/>
 </p>
 
-## Why?
-
-To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.
-
-A short [article](https://dev.to/arminbro/generate-react-cli-1ooh) goes deeper into why we created GRC if you have the time.
-
-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).
-
-## Table of Contents:
-
-- [Config file](#config-file)
-- [Generate components](#generate-components)
-- [Custom component types](#custom-component-types)
-- [Custom component templates](#custom-component-templates)
-- [Custom component directory](#custom-component-directory)
-- [Custom component files](#custom-component-files)
-
-## You can run it using npx like this:
-
-```
-  npx generate-react-cli component Box
+A CLI tool to speed up productivity in React projects by generating components instantly with configurable templates.
+
+## Table of Contents
+
+- [Quick Start](#quick-start)
+- [Requirements](#requirements)
+- [Config File](#config-file)
+- [Generate Components](#generate-components)
+- [Options](#options)
+- [Custom Component Types](#custom-component-types)
+- [Custom Component Templates](#custom-component-templates)
+- [Template Keywords](#template-keywords)
+- [Custom Component Files](#custom-component-files)
+- [Advanced: Custom Directory](#advanced-custom-directory)
+- [License](#license)
+
+## Quick Start
+
+```bash
+# Generate your first component (creates config on first run)
+npx generate-react-cli component Box
+
+# Or install globally
+npm i -g generate-react-cli
+generate-react component Button
 ```
 
-_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a package runner tool that comes with npm 5.2+)_
+## Requirements
 
-## Config File
+- Node.js 22 or higher
+- npm 10 or higher
 
-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).
+## Config File
 
-#### Example of the **generate-react-cli.json** config file:
+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).
 
 ```json
 {
@@ -55,15 +60,21 @@ When you run GRC within your project the first time, it will ask you a series of
 }
 ```
 
+**Test library options:**
+
+| Option | Description |
+|--------|-------------|
+| `Testing Library` | Uses [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) |
+| `Vitest` | Uses [Vitest](https://vitest.dev/) with React Testing Library |
+| `None` | Basic tests using React's createRoot API |
+
 ## Generate Components
 
 ```sh
-  npx generate-react-cli component Box
+npx generate-react-cli component Box
 ```
 
-This command will create a folder with your component name within your default (e.g. **src/components**) directory, and its corresponding files.
-
-#### Example of the component files structure:
+This command will create a folder with your component name within your default (e.g., `src/components`) directory, and its corresponding files.
 
 ```
 |-- /src
@@ -74,120 +85,29 @@ This command will create a folder with your component name within your default (
             |-- Box.test.js
 ```
 
-### Options
+## Options
 
-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:
+You can override config rules using command-line options:
 
 ```sh
-  npx generate-react-cli component Box --withTest=false
+npx generate-react-cli component Box --withTest=false
 ```
 
-Or vice versa, if you have set **withTest** to be `false` you can do this:
+| Option | Description | Default |
+|--------|-------------|---------|
+| `--path` | Output directory for the component | Config value |
+| `--type` | [Custom component type](#custom-component-types) to use | `default` |
+| `--withLazy` | Generate a [lazy-loading](https://react.dev/reference/react/lazy) wrapper file | Config value |
+| `--withStory` | Generate a [Storybook](https://storybook.js.org) story file | Config value |
+| `--withStyle` | Generate a stylesheet file | Config value |
+| `--withTest` | Generate a test file | Config value |
+| `--dry-run` | Preview what will be generated without writing files | `false` |
+| `--flat` | Generate files directly in path without creating a folder | `false` |
+| `--customDirectory` | Override the component's folder name ([see below](#advanced-custom-directory)) | Component name |
 
-```sh
-  npx generate-react-cli component Box --withTest=true
-```
+## Custom Component Types
 
-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`.
-
-<table>
-  <tr align="left">
-    <th>Options</th>
-    <th>Description</th>
-    <th>Value Type</th>
-    <th>Default Value</th>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--path</b></td>
-    <td width="60%">
-      Value of the path where you want the component to be generated in (e.g. <b>src/components</b>).
-    </td>
-    <td width="20%">String</td>
-    <td width="20%"><code>component.default.path<code></td>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--type</b></td>
-    <td width="60%">
-      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>.
-    </td>
-    <td width="20%">String</td>
-    <td width="20%"><code>component.default<code></td>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--withLazy</b></td>
-    <td width="60%">
-      Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables <a href="https://reactjs.org/docs/code-splitting.html#code-splitting">code splitting</a>) with this component.
-    </td>
-    <td width="20%">Boolean</td>
-    <td width="20%"><code>component.default.withLazy<code></td>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--withStory</b></td>
-    <td width="60%">
-      Creates a corresponding (<a href="https://storybook.js.org">storybook</a>) story file with this component.
-    </td>
-    <td width="20%">Boolean</td>
-    <td width="20%"><code>component.default.withStory<code></td>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--withStyle</b></td>
-    <td width="60%">
-      Creates a corresponding stylesheet file with this component.
-    </td>
-    <td width="20%">Boolean</td>
-    <td width="20%"><code>component.default.withStyle<code></td>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--withTest</b></td>
-    <td width="60%">
-      Creates a corresponding test file with this component.
-    </td>
-    <td width="20%">Boolean</td>
-    <td width="20%"><code>component.default.withTest<code></td>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--dry-run</b></td>
-    <td width="60%">
-      Show what will be generated without writing to disk
-    </td>
-    <td width="20%">Boolean</td>
-    <td width="20%"><code>false<code></td>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--flat</b></td>
-    <td width="60%">
-      Generate the files in the mentioned path instead of creating new folder for it
-    </td>
-    <td width="20%">Boolean</td>
-    <td width="20%"><code>false<code></td>
-  </tr>
-
-  <tr>
-    <td width="20%"><b>--customDirectory</b></td>
-    <td width="60%">
-      Template value that overrides the name of the directory of the component to be generated in.<br />
-      See more under <a href="#custom-component-directory">custom component directory</a>.
-    </td>
-    <td width="20%">String</td>
-    <td width="20%"><code>null</code></td>
-  </tr>
-</table>
-
-### Custom component types
-
-By default, GRC will use the `component.default` configuration rules when running the component command out of the box.
-
-What if you wanted to generate other types of components that have their own set of config rules (e.g., **page** or **layout**)?
-
-You can do so by extending the **generate-react-cli.json** config file like this.
+By default, GRC uses the `component.default` configuration. You can define additional component types with their own rules:
 
 ```json
 {
@@ -221,81 +141,39 @@ You can do so by extending the **generate-react-cli.json** config file like this
 }
 ```
 
-Now you can generate a component with your custom component types like this:
+Generate components with custom types:
 
 ```sh
-  npx generate-react-cli component HomePage --type=page
-```
-
-```sh
-  npx generate-react-cli component BoxLayout --type=layout
-```
-
-You can also pass the same [options](#options) to your custom component types as you would for the default component type.
-
-### Custom component templates
-
-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.
-
-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.
-
-#### Example of the `customTemplates` object:
-
-```json
-"customTemplates": {
-  "component": "templates/TemplateName.js",
-  "lazy":  "templates/TemplateName.lazy.js",
-  "story":  "templates/TemplateName.story.js",
-  "style": "templates/TemplateName.style.scss",
-  "test":  "templates/TemplateName.test.js"
-},
+npx generate-react-cli component HomePage --type=page
+npx generate-react-cli component Sidebar --type=layout
 ```
 
-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.
+## Custom Component Templates
 
-#### Example of using the `customTemplates` object within your generate-react-cli.json config file:
+Create your own templates that GRC uses instead of the built-in ones. Add a `customTemplates` object to any component type:
 
 ```json
 {
-  "usesTypeScript": false,
-  "usesCssModule": true,
-  "cssPreprocessor": "scss",
-  "testLibrary": "Testing Library",
   "component": {
     "default": {
-      "customTemplates": {
-        "component": "templates/component/TemplateName.js",
-        "style": "templates/component/TemplateName.style.scss",
-        "test": "templates/component/TemplateName.test.js"
-      },
       "path": "src/components",
       "withStyle": true,
       "withTest": true,
-      "withStory": true,
-      "withLazy": false
-    },
-    "page": {
       "customTemplates": {
-        "test": "templates/page/TemplateName.test.js"
-      },
-      "path": "src/pages",
-      "withLazy": true,
-      "withStory": false,
-      "withStyle": true,
-      "withTest": true
+        "component": "templates/TemplateName.js",
+        "style": "templates/TemplateName.module.css",
+        "test": "templates/TemplateName.test.js"
+      }
     }
   }
 }
 ```
 
-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.
-
-#### Example of a custom component template file:
+Example custom component template:
 
 ```jsx
-// templates/component/TemplateName.js
+// templates/TemplateName.js
 
-import React from 'react';
 import styles from './TemplateName.module.css';
 
 const TemplateName = () => (
@@ -307,176 +185,99 @@ const TemplateName = () => (
 export default TemplateName;
 ```
 
-**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:
-
-| Keyword         | Replacement                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------- |
-| `templatename`  | component name in raw case (whichever format the user typed the component name in the command) |
-| `TemplateName`  | component name in PascalCase                                                                   |
-| `templateName`  | component name in camelCase                                                                    |
-| `template-name` | component name in kebab-case                                                                   |
-| `template_name` | component name in snake_case                                                                   |
-| `TEMPLATE_NAME` | component name in uppercase SNAKE_CASE                                                         |
-| `TEMPLATENAME`  | component name in full UPPERCASE                                                               |
-
-#### Example of a custom test template file:
+Example custom test template:
 
 ```jsx
-// templates/component/TemplateName.test.js
+// templates/TemplateName.test.js
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import TemplateName from './TemplateName';
 
-it('It should mount', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<TemplateName />, div);
-  ReactDOM.unmountComponentAtNode(div);
+it('should mount', () => {
+  const container = document.createElement('div');
+  const root = createRoot(container);
+  root.render(<TemplateName />);
+  root.unmount();
 });
 ```
 
-### Custom component directory
-
-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.
-
-The `customDirectory` directive allows all supported casings (see previous section) and can be overridden at the following levels in ascending specific of priority:
+All template types are optional. If you don't specify a custom template for a file type, GRC uses its built-in template.
 
-- top
-- component.default
-- component._type_
-- CLI
+## Template Keywords
 
-#### Example:
+Use these keywords in your custom templates and filenames. GRC replaces them with the component name in various formats:
 
-For React Context Providers in a project, the decision has been made to separate Context generation from the visual components.
+| Keyword | Output Format | Example (`Box`) |
+|---------|--------------|-----------------|
+| `templatename` | raw (as typed) | `Box` |
+| `TemplateName` | PascalCase | `Box` |
+| `templateName` | camelCase | `box` |
+| `template-name` | kebab-case | `box` |
+| `template_name` | snake_case | `box` |
+| `TEMPLATE_NAME` | UPPER_SNAKE | `BOX` |
+| `TEMPLATENAME` | UPPERCASE | `BOX` |
 
-In a typical configuration the configuration would look as following:
+## Custom Component Files
 
-```json
-{
-  "provider": {
-    "path": "src/components/providers",
-    "withLazy": false,
-    "withStory": true,
-    "withStyle": false,
-    "withTest": true,
-    "withTypes": true,
-    "withContext": true,
-    "customTemplates": {
-      "component": "src/components/templates/provider/TemplateName.tsx",
-      "context": "src/components/templates/provider/TemplateName.context.ts",
-      "story": "src/components/templates/provider/TemplateName.stories.tsx",
-      "test": "src/components/templates/provider/TemplateName.test.tsx",
-      "types": "src/components/templates/provider/TemplateName.types.ts"
-    }
-  }
-}
-```
+Add custom files beyond the built-in options (`withStyle`, `withTest`, `withStory`, `withLazy`).
 
-With the configuration above, the component would be required to either follow a full or a minimalistic naming convention.
-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.
-
-To work around this, the `customDirectory` option can be used to enforce a particular style.
+Example: Adding an `index.js` barrel file for cleaner imports:
 
 ```json
 {
-  ...
-  "provider": {
-    "path": "src/components/providers",
-      "withLazy": false,
-      "withStory": true,
-      "withStyle": false,
+  "component": {
+    "default": {
+      "path": "src/components",
+      "withStyle": true,
       "withTest": true,
-      "withTypes": true,
-      "withContext": true,
-      "customDirectory": "TemplateNameProvider",
+      "withIndex": true,
       "customTemplates": {
-          "component": "src/components/templates/provider/TemplateNameProvider.tsx",
-          "context": "src/components/templates/provider/TemplateName.context.ts",
-          "story": "src/components/templates/provider/TemplateNameProvider.stories.tsx",
-          "test": "src/components/templates/provider/TemplateNameProvider.test.tsx",
-          "types": "src/components/templates/provider/TemplateNameProvider.types.ts"
+        "index": "templates/index.js"
       }
+    }
   }
-  ...
 }
 ```
 
-The above configuration would allow you to mix and match different template names and keep naming consistent.
-
-If we executed GRC with the above configuration (`npx generate-react-cli component Theme --type=provider`), the result would look like this:
-
-```fs
-src/components/providers/ThemeProvider/Theme.context.ts
-src/components/providers/ThemeProvider/ThemeProvider.tsx
-src/components/providers/ThemeProvider/ThemeProvider.stories.tsx
-src/components/providers/ThemeProvider/ThemeProvider.test.tsx
-src/components/providers/ThemeProvider/ThemeProvider.types.ts
-```
-
-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:
-
-```sh
-  npx generate-react-cli component Box --type=layout --customDir=TemplateNameLayout
+```jsx
+// templates/index.js
+export { default } from './TemplateName';
 ```
 
-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
-
-### Custom component files
+Custom files require corresponding custom templates in `customTemplates`.
 
-GRC comes with corresponding built-in files for a given component if you need them (i.e., `withStyle`, `withTest`, `withStory`, and `withLazy`).
+## Advanced: Custom Directory
 
-What if you wanted to add custom files of your own?
+Override the generated component's folder name using `customDirectory`. This is useful when you need naming conventions that differ from the component name.
 
-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'`).
-
-Or maybe you need an additional style file for your component stories.
-
-You can do so by editing your **generate-react-cli.json** config file like so.
+Example: Generate a `Theme` provider where files live in a `ThemeProvider` folder:
 
 ```json
 {
-  "usesTypeScript": false,
-  "usesCssModule": false,
-  "cssPreprocessor": "css",
-  "testLibrary": "Testing Library",
   "component": {
-    "default": {
-      "path": "src/components",
-      "withStyle": true,
+    "provider": {
+      "path": "src/providers",
       "withTest": true,
-      "withStory": true,
-      "withLazy": false,
-      "withIndex": true,
-      "withStoryStyle": true,
+      "customDirectory": "TemplateNameProvider",
       "customTemplates": {
-        "index": "templates/default/index.js",
-        "storyStyle": "templates/default/TemplateName.stories.css"
+        "component": "templates/TemplateNameProvider.tsx"
       }
     }
   }
 }
 ```
 
-```jsx
-// templates/default/index.js
-
-export { default } from './TemplateName';
+```sh
+npx generate-react-cli component Theme --type=provider
+# Creates: src/providers/ThemeProvider/ThemeProvider.tsx
 ```
 
-```css
-/* templates/default/TemplateName.stories.css */
+You can also pass it as a CLI option:
 
-.TemplateName {
-}
+```sh
+npx generate-react-cli component Box --customDirectory=TemplateNameLayout
 ```
 
-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.
-
-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.
-
-Also, we used the `TemplateName` keyword for the `storyStyle` custom file. GRC will generate this corresponding file and replace `TemplateName` with the component name.
-
 ## License
 
-Generate React CLI is an open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).
+Generate React CLI is open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).

package/src/templates/component/componentJsTemplate.js

@@ -1,6 +1,4 @@
-export default `import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './templatename.module.css';
+export default `import styles from './templatename.module.css';
 
 const templatename = () => (
   <div className={styles.templatename} data-testid="templatename">
@@ -8,9 +6,5 @@ const templatename = () => (
   </div>
 );
 
-templatename.propTypes = {};
-
-templatename.defaultProps = {};
-
 export default templatename;
 `;

package/src/templates/component/componentLazyTemplate.js

@@ -1,8 +1,8 @@
-export default `import React, { lazy, Suspense } from 'react';
+export default `import { lazy, Suspense } from 'react';
 
 const Lazytemplatename = lazy(() => import('./templatename'));
 
-const templatename = props => (
+const templatename = (props) => (
   <Suspense fallback={null}>
     <Lazytemplatename {...props} />
   </Suspense>

package/src/templates/component/componentStoryTemplate.js

@@ -1,13 +1,9 @@
-export default `/* eslint-disable */
-import templatename from './templatename';
+export default `import templatename from './templatename';
 
 export default {
-  title: "templatename",
+  title: 'templatename',
+  component: templatename,
 };
 
-export const Default = () => <templatename />;
-
-Default.story = {
-  name: 'default',
-};
+export const Default = {};
 `;

package/src/templates/component/componentTestDefaultTemplate.js

@@ -1,9 +1,9 @@
-export default `import React from 'react';
-import ReactDOM from 'react-dom';
+export default `import { createRoot } from 'react-dom/client';
 import templatename from './templatename';
 
-it('It should mount', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<templatename />, div);
-  ReactDOM.unmountComponentAtNode(div);
+it('should mount', () => {
+  const container = document.createElement('div');
+  const root = createRoot(container);
+  root.render(<templatename />);
+  root.unmount();
 });`;

package/src/templates/component/componentTestTestingLibraryTemplate.js

@@ -1,10 +1,9 @@
-export default `import React from 'react';
-import { render, screen } from '@testing-library/react';
+export default `import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import templatename from './templatename';
 
 describe('<templatename />', () => {
-  test('it should mount', () => {
+  test('should mount', () => {
     render(<templatename />);
 
     const templateName = screen.getByTestId('templatename');

package/src/templates/component/componentTestVitestTemplate.js

@@ -0,0 +1,15 @@
+export default `import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import templatename from './templatename';
+
+describe('<templatename />', () => {
+  test('should mount', () => {
+    render(<templatename />);
+
+    const templateName = screen.getByTestId('templatename');
+
+    expect(templateName).toBeInTheDocument();
+  });
+});
+`;

package/src/templates/component/componentTsLazyTemplate.js

@@ -1,8 +1,8 @@
-export default `import React, { lazy, Suspense } from 'react';
+export default `import { lazy, Suspense, ComponentProps } from 'react';
 
 const Lazytemplatename = lazy(() => import('./templatename'));
 
-const templatename = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+const templatename = (props: ComponentProps<typeof Lazytemplatename>) => (
   <Suspense fallback={null}>
     <Lazytemplatename {...props} />
   </Suspense>

package/src/templates/component/componentTsTemplate.js

@@ -1,4 +1,4 @@
-export default `import React, { FC } from 'react';
+export default `import type { FC } from 'react';
 import styles from './templatename.module.css';
 
 interface templatenameProps {}

package/src/utils/generateComponentUtils.js

@@ -12,13 +12,13 @@ import componentLazyTemplate from '../templates/component/componentLazyTemplate.
 import componentStoryTemplate from '../templates/component/componentStoryTemplate.js';
 import componentStyledTemplate from '../templates/component/componentStyledTemplate.js';
 import componentTestDefaultTemplate from '../templates/component/componentTestDefaultTemplate.js';
-import componentTestEnzymeTemplate from '../templates/component/componentTestEnzymeTemplate.js';
 import componentTestTestingLibraryTemplate from '../templates/component/componentTestTestingLibraryTemplate.js';
+import componentTestVitestTemplate from '../templates/component/componentTestVitestTemplate.js';
 import componentTsLazyTemplate from '../templates/component/componentTsLazyTemplate.js';
 import componentTsTemplate from '../templates/component/componentTsTemplate.js';
-import { error, fileSummary } from './messagesUtils.js';
+import { error, exitWithError, fileSummary } from './messagesUtils.js';
 
-const templateNameRE = /.*(template[|_-]?name).*/i;
+const TEMPLATE_NAME_REGEX = /template[-_]?name/i;
 
 const { existsSync, outputFileSync, readFileSync } = fsExtra;
 
@@ -35,15 +35,13 @@ export function getComponentByType(args, cliConfigFile) {
 
     if (!selectedComponentType) {
       const availableTypes = Object.keys(cliConfigFile.component).join(', ');
-      error(`Unknown component type "${componentType}"`, {
+      exitWithError(`Unknown component type "${componentType}"`, {
         details: `Available types: ${availableTypes}`,
         suggestions: [
           `Use one of the available types: ${availableTypes}`,
           'Add this component type to your generate-react-cli.json config',
         ],
       });
-
-      process.exit(1);
     }
 
     // Otherwise return it.
@@ -61,7 +59,7 @@ export function getCorrespondingComponentFileTypes(component) {
 }
 
 function getCustomTemplate(componentName, templatePath) {
-  // --- Try loading custom template
+  // Try loading custom template
 
   try {
     const template = readFileSync(templatePath, 'utf8');
@@ -69,15 +67,13 @@ function getCustomTemplate(componentName, templatePath) {
 
     return { template, filename };
   } catch {
-    error(`Custom template not found: "${templatePath}"`, {
+    exitWithError(`Custom template not found: "${templatePath}"`, {
       suggestions: [
         'Verify the template path in your generate-react-cli.json config',
         'Check that the file exists and is readable',
         'Use an absolute path or a path relative to project root',
       ],
     });
-
-    return process.exit(1);
   }
 }
 
@@ -97,17 +93,15 @@ function componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, fi
     if (customDirectoryConfigs.length > 0) {
       const customDirectory = customDirectoryConfigs.slice(-1).toString();
 
-      // Double check if the customDirectory is templatable
-      if (templateNameRE.exec(customDirectory) == null) {
-        error(`Invalid customDirectory: "${customDirectory}"`, {
+      // Check if the customDirectory contains a template placeholder
+      if (!TEMPLATE_NAME_REGEX.test(customDirectory)) {
+        exitWithError(`Invalid customDirectory: "${customDirectory}"`, {
           details: 'customDirectory must contain a template placeholder',
           suggestions: [
             'Use templatename, TemplateName, template-name, or template_name',
             'Example: "{{templatename}}" or "TemplateName"',
           ],
         });
-
-        process.exit(-2);
       }
 
       for (const convertor in convertors) {
@@ -137,7 +131,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
   // Check for a custom component template.
 
   if (customTemplates && customTemplates.component) {
-    // --- Load and use the custom component template
+    // Load and use the custom component template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -147,18 +141,19 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    // --- Else use GRC built-in component template
+    // Else use GRC built-in component template
 
     template = usesTypeScript ? componentTsTemplate : componentJsTemplate;
     filename = usesTypeScript ? `${componentName}.tsx` : `${componentName}.js`;
 
-    // --- If test library is not Testing Library or if withTest is false. Remove data-testid from template
+    // If test library doesn't use data-testid or if withTest is false. Remove data-testid from template
 
-    if (testLibrary !== 'Testing Library' || !cmd.withTest) {
+    const usesTestId = testLibrary === 'Testing Library' || testLibrary === 'Vitest';
+    if (!usesTestId || !cmd.withTest) {
       template = template.replace(` data-testid="templatename"`, '');
     }
 
-    // --- If it has a corresponding stylesheet
+    // If it has a corresponding stylesheet
 
     if (cmd.withStyle) {
       if (cliConfigFile.usesStyledComponents) {
@@ -174,7 +169,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
         const module = usesCssModule ? '.module' : '';
         const cssPath = `${componentName}${module}.${cssPreprocessor}`;
 
-        // --- If the css module is true make sure to update the template accordingly
+        // If the css module is true make sure to update the template accordingly
 
         if (module.length) {
           template = template.replace(`'./templatename.module.css'`, `'./${cssPath}'`);
@@ -184,7 +179,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
         }
       }
     } else {
-      // --- If no stylesheet, remove className attribute and style import from jsTemplate
+      // If no stylesheet, remove className attribute and style import from jsTemplate
 
       template = template.replace(` className={styles.templatename}`, '');
       template = template.replace(`import styles from './templatename.module.css';`, '');
@@ -206,7 +201,7 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName, co
   // Check for a custom style template.
 
   if (customTemplates && customTemplates.style) {
-    // --- Load and use the custom style template
+    // Load and use the custom style template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -224,7 +219,7 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName, co
       const module = usesCssModule ? '.module' : '';
       const cssFilename = `${componentName}${module}.${cssPreprocessor}`;
 
-      // --- Else use GRC built-in style template
+      // Else use GRC built-in style template
 
       template = componentCssTemplate;
       filename = cssFilename;
@@ -247,7 +242,7 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, con
   // Check for a custom test template.
 
   if (customTemplates && customTemplates.test) {
-    // --- Load and use the custom test template
+    // Load and use the custom test template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -259,12 +254,10 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, con
   } else {
     filename = usesTypeScript ? `${componentName}.test.tsx` : `${componentName}.test.js`;
 
-    if (testLibrary === 'Enzyme') {
-      // --- Else use GRC built-in test template based on test library type
-
-      template = componentTestEnzymeTemplate;
-    } else if (testLibrary === 'Testing Library') {
+    if (testLibrary === 'Testing Library') {
       template = componentTestTestingLibraryTemplate;
+    } else if (testLibrary === 'Vitest') {
+      template = componentTestVitestTemplate;
     } else {
       template = componentTestDefaultTemplate;
     }
@@ -286,7 +279,7 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, co
   // Check for a custom story template.
 
   if (customTemplates && customTemplates.story) {
-    // --- Load and use the custom story template
+    // Load and use the custom story template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -296,7 +289,7 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, co
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    // --- Else use GRC built-in story template
+    // Else use GRC built-in story template
 
     template = componentStoryTemplate;
     filename = usesTypeScript ? `${componentName}.stories.tsx` : `${componentName}.stories.js`;
@@ -318,7 +311,7 @@ function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile, con
   // Check for a custom lazy template.
 
   if (customTemplates && customTemplates.lazy) {
-    // --- Load and use the custom lazy template
+    // Load and use the custom lazy template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -328,7 +321,7 @@ function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile, con
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    // --- Else use GRC built-in lazy template
+    // Else use GRC built-in lazy template
 
     template = usesTypeScript ? componentTsLazyTemplate : componentLazyTemplate;
     filename = usesTypeScript ? `${componentName}.lazy.tsx` : `${componentName}.lazy.js`;
@@ -350,18 +343,16 @@ function customFileTemplateGenerator({ componentName, cmd, cliConfigFile, compon
   // Check for a valid custom template for the corresponding custom component file.
 
   if (!customTemplates || !customTemplates[fileType]) {
-    error(`Missing custom template for "${fileType}"`, {
+    exitWithError(`Missing custom template for "${fileType}"`, {
       details: 'Custom component files require a matching custom template',
       suggestions: [
         `Add a "${fileType}" template path to customTemplates in your config`,
         'Check that the template file exists at the specified path',
       ],
     });
-
-    return process.exit(1);
   }
 
-  // --- Load and use the custom component template.
+  // Load and use the custom component template.
 
   const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
     componentName,
@@ -378,7 +369,7 @@ function customFileTemplateGenerator({ componentName, cmd, cliConfigFile, compon
   };
 }
 
-// --- Built in component file types
+// Built in component file types
 
 const buildInComponentFileTypes = {
   COMPONENT: 'component',
@@ -388,7 +379,7 @@ const buildInComponentFileTypes = {
   LAZY: 'withLazy',
 };
 
-// --- Generate component template map
+// Generate component template map
 
 const componentTemplateGeneratorMap = {
   [buildInComponentFileTypes.COMPONENT]: componentTemplateGenerator,
@@ -404,7 +395,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
   let basePath = '';
 
   componentFileTypes.forEach((componentFileType) => {
-    // --- Generate templates only if the component options (withStyle, withTest, etc..) are true,
+    // Generate templates only if the component options (withStyle, withTest, etc..) are true,
     // or if the template type is "component"
 
     if (
@@ -436,7 +427,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
         basePath = path.dirname(componentPath);
       }
 
-      // --- Make sure the component does not already exist in the path directory.
+      // Make sure the component does not already exist in the path directory.
 
       if (existsSync(componentPath)) {
         generatedFiles.push({ filename, status: 'skipped', path: componentPath });
@@ -445,67 +436,9 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
           if (!cmd.dryRun) {
             outputFileSync(componentPath, template);
 
-            // Will replace the templatename in whichever format the user typed the component name in the command.
-            replace({
-              regex: 'templatename',
-              replacement: convertors.templatename,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the TemplateName in PascalCase
-            replace({
-              regex: 'TemplateName',
-              replacement: convertors.TemplateName,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the templateName in camelCase
-            replace({
-              regex: 'templateName',
-              replacement: convertors.templateName,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the template-name in kebab-case
-            replace({
-              regex: 'template-name',
-              replacement: convertors['template-name'],
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the template_name in snake_case
-            replace({
-              regex: 'template_name',
-              replacement: convertors.template_name,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the TEMPLATE_NAME in uppercase SNAKE_CASE
-            replace({
-              regex: 'TEMPLATE_NAME',
-              replacement: convertors.TEMPLATE_NAME,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the TEMPLATENAME in uppercase SNAKE_CASE
-            replace({
-              regex: 'TEMPLATENAME',
-              replacement: convertors.TEMPLATENAME,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
+            // Replace all template placeholders with their corresponding component name formats
+            Object.entries(convertors).forEach(([pattern, replacement]) => {
+              replace({ regex: pattern, replacement, paths: [componentPath], recursive: false, silent: true });
             });
           }
 

package/src/utils/grcConfigUtils.js

@@ -3,7 +3,7 @@ import inquirer from 'inquirer';
 
 import merge from 'lodash/merge.js';
 import deepKeys from './deepKeysUtils.js';
-import { blank, error, header, outro, success } from './messagesUtils.js';
+import { blank, error, exitWithError, header, outro, success } from './messagesUtils.js';
 
 const { accessSync, constants, outputFileSync, readFileSync } = fsExtra;
 const { prompt } = inquirer;
@@ -40,7 +40,7 @@ const projectLevelQuestions = [
     type: 'select',
     name: 'testLibrary',
     message: 'What testing library does your project use?',
-    choices: ['Testing Library', 'Enzyme', 'None'],
+    choices: ['Testing Library', 'Vitest', 'None'],
   },
 ];
 
@@ -76,7 +76,7 @@ export const componentLevelQuestions = [
     type: 'confirm',
     name: 'component.default.withLazy',
     message:
-      'Would you like to create a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting: https://reactjs.org/docs/code-splitting.html#code-splitting) with each component you generate?',
+      'Would you like to create a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting: https://react.dev/reference/react/lazy) with each component you generate?',
   },
 ];
 
@@ -99,9 +99,9 @@ async function createCLIConfigFile() {
     outputFileSync('generate-react-cli.json', JSON.stringify(answers, null, 2));
 
     blank();
-    success('Config file created successfully');
+    success('Created the generate-react-cli.json config file');
     blank();
-    outro('You can always update it manually. Happy Hacking!');
+    outro('You can always update the config file manually. Happy Hacking!');
 
     return answers;
   } catch (e) {
@@ -132,9 +132,9 @@ async function updateCLIConfigFile(missingConfigQuestions, currentConfigFile) {
     );
 
     blank();
-    success('Config file updated successfully');
+    success('Updated the generate-react-cli.json config file');
     blank();
-    outro('You can always update it manually. Happy Hacking!');
+    outro('You can always update the config file manually. Happy Hacking!');
 
     return updatedAnswers;
   } catch (e) {
@@ -186,13 +186,12 @@ export async function getCLIConfigFile() {
       return await createCLIConfigFile();
     }
   } catch {
-    error('Not in project root', {
+    exitWithError('Not in project root', {
       details: 'Could not find package.json in current directory',
       suggestions: [
         'Run this command from your project root directory',
         'Make sure package.json exists in the current directory',
       ],
     });
-    return process.exit(1);
   }
 }

package/src/utils/messagesUtils.js

@@ -1,5 +1,7 @@
 import chalk from 'chalk';
 
+const DEFAULT_TERMINAL_WIDTH = 80;
+
 // Symbols for consistent visual feedback
 const symbols = {
   success: chalk.green('✓'),
@@ -12,10 +14,14 @@ const symbols = {
 
 // Create a responsive divider that adapts to terminal width
 function divider(color = 'cyan') {
-  const width = Math.min(process.stdout.columns || 80, 80);
+  const width = Math.min(process.stdout.columns || DEFAULT_TERMINAL_WIDTH, DEFAULT_TERMINAL_WIDTH);
   return chalk[color]('─'.repeat(width));
 }
 
+function pluralize(count, word) {
+  return count === 1 ? word : `${word}s`;
+}
+
 // Success message with optional file path
 export function success(message, filePath) {
   if (filePath) {
@@ -45,6 +51,12 @@ export function error(message, { details, suggestions } = {}) {
   console.log();
 }
 
+// Error message with exit
+export function exitWithError(message, options = {}, exitCode = 1) {
+  error(message, options);
+  process.exit(exitCode);
+}
+
 // Warning message
 export function warning(message) {
   console.log(`${symbols.warning} ${chalk.yellow(message)}`);
@@ -102,12 +114,11 @@ export function fileSummary(files, basePath, { dryRun = false } = {}) {
   } else {
     // Actual run: show what happened
     if (createdFiles.length > 0) {
-      console.log(`${symbols.success} ${chalk.green(`Created ${createdFiles.length} file${createdFiles.length === 1 ? '' : 's'} in ${basePath}`)}`);
+      console.log(`${symbols.success} ${chalk.green(`Created ${createdFiles.length} ${pluralize(createdFiles.length, 'file')} in ${basePath}`)}`);
     }
     if (skippedFiles.length > 0) {
-      console.log(`${symbols.warning} ${chalk.yellow(`Skipped ${skippedFiles.length} file${skippedFiles.length === 1 ? '' : 's'} (already exist)`)}`);
+      console.log(`${symbols.warning} ${chalk.yellow(`Skipped ${skippedFiles.length} ${pluralize(skippedFiles.length, 'file')} (already exist)`)}`);
     }
-    console.log();
 
     // Show file tree with status icons
     files.forEach((file, index) => {

package/src/templates/component/componentTestEnzymeTemplate.js

@@ -1,16 +0,0 @@
-export default `import React from 'react';
-import { shallow } from 'enzyme';
-import templatename from './templatename';
-
-describe('<templatename />', () => {
-  let component;
-
-  beforeEach(() => {
-    component = shallow(<templatename />);
-  });
-
-  test('It should mount', () => {
-    expect(component.length).toBe(1);
-  });
-});
-`;