refactor(examples): switch examples from cra to nextjs

examples/nextjs/pages/SaveRestore/Controls.tsx

@@ -0,0 +1,79 @@
+import React, { memo, useCallback, Dispatch, FC } from 'react';
+import {
+  useReactFlow,
+  Edge,
+  Node,
+  ReactFlowJsonObject,
+} from '@react-flow/core';
+import localforage from 'localforage';
+
+import styles from './save.module.css';
+
+localforage.config({
+  name: 'react-flow',
+  storeName: 'flows',
+});
+
+const flowKey = 'example-flow';
+
+const getNodeId = () => `randomnode_${+new Date()}`;
+
+type ControlsProps = {
+  setNodes: Dispatch<React.SetStateAction<Node<any>[]>>;
+  setEdges: Dispatch<React.SetStateAction<Edge<any>[]>>;
+};
+
+const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
+  const { setViewport, toObject } = useReactFlow();
+
+  const onSave = useCallback(() => {
+    const flow = toObject();
+    localforage.setItem(flowKey, flow);
+  }, [toObject]);
+
+  const onRestore = useCallback(() => {
+    const restoreFlow = async () => {
+      const flow: ReactFlowJsonObject | null = await localforage.getItem(
+        flowKey
+      );
+
+      if (flow) {
+        const { x, y, zoom } = flow.viewport;
+
+        setNodes(flow.nodes || []);
+        setEdges(flow.edges || []);
+        setViewport({ x, y, zoom: zoom || 0 });
+      }
+    };
+
+    restoreFlow();
+  }, [setNodes, setEdges, setViewport]);
+
+  const onAdd = useCallback(() => {
+    const newNode = {
+      id: `random_node-${getNodeId()}`,
+      data: { label: 'Added node' },
+      position: {
+        x: Math.random() * window.innerWidth - 100,
+        y: Math.random() * window.innerHeight,
+      },
+    };
+    setNodes((nds) => nds.concat(newNode));
+  }, [setNodes]);
+
+  return (
+    <div className={styles.controls}>
+      <button className={styles.button} onClick={onSave}>
+        save
+      </button>
+      <button className={styles.button} onClick={onRestore}>
+        restore
+      </button>
+      <button className={styles.button} onClick={onAdd}>
+        add node
+      </button>
+    </div>
+  );
+};
+
+export default memo(Controls);

examples/nextjs/pages/SaveRestore/index.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import ReactFlow, {
+  ReactFlowProvider,
+  Node,
+  addEdge,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+} from '@react-flow/core';
+
+import Controls from './Controls';
+
+const initialNodes: Node[] = [
+  { id: '1', data: { label: 'Node 1' }, 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 SaveRestore = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback(
+    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  );
+
+  return (
+    <ReactFlowProvider>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+      >
+        <Controls setNodes={setNodes} setEdges={setEdges} />
+      </ReactFlow>
+    </ReactFlowProvider>
+  );
+};
+
+export default SaveRestore;

examples/nextjs/pages/SaveRestore/save.module.css

@@ -0,0 +1,11 @@
+.controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.button {
+  margin-left: 5px;
+}