feat: inline styles and custom theme

Author: foxhound87

README.md

@@ -25,7 +25,6 @@ npm install --save mobx-react-form-devtools
 
 ```javascript
 import MobxReactFormDevTools from 'mobx-react-form-devtools';
-import 'mobx-react-form-devtools/style/devtools.css';
 
 // register forms
 MobxReactFormDevTools.register({
@@ -45,6 +44,29 @@ MobxReactFormDevTools.select('registerForm');
 
 ![DevTools](https://github.com/foxhound87/mobx-react-form-devtools/blob/master/screenshot.png?raw=true)
 
+## Theme
+
+```javascript
+// custom theme colors
+MobxReactFormDevTools.theme({
+  base00: '#2b303b',
+  base01: '#343d46',
+  base02: '#4f5b66',
+  base03: '#65737e',
+  base04: '#a7adba',
+  base05: '#c0c5ce',
+  base06: '#dfe1e8',
+  base07: '#eff1f5',
+  base08: '#bf616a',
+  base09: '#d08770',
+  base0A: '#ebcb8b',
+  base0B: '#a3be8c',
+  base0C: '#96b5b4',
+  base0D: '#8fa1b3',
+  base0E: '#b48ead',
+  base0F: '#ab7967',
+});
+```
 
 ## Link DevTools to Demo
 

package.json

@@ -36,7 +36,6 @@
     "devtools"
   ],
   "files": [
-    "style",
     "es6",
     "lib",
     "umd"
@@ -53,7 +52,7 @@
     }
   },
   "dependencies": {
-    "classnames": "2.2.5",
+    "glamor": "2.17.14",
     "lodash": "^4.16.2",
     "mobx-react": "3.5.8",
     "react-dock": "0.2.3",
@@ -81,7 +80,6 @@
     "chai": "3.5.0",
     "codecov": "1.0.1",
     "commitizen": "2.8.6",
-    "css-loader": "0.25.0",
     "cz-conventional-changelog": "1.2.0",
     "eslint": "3.8.0",
     "eslint-config-airbnb": "12.0.0",
@@ -93,14 +91,10 @@
     "mocha": "3.1.2",
     "npm-run-all": "3.1.0",
     "nyc": "8.3.1",
-    "postcss-import": "8.1.2",
-    "postcss-loader": "1.1.0",
-    "postcss-url": "5.1.2",
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "rimraf": "2.5.4",
     "semantic-release": "4.3.5",
-    "style-loader": "0.13.1",
     "webpack": "1.13.2"
   }
 }

src/Debug.jsx

@@ -0,0 +1,37 @@
+import { action } from 'mobx';
+import _ from 'lodash';
+
+export default $store => ({
+
+  theme: action((theme) => {
+    _.merge($store.theme, theme);
+  }),
+
+  selectForm: action((key) => {
+    _.map($store.select, ($val, $key) => _.set($store.select, $key, false));
+    _.set($store.select, key, true);
+    _.set($store.selected, 'key', key);
+    _.set($store.selected, 'form', $store.forms[key]);
+  }),
+
+  registerForm: action((forms) => {
+    _.merge($store.forms, forms);
+    _.map(forms, ($form, $key) => _.set($store.select, $key, false));
+    _.map(forms, ($form, $key) => _.set($store.menu, $key, $form.name || $key));
+  }),
+
+  toggleTools: action((toggle) => {
+    let $flag;
+    if (toggle === 'open') $flag = true;
+    if (toggle === 'close') $flag = false;
+    _.set($store.tools, 'open', $flag);
+  }),
+
+  changeDockSize: action((size) => {
+    _.set($store.dock, 'size', size);
+    _.set($store.tools, 'heading.name', (size > 0.22));
+    _.set($store.tools, 'heading.sub', (size > 0.11));
+  }),
+
+});
+