refactor(minimap): use minimap package in examples

examples/nextjs/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@preconstruct/next": "^4.0.0",
     "@react-flow/core": "11.0.0",
+    "@react-flow/minimap": "11.0.0",
     "dagre": "^0.8.5",
     "next": "12.2.2",
     "react": "18.2.0",

examples/nextjs/pages/CustomNode/index.tsx

@@ -3,7 +3,6 @@ import { ChangeEvent } from 'react';
 
 import ReactFlow, {
   addEdge,
-  MiniMap,
   Controls,
   Node,
   ReactFlowInstance,
@@ -14,6 +13,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import MiniMap from '@react-flow/minimap';
+
 import ColorSelectorNode from './ColorSelectorNode';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => {

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 
 import ReactFlow, {
   addEdge,
-  MiniMap,
   Controls,
   Background,
   ReactFlowInstance,
@@ -14,6 +13,9 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
+
+import MiniMap from '@react-flow/minimap';
+
 import { getElements } from './utils';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => {

examples/nextjs/pages/Edges/index.tsx

@@ -7,12 +7,14 @@ import ReactFlow, {
   Edge,
   EdgeTypes,
   MarkerType,
-  MiniMap,
   Node,
   ReactFlowInstance,
   useEdgesState,
   useNodesState,
 } from '@react-flow/core';
+
+import MiniMap from '@react-flow/minimap';
+
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
 

examples/nextjs/pages/Hidden/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  MiniMap,
   Controls,
   Connection,
   Edge,
@@ -11,6 +10,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import MiniMap from '@react-flow/minimap';
+
 const initialNodes: Node[] = [
   {
     id: '1',

examples/nextjs/pages/Interaction/index.tsx

@@ -5,7 +5,6 @@ import React, {
 } from 'react';
 import ReactFlow, {
   addEdge,
-  MiniMap,
   Controls,
   Node,
   Connection,
@@ -16,6 +15,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import MiniMap from '@react-flow/minimap';
+
 const initialNodes: Node[] = [
   {
     id: '1',

examples/nextjs/pages/NestedNodes/index.tsx

@@ -5,7 +5,6 @@ import ReactFlow, {
   Background,
   useNodesState,
   useEdgesState,
-  MiniMap,
   Controls,
   Node,
   Edge,
@@ -13,6 +12,8 @@ import ReactFlow, {
   Connection,
 } from '@react-flow/core';
 
+import MiniMap from '@react-flow/minimap';
+
 const onNodeDragStop = (_: MouseEvent, node: Node) =>
   console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/nextjs/pages/Overview/index.tsx

@@ -6,7 +6,6 @@ import React, {
 
 import ReactFlow, {
   addEdge,
-  MiniMap,
   Controls,
   Background,
   Node,
@@ -20,6 +19,8 @@ import ReactFlow, {
   OnSelectionChangeParams,
 } from '@react-flow/core';
 
+import MiniMap from '@react-flow/minimap';
+
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
   console.log('drag start', node, nodes);
 const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>

examples/nextjs/pages/Stress/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, CSSProperties, useCallback } from 'react';
 import ReactFlow, {
-  MiniMap,
   Controls,
   Background,
   ReactFlowInstance,
@@ -14,6 +13,8 @@ import ReactFlow, {
   EdgeChange,
 } from '@react-flow/core';
 
+import MiniMap from '@react-flow/minimap';
+
 import { getNodesAndEdges } from './utils';
 
 const buttonWrapperStyles: CSSProperties = {

examples/nextjs/pages/Subflow/index.tsx

@@ -3,7 +3,6 @@ import React, { useState, MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   addEdge,
   Background,
-  MiniMap,
   Controls,
   Node,
   Edge,
@@ -13,6 +12,9 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
+
+import MiniMap from '@react-flow/minimap';
+
 import DebugNode from './DebugNode';
 
 const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) =>

examples/nextjs/pages/UseReactFlow/index.tsx

@@ -4,7 +4,6 @@ import ReactFlow, {
   Node,
   addEdge,
   Background,
-  MiniMap,
   useReactFlow,
   ReactFlowProvider,
   Connection,
@@ -13,6 +12,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import MiniMap from '@react-flow/minimap';
+
 const initialNodes: Node[] = [
   {
     id: '1',

examples/nextjs/pages/index.tsx

@@ -9,6 +9,8 @@ import ReactFlow, {
   useReactFlow,
 } from '@react-flow/core';
 
+import Minimap from '@react-flow/minimap';
+
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) =>
   console.log('drag stop', node);
@@ -93,6 +95,7 @@ const BasicFlow = () => {
       selectNodesOnDrag={false}
     >
       <Background variant={BackgroundVariant.Lines} />
+      <Minimap />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
         <button onClick={resetTransform} style={{ marginRight: 5 }}>

examples/nextjs/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -15,15 +11,10 @@
     "esModuleInterop": true,
     "module": "esnext",
     "resolveJsonModule": true,
+    "moduleResolution": "node",
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }