docs: prep for v2 documentation (#6710)

This PR includes documentation that preps for v2 docs (but doesn't introduce new docs). _Note: The number of file changes in the PR is due to find-and-replace within the `references` which is unavoidable. Let me know if I should move it to another PR._ ## Changes - Change Medusa version in base OAS used for v2. - Fix to docblock generator related to not catching all path parameters. - Added typedoc plugin that generates ER Diagrams, which will be used specifically for data model references in commerce modules. - Changed OAS tool to output references in `www/apps/api-reference/specs-v2` directory when the `--v2` option is used. - Added a version switcher to the API reference to switch between V1 and V2. This switcher is enabled by an environment variable, so it won't be visible/usable at the moment. - Upgraded docusaurus to v3.0.1 - Added new Vale rules to ensure correct spelling of Medusa Admin and module names. - Added new components to the `docs-ui` package that will be used in future documentation changes.
2024-03-18 07:47:35 +00:00
parent 56a6ec0227
commit bb87db8342
2008 changed files with 15716 additions and 10536 deletions
@@ -2,7 +2,7 @@ import { MetadataRoute } from "next"

 import { docsConfig } from "@/config/docs"
 import { absoluteUrl } from "@/lib/absolute-url"
-import { SidebarItemType } from "docs-ui"
+import { SidebarItemType } from "types"

 export default function sitemap(): MetadataRoute.Sitemap {
  const now = new Date()
@@ -1,18 +1,13 @@
 import type { Metadata } from "next"
-import { Inter, Roboto_Mono } from "next/font/google"

 import { Navbar } from "@/components/navbar"
 import { Providers } from "@/providers"

 import { siteConfig } from "@/config/site"
 import "../styles/globals.css"
-import { Sidebar } from "docs-ui"
-
-const inter = Inter({ subsets: ["latin"], variable: "--inter" })
-const robotoMono = Roboto_Mono({
-  subsets: ["latin"],
-  variable: "--font-roboto-mono",
-})
+import { TightLayout } from "docs-ui"
+import { Inter, Roboto_Mono } from "next/font/google"
+import clsx from "clsx"

 export const metadata: Metadata = {
  title: siteConfig.name,
@@ -22,34 +17,32 @@ export const metadata: Metadata = {
  ),
 }

+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  weight: ["400", "500"],
+})
+
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+})
+
 export default function RootLayout({
  children,
 }: {
  children: React.ReactNode
 }) {
  return (
-    <html lang="en" className="h-full w-full">
-      <head />
-      <body
-        className={`bg-docs-bg h-screen overflow-hidden w-full ${inter.variable} ${robotoMono.variable}`}
-      >
-        <Providers>
-          <Navbar />
-          <div
-            className="w-full h-[calc(100%-57px)] overflow-y-scroll overflow-x-hidden"
-            id="main"
-          >
-            <div className="max-w-xxl grid w-full grid-cols-1 px-6 lg:mx-auto lg:grid-cols-[280px_1fr]">
-              <Sidebar expandItems={true} />
-              <div className="relative flex w-full flex-1 items-start justify-center px-4 pb-8 pt-16 md:px-8 lg:px-16 lg:py-[112px]">
-                <main className="h-full w-full lg:max-w-[720px] lg:px-px">
-                  {children}
-                </main>
-              </div>
-            </div>
-          </div>
-        </Providers>
-      </body>
-    </html>
+    <TightLayout
+      ProvidersComponent={Providers}
+      NavbarComponent={Navbar}
+      sidebarProps={{
+        expandItems: true,
+      }}
+      bodyClassName={clsx(inter.variable, robotoMono.variable)}
+    >
+      {children}
+    </TightLayout>
  )
 }
@@ -1,6 +1,6 @@
 "use client"

-import { Text, clx } from "@medusajs/ui"
+import { clx } from "@medusajs/ui"
 import { useMDXComponent } from "next-contentlayer/hooks"
 import * as React from "react"

@@ -12,46 +12,14 @@ import { PackageInstall } from "@/components/package-install"
 import { Feedback } from "@/components/feedback"
 import { FigmaIcon } from "@/components/figma-icon"
 import { ComponentReference } from "@/components/component-reference"
-import clsx from "clsx"
-import { NextLink, Card, BorderedIcon, CodeMdx, CodeBlock } from "docs-ui"
+import { Link, Card, BorderedIcon, MDXComponents, CodeBlock } from "docs-ui"

 interface MdxProps {
  code: string
 }

 const components = {
-  h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
-    return (
-      <h1
-        className={clx("h1-docs text-medusa-fg-base", className)}
-        {...props}
-      />
-    )
-  },
-  h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
-    return (
-      <h2
-        className={clx("h2-docs mb-4 mt-16 text-medusa-fg-base", className)}
-        {...props}
-      />
-    )
-  },
-  h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
-    return (
-      <h3
-        className={clx("h3-docs mb-2 mt-10 text-medusa-fg-base", className)}
-        {...props}
-      />
-    )
-  },
-  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
-    return (
-      <Text
-        className={clx("text-medusa-fg-subtle mb-docs_1.5", className)}
-        {...props}
-      />
-    )
-  },
+  ...MDXComponents,
  a: ({
    className,
    href,
@@ -60,7 +28,7 @@ const components = {
    const isInternal = href && href?.startsWith("/")

    if (isInternal) {
-      return <NextLink className={className} href={href} {...props} />
+      return <Link className={className} href={href} {...props} />
    }

    return (
@@ -76,49 +44,6 @@ const components = {
      />
    )
  },
-  code: CodeMdx,
-  ul: ({
-    className,
-    children,
-    ...props
-  }: React.HTMLAttributes<HTMLUListElement>) => {
-    return (
-      <ul
-        {...props}
-        className={clsx("list-disc px-docs_1 mb-docs_1.5", className)}
-      >
-        {children}
-      </ul>
-    )
-  },
-  ol: ({
-    className,
-    children,
-    ...props
-  }: React.HTMLAttributes<HTMLOListElement>) => {
-    return (
-      <ol
-        {...props}
-        className={clsx("list-decimal px-docs_1 mb-docs_1.5", className)}
-      >
-        {children}
-      </ol>
-    )
-  },
-  li: ({
-    className,
-    children,
-    ...props
-  }: React.HTMLAttributes<HTMLElement>) => {
-    return (
-      <li className={clx("text-medusa-fg-subtle", className)} {...props}>
-        <Text>{children}</Text>
-      </li>
-    )
-  },
-  hr: ({ className, ...props }: React.HTMLAttributes<HTMLHRElement>) => {
-    return <hr className={clx("mb-4", className)} {...props} />
-  },
  HookValues,
  CodeBlock,
  ComponentExample,
@@ -1,5 +1,5 @@
 import { clx } from "@medusajs/ui"
-import { CodeTabs } from "docs-ui"
+import { LegacyCodeTabs } from "docs-ui"

 type PackageInstallProps = {
  packageName: string
@@ -21,7 +21,7 @@ const PackageInstall = ({
  const pnpm = `pnpm add ${devDependency ? "-D " : ""}${pkg}`

  return (
-    <CodeTabs
+    <LegacyCodeTabs
      tabs={[
        { code: { lang: "bash", source: npm }, label: "npm", value: "npm" },
        { code: { lang: "bash", source: yarn }, label: "yarn", value: "yarn" },
@@ -1,13 +1,10 @@
 export const colors = {
  dark: {
-    "--code-text-subtle": "rgba(105, 110, 119, 1)",
    "--button-transparent-pressed": "rgba(46, 48, 53, 1)",
    "--border-base": "rgba(46, 48, 53, 1)",
-    "--code-text-base": "rgba(237, 238, 240, 1)",
    "--tag-neutral-icon": "rgba(125, 130, 138, 1)",
    "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
    "--fg-on-color": "rgba(255, 255, 255, 1)",
-    "--button-neutral-hover": "rgba(53, 55, 60, 1)",
    "--bg-switch-off": "rgba(53, 55, 60, 1)",
    "--border-strong": "rgba(53, 55, 60, 1)",
    "--fg-subtle": "rgba(173, 177, 184, 1)",
@@ -20,12 +17,13 @@ export const colors = {
    "--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
    "--tag-neutral-text": "rgba(173, 177, 184, 1)",
    "--fg-muted": "rgba(105, 110, 119, 1)",
-    "--button-danger-pressed": "rgba(225, 29, 72, 1)",
-    "--code-bg-header": "rgba(24, 24, 26, 1)",
    "--border-loud": "rgba(237, 238, 240, 1)",
    "--bg-base-pressed": "rgba(46, 48, 53, 1)",
    "--bg-disabled": "rgba(39, 40, 45, 1)",
-    "--code-icon": "rgba(70, 75, 80, 1)",
+    "--code-fg-subtle": "rgba(105, 110, 119, 1)",
+    "--code-fg-base": "rgba(237, 238, 240, 1)",
+    "--code-bg-subtle": "rgba(24, 24, 26, 1)",
+    "--code-fg-muted": "rgba(70, 75, 80, 1)",
    "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
    "--border-danger": "rgba(190, 18, 60, 1)",
    "--border-interactive": "rgba(96, 165, 250, 1)",
@@ -40,7 +38,6 @@ export const colors = {
    "--fg-interactive": "rgba(96, 165, 250, 1)",
    "--bg-overlay": "rgba(24, 24, 26, 0.7)",
    "--fg-on-inverted": "rgba(24, 24, 26, 1)",
-    "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
    "--tag-red-border": "rgba(136, 19, 55, 1)",
    "--tag-red-bg": "rgba(76, 5, 25, 1)",
    "--button-transparent-hover": "rgba(39, 40, 45, 1)",
@@ -67,13 +64,9 @@ export const colors = {
    "--tag-orange-bg": "rgba(69, 26, 3, 1)",
    "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
    "--code-bg-base": "rgba(27, 27, 31, 1)",
-    "--button-transparent": "rgba(255, 255, 255, 0)",
    "--button-neutral": "rgba(39, 40, 45, 1)",
    "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
    "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
-    "--button-inverted-hover": "rgba(255, 255, 255, 1)",
-    "--button-danger-hover": "rgba(190, 18, 60, 1)",
    "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
    "--tag-blue-icon": "rgba(59, 130, 246, 1)",
    "--tag-red-icon": "rgba(244, 63, 94, 1)",
@@ -86,18 +79,46 @@ export const colors = {
    "--bg-component": "rgba(39, 40, 45, 1)",
    "--bg-field": "rgba(39, 40, 45, 1)",
    "--bg-field-hover": "rgba(46, 48, 53, 1)",
+    "--contrast-fg-primary": "rgba(28, 32, 36, 1)",
+    "--contrast-bg-base": "rgba(228, 228, 233, 1)",
+    "--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
+    "--contrast-border-base": "rgba(185, 187, 198, 1)",
+    "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
+    "--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
+    "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
+    "--contrast-bg-highlight": "rgba(242, 242, 245, 1)",
+    "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
+    "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
+    "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)",
+    "--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)",
+    "--button-neutral-hover": "rgba(53, 55, 60, 1)",
+    "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-hover": "rgba(255, 255, 255, 1)",
+    "--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)",
+    "--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)",
+    "--button-danger-pressed": "rgba(225, 29, 72, 1)",
+    "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-danger-hover": "rgba(190, 18, 60, 1)",
+    "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-transparent": "rgba(0, 0, 0, 0.01)",
  },
  light: {
    "--button-inverted": "rgba(3, 7, 18, 1)",
    "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
    "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-inverted-hover": "rgba(31, 41, 55, 1)",
-    "--code-text-base": "rgba(249, 250, 251, 1)",
+    "--code-fg-subtle": "rgba(156, 163, 175, 1)",
+    "--code-fg-muted": "rgba(107, 114, 128, 1)",
+    "--code-bg-subtle": "rgba(31, 41, 55, 1)",
+    "--code-fg-base": "rgba(249, 250, 251, 1)",
    "--tag-green-bg": "rgba(209, 250, 229, 1)",
    "--border-strong": "rgba(209, 213, 219, 1)",
    "--border-interactive": "rgba(59, 130, 246, 1)",
    "--bg-highlight": "rgba(239, 246, 255, 1)",
-    "--bg-base-hover": "rgba(249, 250, 251, 1)",
    "--tag-neutral-bg": "rgba(243, 244, 246, 1)",
    "--tag-red-bg": "rgba(255, 228, 230, 1)",
    "--tag-orange-bg": "rgba(254, 244, 199, 1)",
@@ -116,8 +137,6 @@ export const colors = {
    "--border-loud": "rgba(3, 7, 18, 1)",
    "--fg-on-inverted": "rgba(255, 255, 255, 1)",
    "--fg-on-color": "rgba(255, 255, 255, 1)",
-    "--button-transparent": "rgba(255, 255, 255, 0)",
-    "--button-danger-pressed": "rgba(190, 18, 60, 1)",
    "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
    "--fg-interactive": "rgba(59, 130, 246, 1)",
    "--fg-error": "rgba(225, 29, 72, 1)",
@@ -128,7 +147,6 @@ export const colors = {
    "--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
    "--fg-subtle": "rgba(75, 85, 99, 1)",
    "--fg-muted": "rgba(156, 163, 175, 1)",
-    "--bg-base-pressed": "rgba(243, 244, 246, 1)",
    "--bg-subtle-hover": "rgba(243, 244, 246, 1)",
    "--tag-neutral-border": "rgba(229, 231, 235, 1)",
    "--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
@@ -148,23 +166,26 @@ export const colors = {
    "--tag-red-border": "rgba(254, 205, 211, 1)",
    "--tag-green-border": "rgba(167, 243, 208, 1)",
    "--tag-green-text": "rgba(4, 120, 87, 1)",
-    "--button-transparent-hover": "rgba(249, 250, 251, 1)",
-    "--button-transparent-pressed": "rgba(243, 244, 246, 1)",
    "--code-bg-base": "rgba(17, 24, 39, 1)",
-    "--code-bg-header": "rgba(31, 41, 55, 1)",
-    "--code-text-subtle": "rgba(156, 163, 175, 1)",
    "--code-border": "rgba(55, 65, 81, 1)",
-    "--code-icon": "rgba(107, 114, 128, 1)",
-    "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
-    "--button-inverted-pressed": "rgba(55, 65, 81, 1)",
    "--button-neutral": "rgba(255, 255, 255, 1)",
    "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
    "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
    "--button-danger": "rgba(225, 29, 72, 1)",
    "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
    "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-neutral-hover": "rgba(249, 250, 251, 1)",
-    "--button-danger-hover": "rgba(225, 29, 72, 1)",
+    "--button-inverted-pressed": "rgba(31, 41, 55, 1)",
+    "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-danger-pressed": "rgba(159, 18, 57, 1)",
+    "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-hover": "rgba(17, 24, 39, 1)",
+    "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-danger-hover": "rgba(190, 18, 60, 1)",
+    "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
    "--bg-component": "rgba(241, 243, 245, 1)",
    "--bg-overlay": "rgba(3, 7, 18, 0.4)",
    "--bg-switch-off": "rgba(229, 231, 235, 1)",
@@ -174,5 +195,24 @@ export const colors = {
    "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
    "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
    "--bg-disabled": "rgba(243, 244, 246, 1)",
+    "--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
+    "--contrast-bg-base": "rgba(27, 27, 31, 1)",
+    "--contrast-border-base": "rgba(60, 63, 68, 1)",
+    "--contrast-fg-primary": "rgba(237, 238, 240, 1)",
+    "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
+    "--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
+    "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
+    "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)",
+    "--button-transparent-hover": "rgba(243, 244, 246, 1)",
+    "--button-neutral-pressed": "rgba(229, 231, 235, 1)",
+    "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
+    "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
+    "--button-transparent-pressed": "rgba(229, 231, 235, 1)",
+    "--button-neutral-hover": "rgba(243, 244, 246, 1)",
+    "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
+    "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
+    "--bg-base-pressed": "rgba(243, 244, 246, 1)",
+    "--bg-base-hover": "rgba(249, 250, 251, 1)",
+    "--button-transparent": "rgba(255, 255, 255, 0.01)",
  },
 }
@@ -1,5 +1,7 @@
 import { ArrowUpRightOnBox } from "@medusajs/icons"
-import { NavbarLinkProps, SidebarSectionItemsType } from "docs-ui"
+import { NavbarLinkProps, getNavbarItems, mobileSidebarItems } from "docs-ui"
+import { SidebarSectionItemsType } from "types"
+import { siteConfig } from "./site"

 type DocsConfig = {
  mainNav: NavbarLinkProps[]
@@ -7,39 +9,10 @@ type DocsConfig = {
 }

 export const docsConfig: DocsConfig = {
-  mainNav: [
-    {
-      label: "Docs",
-      target: "_blank",
-      rel: "noreferrer",
-      href: `${process.env.NEXT_PUBLIC_DOCS_URL}`,
-    },
-    {
-      label: "User Guide",
-      target: "_blank",
-      rel: "noreferrer",
-      href: `${process.env.NEXT_PUBLIC_DOCS_URL}/user-guide`,
-    },
-    {
-      label: "Store API",
-      target: "_blank",
-      rel: "noreferrer",
-      href: `${process.env.NEXT_PUBLIC_DOCS_URL}/api/store`,
-    },
-    {
-      label: "Admin API",
-      target: "_blank",
-      rel: "noreferrer",
-      href: `${process.env.NEXT_PUBLIC_DOCS_URL}/api/admin`,
-    },
-    {
-      label: "UI",
-      target: "_blank",
-      rel: "noreferrer",
-      href: `${process.env.NEXT_PUBLIC_DOCS_URL}/ui`,
-      activeValuePattern: new RegExp("/ui"),
-    },
-  ],
+  mainNav: getNavbarItems({
+    basePath: siteConfig.baseUrl,
+    activePath: process.env.NEXT_PUBLIC_BASE_PATH || "/ui",
+  }),
  sidebar: {
    top: [
      {
@@ -311,32 +284,6 @@ export const docsConfig: DocsConfig = {
        ],
      },
    ],
-    mobile: [
-      {
-        title: "Docs",
-        path: `${process.env.NEXT_PUBLIC_DOCS_URL}`,
-        isPathHref: true,
-      },
-      {
-        title: "User Guide",
-        path: `${process.env.NEXT_PUBLIC_DOCS_URL}/user-guide`,
-        isPathHref: true,
-      },
-      {
-        title: "Store API",
-        path: `${process.env.NEXT_PUBLIC_DOCS_URL}/api/store`,
-        isPathHref: true,
-      },
-      {
-        title: "Admin API",
-        path: `${process.env.NEXT_PUBLIC_DOCS_URL}/api/admin`,
-        isPathHref: true,
-      },
-      {
-        title: "UI",
-        path: `${process.env.NEXT_PUBLIC_DOCS_URL}/ui`,
-        isPathHref: true,
-      },
-    ],
+    mobile: mobileSidebarItems,
  },
 }
@@ -1,11 +1,22 @@
+import { DocsConfig } from "types"
+
 type SiteConfig = {
  name: string
  url: string
  description: string
-}
+} & DocsConfig
+
+const baseUrl = process.env.NEXT_PUBLIC_DOCS_URL || "http://localhost:3000"

 export const siteConfig: SiteConfig = {
  name: "Medusa UI",
-  url: `${process.env.NEXT_PUBLIC_DOCS_URL}/ui`,
+  baseUrl,
+  url: `${baseUrl}/${process.env.NEXT_PUBLIC_BASE_PATH}`,
  description: "Primitives for building Medusa applications.",
+  // sidebar is defined in docs.tsx
+  sidebar: {
+    top: [],
+    bottom: [],
+    mobile: [],
+  },
 }
@@ -11,7 +11,7 @@ a consistent user interface across the Medusa Admin and other Medusa application
  title="Medusa UI"
  text="Colors, type, icons and components"
  href="https://www.figma.com/community/file/1278648465968635936/Medusa-UI"
-  icon={
+  startIcon={
    <FigmaIcon />
  }
 />
@@ -1,3 +1,5 @@
+import { siteConfig } from "../config/site"
+
 export function absoluteUrl(path = "") {
-  return `${process.env.NEXT_PUBLIC_BASE_URL}${path}`
+  return `${siteConfig.baseUrl}${path}`
 }
@@ -4,7 +4,6 @@ import {
  ColorModeProvider,
  MobileProvider,
  ModalProvider,
-  NavbarProvider,
  AnalyticsProvider,
  ScrollControllerProvider,
 } from "docs-ui"
@@ -23,9 +22,7 @@ const Providers = ({ children }: ProvidersProps) => {
          <ModalProvider>
            <ScrollControllerProvider scrollableSelector="#main">
              <SidebarProvider>
-                <NavbarProvider basePath={process.env.NEXT_PUBLIC_BASE_PATH}>
-                  <SearchProvider>{children}</SearchProvider>
-                </NavbarProvider>
+                <SearchProvider>{children}</SearchProvider>
              </SidebarProvider>
            </ScrollControllerProvider>
          </ModalProvider>
@@ -4,6 +4,7 @@ import {
  AiAssistantCommandIcon,
  AiAssistantProvider,
  SearchProvider as UiSearchProvider,
+  searchFilters,
 } from "docs-ui"
 import { absoluteUrl } from "../lib/absolute-url"

@@ -33,36 +34,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
          },
        ],
        checkInternalPattern: new RegExp(`^${absoluteUrl()}/ui`),
-        filterOptions: [
-          {
-            value: "admin",
-            label: "Admin API",
-          },
-          {
-            value: "store",
-            label: "Store API",
-          },
-          {
-            value: "docs",
-            label: "Docs",
-          },
-          {
-            value: "user-guide",
-            label: "User Guide",
-          },
-          {
-            value: "plugins",
-            label: "Plugins",
-          },
-          {
-            value: "reference",
-            label: "References",
-          },
-          {
-            value: "ui",
-            label: "UI",
-          },
-        ],
+        filterOptions: searchFilters,
      }}
      initialDefaultFilters={["ui"]}
      commands={[
@@ -15,6 +15,7 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
      initialItems={docsConfig.sidebar}
      shouldHandlePathChange={true}
      scrollableElement={scrollableElement}
+      disableActiveTransition={true}
    >
      {children}
    </UiSidebarProvider>