From 03a982c10f8a64e3a80a42971b09d87661ae5e05 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 9 Oct 2022 00:37:49 +0200
Subject: [PATCH] chore: update README

---
 packages/additional-components/README.md | 49 +++++++++++++++++++++++-
 packages/pathfinding-edge/README.md      | 24 ++++++------
 packages/resize-rotate-node/README.md    |  6 +--
 3 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/packages/additional-components/README.md b/packages/additional-components/README.md
index b32894d8..25dd6448 100644
--- a/packages/additional-components/README.md
+++ b/packages/additional-components/README.md
@@ -1,3 +1,48 @@
-# Vue Flow Additional Components
+# Vue Flow: Additional Components
 
-This package contains additional components like `Background`, `Controls` & `MiniMap`.
+This package contains additional components that can be used with Vue Flow.
+These components include:
+
+- [Background](https://vueflow.dev/guide/components/background)
+- [Controls](https://vueflow.dev/guide/components/controls)
+  - [ControlButton](https://vueflow.dev/guide/components/control-button)
+- [MiniMap](https://vueflow.dev/guide/components/minimap)
+  - [MiniMap Node](https://vueflow.dev/guide/components/minimap-node)
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/additional-components
+
+# or
+$ npm i --save @vue-flow/additional-components
+```
+
+## 🎮 Quickstart
+
+```vue
+
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import initialElements from './initial-elements'
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow v-model="elements">
+      <!-- Adds a background to your graph. Use variant to specifiy which type of Background to use (lines, dots) -->
+      <Background :variant="BackgroundVariant.Dots" />
+      
+      <!-- Adds zoom/interaction controls to your graph. You can add more buttons by using slots. -->
+      <Controls />
+
+      <!-- Adds a minimap to your graph. -->
+      <MiniMap />
+    </VueFlow>
+  </div>
+</template>
+```
diff --git a/packages/pathfinding-edge/README.md b/packages/pathfinding-edge/README.md
index 80f4891b..47a11701 100644
--- a/packages/pathfinding-edge/README.md
+++ b/packages/pathfinding-edge/README.md
@@ -6,10 +6,10 @@ __Custom edge that avoids crossing nodes__
 
 ```bash
 # install
-$ yarn add @vue-flow/core-pathfinding-edge
+$ yarn add @vue-flow/pathfinding-edge
 
 # or
-$ npm i --save @vue-flow/core-pathfinding-edge
+$ npm i --save @vue-flow/pathfinding-edge
 ```
 
 ## 🎮 Quickstart
@@ -17,7 +17,7 @@ $ npm i --save @vue-flow/core-pathfinding-edge
 ```vue
 <script setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { PathFindingEdge } from '@vue-flow/core-pathfinding-edge'
+import { PathFindingEdge } from '@vue-flow/pathfinding-edge'
 import initialElements from './initial-elements'
 
 const elements = ref(initialElements)
@@ -39,6 +39,15 @@ const { getNodes } = useVueFlow()
 ```js
 // initial-elements.js
 export default [
+  {
+    id: 'e12',
+    source: '1',
+    target: '2',
+    label: 'Smart Edge',
+    style: { stroke: 'red' },
+    // assign pathfinding edge type
+    type: 'pathfinding'
+  },
   {
     id: '1',
     label: 'Node 1',
@@ -55,14 +64,5 @@ export default [
       y: 90,
     },
   },
-  {
-    id: 'e12',
-    source: '1',
-    target: '2',
-    label: 'Smart Edge',
-    style: { stroke: 'red' },
-    // assign pathfinding edge type
-    type: 'pathfinding'
-  },
 ]
 ```
diff --git a/packages/resize-rotate-node/README.md b/packages/resize-rotate-node/README.md
index bad9049a..cc9da58a 100644
--- a/packages/resize-rotate-node/README.md
+++ b/packages/resize-rotate-node/README.md
@@ -6,10 +6,10 @@
 
 ```bash
 # install
-$ yarn add @vue-flow/core-resize-rotate-node
+$ yarn add @vue-flow/resize-rotate-node
 
 # or
-$ npm i --save @vue-flow/core-resize-rotate-node
+$ npm i --save @vue-flow/resize-rotate-node
 ```
 
 ## 🎮 Quickstart
@@ -18,7 +18,7 @@ $ npm i --save @vue-flow/core-resize-rotate-node
 
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import { ResizeRotateNode } from '@vue-flow/core-resize-rotate-node'
+import { ResizeRotateNode } from '@vue-flow/resize-rotate-node'
 import initialElements from './initial-elements'
 
 const elements = ref(initialElements)