generate-react-cli 8.0.1 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "8.0.1",
+  "version": "8.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",
@@ -38,28 +38,30 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "chalk": "5.1.2",
+    "chalk": "5.2.0",
     "commander": "9.4.1",
     "deep-keys": "0.5.0",
-    "fs-extra": "10.1.0",
+    "dotenv": "^16.0.3",
+    "fs-extra": "11.1.0",
     "inquirer": "9.1.4",
     "lodash": "4.17.21",
+    "openai": "^3.1.0",
     "replace": "1.2.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.1.2",
-    "@commitlint/config-conventional": "17.1.0",
+    "@commitlint/cli": "17.3.0",
+    "@commitlint/config-conventional": "17.3.0",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "8.0.6",
+    "@semantic-release/github": "8.0.7",
     "@semantic-release/npm": "9.0.1",
     "@semantic-release/release-notes-generator": "10.0.3",
-    "eslint": "8.26.0",
+    "eslint": "8.29.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.2.1",
-    "husky": "8.0.1",
-    "prettier": "2.7.1",
+    "husky": "8.0.2",
+    "prettier": "2.8.1",
     "pretty-quick": "3.1.3",
     "semantic-release": "19.0.5"
   },
@@ -70,6 +72,8 @@
   },
   "release": {
     "branches": [
+      "alpha",
+      "beta",
       "main"
     ],
     "plugins": [

package/readme.md

@@ -10,18 +10,18 @@
 
 To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.
 
-A short [article](https://dev.to/arminbro/generate-react-cli-1ooh) that goes a little deeper into why we created GRC if you have the time.
+A short [article](https://dev.to/arminbro/generate-react-cli-1ooh) goes deeper into why we created GRC if you have the time.
 
-Suppose you enjoy learning by watching tutorial videos. Here's an excellent [video](https://www.youtube.com/watch?v=NEvnt3MWttY) on how to use GRC by [Eric Murphy](https://www.youtube.com/channel/UC5KDiSAFxrDWhmysBcNqtMA).
+You can also watch an excellent [video](https://www.youtube.com/watch?v=NEvnt3MWttY) tutorial on how to use GRC by [Eric Murphy](https://www.youtube.com/channel/UC5KDiSAFxrDWhmysBcNqtMA).
 
-**_A few notes:_**
+## Table of Contents:
 
-- Now supports custom component types ([read more](#custom-component-types)). 🎉
-- Now supports custom component templates ([read more](#custom-component-templates)). 🎉
-- Now supports custom component files ([read more](#custom-component-files)). 🎉
-- Supports React [TypeScript](https://www.typescriptlang.org/) projects.
-- Supports two different component testing libraries - [Testing Library](https://testing-library.com) and [Enzyme](https://airbnb.io/enzyme) - that work with [Jest](https://jestjs.io/). We assume that you have these libraries already configured in your React project.
-- It follows [grouping by feature](https://reactjs.org/docs/faq-structure.html#grouping-by-file-type) because we believe when you look at a component, you should see all of its corresponding files (i.e., stylesheet, test, and component) under one folder with the feature name. We feel this approach provides a better developer experience.
+- [Config file](#config-file)
+- [Generate components](#generate-components)
+- [Custom component types](#custom-component-types)
+- [Custom component templates](#custom-component-templates)
+- [Custom component files](#custom-component-files)
+- [OpenAi integration (Alpha release)](#openai-integration-alpha-release)
 
 ## You can run it using npx like this:
 
@@ -39,7 +39,7 @@ When you run GRC within your project the first time, it will ask you a series of
 
 ```json
 {
-  "usesTypeScript": false,
+  "usesTypeScript": true,
   "usesCssModule": true,
   "cssPreprocessor": "scss",
   "testLibrary": "Testing Library",
@@ -57,7 +57,7 @@ When you run GRC within your project the first time, it will ask you a series of
 
 ## Generate Components
 
-```
+```sh
   npx generate-react-cli component Box
 ```
 
@@ -78,13 +78,13 @@ This command will create a folder with your component name within your default (
 
 You can also override some of the GRC component config rules using one-off commands. So for example, let's say you have set **withTest** to be `true` in the `component.default` property. You can override it like this:
 
-```
+```sh
   npx generate-react-cli component Box --withTest=false
 ```
 
 Or vice versa, if you have set **withTest** to be `false` you can do this:
 
-```
+```sh
   npx generate-react-cli component Box --withTest=true
 ```
 
@@ -166,6 +166,14 @@ 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>--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.
+    </td>
+    <td width="20%">String</td>
+    <td width="20%"><code>null<code></td>
+  </tr>
 </table>
 
 ### Custom component types:
@@ -210,11 +218,11 @@ You can do so by extending the **generate-react-cli.json** config file like this
 
 Now you can generate a component with your custom component types like this:
 
-```
+```sh
   npx generate-react-cli component HomePage --type=page
 ```
 
-```
+```sh
   npx generate-react-cli component BoxLayout --type=layout
 ```
 
@@ -376,6 +384,106 @@ 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 open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).
+Generate React CLI is an open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).

package/src/cli.js

@@ -1,5 +1,7 @@
 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';
@@ -9,6 +11,10 @@ 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

@@ -19,6 +19,11 @@ export default function initGenerateComponentCommand(args, cliConfigFile, progra
       'You can pass a component type that you have configured in your GRC config file.',
       'default'
     )
+    .option(
+      '-d, --describe <describe>',
+      'Describe the component you want GRC to generate (e.g., Create a counter component that increments by one when I click on the increment button).',
+      null
+    )
     .option('-f, --flat', 'Generate the files in the mentioned path insted of creating new folder for it', false);
 
   // Dynamic component command option defaults.

package/src/services/openAiService.js

@@ -0,0 +1,18 @@
+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;
+}

package/src/utils/generateComponentUtils.js

@@ -7,6 +7,7 @@ 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';
@@ -418,6 +419,25 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             });
           }
 
+          // 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.`));