@acmekit/docs-ui 2.13.41

package/src/components/MDXComponents/index.tsx

@@ -0,0 +1,209 @@
+import React from "react"
+import type { MDXComponents as MDXComponentsType } from "mdx/types"
+import { CodeMdx } from "../../components/CodeMdx"
+import { Kbd } from "../../components/Kbd"
+import { Note } from "../../components/Note"
+import { Card } from "../../components/Card"
+import { CardList } from "../../components/CardList"
+import { ZoomImg } from "../../components/ZoomImg"
+import { H1 } from "../../components/Heading/H1"
+import { H2 } from "../../components/Heading/H2"
+import { H3 } from "../../components/Heading/H3"
+import { H4 } from "../../components/Heading/H4"
+import { Link } from "../../components/Link"
+import { Table } from "../../components/Table"
+import clsx from "clsx"
+import { Text } from "@acmekit/ui"
+import { PlusMini } from "@acmekit/icons"
+
+export const MDXComponents: MDXComponentsType = {
+  table: Table,
+  thead: Table.Header,
+  tbody: Table.Body,
+  tr: Table.Row,
+  th: Table.HeaderCell,
+  td: Table.Cell,
+  code: CodeMdx,
+  kbd: Kbd,
+  Kbd,
+  Note,
+  details: ({
+    children,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDetailsElement>) => {
+    return (
+      <details
+        {...props}
+        className={clsx(
+          "border-acmekit-border-base border-y border-solid border-x-0",
+          "overflow-hidden [&>summary]:relative",
+          "[&[open]>summary>.docs-expand-icon]:rotate-45",
+          "my-docs_1",
+          className
+        )}
+      >
+        {children}
+      </details>
+    )
+  },
+  Details: ({
+    children,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDetailsElement>) => {
+    return (
+      <details
+        {...(props as React.HTMLAttributes<HTMLDetailsElement>)}
+        className={clsx(
+          "border-acmekit-border-base border-y border-solid border-x-0",
+          "overflow-hidden [&>summary]:relative",
+          "[&[open]>summary>.docs-expand-icon]:rotate-45",
+          "my-docs_1",
+          className
+        )}
+      >
+        {children}
+      </details>
+    )
+  },
+  summary: ({
+    children,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLElement>) => {
+    return (
+      <summary
+        className={clsx(
+          "py-docs_0.75 flex items-center justify-between",
+          "cursor-pointer no-marker",
+          "text-compact-medium-plus text-acmekit-fg-base",
+          className
+        )}
+        {...props}
+      >
+        <span>{children}</span>
+        <PlusMini className="docs-expand-icon transition-transform text-acmekit-fg-muted" />
+      </summary>
+    )
+  },
+  Summary: ({
+    children,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLElement>) => {
+    return (
+      <summary
+        className={clsx(
+          "py-docs_0.75 flex items-center justify-between",
+          "cursor-pointer no-marker",
+          "text-compact-medium-plus text-acmekit-fg-base",
+          className
+        )}
+        {...props}
+      >
+        <span>{children}</span>
+        <PlusMini className="docs-expand-icon transition-transform text-acmekit-fg-muted" />
+      </summary>
+    )
+  },
+  Card,
+  CardList: ({ className, ...props }: React.ComponentProps<typeof CardList>) => {
+    return <CardList {...props} className={clsx("mt-docs_1", className)} />
+  },
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+    return (
+      <p
+        className={clsx(
+          "text-acmekit-fg-base [&:not(:last-child)]:mb-docs_1.5 last:!mb-0",
+          className
+        )}
+        {...props}
+      />
+    )
+  },
+  ul: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLUListElement>) => {
+    return (
+      <ul
+        {...props}
+        className={clsx(
+          "list-disc px-docs_1 mb-docs_1.5 [&_ul]:mb-0 [&_ol]:mb-0 [&_p]:!mb-0",
+          className
+        )}
+      >
+        {children}
+      </ul>
+    )
+  },
+  ol: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLOListElement>) => {
+    return (
+      <ol
+        {...props}
+        className={clsx(
+          "list-decimal px-docs_1 mb-docs_1.5 [&_ul]:mb-0 [&_ol]:mb-0 [&_p]:!mb-0",
+          className
+        )}
+      >
+        {children}
+      </ol>
+    )
+  },
+  li: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLElement>) => {
+    return (
+      <li
+        className={clsx(
+          "text-acmekit-fg-base [&:not(:last-child)]:mb-docs_0.5",
+          "[&_ol]:mt-docs_0.5 [&_ul]:mt-docs_0.5",
+          className
+        )}
+        {...props}
+      >
+        <Text as="span">{children}</Text>
+      </li>
+    )
+  },
+  hr: ({ className, ...props }: React.HTMLAttributes<HTMLHRElement>) => {
+    return (
+      <hr
+        className={clsx(
+          "my-docs_2 h-[1px] w-full border-0 bg-acmekit-border-base",
+          className
+        )}
+        {...props}
+      />
+    )
+  },
+  img: (
+    props: React.DetailedHTMLProps<
+      React.ImgHTMLAttributes<HTMLImageElement>,
+      HTMLImageElement
+    >
+  ) => {
+    // omit key to resolve errors
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { key, ...rest } = props
+    return <ZoomImg {...rest} />
+  },
+  a: (props) => <Link {...props} variant="content" />,
+  strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => {
+    return <strong className={clsx("txt-medium-plus", className)} {...props} />
+  },
+}
+
+export const Hr = MDXComponents["hr"] as () => React.JSX.Element

package/src/components/MainNav/DesktopMenu/ThemeMenu/index.tsx

@@ -0,0 +1,76 @@
+
+import React from "react"
+import { useColorMode } from "../../../../providers/ColorMode"
+import clsx from "clsx"
+import { EllipseMiniSolid } from "@acmekit/icons"
+
+export const MainNavThemeMenu = () => {
+  const { colorMode, setColorMode } = useColorMode()
+
+  return (
+    <>
+      <div
+        className={clsx(
+          "flex items-center gap-docs_0.5",
+          "py-docs_0.25 px-docs_0.5",
+          "rounded-docs_xs text-compact-x-small-plus",
+          "text-acmekit-fg-subtle"
+        )}
+      >
+        Theme
+      </div>
+      <div className="px-docs_0.25">
+        <div
+          className={clsx(
+            "flex items-center gap-docs_0.5",
+            "py-docs_0.25 px-docs_0.5 cursor-pointer",
+            "rounded-docs_xs text-acmekit-fg-base",
+            "hover:bg-acmekit-bg-component-hover"
+          )}
+          tabIndex={-1}
+          onClick={() => setColorMode("light")}
+          data-testid="light-option"
+        >
+          <EllipseMiniSolid
+            className={clsx(colorMode !== "light" && "invisible")}
+            data-testid="ellipse-icon"
+          />
+          <span
+            className={clsx(
+              colorMode !== "light" && "text-compact-small",
+              colorMode === "light" && "text-compact-small-plus"
+            )}
+          >
+            Light
+          </span>
+        </div>
+      </div>
+      <div className="px-docs_0.25">
+        <div
+          className={clsx(
+            "flex items-center gap-docs_0.5",
+            "py-docs_0.25 px-docs_0.5 cursor-pointer",
+            "rounded-docs_xs text-acmekit-fg-base",
+            "hover:bg-acmekit-bg-component-hover"
+          )}
+          tabIndex={-1}
+          onClick={() => setColorMode("dark")}
+          data-testid="dark-option"
+        >
+          <EllipseMiniSolid
+            className={clsx(colorMode !== "dark" && "invisible")}
+            data-testid="ellipse-icon"
+          />
+          <span
+            className={clsx(
+              colorMode !== "dark" && "text-compact-small",
+              colorMode === "dark" && "text-compact-small-plus"
+            )}
+          >
+            Dark
+          </span>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,100 @@
+
+import { BarsThree, Book, SidebarLeft, TimelineVertical } from "@acmekit/icons"
+import React, { useMemo, useRef, useState } from "react"
+import { Button } from "../../../components/Button"
+import { Menu } from "../../../components/Menu"
+import { useSidebar } from "../../../providers/Sidebar"
+import { useClickOutside } from "../../../hooks/use-click-outside"
+import { getOsShortcut } from "../../../utils/os-browser-utils"
+import clsx from "clsx"
+import { HouseIcon } from "../../Icons/House"
+import { MainNavThemeMenu } from "./ThemeMenu"
+import { MenuItem } from "../../../types"
+
+export const MainNavDesktopMenu = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { setDesktopSidebarOpen, isSidebarShown, desktopSidebarOpen } =
+    useSidebar()
+  const ref = useRef<HTMLDivElement>(null)
+
+  useClickOutside({
+    elmRef: ref,
+    onClickOutside: () => setIsOpen(false),
+  })
+
+  const items: MenuItem[] = useMemo(() => {
+    const items: MenuItem[] = [
+      {
+        type: "link",
+        icon: <HouseIcon />,
+        title: "Homepage",
+        link: "https://acmekit.com",
+      },
+      {
+        type: "link",
+        icon: <Book />,
+        title: "AcmeKit v1",
+        link: "https://docs.acmekit.com/v1",
+      },
+      {
+        type: "link",
+        icon: <TimelineVertical />,
+        title: "Changelog",
+        link: "https://acmekit.com/changelog",
+      },
+    ]
+
+    if (isSidebarShown) {
+      items.push(
+        {
+          type: "divider",
+        },
+        {
+          type: "action",
+          title: desktopSidebarOpen ? "Hide Sidebar" : "Show Sidebar",
+          icon: <SidebarLeft />,
+          shortcut: `${getOsShortcut()}\\`,
+          action: () => {
+            setDesktopSidebarOpen((prev) => !prev)
+            setIsOpen(false)
+          },
+        }
+      )
+    }
+
+    items.push(
+      {
+        type: "divider",
+      },
+      {
+        type: "custom",
+        content: <MainNavThemeMenu />,
+      }
+    )
+
+    return items
+  }, [isSidebarShown, desktopSidebarOpen])
+
+  return (
+    <div
+      className="relative hidden lg:flex justify-center items-center"
+      ref={ref}
+    >
+      <Button
+        variant="transparent"
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="!p-[6.5px]"
+        data-testid="menu-button"
+      >
+        <BarsThree className="text-acmekit-fg-subtle" />
+      </Button>
+      <Menu
+        className={clsx(
+          "absolute top-[calc(100%+8px)] right-0 min-w-[200px]",
+          !isOpen && "hidden"
+        )}
+        items={items}
+      />
+    </div>
+  )
+}

package/src/components/MainNav/Items/Dropdown/index.tsx

@@ -0,0 +1,88 @@
+
+import { TriangleDownMini } from "@acmekit/icons"
+import clsx from "clsx"
+import React, { useRef, useState } from "react"
+import { NavigationItemDropdown } from "../../../../types"
+import { Menu } from "../../../Menu"
+import { MainNavItemLink } from "../Link"
+
+type MainNavItemDropdownProps = {
+  item: NavigationItemDropdown
+  isActive: boolean
+  className?: string
+  wrapperClassName?: string
+}
+
+export const MainNavItemDropdown = ({
+  item,
+  isActive,
+  className,
+  wrapperClassName,
+}: MainNavItemDropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const getItemContent = () => {
+    if (item.link) {
+      return (
+        <MainNavItemLink
+          item={{
+            ...item,
+            link: item.link!,
+            type: "link",
+          }}
+          isActive={isActive}
+          icon={
+            <TriangleDownMini
+              className={clsx("transition-transform", isOpen && "rotate-180")}
+            />
+          }
+          className="!flex"
+        />
+      )
+    }
+
+    return (
+      <div
+        className={clsx(
+          "cursor-pointer flex gap-docs_0.25 items-center py-docs_0.25",
+          isActive && "text-acmekit-fg-base",
+          !isActive && [
+            "text-acmekit-fg-muted hover:text-acmekit-fg-subtle",
+            isOpen && "text-acmekit-fg-subtle",
+          ],
+          className
+        )}
+        tabIndex={-1}
+        data-testid="dropdown-title-wrapper"
+      >
+        <span className="text-compact-small-plus" data-testid="dropdown-title">
+          {item.title}
+        </span>
+        <TriangleDownMini
+          className={clsx("transition-transform", isOpen && "rotate-180")}
+          data-testid="triangle-icon"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={clsx("relative", wrapperClassName)}
+      ref={ref}
+      onMouseOver={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+      data-testid="dropdown-wrapper"
+    >
+      {getItemContent()}
+      <div className="absolute top-full -left-docs_0.75 pt-docs_0.25">
+        <Menu
+          className={clsx("min-w-[190px]", !isOpen && "hidden")}
+          items={item.children}
+          itemsOnClick={() => setIsOpen(false)}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/MainNav/Items/Link/index.tsx

@@ -0,0 +1,34 @@
+
+import React from "react"
+import { NavigationItemLink } from "../../../../types"
+import { LinkButton } from "../../../LinkButton"
+import clsx from "clsx"
+
+type MainNavItemLinkProps = {
+  item: NavigationItemLink
+  isActive: boolean
+  icon?: React.ReactNode
+  className?: string
+}
+
+export const MainNavItemLink = ({
+  item,
+  isActive,
+  icon,
+  className,
+}: MainNavItemLinkProps) => {
+  return (
+    <LinkButton
+      to={item.link}
+      className={clsx(
+        "!shadow-none focus:!shadow-none outline-none",
+        isActive && "!text-acmekit-fg-base",
+        !isActive && "!text-acmekit-fg-muted hover:!text-acmekit-fg-subtle",
+        className
+      )}
+    >
+      {item.title}
+      {icon}
+    </LinkButton>
+  )
+}

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

@@ -0,0 +1,61 @@
+
+import React from "react"
+import { useLocation } from "react-router-dom"
+import { useMainNav } from "../../../providers/MainNav"
+import clsx from "clsx"
+import { MainNavItemLink } from "./Link"
+import { MainNavItemDropdown } from "./Dropdown"
+
+type MainNavItemsProps = {
+  className?: string
+}
+
+export const MainNavItems = ({ className }: MainNavItemsProps) => {
+  const { navItems, activeItemIndex } = useMainNav()
+  const { pathname } = useLocation()
+
+  return (
+    <ul
+      className={clsx(
+        "hidden lg:flex justify-start gap-docs_0.25 items-center",
+        "my-docs_0.75",
+        className
+      )}
+    >
+      {navItems.map((item, index) => {
+        const isActive =
+          item.type === "link"
+            ? pathname.startsWith(item.link)
+            : index === activeItemIndex
+
+        return (
+          <li
+            className={clsx(
+              "relative flex items-center",
+              "after:absolute after:bottom-[-13px] after:left-0 after:right-0",
+              "after:h-[2px] after:rounded-full after:transition-colors",
+              isActive
+                ? "after:bg-acmekit-fg-base"
+                : "after:bg-transparent"
+            )}
+            key={index}
+          >
+            {item.type === "link" && (
+              <MainNavItemLink
+                item={item}
+                isActive={isActive}
+                className={clsx(
+                  "px-docs_0.5 py-docs_0.25 rounded-docs_sm transition-colors",
+                  !isActive && "hover:bg-acmekit-button-transparent-hover"
+                )}
+              />
+            )}
+            {item.type === "dropdown" && (
+              <MainNavItemDropdown item={item} isActive={isActive} />
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

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

@@ -0,0 +1,67 @@
+
+import React from "react"
+import { useMainNav } from "../../../../providers/MainNav"
+import { Link } from "react-router-dom"
+import { TriangleRightMini } from "@acmekit/icons"
+import clsx from "clsx"
+import { SelectedMenu } from ".."
+
+type MainNavMobileMainMenu = {
+  setSelectedMenus: React.Dispatch<React.SetStateAction<SelectedMenu>>
+  onOpenLink?: () => void
+}
+
+export const MainNavMobileMainMenu = ({
+  setSelectedMenus: setSelectedMenu,
+  onOpenLink,
+}: MainNavMobileMainMenu) => {
+  const { navItems } = useMainNav()
+
+  return (
+    <div className="flex flex-col gap-[23px]">
+      <span className="text-compact-small-plus text-acmekit-fg-muted uppercase">
+        Menu
+      </span>
+      <ul className="flex flex-col gap-[18px]">
+        {navItems.map((item, index) => (
+          <li
+            key={index}
+            className={clsx(
+              "text-h1 text-acmekit-fg-base cursor-pointer",
+              "flex justify-between gap-docs_1"
+            )}
+            onClick={() => {
+              if (item.type !== "dropdown") {
+                return
+              }
+
+              setSelectedMenu((prev) => [
+                ...prev,
+                {
+                  title: item.title,
+                  menu: item.children,
+                },
+              ])
+            }}
+          >
+            {item.type === "link" && (
+              <Link
+                to={item.link}
+                className="block w-full"
+                onClick={() => onOpenLink?.()}
+              >
+                {item.title}
+              </Link>
+            )}
+            {item.type === "dropdown" && (
+              <>
+                <span>{item.title}</span>
+                <TriangleRightMini data-testid="triangle-icon" />
+              </>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}