Feature/fix generator (#3)

* Remove caps

* Remove pluralisation

* Fix templates

* Add Bouk page

* Add some tmp pages, fix generators for css modules

* Add correct packages for next

* Update travis

* Cache node_modules

* revert travis

* Implement codacy recommenddations

generator/component/component.module.scss.d.ts.hbs

@@ -0,0 +1 @@
+export const root: string;

generator/component/Component.test.js.hbs → generator/component/component.test.js.hbs

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
 
-import {{pascalCase name}} from "./{{pascalCase name}}";
+import {{pascalCase name}} from "./{{kebabCase name}}";
 
 describe("{{pascalCase name}}", () => {
   it("renders without error", () => {

generator/component/Component.tsx.hbs → generator/component/component.tsx.hbs

@@ -1,13 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './{{pascalCase name}}.module.scss';
+import React from "react";
+import styles from "./{{kebabCase name}}.module.scss";
 
 function {{pascalCase name}} ({ title }: Props) {
   return <div className={styles.root}>{title}</div>;
 };
 
 interface Props {
-  title?: String;
+  title?: string;
 }
 
 {{pascalCase name}}.defaultProps = {

generator/component/index.js.hbs

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

generator/page/page.tsx.hbs

@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "../src/pages/{{kebabCase name}}";
+
+export default {{pascalCase name}};

generator/plopfile.js

@@ -1,3 +1,53 @@
+function generateComponentActions({ pages = false }) {
+  const rootUrl = pages ? "pages" : "components";
+
+  return [
+    {
+      type: "add",
+      path: `../src/${rootUrl}/{{kebabCase name}}/{{kebabCase name}}.tsx`,
+      templateFile: "component/component.tsx.hbs"
+    },
+    {
+      type: "add",
+      path: `../src/${rootUrl}/{{kebabCase name}}/{{kebabCase name}}.test.js`,
+      templateFile: "component/component.test.js.hbs"
+    },
+    {
+      type: "add",
+      path: `../src/${rootUrl}/{{kebabCase name}}/{{kebabCase name}}.module.scss`,
+      templateFile: "component/component.module.scss.hbs"
+    },
+    {
+      type: "add",
+      path: `../src/${rootUrl}/{{kebabCase name}}/{{kebabCase name}}.module.scss.d.ts`,
+      templateFile: "component/component.module.scss.d.ts.hbs"
+    },
+    {
+      type: "add",
+      path: `../src/${rootUrl}/{{kebabCase name}}/index.js`,
+      templateFile: "component/index.js.hbs"
+    },
+    {
+      type: "add",
+      path: `../src/${rootUrl}/index.js`,
+      templateFile: "injectable-index.js.hbs",
+      skipIfExists: true
+    },
+    {
+      type: "append",
+      path: `../src/${rootUrl}/index.js`,
+      pattern: `/* PLOP_INJECT_IMPORT */`,
+      template: `import {{pascalCase name}} from "./{{kebabCase name}}";`
+    },
+    {
+      type: "append",
+      path: `../src/${rootUrl}/index.js`,
+      pattern: `/* PLOP_INJECT_EXPORT */`,
+      template: `\t{{pascalCase name}},`
+    }
+  ];
+}
+
 function componentGenerator(plop) {
   plop.setGenerator("component", {
     description: "Create a reusable component",
@@ -8,48 +58,7 @@ function componentGenerator(plop) {
         message: "What is your component name?"
       }
     ],
-    actions: [
-      {
-        type: "add",
-        path: "../src/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
-        templateFile: "Component/Component.tsx.hbs"
-      },
-      {
-        type: "add",
-        path:
-          "../src/components/{{pascalCase name}}/{{pascalCase name}}.test.js",
-        templateFile: "Component/Component.test.js.hbs"
-      },
-      {
-        type: "add",
-        path:
-          "src/components/{{pascalCase name}}/{{pascalCase name}}.module.scss",
-        templateFile: "Component/Component.module.scss.hbs"
-      },
-      {
-        type: "add",
-        path: "../src/components/{{pascalCase name}}/index.js",
-        templateFile: "Component/index.js.hbs"
-      },
-      {
-        type: "add",
-        path: "../src/components/index.js",
-        templateFile: "injectable-index.js.hbs",
-        skipIfExists: true
-      },
-      {
-        type: "append",
-        path: "../src/components/index.js",
-        pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from './{{pascalCase name}}';`
-      },
-      {
-        type: "append",
-        path: "../src/components/index.js",
-        pattern: `/* PLOP_INJECT_EXPORT */`,
-        template: `\t{{pascalCase name}},`
-      }
-    ]
+    actions: generateComponentActions({ pages: false })
   });
 }
 
@@ -66,14 +75,10 @@ function pageGenerator(plop) {
     actions: [
       {
         type: "add",
-        path: "../pages/{{snakeCase name}}/index.tsx",
-        templateFile: "Page/Page.tsx.hbs"
+        path: "../pages/{{snakeCase name}}.tsx",
+        templateFile: "page/page.tsx.hbs"
       },
-      {
-        type: "add",
-        path: "../pages/{{snakeCase name}}/{{snakeCase name}}.test.js",
-        templateFile: "Page/Page.test.js.hbs"
-      }
+      ...generateComponentActions({ pages: true })
     ]
   });
 }
@@ -91,29 +96,29 @@ function serviceGenerator(plop) {
     actions: [
       {
         type: "add",
-        path: "../src/services/{{pascalCase name}}/{{pascalCase name}}.ts",
-        templateFile: "Service/service.ts.hbs"
+        path: "../src/services/{{kebabCase name}}/{{kebabCase name}}.ts",
+        templateFile: "service/service.ts.hbs"
       },
       {
         type: "add",
-        path: "../src/services/{{pascalCase name}}/{{pascalCase name}}.test.js",
-        templateFile: "Service/service.test.js.hbs"
+        path: "../src/services/{{kebabCase name}}/{{kebabCase name}}.test.js",
+        templateFile: "service/service.test.js.hbs"
       },
       {
         type: "add",
-        path: "../src/services/{{pascalCase name}}/index.js",
+        path: "../src/services/{{kebabCase name}}/index.js",
         templateFile: "injectable-index.js.hbs",
         skipIfExists: true
       },
       {
         type: "append",
-        path: "../src/services/{{pascalCase name}}/index.js",
+        path: "../src/services/{{kebabCase name}}/index.js",
         pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from './{{pascalCase name}}';`
+        template: 'import {{pascalCase name}} from "./{{kebabCase name}}";'
       },
       {
         type: "append",
-        path: "../src/services/{{pascalCase name}}/index.js",
+        path: "../src/services/{{kebabCase name}}/index.js",
         pattern: `/* PLOP_INJECT_EXPORT */`,
         template: `\t{{pascalCase name}},`
       },
@@ -127,7 +132,7 @@ function serviceGenerator(plop) {
         type: "append",
         path: "../src/services/index.js",
         pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from './{{pascalCase name}}';`
+        template: 'import {{pascalCase name}} from "./{{pascalCase name}}";'
       },
       {
         type: "append",
@@ -152,31 +157,31 @@ function hookGenerator(plop) {
     actions: [
       {
         type: "add",
-        path: "../src/hooks/{{camelCase name}}/{{camelCase name}}.ts",
-        templateFile: "Hook/hook.ts.hbs"
+        path: "../src/hooks/{{kebabCase name}}/{{kebabCase name}}.ts",
+        templateFile: "hook/hook.ts.hbs"
       },
       {
         type: "add",
-        path: "../src/hooks/{{camelCase name}}/{{camelCase name}}.test.js",
-        templateFile: "Hook/hook.test.js.hbs"
+        path: "../src/hooks/{{kebabCase name}}/{{kebabCase name}}.test.js",
+        templateFile: "hook/hook.test.js.hbs"
       },
       {
         type: "add",
-        path: "../src/hooks/{{camelCase name}}/index.js",
+        path: "../src/hooks/{{kebabCase name}}/index.js",
         templateFile: "injectable-index.js.hbs",
         skipIfExists: true
       },
       {
         type: "append",
-        path: "../src/hooks/{{camelCase name}}/index.js",
+        path: "../src/hooks/{{kebabCase name}}/index.js",
         pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{camelCase name}} from './{{camelCase name}}';`
+        template: `import {{kebabCase name}} from "./{{kebabCase name}}";`
       },
       {
         type: "append",
-        path: "../src/hooks/{{camelCase name}}/index.js",
+        path: "../src/hooks/{{kebabCase name}}/index.js",
         pattern: `/* PLOP_INJECT_EXPORT */`,
-        template: `\t{{camelCase name}},`
+        template: `\t{{kebabCase name}},`
       },
       {
         type: "add",
@@ -188,13 +193,13 @@ function hookGenerator(plop) {
         type: "append",
         path: "../src/hooks/index.js",
         pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{camelCase name}} from './{{camelCase name}}';`
+        template: 'import {{kebabCase name}} from "./{{kebabCase name}}";'
       },
       {
         type: "append",
         path: "../src/hooks/index.js",
         pattern: `/* PLOP_INJECT_EXPORT */`,
-        template: `\t{{camelCase name}},`
+        template: "\t{{kebabCase name}},"
       }
     ]
   });

generator/service/service.test.js.hbs

@@ -1,4 +1,4 @@
-import {{pascalCase name}} from "./{{pascalCase name}}";
+import {{pascalCase name}} from "./{{kebabCase name}}";
 
 describe("{{pascalCase name}}", () => {
   it("returns {{pascalCase name}} for getName()", () => {

next.config.js

@@ -1,3 +1,5 @@
+const withCSS = require("@zeit/next-css");
 const withTypescript = require("@zeit/next-typescript");
+const withSass = require("@zeit/next-sass");
 
-module.exports = withTypescript();
+module.exports = withTypescript(withSass(withCSS({ cssModules: true })));

package.json

@@ -27,19 +27,26 @@
     "automock": false,
     "setupFiles": [
       "./setup-jest.js"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"
+    }
   },
   "dependencies": {
+    "@zeit/next-css": "^1.0.1",
+    "@zeit/next-sass": "^1.0.1",
     "@zeit/next-typescript": "^1.1.1",
     "baseui": "^6.16.0",
     "effector": "^0.18.6",
     "effector-react": "^0.18.9",
     "isomorphic-unfetch": "^3.0.0",
     "jest": "^24.7.1",
     "next": "8.0.3",
+    "node-sass": "^4.12.0",
     "now": "^15.1.0",
     "plop": "^2.3.0",
     "prettier": "^1.17.0",
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-test-renderer": "^16.8.6",
@@ -57,6 +64,7 @@
     "babel-preset-react-app": "^8.0.0",
     "coveralls": "^3.0.3",
     "fork-ts-checker-webpack-plugin": "^1.3.0",
+    "jest-css-modules": "^2.0.0",
     "jest-fetch-mock": "^2.1.2",
     "tslint": "^5.16.0",
     "tslint-config-prettier": "^1.18.0",

pages/bing.tsx

@@ -0,0 +1,3 @@
+import Bing from "../src/pages/bing";
+
+export default Bing;

pages/bouk.tsx

@@ -0,0 +1,3 @@
+import Bouk from "../src/pages/bouk";
+
+export default Bouk;

pages/sping.tsx

@@ -0,0 +1,3 @@
+import Sping from "../src/pages/sping";
+
+export default Sping;

src/pages/bing/__snapshots__/bing.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Bing matches the snapshot 1`] = `
+<div
+  className="root"
+>
+  Bing
+</div>
+`;

src/pages/bing/bing.module.scss.d.ts

@@ -0,0 +1 @@
+export const root: string;

generator/page/Page.test.js.hbs → src/pages/bing/bing.test.js

@@ -2,22 +2,22 @@ import React from "react";
 import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
 
-import {{pascalCase name}} from "./{{pascalCase name}}";
+import Bing from "./bing";
 
-describe("{{pascalCase name}}", () => {
+describe("Bing", () => {
   it("renders without error", () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<{{pascalCase name}} />, div);
+    const div = document.createElement("div");
+    ReactDOM.render(<Bing />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
 
   it("matches the snapshot", () => {
-    const component = renderer.create(<{{pascalCase name}} title="{{pascalCase name}}" />);
+    const component = renderer.create(<Bing title="Bing" />);
     let tree = component.toJSON();
     expect(tree).toMatchSnapshot();
 
     const rootInstance = component.root;
     const div = rootInstance.findByType("div");
-    expect(div.props.children).toBe("{{pascalCase name}}");
+    expect(div.props.children).toBe("Bing");
   });
 });