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
parent 16249ec280
commit 914d773d3a
3270 changed files with 22075 additions and 192064 deletions
@@ -0,0 +1,35 @@
+"use client"
+
+import { useColorMode } from "@/providers/color-mode"
+import NavbarIconButton, { NavbarIconButtonProps } from "../IconButton"
+import type IconProps from "@/components/Icons/types"
+import dynamic from "next/dynamic"
+
+const IconLightMode = dynamic<IconProps>(
+  async () => import("../../Icons/LightMode")
+) as React.FC<IconProps>
+
+const IconDarkMode = dynamic<IconProps>(
+  async () => import("../../Icons/DarkMode")
+) as React.FC<IconProps>
+
+type NavbarColorModeToggleProps = {
+  buttonProps?: NavbarIconButtonProps
+}
+
+const NavbarColorModeToggle = ({ buttonProps }: NavbarColorModeToggleProps) => {
+  const { colorMode, toggleColorMode } = useColorMode()
+
+  return (
+    <NavbarIconButton {...buttonProps} onClick={() => toggleColorMode()}>
+      {colorMode === "light" && (
+        <IconLightMode iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
+      {colorMode === "dark" && (
+        <IconDarkMode iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
+    </NavbarIconButton>
+  )
+}
+
+export default NavbarColorModeToggle
@@ -0,0 +1,25 @@
+"use client"
+
+import { useModal } from "../../../providers/modal"
+import Button from "../../Button"
+import DetailedFeedback from "../../DetailedFeedback"
+
+const FeedbackModal = () => {
+  const { setModalProps } = useModal()
+
+  const openModal = () => {
+    setModalProps({
+      title: "Send your Feedback",
+      children: <DetailedFeedback />,
+      contentClassName: "lg:!min-h-auto !p-0",
+    })
+  }
+
+  return (
+    <Button onClick={openModal} variant="secondary">
+      Feedback
+    </Button>
+  )
+}
+
+export default FeedbackModal
@@ -0,0 +1,24 @@
+import clsx from "clsx"
+
+export type NavbarIconButtonProps = React.HTMLAttributes<HTMLButtonElement>
+
+const NavbarIconButton = ({
+  children,
+  className,
+  ...props
+}: NavbarIconButtonProps) => {
+  return (
+    <button
+      className={clsx(
+        "btn-secondary btn-secondary-icon",
+        "[&>svg]:h-[22px] [&>svg]:w-[22px]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default NavbarIconButton
@@ -0,0 +1,42 @@
+"use client"
+
+import clsx from "clsx"
+import Link from "next/link"
+import type { LinkProps } from "next/link"
+import { useNavbar } from "@/providers/navbar"
+import { Area } from "@/types/openapi"
+
+type NavbarLinkProps = {
+  href: string
+  label: string
+  className?: string
+  activeValue?: Area
+} & LinkProps
+
+const NavbarLink = ({
+  href,
+  label,
+  className,
+  activeValue,
+}: NavbarLinkProps) => {
+  const { activeItem } = useNavbar()
+
+  return (
+    <Link
+      href={href}
+      className={clsx(
+        activeItem === activeValue &&
+          "text-medusa-fg-base dark:text-medusa-fg-base-dark",
+        activeItem !== activeValue &&
+          "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+        "text-compact-small-plus inline-block",
+        "hover:text-medusa-fg-base dark:hover:text-medusa-fg-base-dark",
+        className
+      )}
+    >
+      {label}
+    </Link>
+  )
+}
+
+export default NavbarLink
@@ -0,0 +1,27 @@
+"use client"
+
+import { useColorMode } from "@/providers/color-mode"
+import Image from "next/image"
+import Link from "next/link"
+
+const NavbarLogo = () => {
+  const { colorMode } = useColorMode()
+
+  return (
+    <Link href={`/`} className="flex-1">
+      <Image
+        src={
+          colorMode === "light"
+            ? "/images/logo-icon.png"
+            : "/images/logo-icon-dark.png"
+        }
+        alt="Medusa Logo"
+        height={20}
+        width={20}
+        className="align-middle"
+      />
+    </Link>
+  )
+}
+
+export default NavbarLogo
@@ -0,0 +1,36 @@
+"use client"
+
+import NavbarIconButton, { NavbarIconButtonProps } from "../IconButton"
+import { useSidebar } from "@/providers/sidebar"
+import IconSidebar from "../../Icons/Sidebar"
+import clsx from "clsx"
+import IconXMark from "../../Icons/XMark"
+
+type NavbarMenuButtonProps = {
+  buttonProps?: NavbarIconButtonProps
+}
+
+const NavbarMenuButton = ({ buttonProps }: NavbarMenuButtonProps) => {
+  const { items, setMobileSidebarOpen, mobileSidebarOpen } = useSidebar()
+
+  return (
+    <NavbarIconButton
+      {...buttonProps}
+      className={clsx("mr-1 lg:!hidden", buttonProps?.className)}
+      onClick={() => {
+        if (items.top.length !== 0 && items.bottom.length !== 0) {
+          setMobileSidebarOpen((prevValue) => !prevValue)
+        }
+      }}
+    >
+      {!mobileSidebarOpen && (
+        <IconSidebar iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
+      {mobileSidebarOpen && (
+        <IconXMark iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
+    </NavbarIconButton>
+  )
+}
+
+export default NavbarMenuButton
@@ -0,0 +1,27 @@
+"use client"
+
+import { useColorMode } from "@/providers/color-mode"
+import Image from "next/image"
+import Link from "next/link"
+
+const NavbarMobileLogo = () => {
+  const { colorMode } = useColorMode()
+
+  return (
+    <Link href={`/`} className="flex-1 lg:hidden">
+      <Image
+        src={
+          colorMode === "light"
+            ? "/images/logo-mobile.png"
+            : "/images/logo-mobile-dark.png"
+        }
+        alt="Medusa Logo"
+        height={20}
+        width={82}
+        className="mx-auto align-middle"
+      />
+    </Link>
+  )
+}
+
+export default NavbarMobileLogo
@@ -0,0 +1,58 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import NavbarMenuButton from "../MenuButton"
+import NavbarMobileLogo from "../MobileLogo"
+import SearchBar from "../../SearchBar"
+import NavbarColorModeToggle from "../ColorModeToggle"
+
+const MobileMenu = () => {
+  const [isMobile, setIsMobile] = useState(false)
+
+  const handleResize = useCallback(() => {
+    if (window.innerWidth < 1025 && !isMobile) {
+      setIsMobile(true)
+    } else if (window.innerWidth >= 1025 && isMobile) {
+      setIsMobile(false)
+    }
+  }, [isMobile])
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [handleResize])
+
+  useEffect(() => {
+    handleResize()
+  }, [])
+
+  return (
+    <div className="flex w-full items-center justify-between lg:hidden">
+      {isMobile && (
+        <>
+          <NavbarMenuButton
+            buttonProps={{
+              className:
+                "!border-none !bg-transparent !bg-no-image !shadow-none",
+            }}
+          />
+          <NavbarMobileLogo />
+          <div className="flex">
+            <SearchBar />
+            <NavbarColorModeToggle
+              buttonProps={{
+                className:
+                  "!border-none !bg-transparent !bg-no-image !shadow-none ml-1",
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default MobileMenu
@@ -0,0 +1,88 @@
+"use client"
+
+import IconSidebar from "@/components/Icons/Sidebar"
+import Tooltip from "@/components/Tooltip"
+import NavbarIconButton from "../IconButton"
+import { useSidebar } from "../../../providers/sidebar"
+import clsx from "clsx"
+import { useEffect, useState } from "react"
+
+const NavbarSidebarButton = () => {
+  const { desktopSidebarOpen, setDesktopSidebarOpen } = useSidebar()
+  const [isApple, setIsApple] = useState(false)
+
+  const toggleSidebar = () => {
+    setDesktopSidebarOpen((prevValue) => !prevValue)
+  }
+
+  useEffect(() => {
+    setIsApple(navigator.userAgent.toLowerCase().indexOf("mac") !== 0)
+    function isEditingContent(event: KeyboardEvent) {
+      const element = event.target as HTMLElement
+      const tagName = element.tagName
+      return (
+        element.isContentEditable ||
+        tagName === "INPUT" ||
+        tagName === "SELECT" ||
+        tagName === "TEXTAREA"
+      )
+    }
+
+    function sidebarShortcut(e: KeyboardEvent) {
+      if (
+        (e.metaKey || e.ctrlKey) &&
+        e.key.toLowerCase() === "i" &&
+        !isEditingContent(e)
+      ) {
+        e.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", sidebarShortcut)
+
+    return () => {
+      window.removeEventListener("keydown", sidebarShortcut)
+    }
+  }, [])
+
+  const getPlatformKey = () =>
+    `
+    <kbd class="${clsx(
+      "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+      "border border-solid rounded-sm border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
+      "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text font-base text-compact-x-small-plus",
+      "inline-flex !p-0 justify-center items-center shadow-none ml-0.5",
+      isApple && "w-[22px] h-[22px]",
+      !isApple && "w-1.5 h-1.5"
+    )}">${isApple ? "⌘" : "Ctrl"}</kbd>
+    `
+
+  return (
+    <Tooltip
+      html={
+        desktopSidebarOpen
+          ? `<span class="text-compact-x-small-plus">Close sidebar ${getPlatformKey()}
+        <kbd class="${clsx(
+          "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+          "border border-solid rounded-sm border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
+          "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text font-base text-compact-x-small-plus",
+          "inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none"
+        )}">I</kbd></span>`
+          : `<span class="text-compact-x-small-plus">Lock sidebar open ${getPlatformKey()}
+      <kbd class="${clsx(
+        "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+        "border border-solid rounded-sm border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
+        "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text font-base text-compact-x-small-plus",
+        "inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none"
+      )}">I</kbd></span>`
+      }
+    >
+      <NavbarIconButton onClick={toggleSidebar}>
+        <IconSidebar iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      </NavbarIconButton>
+    </Tooltip>
+  )
+}
+
+export default NavbarSidebarButton
@@ -0,0 +1,58 @@
+import clsx from "clsx"
+import NavbarLink from "./Link"
+import NavbarColorModeToggle from "./ColorModeToggle"
+import NavbarLogo from "./Logo"
+import SearchBar from "../SearchBar"
+import NavbarMenuButton from "./MenuButton"
+import getLinkWithBasePath from "../../utils/get-link-with-base-path"
+import FeedbackModal from "./FeedbackModal"
+import NavbarMobileLogo from "./MobileLogo"
+import MobileMenu from "./MobileMenu"
+
+const Navbar = () => {
+  return (
+    <nav
+      className={clsx(
+        "h-navbar sticky top-0 w-full justify-between",
+        "bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base dark:border-medusa-border-base-dark z-[400] border-b"
+      )}
+    >
+      <div
+        className={clsx(
+          "h-navbar max-w-xxl py-0.75 sticky top-0 mx-auto flex w-full justify-between px-1 lg:px-3"
+        )}
+      >
+        <div className="hidden w-full items-center gap-0.5 lg:flex lg:w-auto lg:gap-1.5">
+          <NavbarLogo />
+          <div className="hidden items-center gap-1.5 lg:flex">
+            <NavbarLink href="https://docs.medusajs.com/" label="Docs" />
+            <NavbarLink
+              href="https://docs.medusajs.com/user-guide"
+              label="User Guide"
+            />
+            <NavbarLink
+              href={getLinkWithBasePath("/store")}
+              label="Store API"
+              activeValue="store"
+            />
+            <NavbarLink
+              href={getLinkWithBasePath("/admin")}
+              label="Admin API"
+              activeValue="admin"
+            />
+          </div>
+        </div>
+        <div className="hidden min-w-0 flex-1 items-center justify-end gap-0.5 lg:flex">
+          <div className="w-[240px] [&>*]:flex-1">
+            <SearchBar />
+          </div>
+          <NavbarColorModeToggle />
+          <FeedbackModal />
+        </div>
+        <MobileMenu />
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar