generate-react-cli 10.0.0 → 11.0.0

package/bin/generate-react.js

@@ -1,24 +1,25 @@
 #!/usr/bin/env node
 import cli from '../src/cli.js';
+import { error } from '../src/utils/messagesUtils.js';
 
-const isNotValidNodeVersion = () => {
+function isNotValidNodeVersion() {
   const currentNodeVersion = process.versions.node;
   const semver = currentNodeVersion.split('.');
   const major = semver[0];
 
-  if (major < 18) {
-    console.error(
-      // eslint-disable-next-line
-      'You are running Node ' +
-        currentNodeVersion +
-        ' Generate React CLI requires Node 18 or higher. Please update your version of Node.'
-    );
+  if (major < 22) {
+    error(`Node ${currentNodeVersion} is not supported`, {
+      details: 'Generate React CLI requires Node 22 or higher',
+      suggestions: [
+        'Update your Node.js version to 22 or higher',
+      ],
+    });
 
     return true;
   }
 
   return false;
-};
+}
 
 // --- Check if user is running Node 12 or higher.
 

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "generate-react-cli",
-  "version": "10.0.0",
+  "version": "11.0.0",
   "description": "A simple React CLI to generate components instantly and more.",
-  "repository": "https://github.com/arminbro/generate-react-cli",
-  "bugs": "https://github.com/arminbro/generate-react-cli/issues",
   "author": "Armin Broubakarian",
   "license": "MIT",
+  "repository": "https://github.com/arminbro/generate-react-cli",
+  "bugs": "https://github.com/arminbro/generate-react-cli/issues",
+  "keywords": [
+    "cli",
+    "react",
+    "build-tools",
+    "generate-react-cli"
+  ],
   "main": "bin/generate-react",
   "bin": {
     "generate-react": "bin/generate-react.js"
   },
   "type": "module",
   "files": [
-    "bin/",
-    "src/",
-    "README.md",
     "CHANGELOG.md",
-    "LICENSE"
+    "LICENSE",
+    "README.md",
+    "bin/",
+    "src/"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "keywords": [
-    "cli",
-    "react",
-    "build-tools",
-    "generate-react-cli"
-  ],
   "engines": {
     "node": ">=22",
     "npm": ">=10"
@@ -48,7 +48,7 @@
     "replace": "1.2.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "4.12.0",
+    "@antfu/eslint-config": "7.0.1",
     "@commitlint/cli": "20.3.1",
     "@commitlint/config-conventional": "20.3.1",
     "@semantic-release/commit-analyzer": "13.0.1",
@@ -58,7 +58,7 @@
     "@semantic-release/release-notes-generator": "14.1.0",
     "eslint": "9.39.2",
     "husky": "9.1.7",
-    "lint-staged": "16.1.0",
+    "lint-staged": "16.2.7",
     "semantic-release": "25.0.2"
   },
   "lint-staged": {

package/readme.md

@@ -55,6 +55,12 @@ When you run GRC within your project the first time, it will ask you a series of
 }
 ```
 
+#### Test library options:
+
+- `Testing Library` - Generates tests using [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
+- `Vitest` - Generates tests using [Vitest](https://vitest.dev/) with React Testing Library
+- `None` - Generates basic tests using React's createRoot API
+
 ## Generate Components
 
 ```sh
@@ -119,7 +125,7 @@ Otherwise, if you don't pass any options, it will just use the default values th
   <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.
+      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.
     </td>
     <td width="20%">Boolean</td>
     <td width="20%"><code>component.default.withLazy<code></td>
@@ -295,7 +301,6 @@ Notice in the `page.customTemplates` that we only specified the `test` custom te
 ```jsx
 // templates/component/TemplateName.js
 
-import React from 'react';
 import styles from './TemplateName.module.css';
 
 const TemplateName = () => (
@@ -324,14 +329,14 @@ export default TemplateName;
 ```jsx
 // templates/component/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();
 });
 ```
 

package/src/commands/generateComponent.js

@@ -11,29 +11,29 @@ export default function initGenerateComponentCommand(args, cliConfigFile, progra
     .command('component [names...]')
     .alias('c')
 
-    // Static component command option defaults.
+  // Static component command option defaults.
 
     .option('-p, --path <path>', 'The path where the component will get generated in.', selectedComponentType.path)
     .option(
       '--type <type>',
       'You can pass a component type that you have configured in your GRC config file.',
-      'default'
+      'default',
     )
     .option(
       '-f, --flat',
       'Generate the files in the mentioned path instead of creating new folder for it',
-      selectedComponentType.flat || false
+      selectedComponentType.flat || false,
     )
     .option('--dry-run', 'Show what will be generated without writing to disk')
     .option(
       '--customDirectory <customDirectory>',
-      'You can pass a cased path template that will be used as the component path for the component being generated.\n' +
-        'E.g. this allows you to add a prefix or suffix to the component path, ' +
-        'or change the case of the name of the directory holding the components to kebab-case.\n' +
-        'Examples:\n' +
-        '- TemplateName\n' +
-        '- template-name\n' +
-        '- TemplateNameSuffix'
+      'You can pass a cased path template that will be used as the component path for the component being generated.\n'
+      + 'E.g. this allows you to add a prefix or suffix to the component path, '
+      + 'or change the case of the name of the directory holding the components to kebab-case.\n'
+      + 'Examples:\n'
+      + '- TemplateName\n'
+      + '- template-name\n'
+      + '- TemplateNameSuffix',
     );
 
   // Dynamic component command option defaults.
@@ -44,13 +44,13 @@ export default function initGenerateComponentCommand(args, cliConfigFile, progra
     componentCommand.option(
       `--${dynamicOption} <${dynamicOption}>`,
       `With corresponding ${dynamicOption.split('with')[1]} file.`,
-      selectedComponentType[dynamicOption]
+      selectedComponentType[dynamicOption],
     );
   });
 
   // Component command action.
 
   componentCommand.action((componentNames, cmd) =>
-    componentNames.forEach((componentName) => generateComponent(componentName, cmd, cliConfigFile))
+    componentNames.forEach(componentName => generateComponent(componentName, cmd, cliConfigFile)),
   );
 }

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

@@ -1,29 +1,29 @@
-import chalk from 'chalk';
-import path from 'path';
-import replace from 'replace';
+import path from 'node:path';
+import fsExtra from 'fs-extra';
 import camelCase from 'lodash/camelCase.js';
 import kebabCase from 'lodash/kebabCase.js';
 import snakeCase from 'lodash/snakeCase.js';
 import startCase from 'lodash/startCase.js';
-import fsExtra from 'fs-extra';
+import replace from 'replace';
+import componentCssTemplate from '../templates/component/componentCssTemplate.js';
 
 import componentJsTemplate from '../templates/component/componentJsTemplate.js';
-import componentTsTemplate from '../templates/component/componentTsTemplate.js';
-import componentCssTemplate from '../templates/component/componentCssTemplate.js';
-import componentStyledTemplate from '../templates/component/componentStyledTemplate.js';
 import componentLazyTemplate from '../templates/component/componentLazyTemplate.js';
-import componentTsLazyTemplate from '../templates/component/componentTsLazyTemplate.js';
 import componentStoryTemplate from '../templates/component/componentStoryTemplate.js';
-import componentTestEnzymeTemplate from '../templates/component/componentTestEnzymeTemplate.js';
+import componentStyledTemplate from '../templates/component/componentStyledTemplate.js';
 import componentTestDefaultTemplate from '../templates/component/componentTestDefaultTemplate.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, exitWithError, fileSummary } from './messagesUtils.js';
 
-const templateNameRE = /.*(template[|_-]?name).*/i;
+const TEMPLATE_NAME_REGEX = /template[-_]?name/i;
 
 const { existsSync, outputFileSync, readFileSync } = fsExtra;
 
 export function getComponentByType(args, cliConfigFile) {
-  const hasComponentTypeOption = args.find((arg) => arg.includes('--type'));
+  const hasComponentTypeOption = args.find(arg => arg.includes('--type'));
 
   // Check for component type option.
 
@@ -34,16 +34,14 @@ export function getComponentByType(args, cliConfigFile) {
     // If the selected component type does not exists in the cliConfigFile under `component` throw an error
 
     if (!selectedComponentType) {
-      console.error(
-        chalk.red(
-          `
-  ERROR: Please make sure the component type you're trying to use exists in the
-  ${chalk.bold('generate-react-cli.json')} config file under the ${chalk.bold('component')} object.
-              `
-        )
-      );
-
-      process.exit(1);
+      const availableTypes = Object.keys(cliConfigFile.component).join(', ');
+      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',
+        ],
+      });
     }
 
     // Otherwise return it.
@@ -57,28 +55,25 @@ export function getComponentByType(args, cliConfigFile) {
 }
 
 export function getCorrespondingComponentFileTypes(component) {
-  return Object.keys(component).filter((key) => key.split('with').length > 1);
+  return Object.keys(component).filter(key => key.split('with').length > 1);
 }
 
 function getCustomTemplate(componentName, templatePath) {
-  // --- Try loading custom template
+  // Try loading custom template
 
   try {
     const template = readFileSync(templatePath, 'utf8');
     const filename = path.basename(templatePath).replace(/template[_-]?name/i, componentName);
 
     return { template, filename };
-  } catch (e) {
-    console.error(
-      chalk.red(
-        `
-ERROR: The custom template path of "${templatePath}" does not exist.
-Please make sure you're pointing to the right custom template path in your generate-react-cli.json config file.
-        `
-      )
-    );
-
-    return process.exit(1);
+  } catch {
+    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',
+      ],
+    });
   }
 }
 
@@ -93,20 +88,20 @@ function componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, fi
       cliConfigFile.component.default.customDirectory,
       cliConfigFile.component[cmd.type].customDirectory,
       cmd.customDirectory,
-    ].filter((e) => Boolean(e) && typeof e === 'string');
+    ].filter(e => Boolean(e) && typeof e === 'string');
 
     if (customDirectoryConfigs.length > 0) {
       const customDirectory = customDirectoryConfigs.slice(-1).toString();
 
-      // Double check if the customDirectory is templatable
-      if (templateNameRE.exec(customDirectory) == null) {
-        console.error(
-          chalk.red(
-            `customDirectory [${customDirectory}] for ${componentName} does not contain a templatable value.\nPlease check your configuration!`
-          )
-        );
-
-        process.exit(-2);
+      // 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"',
+          ],
+        });
       }
 
       for (const convertor in convertors) {
@@ -128,7 +123,7 @@ function componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, fi
 
 function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convertors }) {
   // @ts-ignore
-  const { usesStyledComponents, cssPreprocessor, testLibrary, usesCssModule, usesTypeScript } = cliConfigFile;
+  const { cssPreprocessor, testLibrary, usesCssModule, usesTypeScript } = cliConfigFile;
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
   let filename = null;
@@ -136,35 +131,36 @@ 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,
-      customTemplates.component
+      customTemplates.component,
     );
 
     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) {
         const cssPath = `${componentName}.styled`;
         template = template.replace(
           `import styles from './templatename.module.css'`,
-          `import { templatenameWrapper } from './${cssPath}'`
+          `import { templatenameWrapper } from './${cssPath}'`,
         );
         template = template.replace(` className={styles.templatename}`, '');
         template = template.replace(` <div`, '<templatenameWrapper');
@@ -173,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}'`);
@@ -183,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';`, '');
@@ -205,11 +201,11 @@ 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,
-      customTemplates.style
+      customTemplates.style,
     );
 
     template = customTemplate;
@@ -223,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;
@@ -246,11 +242,11 @@ 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,
-      customTemplates.test
+      customTemplates.test,
     );
 
     template = customTemplate;
@@ -258,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;
     }
@@ -285,17 +279,17 @@ 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,
-      customTemplates.story
+      customTemplates.story,
     );
 
     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`;
@@ -317,17 +311,17 @@ 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,
-      customTemplates.lazy
+      customTemplates.lazy,
     );
 
     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`;
@@ -349,23 +343,20 @@ function customFileTemplateGenerator({ componentName, cmd, cliConfigFile, compon
   // Check for a valid custom template for the corresponding custom component file.
 
   if (!customTemplates || !customTemplates[fileType]) {
-    console.error(
-      chalk.red(
-        `
-ERROR: Custom component files require a valid custom template.
-Please make sure you're pointing to the right custom template path in your generate-react-cli.json config file.
-        `
-      )
-    );
-
-    return process.exit(1);
+    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',
+      ],
+    });
   }
 
-  // --- Load and use the custom component template.
+  // Load and use the custom component template.
 
   const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
     componentName,
-    customTemplates[fileType]
+    customTemplates[fileType],
   );
 
   template = customTemplate;
@@ -378,7 +369,7 @@ Please make sure you're pointing to the right custom template path in your gener
   };
 }
 
-// --- 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,
@@ -400,25 +391,27 @@ const componentTemplateGeneratorMap = {
 
 export function generateComponent(componentName, cmd, cliConfigFile) {
   const componentFileTypes = ['component', ...getCorrespondingComponentFileTypes(cmd)];
+  const generatedFiles = [];
+  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 (
-      (cmd[componentFileType] && cmd[componentFileType].toString() === 'true') ||
-      componentFileType === buildInComponentFileTypes.COMPONENT
+      (cmd[componentFileType] && cmd[componentFileType].toString() === 'true')
+      || componentFileType === buildInComponentFileTypes.COMPONENT
     ) {
       const generateTemplate = componentTemplateGeneratorMap[componentFileType] || customFileTemplateGenerator;
 
       const convertors = {
-        templatename: componentName,
-        TemplateName: startCase(camelCase(componentName)).replace(/ /g, ''),
-        templateName: camelCase(componentName),
+        'templatename': componentName,
+        'TemplateName': startCase(camelCase(componentName)).replace(/ /g, ''),
+        'templateName': camelCase(componentName),
         'template-name': kebabCase(componentName),
-        template_name: snakeCase(componentName),
-        TEMPLATE_NAME: snakeCase(componentName).toUpperCase(),
-        TEMPLATENAME: componentName.toUpperCase(),
+        'template_name': snakeCase(componentName),
+        'TEMPLATE_NAME': snakeCase(componentName).toUpperCase(),
+        'TEMPLATENAME': componentName.toUpperCase(),
       };
 
       const { componentPath, filename, template } = generateTemplate({
@@ -429,90 +422,41 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
         convertors,
       });
 
-      // --- Make sure the component does not already exist in the path directory.
+      // Extract base path for summary
+      if (!basePath) {
+        basePath = path.dirname(componentPath);
+      }
+
+      // Make sure the component does not already exist in the path directory.
 
       if (existsSync(componentPath)) {
-        console.error(chalk.red(`${filename} already exists in this path "${componentPath}".`));
+        generatedFiles.push({ filename, status: 'skipped', path: componentPath });
       } else {
         try {
           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 });
             });
           }
 
-          console.log(chalk.green(`${filename} was successfully created at ${componentPath}`));
-        } catch (error) {
-          console.error(chalk.red(`${filename} failed and was not created.`));
-          console.error(error);
+          generatedFiles.push({ filename, status: 'created', path: componentPath });
+        } catch (err) {
+          generatedFiles.push({ filename, status: 'failed', path: componentPath });
+          error(`Failed to create ${filename}`, {
+            details: err.message,
+            suggestions: [
+              'Check that you have write permissions to the target directory',
+              'Verify the path is valid',
+            ],
+          });
         }
       }
     }
   });
 
-  if (cmd.dryRun) {
-    console.log();
-    console.log(chalk.yellow(`NOTE: The "dry-run" flag means no changes were made.`));
-  }
+  // Show summary
+  fileSummary(generatedFiles, basePath, { dryRun: cmd.dryRun });
 }

package/src/utils/grcConfigUtils.js

@@ -1,9 +1,9 @@
-import chalk from 'chalk';
 import fsExtra from 'fs-extra';
 import inquirer from 'inquirer';
 
 import merge from 'lodash/merge.js';
 import deepKeys from './deepKeysUtils.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?',
   },
 ];
 
@@ -89,85 +89,39 @@ const grcConfigQuestions = [
 
 async function createCLIConfigFile() {
   try {
-    console.log();
-    console.log(
-      chalk.cyan(
-        '--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------',
-      ),
+    header(
+      'Welcome to Generate React CLI!',
+      'Answer a few questions to customize the CLI for your project.',
     );
-    console.log(
-      chalk.cyan(
-        'It looks like this is the first time that you\'re running generate-react-cli within this project.',
-      ),
-    );
-    console.log();
-    console.log(
-      chalk.cyan(
-        'Answer a few questions to customize generate-react-cli for your project needs (this will create a "generate-react-cli.json" config file on the root level of this project).',
-      ),
-    );
-    console.log(
-      chalk.cyan(
-        '--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------',
-      ),
-    );
-    console.log();
 
     const answers = await prompt(grcConfigQuestions);
 
     outputFileSync('generate-react-cli.json', JSON.stringify(answers, null, 2));
 
-    console.log();
-    console.log(
-      chalk.cyan(
-        'The "generate-react-cli.json" config file has been successfully created on the root level of your project.',
-      ),
-    );
-
-    console.log('');
-    console.log(chalk.cyan('You can always go back and update it as needed.'));
-    console.log('');
-    console.log(chalk.cyan('Happy Hacking!'));
-    console.log('');
-    console.log('');
+    blank();
+    success('Created the generate-react-cli.json config file');
+    blank();
+    outro('You can always update the config file manually. Happy Hacking!');
 
     return answers;
-  }
-  catch (e) {
-    console.error(
-      chalk.red.bold(
-        'ERROR: Could not create a "generate-react-cli.json" config file.',
-      ),
-    );
+  } catch (e) {
+    error('Could not create config file', {
+      details: 'Failed to write generate-react-cli.json',
+      suggestions: [
+        'Check that you have write permissions in this directory',
+        'Make sure the directory is not read-only',
+      ],
+    });
     return e;
   }
 }
 
 async function updateCLIConfigFile(missingConfigQuestions, currentConfigFile) {
   try {
-    console.log('');
-    console.log(
-      chalk.cyan(
-        '------------------------------------------------------------------------------------------------------------------------------',
-      ),
-    );
-    console.log(
-      chalk.cyan(
-        'Generate React CLI has been updated and has a few new features from the last time you ran it within this project.',
-      ),
-    );
-    console.log('');
-    console.log(
-      chalk.cyan(
-        'Please answer a few questions to update the "generate-react-cli.json" config file.',
-      ),
+    header(
+      'Generate React CLI has new features!',
+      'Answer a few questions to update your config file.',
     );
-    console.log(
-      chalk.cyan(
-        '------------------------------------------------------------------------------------------------------------------------------',
-      ),
-    );
-    console.log('');
 
     const answers = await prompt(missingConfigQuestions);
     const updatedAnswers = merge({}, currentConfigFile, answers);
@@ -177,30 +131,20 @@ async function updateCLIConfigFile(missingConfigQuestions, currentConfigFile) {
       JSON.stringify(updatedAnswers, null, 2),
     );
 
-    console.log();
-    console.log(
-      chalk.cyan(
-        'The ("generate-react-cli.json") has successfully updated for this project.',
-      ),
-    );
-
-    console.log();
-    console.log(
-      chalk.cyan('You can always go back and manually update it as needed.'),
-    );
-    console.log();
-    console.log(chalk.cyan('Happy Hacking!'));
-    console.log();
-    console.log();
+    blank();
+    success('Updated the generate-react-cli.json config file');
+    blank();
+    outro('You can always update the config file manually. Happy Hacking!');
 
     return updatedAnswers;
-  }
-  catch (e) {
-    console.error(
-      chalk.red.bold(
-        'ERROR: Could not update the "generate-react-cli.json" config file.',
-      ),
-    );
+  } catch (e) {
+    error('Could not update config file', {
+      details: 'Failed to write generate-react-cli.json',
+      suggestions: [
+        'Check that the file is not locked or read-only',
+        'Verify you have write permissions',
+      ],
+    });
     return e;
   }
 }
@@ -238,17 +182,16 @@ export async function getCLIConfigFile() {
       }
 
       return currentConfigFile;
-    }
-    catch {
+    } catch {
       return await createCLIConfigFile();
     }
-  }
-  catch {
-    console.error(
-      chalk.red.bold(
-        'ERROR: Please make sure that you\'re running the generate-react-cli commands from the root level of your React project',
-      ),
-    );
-    return process.exit(1);
+  } catch {
+    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',
+      ],
+    });
   }
 }

package/src/utils/messagesUtils.js

@@ -0,0 +1,148 @@
+import chalk from 'chalk';
+
+const DEFAULT_TERMINAL_WIDTH = 80;
+
+// Symbols for consistent visual feedback
+const symbols = {
+  success: chalk.green('✓'),
+  error: chalk.red('✖'),
+  warning: chalk.yellow('⚠'),
+  info: chalk.blue('ℹ'),
+  arrow: chalk.cyan('→'),
+  bullet: chalk.dim('•'),
+};
+
+// Create a responsive divider that adapts to terminal width
+function divider(color = 'cyan') {
+  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) {
+    console.log(`  ${symbols.success} ${chalk.green(message)}`);
+    console.log(`    ${symbols.arrow} ${chalk.dim(filePath)}`);
+  } else {
+    console.log(`${symbols.success} ${chalk.green(message)}`);
+  }
+}
+
+// Error message with optional details and suggestions
+export function error(message, { details, suggestions } = {}) {
+  console.log();
+  console.log(`${symbols.error} ${chalk.red.bold('ERROR:')} ${chalk.red(message)}`);
+
+  if (details) {
+    console.log(`  ${chalk.dim(details)}`);
+  }
+
+  if (suggestions && suggestions.length > 0) {
+    console.log();
+    console.log(chalk.dim('  Try one of:'));
+    suggestions.forEach((suggestion) => {
+      console.log(`    ${symbols.bullet} ${chalk.dim(suggestion)}`);
+    });
+  }
+  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)}`);
+}
+
+// Info message
+export function info(message) {
+  console.log(`${symbols.info} ${chalk.cyan(message)}`);
+}
+
+// Header for sections (like config setup intro)
+export function header(title, subtitle) {
+  console.log();
+  console.log(divider());
+  console.log(chalk.cyan.bold(title));
+  if (subtitle) {
+    console.log(chalk.dim(subtitle));
+  }
+  console.log(divider());
+  console.log();
+}
+
+// Summary after file generation
+export function fileSummary(files, basePath, { dryRun = false } = {}) {
+  console.log();
+
+  const createdFiles = files.filter(f => f.status === 'created');
+  const skippedFiles = files.filter(f => f.status === 'skipped');
+
+  if (dryRun) {
+    // Dry-run mode: show what would happen
+    console.log(`${symbols.info} ${chalk.cyan('Dry-run mode')} ${chalk.dim('- no files were created')}`);
+    console.log();
+
+    if (createdFiles.length > 0) {
+      console.log(chalk.dim(`Would create in ${basePath}:`));
+      createdFiles.forEach((file, index) => {
+        const isLast = index === createdFiles.length - 1 && skippedFiles.length === 0;
+        const prefix = isLast ? '└──' : '├──';
+        console.log(`  ${chalk.dim(prefix)} ${file.filename}`);
+      });
+    }
+
+    if (skippedFiles.length > 0) {
+      if (createdFiles.length > 0) {
+        console.log();
+      }
+      console.log(chalk.dim('Already exist (would be skipped):'));
+      skippedFiles.forEach((file, index) => {
+        const isLast = index === skippedFiles.length - 1;
+        const prefix = isLast ? '└──' : '├──';
+        console.log(`  ${chalk.dim(prefix)} ${symbols.warning} ${chalk.dim(file.filename)}`);
+      });
+    }
+  } else {
+    // Actual run: show what happened
+    if (createdFiles.length > 0) {
+      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} ${pluralize(skippedFiles.length, 'file')} (already exist)`)}`);
+    }
+
+    // Show file tree with status icons
+    files.forEach((file, index) => {
+      const isLast = index === files.length - 1;
+      const prefix = isLast ? '└──' : '├──';
+      const statusIcon = file.status === 'created'
+        ? symbols.success
+        : file.status === 'skipped'
+          ? symbols.warning
+          : symbols.error;
+      console.log(`  ${chalk.dim(prefix)} ${statusIcon} ${file.filename}`);
+    });
+  }
+
+  console.log();
+}
+
+// Closing message (Happy Hacking)
+export function outro(message = 'Happy Hacking!') {
+  console.log(chalk.cyan(message));
+  console.log();
+}
+
+// Blank line helper
+export function blank() {
+  console.log();
+}

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);
-  });
-});
-`;