refactor(examples): use cra + ts

example/src/Provider/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStoreState, useStoreActions, isNode } from 'react-flow-renderer';
+import { useStoreState, useStoreActions } from 'react-flow-renderer';
 
 const Sidebar = () => {
   const nodes = useStoreState((store) => store.nodes);

example/src/Provider/index.tsx

@@ -1,14 +1,25 @@
-import React, { useState } from 'react';
-import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls } from 'react-flow-renderer';
+import React, { useState, MouseEvent } from 'react';
+import ReactFlow, {
+  ReactFlowProvider,
+  addEdge,
+  removeElements,
+  Controls,
+  OnLoadParams,
+  FlowElement,
+  Connection,
+  Edge,
+  Elements,
+  ConnectionMode,
+} from 'react-flow-renderer';
 
 import Sidebar from './Sidebar';
 
 import './provider.css';
 
-const onElementClick = (event, element) => console.log('click', element);
-const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance);
 
-const initialElements = [
+const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
@@ -18,9 +29,9 @@ const initialElements = [
 ];
 
 const ProviderFlow = () => {
-  const [elements, setElements] = useState(initialElements);
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
-  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
+  const [elements, setElements] = useState<Elements>(initialElements);
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
 
   return (
     <div className="providerflow">
@@ -33,7 +44,7 @@ const ProviderFlow = () => {
             onConnect={onConnect}
             onElementsRemove={onElementsRemove}
             onLoad={onLoad}
-            connectionMode="loose"
+            connectionMode={ConnectionMode.Loose}
           >
             <Controls />
           </ReactFlow>