fix: updated templates to accomodate new naming convention & storybook 6

plop-templates/js/component.class-component.hbs

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Styled{{name}} } from './style'
+import { Styled{{name}} } from './{{selectedComponentCase name}}.style'
 import PropTypes from 'prop-types'
 
 class {{name}} extends Component {

plop-templates/js/component.function-component.hbs

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Styled{{name}} } from './style'
+import { Styled{{name}} } from './{{selectedComponentCase name}}.style'
 import PropTypes from 'prop-types'
 
 const {{name}} = () =>

plop-templates/js/component.pure-component.hbs

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { Styled{{name}} } from './style'
+import { Styled{{name}} } from './{{selectedComponentCase name}}.style'
 import PropTypes from 'prop-types'
 
 class {{name}} extends PureComponent {

plop-templates/js/index.hbs

@@ -1,3 +1,3 @@
-import {{name}} from './{{name}}'
+import {{name}} from './{{selectedComponentCase name}}'
 
 export default {{name}}

plop-templates/js/story.hbs

@@ -1,23 +1,17 @@
-import React from 'react'
-import { withKnobs, select, boolean, number, text } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import {{name}} from './'
+import React from 'react';
+import {{name}} from './';
 
-const baseProps = {
+export default {
+  title: '{{name}}',
+  component: {{name}},
+};
 
-}
+const Template = (args) => {
+  return <{{name}} {...args} />;
+};
 
-const stories = storiesOf('{{name}}', module)
+export const Main = Template.bind({});
 
-// stories.addDecorator(withKnobs)
-
-stories.add('basic', () => <{{name}} {...baseProps} />)
-
-/*stories.add('dynamic props', () => (
-<{{name}}
-{...baseProps}
-editMode={boolean('editMode', false)}
-borderSize={number('borderSize', 1)}
-width={text('width', '')}
-/>
-))*/
+Main.args = {
+ // add default prop values here
+};

plop-templates/js/test.hbs

@@ -1,7 +1,7 @@
-import React from 'react'
-import 'jest-styled-components'
-import renderer from 'react-test-renderer'
-import {{ name }} from './index'
+import React from 'react';
+import 'jest-styled-components';
+import { render } from 'react-testing-library';
+import {{ name }} from './'
 
 describe('<{{name}} />', () => {
   const props
@@ -12,7 +12,7 @@ describe('<{{name}} />', () => {
   })
 
   it('should render correctly', () => {
-    const tree = renderer.create(<{{name}} {...props} />).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
+    const instance = render(<{{name}} {...props} />);
+    expect(instance).toMatchSnapshot();
+  });
 })

plop-templates/ts/component.class-component.hbs

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Styled{{name}} } from './style'
+import { Styled{{name}} } from './{{selectedComponentCase name}}.style'
 import PropTypes from 'prop-types'
 
 export interface {{name}}Props {

plop-templates/ts/component.function-component.hbs

@@ -1,5 +1,5 @@
-import React, { FunctionComponent } from 'react'
-import { Styled{{name}} } from './style'
+import React, { FC } from 'react'
+import { Styled{{name}} } from './{{selectedComponentCase name}}.style'
 
 export interface {{name}}Props {
 
@@ -9,7 +9,7 @@ export interface {{name}}State {
 
 }
 
-const {{name}}:FunctionComponent<{{name}}Props, {{name}}State> = () => {
+const {{name}}:FC<{{name}}Props, {{name}}State> = () => {
 
     return (
       <Styled{{name}}>

plop-templates/ts/component.pure-component.hbs

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { Styled{{name}} } from './style'
+import { Styled{{name}} } from './{{selectedComponentCase name}}.style'
 import PropTypes from 'prop-types'
 
 export interface {{name}}Props {

plop-templates/ts/index.hbs

@@ -1,3 +1,3 @@
-import {{name}} from './{{name}}'
+import {{name}} from './{{selectedComponentCase name}}';
 
 export default {{name}}

plop-templates/ts/story.hbs

@@ -1,24 +1,19 @@
-import React from 'react'
-import { withKnobs, select, boolean, number, text } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import {{name}}Props from './{{name}}'
-import {{name}} from './'
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { {{name}}Props } from './{{selectedComponentCase name}}';
+import {{name}} from './';
 
-const baseProps:{{name}}Props = {
+export default {
+  title: '{{name}}',
+  component: {{name}},
+} as Meta;
 
-}
+const Template: Story<{{name}}Props> = (args: {{name}}Props) => {
+  return <{{name}} {...args} />;
+};
 
-const stories = storiesOf('{{name}}', module)
+export const Main = Template.bind({});
 
-// stories.addDecorator(withKnobs)
-
-stories.add('basic', () => <{{name}} {...baseProps} />)
-
-/*stories.add('dynamic props', () => (
-<{{name}}
-{...baseProps}
-editMode={boolean('editMode', false)}
-borderSize={number('borderSize', 1)}
-width={text('width', '')}
-/>
-))*/
+Main.args = {
+ // add default prop values here
+};

plop-templates/ts/style.hbs

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-// import { ifProp, ifNotProp, switchProp, prop } from 'styled-tools'
 
 export const Styled{{name}} = styled.div`
 

plop-templates/ts/test.hbs

@@ -1,8 +1,8 @@
-import React from 'react'
-import 'jest-styled-components'
-import renderer from 'react-test-renderer'
-import { {{name}}Props } from './{{name}}'
-import {{ name }} from './index'
+import React from 'react';
+import 'jest-styled-components';
+import { render } from 'react-testing-library';
+import { {{name}}Props } from './{{selectedComponentCase name}}';
+import {{name}} from './';
 
 describe('<{{name}} />', () => {
   const props:{{name}}Props
@@ -13,9 +13,7 @@ describe('<{{name}} />', () => {
   })
 
   it('should render correctly', () => {
-    const tree = renderer.create(
-        <{{name}} {...props} />
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
+    const instance = render(<{{name}} {...props} />);
+    expect(instance).toMatchSnapshot();
+  });
 })

plopfile.js

@@ -112,7 +112,7 @@ module.exports = function(plop) {
       if (data.story) {
         actions.push({
           type: 'add',
-          path: baseDir + `/{{selectedComponentCase name}}/{{ selectedComponentCase name }}.story.${fileExt}x`,
+          path: baseDir + `/{{selectedComponentCase name}}/{{ selectedComponentCase name }}.stories.${fileExt}x`,
           templateFile: `${templateFile}/story.hbs`,
         })
       }