refactor(examples): switch examples from cra to nextjs

examples/nextjs/pages/UpdateNode/index.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import ReactFlow, {
+  Node,
+  Edge,
+  useNodesState,
+  useEdgesState,
+} from '@react-flow/core';
+
+import styles from './updatenode.module.css';
+
+const initialNodes: Node[] = [
+  { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
+];
+
+const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
+
+const UpdateNode = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const [nodeName, setNodeName] = useState<string>('Node 1');
+  const [nodeBg, setNodeBg] = useState<string>('#eee');
+  const [nodeHidden, setNodeHidden] = useState<boolean>(false);
+
+  useEffect(() => {
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === '1') {
+          // it's important that you create a new object here in order to notify react flow about the change
+          n.data = {
+            ...n.data,
+            label: nodeName,
+          };
+        }
+
+        return n;
+      })
+    );
+  }, [nodeName]);
+
+  useEffect(() => {
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === '1') {
+          // it's important that you create a new object here in order to notify react flow about the change
+          n.style = { ...n.style, backgroundColor: nodeBg };
+        }
+
+        return n;
+      })
+    );
+  }, [nodeBg]);
+
+  useEffect(() => {
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === '1' || n.id === 'e1-2') {
+          // when you update a simple type you can just update the value
+          n.hidden = nodeHidden;
+        }
+
+        return n;
+      })
+    );
+  }, [nodeHidden]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      defaultZoom={1.5}
+      minZoom={0.2}
+      maxZoom={4}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+    >
+      <div className={styles.controls}>
+        <label>label:</label>
+        <input
+          value={nodeName}
+          onChange={(evt) => setNodeName(evt.target.value)}
+        />
+
+        <label className={styles.bgLabel}>background:</label>
+        <input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
+
+        <div className='updatenode__checkboxwrapper'>
+          <label>hidden:</label>
+          <input
+            type='checkbox'
+            checked={nodeHidden}
+            onChange={(evt) => setNodeHidden(evt.target.checked)}
+          />
+        </div>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default UpdateNode;

examples/nextjs/pages/UpdateNode/updatenode.module.css

@@ -0,0 +1,21 @@
+.controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.controlsLabel {
+  display: block;
+}
+
+.bgLabel {
+  margin-top: 10px;
+}
+
+.checkboxWrapper {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}