simplify example

index.js

@@ -15,24 +15,32 @@ const reducer = combineReducers({ sketcher: sketcherReducer });
 const enhancer = compose(applyMiddleware(thunkMiddleware, promiseMiddleware(), createLogger({ collapsed: true })));
 const store = createStore(reducer, enhancer);
 
-// prepare html (SHOULDN'T BE DONE LIKE THIS)
-document.body.style.margin = 0;
-document.body.style.padding = 0;
-document.body.style.height = '100%';
-document.documentElement.style.height = '100%';
-document.documentElement.style.overflow = 'hidden';
-document.getElementById('app').style.height = '100%';
-
+// add actions to window
 import actionWrapper from 'redux-action-wrapper';
 import * as actions from './src/actions/index.js';
 window.actions = actionWrapper(actions, store.dispatch);
 
+// add model to store
 import modelData from './models/noodlebot.d3sketch';
 import JSONToSketchData from './src/shape/JSONToSketchData.js';
-(async () => {
-  const data = await JSONToSketchData(JSON.parse(modelData));
+JSONToSketchData(JSON.parse(modelData)).then(data => {
   store.dispatch(actions.openSketch({ data }));
-})();
+});
+
+// default css
+import jss from 'jss';
+import preset from 'jss-preset-default';
+import normalize from 'normalize-jss';
+jss.setup(preset());
+jss.createStyleSheet({
+  '@global body, html, #app': {
+    height: '100%'
+  },
+  '@global body': {
+    overflow: 'hidden'
+  },
+  ...normalize
+}).attach();
 
 // render dom
 import React from 'react';

package-lock.json

@@ -6347,6 +6347,21 @@
         "is-primitive": "2.0.0"
       }
     },
+    "is-observable": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-0.2.0.tgz",
+      "integrity": "sha1-s2ExHYPG5dcmyr9eJQsCNxBvWuI=",
+      "requires": {
+        "symbol-observable": "0.2.4"
+      },
+      "dependencies": {
+        "symbol-observable": {
+          "version": "0.2.4",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-0.2.4.tgz",
+          "integrity": "sha1-lag9smGG1q9+ehjb2XYKL4bQj0A="
+        }
+      }
+    },
     "is-path-cwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
@@ -6645,6 +6660,95 @@
         }
       }
     },
+    "jss-camel-case": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.0.0.tgz",
+      "integrity": "sha512-XAYa7JpGkLdlLgEfuzSQSVONRzSVvv4Tvyv5H8hLmJuHeFHTWwVrJrW1Cg/buED3izXKwTU2KBGpeXjIR5Eaew=="
+    },
+    "jss-compose": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
+      "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
+      "requires": {
+        "warning": "3.0.0"
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.0.tgz",
+      "integrity": "sha512-tzYgFePQL0neV3Z/oZlbv7XT9Oj2wd3DMjtRYtLGeExSz/SMyVyMhnVtuX01dWUAvA94RhkddvotpdpNDj2Y8g==",
+      "requires": {
+        "is-observable": "0.2.0"
+      }
+    },
+    "jss-expand": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.0.0.tgz",
+      "integrity": "sha512-ndsp+OnIeIc5XIHRFZlLeKNZZW25xqgohhMAyBSUZNZDuUAI9pdod3psHGRaQzyNrU3aMupyBvHnIglBHHgNTg==",
+      "requires": {
+        "is-observable": "0.2.0"
+      }
+    },
+    "jss-extend": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.0.1.tgz",
+      "integrity": "sha512-PgJRg6zkILmgiA4Ye6P33rTjHAVDx+/dN3syT2JE6EhylfmOYs/2d+MsMxXH+Fkh9wjlvNUiinlu7Mljl+TuXA==",
+      "requires": {
+        "is-observable": "0.2.0",
+        "warning": "3.0.0"
+      }
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "requires": {
+        "warning": "3.0.0"
+      }
+    },
+    "jss-preset-default": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.0.1.tgz",
+      "integrity": "sha512-ZBj1ifZAPDn8iiC9PuB1jDCm/I0Bn53UNL9NHBgOY6AyMorDPgEb3IRjt6H+OHKwnEuCHw8tC/e3/q4I4DgTIw==",
+      "requires": {
+        "jss-camel-case": "6.0.0",
+        "jss-compose": "5.0.0",
+        "jss-default-unit": "8.0.0",
+        "jss-expand": "5.0.0",
+        "jss-extend": "6.0.1",
+        "jss-global": "3.0.0",
+        "jss-nested": "6.0.1",
+        "jss-props-sort": "6.0.0",
+        "jss-template": "1.0.0",
+        "jss-vendor-prefixer": "7.0.0"
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
+    },
+    "jss-template": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.0.tgz",
+      "integrity": "sha512-NFAgcAp8V2fUxffWGGQ5zAolJq3neAvNjmWIwSmy9M6bmXTK9rnTu0fBlAcUh0ALC94B596/2TRphdkE5WRECQ==",
+      "requires": {
+        "warning": "3.0.0"
+      }
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "requires": {
+        "css-vendor": "0.3.8"
+      }
+    },
     "jszip": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.5.tgz",
@@ -7563,6 +7667,11 @@
         "abbrev": "1.1.1"
       }
     },
+    "normalize-jss": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-jss/-/normalize-jss-4.0.0.tgz",
+      "integrity": "sha512-zsn6yP0fOoDpzktjHCWKGVDMssYso0h6wxjW3+ABUp5CeEPpYc9YUy6cy7/SLO2yrPvtEzx0vu79Y9iEF2qSnA=="
+    },
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",

package.json

@@ -68,6 +68,8 @@
     "css-loader": "^0.28.7",
     "html-webpack-plugin": "^2.30.1",
     "html-webpack-template": "^6.0.2",
+    "jss-preset-default": "^4.0.1",
+    "normalize-jss": "^4.0.0",
     "raw-loader": "^0.5.1",
     "react-dom": "^16.1.1",
     "react-router-redux": "^4.0.8",