refactor(examples): use cra + ts

example/src/UpdatableEdge/index.tsx

@@ -1,7 +1,15 @@
 import React, { useState } from 'react';
-import ReactFlow, { Controls, updateEdge, addEdge } from 'react-flow-renderer';
+import ReactFlow, {
+  Controls,
+  updateEdge,
+  addEdge,
+  Elements,
+  OnLoadParams,
+  Connection,
+  Edge,
+} from 'react-flow-renderer';
 
-const initialElements = [
+const initialElements: Elements = [
   {
     id: '1',
     type: 'input',
@@ -40,12 +48,13 @@ const initialElements = [
   { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
 ];
 
-const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
 
 const UpdatableEdge = () => {
-  const [elements, setElements] = useState(initialElements);
-  const onEdgeUpdate = (oldEdge, newConnection) => setElements((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const [elements, setElements] = useState<Elements>(initialElements);
+  const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
+    setElements((els) => updateEdge(oldEdge, newConnection, els));
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
 
   return (
     <ReactFlow elements={elements} onLoad={onLoad} snapToGrid={true} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect}>