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',
       };