docs: fixes and refactoring for API reference (#9708)

* docs: fixes and refactoring for API reference

* add route caching

* remove caching

* use next cache

www/packages/docs-ui/src/components/RootProviders/index.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import React from "react"
 import {
   BrowserProvider,

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

@@ -134,14 +134,22 @@ export const Sidebar = ({
                   {!sidebarItems.default.length && !staticSidebarItems && (
                     <Loading className="px-0" />
                   )}
-                  {sidebarItems.default.map((item, index) => (
-                    <SidebarItem
-                      item={item}
-                      key={index}
-                      expandItems={expandItems}
-                      hasNextItems={index !== sidebarItems.default.length - 1}
-                    />
-                  ))}
+                  {sidebarItems.default.map((item, index) => {
+                    const itemKey =
+                      item.type === "separator"
+                        ? index
+                        : item.type === "link"
+                        ? `${item.path}-${index}`
+                        : `${item.title}-${index}`
+                    return (
+                      <SidebarItem
+                        item={item}
+                        key={itemKey}
+                        expandItems={expandItems}
+                        hasNextItems={index !== sidebarItems.default.length - 1}
+                      />
+                    )
+                  })}
                 </div>
               </div>
             </CSSTransition>

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

@@ -40,7 +40,8 @@ export type SidebarContextType = {
   setActivePath: (path: string | null) => void
   isLinkActive: (item: SidebarItem, checkChildren?: boolean) => boolean
   isChildrenActive: (item: SidebarItemCategory) => boolean
-  addItems: (item: SidebarItem[], options?: ActionOptionsType) => void
+  addItems: (items: SidebarItem[], options?: ActionOptionsType) => void
+  removeItems: (items: SidebarItem[]) => void
   findItemInSection: (
     section: SidebarItem[],
     item: Partial<SidebarItem>,
@@ -87,6 +88,10 @@ export type ActionType =
       type: "replace"
       replacementItems: SidebarSectionItems
     }
+  | {
+      type: "remove"
+      items: SidebarItem[]
+    }
 
 type LinksMap = Map<string, SidebarItemLinkWithParent>
 
@@ -152,10 +157,46 @@ const getLinksMap = (
   return map
 }
 
-export const reducer = (state: SidebarSectionItems, actionData: ActionType) => {
+export const reducer = (
+  state: SidebarSectionItems,
+  actionData: ActionType
+): SidebarSectionItems => {
   if (actionData.type === "replace") {
     return actionData.replacementItems
   }
+  if (actionData.type === "remove") {
+    return {
+      ...state,
+      default: state.default.filter((item) => {
+        if (item.type === "separator") {
+          return true
+        }
+
+        const found = actionData.items.some((itemToRemove) => {
+          if (
+            itemToRemove.type === "separator" ||
+            itemToRemove.type !== item.type
+          ) {
+            return false
+          }
+
+          if (
+            itemToRemove.type === "category" ||
+            itemToRemove.type === "sub-category"
+          ) {
+            return itemToRemove.title === item.title
+          }
+
+          return (
+            itemToRemove.path === (item as SidebarItemLink).path &&
+            itemToRemove.title === (item as SidebarItemLink).title
+          )
+        })
+
+        return !found
+      }),
+    }
+  }
   const { type, options } = actionData
   let { items } = actionData
 
@@ -306,6 +347,13 @@ export const SidebarProvider = ({
     })
   }
 
+  const removeItems = (itemsToRemove: SidebarItem[]) => {
+    dispatch({
+      type: "remove",
+      items: itemsToRemove,
+    })
+  }
+
   const isLinkActive = useCallback(
     (item: SidebarItem, checkChildren = false): boolean => {
       if (item.type !== "link") {
@@ -516,6 +564,7 @@ export const SidebarProvider = ({
   useEffect(() => {
     if (resetOnCondition?.()) {
       resetItems()
+      setActivePath(null)
     }
   }, [resetOnCondition, resetItems])
 
@@ -575,6 +624,7 @@ export const SidebarProvider = ({
         items,
         currentItems,
         addItems,
+        removeItems,
         activePath,
         setActivePath,
         isLinkActive: isLinkActive,