refactor(examples): use cra + ts

example/src/Edges/CustomEdge.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { getBezierPath, getMarkerEnd } from 'react-flow-renderer';
+import React, { FC } from 'react';
+import { EdgeProps, getBezierPath, getMarkerEnd } from 'react-flow-renderer';
 
-export default function CustomEdge({
+const CustomEdge: FC<EdgeProps> = ({
   id,
   sourceX,
   sourceY,
@@ -13,7 +13,7 @@ export default function CustomEdge({
   data,
   arrowHeadType,
   markerEndId,
-}) {
+}) => {
   const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
   const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
 
@@ -27,4 +27,6 @@ export default function CustomEdge({
       </text>
     </>
   );
-}
+};
+
+export default CustomEdge;

example/src/Edges/index.tsx

@@ -1,14 +1,28 @@
-import React, { useState } from 'react';
+import React, { useState, MouseEvent } from 'react';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
+import ReactFlow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  OnLoadParams,
+  FlowElement,
+  EdgeTypesType,
+  Elements,
+  Connection,
+  Edge,
+  ArrowHeadType,
+  Node,
+} from 'react-flow-renderer';
 
 import CustomEdge from './CustomEdge';
 
-const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
-const onNodeDragStop = (event, node) => console.log('drag stop', node);
-const onElementClick = (event, element) => console.log('click', element);
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
 
-const initialElements = [
+const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
   { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
@@ -31,7 +45,7 @@ const initialElements = [
     target: '6',
     label: 'styled label',
     labelStyle: { fill: 'red', fontWeight: 700 },
-    arrowHeadType: 'arrow',
+    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e5-7',
@@ -41,20 +55,27 @@ const initialElements = [
     labelBgPadding: [8, 4],
     labelBgBorderRadius: 4,
     labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    arrowHeadType: 'arrowclosed',
+    arrowHeadType: ArrowHeadType.ArrowClosed,
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+    arrowHeadType: ArrowHeadType.ArrowClosed,
   },
-  { id: 'e5-8', source: '5', target: '8', type: 'custom', data: { text: 'custom edge' }, arrowHeadType: 'arrowclosed' },
 ];
 
-const edgeTypes = {
+const edgeTypes: EdgeTypesType = {
   custom: CustomEdge,
 };
 
 const EdgesFlow = () => {
-  const [elements, setElements] = useState(initialElements);
+  const [elements, setElements] = useState<Elements>(initialElements);
 
-  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
 
   return (
     <ReactFlow