@acmekit/docs-ui 2.13.41

package/src/layouts/root.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import clsx from "clsx"
+import { RootProviders, Sidebar, SidebarProps } from "../components"
+import { MainContentLayout, MainContentLayoutProps } from "./main-content"
+
+export type RootLayoutProps = {
+  bodyClassName?: string
+  sidebarProps?: SidebarProps
+  showBreadcrumbs?: boolean
+  ProvidersComponent: React.FC<{ children: React.ReactNode }>
+  footerComponent?: React.ReactNode
+} & MainContentLayoutProps
+
+export const RootLayout = ({
+  bodyClassName,
+  sidebarProps,
+  ProvidersComponent,
+  ...mainProps
+}: RootLayoutProps) => {
+  return (
+    <div className={clsx("h-screen w-full overflow-hidden")}>
+      <div
+        className={clsx(
+          "bg-acmekit-bg-subtle font-base text-medium w-full",
+          "text-acmekit-fg-base",
+          "h-full overflow-hidden",
+          "grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
+          bodyClassName
+        )}
+        id="root-layout"
+      >
+        <RootProviders>
+          <ProvidersComponent>
+            <Sidebar {...sidebarProps} />
+            <div className={clsx("relative", "h-screen", "flex")}>
+              <MainContentLayout {...mainProps} />
+            </div>
+          </ProvidersComponent>
+        </RootProviders>
+      </div>
+    </div>
+  )
+}

package/src/layouts/tight.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { RootLayout, RootLayoutProps } from "./root"
+import clsx from "clsx"
+import { Breadcrumbs } from ".."
+
+export const TightLayout = ({
+  children,
+  footerComponent,
+  showBreadcrumbs = true,
+  ...props
+}: RootLayoutProps) => {
+  return (
+    <RootLayout {...props}>
+      <div
+        className={clsx(
+          "w-full h-fit",
+          "max-w-inner-content-xs sm:max-w-inner-content-sm md:max-w-inner-content-md",
+          "lg:max-w-inner-content-lg xl:max-w-inner-content-xl xxl:max-w-inner-content-xxl",
+          "xxxl:max-w-inner-content-xxxl",
+          "px-docs_1 md:px-docs_4 lg:px-0"
+        )}
+      >
+        {showBreadcrumbs && <Breadcrumbs />}
+        {children}
+        {footerComponent}
+      </div>
+    </RootLayout>
+  )
+}

package/src/layouts/wide.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { RootLayout, RootLayoutProps } from "./root"
+import clsx from "clsx"
+import { Breadcrumbs } from ".."
+
+export const WideLayout = ({
+  children,
+  footerComponent,
+  showBreadcrumbs = true,
+  ...props
+}: RootLayoutProps) => {
+  return (
+    <RootLayout
+      {...props}
+      mainWrapperClasses={clsx(props.mainWrapperClasses, "mx-auto flex")}
+      contentClassName="w-full"
+    >
+      <main className={clsx("relative mt-4 w-full flex-1 lg:mt-7")}>
+        {showBreadcrumbs && <Breadcrumbs />}
+        {children}
+        {footerComponent}
+      </main>
+    </RootLayout>
+  )
+}

package/src/providers/AiAssistant/index.tsx

@@ -0,0 +1,65 @@
+import React, { createContext, useContext, useRef, useState } from "react"
+
+export type AiAssistantChatType = "default" | "popover"
+
+export type AiAssistantContextType = {
+  chatOpened: boolean
+  setChatOpened: React.Dispatch<React.SetStateAction<boolean>>
+  chatType: AiAssistantChatType
+  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>
+  contentRef: React.RefObject<HTMLDivElement | null>
+  loading: boolean
+  isCaptchaLoaded: boolean
+}
+
+export type AiAssistantThreadItem = {
+  type: "question" | "answer" | "error"
+  content: string
+  question_id?: string | null
+  sources?: any[]
+  isGenerationAborted?: boolean
+}
+
+const AiAssistantContext = createContext<AiAssistantContextType | null>(null)
+
+export type AiAssistantProviderProps = {
+  children?: React.ReactNode
+  integrationId?: string
+  chatType?: AiAssistantChatType
+  type?: "search" | "chat"
+}
+
+export const AiAssistantProvider = ({
+  children,
+  chatType = "default",
+}: AiAssistantProviderProps) => {
+  const [chatOpened, setChatOpened] = useState(false)
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <AiAssistantContext.Provider
+      value={{
+        chatOpened,
+        setChatOpened,
+        chatType,
+        inputRef,
+        contentRef,
+        loading: false,
+        isCaptchaLoaded: false,
+      }}
+    >
+      {children}
+    </AiAssistantContext.Provider>
+  )
+}
+
+export const useAiAssistant = () => {
+  const context = useContext(AiAssistantContext)
+
+  if (!context) {
+    throw new Error("useAiAssistant must be used within a AiAssistantProvider")
+  }
+
+  return context
+}

package/src/providers/BrowserProvider/index.tsx

@@ -0,0 +1,40 @@
+
+import React, { useContext, useEffect, useState } from "react"
+
+type BrowserContextType = {
+  isBrowser: boolean
+}
+
+const BrowserContext = React.createContext<BrowserContextType | null>(null)
+
+type BrowserProviderProps = {
+  children: React.ReactNode
+}
+
+export const BrowserProvider = ({ children }: BrowserProviderProps) => {
+  const [isBrowser, setIsBrowser] = useState(false)
+
+  useEffect(() => {
+    setIsBrowser(typeof window !== "undefined")
+  }, [])
+
+  return (
+    <BrowserContext.Provider
+      value={{
+        isBrowser,
+      }}
+    >
+      {children}
+    </BrowserContext.Provider>
+  )
+}
+
+export const useIsBrowser = () => {
+  const context = useContext(BrowserContext)
+
+  if (!context) {
+    throw new Error("useIsBrowser must be used within a BrowserProvider")
+  }
+
+  return context
+}

package/src/providers/ColorMode/index.tsx

@@ -0,0 +1,73 @@
+
+import React, { createContext, useContext, useEffect, useState } from "react"
+
+export type ColorMode = "light" | "dark"
+
+export type ColorModeContextType = {
+  colorMode: ColorMode
+  setColorMode: (value: ColorMode) => void
+  toggleColorMode: () => void
+}
+
+const ColorModeContext = createContext<ColorModeContextType | null>(null)
+
+export type ColorModeProviderProps = {
+  children: React.ReactNode
+}
+
+export const ColorModeProvider = ({ children }: ColorModeProviderProps) => {
+  const [colorMode, setColorMode] = useState<ColorMode>("light")
+  const [loaded, setLoaded] = useState(false)
+
+  const toggleColorMode = () =>
+    setColorMode(colorMode === "light" ? "dark" : "light")
+
+  useEffect(() => {
+    if (loaded) {
+      return
+    }
+
+    const theme = localStorage.getItem("theme")
+    if (theme && (theme === "light" || theme === "dark")) {
+      setColorMode(theme)
+    }
+    setLoaded(true)
+  }, [])
+
+  useEffect(() => {
+    document.querySelector("html")?.setAttribute("data-theme", colorMode)
+  }, [colorMode])
+
+  useEffect(() => {
+    if (!loaded) {
+      return
+    }
+
+    const theme = localStorage.getItem("theme")
+    if (theme !== colorMode) {
+      localStorage.setItem("theme", colorMode)
+    }
+  }, [loaded, colorMode])
+
+  return (
+    <ColorModeContext.Provider
+      value={{
+        colorMode,
+        setColorMode,
+        toggleColorMode,
+      }}
+    >
+      {children}
+    </ColorModeContext.Provider>
+  )
+}
+
+export const useColorMode = (): ColorModeContextType => {
+  const context = useContext(ColorModeContext)
+
+  if (!context) {
+    throw new Error("useColorMode must be used inside a ColorModeProvider")
+  }
+
+  return context
+}

package/src/providers/Layout/index.tsx

@@ -0,0 +1,52 @@
+
+import { useResizeObserver } from "../../hooks/use-resize-observer"
+import React, { createContext, createRef, useContext, useState } from "react"
+
+export type LayoutProviderContextType = {
+  mainContentRef: React.RefObject<HTMLDivElement | null>
+  showCollapsedNavbar: boolean
+}
+
+export const LayoutProviderContext =
+  createContext<LayoutProviderContextType | null>(null)
+
+export type LayoutProviderProps = {
+  children: React.ReactNode
+  disableResizeObserver?: boolean
+}
+
+export const LayoutProvider = ({
+  children,
+  disableResizeObserver = false,
+}: LayoutProviderProps) => {
+  const mainContentRef = createRef<HTMLDivElement>()
+  const [showCollapsedNavbar, setShowCollapsedNavbar] = useState(false)
+
+  useResizeObserver(mainContentRef as React.RefObject<HTMLDivElement>, () => {
+    if (disableResizeObserver || window.innerWidth < 1024) {
+      setShowCollapsedNavbar(false)
+      return
+    }
+    if (mainContentRef.current) {
+      setShowCollapsedNavbar(mainContentRef.current.clientWidth < 1100)
+    }
+  })
+
+  return (
+    <LayoutProviderContext.Provider
+      value={{ mainContentRef, showCollapsedNavbar }}
+    >
+      {children}
+    </LayoutProviderContext.Provider>
+  )
+}
+
+export const useLayout = (): LayoutProviderContextType => {
+  const context = useContext(LayoutProviderContext)
+
+  if (!context) {
+    throw new Error("useLayout must be used inside a LayoutProvider")
+  }
+
+  return context
+}

package/src/providers/MainNav/index.tsx

@@ -0,0 +1,134 @@
+
+import { useLocation } from "react-router-dom"
+import React, { createContext, useContext, useMemo } from "react"
+import { MenuItem, NavigationItem, NavigationItemDropdown } from "../../types"
+import { useSiteConfig } from "../SiteConfig"
+
+export type MainNavContext = {
+  navItems: NavigationItem[]
+  activeItemIndex?: number
+  activeItem?: NavigationItem
+  editDate?: string
+}
+
+const MainNavContext = createContext<MainNavContext | null>(null)
+
+export type MainNavProviderProps = {
+  navItems: NavigationItem[]
+  children?: React.ReactNode
+}
+
+export const MainNavProvider = ({
+  navItems,
+  children,
+}: MainNavProviderProps) => {
+  const { pathname } = useLocation()
+  const { config } = useSiteConfig()
+
+  const baseUrl = `${config.baseUrl}${config.basePath}`
+
+  const findActiveItem = (
+    items: NavigationItemDropdown["children"],
+    currentUrl: string
+  ) => {
+    let item: MenuItem | undefined
+    let fallbackIndex: number | undefined
+    items.some((childItem, index) => {
+      if (childItem.type !== "link" && childItem.type !== "sub-menu") {
+        return false
+      }
+
+      if (childItem.type === "sub-menu") {
+        const activeChildRes = findActiveItem(childItem.items, currentUrl)
+        item = activeChildRes.item
+        fallbackIndex = activeChildRes.fallbackIndex
+        return !!item
+      }
+
+      const isItemActive = currentUrl.startsWith(childItem.link)
+
+      if (!isItemActive) {
+        return false
+      }
+
+      if (childItem.useAsFallback && fallbackIndex === undefined) {
+        fallbackIndex = index
+        return false
+      }
+
+      item = childItem
+
+      return true
+    })
+
+    return {
+      item,
+      fallbackIndex,
+    }
+  }
+
+  const activeItemIndex = useMemo(() => {
+    const currentUrl = `${baseUrl}${pathname}`.replace(/\/$/, "")
+
+    let fallbackIndex: number | undefined
+
+    const index = navItems.findIndex((item, index) => {
+      if (item.type === "dropdown") {
+        const { item: activeChild, fallbackIndex: childFallbackIndex } =
+          findActiveItem(item.children, currentUrl)
+
+        if (activeChild) {
+          fallbackIndex = childFallbackIndex
+          return true
+        }
+
+        return item.link && currentUrl.startsWith(item.link)
+      }
+
+      if (item.project && item.project !== config.project.key) {
+        return false
+      }
+
+      const isItemActive = currentUrl.startsWith(item.link)
+
+      if (isItemActive && item.useAsFallback && fallbackIndex === undefined) {
+        fallbackIndex = index
+        return false
+      }
+
+      return isItemActive
+    })
+
+    return index !== -1 ? index : fallbackIndex
+  }, [navItems, pathname, baseUrl, config])
+
+  const activeItem = useMemo(() => {
+    if (activeItemIndex === undefined) {
+      return
+    }
+
+    return navItems[activeItemIndex]
+  }, [navItems, activeItemIndex])
+
+  return (
+    <MainNavContext.Provider
+      value={{
+        navItems,
+        activeItemIndex,
+        activeItem,
+      }}
+    >
+      {children}
+    </MainNavContext.Provider>
+  )
+}
+
+export const useMainNav = () => {
+  const context = useContext(MainNavContext)
+
+  if (!context) {
+    throw new Error("useMainNav must be used within a MainNavProvider")
+  }
+
+  return context
+}

package/src/providers/Mobile/index.tsx

@@ -0,0 +1,62 @@
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react"
+
+export type MobileContextType = {
+  isMobile?: boolean
+}
+
+const MobileContext = createContext<MobileContextType | null>(null)
+
+export type MobileProviderProps = {
+  children: React.ReactNode
+}
+
+export const MobileProvider = ({ children }: MobileProviderProps) => {
+  const [isMobile, setIsMobile] = useState(false)
+
+  const handleResize = useCallback(() => {
+    if (window.innerWidth < 1024 && !isMobile) {
+      setIsMobile(true)
+    } else if (window.innerWidth >= 1024 && isMobile) {
+      setIsMobile(false)
+    }
+  }, [isMobile])
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [handleResize])
+
+  useEffect(() => {
+    handleResize()
+  }, [])
+
+  return (
+    <MobileContext.Provider
+      value={{
+        isMobile,
+      }}
+    >
+      {children}
+    </MobileContext.Provider>
+  )
+}
+
+export const useMobile = () => {
+  const context = useContext(MobileContext)
+
+  if (!context) {
+    throw new Error("useMobile must be used within a MobileProvider")
+  }
+
+  return context
+}

package/src/providers/Modal/index.tsx

@@ -0,0 +1,52 @@
+
+import React, { useContext, useState } from "react"
+import { createContext } from "react"
+import { Modal, type ModalProps } from "../../components/Modal"
+
+export type ModalContextType = {
+  modalProps: ModalProps | null
+  setModalProps: (value: ModalProps | null) => void
+  closeModal: () => void
+}
+
+const ModalContext = createContext<ModalContextType | null>(null)
+
+export type ModalProviderProps = {
+  children?: React.ReactNode
+}
+
+export const ModalProvider = ({ children }: ModalProviderProps) => {
+  const [modalProps, setModalProps] = useState<ModalProps | null>(null)
+
+  const closeModal = () => {
+    setModalProps(null)
+  }
+
+  return (
+    <ModalContext.Provider
+      value={{
+        modalProps,
+        setModalProps,
+        closeModal,
+      }}
+    >
+      {children}
+      {modalProps && (
+        <>
+          <div className="bg-acmekit-bg-overlay fixed top-0 left-0 z-[499] h-screen w-screen"></div>
+          <Modal {...modalProps} onClose={closeModal} />
+        </>
+      )}
+    </ModalContext.Provider>
+  )
+}
+
+export const useModal = () => {
+  const context = useContext(ModalContext)
+
+  if (!context) {
+    throw new Error("useModal must be used within a ModalProvider")
+  }
+
+  return context
+}