docs: added documentation for toast component changes (#7141)

* docs: added documentation for toast component changes

* added redirect from use-toast docs to upgrade guide

* remove unused file

* content linting fixes

* update UI package version

* updated ui preset

* fix upgrade guides main page

www/apps/docs/content/upgrade-guides/medusa-ui/3-0-0.mdx

@@ -0,0 +1,115 @@
+---
+description: "Actions Required for v.3.0.0"
+sidebar_custom_props:
+  iconName: "component-solid"
+---
+
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
+# v3.0.0
+
+Version 3.0.0 of Medusa UI introduces a breaking change for the toast components. This is due to a change in the underlying toast library from Radix UI to [Sonner](https://sonner.emilkowal.ski/).
+
+## How to Update
+
+Run the following command in your project:
+
+```bash npm2yarn
+npm install @medusajs/ui@3.0.0
+```
+
+---
+
+## Breaking Changes
+
+### useToast Hook
+
+Previously, you created a toast using the `useToast` hook, which provides a utility function. In this version, the `useToast` hook is removed and, instead, a new `toast` utility is exported. The `toast` utility has functions that create toasts for different variants, such as `warning` and `error`.
+
+For example, here's before and after update code to see the difference:
+
+<Tabs groupId="ui" isCodeTabs={true}>
+  <TabItem label="Before" value="before">
+
+  ```tsx
+  import { Button, Toaster, useToast } from "@medusajs/ui"
+
+  export default function ToasterDemo() {
+    const { toast } = useToast()
+
+    return (
+      <>
+        <Toaster />
+        <Button
+          onClick={() =>
+            toast({
+              title: "Info",
+              description: "Hello there",
+            })
+          }
+        >
+          Show
+        </Button>
+      </>
+    )
+  }
+  ```
+
+  </TabItem>
+  <TabItem label="After" value="after">
+
+  ```tsx
+  import { Button, Toaster, toast } from "@medusajs/ui"
+
+  export default function ToasterDemo() {
+    return (
+      <>
+        <Toaster />
+        <Button
+          onClick={() =>
+            toast.info("Info", {
+              description: "Hello there",
+            })
+          }
+        >
+          Show
+        </Button>
+      </>
+    )
+  }
+  ```
+
+  </TabItem>
+</Tabs>
+
+Learn more about the `toast` utility in the [UI documentation](https://docs.medusajs.com/ui/components/toast).
+
+### Toaster Default Position
+
+The default position has changed from `top-right` to `bottom-right`. You can change the position of the created toasts by passing the `position` prop to the `Toaster` component.
+
+For example:
+
+```tsx
+import { Button, Toaster, toast } from "@medusajs/ui"
+
+export default function ToasterDemo() {
+  return (
+    <>
+      <Toaster position="top-right" />
+      <Button
+        onClick={() =>
+          toast.info("Info", {
+            description: "Hello there",
+          })
+        }
+      >
+        Show
+      </Button>
+    </>
+  )
+}
+```
+
+Learn more about the `Toaster`'s props in the [UI documentation](https://docs.medusajs.com/ui/components/toast).

www/apps/docs/src/utils/get-first-category-item.ts

@@ -14,7 +14,7 @@ export function getCategoryItems({ categoryLabel, categoryCustomId }: Options) {
     useDocsSidebar().items,
     (item) =>
       item.label === categoryLabel ||
-      item.customProps.category_id === categoryCustomId
+      (categoryCustomId && item.customProps.category_id === categoryCustomId)
   )?.items
 }
 

www/apps/ui/package.json

@@ -15,8 +15,8 @@
   "dependencies": {
     "@faker-js/faker": "^8.0.2",
     "@medusajs/icons": "^1.2.0",
-    "@medusajs/ui": "^2.4.1",
-    "@medusajs/ui-preset": "latest",
+    "@medusajs/ui": "^3.0.0",
+    "@medusajs/ui-preset": "^1.1.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-tabs": "^1.0.4",