@acmekit/docs-ui 2.13.41

package/src/providers/Notification/index.tsx

@@ -0,0 +1,149 @@
+
+import React, { createContext, useContext, useMemo, useReducer } from "react"
+import { NotificationContainer } from "../../components/Notification"
+import uuid from "react-uuid"
+import { NotificationItemProps } from "../../components/Notification/Item"
+
+export type NotificationItemType = {
+  id?: string
+} & NotificationItemProps
+
+export type NotificationContextType = {
+  notifications: NotificationItemType[]
+  addNotification: (value: NotificationItemType) => void
+  generateId: () => string
+  removeNotification: (id: string) => void
+  updateNotification: (
+    id: string,
+    updatedData: Partial<Omit<NotificationItemType, "id">>
+  ) => void
+}
+
+export enum NotificationReducerActionTypes {
+  ADD = "add",
+  REMOVE = "remove",
+  UPDATE = "update",
+}
+
+export type NotificationReducerAction =
+  | {
+      type: NotificationReducerActionTypes.ADD
+      notification: NotificationItemType
+    }
+  | {
+      type: NotificationReducerActionTypes.REMOVE
+      id: string
+    }
+  | {
+      type: NotificationReducerActionTypes.UPDATE
+      id: string
+      updatedData: Partial<Omit<NotificationItemType, "id">>
+    }
+
+const notificationReducer = (
+  state: NotificationItemType[],
+  action: NotificationReducerAction
+) => {
+  switch (action.type) {
+    case NotificationReducerActionTypes.ADD:
+      return [...state, action.notification]
+    case NotificationReducerActionTypes.REMOVE:
+      return state.filter((notification) => notification.id !== action.id)
+    case NotificationReducerActionTypes.UPDATE:
+      return state.map((notification) => {
+        if (notification.id === action.id) {
+          return {
+            ...notification,
+            ...action.updatedData,
+          }
+        }
+
+        return notification
+      })
+    default:
+      return state
+  }
+}
+
+const NotificationContext = createContext<NotificationContextType | null>(null)
+
+export type NotificationProviderProps = {
+  children?: React.ReactNode
+  initial?: NotificationItemType[]
+}
+
+export const NotificationProvider = ({
+  children,
+  initial = [],
+}: NotificationProviderProps) => {
+  const generateId = () => uuid()
+
+  const normalizedInitial = useMemo(() => {
+    return initial.map((notif) => ({
+      id: generateId(),
+      ...notif,
+    }))
+  }, [initial])
+
+  const [notifications, dispatch] = useReducer(
+    notificationReducer,
+    normalizedInitial
+  )
+
+  const addNotification = (notification: NotificationItemType) => {
+    if (!notification.id) {
+      notification.id = generateId()
+    }
+    dispatch({
+      type: NotificationReducerActionTypes.ADD,
+      notification,
+    })
+  }
+
+  const updateNotification = (
+    id: string,
+    updatedData: Partial<Omit<NotificationItemType, "id">>
+  ) => {
+    dispatch({
+      type: NotificationReducerActionTypes.UPDATE,
+      id,
+      updatedData,
+    })
+  }
+
+  const removeNotification = (id: string) => {
+    dispatch({
+      type: NotificationReducerActionTypes.REMOVE,
+      id,
+    })
+  }
+
+  return (
+    <NotificationContext.Provider
+      value={{
+        notifications,
+        addNotification,
+        generateId,
+        removeNotification,
+        updateNotification,
+      }}
+    >
+      {children}
+      <NotificationContainer />
+    </NotificationContext.Provider>
+  )
+}
+
+export const useNotifications = (
+  suppressError?: boolean
+): NotificationContextType | null => {
+  const context = useContext(NotificationContext)
+
+  if (!context && !suppressError) {
+    throw new Error(
+      "useNotifications must be used within a NotificationProvider"
+    )
+  }
+
+  return context
+}

package/src/providers/Pagination/index.tsx

@@ -0,0 +1,230 @@
+
+import React, { createContext, useContext, useEffect, useState } from "react"
+import { usePrevious } from "@uidotdev/usehooks"
+import { useSidebar } from "../Sidebar"
+import { isSidebarItemLink } from "../../utils/sidebar-utils"
+import { Sidebar } from "../../types"
+
+export type Page = {
+  title: string
+  description?: string
+  parentTitle?: string
+  link: string
+}
+
+export type PaginationContextType = {
+  nextPage?: Page
+  previousPage?: Page
+}
+
+export const PaginationContext = createContext<PaginationContextType | null>(
+  null
+)
+
+type SidebarItemWithParent = Sidebar.InteractiveSidebarItem & {
+  parent?: Sidebar.InteractiveSidebarItem
+}
+
+type SearchItemsResult = {
+  foundActive: boolean
+  prevItem?: SidebarItemWithParent
+  nextItem?: SidebarItemWithParent
+}
+
+export type PaginationProviderProps = {
+  children?: React.ReactNode
+}
+
+export const PaginationProvider = ({ children }: PaginationProviderProps) => {
+  const { shownSidebar, activePath } = useSidebar()
+  const previousActivePath = usePrevious(activePath)
+  const [nextPage, setNextPage] = useState<Page | undefined>()
+  const [prevPage, setPrevPage] = useState<Page | undefined>()
+
+  const getFirstChild = (
+    item: Sidebar.InteractiveSidebarItem
+  ): SidebarItemWithParent | undefined => {
+    const children = getChildrenWithPages(item)
+    if (!children?.length) {
+      return undefined
+    }
+
+    return isSidebarItemLink(children[0])
+      ? {
+          ...children[0],
+          parent: item,
+        }
+      : getFirstChild(children[0])
+  }
+
+  const getChildrenWithPages = (
+    item: Sidebar.InteractiveSidebarItem
+  ): SidebarItemWithParent[] | undefined => {
+    return item.children?.filter(
+      (childItem) =>
+        isSidebarItemLink(childItem) ||
+        (childItem.type !== "separator" &&
+          getChildrenWithPages(childItem)?.length)
+    ) as SidebarItemWithParent[]
+  }
+
+  const getPrevItem = (
+    items: Sidebar.SidebarItem[],
+    index: number
+  ): SidebarItemWithParent | undefined => {
+    let foundItem: SidebarItemWithParent | undefined
+    items
+      .slice(0, index)
+      .reverse()
+      .some((item) => {
+        if (item.type === "separator") {
+          return false
+        }
+        if (item.children?.length) {
+          const childItem = getPrevItem(item.children, item.children.length)
+          if (childItem) {
+            foundItem = {
+              ...childItem,
+              parent: item,
+            }
+          }
+        } else if (isSidebarItemLink(item)) {
+          foundItem = item
+        }
+
+        return foundItem !== undefined
+      })
+
+    return foundItem
+  }
+
+  const getNextItem = (
+    items: Sidebar.SidebarItem[],
+    index: number
+  ): SidebarItemWithParent | undefined => {
+    let foundItem: SidebarItemWithParent | undefined
+    items.slice(index + 1).some((item) => {
+      if (item.type === "separator") {
+        return false
+      }
+
+      if (isSidebarItemLink(item)) {
+        foundItem = item
+      } else if (item.children?.length) {
+        const childItem = getNextItem(item.children, -1)
+        if (childItem) {
+          foundItem = {
+            ...childItem,
+            parent: item,
+          }
+        }
+      }
+
+      return foundItem !== undefined
+    })
+
+    return foundItem
+  }
+
+  const searchItems = (
+    currentItems: Sidebar.SidebarItem[]
+  ): SearchItemsResult => {
+    const result: SearchItemsResult = {
+      foundActive: false,
+    }
+
+    result.foundActive = currentItems.some((item, index) => {
+      if (isSidebarItemLink(item) && item.path === activePath) {
+        if (index !== 0) {
+          result.prevItem = getPrevItem(currentItems, index)
+        }
+
+        if (item.children?.length) {
+          result.nextItem = getFirstChild(item)
+        }
+
+        if (!result.nextItem && index !== currentItems.length - 1) {
+          result.nextItem = getNextItem(currentItems, index)
+        }
+        return true
+      }
+
+      if (item.type !== "separator" && item.children?.length) {
+        const childrenResult = searchItems(item.children)
+
+        if (childrenResult.foundActive) {
+          result.prevItem = childrenResult.prevItem
+          result.nextItem = childrenResult.nextItem
+          if (!result.prevItem) {
+            result.prevItem = isSidebarItemLink(item)
+              ? item
+              : getPrevItem(currentItems, index)
+          }
+
+          if (!result.nextItem && index !== currentItems.length - 1) {
+            result.nextItem = getNextItem(currentItems, index)
+          }
+
+          return true
+        }
+      }
+
+      return false
+    })
+
+    return result
+  }
+
+  useEffect(() => {
+    if (activePath !== previousActivePath) {
+      const sidebarItems =
+        shownSidebar && "items" in shownSidebar
+          ? shownSidebar.items
+          : shownSidebar?.children || []
+      const result = searchItems(sidebarItems)
+      setPrevPage(
+        result.prevItem
+          ? {
+              title: result.prevItem.title,
+              link: isSidebarItemLink(result.prevItem)
+                ? result.prevItem.path
+                : "",
+              parentTitle: result.prevItem.parent?.title,
+            }
+          : undefined
+      )
+      setNextPage(
+        result.nextItem
+          ? {
+              title: result.nextItem.title,
+              link: isSidebarItemLink(result.nextItem)
+                ? result.nextItem.path
+                : "",
+              parentTitle: result.nextItem?.parent?.title,
+            }
+          : undefined
+      )
+    }
+  }, [activePath, previousActivePath])
+
+  return (
+    <PaginationContext.Provider
+      value={{
+        previousPage: prevPage,
+        nextPage,
+      }}
+    >
+      {children}
+    </PaginationContext.Provider>
+  )
+}
+
+export const usePagination = (): PaginationContextType => {
+  const context = useContext(PaginationContext)
+
+  if (!context) {
+    throw new Error("usePagination must be used inside a PaginationProvider")
+  }
+
+  return context
+}

package/src/providers/Search/index.tsx

@@ -0,0 +1,91 @@
+import React, { createContext, useContext, useRef, useState } from "react"
+import { BadgeProps } from "../../components/Badge"
+
+export type SearchCommand = {
+  name: string
+  component?: React.ReactNode
+  action?: () => void
+  icon?: React.ReactNode
+  title: string
+  badge?: BadgeProps
+}
+
+export type SearchContextType = {
+  isOpen: boolean
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+  searchClient: any
+  commands: SearchCommand[]
+  command: SearchCommand | null
+  setCommand: React.Dispatch<React.SetStateAction<SearchCommand | null>>
+  setCommands: React.Dispatch<React.SetStateAction<SearchCommand[]>>
+  modalRef: React.RefObject<HTMLDialogElement | null>
+  indices: AlgoliaIndex[]
+  selectedIndex: string
+  setSelectedIndex: (value: string) => void
+}
+
+const SearchContext = createContext<SearchContextType | null>(null)
+
+export type AlgoliaIndex = {
+  value: string
+  title: string
+}
+
+export type AlgoliaProps = {
+  appId: string
+  apiKey: string
+  mainIndexName: string
+}
+
+export type SearchProps = {
+  algolia: AlgoliaProps
+}
+
+export type SearchProviderProps = {
+  children: React.ReactNode
+  indices?: AlgoliaIndex[]
+  defaultIndex?: string
+  algolia?: AlgoliaProps
+  searchProps?: any
+  commands?: SearchCommand[]
+  modalClassName?: string
+}
+
+export const SearchProvider = ({
+  children,
+}: SearchProviderProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [commands, setCommands] = useState<SearchCommand[]>([])
+  const [command, setCommand] = useState<SearchCommand | null>(null)
+  const modalRef = useRef<HTMLDialogElement | null>(null)
+
+  return (
+    <SearchContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        searchClient: null,
+        commands,
+        command,
+        setCommand,
+        modalRef,
+        setCommands,
+        indices: [],
+        selectedIndex: "",
+        setSelectedIndex: () => {},
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  )
+}
+
+export const useSearch = (): SearchContextType => {
+  const context = useContext(SearchContext)
+
+  if (!context) {
+    throw new Error("useSearch must be used inside a SearchProvider")
+  }
+
+  return context
+}