generate-react-cli 9.1.0 → 10.1.0

package/bin/generate-react.js

@@ -1,24 +1,26 @@
 #!/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',
+        'Use nvm to manage multiple Node versions: nvm install 22',
+      ],
+    });
 
     return true;
   }
 
   return false;
-};
+}
 
 // --- Check if user is running Node 12 or higher.
 

package/package.json

@@ -1,73 +1,68 @@
 {
   "name": "generate-react-cli",
-  "version": "9.1.0",
+  "version": "10.1.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": ">=10.x",
-    "npm": ">= 6.x"
+    "node": ">=22",
+    "npm": ">=10"
   },
   "browserslist": [
     "maintained node versions"
   ],
   "scripts": {
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
     "chalk": "5.6.2",
-    "commander": "14.0.0",
-    "deep-keys": "0.5.0",
-    "dotenv": "16.6.1",
-    "fs-extra": "11.2.0",
-    "inquirer": "12.9.4",
+    "commander": "14.0.2",
+    "fs-extra": "11.3.3",
+    "inquirer": "13.2.0",
     "lodash": "4.17.21",
     "replace": "1.2.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-conventional": "19.8.1",
+    "@antfu/eslint-config": "7.0.1",
+    "@commitlint/cli": "20.3.1",
+    "@commitlint/config-conventional": "20.3.1",
     "@semantic-release/commit-analyzer": "13.0.1",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "11.0.5",
-    "@semantic-release/npm": "12.0.2",
-    "@semantic-release/release-notes-generator": "14.0.3",
-    "eslint": "8.57.1",
-    "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "9.1.2",
-    "eslint-plugin-prettier": "5.5.4",
+    "@semantic-release/github": "12.0.2",
+    "@semantic-release/npm": "13.1.3",
+    "@semantic-release/release-notes-generator": "14.1.0",
+    "eslint": "9.39.2",
     "husky": "9.1.7",
-    "prettier": "3.6.2",
-    "pretty-quick": "4.2.2",
-    "semantic-release": "24.2.7"
+    "lint-staged": "16.2.7",
+    "semantic-release": "25.0.2"
   },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "es5",
-    "printWidth": 120
+  "lint-staged": {
+    "*.js": "eslint --fix"
   },
   "release": {
     "plugins": [
@@ -97,25 +92,5 @@
         200
       ]
     }
-  },
-  "eslintConfig": {
-    "extends": [
-      "airbnb-base",
-      "plugin:prettier/recommended"
-    ],
-    "env": {
-      "commonjs": false,
-      "node": true
-    },
-    "parserOptions": {
-      "ecmaVersion": "latest"
-    },
-    "rules": {
-      "import/extensions": [
-        {
-          "js": "always"
-        }
-      ]
-    }
   }
 }

package/src/cli.js

@@ -1,7 +1,5 @@
+import { createRequire } from 'node:module';
 import { program } from 'commander';
-import { createRequire } from 'module';
-import { config as dotEnvConfig } from 'dotenv';
-import path from 'path';
 
 import initGenerateComponentCommand from './commands/generateComponent.js';
 import { getCLIConfigFile } from './utils/grcConfigUtils.js';
@@ -11,10 +9,6 @@ export default async function cli(args) {
   const localRequire = createRequire(import.meta.url);
   const pkg = localRequire('../package.json');
 
-  // init dotenv
-
-  dotEnvConfig({ path: path.resolve(process.cwd(), '.env.local') });
-
   // Initialize generate component command
 
   initGenerateComponentCommand(args, cliConfigFile, program);

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/utils/deepKeysUtils.js

@@ -0,0 +1,23 @@
+/**
+ * Recursively extracts all keys from a nested object as dot-notation paths.
+ *
+ * @param {object} obj - The object to extract keys from
+ * @param {string} [prefix] - Internal prefix for recursion
+ * @returns {string[]} Array of dot-notation key paths
+ *
+ * @example
+ * deepKeys({ a: 1, b: { c: 2 } })
+ * // Returns: ['a', 'b.c']
+ */
+export default function deepKeys(obj, prefix = '') {
+  return Object.keys(obj).reduce((keys, key) => {
+    const path = prefix ? `${prefix}.${key}` : key;
+    const value = obj[key];
+
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      return [...keys, ...deepKeys(value, path)];
+    }
+
+    return [...keys, path];
+  }, []);
+}

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 componentTestEnzymeTemplate from '../templates/component/componentTestEnzymeTemplate.js';
 import componentTestTestingLibraryTemplate from '../templates/component/componentTestTestingLibraryTemplate.js';
+import componentTsLazyTemplate from '../templates/component/componentTsLazyTemplate.js';
+import componentTsTemplate from '../templates/component/componentTsTemplate.js';
+import { error, fileSummary } from './messagesUtils.js';
 
 const templateNameRE = /.*(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,14 +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.
-              `
-        )
-      );
+      const availableTypes = Object.keys(cliConfigFile.component).join(', ');
+      error(`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);
     }
@@ -57,7 +57,7 @@ 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) {
@@ -68,15 +68,14 @@ function getCustomTemplate(componentName, templatePath) {
     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.
-        `
-      )
-    );
+  } catch {
+    error(`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);
   }
@@ -93,18 +92,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!`
-          )
-        );
+        error(`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);
       }
@@ -128,7 +129,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;
@@ -140,7 +141,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
-      customTemplates.component
+      customTemplates.component,
     );
 
     template = customTemplate;
@@ -164,7 +165,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
         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');
@@ -209,7 +210,7 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName, co
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
-      customTemplates.style
+      customTemplates.style,
     );
 
     template = customTemplate;
@@ -250,7 +251,7 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, con
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
-      customTemplates.test
+      customTemplates.test,
     );
 
     template = customTemplate;
@@ -289,7 +290,7 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, co
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
-      customTemplates.story
+      customTemplates.story,
     );
 
     template = customTemplate;
@@ -321,7 +322,7 @@ function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile, con
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
-      customTemplates.lazy
+      customTemplates.lazy,
     );
 
     template = customTemplate;
@@ -349,14 +350,13 @@ 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.
-        `
-      )
-    );
+    error(`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);
   }
@@ -365,7 +365,7 @@ Please make sure you're pointing to the right custom template path in your gener
 
   const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
     componentName,
-    customTemplates[fileType]
+    customTemplates[fileType],
   );
 
   template = customTemplate;
@@ -400,25 +400,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,
     // 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,10 +431,15 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
         convertors,
       });
 
+      // 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) {
@@ -441,7 +448,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the templatename in whichever format the user typed the component name in the command.
             replace({
               regex: 'templatename',
-              replacement: convertors['templatename'],
+              replacement: convertors.templatename,
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -450,7 +457,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the TemplateName in PascalCase
             replace({
               regex: 'TemplateName',
-              replacement: convertors['TemplateName'],
+              replacement: convertors.TemplateName,
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -459,7 +466,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the templateName in camelCase
             replace({
               regex: 'templateName',
-              replacement: convertors['templateName'],
+              replacement: convertors.templateName,
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -477,7 +484,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the template_name in snake_case
             replace({
               regex: 'template_name',
-              replacement: convertors['template_name'],
+              replacement: convertors.template_name,
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -486,7 +493,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the TEMPLATE_NAME in uppercase SNAKE_CASE
             replace({
               regex: 'TEMPLATE_NAME',
-              replacement: convertors['TEMPLATE_NAME'],
+              replacement: convertors.TEMPLATE_NAME,
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -495,24 +502,28 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the TEMPLATENAME in uppercase SNAKE_CASE
             replace({
               regex: 'TEMPLATENAME',
-              replacement: convertors['TEMPLATENAME'],
+              replacement: convertors.TEMPLATENAME,
               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 deepKeys from 'deep-keys';
+import fsExtra from 'fs-extra';
 import inquirer from 'inquirer';
+
 import merge from 'lodash/merge.js';
-import fsExtra from 'fs-extra';
+import deepKeys from './deepKeysUtils.js';
+import { blank, error, header, outro, success } from './messagesUtils.js';
 
 const { accessSync, constants, outputFileSync, readFileSync } = fsExtra;
 const { prompt } = inquirer;
@@ -25,19 +25,19 @@ const projectLevelQuestions = [
   },
   {
     type: 'confirm',
-    when: (answers) => !answers['usesStyledComponents'],
+    when: answers => !answers.usesStyledComponents,
     name: 'usesCssModule',
     message: 'Does this project use CSS modules?',
   },
   {
-    type: 'list',
+    type: 'select',
     name: 'cssPreprocessor',
-    when: (answers) => !answers['usesStyledComponents'],
+    when: answers => !answers.usesStyledComponents,
     message: 'Does this project use a CSS Preprocessor?',
     choices: ['css', 'scss', 'less', 'styl'],
   },
   {
-    type: 'list',
+    type: 'select',
     name: 'testLibrary',
     message: 'What testing library does your project use?',
     choices: ['Testing Library', 'Enzyme', 'None'],
@@ -50,23 +50,27 @@ export const componentLevelQuestions = [
   {
     type: 'input',
     name: 'component.default.path',
-    message: 'Set the default path directory to where your components will be generated in?',
+    message:
+      'Set the default path directory to where your components will be generated in?',
     default: () => 'src/components',
   },
   {
     type: 'confirm',
     name: 'component.default.withStyle',
-    message: 'Would you like to create a corresponding stylesheet file with each component you generate?',
+    message:
+      'Would you like to create a corresponding stylesheet file with each component you generate?',
   },
   {
     type: 'confirm',
     name: 'component.default.withTest',
-    message: 'Would you like to create a corresponding test file with each component you generate?',
+    message:
+      'Would you like to create a corresponding test file with each component you generate?',
   },
   {
     type: 'confirm',
     name: 'component.default.withStory',
-    message: 'Would you like to create a corresponding story with each component you generate?',
+    message:
+      'Would you like to create a corresponding story with each component you generate?',
   },
   {
     type: 'confirm',
@@ -78,97 +82,69 @@ export const componentLevelQuestions = [
 
 // --- merge all questions together.
 
-const grcConfigQuestions = [...projectLevelQuestions, ...componentLevelQuestions];
+const grcConfigQuestions = [
+  ...projectLevelQuestions,
+  ...componentLevelQuestions,
+];
 
 async function createCLIConfigFile() {
   try {
-    console.log();
-    console.log(
-      chalk.cyan(
-        '--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------'
-      )
-    );
-    console.log(
-      chalk.cyan("It looks like this is the first time that you're running generate-react-cli within this project.")
+    header(
+      'Welcome to Generate React CLI!',
+      'Answer a few questions to customize the CLI for your 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('Config file created successfully');
+    blank();
+    outro('You can always update it manually. Happy Hacking!');
 
     return answers;
   } catch (e) {
-    console.error(chalk.red.bold('ERROR: Could not create a "generate-react-cli.json" config file.'));
+    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.'
-      )
+    header(
+      'Generate React CLI has new features!',
+      'Answer a few questions to update your config file.',
     );
-    console.log('');
-    console.log(chalk.cyan('Please answer a few questions to update the "generate-react-cli.json" config file.'));
-    console.log(
-      chalk.cyan(
-        '------------------------------------------------------------------------------------------------------------------------------'
-      )
-    );
-    console.log('');
 
     const answers = await prompt(missingConfigQuestions);
     const updatedAnswers = merge({}, currentConfigFile, answers);
 
-    outputFileSync('generate-react-cli.json', JSON.stringify(updatedAnswers, null, 2));
-
-    console.log();
-    console.log(chalk.cyan('The ("generate-react-cli.json") has successfully updated for this project.'));
+    outputFileSync(
+      'generate-react-cli.json',
+      JSON.stringify(updatedAnswers, null, 2),
+    );
 
-    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('Config file updated successfully');
+    blank();
+    outro('You can always update it manually. Happy Hacking!');
 
     return updatedAnswers;
   } catch (e) {
-    console.error(chalk.red.bold('ERROR: Could not update the "generate-react-cli.json" config file.'));
+    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;
   }
 }
@@ -183,7 +159,9 @@ export async function getCLIConfigFile() {
 
     try {
       accessSync('./generate-react-cli.json', constants.R_OK);
-      const currentConfigFile = JSON.parse(readFileSync('./generate-react-cli.json'));
+      const currentConfigFile = JSON.parse(
+        readFileSync('./generate-react-cli.json'),
+      );
 
       /**
        *  Check to see if there's a difference between grcConfigQuestions and the currentConfigFile.
@@ -191,25 +169,30 @@ export async function getCLIConfigFile() {
        */
 
       const missingConfigQuestions = grcConfigQuestions.filter(
-        (question) =>
-          !deepKeys(currentConfigFile).includes(question.name) &&
-          (question.when ? question.when(currentConfigFile) : true)
+        question =>
+          !deepKeys(currentConfigFile).includes(question.name)
+          && (question.when ? question.when(currentConfigFile) : true),
       );
 
       if (missingConfigQuestions.length) {
-        return await updateCLIConfigFile(missingConfigQuestions, currentConfigFile);
+        return await updateCLIConfigFile(
+          missingConfigQuestions,
+          currentConfigFile,
+        );
       }
 
       return currentConfigFile;
-    } catch (e) {
+    } catch {
       return await createCLIConfigFile();
     }
-  } catch (error) {
-    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"
-      )
-    );
+  } catch {
+    error('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

@@ -0,0 +1,137 @@
+import chalk from 'chalk';
+
+// 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 || 80, 80);
+  return chalk[color]('─'.repeat(width));
+}
+
+// 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();
+}
+
+// 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} file${createdFiles.length === 1 ? '' : 's'} in ${basePath}`)}`);
+    }
+    if (skippedFiles.length > 0) {
+      console.log(`${symbols.warning} ${chalk.yellow(`Skipped ${skippedFiles.length} file${skippedFiles.length === 1 ? '' : 's'} (already exist)`)}`);
+    }
+    console.log();
+
+    // 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();
+}