refactor(examples): use cra + ts

example/src/SaveRestore/Controls.tsx

@@ -1,5 +1,5 @@
-import React, { memo, useCallback } from 'react';
-import { useZoomPanHelper } from 'react-flow-renderer';
+import React, { memo, useCallback, Dispatch, FC } from 'react';
+import { useZoomPanHelper, OnLoadParams, Elements, FlowExportObject } from 'react-flow-renderer';
 import localforage from 'localforage';
 
 localforage.config({
@@ -11,7 +11,12 @@ const flowKey = 'example-flow';
 
 const getNodeId = () => `randomnode_${+new Date()}`;
 
-const Controls = memo(({ rfInstance, setElements }) => {
+type ControlsProps = {
+  rfInstance?: OnLoadParams;
+  setElements: Dispatch<React.SetStateAction<Elements<any>>>;
+};
+
+const Controls: FC<ControlsProps> = ({ rfInstance, setElements }) => {
   const { transform } = useZoomPanHelper();
 
   const onSave = useCallback(() => {
@@ -23,7 +28,7 @@ const Controls = memo(({ rfInstance, setElements }) => {
 
   const onRestore = useCallback(() => {
     const restoreFlow = async () => {
-      const flow = await localforage.getItem(flowKey);
+      const flow: FlowExportObject | null = await localforage.getItem(flowKey);
 
       if (flow) {
         const [x = 0, y = 0] = flow.position;
@@ -51,6 +56,6 @@ const Controls = memo(({ rfInstance, setElements }) => {
       <button onClick={onAdd}>add node</button>
     </div>
   );
-});
+};
 
-export default Controls;
+export default memo(Controls);

example/src/SaveRestore/index.tsx

@@ -1,21 +1,29 @@
-import React, { memo, useState } from 'react';
-import ReactFlow, { ReactFlowProvider, removeElements, addEdge } from 'react-flow-renderer';
+import React, { useState } from 'react';
+import ReactFlow, {
+  ReactFlowProvider,
+  removeElements,
+  addEdge,
+  Elements,
+  Connection,
+  Edge,
+  OnLoadParams,
+} from 'react-flow-renderer';
 
 import Controls from './Controls';
 
 import './save.css';
 
-const initialElements = [
+const initialElements: Elements = [
   { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
   { id: 'e1-2', source: '1', target: '2' },
 ];
 
 const SaveRestore = () => {
-  const [rfInstance, setRfInstance] = useState(null);
-  const [elements, setElements] = useState(initialElements);
-  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const [rfInstance, setRfInstance] = useState<OnLoadParams>();
+  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));
 
   return (
     <ReactFlowProvider>