feat(deps): remove emotion

src/NodeRenderer/Handle/index.js

@@ -1,14 +1,3 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
-const Handle = styled.div`
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  transform: translate(-50%, -50%);
-  background: #222;
-  left: 50%;
-  border-radius: 50%;
-`;
-
-export default props => <Handle {...props} />;
+export default props => <div className="react-graph__handle" {...props} />;

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>
   );
 };

src/NodeRenderer/index.js

@@ -1,20 +1,10 @@
 import React, { PureComponent } from 'react';
-import styled from '@emotion/styled';
 
 import { Consumer } from '../GraphContext';
 import DefaultNode from './NodeTypes/DefaultNode';
 import InputNode from './NodeTypes/InputNode';
 import OutputNode from './NodeTypes/OutputNode';
 
-const Nodes = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 2;
-  pointer-events: none;
-  transform-origin: 0 0;
-`;
-
 class NodeRenderer extends PureComponent {
 
   renderNode(d, onNodeClick) {
@@ -36,13 +26,14 @@ class NodeRenderer extends PureComponent {
     return (
       <Consumer>
         {({ transform, nodes, onNodeClick }) => (
-          <Nodes
+          <div
+            className="react-graph__nodes"
             style={{
               transform: `translate(${transform.x}px,${transform.y}px) scale(${transform.k})`
             }}
           >
             {nodes.map(d => this.renderNode(d, onNodeClick))}
-          </Nodes>
+          </div>
         )}
       </Consumer>
     );