feat(deps): remove emotion

src/NodeRenderer/NodeTypes/DefaultNode.js

@@ -1,18 +1,12 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
 import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-const Wrapper = styled.div`
-  background: #ff6060;
-  padding: 10px;
-`;
-
 export default wrapNode(({ data, style }) => (
-  <Wrapper style={style}>
+  <div style={{ background: '#ff6060', padding: '10px', ...style }}>
     <Handle style={{ top: 0 }} />
     {data.label}
     <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
-  </Wrapper>
+  </div>
 ));

src/NodeRenderer/NodeTypes/InputNode.js

@@ -1,17 +1,11 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
 import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-const Wrapper = styled.div`
-  background: #9999ff;
-  padding: 10px;
-`;
-
 export default wrapNode(({ data, style }) => (
-  <Wrapper style={style}>
+  <div style={{ background: '#9999ff', padding: '10px', ...style }}>
     {data.label}
     <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
-  </Wrapper>
+  </div>
 ));

src/NodeRenderer/NodeTypes/OutputNode.js

@@ -1,17 +1,11 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
 import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-const Wrapper = styled.div`
-  background: #55ff99;
-  padding: 10px;
-`;
-
 export default wrapNode(({ data, style }) => (
-  <Wrapper style={style}>
+  <div style={{ background: '#55ff99', padding: '10px', ...style }}>
     <Handle style={{ top: 0 }} />
     {data.label}
-  </Wrapper>
+  </div>
 ));

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -1,28 +1,8 @@
 import React, { useEffect, useRef, useContext } from 'react';
-import styled from '@emotion/styled';
 import ReactDraggable from 'react-draggable';
 
 import { GraphContext } from '../../GraphContext';
 
-const NodeWrapper = styled.div`
-  position: absolute;
-  width: 150px;
-  color: #222;
-  font-family: sans-serif;
-  font-size: 12px;
-  text-align: center;
-  cursor: grab;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  user-select: none;
-  pointer-events: all;
-  transform-origin: 0 0;
-
-  &:hover {
-    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
-  }
-`;
-
 export default NodeComponent => (props) => {
   const { position, data, onNodeClick } = props;
   const { id, __width, __height } = data;
@@ -62,15 +42,15 @@ export default NodeComponent => (props) => {
       }}
       scale={k}
     >
-      <NodeWrapper
-        className="node"
+      <div
+        className="react-graph__nodewrap"
         ref={nodeElement}
         style={{ transform: `translate(${position.x}px,${position.y}px)` }}
         onClick={() => onNodeClick(data)}
         // style={{ transform: `translate(${nodePosition.x}px,${nodePosition.y}px) scale(${k})` }}
       >
         <NodeComponent {...props} />
-      </NodeWrapper>
+      </div>
     </ReactDraggable.DraggableCore>
   );
 };