refactor(examples): use cra + ts

example/src/Stress/index.tsx

@@ -1,19 +1,32 @@
-import React, { useState } from 'react';
+import React, { useState, CSSProperties } from 'react';
+import ReactFlow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  isNode,
+  Controls,
+  Background,
+  OnLoadParams,
+  Elements,
+  Connection,
+  Edge,
+} from 'react-flow-renderer';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
 import { getElements } from './utils';
 
-const onLoad = (reactFlowInstance) => {
+const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 };
+
+const onLoad = (reactFlowInstance: OnLoadParams) => {
   reactFlowInstance.fitView();
   console.log(reactFlowInstance.getElements());
 };
 
-const initialElements = getElements(30, 30);
+const initialElements: Elements = getElements(30, 30);
 
 const StressFlow = () => {
-  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));
 
   const updatePos = () => {
     setElements((elms) => {
@@ -44,7 +57,7 @@ const StressFlow = () => {
       <Controls />
       <Background />
 
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+      <div style={buttonWrapperStyles}>
         <button onClick={updatePos} style={{ marginRight: 5 }}>
           change pos
         </button>

example/src/Stress/utils.ts

@@ -1,4 +1,6 @@
-export function getElements(xElements = 10, yElements = 10) {
+import { Elements } from 'react-flow-renderer';
+
+export function getElements(xElements: number = 10, yElements: number = 10): Elements {
   const initialElements = [];
   let nodeId = 1;
   let recentNodeId = null;