docs,api-ref: added search filters

www/api-reference/.env.sample

@@ -1,6 +1,7 @@
 NEXT_PUBLIC_SEGMENT_API_KEY=
 NEXT_PUBLIC_BASE_PATH=
-NEXT_PUBLIC_ALGOLIA_INDEX_NAME=
+NEXT_PUBLIC_DOCS_ALGOLIA_INDEX_NAME=
+NEXT_PUBLIC_API_ALGOLIA_INDEX_NAME=
 NEXT_PUBLIC_ALGOLIA_API_KEY=
 NEXT_PUBLIC_ALGOLIA_APP_ID=
 NEXT_PUBLIC_ENV=

www/api-reference/app/api/[area]/layout.tsx

@@ -10,7 +10,10 @@ import { Roboto_Mono } from "next/font/google"
 import AnalyticsProvider from "@/providers/analytics"
 import NavbarProvider from "@/providers/navbar"
 import ModalProvider from "../../../providers/modal"
+import SearchProvider from "../../../providers/search"
 import { ScrollControllerProvider } from "../../../hooks/scroll-utils"
+import MobileProvider from "../../../providers/mobile"
+import PageLoadingProvider from "../../../providers/page-loading"
 
 export const metadata = {
   title: "Medusa API Reference",
@@ -46,23 +49,29 @@ export default function RootLayout({
         <AnalyticsProvider>
           <ModalProvider>
             <ColorModeProvider>
-              <BaseSpecsProvider>
-                <SidebarProvider>
-                  <NavbarProvider>
-                    <ScrollControllerProvider>
-                      <div className="w-full">
-                        <Navbar />
-                        <div className="max-w-xxl mx-auto flex w-full px-1.5">
-                          <Sidebar />
-                          <main className="lg:w-api-ref-main relative mt-4 w-full flex-1 lg:mt-7">
-                            {children}
-                          </main>
-                        </div>
-                      </div>
-                    </ScrollControllerProvider>
-                  </NavbarProvider>
-                </SidebarProvider>
-              </BaseSpecsProvider>
+              <PageLoadingProvider>
+                <BaseSpecsProvider>
+                  <SidebarProvider>
+                    <NavbarProvider>
+                      <ScrollControllerProvider>
+                        <SearchProvider>
+                          <MobileProvider>
+                            <div className="w-full">
+                              <Navbar />
+                              <div className="max-w-xxl mx-auto flex w-full px-1.5">
+                                <Sidebar />
+                                <main className="lg:w-api-ref-main relative mt-4 w-full flex-1 lg:mt-7">
+                                  {children}
+                                </main>
+                              </div>
+                            </div>
+                          </MobileProvider>
+                        </SearchProvider>
+                      </ScrollControllerProvider>
+                    </NavbarProvider>
+                  </SidebarProvider>
+                </BaseSpecsProvider>
+              </PageLoadingProvider>
             </ColorModeProvider>
           </ModalProvider>
         </AnalyticsProvider>

www/api-reference/app/api/algolia/route.tsx

@@ -15,7 +15,7 @@ export async function GET() {
     process.env.ALGOLIA_WRITE_API_KEY || ""
   )
   const index = algoliaClient.initIndex(
-    process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME || ""
+    process.env.NEXT_PUBLIC_API_ALGOLIA_INDEX_NAME || ""
   )
 
   // retrieve tags and their operations to index them

www/api-reference/components/Badge/index.tsx

@@ -13,6 +13,7 @@ export type BadgeProps = {
     | "blue"
     | "blue-dark"
     | "red"
+    | "neutral"
 } & React.HTMLAttributes<HTMLSpanElement>
 
 const Badge: React.FC<BadgeProps> = ({ className, variant, children }) => {
@@ -38,6 +39,8 @@ const Badge: React.FC<BadgeProps> = ({ className, variant, children }) => {
           "bg-medusa-tag-blue-bg-dark text-medusa-tag-blue-text-dark border-medusa-tag-blue-border-dark",
         variant === "red" &&
           "bg-medusa-tag-red-bg dark:bg-medusa-tag-red-bg-dark text-medusa-tag-red-text dark:text-medusa-tag-red-text-dark border-medusa-tag-red-border dark:border-medusa-tag-red-border-dark",
+        variant === "neutral" &&
+          "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
         "badge",
         className
       )}

www/api-reference/components/Bordered/index.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import clsx from "clsx"
+
+type BorderedProps = {
+  wrapperClassName?: string
+} & React.HTMLAttributes<HTMLSpanElement>
+
+const Bordered: React.FC<BorderedProps> = ({ wrapperClassName, children }) => {
+  return (
+    <span
+      className={clsx(
+        "border-medusa-border-strong dark:border-medusa-border-strong-dark bg-docs-bg",
+        "dark:bg-docs-bg-dark mr-1 inline-flex w-fit items-center justify-center rounded border border-solid p-[3px]",
+        "no-zoom-img",
+        wrapperClassName
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export default Bordered

www/api-reference/components/BorderedIcon/index.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import clsx from "clsx"
+import Bordered from "../Bordered/index"
+import IconProps from "../Icons/types"
+import { useColorMode } from "../../providers/color-mode"
+import Image from "next/image"
+
+type BorderedIconProp = {
+  icon?: {
+    light: string
+    dark?: string
+  }
+  IconComponent?: React.FC<IconProps>
+  wrapperClassName?: string
+  iconWrapperClassName?: string
+  iconClassName?: string
+  iconColorClassName?: string
+} & React.HTMLAttributes<HTMLSpanElement>
+
+const BorderedIcon: React.FC<BorderedIconProp> = ({
+  icon = null,
+  IconComponent = null,
+  wrapperClassName,
+  iconWrapperClassName,
+  iconClassName,
+  iconColorClassName = "",
+}) => {
+  const { colorMode } = useColorMode()
+
+  return (
+    <Bordered wrapperClassName={wrapperClassName}>
+      <span
+        className={clsx(
+          "rounded-xs p-0.125 bg-medusa-bg-component dark:bg-medusa-bg-component-dark inline-flex items-center justify-center",
+          iconWrapperClassName
+        )}
+      >
+        {!IconComponent && (
+          <Image
+            src={(colorMode === "light" ? icon?.light : icon?.dark) || ""}
+            className={clsx(iconClassName, "bordered-icon")}
+            alt=""
+          />
+        )}
+        {IconComponent && (
+          <IconComponent
+            className={clsx(iconClassName, "bordered-icon")}
+            iconColorClassName={iconColorClassName}
+          />
+        )}
+      </span>
+    </Bordered>
+  )
+}
+
+export default BorderedIcon

www/api-reference/components/Button/index.tsx

@@ -3,8 +3,8 @@ import clsx from "clsx"
 export type ButtonProps = {
   isSelected?: boolean
   disabled?: boolean
-  variant?: "primary" | "secondary"
-  darkVariant?: "primary" | "secondary"
+  variant?: "primary" | "secondary" | "clear"
+  darkVariant?: "primary" | "secondary" | "clear"
 } & React.HTMLAttributes<HTMLButtonElement>
 
 const Button = ({
@@ -19,8 +19,10 @@ const Button = ({
       className={clsx(
         variant === "primary" && "btn-primary",
         variant === "secondary" && "btn-secondary",
+        variant === "clear" && "btn-clear",
         darkVariant && darkVariant === "primary" && "dark:btn-primary",
         darkVariant && darkVariant === "secondary" && "dark:btn-secondary",
+        darkVariant && darkVariant === "clear" && "dark:btn-clear",
         className
       )}
       {...props}

www/api-reference/components/Icons/ArrowDownLeftMini/index.tsx

@@ -0,0 +1,37 @@
+import type IconProps from "../types"
+
+const IconArrowDownLeftMini = ({ iconColorClassName, ...props }: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8.00002 8.66675L4.66669 12.0001L8.00002 15.3334"
+        className={
+          iconColorClassName ||
+          "stroke-medusa-fg-subtle dark:stroke-medusa-fg-subtle-dark"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.3334 4.66675V9.33341C15.3334 10.0407 15.0524 10.7189 14.5523 11.219C14.0522 11.7191 13.3739 12.0001 12.6667 12.0001H4.66669"
+        className={
+          iconColorClassName ||
+          "stroke-medusa-fg-subtle dark:stroke-medusa-fg-subtle-dark"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default IconArrowDownLeftMini

www/api-reference/components/Icons/CheckMini/index.tsx

@@ -0,0 +1,32 @@
+import type IconProps from "../types"
+
+const IconCheckMini = ({
+  iconColorClassName,
+  containerClassName,
+  ...props
+}: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={containerClassName}
+      {...props}
+    >
+      <path
+        d="M5.83334 10.4167L9.16668 13.75L14.1667 6.25"
+        className={
+          iconColorClassName ||
+          "stroke-medusa-fg-subtle dark:stroke-medusa-fg-subtle-dark"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default IconCheckMini

www/api-reference/components/Icons/ChevronUpDown/index.tsx

@@ -0,0 +1,32 @@
+import type IconProps from "../types"
+
+const IconChevronUpDown = ({
+  iconColorClassName,
+  containerClassName,
+  ...props
+}: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={containerClassName}
+      {...props}
+    >
+      <path
+        d="M6 12.75L9.75 16.5L13.5 12.75M6 6.75L9.75 3L13.5 6.75"
+        className={
+          iconColorClassName ||
+          "stroke-medusa-fg-subtle dark:stroke-medusa-fg-subtle-dark"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default IconChevronUpDown

www/api-reference/components/Icons/DocumentTextSolid/index.tsx

@@ -0,0 +1,33 @@
+import IconProps from "../types"
+
+const IconDocumentTextSolid = ({ iconColorClassName, ...props }: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.91521 1.625C4.08888 1.625 3.41968 2.295 3.41968 3.12054V16.8795C3.41968 17.705 4.08968 18.375 4.91521 18.375H15.0849C15.9104 18.375 16.5804 17.705 16.5804 16.8795V10.5982C16.5804 9.80493 16.2653 9.04414 15.7043 8.48321C15.1434 7.92227 14.3826 7.60714 13.5893 7.60714H12.0938C11.6971 7.60714 11.3167 7.44958 11.0363 7.16911C10.7558 6.88864 10.5982 6.50825 10.5982 6.11161V4.61607C10.5982 3.82279 10.2831 3.062 9.72218 2.50106C9.16125 1.94013 8.40046 1.625 7.60718 1.625H4.91521ZM6.41075 12.3929C6.41075 12.2342 6.47378 12.082 6.58596 11.9699C6.69815 11.8577 6.85031 11.7946 7.00896 11.7946H12.9911C13.1498 11.7946 13.3019 11.8577 13.4141 11.9699C13.5263 12.082 13.5893 12.2342 13.5893 12.3929C13.5893 12.5515 13.5263 12.7037 13.4141 12.8159C13.3019 12.928 13.1498 12.9911 12.9911 12.9911H7.00896C6.85031 12.9911 6.69815 12.928 6.58596 12.8159C6.47378 12.7037 6.41075 12.5515 6.41075 12.3929ZM7.00896 14.1875C6.85031 14.1875 6.69815 14.2505 6.58596 14.3627C6.47378 14.4749 6.41075 14.6271 6.41075 14.7857C6.41075 14.9444 6.47378 15.0965 6.58596 15.2087C6.69815 15.3209 6.85031 15.3839 7.00896 15.3839H10C10.1587 15.3839 10.3108 15.3209 10.423 15.2087C10.5352 15.0965 10.5982 14.9444 10.5982 14.7857C10.5982 14.6271 10.5352 14.4749 10.423 14.3627C10.3108 14.2505 10.1587 14.1875 10 14.1875H7.00896Z"
+        className={
+          iconColorClassName ||
+          "fill-medusa-fg-subtle dark:fill-medusa-fg-subtle-dark"
+        }
+      />
+      <path
+        d="M10.7745 1.8772C11.4338 2.6373 11.7961 3.61006 11.7947 4.61622V6.11176C11.7947 6.27686 11.9287 6.41086 12.0938 6.41086H13.5893C14.5955 6.40947 15.5683 6.77177 16.3284 7.43102C15.9774 6.09637 15.2783 4.87888 14.3025 3.90306C13.3267 2.92724 12.1092 2.22812 10.7745 1.8772Z"
+        className={
+          iconColorClassName ||
+          "fill-medusa-fg-subtle dark:fill-medusa-fg-subtle-dark"
+        }
+      />
+    </svg>
+  )
+}
+
+export default IconDocumentTextSolid

www/api-reference/components/Icons/EllipseMiniSolid/index.tsx

@@ -0,0 +1,31 @@
+import type IconProps from "../types"
+
+const IconEllipseMiniSolid = ({
+  iconColorClassName,
+  containerClassName,
+  ...props
+}: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={containerClassName}
+      {...props}
+    >
+      <circle
+        cx="10"
+        cy="10"
+        r="2"
+        className={
+          iconColorClassName ||
+          "fill-medusa-fg-subtle dark:fill-medusa-fg-subtle-dark"
+        }
+      />
+    </svg>
+  )
+}
+
+export default IconEllipseMiniSolid

www/api-reference/components/Icons/ExclamationCircleSolid/index.tsx

@@ -0,0 +1,29 @@
+import IconProps from "../types"
+
+const IconExclamationCircleSolid = ({
+  iconColorClassName,
+  ...props
+}: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z"
+        className={
+          iconColorClassName ||
+          "fill-medusa-fg-subtle dark:fill-medusa-fg-subtle-dark"
+        }
+      />
+    </svg>
+  )
+}
+
+export default IconExclamationCircleSolid