docs: migrate UI docs (#13245)

* docs: create a new UI docs project (#13233)

* docs: create a new UI docs project

* fix installation errors

* docs: migrate UI docs content to new project (#13241)

* Fix content

* added examples for some components

* finish adding examples

* lint fix

* fix build errors

* delete empty files

* path fixes + refactor

* fix build error

www/apps/ui/components/ComponentReference/index.tsx

@@ -0,0 +1,93 @@
+import { Documentation } from "react-docgen"
+import { Suspense } from "react"
+import { Spinner } from "@medusajs/icons"
+import { PropTable } from "../PropsTable"
+import { Container } from "@medusajs/ui"
+import Feedback from "../Feedback"
+import { H3, MarkdownContent } from "docs-ui"
+import MDXComponents from "../MDXComponents"
+import slugify from "slugify"
+
+type ComponentReferenceProps = {
+  mainComponent: string
+  componentsToShow?: string[]
+  specsSrc?: string
+  hideFeedback?: boolean
+}
+
+const ComponentReference = ({
+  mainComponent,
+  componentsToShow = [mainComponent],
+  specsSrc,
+  hideFeedback = false,
+}: ComponentReferenceProps) => {
+  if (!specsSrc) {
+    return <></>
+  }
+
+  const specs = JSON.parse(specsSrc) as Documentation[]
+
+  return (
+    <>
+      {componentsToShow.map((component, index) => {
+        const componentSpec = specs?.find(
+          (spec) => spec.displayName === component
+        )
+        const hasProps =
+          componentSpec?.props && Object.keys(componentSpec.props).length > 0
+        const componentName =
+          componentsToShow.length > 1
+            ? componentSpec?.displayName || component
+            : ""
+        const componentSlug = slugify(componentName)
+        return (
+          <Suspense
+            fallback={
+              <div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
+                <Spinner className="animate-spin" />
+              </div>
+            }
+            key={index}
+          >
+            {componentSpec && (
+              <>
+                {componentsToShow.length > 1 && (
+                  <H3 id={componentSlug}>{componentName}</H3>
+                )}
+                {componentSpec.description && (
+                  <MarkdownContent components={MDXComponents}>
+                    {componentSpec.description}
+                  </MarkdownContent>
+                )}
+                {hasProps && (
+                  <>
+                    <Container className="mb-6 mt-8 overflow-hidden p-0">
+                      <Suspense
+                        fallback={
+                          <div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
+                            <Spinner className="animate-spin" />
+                          </div>
+                        }
+                      >
+                        <PropTable props={componentSpec.props!} />
+                      </Suspense>
+                    </Container>
+                    {!hideFeedback && (
+                      <Feedback
+                        title={`props of ${component}`}
+                        question="Was this helpful?"
+                        showDottedSeparator={false}
+                      />
+                    )}
+                  </>
+                )}
+              </>
+            )}
+          </Suspense>
+        )
+      })}
+    </>
+  )
+}
+
+export { ComponentReference }