Refactor(types): unify node and edge handling (#3978)

* refactor(types): unify node and edge type behaviour

* chore(changelogs): update

* chore(examples): cleanup

examples/react/src/examples/CustomNode/ColorSelectorNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo, FC, CSSProperties, useCallback } from 'react';
+import React, { memo, CSSProperties, useCallback } from 'react';
 import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react';
 
 import type { ColorSelectorNode } from '.';
@@ -13,7 +13,7 @@ const sourceHandleStyleB: CSSProperties = {
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 
-const ColorSelectorNode: FC<NodeProps<ColorSelectorNode['data']>> = ({ data, isConnectable }) => {
+function ColorSelectorNode({ data, isConnectable }: NodeProps<ColorSelectorNode>) {
   const onStart = useCallback((viewport: Viewport) => console.log('onStart', viewport), []);
   const onChange = useCallback((viewport: Viewport) => console.log('onChange', viewport), []);
   const onEnd = useCallback((viewport: Viewport) => console.log('onEnd', viewport), []);
@@ -44,6 +44,6 @@ const ColorSelectorNode: FC<NodeProps<ColorSelectorNode['data']>> = ({ data, isC
       <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} isConnectable={isConnectable} />
     </>
   );
-};
+}
 
 export default memo(ColorSelectorNode);

examples/react/src/examples/CustomNode/index.tsx

@@ -17,6 +17,8 @@ import {
   OnBeforeDelete,
   BuiltInNode,
   BuiltInEdge,
+  NodeTypes,
+  ReactFlowProvider,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
@@ -40,7 +42,7 @@ const initBgColor = '#1A192B';
 const connectionLineStyle = { stroke: '#fff' };
 const snapGrid: SnapGrid = [16, 16];
 
-const nodeTypes = {
+const nodeTypes: NodeTypes = {
   selectorNode: ColorSelectorNode,
 };
 
@@ -188,4 +190,8 @@ const CustomNodeFlow = () => {
   );
 };
 
-export default CustomNodeFlow;
+export default () => (
+  <ReactFlowProvider>
+    <CustomNodeFlow />
+  </ReactFlowProvider>
+);

examples/react/src/examples/UseReactFlow/index.tsx

@@ -27,18 +27,21 @@ const initialNodes: Node[] = [
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
     className: 'light',
+    type: 'default',
   },
   {
     id: '3',
     data: { label: 'Node 3' },
     position: { x: 400, y: 100 },
     className: 'light',
+    type: 'default',
   },
   {
     id: '4',
     data: { label: 'Node 4' },
     position: { x: 400, y: 200 },
     className: 'light',
+    type: 'default',
   },
 ];
 
@@ -85,6 +88,7 @@ const UseZoomPanHelperFlow = () => {
           data: {
             label: `${projectedPosition.x}-${projectedPosition.y}`,
           },
+          type: 'default',
         })
       );
     },
@@ -106,6 +110,7 @@ const UseZoomPanHelperFlow = () => {
       data: {
         label: 'New Node',
       },
+      type: 'default',
     };
 
     addNodes(newNode);
@@ -139,8 +144,8 @@ const UseZoomPanHelperFlow = () => {
 
   const onSetNodes = () => {
     setNodes([
-      { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node a' } },
-      { id: 'b', position: { x: 0, y: 150 }, data: { label: 'Node b' } },
+      { id: 'a', type: 'default', position: { x: 0, y: 0 }, data: { label: 'Node a' } },
+      { id: 'b', type: 'default', position: { x: 0, y: 150 }, data: { label: 'Node b' } },
     ]);
 
     setEdges([{ id: 'a-b', source: 'a', target: 'b' }]);