api-ref: custom API reference (#4770)

* initialized next.js project * finished markdown sections * added operation schema component * change page metadata * eslint fixes * fixes related to deployment * added response schema * resolve max stack issue * support for different property types * added support for property types * added loading for components * added more loading * type fixes * added oneOf type * removed console * fix replace with push * refactored everything * use static content for description * fixes and improvements * added code examples section * fix path name * optimizations * fixed tag navigation * add support for admin and store references * general enhancements * optimizations and fixes * fixes and enhancements * added search bar * loading enhancements * added loading * added code blocks * added margin top * add empty response text * fixed oneOf parameters * added path and query parameters * general fixes * added base path env variable * small fix for arrays * enhancements * design enhancements * general enhancements * fix isRequired * added enum values * enhancements * general fixes * general fixes * changed oas generation script * additions to the introduction section * added copy button for code + other enhancements * fix response code block * fix metadata * formatted store introduction * move sidebar logic to Tags component * added test env variables * fix code block bug * added loading animation * added expand param + loading * enhance operation loading * made responsive + improvements * added loading provider * fixed loading * adjustments for small devices * added sidebar label for endpoints * added feedback component * fixed analytics * general fixes * listen to scroll for other headings * added sample env file * update api ref files + support new fields * fix for external docs link * added new sections * fix last item in sidebar not showing * move docs content to www/docs * change redirect url * revert change * resolve build errors * configure rewrites * changed to environment variable url * revert changing environment variable name * add environment variable for API path * fix links * fix tailwind settings * remove vercel file * reconfigured api route * move api page under api * fix page metadata * fix external link in navigation bar * update api spec * updated api specs * fixed google lint error * add max-height on request samples * add padding before loading * fix for one of name * fix undefined types * general fixes * remove response schema example * redesigned navigation bar * redesigned sidebar * fixed up paddings * added feedback component + report issue * fixed up typography, padding, and general styling * redesigned code blocks * optimization * added error timeout * fixes * added indexing with algolia + fixes * fix errors with algolia script * redesign operation sections * fix heading scroll * design fixes * fix padding * fix padding + scroll issues * fix scroll issues * improve scroll performance * fixes for safari * optimization and fixes * fixes to docs + details animation * padding fixes for code block * added tab animation * fixed incorrect link * added selection styling * fix lint errors * redesigned details component * added detailed feedback form * api reference fixes * fix tabs * upgrade + fixes * updated documentation links * optimizations to sidebar items * fix spacing in sidebar item * optimizations and fixes * fix endpoint path styling * remove margin * final fixes * change margin on small devices * generated OAS * fixes for mobile * added feedback modal * optimize dark mode button * fixed color mode useeffect * minimize dom size * use new style system * radius and spacing design system * design fixes * fix eslint errors * added meta files * change cron schedule * fix docusaurus configurations * added operating system to feedback data * change content directory name * fixes to contribution guidelines * revert renaming content * added api-reference to documentation workflow * fixes for search * added dark mode + fixes * oas fixes * handle bugs * added code examples for clients * changed tooltip text * change authentication to card * change page title based on selected section * redesigned mobile navbar * fix icon colors * fix key colors * fix medusa-js installation command * change external regex in algolia * change changeset * fix padding on mobile * fix hydration error * update depedencies
2023-08-15 18:07:54 +03:00
1 parent 16249ec280
commit 914d773d3a
@@ -0,0 +1,111 @@
+"use client"
+
+import React, { createContext, useContext, useEffect, useState } from "react"
+import { Analytics, AnalyticsBrowser } from "@segment/analytics-next"
+import { Area } from "@/types/openapi"
+
+export type ExtraData = {
+  area: Area
+  section?: string
+}
+
+type AnalyticsContextType = {
+  loaded: boolean
+  analytics: Analytics | null
+  track: (
+    event: string,
+    options?: Record<string, any>,
+    callback?: () => void
+  ) => void
+}
+
+const AnalyticsContext = createContext<AnalyticsContextType | null>(null)
+
+type AnalyticsProviderProps = {
+  children?: React.ReactNode
+}
+
+const LOCAL_STORAGE_KEY = "ajs_anonymous_id"
+
+const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }) => {
+  // loaded is used to ensure that a connection has been made to segment
+  // even if it failed. This is to ensure that the connection isn't
+  // continuously retried
+  const [loaded, setLoaded] = useState<boolean>(false)
+  const [analytics, setAnalytics] = useState<Analytics | null>(null)
+  const analyticsBrowser = new AnalyticsBrowser()
+
+  const init = () => {
+    if (!loaded) {
+      analyticsBrowser
+        .load(
+          { writeKey: process.env.NEXT_PUBLIC_SEGMENT_API_KEY || "temp" },
+          {
+            initialPageview: true,
+            user: {
+              localStorage: {
+                key: LOCAL_STORAGE_KEY,
+              },
+            },
+          }
+        )
+        .then((instance) => {
+          setAnalytics(instance[0])
+        })
+        .catch((e) =>
+          console.error(`Could not connect to Segment. Error: ${e}`)
+        )
+        .finally(() => setLoaded(true))
+    }
+  }
+
+  const track = async (
+    event: string,
+    options?: Record<string, any>,
+    callback?: () => void
+  ) => {
+    if (analytics) {
+      void analytics.track(
+        event,
+        {
+          ...options,
+          uuid: analytics.user().anonymousId(),
+        },
+        callback
+      )
+    } else if (callback) {
+      console.warn(
+        "Segment is either not installed or not configured. Simulating success..."
+      )
+      callback()
+    }
+  }
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  return (
+    <AnalyticsContext.Provider
+      value={{
+        analytics,
+        track,
+        loaded,
+      }}
+    >
+      {children}
+    </AnalyticsContext.Provider>
+  )
+}
+
+export default AnalyticsProvider
+
+export const useAnalytics = () => {
+  const context = useContext(AnalyticsContext)
+
+  if (!context) {
+    throw new Error("useAnalytics must be used within a AnalyticsProvider")
+  }
+
+  return context
+}
@@ -0,0 +1,43 @@
+"use client"
+
+import type { Area } from "@/types/openapi"
+import { createContext, useContext, useState } from "react"
+
+type AreaContextType = {
+  area: Area
+  setArea: (value: Area) => void
+}
+
+const AreaContext = createContext<AreaContextType | null>(null)
+
+type AreaProviderProps = {
+  area: Area
+  children: React.ReactNode
+}
+
+const AreaProvider = ({ area: passedArea, children }: AreaProviderProps) => {
+  const [area, setArea] = useState<Area>(passedArea)
+
+  return (
+    <AreaContext.Provider
+      value={{
+        area,
+        setArea,
+      }}
+    >
+      {children}
+    </AreaContext.Provider>
+  )
+}
+
+export default AreaProvider
+
+export const useArea = (): AreaContextType => {
+  const context = useContext(AreaContext)
+
+  if (!context) {
+    throw new Error("useAreaProvider must be used inside an AreaProvider")
+  }
+
+  return context
+}
@@ -0,0 +1,69 @@
+"use client"
+
+import { ExpandedDocument, SecuritySchemeObject } from "@/types/openapi"
+import { ReactNode, createContext, useContext, useState } from "react"
+
+type BaseSpecsContextType = {
+  baseSpecs: ExpandedDocument | null
+  setBaseSpecs: (value: ExpandedDocument) => void
+  getSecuritySchema: (securityName: string) => SecuritySchemeObject | null
+}
+
+const BaseSpecsContext = createContext<BaseSpecsContextType | null>(null)
+
+type BaseSpecsProviderProps = {
+  initialSpecs?: ExpandedDocument | null
+  children?: ReactNode
+}
+
+const BaseSpecsProvider = ({
+  children,
+  initialSpecs = null,
+}: BaseSpecsProviderProps) => {
+  const [baseSpecs, setBaseSpecs] = useState<ExpandedDocument | null>(
+    initialSpecs
+  )
+
+  const getSecuritySchema = (
+    securityName: string
+  ): SecuritySchemeObject | null => {
+    if (
+      baseSpecs?.components?.securitySchemes &&
+      Object.prototype.hasOwnProperty.call(
+        baseSpecs?.components?.securitySchemes,
+        securityName
+      )
+    ) {
+      const schema = baseSpecs?.components?.securitySchemes[securityName]
+      if (!("$ref" in schema)) {
+        return schema
+      }
+    }
+
+    return null
+  }
+
+  return (
+    <BaseSpecsContext.Provider
+      value={{
+        baseSpecs,
+        setBaseSpecs,
+        getSecuritySchema,
+      }}
+    >
+      {children}
+    </BaseSpecsContext.Provider>
+  )
+}
+
+export default BaseSpecsProvider
+
+export const useBaseSpecs = (): BaseSpecsContextType => {
+  const context = useContext(BaseSpecsContext)
+
+  if (!context) {
+    throw new Error("useBaseSpecs must be used inside a BaseSpecsProvider")
+  }
+
+  return context
+}
@@ -0,0 +1,74 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react"
+
+type ColorMode = "light" | "dark"
+
+type ColorModeContextType = {
+  colorMode: ColorMode
+  setColorMode: (value: ColorMode) => void
+  toggleColorMode: () => void
+}
+
+const ColorModeContext = createContext<ColorModeContextType | null>(null)
+
+type ColorModeProviderProps = {
+  children: React.ReactNode
+}
+
+const ColorModeProvider = ({ children }: ColorModeProviderProps) => {
+  const [colorMode, setColorMode] = useState<ColorMode>("light")
+
+  const toggleColorMode = () =>
+    setColorMode(colorMode === "light" ? "dark" : "light")
+
+  const init = () => {
+    const theme = localStorage.getItem("theme")
+    if (theme && (theme === "light" || theme === "dark")) {
+      setColorMode(theme)
+    }
+  }
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  useEffect(() => {
+    const theme = localStorage.getItem("theme")
+    if (theme !== colorMode) {
+      localStorage.setItem("theme", colorMode)
+    }
+
+    document.querySelector("html")?.setAttribute("data-theme", colorMode)
+  }, [colorMode])
+
+  return (
+    <ColorModeContext.Provider
+      value={{
+        colorMode,
+        setColorMode,
+        toggleColorMode,
+      }}
+    >
+      {children}
+    </ColorModeContext.Provider>
+  )
+}
+
+export default ColorModeProvider
+
+export const useColorMode = (): ColorModeContextType => {
+  const context = useContext(ColorModeContext)
+
+  if (!context) {
+    throw new Error("useColorMode must be used inside a ColorModeProvider")
+  }
+
+  return context
+}
@@ -0,0 +1,70 @@
+"use client"
+
+import { createContext, useContext, useEffect, useState } from "react"
+
+type ControlledHeightContextType = {
+  height: number
+}
+
+const ControlledHeightContext =
+  createContext<ControlledHeightContextType | null>(null)
+
+type ControlledHeightProvider = {
+  children?: React.ReactNode
+}
+
+const ControlledHeightProvider = ({ children }: ControlledHeightProvider) => {
+  const [height, setHeight] = useState(0)
+
+  const initHeight = () => {
+    const storedHeight = window.localStorage.getItem("height")
+    if (storedHeight) {
+      setHeight(parseFloat(storedHeight))
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      window.localStorage.setItem(
+        "height",
+        `${entries[0].contentBoxSize[0].inlineSize}`
+      )
+
+      setHeight(entries[0].target.clientHeight)
+    })
+
+    resizeObserver.observe(document.body)
+  }
+
+  useEffect(() => {
+    if (height !== document.body.clientHeight) {
+      document.body.style.height = `${height}px`
+    }
+  }, [height])
+
+  useEffect(() => {
+    initHeight()
+  }, [])
+
+  return (
+    <ControlledHeightContext.Provider
+      value={{
+        height,
+      }}
+    >
+      {children}
+    </ControlledHeightContext.Provider>
+  )
+}
+
+export default ControlledHeightProvider
+
+export const useControlledHeight = (): ControlledHeightContextType => {
+  const context = useContext(ControlledHeightContext)
+
+  if (!context) {
+    throw new Error(
+      "useControlledHeight must be used inside an ControlledHeightProvider"
+    )
+  }
+
+  return context
+}
@@ -0,0 +1,45 @@
+import { createContext, useContext, useState } from "react"
+
+type LoadingContextType = {
+  loading: boolean
+  removeLoading: () => void
+}
+
+const LoadingContext = createContext<LoadingContextType | null>(null)
+
+type LoadingProviderProps = {
+  children: React.ReactNode
+  initialLoading?: boolean
+}
+
+const LoadingProvider = ({
+  children,
+  initialLoading = false,
+}: LoadingProviderProps) => {
+  const [loading, setLoading] = useState<boolean>(initialLoading)
+
+  const removeLoading = () => setLoading(false)
+
+  return (
+    <LoadingContext.Provider
+      value={{
+        loading,
+        removeLoading,
+      }}
+    >
+      {children}
+    </LoadingContext.Provider>
+  )
+}
+
+export default LoadingProvider
+
+export const useLoading = (): LoadingContextType => {
+  const context = useContext(LoadingContext)
+
+  if (!context) {
+    throw new Error("useLoading must be used inside a LoadingProvider")
+  }
+
+  return context
+}
@@ -0,0 +1,63 @@
+"use client"
+
+import React, { useContext, useEffect, useState } from "react"
+import { createContext } from "react"
+import Modal, { ModalProps } from "../components/Modal"
+
+type ModalContextType = {
+  modalProps: ModalProps | null
+  setModalProps: (value: ModalProps | null) => void
+  closeModal: () => void
+}
+
+const ModalContext = createContext<ModalContextType | null>(null)
+
+type ModalProviderProps = {
+  children?: React.ReactNode
+}
+
+const ModalProvider = ({ children }: ModalProviderProps) => {
+  const [modalProps, setModalProps] = useState<ModalProps | null>(null)
+
+  const closeModal = () => {
+    setModalProps(null)
+  }
+
+  useEffect(() => {
+    if (modalProps) {
+      document.body.setAttribute("data-modal", "opened")
+    } else {
+      document.body.removeAttribute("data-modal")
+    }
+  }, [modalProps])
+
+  return (
+    <ModalContext.Provider
+      value={{
+        modalProps,
+        setModalProps,
+        closeModal,
+      }}
+    >
+      {children}
+      {modalProps && (
+        <>
+          <div className="bg-medusa-bg-overlay dark:bg-medusa-bg-overlay-dark fixed top-0 left-0 z-[499] h-screen w-screen"></div>
+          <Modal {...modalProps} onClose={closeModal} />
+        </>
+      )}
+    </ModalContext.Provider>
+  )
+}
+
+export default ModalProvider
+
+export const useModal = () => {
+  const context = useContext(ModalContext)
+
+  if (!context) {
+    throw new Error("useModal must be used within a ModalProvider")
+  }
+
+  return context
+}
@@ -0,0 +1,42 @@
+"use client"
+
+import type { Area } from "@/types/openapi"
+import { createContext, useContext, useState } from "react"
+
+type NavbarContextType = {
+  activeItem: Area | null
+  setActiveItem: (value: Area) => void
+}
+
+const NavbarContext = createContext<NavbarContextType | null>(null)
+
+type NavbarProviderProps = {
+  children: React.ReactNode
+}
+
+const NavbarProvider = ({ children }: NavbarProviderProps) => {
+  const [activeItem, setActiveItem] = useState<Area | null>(null)
+
+  return (
+    <NavbarContext.Provider
+      value={{
+        activeItem,
+        setActiveItem,
+      }}
+    >
+      {children}
+    </NavbarContext.Provider>
+  )
+}
+
+export default NavbarProvider
+
+export const useNavbar = (): NavbarContextType => {
+  const context = useContext(NavbarContext)
+
+  if (!context) {
+    throw new Error("useNavbar must be used inside a NavbarProvider")
+  }
+
+  return context
+}
@@ -0,0 +1,44 @@
+"use client"
+
+import { createContext, useEffect } from "react"
+import { useSidebar } from "./sidebar"
+import { useArea } from "./area"
+import capitalize from "../utils/capitalize"
+
+const PageTitleContext = createContext(null)
+
+type PageTitleProviderProps = {
+  children: React.ReactNode
+}
+
+const PageTitleProvider = ({ children }: PageTitleProviderProps) => {
+  const { activePath, getActiveItem } = useSidebar()
+  const { area } = useArea()
+
+  useEffect(() => {
+    const titleSuffix = `Medusa ${capitalize(area)} API Reference`
+
+    if (!activePath?.length) {
+      document.title = titleSuffix
+    } else {
+      const activeItem = getActiveItem()
+      if (activeItem?.path === activePath) {
+        document.title = `${activeItem?.title} - ${titleSuffix}`
+      } else {
+        // find the child that matches the active path
+        const item = activeItem?.children?.find((i) => i.path === activePath)
+        if (item) {
+          document.title = `${item.title} - ${titleSuffix}`
+        }
+      }
+    }
+  }, [activePath, area, getActiveItem])
+
+  return (
+    <PageTitleContext.Provider value={null}>
+      {children}
+    </PageTitleContext.Provider>
+  )
+}
+
+export default PageTitleProvider
@@ -0,0 +1,322 @@
+"use client"
+
+import { OpenAPIV3 } from "openapi-types"
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useReducer,
+  useState,
+} from "react"
+
+export enum SidebarItemSections {
+  TOP = "top",
+  BOTTOM = "bottom",
+  MOBILE = "mobile",
+}
+
+export type SidebarItemType = {
+  path: string
+  title: string
+  method?: OpenAPIV3.HttpMethods
+  children?: SidebarItemType[]
+  loaded?: boolean
+  isPathHref?: boolean
+  hasChildren?: boolean
+}
+
+type SidebarSectionItemsType = {
+  [k in SidebarItemSections]: SidebarItemType[]
+}
+
+type SidebarContextType = {
+  items: SidebarSectionItemsType
+  activePath: string | null
+  getActiveItem: () => SidebarItemType | undefined
+  setActivePath: (path: string | null) => void
+  isItemActive: (item: SidebarItemType, checkChildren?: boolean) => boolean
+  addItems: (
+    item: SidebarItemType[],
+    options?: {
+      section?: SidebarItemSections
+      parent?: {
+        path: string
+        changeLoaded?: boolean
+      }
+      indexPosition?: number
+      ignoreExisting?: boolean
+    }
+  ) => void
+  findItemInSection: (
+    section: SidebarItemType[],
+    itemPath: string,
+    checkChildren?: boolean
+  ) => SidebarItemType | undefined
+  mobileSidebarOpen: boolean
+  setMobileSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>
+  isSidebarEmpty: () => boolean
+  desktopSidebarOpen: boolean
+  setDesktopSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const SidebarContext = createContext<SidebarContextType | null>(null)
+
+type SidebarProviderProps = {
+  children?: ReactNode
+}
+
+type ActionOptionsType = {
+  section?: SidebarItemSections
+  parent?: {
+    path: string
+    changeLoaded?: boolean
+  }
+  indexPosition?: number
+  ignoreExisting?: boolean
+}
+
+type ActionType = {
+  type: "add" | "update"
+  items: SidebarItemType[]
+  options?: ActionOptionsType
+}
+
+const reducer = (
+  state: SidebarSectionItemsType,
+  { type, items, options }: ActionType
+) => {
+  const {
+    section = SidebarItemSections.TOP,
+    parent,
+    indexPosition,
+  } = options || {}
+
+  switch (type) {
+    case "add":
+      return {
+        ...state,
+        [section]:
+          indexPosition !== undefined
+            ? [
+                ...state[section].slice(0, indexPosition),
+                ...items,
+                ...state[section].slice(indexPosition),
+              ]
+            : [...state[section], ...items],
+      }
+      break
+    case "update":
+      // find item index
+      return {
+        ...state,
+        [section]: state[section].map((i) => {
+          if (i.path === parent?.path) {
+            return {
+              ...i,
+              children: [...(i.children || []), ...items],
+              loaded: parent.changeLoaded ? true : i.loaded,
+            }
+          }
+          return i
+        }),
+      }
+    default:
+      return state
+  }
+}
+
+const SidebarProvider = ({ children }: SidebarProviderProps) => {
+  const [items, dispatch] = useReducer(reducer, {
+    top: [
+      {
+        title: "Introduction",
+        path: "",
+        loaded: true,
+      },
+    ],
+    bottom: [],
+    mobile: [
+      {
+        title: "Docs",
+        path: "https://docs.medusajs.com/",
+        loaded: true,
+        isPathHref: true,
+      },
+      {
+        title: "User Guide",
+        path: "https://docs.medusajs.com/user-guide",
+        loaded: true,
+        isPathHref: true,
+      },
+      {
+        title: "Store API",
+        path: "/api/store",
+        loaded: true,
+        isPathHref: true,
+      },
+      {
+        title: "Admin API",
+        path: "/api/admin",
+        loaded: true,
+        isPathHref: true,
+      },
+    ],
+  })
+  const [activePath, setActivePath] = useState<string | null>("")
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState<boolean>(false)
+  const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(true)
+
+  const findItemInSection = useCallback(
+    (
+      section: SidebarItemType[],
+      itemPath: string,
+      checkChildren = true
+    ): SidebarItemType | undefined => {
+      return section.find(
+        (item) =>
+          item.path === itemPath ||
+          (checkChildren &&
+            item.children &&
+            findItemInSection(item.children, itemPath))
+      )
+    },
+    []
+  )
+
+  const getActiveItem = useCallback(() => {
+    if (activePath === null) {
+      return undefined
+    }
+
+    return (
+      findItemInSection(items.mobile, activePath) ||
+      findItemInSection(items.top, activePath) ||
+      findItemInSection(items.bottom, activePath)
+    )
+  }, [activePath, items, findItemInSection])
+
+  const isPathInSidebar = (path: string, section: SidebarItemSections) => {
+    const selectedSection =
+      section === SidebarItemSections.BOTTOM ? items.bottom : items.top
+    return findItemInSection(selectedSection, path) !== undefined
+  }
+
+  const addItems = (
+    newItems: SidebarItemType[],
+    options?: {
+      section?: SidebarItemSections
+      parent?: {
+        path: string
+        changeLoaded?: boolean
+      }
+      indexPosition?: number
+      ignoreExisting?: boolean
+    }
+  ) => {
+    const {
+      section = SidebarItemSections.TOP,
+      parent,
+      ignoreExisting = false,
+    } = options || {}
+
+    if (!ignoreExisting) {
+      newItems = newItems.filter((item) => !isPathInSidebar(item.path, section))
+    }
+
+    if (!newItems.length) {
+      return
+    }
+
+    dispatch({
+      type: parent ? "update" : "add",
+      items: newItems,
+      options,
+    })
+  }
+
+  const isItemActive = useCallback(
+    (item: SidebarItemType, checkChildren = false): boolean => {
+      return (
+        item.path === activePath ||
+        (checkChildren && activePath?.split("_")[0] === item.path)
+      )
+    },
+    [activePath]
+  )
+
+  const isSidebarEmpty = useCallback((): boolean => {
+    return Object.values(items).every(
+      (sectionItems) => sectionItems.length === 0
+    )
+  }, [items])
+
+  const init = () => {
+    const currentPath = location.hash.replace("#", "")
+    if (currentPath) {
+      setActivePath(currentPath)
+    }
+  }
+
+  useEffect(() => {
+    init()
+
+    const handleScroll = () => {
+      if (window.scrollY === 0) {
+        setActivePath("")
+        // can't use next router as it doesn't support
+        // changing url without scrolling
+        history.replaceState({}, "", location.pathname)
+      }
+    }
+
+    const handleHashChange = () => {
+      const currentPath = location.hash.replace("#", "")
+      if (currentPath !== activePath) {
+        setActivePath(currentPath)
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    window.addEventListener("hashchange", handleHashChange)
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+      window.removeEventListener("hashchange", handleHashChange)
+    }
+  }, [])
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        items,
+        addItems,
+        activePath,
+        setActivePath,
+        isItemActive,
+        findItemInSection,
+        mobileSidebarOpen,
+        setMobileSidebarOpen,
+        isSidebarEmpty,
+        getActiveItem,
+        desktopSidebarOpen,
+        setDesktopSidebarOpen,
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  )
+}
+
+export default SidebarProvider
+
+export const useSidebar = (): SidebarContextType => {
+  const context = useContext(SidebarContext)
+
+  if (!context) {
+    throw new Error("useSidebar must be used inside a SidebarProvider")
+  }
+
+  return context
+}