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/components/LearningPath/Steps/Actions/index.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { useLearningPath } from "../../../../providers/LearningPath"
+import { Button } from "docs-ui"
+
+type LearningPathStepActionsType = {
+  onFinish?: () => void
+  onClose?: () => void
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
+  onFinish,
+  onClose,
+}) => {
+  const { hasNextStep, nextStep, endPath } = useLearningPath()
+
+  const handleFinish = () => {
+    if (onFinish) {
+      onFinish()
+    } else {
+      endPath()
+    }
+  }
+
+  return (
+    <div className="flex gap-0.5 p-1 justify-end items-center">
+      <Button onClick={onClose}>Close</Button>
+      {hasNextStep() && (
+        <Button onClick={nextStep} variant="primary">
+          Next
+        </Button>
+      )}
+      {!hasNextStep() && (
+        <Button onClick={handleFinish} variant="primary">
+          Finish
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default LearningPathStepActions

www/apps/docs/src/components/LearningPath/Steps/index.tsx

@@ -0,0 +1,83 @@
+import { useLearningPath } from "@site/src/providers/LearningPath"
+import React from "react"
+import LearningPathStepActions from "./Actions"
+import clsx from "clsx"
+import IconCircleDottedLine from "@site/src/theme/Icon/CircleDottedLine"
+import Link from "@docusaurus/Link"
+import { CheckCircleSolid, CircleMiniSolid } from "@medusajs/icons"
+
+type LearningPathStepsProps = {
+  onFinish?: () => void
+  onClose?: () => void
+}
+
+const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
+  const { path, currentStep, goToStep } = useLearningPath()
+
+  if (!path) {
+    return <></>
+  }
+
+  return (
+    <>
+      <div className="overflow-auto basis-3/4">
+        {path.steps.map((step, index) => (
+          <div
+            className={clsx(
+              "border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
+              "relative p-1"
+            )}
+            key={index}
+          >
+            <div className={clsx("flex items-center gap-1")}>
+              <div className="w-2 flex-none flex items-center justify-center">
+                {index === currentStep && (
+                  <IconCircleDottedLine
+                    className={clsx(
+                      "shadow-active dark:shadow-active-dark rounded-full",
+                      "text-ui-fg-interactive"
+                    )}
+                  />
+                )}
+                {index < currentStep && (
+                  <CheckCircleSolid className="text-ui-fg-interactive" />
+                )}
+                {index > currentStep && (
+                  <CircleMiniSolid className="text-ui-fg-subtle" />
+                )}
+              </div>
+              <span
+                className={clsx(
+                  "text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark"
+                )}
+              >
+                {step.title}
+              </span>
+            </div>
+            {index === currentStep && (
+              <div className={clsx("flex items-center gap-1")}>
+                <div className="w-2 flex-none"></div>
+                <div className={clsx("text-medium text-ui-fg-subtle mt-1")}>
+                  {step.descriptionJSX ?? step.description}
+                </div>
+              </div>
+            )}
+            {index < currentStep && (
+              <Link
+                href={step.path}
+                className={clsx("absolute top-0 left-0 w-full h-full")}
+                onClick={(e) => {
+                  e.preventDefault()
+                  goToStep(index)
+                }}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      <LearningPathStepActions {...rest} />
+    </>
+  )
+}
+
+export default LearningPathSteps