From aa175b4befdfe4349e221b766a418138c4d2b831 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 16 Aug 2022 16:39:06 +0200
Subject: [PATCH] refactor(styles): cleanup

---
 examples/nextjs/package.json              |   2 +-
 examples/nextjs/pages/EdgeTypes/index.tsx |   4 +-
 examples/nextjs/styles/rf-base.css        | 209 ++++++++++++----------
 examples/nextjs/styles/rf-style.css       |  49 +++--
 packages/core/package.json                |   4 +-
 packages/core/src/styles/base.css         |   7 +-
 packages/core/src/styles/style.css        |  18 +-
 7 files changed, 161 insertions(+), 132 deletions(-)

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index bafc5537..a3422d1e 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "copystyles": "cp ../../node_modules/@react-flow/renderer/dist/style.css ./styles/rf-style.css",
+    "copystyles": "cp ../../node_modules/@react-flow/bundle/dist/style.css ./styles/rf-style.css && cp ../../node_modules/@react-flow/bundle/dist/base.css ./styles/rf-base.css",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/examples/nextjs/pages/EdgeTypes/index.tsx b/examples/nextjs/pages/EdgeTypes/index.tsx
index 2877239a..6794d09b 100644
--- a/examples/nextjs/pages/EdgeTypes/index.tsx
+++ b/examples/nextjs/pages/EdgeTypes/index.tsx
@@ -1,7 +1,7 @@
 /**
  * Example for checking the different edge types and source and target positions
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import {
   ReactFlow,
@@ -31,7 +31,7 @@ const deleteKeyCode = ['AltLeft+KeyD', 'Backspace'];
 const EdgeTypesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlow
diff --git a/examples/nextjs/styles/rf-base.css b/examples/nextjs/styles/rf-base.css
index 7546dc30..9e8ae529 100644
--- a/examples/nextjs/styles/rf-base.css
+++ b/examples/nextjs/styles/rf-base.css
@@ -1,4 +1,4 @@
-/* these are very simple styles so that it doesnt look broken */
+/* this will be exported as base.css and can be used for a basic styling */
 /* these are the necessary styles for React Flow */
 .react-flow__container {
   position: absolute;
@@ -9,7 +9,13 @@
 }
 .react-flow__pane {
   z-index: 1;
+  cursor: -webkit-grab;
+  cursor: grab;
 }
+.react-flow__pane.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
 .react-flow__viewport {
   transform-origin: 0 0;
   z-index: 2;
@@ -33,48 +39,50 @@
 .react-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
+  fill: none;
 }
 .react-flow__edge {
   pointer-events: visibleStroke;
+  cursor: pointer;
 }
 .react-flow__edge.animated path {
-  stroke-dasharray: 5;
-  -webkit-animation: dashdraw 0.5s linear infinite;
-  animation: dashdraw 0.5s linear infinite;
-}
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
 .react-flow__edge.inactive {
-  pointer-events: none;
-}
+    pointer-events: none;
+  }
 .react-flow__edge.selected,
-.react-flow__edge:focus,
-.react-flow__edge:focus-visible {
-  outline: none;
-}
+  .react-flow__edge:focus,
+  .react-flow__edge:focus-visible {
+    outline: none;
+  }
 .react-flow__edge.selected .react-flow__edge-path,
-.react-flow__edge:focus .react-flow__edge-path,
-.react-flow__edge:focus-visible .react-flow__edge-path {
-  stroke: #555;
-}
+  .react-flow__edge:focus .react-flow__edge-path,
+  .react-flow__edge:focus-visible .react-flow__edge-path {
+    stroke: #555;
+  }
 .react-flow__edge-textwrapper {
-  pointer-events: all;
-}
+    pointer-events: all;
+  }
 .react-flow__edge-textbg {
-  fill: white;
-}
+    fill: white;
+  }
 .react-flow__edge .react-flow__edge-text {
-  pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
+    pointer-events: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
 .react-flow__connection {
   pointer-events: none;
 }
 .react-flow__connection.animated {
-  stroke-dasharray: 5;
-  -webkit-animation: dashdraw 0.5s linear infinite;
-  animation: dashdraw 0.5s linear infinite;
-}
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
 .react-flow__connectionline {
   z-index: 1001;
 }
@@ -85,56 +93,64 @@
 .react-flow__node {
   position: absolute;
   -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
   box-sizing: border-box;
   background-color: white;
   cursor: -webkit-grab;
   cursor: grab;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
 }
+.react-flow__node.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
 .react-flow__nodesselection {
   z-index: 3;
   transform-origin: left top;
   pointer-events: none;
 }
 .react-flow__nodesselection-rect {
-  position: absolute;
-  pointer-events: all;
-  cursor: -webkit-grab;
-  cursor: grab;
-}
+    position: absolute;
+    pointer-events: all;
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
 .react-flow__handle {
   position: absolute;
   pointer-events: none;
   min-width: 5px;
   min-height: 5px;
+  background-color: #333;
 }
 .react-flow__handle.connectable {
-  pointer-events: all;
-}
+    pointer-events: all;
+  }
 .react-flow__handle-bottom {
-  top: auto;
-  left: 50%;
-  bottom: -4px;
-  transform: translate(-50%, 0);
-}
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
 .react-flow__handle-top {
-  left: 50%;
-  top: -4px;
-  transform: translate(-50%, 0);
-}
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
 .react-flow__handle-left {
-  top: 50%;
-  left: -4px;
-  transform: translate(0, -50%);
-}
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
 .react-flow__handle-right {
-  right: -4px;
-  top: 50%;
-  transform: translate(0, -50%);
-}
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
 .react-flow__edgeupdater {
   cursor: move;
   pointer-events: all;
@@ -145,21 +161,21 @@
   margin: 15px;
 }
 .react-flow__panel.top {
-  top: 0;
-}
+    top: 0;
+  }
 .react-flow__panel.bottom {
-  bottom: 0;
-}
+    bottom: 0;
+  }
 .react-flow__panel.left {
-  left: 0;
-}
+    left: 0;
+  }
 .react-flow__panel.right {
-  right: 0;
-}
+    right: 0;
+  }
 .react-flow__panel.center {
-  left: 50%;
-  transform: translateX(-50%);
-}
+    left: 50%;
+    transform: translateX(-50%);
+  }
 .react-flow__attribution {
   font-size: 10px;
   background: rgba(255, 255, 255, 0.5);
@@ -167,9 +183,9 @@
   margin: 0;
 }
 .react-flow__attribution a {
-  text-decoration: none;
-  color: #999;
-}
+    text-decoration: none;
+    color: #999;
+  }
 @-webkit-keyframes dashdraw {
   from {
     stroke-dashoffset: 10;
@@ -180,17 +196,12 @@
     stroke-dashoffset: 10;
   }
 }
-.react-flow__node {
-  border-width: 1px;
-  border-style: solid;
-  border-color: #bbb;
-}
 .react-flow__node.selected,
-.react-flow__node:focus,
-.react-flow__node:focus-visible {
-  outline: none;
-  border: 1px solid #555;
-}
+  .react-flow__node:focus,
+  .react-flow__node:focus-visible {
+    outline: none;
+    border: 1px solid #555;
+  }
 .react-flow__nodesselection-rect,
 .react-flow__selection {
   background: rgba(150, 150, 180, 0.1);
@@ -200,29 +211,29 @@
   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 .react-flow__controls-button {
-  border: none;
-  background: #fefefe;
-  border-bottom: 1px solid #eee;
-  box-sizing: content-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  padding: 5px;
-}
+    border: none;
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    padding: 5px;
+  }
 .react-flow__controls-button:hover {
-  background: #f4f4f4;
-}
+      background: #f4f4f4;
+    }
 .react-flow__controls-button svg {
-  width: 100%;
-  max-width: 12px;
-  max-height: 12px;
-}
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
 .react-flow__minimap {
   background-color: #fff;
 }
diff --git a/examples/nextjs/styles/rf-style.css b/examples/nextjs/styles/rf-style.css
index 101daba1..c1fd6b7b 100644
--- a/examples/nextjs/styles/rf-style.css
+++ b/examples/nextjs/styles/rf-style.css
@@ -1,3 +1,4 @@
+/* this gets exported as style.css and can be used for the default theming */
 /* these are the necessary styles for React Flow */
 .react-flow__container {
   position: absolute;
@@ -38,6 +39,7 @@
 .react-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
+  fill: none;
 }
 .react-flow__edge {
   pointer-events: visibleStroke;
@@ -99,15 +101,6 @@
   background-color: white;
   cursor: -webkit-grab;
   cursor: grab;
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #1a192b;
 }
 .react-flow__node.dragging {
     cursor: -webkit-grabbing;
@@ -137,7 +130,6 @@
 }
 .react-flow__handle.connectable {
     pointer-events: all;
-    cursor: crosshair;
   }
 .react-flow__handle-bottom {
     top: auto;
@@ -211,19 +203,42 @@
 .react-flow__edge-text {
     font-size: 10px;
   }
-.react-flow__node.selectable:hover {
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output,
+.react-flow__node-group {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1a192b;
+}
+.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
       box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
     }
-.react-flow__node.selectable.selected,
-    .react-flow__node.selectable:focus,
-    .react-flow__node.selectable:focus-visible {
+.react-flow__node-default.selectable.selected,
+    .react-flow__node-default.selectable:focus,
+    .react-flow__node-default.selectable:focus-visible,
+    .react-flow__node-input.selectable.selected,
+    .react-flow__node-input.selectable:focus,
+    .react-flow__node-input.selectable:focus-visible,
+    .react-flow__node-output.selectable.selected,
+    .react-flow__node-output.selectable:focus,
+    .react-flow__node-output.selectable:focus-visible,
+    .react-flow__node-group.selectable.selected,
+    .react-flow__node-group.selectable:focus,
+    .react-flow__node-group.selectable:focus-visible {
       box-shadow: 0 0 0 0.5px #1a192b;
       outline: none;
     }
 .react-flow__node-group {
-    background: rgba(240, 240, 240, 0.25);
-    border-color: #1a192b;
-  }
+  background: rgba(240, 240, 240, 0.25);
+  border-color: #1a192b;
+}
 .react-flow__nodesselection-rect,
 .react-flow__selection {
   background: rgba(0, 89, 220, 0.08);
diff --git a/packages/core/package.json b/packages/core/package.json
index 910133b2..e81a9ebf 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -17,6 +17,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
+    "@types/d3": "^7.4.0",
+    "@types/react": "^18.0.15",
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
@@ -32,8 +34,6 @@
     "nocss"
   ],
   "devDependencies": {
-    "@types/d3": "^7.4.0",
-    "@types/react": "^18.0.15",
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",
diff --git a/packages/core/src/styles/base.css b/packages/core/src/styles/base.css
index b32c2e23..129006b3 100644
--- a/packages/core/src/styles/base.css
+++ b/packages/core/src/styles/base.css
@@ -1,11 +1,14 @@
-/* these are very simple styles so that it doesnt look broken */
+/* this will be exported as base.css and can be used for a basic styling */
 @import './init.css';
 
 .react-flow__handle {
   background-color: #333;
 }
 
-.react-flow__node {
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output,
+.react-flow__node-group {
   border-width: 1px;
   border-style: solid;
   border-color: #bbb;
diff --git a/packages/core/src/styles/style.css b/packages/core/src/styles/style.css
index 7d1f8daf..4e7961cf 100644
--- a/packages/core/src/styles/style.css
+++ b/packages/core/src/styles/style.css
@@ -1,3 +1,4 @@
+/* this gets exported as style.css and can be used for the default theming */
 @import './init.css';
 
 .react-flow__edge {
@@ -12,7 +13,10 @@
   }
 }
 
-.react-flow__node {
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output,
+.react-flow__node-group {
   padding: 10px;
   border-radius: 3px;
   width: 150px;
@@ -35,11 +39,11 @@
       outline: none;
     }
   }
+}
 
-  &-group {
-    background: rgba(240, 240, 240, 0.25);
-    border-color: #1a192b;
-  }
+.react-flow__node-group {
+  background: rgba(240, 240, 240, 0.25);
+  border-color: #1a192b;
 }
 
 .react-flow__nodesselection-rect,
@@ -59,8 +63,4 @@
   background: #1a192b;
   border: 1px solid white;
   border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
 }