generate-react-cli 8.3.0 → 8.4.1

package/bin/generate-react.js

@@ -6,12 +6,12 @@ const isNotValidNodeVersion = () => {
   const semver = currentNodeVersion.split('.');
   const major = semver[0];
 
-  if (major < 16) {
+  if (major < 18) {
     console.error(
       // eslint-disable-next-line
       'You are running Node ' +
         currentNodeVersion +
-        ' Generate React CLI requires Node 16 or higher. Please update your version of Node.'
+        ' Generate React CLI requires Node 18 or higher. Please update your version of Node.'
     );
 
     return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "8.3.0",
+  "version": "8.4.1",
   "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",
@@ -38,32 +38,31 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "chalk": "5.2.0",
-    "commander": "9.4.1",
+    "chalk": "5.3.0",
+    "commander": "12.0.0",
     "deep-keys": "0.5.0",
-    "dotenv": "^16.0.3",
-    "fs-extra": "11.1.0",
-    "inquirer": "9.1.4",
+    "dotenv": "16.4.5",
+    "fs-extra": "11.2.0",
+    "inquirer": "9.2.15",
     "lodash": "4.17.21",
-    "openai": "^3.1.0",
     "replace": "1.2.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.3.0",
-    "@commitlint/config-conventional": "17.3.0",
-    "@semantic-release/commit-analyzer": "9.0.2",
+    "@commitlint/cli": "18.6.1",
+    "@commitlint/config-conventional": "18.6.2",
+    "@semantic-release/commit-analyzer": "11.1.0",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "8.0.7",
-    "@semantic-release/npm": "9.0.1",
-    "@semantic-release/release-notes-generator": "10.0.3",
-    "eslint": "8.30.0",
+    "@semantic-release/github": "9.2.6",
+    "@semantic-release/npm": "11.0.2",
+    "@semantic-release/release-notes-generator": "12.1.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "husky": "8.0.2",
-    "prettier": "2.8.1",
-    "pretty-quick": "3.1.3",
-    "semantic-release": "19.0.5"
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "husky": "9.0.11",
+    "prettier": "3.2.5",
+    "pretty-quick": "4.0.0",
+    "semantic-release": "23.0.2"
   },
   "prettier": {
     "singleQuote": true,
@@ -90,7 +89,14 @@
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
-    ]
+    ],
+    "rules": {
+      "body-max-line-length": [
+        0,
+        "always",
+        200
+      ]
+    }
   },
   "eslintConfig": {
     "extends": [

package/readme.md

@@ -2,7 +2,7 @@
 
 [![License](https://img.shields.io/npm/l/express.svg)](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE)
 
-<p align="center"> 
+<p align="center">
   <img src="https://raw.githubusercontent.com/arminbro/generate-react-cli/master/docs/assets/generate-react-cli.svg?raw=true"/>
 </p>
 
@@ -20,8 +20,9 @@ You can also watch an excellent [video](https://www.youtube.com/watch?v=NEvnt3MW
 - [Generate components](#generate-components)
 - [Custom component types](#custom-component-types)
 - [Custom component templates](#custom-component-templates)
+- [Custom component directory](#custom-component-directory)
 - [Custom component files](#custom-component-files)
-- [OpenAi integration (Alpha release)](#openai-integration-alpha-release)
+- [OpenAi integration (Alpha release)](https://github.com/arminbro/generate-react-cli/tree/alpha?tab=readme-ov-file#openai-integration-alpha-release)
 
 ## You can run it using npx like this:
 
@@ -97,10 +98,11 @@ Otherwise, if you don't pass any options, it will just use the default values th
     <th>Value Type</th>
     <th>Default Value</th>
   </tr>
+
   <tr>
     <td width="20%"><b>--path</b></td>
     <td width="60%">
-      Value of the path where you want the component to be generated in (e.g. <b>src/components</b>).  
+      Value of the path where you want the component to be generated in (e.g. <b>src/components</b>).
     </td>
     <td width="20%">String</td>
     <td width="20%"><code>component.default.path<code></td>
@@ -118,7 +120,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://reactjs.org/docs/code-splitting.html#code-splitting">code splitting</a>) with this component.
     </td>
     <td width="20%">Boolean</td>
     <td width="20%"><code>component.default.withLazy<code></td>
@@ -127,7 +129,7 @@ Otherwise, if you don't pass any options, it will just use the default values th
   <tr>
     <td width="20%"><b>--withStory</b></td>
     <td width="60%">
-      Creates a corresponding (<a href="https://storybook.js.org">storybook</a>) story file with this component.      
+      Creates a corresponding (<a href="https://storybook.js.org">storybook</a>) story file with this component.
     </td>
     <td width="20%">Boolean</td>
     <td width="20%"><code>component.default.withStory<code></td>
@@ -136,7 +138,7 @@ Otherwise, if you don't pass any options, it will just use the default values th
   <tr>
     <td width="20%"><b>--withStyle</b></td>
     <td width="60%">
-      Creates a corresponding stylesheet file with this component.    
+      Creates a corresponding stylesheet file with this component.
     </td>
     <td width="20%">Boolean</td>
     <td width="20%"><code>component.default.withStyle<code></td>
@@ -145,11 +147,12 @@ Otherwise, if you don't pass any options, it will just use the default values th
   <tr>
     <td width="20%"><b>--withTest</b></td>
     <td width="60%">
-      Creates a corresponding test file with this component.      
+      Creates a corresponding test file with this component.
     </td>
     <td width="20%">Boolean</td>
     <td width="20%"><code>component.default.withTest<code></td>
   </tr>
+
   <tr>
     <td width="20%"><b>--dry-run</b></td>
     <td width="60%">
@@ -158,25 +161,28 @@ Otherwise, if you don't pass any options, it will just use the default values th
     <td width="20%">Boolean</td>
     <td width="20%"><code>false<code></td>
   </tr>
+
   <tr>
     <td width="20%"><b>--flat</b></td>
     <td width="60%">
-      Generate the files in the mentioned path insted of creating new folder for it
+      Generate the files in the mentioned path instead of creating new folder for it
     </td>
     <td width="20%">Boolean</td>
     <td width="20%"><code>false<code></td>
   </tr>
-    <tr>
-    <td width="20%"><b>--describe</b></td>
+
+  <tr>
+    <td width="20%"><b>--customDirectory</b></td>
     <td width="60%">
-      Describe the component you're trying to generate, and OpenAI will do its best to render it following your instructions.
+      Template value that overrides the name of the directory of the component to be generated in.<br />
+      See more under <a href="#custom-component-directory">custom component directory</a>.
     </td>
     <td width="20%">String</td>
-    <td width="20%"><code>null<code></td>
+    <td width="20%"><code>null</code></td>
   </tr>
 </table>
 
-### Custom component types:
+### Custom component types
 
 By default, GRC will use the `component.default` configuration rules when running the component command out of the box.
 
@@ -329,6 +335,93 @@ it('It should mount', () => {
 });
 ```
 
+### Custom component directory
+
+Using the `customDirectory` you can easily override the directory name for the component generated. For instance, if prefixes are required for particular components or if template names will be mixed, the `customDirectory` option will allow you to override the way that GRC generates the name of the directory where the component files will live.
+
+The `customDirectory` directive allows all supported casings (see previous section) and can be overridden at the following levels in ascending specific of priority:
+
+- top
+- component.default
+- component._type_
+- CLI
+
+#### Example:
+
+For React Context Providers in a project, the decision has been made to separate Context generation from the visual components.
+
+In a typical configuration the configuration would look as following:
+
+```json
+{
+  "provider": {
+    "path": "src/components/providers",
+    "withLazy": false,
+    "withStory": true,
+    "withStyle": false,
+    "withTest": true,
+    "withTypes": true,
+    "withContext": true,
+    "customTemplates": {
+      "component": "src/components/templates/provider/TemplateName.tsx",
+      "context": "src/components/templates/provider/TemplateName.context.ts",
+      "story": "src/components/templates/provider/TemplateName.stories.tsx",
+      "test": "src/components/templates/provider/TemplateName.test.tsx",
+      "types": "src/components/templates/provider/TemplateName.types.ts"
+    }
+  }
+}
+```
+
+With the configuration above, the component would be required to either follow a full or a minimalistic naming convention.
+I.e. the component would either need to be generated as `ThemeProvider` and consequently the context name would be generated as `ThemeProviderContext`, or by renaming the files and templates as `TemplateNameProvider` but with the downside of the component path being generated as `src/components/providers/Theme`. This creates inconsistent naming in the directory containg the component files.
+
+To work around this, the `customDirectory` option can be used to enforce a particular style.
+
+```json
+{
+  ...
+  "provider": {
+    "path": "src/components/providers",
+      "withLazy": false,
+      "withStory": true,
+      "withStyle": false,
+      "withTest": true,
+      "withTypes": true,
+      "withContext": true,
+      "customDirectory": "TemplateNameProvider",
+      "customTemplates": {
+          "component": "src/components/templates/provider/TemplateNameProvider.tsx",
+          "context": "src/components/templates/provider/TemplateName.context.ts",
+          "story": "src/components/templates/provider/TemplateNameProvider.stories.tsx",
+          "test": "src/components/templates/provider/TemplateNameProvider.test.tsx",
+          "types": "src/components/templates/provider/TemplateNameProvider.types.ts"
+      }
+  }
+  ...
+}
+```
+
+The above configuration would allow you to mix and match different template names and keep naming consistent.
+
+If we executed GRC with the above configuration (`npx generate-react-cli component Theme --type=provider`), the result would look like this:
+
+```fs
+src/components/providers/ThemeProvider/Theme.context.ts
+src/components/providers/ThemeProvider/ThemeProvider.tsx
+src/components/providers/ThemeProvider/ThemeProvider.stories.tsx
+src/components/providers/ThemeProvider/ThemeProvider.test.tsx
+src/components/providers/ThemeProvider/ThemeProvider.types.ts
+```
+
+Similarly, this construct could be used as a shortcut for generating other named components, like the `BoxLayout` example above, depending on that could be shortened to:
+
+```sh
+  npx generate-react-cli component Box --type=layout --customDir=TemplateNameLayout
+```
+
+Or it could be used to generate files with a naming convention with `Test`, `Lazy`, `Context`, `Theme`, or `Provider` suffixes. Or even combined with skeleton CSS
+
 ### Custom component files
 
 GRC comes with corresponding built-in files for a given component if you need them (i.e., `withStyle`, `withTest`, `withStory`, and `withLazy`).
@@ -384,106 +477,6 @@ You should also see that we added `index` and `storyStyle` to our `customTemplat
 
 Also, we used the `TemplateName` keyword for the `storyStyle` custom file. GRC will generate this corresponding file and replace `TemplateName` with the component name.
 
-## OpenAI integration (Alpha release)
-
-Well, the time has come to incorporate OpenAI with GRC.
-
-I had a chance to experiment with OpenAI's latest GPT-3 natural language model, and I was super impressed by its capabilities. You can read more about OpenAI by visiting their site: https://openai.com/.
-
-If you've been using GRC, you already know about its component generation capabilities using its internal templates or the custom ones you provide.
-
-With the help of OpenAI, we can now generate our components intelligently by describing them using the new `--describe` flag, or `-d` for short.
-
-The plan for this alpha integration will start simple, but I have a few good ideas coming in the near future (and I'm hoping to hear some of yours) on how we can use OpenAI with GRC to improve the developer experience.
-
-Please remember that this release is still early, and you will run into bugs. So, please report any bugs or issues [here](https://github.com/arminbro/generate-react-cli/issues).
-
-### Okay, let's get started.
-
-1. If you don't have one, you must create an OpenAI account: https://openai.com/api/.
-2. You'll need to obtain a secret API key from OpenAI. You can do so by visiting https://beta.openai.com/account/api-keys.
-3. Once you have your API key, you'll need to create a `.env.local` file in your react project and store it as a variable as `OPENAI_API_KEY`. Please be sure not to share the key or push it to version control, as it is private.
-
-GRC will pass the key to OpenAI to communicate with the API on your behalf. You will see the usage reflected on your OpenAI account here: https://beta.openai.com/account/usage.
-
-GRC uses the DaVinci language model, so you can check out their pricing here: https://openai.com/api/pricing/.
-
-Let's generate our first component using OpenAI:
-
-```sh
-npx generate-react-cli@alpha c Counter -d "Create a counter component that increments by one when I click on the increment button"
-```
-
-GRC should have created a Counter component that looks something like this 🤯:
-
-```jsx
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './Counter.css';
-
-const Counter = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="Counter" data-testid="Counter">
-      <h2> The count is: {count} </h2>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
-    </div>
-  );
-};
-
-Counter.propTypes = {};
-
-Counter.defaultProps = {};
-
-export default Counter;
-```
-
-OpenAI will do its best to generate the component following the instructions provided in the `--describe` flag while using the patterns supplied from the internal or custom component templates.
-
-Okay, let's try another one.
-
-```sh
-npx generate-react-cli@alpha c GlobalNav -d "Create a navbar component with 1 logo named 'GRC' and 3 links: 'Home', 'About', 'Contact'"
-```
-
-and here's the output in src/components/GlobalNav/GlobalNav.js:
-
-```jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './GlobalNav.css';
-
-const GlobalNav = () => (
-  <div className="GlobalNav" data-testid="GlobalNav">
-    <a href="#">GRC</a>
-    <ul>
-      <li>
-        <a href="#">Home</a>
-      </li>
-      <li>
-        <a href="#">About</a>
-      </li>
-      <li>
-        <a href="#">Contact</a>
-      </li>
-    </ul>
-  </div>
-);
-
-GlobalNav.propTypes = {};
-
-GlobalNav.defaultProps = {};
-
-export default GlobalNav;
-```
-
-That's a wrap. I hope this integration will allow us to generate React components more efficiently, and we can still go in and make the necessary adjustments.
-
-Again, please provide any feedback if you have any, and I would love to see some of the components that you generate with GRC+OpenAI.
-
-Please share them with me on Twitter [@arminbro](https://twitter.com/arminbro).
-
 ## License
 
 Generate React CLI is an open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).

package/src/commands/generateComponent.js

@@ -29,7 +29,17 @@ export default function initGenerateComponentCommand(args, cliConfigFile, progra
       'Generate the files in the mentioned path instead of creating new folder for it',
       selectedComponentType.flat || false
     )
-    .option('-dr, --dry-run', 'Show what will be generated without writing to disk');
+    .option('-dr, --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'
+    );
 
   // Dynamic component command option defaults.
 

package/src/utils/generateComponentUtils.js

@@ -7,7 +7,6 @@ import snakeCase from 'lodash/snakeCase.js';
 import startCase from 'lodash/startCase.js';
 import fsExtra from 'fs-extra';
 
-import { aiComponentGenerator } from '../services/openAiService.js';
 import componentJsTemplate from '../templates/component/componentJsTemplate.js';
 import componentTsTemplate from '../templates/component/componentTsTemplate.js';
 import componentCssTemplate from '../templates/component/componentCssTemplate.js';
@@ -19,6 +18,8 @@ import componentTestEnzymeTemplate from '../templates/component/componentTestEnz
 import componentTestDefaultTemplate from '../templates/component/componentTestDefaultTemplate.js';
 import componentTestTestingLibraryTemplate from '../templates/component/componentTestTestingLibraryTemplate.js';
 
+const templateNameRE = /.*(template[|_-]?name).*/i;
+
 const { existsSync, outputFileSync, readFileSync } = fsExtra;
 
 export function getComponentByType(args, cliConfigFile) {
@@ -71,7 +72,7 @@ function getCustomTemplate(componentName, templatePath) {
     console.error(
       chalk.red(
         `
-ERROR: The custom template path of "${templatePath}" does not exist. 
+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.
         `
       )
@@ -81,7 +82,52 @@ Please make sure you're pointing to the right custom template path in your gener
   }
 }
 
-function componentTemplateGenerator({ cmd, componentName, cliConfigFile }) {
+function componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, filename, convertors }) {
+  let componentPath = cmd.path;
+
+  if (cmd.flat !== true) {
+    let componentDirectory = componentName;
+
+    const customDirectoryConfigs = [
+      cliConfigFile.customDirectory,
+      cliConfigFile.component.default.customDirectory,
+      cliConfigFile.component[cmd.type].customDirectory,
+      cmd.customDirectory,
+    ].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);
+      }
+
+      for (const convertor in convertors) {
+        const re = new RegExp(`.*${convertor}.*`);
+
+        if (re.exec(customDirectory) !== null) {
+          componentDirectory = customDirectory.replace(convertor, convertors[convertor]);
+        }
+      }
+    }
+
+    componentPath += `/${componentDirectory}`;
+  }
+
+  componentPath += `/${filename}`;
+
+  return componentPath;
+}
+
+function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convertors }) {
+  // @ts-ignore
   const { usesStyledComponents, cssPreprocessor, testLibrary, usesCssModule, usesTypeScript } = cliConfigFile;
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
@@ -145,13 +191,13 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile }) {
   }
 
   return {
-    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
+    componentPath: componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, filename, convertors }),
     filename,
     template,
   };
 }
 
-function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName }) {
+function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName, convertors }) {
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
   let filename = null;
@@ -185,13 +231,13 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName })
   }
 
   return {
-    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
+    componentPath: componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, filename, convertors }),
     filename,
     template,
   };
 }
 
-function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName }) {
+function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, convertors }) {
   const { customTemplates } = cliConfigFile.component[cmd.type];
   const { testLibrary, usesTypeScript } = cliConfigFile;
   let template = null;
@@ -224,13 +270,13 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName }) {
   }
 
   return {
-    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
+    componentPath: componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, filename, convertors }),
     filename,
     template,
   };
 }
 
-function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName }) {
+function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, convertors }) {
   const { usesTypeScript } = cliConfigFile;
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
@@ -256,13 +302,13 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName })
   }
 
   return {
-    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
+    componentPath: componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, filename, convertors }),
     filename,
     template,
   };
 }
 
-function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile }) {
+function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile, convertors }) {
   const { usesTypeScript } = cliConfigFile;
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
@@ -288,13 +334,13 @@ function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile }) {
   }
 
   return {
-    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
+    componentPath: componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, filename, convertors }),
     filename,
     template,
   };
 }
 
-function customFileTemplateGenerator({ componentName, cmd, cliConfigFile, componentFileType }) {
+function customFileTemplateGenerator({ componentName, cmd, cliConfigFile, componentFileType, convertors }) {
   const { customTemplates } = cliConfigFile.component[cmd.type];
   const fileType = camelCase(componentFileType.split('with')[1]);
   let filename = null;
@@ -306,7 +352,7 @@ function customFileTemplateGenerator({ componentName, cmd, cliConfigFile, compon
     console.error(
       chalk.red(
         `
-ERROR: Custom component files require a valid custom template. 
+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.
         `
       )
@@ -326,7 +372,7 @@ Please make sure you're pointing to the right custom template path in your gener
   filename = customTemplateFilename;
 
   return {
-    componentPath: `${cmd.path}${cmd.flat ? '' : `/${componentName}`}/${filename}`,
+    componentPath: componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, filename, convertors }),
     filename,
     template,
   };
@@ -365,11 +411,21 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
     ) {
       const generateTemplate = componentTemplateGeneratorMap[componentFileType] || customFileTemplateGenerator;
 
+      const convertors = {
+        templatename: componentName,
+        TemplateName: startCase(camelCase(componentName)).replace(/ /g, ''),
+        templateName: camelCase(componentName),
+        'template-name': kebabCase(componentName),
+        template_name: snakeCase(componentName),
+        TEMPLATE_NAME: snakeCase(componentName).toUpperCase(),
+      };
+
       const { componentPath, filename, template } = generateTemplate({
         cmd,
         componentName,
         cliConfigFile,
         componentFileType,
+        convertors,
       });
 
       // --- Make sure the component does not already exist in the path directory.
@@ -384,7 +440,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: componentName,
+              replacement: convertors['templatename'],
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -393,7 +449,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the TemplateName in PascalCase
             replace({
               regex: 'TemplateName',
-              replacement: startCase(camelCase(componentName)).replace(/ /g, ''),
+              replacement: convertors['TemplateName'],
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -402,7 +458,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the templateName in camelCase
             replace({
               regex: 'templateName',
-              replacement: camelCase(componentName),
+              replacement: convertors['templateName'],
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -411,7 +467,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the template-name in kebab-case
             replace({
               regex: 'template-name',
-              replacement: kebabCase(componentName),
+              replacement: convertors['template-name'],
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -420,7 +476,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the template_name in snake_case
             replace({
               regex: 'template_name',
-              replacement: snakeCase(componentName),
+              replacement: convertors['template_name'],
               paths: [componentPath],
               recursive: false,
               silent: true,
@@ -429,32 +485,13 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             // Will replace the TEMPLATE_NAME in uppercase SNAKE_CASE
             replace({
               regex: 'TEMPLATE_NAME',
-              replacement: snakeCase(componentName).toUpperCase(),
+              replacement: convertors['TEMPLATE_NAME'],
               paths: [componentPath],
               recursive: false,
               silent: true,
             });
           }
 
-          // Generate component with openAi, if component description is provided
-
-          if (cmd.describe && componentFileType === buildInComponentFileTypes.COMPONENT) {
-            aiComponentGenerator(template, cmd.describe)
-              .then((aiGeneratedComponent) => {
-                outputFileSync(componentPath, aiGeneratedComponent.trim());
-                console.log(
-                  chalk.green(`OpenAI Successfully created the ${filename} component with the provided description.`)
-                );
-              })
-              .catch((error) =>
-                console.log(
-                  chalk.red(`OpenAI failed to create the ${filename} component with the provided description.`, error)
-                )
-              );
-
-            return;
-          }
-
           console.log(chalk.green(`${filename} was successfully created at ${componentPath}`));
         } catch (error) {
           console.error(chalk.red(`${filename} failed and was not created.`));

package/src/services/openAiService.js

@@ -1,18 +0,0 @@
-import { Configuration, OpenAIApi } from 'openai';
-
-export async function aiComponentGenerator(componentTemplate, prompt) {
-  const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
-  const openAiApi = new OpenAIApi(configuration);
-
-  const generatedComponent = await openAiApi.createCompletion({
-    model: 'text-davinci-003',
-    prompt: `Create a React component using this template "${componentTemplate}", but make the adjustments needed with these instructions as follows "${prompt}"`,
-    temperature: 0.7,
-    max_tokens: 2000,
-    top_p: 1.0,
-    frequency_penalty: 0.0,
-    presence_penalty: 1,
-  });
-
-  return generatedComponent.data.choices[0].text;
-}