generate-react-cli 8.4.3 → 8.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "8.4.3",
+  "version": "8.4.5",
   "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",
@@ -48,8 +48,8 @@
     "replace": "1.2.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.0.3",
-    "@commitlint/config-conventional": "19.0.3",
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
     "@semantic-release/commit-analyzer": "12.0.0",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/github": "10.0.4",

package/readme.md

@@ -308,7 +308,7 @@ const TemplateName = () => (
 export default TemplateName;
 ```
 
-**Important** - You can also use the following keywords within your custom templates to format the component name in your templates accordingly:
+**Important:** You can use the following keywords within your custom templates to format the component name. Note that the built-in GRC templates use `templatename` casing by default:
 
 | Keyword         | Replacement                                                                                    |
 | --------------- | ---------------------------------------------------------------------------------------------- |

package/src/templates/component/componentCssTemplate.js

@@ -1 +1 @@
-export default `.TemplateName {}`;
+export default `.templatename {}`;

package/src/templates/component/componentJsTemplate.js

@@ -1,16 +1,16 @@
 export default `import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './TemplateName.module.css';
+import styles from './templatename.module.css';
 
-const TemplateName = () => (
-  <div className={styles.TemplateName} data-testid="TemplateName">
-    TemplateName Component
+const templatename = () => (
+  <div className={styles.templatename} data-testid="templatename">
+    templatename Component
   </div>
 );
 
-TemplateName.propTypes = {};
+templatename.propTypes = {};
 
-TemplateName.defaultProps = {};
+templatename.defaultProps = {};
 
-export default TemplateName;
+export default templatename;
 `;

package/src/templates/component/componentLazyTemplate.js

@@ -1,12 +1,12 @@
 export default `import React, { lazy, Suspense } from 'react';
 
-const LazyTemplateName = lazy(() => import('./TemplateName'));
+const Lazytemplatename = lazy(() => import('./templatename'));
 
-const TemplateName = props => (
+const templatename = props => (
   <Suspense fallback={null}>
-    <LazyTemplateName {...props} />
+    <Lazytemplatename {...props} />
   </Suspense>
 );
 
-export default TemplateName;
+export default templatename;
 `;

package/src/templates/component/componentStoryTemplate.js

@@ -1,11 +1,11 @@
 export default `/* eslint-disable */
-import TemplateName from './TemplateName';
+import templatename from './templatename';
 
 export default {
-  title: "TemplateName",
+  title: "templatename",
 };
 
-export const Default = () => <TemplateName />;
+export const Default = () => <templatename />;
 
 Default.story = {
   name: 'default',

package/src/templates/component/componentStyledTemplate.js

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

package/src/templates/component/componentTestDefaultTemplate.js

@@ -1,9 +1,9 @@
 export default `import React from 'react';
 import ReactDOM from 'react-dom';
-import TemplateName from './TemplateName';
+import templatename from './templatename';
 
 it('It should mount', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<TemplateName />, div);
+  ReactDOM.render(<templatename />, div);
   ReactDOM.unmountComponentAtNode(div);
 });`;

package/src/templates/component/componentTestEnzymeTemplate.js

@@ -1,12 +1,12 @@
 export default `import React from 'react';
 import { shallow } from 'enzyme';
-import TemplateName from './TemplateName';
+import templatename from './templatename';
 
-describe('<TemplateName />', () => {
+describe('<templatename />', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<TemplateName />);
+    component = shallow(<templatename />);
   });
 
   test('It should mount', () => {

package/src/templates/component/componentTestTestingLibraryTemplate.js

@@ -1,14 +1,14 @@
 export default `import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import TemplateName from './TemplateName';
+import templatename from './templatename';
 
-describe('<TemplateName />', () => {
+describe('<templatename />', () => {
   test('it should mount', () => {
-    render(<TemplateName />);
+    render(<templatename />);
 
-    const templateName = screen.getByTestId('TemplateName');
+    const templatename = screen.getByTestId('templatename');
 
-    expect(templateName).toBeInTheDocument();
+    expect(templatename).toBeInTheDocument();
   });
 });`;

package/src/templates/component/componentTsLazyTemplate.js

@@ -1,12 +1,12 @@
 export default `import React, { lazy, Suspense } from 'react';
 
-const LazyTemplateName = lazy(() => import('./TemplateName'));
+const Lazytemplatename = lazy(() => import('./templatename'));
 
-const TemplateName = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+const templatename = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
   <Suspense fallback={null}>
-    <LazyTemplateName {...props} />
+    <Lazytemplatename {...props} />
   </Suspense>
 );
 
-export default TemplateName;
+export default templatename;
 `;

package/src/templates/component/componentTsTemplate.js

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

package/src/utils/generateComponentUtils.js

@@ -154,7 +154,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
     // --- If test library is not Testing Library or if withTest is false. Remove data-testid from template
 
     if (testLibrary !== 'Testing Library' || !cmd.withTest) {
-      template = template.replace(` data-testid="TemplateName"`, '');
+      template = template.replace(` data-testid="templatename"`, '');
     }
 
     // --- If it has a corresponding stylesheet
@@ -163,12 +163,12 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
       if (cliConfigFile.usesStyledComponents) {
         const cssPath = `${componentName}.styled`;
         template = template.replace(
-          `import styles from './TemplateName.module.css'`,
-          `import { TemplateNameWrapper } from './${cssPath}'`
+          `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>');
+        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}`;
@@ -176,17 +176,17 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
         // --- If the css module is true make sure to update the template accordingly
 
         if (module.length) {
-          template = template.replace(`'./TemplateName.module.css'`, `'./${cssPath}'`);
+          template = template.replace(`'./templatename.module.css'`, `'./${cssPath}'`);
         } else {
-          template = template.replace(`{styles.TemplateName}`, `"${componentName}"`);
-          template = template.replace(`styles from './TemplateName.module.css'`, `'./${cssPath}'`);
+          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
 
-      template = template.replace(` className={styles.TemplateName}`, '');
-      template = template.replace(`import styles from './TemplateName.module.css';`, '');
+      template = template.replace(` className={styles.templatename}`, '');
+      template = template.replace(`import styles from './templatename.module.css';`, '');
     }
   }