refactor(styling): use css for default styles (#259)

* refactor(minimap): use css for default styles

* refactor(controls): use css for default styles

* refactor(background): use css for default styles

* refactor(edges): add edge type class name

* refactor(nodes): use css for default styles

* refactor(outputnode): add display name

* refactor(wrapnode): cleanup

* refactor(rollup): minimize css for prod build

* refactor(additional-comps): extract css

* test(graphs): adjust for new markup

example/src/CustomNode/ColorSelectorNode.js

@@ -2,11 +2,9 @@ import React from 'react';
 
 import { Handle } from 'react-flow-renderer';
 
-export default ({ data, styles }) => {
+export default ({ data }) => {
   return (
-    <div
-      style={{ background: '#eee', border: '1px solid #ddd', padding: 10, borderRadius: 5, ...styles }}
-    >
+    <>
       <Handle
         type="target"
         position="left"
@@ -27,6 +25,6 @@ export default ({ data, styles }) => {
         id="b"
         style={{ bottom: 10, top: 'auto', background: '#fff' }}
       />
-    </div>
+    </>
   );
 };

example/src/CustomNode/index.js

@@ -37,7 +37,7 @@ const CustomNodeFlow = () => {
 
     setElements([
       { id: '1', type: 'input', data: { label: 'An input node' }, position: { x: 0, y: 50 }, sourcePosition: 'right' },
-      { id: '2', type: 'selectorNode', data: { onChange: onChange, color: initBgColor }, position: { x: 250, y: 50 } },
+      { id: '2', type: 'selectorNode', data: { onChange: onChange, color: initBgColor }, style: { border: '1px solid #777' }, position: { x: 250, y: 50 } },
       { id: '3', type: 'output', data: { label: 'Output A' }, position: { x: 550, y: 25 }, targetPosition: 'left' },
       { id: '4', type: 'output', data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: 'left' },
 

example/src/index.css

@@ -136,9 +136,9 @@ nav a.active:before {
   color: #111;
 }
 
-.dark-node>div {
-  background: #333 !important;
-  color: #f8f8f8 !important;
+.dark-node {
+  background: #333;
+  color: #f8f8f8;
 }
 
 @media screen and (min-width: 768px) {