From 229c156d79fcbc950b11ba834c9c5ed4c254c7e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Thu, 21 Jul 2022 12:02:43 +0200
Subject: [PATCH] refactor(minimap): use minimap package in examples

---
 examples/nextjs/package.json                 |  1 +
 examples/nextjs/pages/CustomNode/index.tsx   |  3 ++-
 examples/nextjs/pages/EdgeTypes/index.tsx    |  4 +++-
 examples/nextjs/pages/Edges/index.tsx        |  4 +++-
 examples/nextjs/pages/Hidden/index.tsx       |  3 ++-
 examples/nextjs/pages/Interaction/index.tsx  |  3 ++-
 examples/nextjs/pages/NestedNodes/index.tsx  |  3 ++-
 examples/nextjs/pages/Overview/index.tsx     |  3 ++-
 examples/nextjs/pages/Stress/index.tsx       |  3 ++-
 examples/nextjs/pages/Subflow/index.tsx      |  4 +++-
 examples/nextjs/pages/UseReactFlow/index.tsx |  3 ++-
 examples/nextjs/pages/index.tsx              |  3 +++
 examples/nextjs/tsconfig.json                | 17 ++++-------------
 packages/minimap/package.json                |  8 ++++----
 packages/minimap/src/MiniMapDrag.tsx         |  2 +-
 packages/minimap/src/index.tsx               |  2 +-
 yarn.lock                                    | 12 ------------
 17 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index f97d65ac..feb8a0e9 100644
--- a/examples/nextjs/package.json
+++ b/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",
diff --git a/examples/nextjs/pages/CustomNode/index.tsx b/examples/nextjs/pages/CustomNode/index.tsx
index efb878a6..5f6f3d67 100644
--- a/examples/nextjs/pages/CustomNode/index.tsx
+++ b/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) => {
diff --git a/examples/nextjs/pages/EdgeTypes/index.tsx b/examples/nextjs/pages/EdgeTypes/index.tsx
index 4540b498..0cf5c2ee 100644
--- a/examples/nextjs/pages/EdgeTypes/index.tsx
+++ b/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) => {
diff --git a/examples/nextjs/pages/Edges/index.tsx b/examples/nextjs/pages/Edges/index.tsx
index 3fff29e6..d5b346d5 100644
--- a/examples/nextjs/pages/Edges/index.tsx
+++ b/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';
 
diff --git a/examples/nextjs/pages/Hidden/index.tsx b/examples/nextjs/pages/Hidden/index.tsx
index faa42588..84b530d1 100644
--- a/examples/nextjs/pages/Hidden/index.tsx
+++ b/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',
diff --git a/examples/nextjs/pages/Interaction/index.tsx b/examples/nextjs/pages/Interaction/index.tsx
index 8b31494f..523c6950 100644
--- a/examples/nextjs/pages/Interaction/index.tsx
+++ b/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',
diff --git a/examples/nextjs/pages/NestedNodes/index.tsx b/examples/nextjs/pages/NestedNodes/index.tsx
index e39a115d..3e0edf16 100644
--- a/examples/nextjs/pages/NestedNodes/index.tsx
+++ b/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);
diff --git a/examples/nextjs/pages/Overview/index.tsx b/examples/nextjs/pages/Overview/index.tsx
index 6a2e59b7..10783b2b 100644
--- a/examples/nextjs/pages/Overview/index.tsx
+++ b/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[]) =>
diff --git a/examples/nextjs/pages/Stress/index.tsx b/examples/nextjs/pages/Stress/index.tsx
index 582e5a86..d834b799 100644
--- a/examples/nextjs/pages/Stress/index.tsx
+++ b/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 = {
diff --git a/examples/nextjs/pages/Subflow/index.tsx b/examples/nextjs/pages/Subflow/index.tsx
index 4e3a9c3b..85a34564 100644
--- a/examples/nextjs/pages/Subflow/index.tsx
+++ b/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[]) =>
diff --git a/examples/nextjs/pages/UseReactFlow/index.tsx b/examples/nextjs/pages/UseReactFlow/index.tsx
index 49a90547..6a53af5f 100644
--- a/examples/nextjs/pages/UseReactFlow/index.tsx
+++ b/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',
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
index cc80aba6..f010b317 100755
--- a/examples/nextjs/pages/index.tsx
+++ b/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 }}>
diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json
index 84f59a7a..94136eff 100644
--- a/examples/nextjs/tsconfig.json
+++ b/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"]
 }
diff --git a/packages/minimap/package.json b/packages/minimap/package.json
index e16bdf90..fc9cf403 100644
--- a/packages/minimap/package.json
+++ b/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",
diff --git a/packages/minimap/src/MiniMapDrag.tsx b/packages/minimap/src/MiniMapDrag.tsx
index 290d6227..def58b4b 100644
--- a/packages/minimap/src/MiniMapDrag.tsx
+++ b/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);
diff --git a/packages/minimap/src/index.tsx b/packages/minimap/src/index.tsx
index d17cb73a..29058b2c 100644
--- a/packages/minimap/src/index.tsx
+++ b/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';
diff --git a/yarn.lock b/yarn.lock
index 24d621b0..86bdb3f0 100644
--- a/yarn.lock
+++ b/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"