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

package/package.json

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

@@ -478,49 +478,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/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';
@@ -81,7 +82,7 @@ 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;
+  const { usesStyledComponents, cssPreprocessor, testLibrary, usesCssModule, usesTypeScript } = cliConfigFile;
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
   let filename = null;
@@ -113,16 +114,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
@@ -157,14 +169,19 @@ 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 {
@@ -438,30 +455,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) {