generate-react-cli 8.4.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.4.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

@@ -22,7 +22,7 @@ You can also watch an excellent [video](https://www.youtube.com/watch?v=NEvnt3MW
 - [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:
 
@@ -180,15 +180,6 @@ Otherwise, if you don't pass any options, it will just use the default values th
     <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.
-    </td>
-    <td width="20%">String</td>
-    <td width="20%"><code>null<code></td>
-  </tr>
 </table>
 
 ### Custom component types
@@ -486,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/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';
@@ -493,26 +492,6 @@ 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) => {
-                // @ts-ignore
-                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;
-}