generate-react-cli 9.0.1 → 10.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "9.0.1",
+  "version": "10.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",
@@ -28,46 +28,41 @@
     "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": "4.12.0",
+    "@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.0",
-    "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.1.0",
+    "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/readme.md

@@ -317,6 +317,7 @@ export default TemplateName;
 | `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:
 

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/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

@@ -418,6 +418,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
         'template-name': kebabCase(componentName),
         template_name: snakeCase(componentName),
         TEMPLATE_NAME: snakeCase(componentName).toUpperCase(),
+        TEMPLATENAME: componentName.toUpperCase(),
       };
 
       const { componentPath, filename, template } = generateTemplate({
@@ -490,6 +491,15 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
               recursive: false,
               silent: true,
             });
+
+            // Will replace the TEMPLATENAME in uppercase SNAKE_CASE
+            replace({
+              regex: 'TEMPLATENAME',
+              replacement: convertors['TEMPLATENAME'],
+              paths: [componentPath],
+              recursive: false,
+              silent: true,
+            });
           }
 
           console.log(chalk.green(`${filename} was successfully created at ${componentPath}`));

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';
 
 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,29 +82,34 @@ 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.")
+      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).'
-      )
+        '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();
 
@@ -111,8 +120,8 @@ async function createCLIConfigFile() {
     console.log();
     console.log(
       chalk.cyan(
-        'The "generate-react-cli.json" config file has been successfully created on the root level of your project.'
-      )
+        'The "generate-react-cli.json" config file has been successfully created on the root level of your project.',
+      ),
     );
 
     console.log('');
@@ -123,8 +132,13 @@ async function createCLIConfigFile() {
     console.log('');
 
     return answers;
-  } catch (e) {
-    console.error(chalk.red.bold('ERROR: Could not create a "generate-react-cli.json" config file.'));
+  }
+  catch (e) {
+    console.error(
+      chalk.red.bold(
+        'ERROR: Could not create a "generate-react-cli.json" config file.',
+      ),
+    );
     return e;
   }
 }
@@ -134,41 +148,59 @@ async function updateCLIConfigFile(missingConfigQuestions, currentConfigFile) {
     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.'
-      )
+        '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.'));
     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));
+    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.'));
+    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(
+      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();
 
     return updatedAnswers;
-  } catch (e) {
-    console.error(chalk.red.bold('ERROR: Could not update the "generate-react-cli.json" config file.'));
+  }
+  catch (e) {
+    console.error(
+      chalk.red.bold(
+        'ERROR: Could not update the "generate-react-cli.json" config file.',
+      ),
+    );
     return e;
   }
 }
@@ -183,7 +215,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,24 +225,29 @@ 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) {
+  }
+  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"
-      )
+        '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);
   }