generate-react-cli 8.3.0-alpha.1 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "8.3.0-alpha.1",
+  "version": "8.4.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",

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,6 +20,7 @@ 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)
 
@@ -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,15 +161,27 @@ 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>
+
+  <tr>
+    <td width="20%"><b>--customDirectory</b></td>
+    <td width="60%">
+      Template value that overrides the name of the directory of the component to be generated in.<br />
+      See more under <a href="#custom-component-directory">custom component directory</a>.
+    </td>
+    <td width="20%">String</td>
+    <td width="20%"><code>null</code></td>
+  </tr>
+
+  <tr>
     <td width="20%"><b>--describe</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.
@@ -176,7 +191,7 @@ Otherwise, if you don't pass any options, it will just use the default values th
   </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 +344,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`).
@@ -478,49 +580,6 @@ GlobalNav.defaultProps = {};
 export default GlobalNav;
 ```
 
-If you have unit testing enabled in your project and have the `withTest` flag enabled, it will generate the unit test file and initialize with some test cases for the generated component right out of the box!
-
-Here are the unit tests it generated for the GlobalNav component using the default testing library template (`@testing-library/react`) that comes with GRC.
-
-```tsx
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import GlobalNav from './GlobalNav';
-
-describe('<GlobalNav />', () => {
-  test('it should mount', () => {
-    render(<GlobalNav />);
-
-    const globalNav = screen.getByTestId('GlobalNav');
-
-    expect(globalNav).toBeInTheDocument();
-  });
-
-  test('it should display the logo "GRC"', () => {
-    render(<GlobalNav />);
-
-    const logo = screen.getByText('GRC');
-
-    expect(logo).toBeInTheDocument();
-  });
-
-  test('it should display three links: Home, About and Contact', () => {
-    render(<GlobalNav />);
-
-    const homeLink = screen.getByText('Home');
-    const aboutLink = screen.getByText('About');
-    const contactLink = screen.getByText('Contact');
-
-    expect(homeLink).toBeInTheDocument();
-    expect(aboutLink).toBeInTheDocument();
-    expect(contactLink).toBeInTheDocument();
-  });
-});
-```
-
-Please note, If you're using a different testing library, you need to provide it as a [custom testing component template](#custom-component-templates), and GRC will instruct openAi to use that to write your unit tests.
-
 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.

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/services/openAiService.js

@@ -16,20 +16,3 @@ export async function aiComponentGenerator(componentTemplate, prompt) {
 
   return generatedComponent.data.choices[0].text;
 }
-
-export async function aiComponentTestGenerator(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 unit tests 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;
-}

package/src/templates/component/componentStyledTemplate.js

@@ -0,0 +1,5 @@
+export default `import styled from 'styled-components';
+
+export const TemplateNameWrapper = styled.div\`
+\`;
+`;

package/src/utils/generateComponentUtils.js

@@ -7,10 +7,11 @@ import snakeCase from 'lodash/snakeCase.js';
 import startCase from 'lodash/startCase.js';
 import fsExtra from 'fs-extra';
 
-import { aiComponentGenerator, aiComponentTestGenerator } from '../services/openAiService.js';
+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';
+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';
@@ -18,6 +19,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) {
@@ -70,7 +73,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.
         `
       )
@@ -80,8 +83,53 @@ Please make sure you're pointing to the right custom template path in your gener
   }
 }
 
-function componentTemplateGenerator({ cmd, componentName, cliConfigFile }) {
-  const { cssPreprocessor, testLibrary, usesCssModule, usesTypeScript } = 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;
   let filename = null;
@@ -113,16 +161,27 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile }) {
     // --- If it has a corresponding stylesheet
 
     if (cmd.withStyle) {
-      const module = usesCssModule ? '.module' : '';
-      const cssPath = `${componentName}${module}.${cssPreprocessor}`;
+      if (cliConfigFile.usesStyledComponents) {
+        const cssPath = `${componentName}.styled`;
+        template = template.replace(
+          `import styles from './TemplateName.module.css'`,
+          `import { TemplateNameWrapper } from './${cssPath}'`
+        );
+        template = template.replace(` className={styles.TemplateName}`, '');
+        template = template.replace(` <div`, '<TemplateNameWrapper');
+        template = template.replace(` </div>`, '</TemplateNameWrapper>');
+      } else {
+        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}'`);
-      } else {
-        template = template.replace(`{styles.TemplateName}`, `"${componentName}"`);
-        template = template.replace(`styles from './TemplateName.module.css'`, `'./${cssPath}'`);
+        if (module.length) {
+          template = template.replace(`'./TemplateName.module.css'`, `'./${cssPath}'`);
+        } else {
+          template = template.replace(`{styles.TemplateName}`, `"${componentName}"`);
+          template = template.replace(`styles from './TemplateName.module.css'`, `'./${cssPath}'`);
+        }
       }
     } else {
       // --- If no stylesheet, remove className attribute and style import from jsTemplate
@@ -133,13 +192,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;
@@ -157,24 +216,29 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName })
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    const { cssPreprocessor, usesCssModule } = cliConfigFile;
-    const module = usesCssModule ? '.module' : '';
-    const cssFilename = `${componentName}${module}.${cssPreprocessor}`;
+    const { usesTypeScript, usesStyledComponents, cssPreprocessor, usesCssModule } = cliConfigFile;
+    if (usesStyledComponents) {
+      filename = usesTypeScript ? `${componentName}.styled.ts` : `${componentName}.styled.js`;
+      template = componentStyledTemplate;
+    } else {
+      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;
+      template = componentCssTemplate;
+      filename = cssFilename;
+    }
   }
 
   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;
@@ -207,13 +271,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;
@@ -239,13 +303,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;
@@ -271,13 +335,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;
@@ -289,7 +353,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.
         `
       )
@@ -309,7 +373,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,
   };
@@ -348,11 +412,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.
@@ -367,7 +441,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,
@@ -376,7 +450,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,
@@ -385,7 +459,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,
@@ -394,7 +468,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,
@@ -403,7 +477,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,
@@ -412,7 +486,7 @@ 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,
@@ -424,6 +498,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
           if (cmd.describe && componentFileType === buildInComponentFileTypes.COMPONENT) {
             aiComponentGenerator(template, cmd.describe)
               .then((aiGeneratedComponent) => {
+                // @ts-ignore
                 outputFileSync(componentPath, aiGeneratedComponent.trim());
                 console.log(
                   chalk.green(`OpenAI Successfully created the ${filename} component with the provided description.`)
@@ -438,30 +513,6 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             return;
           }
 
-          // Generate component test with openAi, if component description is provided
-
-          if (cmd.describe && componentFileType === buildInComponentFileTypes.TEST) {
-            aiComponentTestGenerator(template, cmd.describe)
-              .then((aiGeneratedComponentTest) => {
-                outputFileSync(componentPath, aiGeneratedComponentTest.trim());
-                console.log(
-                  chalk.green(
-                    `OpenAI Successfully created the ${filename} component test with the provided description.`
-                  )
-                );
-              })
-              .catch((error) =>
-                console.log(
-                  chalk.red(
-                    `OpenAI failed to create the ${filename} component test 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/utils/grcConfigUtils.js

@@ -20,12 +20,19 @@ const projectLevelQuestions = [
   },
   {
     type: 'confirm',
+    name: 'usesStyledComponents',
+    message: 'Does this project use styled-components?',
+  },
+  {
+    type: 'confirm',
+    when: (answers) => !answers['usesStyledComponents'],
     name: 'usesCssModule',
     message: 'Does this project use CSS modules?',
   },
   {
     type: 'list',
     name: 'cssPreprocessor',
+    when: (answers) => !answers['usesStyledComponents'],
     message: 'Does this project use a CSS Preprocessor?',
     choices: ['css', 'scss', 'less', 'styl'],
   },
@@ -184,7 +191,9 @@ export async function getCLIConfigFile() {
        */
 
       const missingConfigQuestions = grcConfigQuestions.filter(
-        (question) => !deepKeys(currentConfigFile).includes(question.name)
+        (question) =>
+          !deepKeys(currentConfigFile).includes(question.name) &&
+          (question.when ? question.when(currentConfigFile) : true)
       );
 
       if (missingConfigQuestions.length) {