refactored react-examples app and created generic test case component

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

@@ -0,0 +1,29 @@
+import { useState, useCallback } from 'react';
+import { ReactFlow, Controls, Background, applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
+
+type FlowProps = {
+  generics: GenericTestCase;
+};
+
+export default ({ generics }: FlowProps) => {
+  const [nodes, setNodes] = useState(generics.reactFlowProps.nodes);
+  const [edges, setEdges] = useState(generics.reactFlowProps.edges);
+
+  const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
+  const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
+
+  return (
+    <div style={{ height: '100%' }}>
+      <ReactFlow
+        {...generics.reactFlowProps}
+        nodes={nodes}
+        onNodesChange={onNodesChange}
+        edges={edges}
+        onEdgesChange={onEdgesChange}
+      >
+        <Background />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+};

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

@@ -0,0 +1,163 @@
+import { MarkerType } from '@xyflow/react';
+
+export default {
+  reactFlowProps: {
+    fitView: true,
+    nodes: [
+      {
+        id: '1',
+        data: { label: '1' },
+        position: { x: 0, y: 0 },
+        type: 'input',
+      },
+      {
+        id: '2',
+        data: { label: '2' },
+        position: { x: -100, y: 100 },
+      },
+      {
+        id: '3',
+        data: { label: '3' },
+        position: { x: 100, y: 100 },
+      },
+      {
+        id: '4',
+        data: { label: '4' },
+        position: { x: -100, y: 200 },
+      },
+      {
+        id: '5',
+        data: { label: '5' },
+        position: { x: 100, y: 200 },
+      },
+      {
+        id: '6',
+        data: { label: '6' },
+        position: { x: -100, y: 300 },
+      },
+      {
+        id: '7',
+        data: { label: '7' },
+        position: { x: 100, y: 300 },
+      },
+      {
+        id: '8',
+        data: { label: '8' },
+        position: { x: -100, y: 400 },
+      },
+      {
+        id: '9',
+        data: { label: '9' },
+        position: { x: 100, y: 400 },
+      },
+      {
+        id: '10',
+        data: { label: '10' },
+        position: { x: -100, y: 500 },
+      },
+      {
+        id: '11',
+        data: { label: '11' },
+        position: { x: 100, y: 500 },
+      },
+      // {
+      // 	id: '12',
+      // 	data: { label: '12' },
+      // 	position: { x: -100, y: 600 }
+      // },
+      // {
+      // 	id: '13',
+      // 	data: { label: '13' },
+      // 	position: { x: 100, y: 600 }
+      // }
+    ],
+    edges: [
+      {
+        id: 'edge-with-class',
+        source: '1',
+        target: '2',
+        className: 'edge-class-test',
+      },
+      {
+        id: 'edge-with-style',
+        source: '1',
+        target: '3',
+        style: {
+          stroke: 'red',
+        },
+      },
+      {
+        id: 'hidden-edge',
+        source: '2',
+        target: '4',
+        label: 'hidden',
+        hidden: true,
+      },
+      {
+        id: 'animated-edge',
+        source: '3',
+        target: '5',
+        label: 'animated',
+        animated: true,
+      },
+      {
+        id: 'not-selectable-edge',
+        source: '4',
+        target: '6',
+        label: 'not-selectable',
+        selectable: false,
+      },
+      {
+        id: 'not-deletable',
+        source: '5',
+        target: '7',
+        label: 'not-deletable',
+        deletable: false,
+      },
+      {
+        id: 'z-index',
+        source: '6',
+        target: '8',
+        label: 'z-index',
+        zIndex: 3141592,
+      },
+      {
+        id: 'aria-label',
+        source: '7',
+        target: '9',
+        label: 'aria-label',
+        ariaLabel: 'aria-label-test',
+      },
+      {
+        id: 'interaction-width',
+        source: '8',
+        target: '10',
+        label: 'interaction-width',
+        interactionWidth: 42,
+      },
+      {
+        id: 'markers',
+        source: '9',
+        target: '11',
+        label: 'markers',
+        markerEnd: { type: MarkerType.Arrow },
+        markerStart: { type: MarkerType.ArrowClosed },
+      },
+      // {
+      // 	id: 'updatable',
+      // 	source: '9',
+      // 	target: '11',
+      // 	label: 'focusable',
+      // 	updatable: true
+      // },
+      // {
+      // 	id: 'not-focusable',
+      //
+      // 	source: '5',
+      // 	target: '7',
+      // 	label: 'not-focusable',
+      // 	focusable: false
+      // },
+    ],
+  },
+} satisfies GenericTestCase;

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

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

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

@@ -0,0 +1 @@
+export default {};