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
@@ -0,0 +1,136 @@
+import { InformationCircleSolid } from "@medusajs/icons"
+
+import {
+  HookData,
+  HookDataMap,
+  EnumType,
+  FunctionType,
+  ObjectType,
+} from "@/types/ui"
+import { InlineCode, Table, Tooltip } from "docs-ui"
+
+interface HookTableProps {
+  props: HookDataMap
+  isReturn?: boolean
+}
+
+const HookTable = ({ props, isReturn = false }: HookTableProps) => {
+  return (
+    <Table className="!mb-0">
+      <Table.Header className="border-t-0">
+        <Table.Row>
+          <Table.HeaderCell>Name</Table.HeaderCell>
+          <Table.HeaderCell>Type</Table.HeaderCell>
+          <Table.HeaderCell className="!text-right">
+            {isReturn ? "Description" : "Default"}
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body className="border-b-0 [&_tr:last-child]:border-b-0">
+        {/* eslint-disable-next-line react/prop-types */}
+        {props.map((propData, index) => (
+          <Row key={index} {...propData} isReturn={isReturn} />
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+interface RowProps extends HookData {
+  isReturn?: boolean
+}
+
+const Row = ({
+  value,
+  type,
+  description,
+  default: defaultValue,
+  isReturn = false,
+}: RowProps) => {
+  const isEnum = (t: unknown): t is EnumType => {
+    return (t as EnumType).type !== undefined && (t as EnumType).type === "enum"
+  }
+
+  const isObject = (t: unknown): t is ObjectType => {
+    return (
+      (t as ObjectType).type !== undefined &&
+      (t as ObjectType).type === "object"
+    )
+  }
+
+  const isFunction = (t: unknown): t is FunctionType => {
+    return (
+      (t as FunctionType).type !== undefined &&
+      (t as FunctionType).type === "function"
+    )
+  }
+
+  const isComplexType = isEnum(type) || isObject(type) || isFunction(type)
+
+  return (
+    <Table.Row className="code-body">
+      <Table.Cell>
+        <div className="flex items-center gap-x-1">
+          <InlineCode>{value}</InlineCode>
+          {!isReturn && description && (
+            <Tooltip content={description} className="max-w-[350px] text-left">
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
+            </Tooltip>
+          )}
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        {!isComplexType && type.toString()}
+        {isEnum(type) && (
+          <Tooltip
+            content={type.values.map((v) => `"${v}"`).join(" | ")}
+            className="font-mono"
+          >
+            <div className="flex items-center gap-x-1">
+              <span>enum</span>
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
+            </div>
+          </Tooltip>
+        )}
+        {isObject(type) && (
+          <Tooltip
+            tooltipChildren={<pre>{type.shape}</pre>}
+            className="font-mono max-w-[500px]"
+            tooltipClassName="!text-left"
+          >
+            <div className="flex items-center gap-x-1">
+              <span>{type.name}</span>
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
+            </div>
+          </Tooltip>
+        )}
+        {isFunction(type) && (
+          <Tooltip
+            tooltipChildren={<pre>{type.signature}</pre>}
+            className="font-mono max-w-[500px]"
+          >
+            <div className="flex items-center gap-x-1">
+              <span>function</span>
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
+            </div>
+          </Tooltip>
+        )}
+      </Table.Cell>
+      <Table.Cell className="!text-right">
+        {isReturn ? (
+          description ? (
+            <span>{description}</span>
+          ) : (
+            <span className="text-medusa-fg-muted"> - </span>
+          )
+        ) : defaultValue !== undefined && defaultValue !== null ? (
+          <InlineCode>{defaultValue.toString()}</InlineCode>
+        ) : (
+          <span className="text-medusa-fg-muted"> - </span>
+        )}
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export { HookTable }