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
2025-08-20 11:42:25 +03:00
parent 5b7a041246
commit d1a1135328
748 changed files with 13079 additions and 7319 deletions
--- a/www/apps/ui/components/ComponentExample/index.tsx
+++ b/www/apps/ui/components/ComponentExample/index.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import { Spinner } from "@medusajs/icons"
+import { Tabs, clx } from "@medusajs/ui"
+import { CodeBlock } from "docs-ui"
+import * as React from "react"
+
+import Feedback from "@/components/Feedback"
+import { ExampleRegistry } from "@/specs/examples.mjs"
+
+interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string
+  disableCenterAlignPreview?: boolean
+  hideFeedback?: boolean
+}
+
+export function ComponentExample({
+  children,
+  name,
+  disableCenterAlignPreview = false,
+  hideFeedback = false,
+  ...props
+}: ComponentExampleProps) {
+  const Preview = React.useMemo(() => {
+    const Component = ExampleRegistry[name]?.component
+
+    if (!Component) {
+      return <p>Component {name} not found in registry</p>
+    }
+
+    return <Component />
+  }, [name])
+
+  const CodeElement = children as React.ReactElement
+  const Code = JSON.parse(
+    (CodeElement.props as Record<string, string>).codeLinesJSON
+  ).join("\n")
+
+  return (
+    <div className="relative my-4 flex flex-col space-y-2" {...props}>
+      <Tabs defaultValue="preview" className="relative mr-auto w-full">
+        <div className="flex flex-col pb-3">
+          <Tabs.List>
+            <Tabs.Trigger value="preview">Preview</Tabs.Trigger>
+            <Tabs.Trigger value="code">Code</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content
+            value="preview"
+            className="relative data-[state=active]:mt-4"
+          >
+            <div
+              className={clx(
+                "bg-medusa-bg-base border-medusa-border-base flex max-h-[400px] min-h-[400px]",
+                "w-full overflow-auto justify-center rounded-md border px-10 py-5",
+                !disableCenterAlignPreview && "items-center"
+              )}
+            >
+              <React.Suspense
+                fallback={
+                  <div className="text-medusa-fg-muted flex items-center text-sm">
+                    <Spinner className="animate-spin" />
+                  </div>
+                }
+              >
+                {Preview}
+              </React.Suspense>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content
+            value="code"
+            className="relative data-[state=active]:mt-4"
+          >
+            <CodeBlock source={Code} lang="tsx" />
+          </Tabs.Content>
+        </div>
+      </Tabs>
+      {!hideFeedback && (
+        <Feedback
+          title={`example ${name}`}
+          question="Was this example helpful?"
+          showDottedSeparator={false}
+        />
+      )}
+    </div>
+  )
+}