feat: 🎸 add page structure generator

Author: Jarek Kuliga

generators/structure-component/templates/spec.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { <%= name %> } from "./<%= name %>";
+
+describe('<<%= name %> />', () => {
+
+  it('should render <<%= name %> />', () => {
+    const { container } = render(<<%= name %> />);
+    expect(container).toMatchSnapshot();
+  });
+
+});

generators/structure-component/templates/story.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { <%= name %> } from "./<%= name %>";
+
+storiesOf('./<%= name %>', module)
+  .add('<%= name %>', () => <<%= name %> />);

generators/structure-page/index.ts

@@ -0,0 +1,72 @@
+import camelCase from "lodash/fp/camelCase";
+import toUpper from "lodash/fp/toUpper";
+import Generator from "yeoman-generator";
+
+import { nameQuestion } from "../../src/questions";
+
+interface FileConfig {
+  templateName: string;
+  fileNameSuffix?: string;
+}
+
+interface Config {
+  styling: "jss" | "styled-components" | "emotion";
+  rootDir: string;
+}
+
+export = class StructureApiGenerator extends Generator {
+  private name: string;
+  private module: string;
+  private fileConfigs: FileConfig[];
+
+  public async prompting() {
+    const { name } = await this.prompt(nameQuestion("Page", this.options.name));
+
+    this.name = this.options.name || name;
+  }
+
+  public makeModule() {
+    this.module = this.options.module || this.name;
+  }
+
+  public makeConfig() {
+    this.fileConfigs = this.getFileConfig(this.config.getAll() as Config);
+  }
+
+  public writing() {
+    this.fileConfigs.forEach(fileConfig => {
+      this.fs.copyTpl(
+        this.templatePath(`${fileConfig.templateName}`),
+        this.destinationPath(
+          `./${this.config.get("rootDir")}/${this.module}/page/${
+            this.name
+          }Page/${this.name}Page.${fileConfig.fileNameSuffix}`
+        ),
+        {
+          name: this.name,
+          nameCamelCase: camelCase(this.name),
+          nameUpperCase: toUpper(this.name)
+        }
+      );
+    });
+  }
+
+  private getFileConfig = (config: Config): FileConfig[] => [
+    {
+      templateName: `main.tsx`,
+      fileNameSuffix: "tsx"
+    },
+    {
+      templateName: `load.tsx`,
+      fileNameSuffix: "load.tsx"
+    },
+    {
+      templateName: `style.${config.styling}.ts`,
+      fileNameSuffix: "style.ts"
+    },
+    {
+      templateName: `spec.tsx`,
+      fileNameSuffix: "spec.tsx"
+    }
+  ];
+};

generators/structure-page/templates/load.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Loadable } from "App/component/Loadable/Loadable";
+import { <%= name %>Page as <%= name %>PageType } from "./<%= name %>Page";
+
+export const <%= name %>PageLoadable = Loadable<<%= name %>PageType.Props>({
+  loader: () => import("./<%= name %>Page" /* webpackChunkName: "<%= name %>Page" */),
+  render: ({ <%= name %>Page }, props) => <<%= name %>Page {...props} />
+});

generators/structure-page/templates/main.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FC } from 'react';
+
+export namespace <%= name %>Page {
+  export type Props = { };
+}
+
+export const <%= name %>Page: FC<<%= name %>Page.Props> = (props) => {
+  return null;
+};

generators/structure-page/templates/spec.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { <%= name %>Page } from "./<%= name %>Page";
+
+describe('<<%= name %>Page />', () => {
+  
+  it('should render <<%= name %>Page />', () => {
+    const { container } = render(<<%= name %>Page />);
+    expect(container).toMatchSnapshot();
+  });
+  
+});

generators/structure-page/templates/style.emotion.ts

@@ -0,0 +1,3 @@
+import styled from '@emotion/styled';
+
+export const Styled = styled.div``;

generators/structure-page/templates/style.jss.ts

@@ -0,0 +1,3 @@
+import styled from 'jss';
+
+export const Styled = styled.div``;

generators/structure-page/templates/style.styled-components.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Styled = styled.div``;

generators/structure/index.ts

@@ -32,6 +32,10 @@ export = class StructureGenerator extends Generator {
           {
             name: `Store`,
             value: Task.STORE
+          },
+          {
+            name: `Page`,
+            value: Task.PAGE
           }
         ]
       }
@@ -45,6 +49,7 @@ export = class StructureGenerator extends Generator {
       case Task.API:
       case Task.MODEL:
       case Task.STORE:
+      case Task.PAGE:
         this.composeWith(require.resolve(`../structure-inner`), { task });
     }
   }