From 5fb2ff9922a8b3e313bae511ab8aa11a8783e2bf Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 7 Oct 2020 18:03:45 +0200
Subject: [PATCH] docs(website): interactive examples

---
 website/src/components/HeroFlow/index.js |  9 +++-
 website/src/components/TeaserFlow/A.js   | 48 ++++++++++++++-------
 website/src/components/TeaserFlow/B.js   |  4 +-
 website/src/components/TeaserFlow/C.js   | 55 ++++++++++++++++--------
 4 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/website/src/components/HeroFlow/index.js b/website/src/components/HeroFlow/index.js
index 685ab5cd..7cda301f 100644
--- a/website/src/components/HeroFlow/index.js
+++ b/website/src/components/HeroFlow/index.js
@@ -3,6 +3,7 @@ import ReactFlow, {
   ReactFlowProvider,
   Background,
   Controls,
+  addEdge,
 } from 'react-flow-renderer';
 
 import ColorPickerNode from './ColorPickerNode';
@@ -45,6 +46,7 @@ const findNodeByColor = (color) => (n) =>
 
 export default () => {
   const [elements, setElements] = useState([]);
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
 
   useEffect(() => {
     const onChange = (event, id) => {
@@ -132,7 +134,12 @@ export default () => {
 
   return (
     <ReactFlowProvider>
-      <ReactFlow elements={elements} zoomOnScroll={false} nodeTypes={nodeTypes}>
+      <ReactFlow
+        elements={elements}
+        zoomOnScroll={false}
+        nodeTypes={nodeTypes}
+        onConnect={onConnect}
+      >
         <Background />
         <Controls showInteractive={false} />
       </ReactFlow>
diff --git a/website/src/components/TeaserFlow/A.js b/website/src/components/TeaserFlow/A.js
index a019cf9e..ce82f1f2 100644
--- a/website/src/components/TeaserFlow/A.js
+++ b/website/src/components/TeaserFlow/A.js
@@ -1,8 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
+import ReactFlow, {
+  ReactFlowProvider,
+  Background,
+  Controls,
+  addEdge,
+} from 'react-flow-renderer';
 
 import TeaserFlow from 'components/TeaserFlow';
+import { baseColors } from 'themes';
 
-const elements = [
+const initialElements = [
   {
     id: '1',
     type: 'input',
@@ -72,17 +79,28 @@ const elements = [
   },
 ];
 
-const flowProps = {
-  elements,
-  onLoad: (rf) => rf.fitView({ padding: 0.2 }),
-};
+const onLoad = (rf) => rf.fitView({ padding: 0.2 });
 
-export default () => (
-  <TeaserFlow
-    title="Feature-rich"
-    description="React Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls, several event handlers and more."
-    flowProps={flowProps}
-    withControls
-    fitView
-  />
-);
+export default () => {
+  const [elements, setElements] = useState(initialElements);
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
+
+  return (
+    <TeaserFlow
+      title="Feature-rich"
+      description="React Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls, several event handlers and more."
+    >
+      <ReactFlowProvider>
+        <ReactFlow
+          elements={elements}
+          onLoad={onLoad}
+          zoomOnScroll={false}
+          onConnect={onConnect}
+        >
+          <Background color={baseColors.silverDarken60} gap={15} />
+          <Controls showInteractive={false} />
+        </ReactFlow>
+      </ReactFlowProvider>
+    </TeaserFlow>
+  );
+};
diff --git a/website/src/components/TeaserFlow/B.js b/website/src/components/TeaserFlow/B.js
index b40d806f..a3c72fc8 100644
--- a/website/src/components/TeaserFlow/B.js
+++ b/website/src/components/TeaserFlow/B.js
@@ -158,12 +158,13 @@ export default () => {
     setElements(initialElements);
   }, []);
 
+  console.log(elements);
+
   return (
     <TeaserFlow
       title="Customizable"
       description="You can create your own node and edge types or just pass a custom style. You can implement custom UIs inside your nodes and add functionality to your edges."
       textPosition="right"
-      fitView
       isDark
     >
       <ReactFlowProvider>
@@ -172,6 +173,7 @@ export default () => {
           nodeTypes={nodeTypes}
           onLoad={onLoad}
           zoomOnScroll={false}
+          nodesConnectable={false}
         >
           <Background color={baseColors.silverDarken60} gap={15} />
           <Controls showInteractive={false} />
diff --git a/website/src/components/TeaserFlow/C.js b/website/src/components/TeaserFlow/C.js
index 300a6bed..8de970b9 100644
--- a/website/src/components/TeaserFlow/C.js
+++ b/website/src/components/TeaserFlow/C.js
@@ -1,4 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
+import ReactFlow, {
+  ReactFlowProvider,
+  Background,
+  Controls,
+  addEdge,
+} from 'react-flow-renderer';
 
 import TeaserFlow from 'components/TeaserFlow';
 
@@ -10,7 +16,7 @@ const defaultNodeOptions = {
   },
 };
 
-const elements = [
+const initialElements = [
   {
     id: 'input',
     type: 'input',
@@ -155,19 +161,34 @@ const elements = [
   },
 ];
 
-const flowProps = {
-  elements,
-  onLoad: (rf) => rf.fitView({ padding: 0.2 }),
-};
+const onLoad = (rf) => rf.fitView({ padding: 0.2 });
 
-export default () => (
-  <TeaserFlow
-    title="Additional Components"
-    description="React Flow includes a MiniMap, Controls, Background and a FlowProvider you can use to access internal state outside the ReactFlow component."
-    flowProps={flowProps}
-    withControls
-    withMinimap
-    fitView
-    linesBg
-  />
-);
+export default () => {
+  const [elements, setElements] = useState(initialElements);
+  const onConnect = (params) =>
+    setElements((els) => {
+      params.type = 'step';
+      return addEdge(params, els);
+    });
+
+  return (
+    <TeaserFlow
+      title="Additional Components"
+      description="React Flow includes a MiniMap, Controls, Background and a FlowProvider you can use to access internal state outside the ReactFlow component."
+      linesBg
+    >
+      <ReactFlowProvider>
+        <ReactFlow
+          elements={elements}
+          onLoad={onLoad}
+          zoomOnScroll={false}
+          onConnect={onConnect}
+          connectionLineType="step"
+        >
+          <Background variant="lines" gap={20} />
+          <Controls showInteractive={false} />
+        </ReactFlow>
+      </ReactFlowProvider>
+    </TeaserFlow>
+  );
+};