docs(ui,docs): added upgrade guides link to UI docs (#5240)

* added medusa ui index page

* remove console

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

@@ -0,0 +1,11 @@
+---
+sidebar_custom_props:
+  exclude_from_auto_sidebar: true
+  exclude_from_doc_list: true
+---
+
+import DocCardList from '@theme/DocCardList';
+
+# Medusa UI Upgrade Guides
+
+<DocCardList colSize={6} />

www/apps/docs/docusaurus.config.js

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 require("dotenv").config()
 const fs = require("fs")
-const reverseSidebar = require("./src/utils/reverseSidebar")
+const reverseSidebar = require("./src/utils/reverse-sidebar")
+const excludeSidebarResults = require("./src/utils/exclude-sidebar-results")
 
 const announcementBar = JSON.parse(fs.readFileSync("./announcement.json"))
 
@@ -251,7 +252,10 @@ const config = {
             ...args
           }) {
             const sidebarItems = await defaultSidebarItemsGenerator(args)
-            return reverseSidebar(sidebarItems, args.item)
+            return reverseSidebar(
+              excludeSidebarResults(sidebarItems, args.item),
+              args.item
+            )
           },
         },
         theme: {

www/apps/docs/sidebars.js

@@ -53,7 +53,7 @@ module.exports = {
           label: "Ecommerce",
           customProps: {
             iconName: "shopping-cart",
-            excludeFromDocList: true,
+            exclude_from_doc_list: true,
           },
         },
         {
@@ -1951,6 +1951,10 @@ module.exports = {
       customProps: {
         sidebar_is_group_headline: true,
       },
+      link: {
+        type: "doc",
+        id: "upgrade-guides/medusa-ui/index",
+      },
       items: [
         {
           type: "autogenerated",

www/apps/docs/src/theme/DocCardList/index.tsx

@@ -7,9 +7,12 @@ import {
 import DocCard from "@theme/DocCard"
 import type { Props } from "@theme/DocCardList"
 
-function DocCardListForCurrentSidebarCategory({ className }: Props) {
+function DocCardListForCurrentSidebarCategory({
+  className,
+  ...rest
+}: ModifiedProps) {
   const category = useCurrentSidebarCategory()
-  return <DocCardList items={category.items} className={className} />
+  return <DocCardList className={className} {...rest} items={category.items} />
 }
 
 type ModifiedProps = {
@@ -22,7 +25,7 @@ export default function DocCardList(props: ModifiedProps): JSX.Element {
     return <DocCardListForCurrentSidebarCategory {...props} />
   }
   const filteredItems = filterDocCardListItems(items).filter(
-    (item) => !item.customProps.excludeFromDocList
+    (item) => !item.customProps?.exclude_from_doclist
   )
 
   return (

www/apps/docs/src/utils/exclude-sidebar-results.js

@@ -0,0 +1,17 @@
+function excludeSidebarResults(sidebarItems, categoryItem) {
+  const results = []
+  sidebarItems.forEach((item) => {
+    if (item.type === "category") {
+      results.push({
+        ...item,
+        items: excludeSidebarResults(item.items, categoryItem),
+      })
+    } else if (!item.customProps?.exclude_from_auto_sidebar) {
+      return results.push(item)
+    }
+  })
+
+  return results
+}
+
+module.exports = excludeSidebarResults

www/apps/ui/src/config/docs.tsx

@@ -1,3 +1,4 @@
+import { ArrowUpRightOnBox } from "@medusajs/icons"
 import { NavbarLinkProps, SidebarSectionItemsType } from "docs-ui"
 
 type DocsConfig = {
@@ -65,6 +66,16 @@ export const docsConfig: DocsConfig = {
             path: "/installation/standalone-project",
             isPathHref: true,
           },
+          {
+            title: "Upgrade Guides",
+            path: `${process.env.NEXT_PUBLIC_DOCS_URL}/upgrade-guides/medusa-ui`,
+            isPathHref: true,
+            additionalElms: <ArrowUpRightOnBox />,
+            linkProps: {
+              target: "_blank",
+              rel: "noreferrer",
+            },
+          },
         ],
       },
     ],

www/packages/docs-ui/src/components/Sidebar/Item/index.tsx

@@ -94,6 +94,7 @@ export const SidebarItem = ({
           }}
           replace
           shallow
+          {...item.linkProps}
         >
           <span>{item.title}</span>
           {item.additionalElms}

www/packages/docs-ui/src/providers/Sidebar/index.tsx

@@ -24,6 +24,7 @@ export type SidebarItemType = {
   children?: SidebarItemType[]
   loaded?: boolean
   isPathHref?: boolean
+  linkProps?: React.AllHTMLAttributes<HTMLAnchorElement>
 }
 
 export type SidebarSectionItemsType = {