generate-react-cli 7.0.2 → 7.0.6

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [7.0.6](https://github.com/arminbro/generate-react-cli/compare/v7.0.5...v7.0.6) (2022-02-21)
+
+### [7.0.5](https://github.com/arminbro/generate-react-cli/compare/v7.0.4...v7.0.5) (2022-01-17)
+
+### [7.0.4](https://github.com/arminbro/generate-react-cli/compare/v7.0.3...v7.0.4) (2021-08-07)
+
+
+### Bug Fixes
+
+* **story:** use storybook codemod's preferred way ([b694f76](https://github.com/arminbro/generate-react-cli/commit/b694f767d5619b2880f3d8aa143b7e9f2550ff11))
+
+### [7.0.3](https://github.com/arminbro/generate-react-cli/compare/v7.0.2...v7.0.3) (2021-06-12)
+
 ### [7.0.2](https://github.com/arminbro/generate-react-cli/compare/v7.0.1...v7.0.2) (2021-06-12)
 
 ### [7.0.1](https://github.com/arminbro/generate-react-cli/compare/v7.0.0...v7.0.1) (2021-06-12)

package/bin/generate-react

@@ -19,7 +19,7 @@ const isNotValidNodeVersion = () => {
   return false;
 };
 
-// --- Check if user is running Node 10 or higher.
+// --- Check if user is running Node 12 or higher.
 
 if (isNotValidNodeVersion()) {
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "7.0.2",
+  "version": "7.0.6",
   "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,23 +38,23 @@
     "release": "standard-version"
   },
   "dependencies": {
-    "chalk": "^4.1.0",
-    "commander": "^7.1.0",
+    "chalk": "^4.1.2",
+    "commander": "^9.0.0",
     "deep-keys": "^0.5.0",
     "fs-extra": "^10.0.0",
-    "inquirer": "^8.0.0",
+    "inquirer": "^8.1.2",
     "lodash": "^4.17.20",
     "replace": "^1.2.0"
   },
   "devDependencies": {
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.20.0",
-    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint": "^8.7.0",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "prettier": "2.2.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "2.5.1",
     "rimraf": "^3.0.2",
-    "standard-version": "^9.1.0"
+    "standard-version": "^9.3.1"
   },
   "config": {
     "commitizen": {

package/readme.md

@@ -13,6 +13,8 @@ To help speed up productivity in React projects and stop copying, pasting, and r
 
 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.
 
+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). 
+
 **_A few notes:_**
 
 - Now supports custom component types ([read more](#custom-component-types)). 🎉
@@ -221,7 +223,15 @@ There is an optional `customTemplates` object that you can pass to the `componen
 },
 ```
 
-The keys represent the type of file, and the values are the paths that point to where your custom template lives in your project/system. Please note the `TemplateName` keyword in the template filename. GRC will use this keyword and replace it with your component name as the filename. You can also use the keyword `templateName`, which will be replaced with your component name in camelCase.
+The keys represent the type of file, and the values are the paths that point to where your custom template lives in your project/system. Please note the `TemplateName` keyword in the template filename. GRC will use this keyword and replace it with your component name as the filename.
+
+You can also use the following keywords, which will be replaced with their corresponding formatted component name:
+
+| Keyword         | Replacement                  |
+|-----------------|------------------------------|
+| `templateName`  | component name in camelCase  |
+| `template-name` | component name in kebab-case |
+| `template_name` | component name in snake_case |
 
 #### Example of using the `customTemplates` object within your generate-react-cli.json config file:
 

package/src/templates/component/componentStoryTemplate.js

@@ -1,7 +1,13 @@
 module.exports = `/* eslint-disable */
-import React from 'react';
-import { storiesOf } from '@storybook/react';
 import TemplateName from './TemplateName';
 
-storiesOf('TemplateName', module).add('default', () => <TemplateName />);
+export default {
+  title: "TemplateName",
+};
+
+export const Default = () => <TemplateName />;
+
+Default.story = {
+  name: 'default',
+};
 `;

package/src/templates/component/componentTsTemplate.js

@@ -1,7 +1,9 @@
-module.exports = `import React from 'react';
+module.exports = `import React, { FC } from 'react';
 import styles from './TemplateName.module.css';
 
-const TemplateName = () => (
+interface TemplateNameProps {}
+
+const TemplateName: FC<TemplateNameProps> = () => (
   <div className={styles.TemplateName} data-testid="TemplateName">
     TemplateName Component
   </div>

package/src/utils/generateComponentUtils.js

@@ -1,7 +1,7 @@
 const chalk = require('chalk');
 const path = require('path');
 const replace = require('replace');
-const { camelCase } = require('lodash');
+const { camelCase, kebabCase, snakeCase } = require('lodash');
 const { existsSync, outputFileSync, readFileSync } = require('fs-extra');
 
 const componentJsTemplate = require('../templates/component/componentJsTemplate');
@@ -373,6 +373,22 @@ function generateComponent(componentName, cmd, cliConfigFile) {
             silent: true,
           });
 
+          replace({
+            regex: 'template-name',
+            replacement: kebabCase(componentName),
+            paths: [componentPath],
+            recursive: false,
+            silent: true,
+          });
+
+          replace({
+            regex: 'template_name',
+            replacement: snakeCase(componentName),
+            paths: [componentPath],
+            recursive: false,
+            silent: true,
+          });
+
           console.log(chalk.green(`${filename} was successfully created at ${componentPath}`));
         } catch (error) {
           console.error(chalk.red(`${filename} failed and was not created.`));