refactor(examples): use cra + ts

example/src/EdgeTypes/index.tsx

@@ -3,10 +3,20 @@
  */
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
+import ReactFlow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  OnLoadParams,
+  Connection,
+  Edge,
+  Elements,
+} from 'react-flow-renderer';
 import { getElements } from './utils';
 
-const onLoad = (reactFlowInstance) => {
+const onLoad = (reactFlowInstance: OnLoadParams) => {
   reactFlowInstance.fitView();
   console.log(reactFlowInstance.getElements());
 };
@@ -14,9 +24,9 @@ const onLoad = (reactFlowInstance) => {
 const initialElements = getElements();
 
 const EdgeTypesFlow = () => {
-  const [elements, setElements] = useState(initialElements);
-  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const [elements, setElements] = useState<Elements>(initialElements);
+  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
 
   return (
     <ReactFlow

example/src/EdgeTypes/utils.ts

@@ -1,10 +1,12 @@
+import { ElementId, Elements, Position } from 'react-flow-renderer';
+
 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;
 const nodeStyle = { width: nodeWidth, fontSize: 11, color: 'white' };
 
 const sourceTargetPositions = [
-  { source: 'bottom', target: 'top' },
-  { source: 'right', target: 'left' },
+  { source: Position.Bottom, target: Position.Top },
+  { source: Position.Right, target: Position.Left },
 ];
 const nodeColors = [
   ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
@@ -47,9 +49,9 @@ const offsets = [
 ];
 
 let id = 0;
-const getNodeId = () => (id++).toString();
+const getNodeId = (): ElementId => (id++).toString();
 
-export function getElements() {
+export function getElements(): Elements {
   const initialElements = [];
 
   for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {