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/Loading/Spinner/index.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import clsx from "clsx"
+import { Spinner } from "@medusajs/icons"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export type SpinnerLoadingProps = {
+  iconProps?: IconProps
+}
+
+export const SpinnerLoading = ({ iconProps }: SpinnerLoadingProps) => {
+  return (
+    <span role="status">
+      <Spinner
+        {...iconProps}
+        className={clsx("animate-spin", iconProps?.className)}
+      />
+    </span>
+  )
+}

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

@@ -0,0 +1,43 @@
+import React from "react"
+import clsx from "clsx"
+
+export type LoadingProps = {
+  className?: string
+  barClassName?: string
+  count?: number
+}
+
+export const Loading = ({
+  className,
+  count = 6,
+  barClassName,
+}: LoadingProps) => {
+  const getLoadingBars = () => {
+    const bars = []
+    for (let i = 0; i < count; i++) {
+      bars.push(
+        <span
+          className={clsx(
+            "bg-medusa-bg-subtle-pressed dark:bg-medusa-bg-subtle-pressed-dark h-docs_1 w-full rounded-full",
+            barClassName
+          )}
+          key={i}
+        ></span>
+      )
+    }
+
+    return bars
+  }
+  return (
+    <span
+      role="status"
+      className={clsx(
+        "my-docs_1 flex w-full animate-pulse flex-col gap-docs_1",
+        className
+      )}
+    >
+      {getLoadingBars()}
+      <span className="sr-only">Loading...</span>
+    </span>
+  )
+}