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/apps/docs/src/theme/MDXComponents/A.tsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from "react"
+import type { Props } from "@theme/MDXComponents/A"
+import { getGlossaryByPath } from "../../utils/glossary"
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
+import { MedusaDocusaurusContext } from "@medusajs/docs"
+import Link from "@docusaurus/Link"
+import clsx from "clsx"
+import { Tooltip } from "docs-ui"
+
+const MDXA = (props: Props) => {
+  const { href, children } = props
+  const {
+    siteConfig: { url },
+  } = useDocusaurusContext() as MedusaDocusaurusContext
+
+  // check if a glossary exists for href
+  const glossary = useMemo(() => {
+    return (typeof children === "string" && href.startsWith("/")) ||
+      href.includes(url)
+      ? getGlossaryByPath(children as string)
+      : null
+  }, [href, children])
+
+  if (!glossary) {
+    return <Link {...props} />
+  }
+
+  return (
+    <Tooltip
+      tooltipChildren={
+        <span className="flex flex-col gap-0.25 max-w-[200px]">
+          <span className="text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark">
+            {glossary.title}
+          </span>
+          <span className="text-compact-small">{glossary.content}</span>
+        </span>
+      }
+      clickable={true}
+    >
+      <Link
+        {...props}
+        className={clsx(props.className, "border-0 border-b border-dashed")}
+      />
+    </Tooltip>
+  )
+}
+
+export default MDXA

www/apps/docs/src/theme/MDXComponents/Details.tsx

@@ -0,0 +1,24 @@
+import React, { type ComponentProps, type ReactElement } from "react"
+import type { Props } from "@theme/MDXComponents/Details"
+import Details, { DetailsProps } from "../Details"
+import { type DetailsSummaryProps } from "docs-ui"
+
+type MDXDetailsProps = Props & DetailsProps
+
+export default function MDXDetails(props: MDXDetailsProps): JSX.Element {
+  const items = React.Children.toArray(props.children)
+  // Split summary item from the rest to pass it as a separate prop to the
+  // Details theme component
+  const summary = items.find(
+    (item): item is ReactElement<ComponentProps<"summary">> =>
+      React.isValidElement(item) &&
+      (item.props as { mdxType: string } | null)?.mdxType === "summary"
+  ) as React.ReactElement<DetailsSummaryProps>
+  const children = <>{items.filter((item) => item !== summary)}</>
+
+  return (
+    <Details summary={summary} {...props}>
+      {children}
+    </Details>
+  )
+}

www/apps/docs/src/theme/MDXComponents/index.tsx

@@ -0,0 +1,17 @@
+// Import the original mapper
+import MDXComponents from "@theme-original/MDXComponents"
+import CloudinaryImage from "@site/src/components/CloudinaryImage"
+import MDXDetails from "./Details"
+import MDXA from "./A"
+import { Kbd, DetailsSummary, InlineCode } from "docs-ui"
+
+export default {
+  // Re-use the default mapping
+  ...MDXComponents,
+  inlineCode: InlineCode,
+  img: CloudinaryImage,
+  details: MDXDetails,
+  summary: DetailsSummary,
+  a: MDXA,
+  kbd: Kbd,
+}