docs: create docs workspace (#5174)

* docs: migrate ui docs to docs universe

* created yarn workspace

* added eslint and tsconfig configurations

* fix eslint configurations

* fixed eslint configurations

* shared tailwind configurations

* added shared ui package

* added more shared components

* migrating more components

* made details components shared

* move InlineCode component

* moved InputText

* moved Loading component

* Moved Modal component

* moved Select components

* Moved Tooltip component

* moved Search components

* moved ColorMode provider

* Moved Notification components and providers

* used icons package

* use UI colors in api-reference

* moved Navbar component

* used Navbar and Search in UI docs

* added Feedback to UI docs

* general enhancements

* fix color mode

* added copy colors file from ui-preset

* added features and enhancements to UI docs

* move Sidebar component and provider

* general fixes and preparations for deployment

* update docusaurus version

* adjusted versions

* fix output directory

* remove rootDirectory property

* fix yarn.lock

* moved code component

* added vale for all docs MD and MDX

* fix tests

* fix vale error

* fix deployment errors

* change ignore commands

* add output directory

* fix docs test

* general fixes

* content fixes

* fix announcement script

* added changeset

* fix vale checks

* added nofilter option

* fix vale error

www/packages/docs-ui/src/components/Navbar/ColorModeToggle/index.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import React from "react"
+import { NavbarIconButton, NavbarIconButtonProps } from "../IconButton"
+import { useColorMode } from "@/providers"
+import { Moon, Sun } from "@medusajs/icons"
+
+export type NavbarColorModeToggleProps = {
+  buttonProps?: NavbarIconButtonProps
+}
+
+export const NavbarColorModeToggle = ({
+  buttonProps,
+}: NavbarColorModeToggleProps) => {
+  const { colorMode, toggleColorMode } = useColorMode()
+
+  return (
+    <NavbarIconButton {...buttonProps} onClick={() => toggleColorMode()}>
+      {colorMode === "light" && (
+        <Sun className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+      )}
+      {colorMode === "dark" && (
+        <Moon className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+      )}
+    </NavbarIconButton>
+  )
+}

www/packages/docs-ui/src/components/Navbar/IconButton/index.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import clsx from "clsx"
+import { Button, ButtonProps } from "@/components"
+
+export type NavbarIconButtonProps = ButtonProps
+
+export const NavbarIconButton = ({
+  children,
+  className,
+  ...props
+}: NavbarIconButtonProps) => {
+  return (
+    <Button
+      className={clsx(
+        "[&>svg]:h-[22px] [&>svg]:w-[22px] btn-secondary-icon",
+        className
+      )}
+      variant="secondary"
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}

www/packages/docs-ui/src/components/Navbar/Link/index.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import React, { useMemo } from "react"
+import clsx from "clsx"
+import { useNavbar } from "@/providers"
+import { NextLink, NextLinkProps } from "@/components"
+
+export type NavbarLinkProps = {
+  href: string
+  label: string
+  className?: string
+  activeValuePattern?: RegExp
+} & NextLinkProps
+
+export const NavbarLink = ({
+  href,
+  label,
+  className,
+  activeValuePattern,
+}: NavbarLinkProps) => {
+  const { activeItem } = useNavbar()
+
+  const isActive = useMemo(() => {
+    return activeItem
+      ? activeValuePattern
+        ? activeValuePattern.test(activeItem)
+        : href === activeItem
+      : false
+  }, [activeItem, href, activeValuePattern])
+
+  return (
+    <NextLink
+      href={href}
+      className={clsx(
+        isActive && "!text-medusa-fg-base dark:!text-medusa-fg-base-dark",
+        !isActive && "!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}
+    </NextLink>
+  )
+}

www/packages/docs-ui/src/components/Navbar/Logo/index.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import React from "react"
+import { useColorMode } from "@/providers"
+import Link from "next/link"
+import clsx from "clsx"
+
+export type NavbarLogoProps = {
+  light: string
+  dark?: string
+  className?: string
+  imageClassName?: string
+}
+
+export const NavbarLogo = ({
+  light,
+  dark,
+  className,
+  imageClassName,
+}: NavbarLogoProps) => {
+  const { colorMode } = useColorMode()
+
+  return (
+    <Link href={`/`} className={clsx("flex-1", className)}>
+      <img
+        src={colorMode === "light" ? light : dark || light}
+        alt="Medusa Logo"
+        height={20}
+        width={20}
+        className={clsx("align-middle", imageClassName)}
+      />
+    </Link>
+  )
+}

www/packages/docs-ui/src/components/Navbar/MobileMenu/Button/index.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import React from "react"
+import { NavbarIconButton, NavbarIconButtonProps } from "../../IconButton"
+import clsx from "clsx"
+import { Sidebar, XMark } from "@medusajs/icons"
+
+export type NavbarMobileMenuButtonProps = {
+  buttonProps?: NavbarIconButtonProps
+  mobileSidebarOpen: boolean
+  setMobileSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>
+  isLoading?: boolean
+}
+
+export const NavbarMobileMenuButton = ({
+  buttonProps,
+  mobileSidebarOpen,
+  setMobileSidebarOpen,
+  isLoading = false,
+}: NavbarMobileMenuButtonProps) => {
+  return (
+    <NavbarIconButton
+      {...buttonProps}
+      className={clsx("mr-docs_1 lg:!hidden", buttonProps?.className)}
+      onClick={() => {
+        if (!isLoading) {
+          setMobileSidebarOpen((prevValue) => !prevValue)
+        }
+      }}
+    >
+      {!mobileSidebarOpen && (
+        <Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+      )}
+      {mobileSidebarOpen && (
+        <XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+      )}
+    </NavbarIconButton>
+  )
+}

www/packages/docs-ui/src/components/Navbar/MobileMenu/index.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import React from "react"
+import { NavbarMobileMenuButton, NavbarMobileMenuButtonProps } from "./Button"
+import { NavbarColorModeToggle } from "../ColorModeToggle"
+import { NavbarSearchModalOpener } from "../SearchModalOpener"
+import { useMobile } from "@/providers"
+import clsx from "clsx"
+import { NavbarLogo, NavbarLogoProps } from "../Logo"
+
+export type NavbarMobileMenuProps = {
+  menuButton: NavbarMobileMenuButtonProps
+  logo: NavbarLogoProps
+}
+
+export const NavbarMobileMenu = ({
+  menuButton,
+  logo,
+}: NavbarMobileMenuProps) => {
+  const { isMobile } = useMobile()
+
+  return (
+    <div className="flex w-full items-center justify-between lg:hidden">
+      {isMobile && (
+        <>
+          <NavbarMobileMenuButton
+            {...menuButton}
+            buttonProps={{
+              ...(menuButton.buttonProps || {}),
+              className: clsx(
+                menuButton.buttonProps?.className,
+                "!border-none !bg-transparent !bg-no-image !shadow-none"
+              ),
+            }}
+          />
+          <NavbarLogo
+            {...logo}
+            className="lg:hidden"
+            imageClassName="mx-auto"
+          />
+          <div className="flex">
+            <NavbarSearchModalOpener />
+            <NavbarColorModeToggle
+              buttonProps={{
+                className:
+                  "!border-none !bg-transparent !bg-no-image !shadow-none ml-docs_1",
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

www/packages/docs-ui/src/components/Navbar/SearchModalOpener/index.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import React from "react"
+import { SearchModalOpener } from "@/components"
+import { useMobile } from "@/providers"
+
+export type NavbarSearchModalOpenerProps = {
+  isLoading?: boolean
+}
+
+export const NavbarSearchModalOpener = ({
+  isLoading,
+}: NavbarSearchModalOpenerProps) => {
+  const { isMobile } = useMobile()
+
+  return <SearchModalOpener isMobile={isMobile} isLoading={isLoading} />
+}

www/packages/docs-ui/src/components/Navbar/index.tsx

@@ -0,0 +1,67 @@
+import React from "react"
+import clsx from "clsx"
+import { NavbarLink, NavbarLinkProps } from "./Link"
+import { NavbarColorModeToggle } from "./ColorModeToggle"
+import { NavbarLogo, NavbarLogoProps } from "./Logo"
+import { NavbarMobileMenu } from "./MobileMenu"
+import { NavbarSearchModalOpener } from "./SearchModalOpener"
+import { NavbarMobileMenuButtonProps } from "./MobileMenu/Button"
+
+export type NavbarProps = {
+  logo: NavbarLogoProps
+  items: NavbarLinkProps[]
+  showSearchOpener?: boolean
+  showColorModeToggle?: boolean
+  additionalActions?: React.ReactNode
+  mobileMenuButton: NavbarMobileMenuButtonProps
+  isLoading?: boolean
+  className?: string
+}
+
+export const Navbar = ({
+  logo,
+  items,
+  showSearchOpener = true,
+  showColorModeToggle = true,
+  additionalActions,
+  mobileMenuButton,
+  isLoading,
+  className,
+}: NavbarProps) => {
+  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",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "h-navbar max-w-xxl py-docs_0.75 sticky top-0 mx-auto flex w-full justify-between px-docs_1 lg:px-docs_3"
+        )}
+      >
+        <div className="hidden w-full items-center gap-docs_0.5 lg:flex lg:w-auto lg:gap-docs_1.5">
+          <NavbarLogo {...logo} />
+          {items.map((item, index) => (
+            <NavbarLink key={index} {...item} />
+          ))}
+        </div>
+        <div className="hidden min-w-0 flex-1 items-center justify-end gap-docs_0.5 lg:flex">
+          {showSearchOpener && (
+            <NavbarSearchModalOpener isLoading={isLoading} />
+          )}
+          {showColorModeToggle && <NavbarColorModeToggle />}
+          {additionalActions}
+        </div>
+        <NavbarMobileMenu
+          logo={logo}
+          menuButton={{
+            ...mobileMenuButton,
+            isLoading,
+          }}
+        />
+      </div>
+    </nav>
+  )
+}