refactor(examples): use cra + ts

example/src/CustomNode/ColorSelectorNode.js

@@ -1,22 +0,0 @@
-import React, { memo } from 'react';
-
-import { Handle } from 'react-flow-renderer';
-
-export default memo(({ data }) => {
-  return (
-    <>
-      <Handle
-        type="target"
-        position="left"
-        style={{ background: '#555' }}
-        onConnect={(params) => console.log('handle onConnect', params)}
-      />
-      <div>
-        Custom Color Picker Node: <strong>{data.color}</strong>
-      </div>
-      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
-      <Handle type="source" position="right" id="a" style={{ top: 10, background: '#555' }} />
-      <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#555' }} />
-    </>
-  );
-});

example/src/CustomNode/ColorSelectorNode.tsx

@@ -0,0 +1,25 @@
+import React, { memo, FC, CSSProperties } from 'react';
+
+import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
+
+const targetHandleStyle: CSSProperties = { background: '#555' };
+const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
+const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
+
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
+
+const ColorSelectorNode: FC<NodeProps> = ({ data }) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
+      <div>
+        Custom Color Picker Node: <strong>{data.color}</strong>
+      </div>
+      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
+      <Handle type="source" position={Position.Right} id="a" style={sourceHandleStyleA} />
+      <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);

example/src/CustomNode/index.tsx

@@ -1,27 +1,42 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, MouseEvent } from 'react';
+import { ChangeEvent } from 'react';
 
-import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, {
+  isEdge,
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Node,
+  FlowElement,
+  OnLoadParams,
+  Elements,
+  Position,
+  SnapGrid,
+  Connection,
+  Edge,
+} from 'react-flow-renderer';
 
 import ColorSelectorNode from './ColorSelectorNode';
 
-const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-const onNodeDragStop = (event, node) => console.log('drag stop', node);
-const onElementClick = (event, element) => console.log('click', element);
+const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
 
 const initBgColor = '#1A192B';
 
 const connectionLineStyle = { stroke: '#fff' };
-const snapGrid = [16, 16];
+const snapGrid: SnapGrid = [16, 16];
 const nodeTypes = {
   selectorNode: ColorSelectorNode,
 };
 
 const CustomNodeFlow = () => {
-  const [elements, setElements] = useState([]);
-  const [bgColor, setBgColor] = useState(initBgColor);
+  const [elements, setElements] = useState<Elements>([]);
+  const [bgColor, setBgColor] = useState<string>(initBgColor);
 
   useEffect(() => {
-    const onChange = (event) => {
+    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
       setElements((els) =>
         els.map((e) => {
           if (isEdge(e) || e.id !== '2') {
@@ -44,7 +59,13 @@ const CustomNodeFlow = () => {
     };
 
     setElements([
-      { id: '1', type: 'input', data: { label: 'An input node' }, position: { x: 0, y: 50 }, sourcePosition: 'right' },
+      {
+        id: '1',
+        type: 'input',
+        data: { label: 'An input node' },
+        position: { x: 0, y: 50 },
+        sourcePosition: Position.Right,
+      },
       {
         id: '2',
         type: 'selectorNode',
@@ -52,8 +73,20 @@ const CustomNodeFlow = () => {
         style: { border: '1px solid #777', padding: 10 },
         position: { x: 250, y: 50 },
       },
-      { id: '3', type: 'output', data: { label: 'Output A' }, position: { x: 550, y: 25 }, targetPosition: 'left' },
-      { id: '4', type: 'output', data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: 'left' },
+      {
+        id: '3',
+        type: 'output',
+        data: { label: 'Output A' },
+        position: { x: 550, y: 25 },
+        targetPosition: Position.Left,
+      },
+      {
+        id: '4',
+        type: 'output',
+        data: { label: 'Output B' },
+        position: { x: 550, y: 100 },
+        targetPosition: Position.Left,
+      },
 
       { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
       { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
@@ -61,8 +94,8 @@ const CustomNodeFlow = () => {
     ]);
   }, []);
 
-  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params) =>
+  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  const onConnect = (params: Connection | Edge) =>
     setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els));
 
   return (
@@ -81,13 +114,16 @@ const CustomNodeFlow = () => {
       defaultZoom={1.5}
     >
       <MiniMap
-        nodeStrokeColor={(n) => {
+        nodeStrokeColor={(n: Node): string => {
           if (n.type === 'input') return '#0041d0';
           if (n.type === 'selectorNode') return bgColor;
           if (n.type === 'output') return '#ff0072';
+
+          return '#eee';
         }}
-        nodeColor={(n) => {
+        nodeColor={(n: Node): string => {
           if (n.type === 'selectorNode') return bgColor;
+
           return '#fff';
         }}
       />