chore(examples): cleanup

examples/react/src/generic-tests/Flow.tsx

@@ -1,27 +1,30 @@
 import { useState, useCallback } from 'react';
-import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
+import {
+  ReactFlow,
+  applyNodeChanges,
+  applyEdgeChanges,
+  addEdge,
+  OnNodesChange,
+  OnEdgesChange,
+  OnConnect,
+} from '@xyflow/react';
 
 type FlowProps = {
-  generics: GenericTestCase;
+  flowConfig: FlowConfig;
 };
 
-export default ({ generics }: FlowProps) => {
-  const [nodes, setNodes] = useState(generics.flowProps.nodes);
-  const [edges, setEdges] = useState(generics.flowProps.edges);
+export default ({ flowConfig }: FlowProps) => {
+  const [nodes, setNodes] = useState(flowConfig.flowProps.nodes);
+  const [edges, setEdges] = useState(flowConfig.flowProps.edges);
+  const props = { ...flowConfig.flowProps, nodes, edges };
+
+  const onNodesChange: OnNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
+  const onEdgesChange: OnEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
+  const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
 
-  const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
-  const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
-  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
   return (
     <div style={{ height: '100%' }}>
-      <ReactFlow
-        {...generics.flowProps}
-        nodes={nodes}
-        onNodesChange={onNodesChange}
-        edges={edges}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-      ></ReactFlow>
+      <ReactFlow {...props} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} />
     </div>
   );
 };

examples/react/src/generic-tests/edges/general.ts

@@ -160,4 +160,4 @@ export default {
       // },
     ],
   },
-} satisfies GenericTestCase;
+} satisfies FlowConfig;

examples/react/src/generic-tests/index.tsx

@@ -1,17 +1,17 @@
 import { useLocation } from 'react-router-dom';
+
 import Flow from './Flow';
 
+const flowConfigs = import.meta.glob<FlowConfig>('./**/*.ts', { eager: true, import: 'default' });
+
 export default () => {
   const location = useLocation();
-  const files = import.meta.glob<GenericTestCase>('./**/*.ts', { eager: true, import: 'default' });
+  const path = `.${location.pathname.replace('/tests/generic', '')}.ts`;
+  const flowConfig = flowConfigs[path];
 
-  const testCasePath = `.${location.pathname.replace('/tests/generic', '')}.ts`;
-
-  const testCase = files[testCasePath];
-
-  if (!testCase) {
-    return <div></div>;
+  if (!flowConfig) {
+    return `404: This route doesn't exists.`;
   }
 
-  return <Flow generics={testCase} />;
+  return <Flow flowConfig={flowConfig} />;
 };

examples/react/src/generic-tests/nodes/general.ts

@@ -88,4 +88,4 @@ export default {
       },
     ],
   },
-} satisfies GenericTestCase;
+} satisfies FlowConfig;

examples/react/src/generic-tests/pane/general.ts

@@ -34,4 +34,4 @@ export default {
       },
     ],
   },
-} satisfies GenericTestCase;
+} satisfies FlowConfig;

examples/react/src/generic-tests/pane/non-defaults.ts

@@ -35,4 +35,4 @@ export default {
       },
     ],
   },
-} satisfies GenericTestCase;
+} satisfies FlowConfig;