refactor(app): rename react-graph to react-flow

src/container/EdgeRenderer/index.js

@@ -162,7 +162,7 @@ const EdgeRenderer = memo((props) => {
     <svg
       width={width}
       height={height}
-      className="react-graph__edges"
+      className="react-flow__edges"
     >
       <g transform={transformStyle}>
         {edges.map(e => renderEdge(e, props, state))}

src/container/Editor/index.js

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { StoreProvider } from 'easy-peasy';
+
+if (process.env.NODE_ENV !== 'production') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React);
+}
+
+import GraphView from '../GraphView';
+
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import { createNodeTypes } from '../NodeRenderer/utils';
+
+import BezierEdge from '../../components/Edges/BezierEdge';
+import StraightEdge from '../../components/Edges/StraightEdge';
+import StepEdge from '../../components/Edges/StepEdge';
+import { createEdgeTypes } from '../EdgeRenderer/utils';
+import store from '../../store';
+
+import '../../style.css';
+
+const Editor = ({
+  style, onElementClick, elements, children,
+  nodeTypes, edgeTypes, onLoad, onMove,
+  onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
+  connectionLineStyle, deleteKeyCode, selectionKeyCode
+}) => {
+  const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
+  const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
+
+  return (
+    <div style={style} className="react-flow">
+      <StoreProvider store={store}>
+        <GraphView
+          onLoad={onLoad}
+          onMove={onMove}
+          onElementClick={onElementClick}
+          onNodeDragStop={onNodeDragStop}
+          nodeTypes={nodeTypesParsed}
+          edgeTypes={edgeTypesParsed}
+          connectionLineType={connectionLineType}
+          connectionLineStyle={connectionLineStyle}
+          selectionKeyCode={selectionKeyCode}
+          onElementsRemove={onElementsRemove}
+          deleteKeyCode={deleteKeyCode}
+          elements={elements}
+          onConnect={onConnect}
+        />
+        {children}
+      </StoreProvider>
+    </div>
+  );
+};
+
+Editor.displayName = 'Editor';
+
+Editor.defaultProps = {
+  onElementClick: () => {},
+  onElementsRemove: () => {},
+  onNodeDragStop: () => {},
+  onConnect: () => {},
+	onLoad: () => {},
+  onMove: () => {},
+  nodeTypes: {
+    input: InputNode,
+    default: DefaultNode,
+    output: OutputNode
+  },
+  edgeTypes: {
+    default: BezierEdge,
+    straight: StraightEdge,
+    step: StepEdge
+  },
+  connectionLineType: 'bezier',
+  connectionLineStyle: {},
+  deleteKeyCode: 8,
+  selectionKeyCode: 16
+};
+
+export default Editor;

src/container/GraphView/index.js

@@ -66,7 +66,7 @@ const GraphView = memo(({
   useElementUpdater({ elements });
 
   return (
-    <div className="react-graph__renderer" ref={rendererNode}>
+    <div className="react-flow__renderer" ref={rendererNode}>
       <NodeRenderer
         nodeTypes={nodeTypes}
         onElementClick={onElementClick}
@@ -83,7 +83,7 @@ const GraphView = memo(({
       {selectionKeyPressed && <UserSelection />}
       {state.nodesSelectionActive && <NodesSelection />}
       <div
-        className="react-graph__zoompane"
+        className="react-flow__zoompane"
         onClick={onZoomPaneClick}
         ref={zoomPane}
       />

src/container/NodeRenderer/index.js

@@ -45,7 +45,7 @@ const NodeRenderer = memo((props) => {
 
   return (
     <div
-      className="react-graph__nodes"
+      className="react-flow__nodes"
       style={transformStyle}
     >
       {nodes.map(d => renderNode(d, props, state))}