refactor(examples): use cra + ts

example/src/UseZoomPanHelper/index.tsx

@@ -7,9 +7,13 @@ import ReactFlow, {
   MiniMap,
   useZoomPanHelper,
   ReactFlowProvider,
+  Elements,
+  ElementId,
+  Connection,
+  Edge,
 } from 'react-flow-renderer';
 
-const initialElements = [
+const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
@@ -19,12 +23,12 @@ const initialElements = [
 ];
 
 let id = 5;
-const getId = () => `${id++}`;
+const getId = (): ElementId => `${id++}`;
 
 const UseZoomPanHelperFlow = () => {
-  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 { project } = useZoomPanHelper();
 
   const onPaneClick = useCallback(
@@ -53,8 +57,10 @@ const UseZoomPanHelperFlow = () => {
   );
 };
 
-export default () => (
+const WrappedFlow = () => (
   <ReactFlowProvider>
     <UseZoomPanHelperFlow />
   </ReactFlowProvider>
 );
+
+export default WrappedFlow;