refactor(examples): use cra + ts

example/src/Layouting/index.tsx

@@ -1,5 +1,16 @@
 import React, { useState } from 'react';
-import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls, isNode } from 'react-flow-renderer';
+import ReactFlow, {
+  ReactFlowProvider,
+  addEdge,
+  removeElements,
+  Controls,
+  isNode,
+  Elements,
+  Connection,
+  Edge,
+  NodeExtent,
+  Position,
+} from 'react-flow-renderer';
 import dagre from 'dagre';
 
 import initialElements from './initial-elements';
@@ -9,17 +20,17 @@ import './layouting.css';
 const dagreGraph = new dagre.graphlib.Graph();
 dagreGraph.setDefaultEdgeLabel(() => ({}));
 
-const nodeExtent = [
+const nodeExtent: NodeExtent = [
   [0, 0],
   [1000, 1000],
 ];
 
 const LayoutFlow = () => {
-  const [elements, setElements] = useState(initialElements);
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
-  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
+  const [elements, setElements] = useState<Elements>(initialElements);
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
 
-  const onLayout = (direction) => {
+  const onLayout = (direction: string) => {
     const isHorizontal = direction === 'LR';
     dagreGraph.setGraph({ rankdir: direction });
 
@@ -36,8 +47,8 @@ const LayoutFlow = () => {
     const layoutedElements = elements.map((el) => {
       if (isNode(el)) {
         const nodeWithPosition = dagreGraph.node(el.id);
-        el.targetPosition = isHorizontal ? 'left' : 'top';
-        el.sourcePosition = isHorizontal ? 'right' : 'bottom';
+        el.targetPosition = isHorizontal ? Position.Left : Position.Top;
+        el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
         // we need to pass a slighltiy different position in order to notify react flow about the change
         // @TODO how can we change the position handling so that we dont need this hack?
         el.position = { x: nodeWithPosition.x + Math.random() / 1000, y: nodeWithPosition.y };

example/src/Layouting/initial-elements.ts

@@ -1,6 +1,8 @@
-const position = { x: 0, y: 0 };
+import { Elements, XYPosition } from 'react-flow-renderer';
 
-export default [
+const position: XYPosition = { x: 0, y: 0 };
+
+const elements: Elements = [
   {
     id: '1',
     type: 'input',
@@ -65,3 +67,5 @@ export default [
   { id: 'e56', source: '5', target: '6', type: 'smoothstep' },
   { id: 'e57', source: '5', target: '7', type: 'smoothstep' },
 ];
+
+export default elements;