refactor(minimap): use minimap package in examples

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 }}>