improvement: change plop configuration to be similar to the way we actually create component

Author: gaudiauj

plop-templates/component.config.hbs

@@ -1,5 +1,10 @@
-import initStoryshots from "@storybook/addon-storyshots";
+import {{properCase name}} from './{{properCase name}}.component';
+import React from 'react';
+import { render } from '@testing-library/react';
 
-initStoryshots({
-  configPath: "src/lib/components/{{lowerCase name}}/__snapshots__"
-});
+describe('{{properCase name}}', () => {
+  test('default test', () => {
+    const { debug } = render(<{{properCase name}} />);
+    debug();
+  });
+});

plop-templates/component.test.hbs

@@ -1,13 +1,18 @@
 //@flow
-import React from "react";
-import { storiesOf } from "@storybook/react";
+import React from 'react';
 import {{properCase name}} from "../src/lib/components/{{lowerCase name}}/{{properCase name}}.component";
+import { Wrapper, Title } from './common';
 
-storiesOf("{{properCase name}}", module)
-  .add("Default", () => {
-    return (
-      <div>
-          <{{properCase name}} />
-      </div>
-    );
-  });
+export default {
+  title: 'Components/{{properCase name}}',
+  component: {{properCase name}},
+};
+
+export const Default = () => {
+  return (
+  <Wrapper>
+    <Title>Basic usage</Title>
+    <{{properCase name}} />
+  </Wrapper>
+  );
+};

plop-templates/stories.hbs

@@ -1,49 +1,38 @@
-module.exports = function(plop) {
-  plop.addHelper("lowerCase", text => text.toLowerCase());
-  plop.addHelper("properCase", text =>
-    text.replace(/\w\S*/g, function(txt) {
+module.exports = function (plop) {
+  plop.addHelper('lowerCase', (text) => text.toLowerCase());
+  plop.addHelper('properCase', (text) =>
+    text.replace(/\w\S*/g, function (txt) {
       return txt.charAt(0).toUpperCase() + txt.substr(1);
-    })
+    }),
   );
 
-  plop.setGenerator("component", {
-    description: "Add a react component",
+  plop.setGenerator('component', {
+    description: 'Add a react component',
     prompts: [
       {
-        type: "input",
-        name: "name",
-        message: "Component name please (ex: layout, breadcrumbs, menuItem)!"
-      }
+        type: 'input',
+        name: 'name',
+        message: 'Component name please (ex: layout, breadcrumbs, menuItem)!',
+      },
     ],
     actions: [
       {
-        type: "add",
+        type: 'add',
         path:
-          "src/lib/components/{{lowerCase name}}/{{properCase name}}.component.js",
-        templateFile: "plop-templates/component.hbs"
+          'src/lib/components/{{lowerCase name}}/{{properCase name}}.component.js',
+        templateFile: 'plop-templates/component.hbs',
       },
       {
-        type: "add",
+        type: 'add',
         path:
-          "src/lib/components/{{lowerCase name}}/{{properCase name}}.component.test.js",
-        templateFile: "plop-templates/component.test.hbs"
-      },
-      {
-        type: "add",
-        path: "src/lib/components/{{lowerCase name}}/__snapshots__/config.js",
-        templateFile: "plop-templates/component.config.hbs"
+          'src/lib/components/{{lowerCase name}}/{{properCase name}}.component.test.js',
+        templateFile: 'plop-templates/component.test.hbs',
       },
       {
-        type: "add",
-        path: "stories/{{lowerCase name}}.js",
-        templateFile: "plop-templates/stories.hbs"
+        type: 'add',
+        path: 'stories/{{lowerCase name}}.stories.js',
+        templateFile: 'plop-templates/stories.hbs',
       },
-      {
-        type: "append",
-        path: "stories/index.js",
-        template: 'import "./{{lowerCase name}}";',
-        separator: ""
-      }
-    ]
+    ],
   });
 };