refactor(examples): use cra + ts

example/src/NodeTypeChange/index.tsx

@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, CSSProperties } from 'react';
 
-import ReactFlow, { addEdge, isEdge } from 'react-flow-renderer';
+import ReactFlow, { addEdge, isEdge, OnLoadParams, Elements, Position, Connection, Edge } from 'react-flow-renderer';
 
-const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
 
-const initialElements = [
+const initialElements: Elements = [
   {
     id: '1',
-    sourcePosition: 'right',
+    sourcePosition: Position.Right,
     type: 'input',
     data: { label: 'Input' },
     position: { x: 0, y: 80 },
@@ -15,17 +15,19 @@ const initialElements = [
   {
     id: '2',
     type: 'output',
-    sourcePosition: 'right',
-    targetPosition: 'left',
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
     data: { label: 'A Node' },
     position: { x: 250, y: 0 },
   },
   { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
 ];
 
+const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 };
+
 const NodeTypeChangeFlow = () => {
-  const [elements, setElements] = useState(initialElements);
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const [elements, setElements] = useState<Elements>(initialElements);
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
   const changeType = () => {
     setElements((elms) =>
       elms.map((el) => {
@@ -43,7 +45,7 @@ const NodeTypeChangeFlow = () => {
 
   return (
     <ReactFlow elements={elements} onConnect={onConnect} onLoad={onLoad}>
-      <button onClick={changeType} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
+      <button onClick={changeType} style={buttonStyle}>
         change type
       </button>
     </ReactFlow>