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": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "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": [
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-    "next-env.d.ts",
+  "exclude": ["node_modules"]
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
 }

packages/minimap/package.json

@@ -6,14 +6,14 @@
   "module": "dist/react-flow-minimap.esm.js",
   "license": "MIT",
   "dependencies": {
+    "@react-flow/core": "11.0.0"
+  },
+  "peerDependencies": {
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "zustand": "^4.0.0-rc.1"
-  },
-  "peerDependencies": {
     "react": "^18.1.0",
-    "react-flow-renderer": "^10.3.5"
+    "zustand": "^3.7.2"
   },
   "devDependencies": {
     "@types/d3-drag": "^3.0.1",

packages/minimap/src/MiniMapDrag.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { drag, D3DragEvent, SubjectPosition } from 'd3-drag';
 import { select } from 'd3-selection';
-import { useReactFlow } from 'react-flow-renderer';
+import { useReactFlow } from '@react-flow/core';
 
 function MiniMapDrag({ x = 0, y = 0, width = 0, height = 0 }) {
   const dragRef = useRef<SVGRectElement>(null);

packages/minimap/src/index.tsx

@@ -9,7 +9,7 @@ import {
   GetMiniMapNodeAttribute,
   ReactFlowState,
   Rect,
-} from 'react-flow-renderer';
+} from '@react-flow/core';
 
 import MiniMapNode from './MiniMapNode';
 import MiniMapDrag from './MiniMapDrag';

yarn.lock

@@ -3783,11 +3783,6 @@ use-sync-external-store@1.1.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82"
   integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
 
-use-sync-external-store@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -3856,10 +3851,3 @@ zustand@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
   integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==
-
-zustand@^4.0.0-rc.1:
-  version "4.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.0.0-rc.2.tgz#6b23131d3b5486d5afde7c04946b81674c722abf"
-  integrity sha512-eGDJHNmubDTggkMyZciCfI0H+NptOKQICpliJ4hd/XAjEvYp5h525CVJZ8uDfwd9P5JfSFjpBo14Z0qv04NWJA==
-  dependencies:
-    use-sync-external-store "1.2.0"