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/api-reference/components/MDXComponents/H2/index.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { InView } from "react-intersection-observer"
+import { useSidebar } from "docs-ui"
+import checkElementInViewport from "../../../utils/check-element-in-viewport"
+import { useEffect } from "react"
+import getSectionId from "../../../utils/get-section-id"
+
+type H2Props = {
+  addToSidebar?: boolean
+} & React.HTMLAttributes<HTMLHeadingElement>
+
+const H2 = ({ addToSidebar = true, children, ...props }: H2Props) => {
+  const { activePath, setActivePath, addItems } = useSidebar()
+
+  const handleViewChange = (
+    inView: boolean,
+    entry: IntersectionObserverEntry
+  ) => {
+    if (!addToSidebar) {
+      return
+    }
+    const heading = entry.target
+    if (
+      (inView ||
+        checkElementInViewport(heading.parentElement || heading, 40)) &&
+      window.scrollY !== 0 &&
+      activePath !== heading.id
+    ) {
+      // can't use next router as it doesn't support
+      // changing url without scrolling
+      history.pushState({}, "", `#${heading.id}`)
+      setActivePath(heading.id)
+    }
+  }
+  const id = getSectionId([children as string])
+
+  useEffect(() => {
+    if (id === (activePath || location.hash.replace("#", ""))) {
+      const elm = document.getElementById(id)
+      elm?.scrollIntoView()
+    }
+
+    addItems([
+      {
+        path: `${id}`,
+        title: children as string,
+        loaded: true,
+      },
+    ])
+  }, [])
+
+  return (
+    <InView
+      as="h2"
+      threshold={0.4}
+      skip={!addToSidebar}
+      initialInView={false}
+      {...props}
+      onChange={handleViewChange}
+      id={id}
+    >
+      {children}
+    </InView>
+  )
+}
+
+export default H2

www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx

@@ -0,0 +1,66 @@
+import type { MDXContentClientProps } from "@/components/MDXContent/Client"
+import type { MDXContentServerProps } from "@/components/MDXContent/Server"
+import type { SecuritySchemeObject } from "@/types/openapi"
+import getSecuritySchemaTypeName from "@/utils/get-security-schema-type-name"
+import clsx from "clsx"
+import { Loading } from "docs-ui"
+import dynamic from "next/dynamic"
+
+const MDXContentClient = dynamic<MDXContentClientProps>(
+  async () => import("../../../MDXContent/Client"),
+  {
+    loading: () => <Loading />,
+  }
+) as React.FC<MDXContentClientProps>
+
+const MDXContentServer = dynamic<MDXContentServerProps>(
+  async () => import("../../../MDXContent/Server"),
+  {
+    loading: () => <Loading />,
+  }
+) as React.FC<MDXContentServerProps>
+
+export type SecurityDescriptionProps = {
+  securitySchema: SecuritySchemeObject
+  isServer?: boolean
+}
+
+const SecurityDescription = ({
+  securitySchema,
+  isServer = true,
+}: SecurityDescriptionProps) => {
+  return (
+    <>
+      <h2>{securitySchema["x-displayName"] as string}</h2>
+      {isServer && <MDXContentServer content={securitySchema.description} />}
+      {!isServer && <MDXContentClient content={securitySchema.description} />}
+      <p>
+        <strong>Security Scheme Type:</strong>{" "}
+        {getSecuritySchemaTypeName(securitySchema)}
+      </p>
+      {(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
+        <p
+          className={clsx(
+            "bg-docs-bg-surface dark:bg-docs-bg-surface-dark",
+            "p-1"
+          )}
+        >
+          <strong>
+            {securitySchema.type === "http"
+              ? "HTTP Authorization Scheme"
+              : "Cookie parameter name"}
+            :
+          </strong>{" "}
+          <code>
+            {securitySchema.type === "http"
+              ? securitySchema.scheme
+              : securitySchema.name}
+          </code>
+        </p>
+      )}
+      <hr />
+    </>
+  )
+}
+
+export default SecurityDescription

www/apps/api-reference/components/MDXComponents/Security/index.tsx

@@ -0,0 +1,34 @@
+import dynamic from "next/dynamic"
+import type { OpenAPIV3 } from "openapi-types"
+import type { SecurityDescriptionProps } from "./Description"
+import { Fragment } from "react"
+
+const SecurityDescription = dynamic<SecurityDescriptionProps>(
+  async () => import("./Description")
+) as React.FC<SecurityDescriptionProps>
+
+type SecurityProps = {
+  specs?: OpenAPIV3.Document
+}
+
+const Security = ({ specs }: SecurityProps) => {
+  return (
+    <div>
+      {specs && (
+        <>
+          {Object.values(specs.components?.securitySchemes || {}).map(
+            (securitySchema, index) => (
+              <Fragment key={index}>
+                {!("$ref" in securitySchema) && (
+                  <SecurityDescription securitySchema={securitySchema} />
+                )}
+              </Fragment>
+            )
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default Security

www/apps/api-reference/components/MDXComponents/index.tsx

@@ -0,0 +1,22 @@
+import type { MDXComponents } from "mdx/types"
+import Security from "./Security"
+import type { OpenAPIV3 } from "openapi-types"
+import H2 from "./H2"
+import { CodeMdx, Kbd, NextLink } from "docs-ui"
+
+export type ScopeType = {
+  specs?: OpenAPIV3.Document
+  addToSidebar?: boolean
+}
+
+const getCustomComponents = (scope?: ScopeType): MDXComponents => {
+  return {
+    Security: () => <Security specs={scope?.specs} />,
+    code: CodeMdx,
+    a: NextLink,
+    h2: (props) => <H2 addToSidebar={scope?.addToSidebar} {...props} />,
+    kbd: Kbd,
+  }
+}
+
+export default getCustomComponents