From 4e5279d45340bf6e6d90b1d34843d8d8f6000fe3 Mon Sep 17 00:00:00 2001
From: Mohab Sameh <37941642+mohab-sameh@users.noreply.github.com>
Date: Wed, 18 Sep 2024 09:35:51 +0300
Subject: [PATCH] docs: update migration codemods (#1285)

* docs: update migration codemods

* adjust indent

* chore: fix error, minor update

---------

Co-authored-by: zernonia <zernonia@gmail.com>
---
 docs/components/Callout.vue                   |  2 +-
 .../examples/ComboboxTextarea/list.ts         |  1 -
 docs/content/docs/guides/migration.md         | 88 +++++++++++--------
 3 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/docs/components/Callout.vue b/docs/components/Callout.vue
index f642efe60..0e09ff52c 100644
--- a/docs/components/Callout.vue
+++ b/docs/components/Callout.vue
@@ -32,7 +32,7 @@ const activeType = computed(() => {
     class="text-sm rounded-xl border px-6 py-4 [&_p]:mb-0 my-4"
     :class="activeType.class"
   >
-    <div class="flex items-center gap-2 font-semibold">
+    <div class="flex items-center gap-2 font-semibold mb-4">
       <Icon
         class="text-lg"
         :icon="activeType.icon"
diff --git a/docs/components/examples/ComboboxTextarea/list.ts b/docs/components/examples/ComboboxTextarea/list.ts
index 6cfc9059c..9ab3cf04c 100644
--- a/docs/components/examples/ComboboxTextarea/list.ts
+++ b/docs/components/examples/ComboboxTextarea/list.ts
@@ -21,7 +21,6 @@ const users = [
   { value: '@folz', listValue: 'folz' },
   { value: '@Slapbox', listValue: 'Slapbox' },
   { value: '@jyash97', listValue: 'jyash97' },
-  { value: '@k-sav', listValue: 'k-sav' },
   { value: '@AliLynne', listValue: 'AliLynne' },
   { value: '@DaniGuardiola', listValue: 'DaniGuardiola' },
   { value: '@frassinier', listValue: 'frassinier' },
diff --git a/docs/content/docs/guides/migration.md b/docs/content/docs/guides/migration.md
index 69d1e7137..684125e43 100644
--- a/docs/content/docs/guides/migration.md
+++ b/docs/content/docs/guides/migration.md
@@ -19,20 +19,23 @@ Congratulation! 🎉 Now that you've installed the above package, let's perform
 
 #### Codemods
 
-To assist with the upgrade from radix-vue to Reka UI, we have added features that utilize codemods to automatically update your code to many of the new updates and patterns. Run the following command to automatically update your code for RekaUI migration:
+To assist with the upgrade from Radix Vue to Reka UI, we collaborated with the [Codemod](https://github.com/codemod-com/codemod) team to automatically update your code to many of the new updates and patterns with [open-source codemods](https://go.codemod.com/reka-codemods). You can run the following command to automatically migrate to Reka UI:
 
-  > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod reka-ui-v2/migration-recipe
-  > ```
+<Callout type="tip" title="Migration recipe">
 
+```bash
+npx codemod reka-ui/migration-recipe
+```
+
+</Callout>
 
-These will run the following codemods from the radix-vue Codemod repository:
+The [migration recipe](https://go.codemod.com/reka-recipe) will run the following codemods from the radix-vue Codemod repository:
 
-- **Remove filter-function props**
-- **Rename controlled state to v-model**
-- **Remove deprecated step prop**
+- [`reka-ui/import-update`](https://go.codemod.com/reka-import-update)
+- [`reka-ui/update-css-and-data-attributes`](https://go.codemod.com/reka-update-css-data)
+- [`reka-ui/update-combobox-filter`](https://go.codemod.com/update-combobox-filter)
+- [`reka-ui/rename-controlled-state`](https://go.codemod.com/rename-controlled-state)
+- [`reka-ui/remove-calendar-step-prop`](https://go.codemod.com/remove-calendar-step-prop)
 
 ## Import Statement Changes
 
@@ -45,11 +48,13 @@ import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'reka-ui' // [!code +
 </script>
 ```
 
-  > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/radix-vue-1-reka-ui-import-update
-  > ```
+  <Callout type="tip" title="Codemod available">
+
+  ```bash
+  npx codemod reka-ui/import-update
+  ```
+
+  </Callout>
 
 ## Naming Convention Changes
 
@@ -63,11 +68,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   [data-reka-collection-item] {}  // [!code ++]
 ```
 
-  > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/radix-to-reka-css-and-data-attribute-replacement
-  > ```
+<Callout type="tip" title="Codemod available">
+
+```bash
+npx codemod reka-ui/update-css-and-data-attributes
+```
+
+</Callout>
 
 ## Component Breaking Changes
 
@@ -81,11 +88,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   </template>
   ```
 
-  > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/combobox-root-to-combobox-input
-  > ```
+  <Callout type="tip" title="Codemod available">
+
+  ```bash
+  npx codemod reka-ui/update-combobox-filter
+  ```
+
+  </Callout>
 
 - [Replace `searchTerm` props of Root to Input's `v-model`](https://github.com/radix-vue/radix-vue/commit/e1bab6598c3533dfbf6a86ad26b471ab826df069#diff-833593a5ce28a8c3fabc7d77462b116405e25df2b93bcab449798b5799e73474)
 - [Move `displayValue` props from Root to Input](https://github.com/radix-vue/radix-vue/commit/e1bab6598c3533dfbf6a86ad26b471ab826df069#diff-833593a5ce28a8c3fabc7d77462b116405e25df2b93bcab449798b5799e73474)
@@ -94,9 +103,8 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   <template>
     <ComboboxRoot v-model:searchTerm="search" :display-value="(v) => v.name" /> // [!code --]
     <ComboboxRoot>
-      // [!code ++]
       <ComboboxInput v-model="search" :display-value="(v) => v.name" /> // [!code ++]
-    </ComboboxRoot> // [!code ++]
+    </ComboboxRoot>
   </template>
   ```
 
@@ -115,11 +123,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   </template>
   ```
 
-    > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/searchTerm-props-of-Root-to-Input's-v-model
-  > ```
+  <Callout type="tip" title="Codemod available">
+
+  ```bash
+  npx codemod reka-ui/rename-controlled-state
+  ```
+
+  </Callout>
 
 - [Reposition `VisuallyHidden`](https://github.com/radix-vue/radix-vue/commit/107389a9c230d2c94232887b9cbe2710222564aa) - Previously `VisuallyHidden` were position at the root node, causing style scoped to not be applied.
 
@@ -155,15 +165,17 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   </template>
   ```
 
-   > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/add-script-setup-and-update-calendar-components
-  > ```
+  <Callout type="tip" title="Codemod available">
+
+  ```bash
+  npx codemod reka-ui/remove-calendar-step-prop
+  ```
+
+  </Callout>
 
 ### Select
 
-- [`SelectValue` no longer render teleported element](https://github.com/radix-vue/radix-vue/commit/6a623484d610cc3b7c1a23a77c253c8e95cef518) - Previous implmenentation of `SelectValue` will render the selected `SelectItem` via teleporting fragment. This causes SSR flickering, and it is unncessarily computation.
+- [`SelectValue` no longer render teleported element](https://github.com/radix-vue/radix-vue/commit/6a623484d610cc3b7c1a23a77c253c8e95cef518) - Previous implmenentation of `SelectValue` will render the selected `SelectItem` via teleporting fragment. This causes SSR flickering, and it is unnecessarily computation.
 
   ```vue
   <template>