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

src/components/Nodes/DefaultNode.tsx

@@ -1,19 +1,16 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const nodeStyles: CSSProperties = {
-  background: '#ff6060',
-  padding: 10,
-  borderRadius: 5,
-  width: 150,
-};
-
-export default ({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom, style }: NodeProps) => (
-  <div style={{ ...nodeStyles, ...style }}>
+const DefaultNode = ({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
+  <>
     <Handle type="target" position={targetPosition} />
     {data.label}
     <Handle type="source" position={sourcePosition} />
-  </div>
+  </>
 );
+
+DefaultNode.displayName = 'DefaultNode';
+
+export default DefaultNode;

src/components/Nodes/InputNode.tsx

@@ -1,18 +1,15 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const nodeStyles: CSSProperties = {
-  background: '#9999ff',
-  padding: 10,
-  borderRadius: 5,
-  width: 150,
-};
-
-export default ({ data, style, sourcePosition = Position.Bottom }: NodeProps) => (
-  <div style={{ ...nodeStyles, ...style }}>
+const InputNode = ({ data, sourcePosition = Position.Bottom }: NodeProps) => (
+  <>
     {data.label}
     <Handle type="source" position={sourcePosition} />
-  </div>
+  </>
 );
+
+InputNode.displayName = 'InputNode';
+
+export default InputNode;

src/components/Nodes/OutputNode.tsx

@@ -1,18 +1,15 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const nodeStyles: CSSProperties = {
-  background: '#55dd99',
-  padding: 10,
-  borderRadius: 5,
-  width: 150,
-};
-
-export default ({ data, style, targetPosition = Position.Top }: NodeProps) => (
-  <div style={{ ...nodeStyles, ...style }}>
+const OutputNode = ({ data, targetPosition = Position.Top }: NodeProps) => (
+  <>
     <Handle type="target" position={targetPosition} />
     {data.label}
-  </div>
+  </>
 );
+
+OutputNode.displayName = 'OutputNode';
+
+export default OutputNode;

src/components/Nodes/wrapNode.tsx

@@ -158,23 +158,16 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         zIndex: selected ? 10 : 3,
         transform: `translate(${xPos}px,${yPos}px)`,
         pointerEvents: isInteractive ? 'all' : 'none',
-      };
-
-      const updateNode = (): void => {
-        if (!nodeElement.current) {
-          return;
-        }
-
-        store.dispatch.updateNodeDimensions({ id, nodeElement: nodeElement.current });
+        ...style,
       };
 
       useEffect(() => {
         if (nodeElement.current) {
-          updateNode();
+          store.dispatch.updateNodeDimensions({ id, nodeElement: nodeElement.current });
 
           const resizeObserver = new ResizeObserver((entries) => {
             for (let _ of entries) {
-              updateNode();
+              store.dispatch.updateNodeDimensions({ id, nodeElement: nodeElement.current! });
             }
           });
 
@@ -188,7 +181,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         }
 
         return;
-      }, []);
+      }, [id]);
 
       return (
         <DraggableCore
@@ -219,7 +212,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
                 id={id}
                 data={data}
                 type={type}
-                style={style}
                 selected={selected}
                 sourcePosition={sourcePosition}
                 targetPosition={targetPosition}