docs: support multiple sidebars in a project (#11768)

* changed to new sidebar across projects except resources

* finalize multi sidebar support

* clean up

* remove redundant property

* small changes

* fixes

* generate

* fix error

* fix initial open

www/packages/docs-ui/src/hooks/use-child-docs/index.tsx

@@ -9,17 +9,17 @@ import {
   H3,
   H4,
   Hr,
-  isSidebarItemLink,
   LocalSearch,
   MarkdownContent,
   SearchInput,
   useIsBrowser,
   useSidebar,
 } from "../.."
-import { InteractiveSidebarItem, SidebarItem, SidebarItemLink } from "types"
+import { Sidebar } from "types"
 import slugify from "slugify"
 import { MDXComponents } from "../.."
 import { ChevronDoubleRight, ExclamationCircle } from "@medusajs/icons"
+import { isSidebarItemLink } from "../../utils/sidebar-utils"
 
 type HeadingComponent = (
   props: React.HTMLAttributes<HTMLHeadingElement>
@@ -60,11 +60,11 @@ export const useChildDocs = ({
     ...searchProps
   } = { enable: false },
 }: UseChildDocsProps) => {
-  const { currentItems, activeItem } = useSidebar()
+  const { shownSidebar, activeItem } = useSidebar()
   const { isBrowser } = useIsBrowser()
   const [searchQuery, setSearchQuery] = useState("")
   const [localSearch, setLocalSearch] = useState<
-    LocalSearch<SidebarItemLink> | undefined
+    LocalSearch<Sidebar.SidebarItemLink> | undefined
   >()
   const TitleHeaderComponent = useCallback(
     (level: number): HeadingComponent => {
@@ -91,7 +91,7 @@ export const useChildDocs = ({
         : "all"
   }, [showItems, hideItems])
 
-  const filterCondition = (item: SidebarItem): boolean => {
+  const filterCondition = (item: Sidebar.SidebarItem): boolean => {
     if (item.type === "separator") {
       return false
     }
@@ -111,8 +111,10 @@ export const useChildDocs = ({
     }
   }
 
-  const filterItems = (items: SidebarItem[]): InteractiveSidebarItem[] => {
-    return (items.filter(filterCondition) as InteractiveSidebarItem[])
+  const filterItems = (
+    items: Sidebar.SidebarItem[]
+  ): Sidebar.InteractiveSidebarItem[] => {
+    return (items.filter(filterCondition) as Sidebar.InteractiveSidebarItem[])
       .map((item) => Object.assign({}, item))
       .map((item) => {
         if (item.children && filterType === "hide") {
@@ -124,19 +126,19 @@ export const useChildDocs = ({
   }
 
   const filterNonInteractiveItems = (
-    items: SidebarItem[] | undefined
-  ): InteractiveSidebarItem[] => {
+    items: Sidebar.SidebarItem[] | undefined
+  ): Sidebar.InteractiveSidebarItem[] => {
     return (
       (items?.filter(
         (item) => item.type !== "separator"
-      ) as InteractiveSidebarItem[]) || []
+      ) as Sidebar.InteractiveSidebarItem[]) || []
     )
   }
 
   const getChildrenForLevel = (
-    item: InteractiveSidebarItem,
+    item: Sidebar.InteractiveSidebarItem,
     currentLevel = 1
-  ): InteractiveSidebarItem[] | undefined => {
+  ): Sidebar.InteractiveSidebarItem[] | undefined => {
     if (currentLevel === childLevel) {
       return filterNonInteractiveItems(item.children)
     }
@@ -144,7 +146,7 @@ export const useChildDocs = ({
       return
     }
 
-    const childrenResult: InteractiveSidebarItem[] = []
+    const childrenResult: Sidebar.InteractiveSidebarItem[] = []
 
     filterNonInteractiveItems(item.children).forEach((child) => {
       const childChildren = getChildrenForLevel(child, currentLevel + 1)
@@ -162,34 +164,24 @@ export const useChildDocs = ({
   const filteredItems = useMemo(() => {
     let targetItems =
       type === "sidebar"
-        ? currentItems
-          ? Object.assign({}, currentItems)
-          : undefined
-        : {
-            default: [...(activeItem?.children || [])],
-          }
+        ? shownSidebar && "items" in shownSidebar
+          ? shownSidebar.items
+          : shownSidebar?.children || []
+        : [...(activeItem?.children || [])]
     if (filterType !== "all" && targetItems) {
-      targetItems = {
-        ...targetItems,
-        default: filterItems(targetItems.default),
-      }
+      targetItems = filterItems(targetItems)
     }
 
-    return targetItems
-      ? {
-          ...targetItems,
-          default: filterNonInteractiveItems(targetItems?.default),
-        }
-      : undefined
-  }, [currentItems, type, activeItem, filterType])
+    return filterNonInteractiveItems(targetItems)
+  }, [shownSidebar, type, activeItem, filterType])
 
   const searchableItems = useMemo(() => {
-    const searchableItems: SidebarItemLink[] = []
+    const searchableItems: Sidebar.SidebarItemLink[] = []
     if (!enableSearch) {
       return searchableItems
     }
     if (onlyTopLevel) {
-      filteredItems?.default?.forEach((item) => {
+      filteredItems.forEach((item) => {
         if (isSidebarItemLink(item)) {
           searchableItems.push(item)
         } else {
@@ -197,16 +189,16 @@ export const useChildDocs = ({
             isSidebarItemLink(child)
           )
           if (firstChild) {
-            searchableItems.push(firstChild as SidebarItemLink)
+            searchableItems.push(firstChild as Sidebar.SidebarItemLink)
           }
         }
       })
     } else {
-      filteredItems?.default?.forEach((item) => {
-        const childItems: SidebarItemLink[] =
+      filteredItems?.forEach((item) => {
+        const childItems: Sidebar.SidebarItemLink[] =
           (getChildrenForLevel(item)?.filter((childItem) => {
             return isSidebarItemLink(childItem)
-          }) as SidebarItemLink[]) || []
+          }) as Sidebar.SidebarItemLink[]) || []
         searchableItems.push(...childItems)
       })
     }
@@ -224,7 +216,7 @@ export const useChildDocs = ({
     }
 
     setLocalSearch(
-      getLocalSearch<SidebarItemLink>({
+      getLocalSearch<Sidebar.SidebarItemLink>({
         docs: searchableItems,
         searchableFields: ["title", "description"],
         options: {
@@ -263,7 +255,7 @@ export const useChildDocs = ({
     localStorage.setItem(`${storageKey}-query`, searchQuery)
   }, [isBrowser, searchQuery, storageKey, enableSearch])
 
-  const getTopLevelElms = (items?: InteractiveSidebarItem[]) => {
+  const getTopLevelElms = (items?: Sidebar.InteractiveSidebarItem[]) => {
     return (
       <CardList
         items={
@@ -274,7 +266,7 @@ export const useChildDocs = ({
                 ? (
                     childItem.children.find((item) =>
                       isSidebarItemLink(item)
-                    ) as SidebarItemLink
+                    ) as Sidebar.SidebarItemLink
                   )?.path
                 : "#"
             return {
@@ -292,7 +284,7 @@ export const useChildDocs = ({
   }
 
   const getAllLevelsElms = (
-    items?: InteractiveSidebarItem[],
+    items?: Sidebar.InteractiveSidebarItem[],
     headerLevel = titleLevel
   ) => {
     return items?.map((item, key) => {
@@ -405,8 +397,8 @@ export const useChildDocs = ({
         {!searchQuery && (
           <>
             {onlyTopLevel
-              ? getTopLevelElms(filteredItems?.default)
-              : getAllLevelsElms(filteredItems?.default)}
+              ? getTopLevelElms(filteredItems)
+              : getAllLevelsElms(filteredItems)}
           </>
         )}
       </>