docs(website): interactive examples

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>

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

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} />

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