Add MobX for state management

plop-templates/component.tsx

@@ -1,14 +1,24 @@
-import * as React from 'react';
-import './{{ properCase name}}.scss';
+import * as React from "react";
+{{#if observer}}
+import { observer } from "mobx-react";
+import {{ camelCase store_name }} from "../../stores/{{ properCase store_name }}";
+{{/if}}
+import "./{{ properCase name}}.scss";
 
 export interface {{ properCase name }}Props {}
 
-export default class {{ properCase name }} extends React.Component<{{ properCase name }}Props, undefined> {
-	render() {
-		return (
-			<div className="{{ dashCase name }}">
+{{#if observer}}@observer{{/if}} class {{ properCase name }} extends React.Component<{{ properCase name }}Props, undefined> {
+  render() {
+    return (
+      <div className="{{ dashCase name }}">
         {{ titleCase name }}
-			</div>
-		);
-	}
+      </div>
+    );
+  }
 }
+
+{{#if observer}}
+export default (props) => <{{ properCase name }} {{ camelCase store_name }}={ {{ camelCase store_name }} } { ...props } />;
+{{else}}
+export default <{{ properCase name }} />;
+{{/if}}

plop-templates/index.ts

@@ -1,2 +1,2 @@
-import {{ properCase name }} from './{{ properCase name }}';
-export default {{ properCase name }};
+import {{ properCase name }} from "./{{ properCase name }}";
+export default {{ properCase name }};

plop-templates/store.ts

@@ -0,0 +1,13 @@
+import { observable, action } from "mobx";
+import { observer } from "mobx-react";
+
+class {{ properCase name }} {
+  @observable counter = 0;
+
+  @action.bound
+  increment() {
+    this.counter += 1;
+  }
+}
+
+export default new {{ properCase name }}();