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/hooks/use-current-learning-path.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from "react"
+import { useLearningPath } from "../providers/LearningPath"
+import LearningPathSteps from "../components/LearningPath/Steps"
+import LearningPathFinish from "../components/LearningPath/Finish"
+import LearningPathIcon from "../components/LearningPath/Icon"
+import { useNotifications } from "docs-ui"
+
+const useCurrentLearningPath = () => {
+  const { path, currentStep, updatePath, endPath } = useLearningPath()
+  const step = path?.steps[currentStep]
+  const {
+    addNotification,
+    generateId,
+    removeNotification,
+    updateNotification,
+  } = useNotifications()
+
+  // used when a notification closed (finished or not)
+  const handleClose = (notificationId: string, shouldEndPath = true) => {
+    if (shouldEndPath) {
+      setTimeout(() => {
+        endPath()
+      }, 500)
+    }
+    removeNotification(notificationId)
+  }
+
+  // used when the learning path is completely finished
+  // shows the finish step, if the path has any
+  const handleFinish = (notificationId: string) => {
+    if (path.finish) {
+      updateNotification(notificationId, {
+        title: path.finish.step.title,
+        text: path.finish.step.description,
+        type: "custom",
+        layout: "default",
+        CustomIcon: (
+          <LearningPathIcon
+            className="!w-2 !h-2"
+            imgClassName="!w-1.5 !h-1.5"
+          />
+        ),
+        children: (
+          <LearningPathFinish
+            {...path.finish}
+            onRating={() =>
+              setTimeout(() => {
+                handleClose(notificationId, false)
+              }, 1500)
+            }
+          />
+        ),
+      })
+      endPath()
+    } else {
+      handleClose(notificationId)
+    }
+  }
+
+  const LearningStep = (notificationId: string) => {
+    return <LearningPathSteps onFinish={() => handleFinish(notificationId)} />
+  }
+
+  // create a notification when a path is initialized
+  useEffect(() => {
+    if (path && !path.notificationId) {
+      const id = generateId()
+
+      addNotification({
+        title: path.label,
+        text: step?.description,
+        onClose: () => handleClose(id),
+        layout: "empty",
+        id,
+        children: LearningStep(id),
+        className: "flex flex-col",
+      })
+      updatePath({
+        notificationId: id,
+      })
+    }
+  }, [path])
+
+  // update an existing notification when the step changes
+  useEffect(() => {
+    if (path && path.notificationId && step) {
+      updateNotification(path.notificationId, {
+        text: step?.description,
+        children: LearningStep(path.notificationId),
+      })
+    }
+  }, [step])
+}
+
+export default useCurrentLearningPath

www/apps/docs/src/hooks/use-onboarding.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react"
+import { useQueryStringValue } from "@docusaurus/theme-common/internal"
+import { Rating, useAnalytics, useNotifications } from "docs-ui"
+
+const useOnboarding = () => {
+  const isOnboarding = useQueryStringValue("ref") === "onboarding"
+  const [showNotification, setShowNotification] = useState(isOnboarding)
+  const { addNotification, removeNotification, generateId } = useNotifications()
+  const { track } = useAnalytics()
+
+  useEffect(() => {
+    if (isOnboarding) {
+      track("finished_onboarding")
+      const id = generateId()
+      addNotification({
+        title: "Thank you for installing Medusa!",
+        text: "Please rate your onboarding experience",
+        type: "success",
+        show: showNotification,
+        setShow: setShowNotification,
+        id,
+        children: (
+          <Rating
+            event="rating_onboarding"
+            onRating={() => {
+              setTimeout(() => removeNotification(id), 1500)
+            }}
+          />
+        ),
+      })
+    }
+  }, [])
+}
+
+export default useOnboarding

www/apps/docs/src/hooks/use-select.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useMemo } from "react"
+
+export type OptionType = {
+  value: string
+  label: string
+  index?: string
+  isAllOption?: boolean
+}
+
+export type SelectOptions = {
+  value: string | string[]
+  multiple?: boolean
+  options: OptionType[]
+  setSelected?: (value: string | string[]) => void
+  addSelected?: (value: string) => void
+  removeSelected?: (value: string) => void
+  handleAddAll?: (isAllSelected: boolean) => void
+}
+
+const useSelect = ({
+  value,
+  options,
+  multiple = false,
+  setSelected,
+  addSelected,
+  removeSelected,
+  handleAddAll,
+}: SelectOptions) => {
+  const isValueSelected = useCallback(
+    (val: string) => {
+      return (
+        (typeof value === "string" && val === value) ||
+        (Array.isArray(value) && value.includes(val))
+      )
+    },
+    [value]
+  )
+
+  // checks if there are multiple selected values
+  const hasSelectedValues = useMemo(() => {
+    return multiple && Array.isArray(value) && value.length > 0
+  }, [value, multiple])
+
+  // checks if there are any selected values,
+  // whether multiple or one
+  const hasSelectedValue = useMemo(() => {
+    return hasSelectedValues || (typeof value === "string" && value.length)
+  }, [hasSelectedValues, value])
+
+  const selectedValues: OptionType[] = useMemo(() => {
+    if (typeof value === "string") {
+      const selectedValue = options.find((option) => option.value === value)
+      return selectedValue ? [selectedValue] : []
+    } else if (Array.isArray(value)) {
+      return options.filter((option) => value.includes(option.value))
+    }
+    return []
+  }, [options, value])
+
+  const isAllSelected = useMemo(() => {
+    return Array.isArray(value) && value.length === options.length
+  }, [options, value])
+
+  const handleChange = (selectedValue: string, wasSelected: boolean) => {
+    if (multiple) {
+      wasSelected
+        ? removeSelected?.(selectedValue)
+        : addSelected?.(selectedValue)
+    } else {
+      setSelected?.(selectedValue)
+    }
+  }
+
+  const handleSelectAll = () => {
+    if (handleAddAll) {
+      handleAddAll(isAllSelected)
+    } else {
+      setSelected?.(options.map((option) => option.value))
+    }
+  }
+
+  return {
+    isValueSelected,
+    hasSelectedValue,
+    hasSelectedValues,
+    selectedValues,
+    isAllSelected,
+    handleChange,
+    handleSelectAll,
+  }
+}
+
+export default useSelect