docs: add search to workflows reference (#11054)

* docs: add search to workflows reference

* fix error

www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx

@@ -17,9 +17,35 @@ export const CardDefaultLayout = ({
   children,
   badge,
   rightIcon: RightIconComponent,
+  highlightText = [],
 }: CardProps) => {
   const isExternal = useIsExternalLink({ href })
 
+  const getHighlightedText = (textToHighlight: string) => {
+    if (!highlightText.length) {
+      return textToHighlight
+    }
+
+    const parts = textToHighlight.split(
+      new RegExp(`(${highlightText.join("|")})`, "gi")
+    )
+    return parts.map((part, index) => {
+      const isHighlighted = highlightText.some((highlight) => {
+        return part.toLowerCase() === highlight.toLowerCase()
+      })
+      return isHighlighted ? (
+        <span
+          key={index}
+          className="bg-medusa-tag-blue-bg px-px rounded-s-docs_xxs"
+        >
+          {part}
+        </span>
+      ) : (
+        part
+      )
+    })
+  }
+
   return (
     <div
       className={clsx(
@@ -52,11 +78,13 @@ export const CardDefaultLayout = ({
       >
         {title && (
           <div className="text-small-plus text-medusa-fg-base truncate">
-            {title}
+            {getHighlightedText(title)}
           </div>
         )}
         {text && (
-          <span className="text-small-plus text-medusa-fg-subtle">{text}</span>
+          <span className="text-small-plus text-medusa-fg-subtle">
+            {getHighlightedText(text)}
+          </span>
         )}
         {children}
       </div>

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

@@ -23,6 +23,7 @@ export type CardProps = {
   iconClassName?: string
   children?: React.ReactNode
   badge?: BadgeProps
+  highlightText?: string[]
 }
 
 export const Card = ({ type = "default", ...props }: CardProps) => {

www/packages/docs-ui/src/components/Icons/Book/index.tsx

@@ -1,63 +0,0 @@
-import React from "react"
-import { IconProps } from "@medusajs/icons/dist/types"
-
-export const BookIcon = (props: IconProps) => {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g clipPath="url(#clip0_10569_98393)">
-        <path
-          opacity="0.3"
-          d="M13.5556 1.55566H5.11111V11.3334H13.5556V1.55566Z"
-          fill="currentColor"
-        />
-        <path
-          d="M5.11111 1.55566V11.3334"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M2.44444 12.889V3.33344C2.44444 2.35122 3.24 1.55566 4.22222 1.55566H13.5556V11.3334"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M4.66666 14.4445H4C3.14133 14.4445 2.44444 13.7485 2.44444 12.8889C2.44444 12.0294 3.14133 11.3334 4 11.3334H13.5556C12.9858 12.0836 12.9031 13.5974 13.5556 14.4445H4.66666Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M7.77777 4.66675H10.8889"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M7.77777 7.33337H10.8889"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_10569_98393">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}

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

@@ -1,5 +1,4 @@
 export * from "./AiAssistant"
-export * from "./Book"
 export * from "./CalendarRefresh"
 export * from "./ChefHat"
 export * from "./CircleDottedLine"

www/packages/docs-ui/src/components/Input/Search/index.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { MagnifyingGlass, XMark } from "@medusajs/icons"
+import clsx from "clsx"
+import React from "react"
+import { useKeyboardShortcut } from "../../../hooks"
+import { Kbd } from "../../Kbd"
+
+type SearchInputProps = {
+  onChange: (value: string) => void
+} & Omit<React.ComponentProps<"input">, "onChange">
+
+export const SearchInput = ({
+  value,
+  onChange,
+  className,
+  placeholder = "Search...",
+  ...props
+}: SearchInputProps) => {
+  useKeyboardShortcut({
+    metakey: false,
+    shortcutKeys: ["escape"],
+    action: () => onChange(""),
+    checkEditing: false,
+    preventDefault: true,
+  })
+
+  return (
+    <div className="flex flex-col gap-docs_0.5">
+      <div className="relative">
+        <MagnifyingGlass className="absolute left-docs_0.5 top-[8.5px] bottom-[8.5px] text-medusa-fg-muted" />
+        <input
+          type="text"
+          placeholder={placeholder}
+          className={clsx(
+            "w-full h-docs_2 pl-docs_2 text-compact-small placeholder:text-medusa-fg-muted",
+            "bg-medusa-bg-field text-medusa-fg-base rounded-full",
+            "shadow-borders-base hover:bg-medusa-bg-field-hover",
+            "focus:bg-medusa-bg-field focus:shadow-borders-interactive-with-active focus:outline-none",
+            className
+          )}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          {...props}
+        />
+        {value && (
+          <button
+            className={clsx(
+              "absolute right-docs_0.5 top-[8.5px] bottom-[8.5px] appearance-none",
+              "flex items-center justify-center"
+            )}
+            onClick={() => onChange("")}
+          >
+            <XMark className="text-medusa-fg-muted" />
+          </button>
+        )}
+      </div>
+      <span className="flex gap-docs_0.25 justify-end items-center text-compact-x-small">
+        <Kbd variant="small">esc</Kbd>
+        <span className="text-medusa-fg-muted">Clear Search</span>
+      </span>
+    </div>
+  )
+}

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

@@ -1,9 +1,16 @@
 import React from "react"
 import clsx from "clsx"
 
-export type KbdProps = React.ComponentProps<"kbd">
+export type KbdProps = React.ComponentProps<"kbd"> & {
+  variant?: "default" | "small"
+}
 
-export const Kbd = ({ children, className, ...props }: KbdProps) => {
+export const Kbd = ({
+  children,
+  className,
+  variant = "default",
+  ...props
+}: KbdProps) => {
   return (
     <kbd
       className={clsx(
@@ -12,7 +19,10 @@ export const Kbd = ({ children, className, ...props }: KbdProps) => {
         "py-0 px-docs_0.25",
         "bg-medusa-bg-field",
         "text-medusa-fg-subtle",
-        "text-compact-x-small-plus font-base shadow-none",
+        "font-base shadow-none",
+        variant === "small"
+          ? "text-compact-x-small"
+          : "text-compact-x-small-plus",
         className
       )}
       {...props}

www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx

@@ -2,13 +2,13 @@
 
 import {
   BarsThree,
+  Book,
   QuestionMarkCircle,
   SidebarLeft,
   TimelineVertical,
 } from "@medusajs/icons"
 import React, { useMemo, useRef, useState } from "react"
 import {
-  BookIcon,
   Button,
   getOsShortcut,
   Menu,
@@ -41,7 +41,7 @@ export const MainNavDesktopMenu = () => {
       },
       {
         type: "link",
-        icon: <BookIcon />,
+        icon: <Book />,
         title: "Medusa v1",
         link: "https://docs.medusajs.com/v1",
       },

www/packages/docs-ui/src/components/index.ts

@@ -31,6 +31,7 @@ export * from "./InlineIcon"
 export * from "./InlineThemeImage"
 export * from "./InlineCode"
 export * from "./Input/Text"
+export * from "./Input/Search"
 export * from "./Kbd"
 export * from "./Label"
 export * from "./LearningPath"