Merge pull request #110 from arminbro/bugfix/81

fix: the default grc templates to use `templatename` casing

Author: arminbro

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                                                                                    |
 | --------------- | ---------------------------------------------------------------------------------------------- |

src/templates/component/componentCssTemplate.js

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

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;
 `;

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;
 `;

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',

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\`
 \`;
 `;

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);
 });`;

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', () => {

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();
   });
 });`;

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;
 `;