@acmekit/docs-ui 2.13.41

package/src/components/MainNav/MobileMenu/SubMenu/index.tsx

@@ -0,0 +1,77 @@
+
+import clsx from "clsx"
+import { Link } from "react-router-dom"
+import React, { useMemo } from "react"
+import { MenuItem, MenuItemLink, MenuItemSubMenu } from "../../../../types"
+import { SelectedMenu } from ".."
+import { TriangleRightMini } from "@acmekit/icons"
+
+type MainNavMobileSubMenuProps = {
+  menu: MenuItem[]
+  title: string
+  setSelectedMenus: React.Dispatch<React.SetStateAction<SelectedMenu>>
+  onOpenLink?: () => void
+}
+
+export const MainNavMobileSubMenu = ({
+  menu,
+  title,
+  setSelectedMenus,
+  onOpenLink,
+}: MainNavMobileSubMenuProps) => {
+  const filteredItems: (MenuItemLink | MenuItemSubMenu)[] = useMemo(() => {
+    return menu.filter(
+      (item) => item.type === "link" || item.type === "sub-menu"
+    ) as (MenuItemLink | MenuItemSubMenu)[]
+  }, [menu])
+  return (
+    <div className="flex flex-col gap-[23px] max-h-[90%]">
+      <span
+        className="text-compact-small-plus text-acmekit-fg-muted uppercase"
+        data-testid="menu-title"
+      >
+        {title}
+      </span>
+      <ul className="flex flex-col gap-[18px] max-h-full overflow-auto">
+        {filteredItems.map((item, index) => (
+          <li
+            key={index}
+            className={clsx(
+              "text-h1 text-acmekit-fg-base cursor-pointer",
+              "flex justify-between gap-docs_1"
+            )}
+          >
+            {item.type === "link" && (
+              <Link
+                to={item.link}
+                className="block w-full"
+                onClick={() => onOpenLink?.()}
+                data-testid="link-item"
+              >
+                {item.title}
+              </Link>
+            )}
+            {item.type === "sub-menu" && (
+              <div
+                className="w-full flex justify-between gap-docs_1"
+                onClick={() =>
+                  setSelectedMenus((prev) => [
+                    ...prev,
+                    {
+                      title: item.title,
+                      menu: item.items,
+                    },
+                  ])
+                }
+                data-testid="sub-menu-item"
+              >
+                <span>{item.title}</span>
+                <TriangleRightMini />
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/components/MainNav/MobileMenu/index.tsx

@@ -0,0 +1,103 @@
+
+import React, { useRef, useState } from "react"
+import { Button } from "../../Button"
+import { ArrowUturnLeft, BarsThree, XMark } from "@acmekit/icons"
+import clsx from "clsx"
+import { MenuItem } from "../../../types"
+// @ts-expect-error can't install the types package because it doesn't support React v19
+import { CSSTransition, SwitchTransition } from "react-transition-group"
+import { MainNavMobileMainMenu } from "./Main"
+import { MainNavMobileSubMenu } from "./SubMenu"
+
+export type SelectedMenu = {
+  title: string
+  menu: MenuItem[]
+}[]
+
+export const MainNavMobileMenu = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedMenus, setSelectedMenus] = useState<SelectedMenu>([])
+  const ref = useRef(null)
+
+  const handleOpenLink = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="flex lg:hidden justify-center items-center">
+      <Button
+        variant="transparent"
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="text-acmekit-fg-subtle !p-[6.5px]"
+        data-testid="menu-button"
+      >
+        {!isOpen && <BarsThree />}
+        {isOpen && <XMark />}
+      </Button>
+      <div
+        className={clsx(
+          "flex items-center justify-center fixed w-full h-[calc(100vh-52px)]",
+          "top-[52px] transition-[left] bg-acmekit-bg-subtle z-50",
+          !isOpen && "-left-full",
+          isOpen && "left-0"
+        )}
+        data-testid="menu-panel"
+      >
+        <SwitchTransition>
+          <CSSTransition
+            key={
+              !selectedMenus.length
+                ? "main"
+                : selectedMenus[selectedMenus.length - 1].title
+            }
+            classNames={{
+              enter: "animate-fadeInLeft animate-fast",
+              exit: "animate-fadeOutRight animate-fast",
+            }}
+            nodeRef={ref}
+            timeout={250}
+          >
+            <div
+              ref={ref}
+              className="w-full px-docs_1.5 h-3/4 flex flex-col justify-center"
+            >
+              {selectedMenus.length === 0 && (
+                <MainNavMobileMainMenu
+                  setSelectedMenus={setSelectedMenus}
+                  onOpenLink={handleOpenLink}
+                />
+              )}
+              {selectedMenus.length > 0 && (
+                <>
+                  <div
+                    className={clsx(
+                      "flex items-center gap-docs_0.5",
+                      "text-acmekit-fg-base my-[14px]",
+                      "cursor-pointer"
+                    )}
+                    tabIndex={-1}
+                    onClick={() =>
+                      setSelectedMenus((prev) => {
+                        const temp = [...prev]
+                        temp.pop()
+                        return temp
+                      })
+                    }
+                  >
+                    <ArrowUturnLeft />
+                    <span className="text-h1">Back</span>
+                  </div>
+                  <MainNavMobileSubMenu
+                    {...selectedMenus[selectedMenus.length - 1]}
+                    setSelectedMenus={setSelectedMenus}
+                    onOpenLink={handleOpenLink}
+                  />
+                </>
+              )}
+            </div>
+          </CSSTransition>
+        </SwitchTransition>
+      </div>
+    </div>
+  )
+}

package/src/components/MainNav/Version/index.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { useSiteConfig } from "../../../providers/SiteConfig"
+import { Tooltip } from "../../Tooltip"
+import clsx from "clsx"
+
+export const MainNavVersion = () => {
+  const {
+    config: { version },
+  } = useSiteConfig()
+
+  if (!version) {
+    return null
+  }
+
+  return (
+    <a
+      href={version.releaseUrl}
+      target="_blank"
+      className={clsx(
+        version.hide && "hidden",
+        "px-docs_0.5 py-docs_0.25 hover:bg-acmekit-button-transparent-hover rounded-docs_sm"
+      )}
+    >
+      <Tooltip html="View the release notes<br/>on GitHub">
+        <span className="relative text-compact-small-plus block">
+          <span className="flex justify-center items-center">
+            v{version.number}
+          </span>
+        </span>
+      </Tooltip>
+    </a>
+  )
+}

package/src/components/MainNav/index.tsx

@@ -0,0 +1,153 @@
+
+import clsx from "clsx"
+import React from "react"
+import { MagnifyingGlass } from "@acmekit/icons"
+import { BorderedIcon } from "../../components/BorderedIcon"
+import { Button } from "../../components/Button"
+import { GITHUB_ISSUES_LINK } from "../../constants"
+import { useLayout } from "../../providers/Layout"
+import { useSearch } from "../../providers/Search"
+import { useSidebar } from "../../providers/Sidebar"
+import { useSiteConfig } from "../../providers/SiteConfig"
+import { getOsShortcut } from "../../utils/os-browser-utils"
+import { MainNavItems } from "./Items"
+import { MainNavDesktopMenu } from "./DesktopMenu"
+import { SidebarLeftIcon } from "../Icons/SidebarLeft"
+import { MainNavMobileMenu } from "./MobileMenu"
+import { Link } from "react-router-dom"
+import { MainNavVersion } from "./Version"
+import { MainNavItemDropdown } from "./Items/Dropdown"
+
+type MainNavProps = {
+  className?: string
+  itemsClassName?: string
+}
+
+export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
+  const { setMobileSidebarOpen, isSidebarShown } = useSidebar()
+  const { config } = useSiteConfig()
+  const { showCollapsedNavbar } = useLayout()
+  const { setIsOpen: setSearchOpen } = useSearch()
+
+  return (
+    <div
+      className={clsx(
+        "w-full z-20 sticky top-0 bg-acmekit-bg-base",
+        "border-b border-acmekit-border-base",
+        className
+      )}
+      data-testid="main-nav"
+    >
+      <div
+        className={clsx(
+          "flex justify-between items-center px-docs_1 w-full gap-docs_1",
+          showCollapsedNavbar && "border-b border-acmekit-border-base"
+        )}
+        data-testid="main-nav-content"
+      >
+        <div className="flex items-center gap-[10px]">
+          {isSidebarShown && (
+            <Button
+              className="lg:hidden my-docs_0.75 !p-[6.5px]"
+              variant="transparent-clear"
+              onClick={() => setMobileSidebarOpen(true)}
+              data-testid="mobile-sidebar-button"
+            >
+              <SidebarLeftIcon />
+            </Button>
+          )}
+          <Link
+            to={config.baseUrl || "/"}
+            className="flex items-center gap-docs_0.5 no-underline"
+            data-testid="logo-link"
+          >
+            {config.logo && (
+              <BorderedIcon
+                icon={config.logo}
+                iconWrapperClassName="my-[14px]"
+                wrapperClassName="w-[20px] h-[20px]"
+                iconWidth={20}
+                iconHeight={20}
+                data-testid="logo-icon"
+              />
+            )}
+            <span className="text-compact-medium-plus text-acmekit-fg-base whitespace-nowrap">
+              {config.project?.title || "Docs"}
+            </span>
+          </Link>
+        </div>
+        {!showCollapsedNavbar && (
+          <MainNavItems className={clsx("flex-grow", itemsClassName)} />
+        )}
+        <div
+          className={clsx(
+            "flex items-center my-docs_0.75",
+            showCollapsedNavbar && "flex-grow justify-between"
+          )}
+          data-testid="main-nav-actions"
+        >
+          <div className="lg:flex items-center gap-[6px] text-acmekit-fg-subtle hidden">
+            <MainNavVersion />
+            <MainNavItemDropdown
+              item={{
+                type: "dropdown",
+                title: "Help",
+                children: [
+                  {
+                    type: "link",
+                    title: "Troubleshooting",
+                    link: "https://docs.acmekit.com/resources/troubleshooting",
+                  },
+                  {
+                    type: "link",
+                    title: "Report Issue",
+                    link: GITHUB_ISSUES_LINK,
+                  },
+                  {
+                    type: "link",
+                    title: "Discord Community",
+                    link: "https://discord.gg/acmekit",
+                  },
+                  {
+                    type: "divider",
+                  },
+                  {
+                    type: "link",
+                    title: "Contact Sales",
+                    link: "https://acmekit.com/contact/",
+                  },
+                ],
+              }}
+              isActive={false}
+              className="text-acmekit-fg-subtle hover:bg-acmekit-button-transparent-hover rounded-docs_sm px-docs_0.5"
+              wrapperClassName="z-10"
+            />
+          </div>
+          <div className="flex items-center gap-[6px]">
+            <Button
+              variant="transparent"
+              onClick={() => setSearchOpen(true)}
+              className="!p-[6.5px] flex items-center gap-docs_0.5"
+              data-testid="search-button"
+            >
+              <MagnifyingGlass className="text-acmekit-fg-subtle" />
+              <span className="text-compact-x-small text-acmekit-fg-muted hidden lg:inline">
+                {getOsShortcut()}K
+              </span>
+            </Button>
+            <MainNavDesktopMenu />
+            <MainNavMobileMenu />
+          </div>
+        </div>
+      </div>
+      {showCollapsedNavbar && (
+        <div
+          className={clsx("border-b border-acmekit-border-base px-docs_1")}
+          data-testid="collapsed-nav-items"
+        >
+          <MainNavItems className={clsx("flex-wrap", itemsClassName)} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/MarkdownContent/index.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import ReactMarkdown, {
+  Options as ReactMarkdownOptions,
+  Components,
+} from "react-markdown"
+import { MDXComponents } from "../../components/MDXComponents"
+import clsx from "clsx"
+
+export type MarkdownContentProps = ReactMarkdownOptions & {
+  components?: Partial<Components> | null | undefined
+}
+
+export const MarkdownContent = ({
+  children,
+  components,
+  ...props
+}: MarkdownContentProps) => {
+  return (
+    <ReactMarkdown
+      components={
+        (components || {
+          ...MDXComponents,
+          pre: ({
+            className,
+            children,
+            ...props
+          }: React.HTMLAttributes<HTMLPreElement>) => {
+            return (
+              <pre className={clsx("p-0 bg-transparent", className)} {...props}>
+                {children}
+              </pre>
+            )
+          },
+        }) as any
+      }
+      {...props}
+    >
+      {children}
+    </ReactMarkdown>
+  )
+}

package/src/components/Menu/Action/index.tsx

@@ -0,0 +1,43 @@
+
+import clsx from "clsx"
+import React from "react"
+import { MenuItem, MenuItemAction } from "../../../types"
+
+export type MenuActionProps = {
+  item: MenuItemAction
+  onClick?: (item: MenuItem) => void
+}
+
+export const MenuAction = ({ item, onClick }: MenuActionProps) => {
+  return (
+    <div className="px-docs_0.25">
+      <span
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-acmekit-bg-component-hover",
+          "text-acmekit-fg-base cursor-pointer"
+        )}
+        tabIndex={-1}
+        onClick={() => {
+          item.action()
+          onClick?.(item)
+        }}
+        data-testid="menu-action"
+      >
+        <span className="text-acmekit-fg-subtle mt-[2.5px] block">
+          {item.icon}
+        </span>
+        <span className="text-compact-small flex-1">{item.title}</span>
+        {item.shortcut && (
+          <span
+            className="text-acmekit-fg-subtle text-compact-small"
+            data-testid="menu-action-shortcut"
+          >
+            {item.shortcut}
+          </span>
+        )}
+      </span>
+    </div>
+  )
+}

package/src/components/Menu/Divider/index.tsx

@@ -0,0 +1,35 @@
+
+import React from "react"
+
+export const MenuDivider = () => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 205 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="197"
+        height="8"
+        transform="translate(4)"
+        fill="var(--docs-bg-component)"
+      />
+      <rect
+        x="-4"
+        y="3"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-top)"
+      />
+      <rect
+        x="-4"
+        y="4"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-bot)"
+      />
+    </svg>
+  )
+}

package/src/components/Menu/Dropdown/index.tsx

@@ -0,0 +1,78 @@
+
+import React from "react"
+import { useRef, useState } from "react"
+import { Button } from "../../../components/Button"
+import { Menu } from "../../../components/Menu"
+import { useClickOutside } from "../../../hooks/use-click-outside"
+import { MenuItem } from "../../../types"
+import clsx from "clsx"
+
+type DropdownMenuProps = {
+  dropdownButtonContent: React.ReactNode
+  dropdownButtonClassName?: string
+  menuComponent?: React.ReactNode
+  menuItems?: MenuItem[]
+  menuClassName?: string
+  className?: string
+  open?: boolean
+  setOpen?: (open: boolean) => void
+}
+
+export const DropdownMenu = ({
+  dropdownButtonContent,
+  dropdownButtonClassName,
+  menuComponent,
+  menuItems,
+  menuClassName,
+  className,
+  open: externalOpen = false,
+  setOpen: externalSetOpen,
+}: DropdownMenuProps) => {
+  const [open, setOpen] = useState(externalOpen)
+  const ref = useRef<HTMLButtonElement | null>(null)
+  function changeOpenState(newOpenState: boolean) {
+    if (externalSetOpen) {
+      externalSetOpen(newOpenState)
+    } else {
+      setOpen(newOpenState)
+    }
+  }
+  useClickOutside({
+    elmRef: ref,
+    onClickOutside: () => {
+      changeOpenState(false)
+    },
+  })
+
+  if (!menuComponent && !menuItems) {
+    return null
+  }
+
+  return (
+    <div className={clsx("relative", className)} data-testid="dropdown-wrapper">
+      <Button
+        variant="transparent"
+        onClick={() => changeOpenState(!open)}
+        className={clsx(
+          "!p-[6px] text-acmekit-fg-subtle",
+          dropdownButtonClassName
+        )}
+        buttonRef={ref}
+        data-testid="dropdown-button"
+      >
+        {dropdownButtonContent}
+      </Button>
+      {menuComponent}
+      {!menuComponent && menuItems && (
+        <Menu
+          items={menuItems}
+          className={clsx(
+            "absolute right-0 top-[calc(100%+8px)] w-max",
+            !open && "hidden",
+            menuClassName
+          )}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/Menu/Item/index.tsx

@@ -0,0 +1,36 @@
+
+import clsx from "clsx"
+import { Link } from "react-router-dom"
+import React from "react"
+import { MenuItem as MenuItemType, MenuItemLink } from "../../../types"
+
+export type MenuItemProps = {
+  item: MenuItemLink
+  onClick?: (item: MenuItemType) => void
+}
+
+export const MenuItem = ({ item, onClick }: MenuItemProps) => {
+  return (
+    <div className="px-docs_0.25">
+      <Link
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-acmekit-bg-component-hover",
+          "text-acmekit-fg-base"
+        )}
+        to={item.link}
+        onClick={() => onClick?.(item)}
+        target={item.openInNewTab ? "_blank" : undefined}
+        rel={item.openInNewTab ? "noopener noreferrer" : undefined}
+      >
+        {item.icon && (
+          <span className="text-acmekit-fg-subtle mt-[2.5px] block">
+            {item.icon}
+          </span>
+        )}
+        <span className="text-compact-small">{item.title}</span>
+      </Link>
+    </div>
+  )
+}

package/src/components/Menu/SubMenu/index.tsx

@@ -0,0 +1,47 @@
+
+import React, { useState } from "react"
+import { Menu, MenuProps } from ".."
+import clsx from "clsx"
+import { MenuItemSubMenu } from "../../../types"
+import { TriangleRightMini } from "@acmekit/icons"
+import { Link } from "react-router-dom"
+
+type MenuSubMenuProps = Pick<MenuProps, "itemsOnClick"> & {
+  item: MenuItemSubMenu
+}
+
+export const MenuSubMenu = ({ item, itemsOnClick }: MenuSubMenuProps) => {
+  const [open, setOpen] = useState(false)
+
+  const Component = item.link ? Link : "span"
+
+  return (
+    <div
+      className="px-docs_0.25 relative"
+      onMouseOver={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      data-testid="sub-menu-wrapper"
+    >
+      <Component
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-acmekit-bg-component-hover",
+          "text-acmekit-fg-base justify-between"
+        )}
+        onClick={() => itemsOnClick?.(item)}
+        {...(item.link ? { to: item.link } : {})}
+      >
+        <span className="text-compact-small">{item.title}</span>
+        <span className="text-acmekit-fg-subtle mt-[2.5px] block">
+          <TriangleRightMini />
+        </span>
+      </Component>
+      {open && (
+        <div className="absolute top-0 left-[calc(100%-8px)] w-max">
+          <Menu itemsOnClick={itemsOnClick} items={item.items} />
+        </div>
+      )}
+    </div>
+  )
+}