refactor(examples): switch examples from cra to nextjs

examples/nextjs/pages/Stress/index.tsx

@@ -0,0 +1,91 @@
+import React, { useState, CSSProperties, useCallback } from 'react';
+import ReactFlow, {
+  MiniMap,
+  Controls,
+  Background,
+  ReactFlowInstance,
+  Edge,
+  Node,
+  NodeChange,
+  applyNodeChanges,
+  Connection,
+  addEdge,
+  applyEdgeChanges,
+  EdgeChange,
+} from '@react-flow/core';
+
+import { getNodesAndEdges } from './utils';
+
+const buttonWrapperStyles: CSSProperties = {
+  position: 'absolute',
+  right: 10,
+  top: 10,
+  zIndex: 4,
+};
+
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
+  reactFlowInstance.fitView();
+  console.log(reactFlowInstance.getNodes());
+};
+
+const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(25, 25);
+
+const StressFlow = () => {
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
+  }, []);
+  const updatePos = () => {
+    setNodes((nds) => {
+      return nds.map((n) => {
+        return {
+          ...n,
+          position: {
+            x: Math.random() * window.innerWidth,
+            y: Math.random() * window.innerHeight,
+          },
+        };
+      });
+    });
+  };
+
+  const updateElements = () => {
+    const grid = Math.ceil(Math.random() * 10);
+    const initialElements = getNodesAndEdges(grid, grid);
+    setNodes(initialElements.nodes);
+    setEdges(initialElements.edges);
+  };
+
+  const onNodesChange = useCallback((changes: NodeChange[]) => {
+    setNodes((ns) => applyNodeChanges(changes, ns));
+  }, []);
+
+  const onEdgeChange = useCallback((changes: EdgeChange[]) => {
+    setEdges((es) => applyEdgeChanges(changes, es));
+  }, []);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      onConnect={onConnect}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgeChange}
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+
+      <div style={buttonWrapperStyles}>
+        <button onClick={updatePos} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={updateElements}>update elements</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default StressFlow;

examples/nextjs/pages/Stress/utils.ts

@@ -0,0 +1,46 @@
+import { Node, Edge } from '@react-flow/core';
+
+type ElementsCollection = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+export function getNodesAndEdges(
+  xElements: number = 10,
+  yElements: number = 10
+): ElementsCollection {
+  const initialNodes = [];
+  const initialEdges: Edge[] = [];
+  let nodeId = 1;
+  let recentNodeId = null;
+
+  for (let y = 0; y < yElements; y++) {
+    for (let x = 0; x < xElements; x++) {
+      const position = { x: x * 100, y: y * 50 };
+      const data = { label: `Node ${nodeId}` };
+      const node = {
+        id: nodeId.toString(),
+        style: { width: 50, fontSize: 11 },
+        data,
+        position,
+      };
+      initialNodes.push(node);
+
+      if (recentNodeId && nodeId <= xElements * yElements) {
+        initialEdges.push({
+          id: `${x}-${y}`,
+          source: recentNodeId.toString(),
+          target: nodeId.toString(),
+        });
+      }
+
+      recentNodeId = nodeId;
+      nodeId++;
+    }
+  }
+
+  return {
+    nodes: initialNodes,
+    edges: initialEdges,
+  };
+}