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/Edges/BezierEdge.tsx

@@ -15,7 +15,7 @@ export default memo(
     labelStyle,
     labelShowBg,
     labelBgStyle,
-    style = {},
+    style,
   }: EdgeBezierProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;

src/components/Edges/StepEdge.tsx

@@ -4,7 +4,7 @@ import EdgeText from './EdgeText';
 import { EdgeProps } from '../../types';
 
 export default memo(
-  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style = {} }: EdgeProps) => {
+  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 

src/components/Edges/StraightEdge.tsx

@@ -4,7 +4,7 @@ import EdgeText from './EdgeText';
 import { EdgeProps } from '../../types';
 
 export default memo(
-  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style = {} }: EdgeProps) => {
+  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 

src/components/Edges/wrapEdge.tsx

@@ -13,8 +13,9 @@ interface EdgeWrapperProps {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle: CSSProperties;
+  className?: string;
   onClick?: (edge: Edge) => void;
-  animated: boolean;
+  animated?: boolean;
   selected: boolean;
   isInteractive: boolean;
 }
@@ -34,9 +35,10 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
       labelStyle,
       labelShowBg,
       labelBgStyle,
+      className,
       ...rest
     }: EdgeWrapperProps) => {
-      const edgeClasses = cx('react-flow__edge', { selected, animated });
+      const edgeClasses = cx('react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated });
       const edgeGroupStyle: CSSProperties = {
         pointerEvents: isInteractive ? 'all' : 'none',
       };

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}