docs: update and fix UI props docs (#10754)

medusajs · Dec 27, 2024 · 1c355da · 1c355da
1 parent 8839970
commit 1c355da
Show file tree

Hide file tree

Showing 85 changed files with 2,059 additions and 315 deletions.
diff --git a/www/apps/book/next.config.mjs b/www/apps/book/next.config.mjs
@@ -167,12 +167,12 @@ const nextConfig = {
     }
   },
   redirects,
+  outputFileTracingExcludes: {
+    "*": ["node_modules/@medusajs/icons"],
+  },
   experimental: {
-    outputFileTracingExcludes: {
-      "*": ["node_modules/@medusajs/icons"],
-    },
+    optimizePackageImports: ["@medusajs/icons", "@medusajs/ui"],
   },
-  optimizePackageImports: ["@medusajs/icons", "@medusajs/ui"],
 }
 
 export default withMDX(nextConfig)
diff --git a/www/apps/ui/src/components/component-reference.tsx b/www/apps/ui/src/components/component-reference.tsx
@@ -66,7 +66,10 @@ const ComponentReference = ({
                         <PropTable props={componentSpec.props!} />
                       </Suspense>
                     </Container>
-                    <Feedback title={`props of ${component}`} />
+                    <Feedback
+                      title={`props of ${component}`}
+                      question="Was this helpful?"
+                    />
                   </>
                 )}
               </>

diff --git a/www/apps/ui/src/components/props-table.tsx b/www/apps/ui/src/components/props-table.tsx
@@ -45,7 +45,10 @@ const Row = ({
   propData: { tsType: tsType, defaultValue, description },
 }: RowProps) => {
   const normalizeRaw = (str: string): string => {
-    return str.replace("\\|", "|")
+    return str
+      .replace("\\|", "|")
+      .replaceAll("&#60;", "<")
+      .replaceAll("&#62;", ">")
   }
   const getTypeRaw = useCallback((type: PropSpecType): string => {
     let raw = "raw" in type ? type.raw || type.name : type.name
@@ -74,9 +77,11 @@ const Row = ({
   }, [])
   const getTypeTooltipContent = useCallback(
     (type: PropSpecType): string | undefined => {
-      if (type?.name === "signature" && "type" in type) {
-        return getTypeRaw(type)
-      } else if (type?.name === "Array" && type.raw) {
+      if (
+        (type?.name === "signature" && "type" in type) ||
+        (type?.name === "Array" && type.raw) ||
+        ("raw" in type && type.raw)
+      ) {
         return getTypeRaw(type)
       }
 
@@ -107,6 +112,11 @@ const Row = ({
             text: element.value,
             canBeCopied: true,
           })
+        } else if ("raw" in element) {
+          typeNodes.push({
+            text: getTypeText(element),
+            tooltipContent: getTypeTooltipContent(element),
+          })
         } else {
           typeNodes.push({
             text: element.name,

diff --git a/www/apps/ui/src/config/site.ts b/www/apps/ui/src/config/site.ts
@@ -29,4 +29,8 @@ export const siteConfig: SiteConfig = {
     showCategories: true,
   },
   logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
+  version: {
+    ...globalConfig.version,
+    hide: true,
+  },
 }
diff --git a/www/apps/ui/src/content/docs/components/drawer.mdx b/www/apps/ui/src/content/docs/components/drawer.mdx
@@ -31,4 +31,12 @@ import { Drawer } from "@medusajs/ui"
 
 ---
 
-<ComponentReference mainComponent="Drawer" />
+<ComponentReference mainComponent="Drawer" componentsToShow={[
+  "Drawer",
+  "Drawer.Trigger",
+  "Drawer.Content",
+  "Drawer.Header",
+  "Drawer.Title",
+  "Drawer.Body",
+  "Drawer.Footer"
+]} />
diff --git a/www/apps/ui/src/content/docs/components/focus-modal.mdx b/www/apps/ui/src/content/docs/components/focus-modal.mdx
@@ -30,8 +30,11 @@ import { FocusModal } from "@medusajs/ui"
 
 <ComponentReference mainComponent="FocusModal" componentsToShow={[
   "FocusModal",
+  "FocusModal.Trigger",
+  "FocusModal.Content",
   "FocusModal.Header",
   "FocusModal.Body",
+  "FocusModal.Footer"
 ]} />
 
 ## Example: Control Open State

diff --git a/www/apps/ui/src/content/docs/components/select.mdx b/www/apps/ui/src/content/docs/components/select.mdx
@@ -39,7 +39,8 @@ import { Select } from "@medusajs/ui"
   "Select.Value",
   "Select.Group",
   "Select.Label",
-  "Select.Item"
+  "Select.Item",
+  "Select.Content"
 ]} />
 
 ## Examples
@@ -50,6 +51,10 @@ import { Select } from "@medusajs/ui"
 
 <ComponentExample name="select-small" />
 
+### Item-Aligned Position
+
+<ComponentExample name="select-item-aligned" />
+
 ### Disabled
 
 <ComponentExample name="select-disabled" />

diff --git a/www/apps/ui/src/examples/select-item-aligned.tsx b/www/apps/ui/src/examples/select-item-aligned.tsx
@@ -0,0 +1,35 @@
+import { Select } from "@medusajs/ui"
+
+export default function SelectItemAligned() {
+  return (
+    <div className="w-[256px]">
+      <Select>
+        <Select.Trigger>
+          <Select.Value placeholder="Select a currency" />
+        </Select.Trigger>
+        <Select.Content position="item-aligned">
+          {currencies.map((item) => (
+            <Select.Item key={item.value} value={item.value}>
+              {item.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
+    </div>
+  )
+}
+
+const currencies = [
+  {
+    value: "eur",
+    label: "EUR",
+  },
+  {
+    value: "usd",
+    label: "USD",
+  },
+  {
+    value: "dkk",
+    label: "DKK",
+  },
+]
diff --git a/www/apps/ui/src/registries/example-registry.tsx b/www/apps/ui/src/registries/example-registry.tsx
@@ -545,6 +545,11 @@ export const ExampleRegistry: Record<string, ExampleType> = {
     component: React.lazy(async () => import("@/examples/button-loading")),
     file: "src/examples/button-loading.tsx",
   },
+  "select-item-aligned": {
+    name: "select-item-aligned",
+    component: React.lazy(async () => import("@/examples/select-item-aligned")),
+    file: "src/examples/select-item-aligned.tsx",
+  },
   "select-small": {
     name: "select-small",
     component: React.lazy(async () => import("@/examples/select-small")),

diff --git a/www/apps/ui/src/specs/Avatar/Avatar.json b/www/apps/ui/src/specs/Avatar/Avatar.json
@@ -23,6 +23,20 @@
         "computed": false
       },
       "description": "The style of the avatar.",
+      "tsType": {
+        "name": "union",
+        "raw": "\"squared\" \\| \"rounded\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"squared\""
+          },
+          {
+            "name": "literal",
+            "value": "\"rounded\""
+          }
+        ]
+      },
       "required": false
     },
     "size": {
@@ -31,6 +45,36 @@
         "computed": false
       },
       "description": "The size of the avatar's border radius.",
+      "tsType": {
+        "name": "union",
+        "raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"2xsmall\""
+          },
+          {
+            "name": "literal",
+            "value": "\"xsmall\""
+          },
+          {
+            "name": "literal",
+            "value": "\"small\""
+          },
+          {
+            "name": "literal",
+            "value": "\"base\""
+          },
+          {
+            "name": "literal",
+            "value": "\"large\""
+          },
+          {
+            "name": "literal",
+            "value": "\"xlarge\""
+          }
+        ]
+      },
       "required": false
     }
   },

diff --git a/www/apps/ui/src/specs/Badge/Badge.json b/www/apps/ui/src/specs/Badge/Badge.json
@@ -20,6 +20,32 @@
         "computed": false
       },
       "description": "The badge's size.",
+      "tsType": {
+        "name": "union",
+        "raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"2xsmall\""
+          },
+          {
+            "name": "literal",
+            "value": "\"xsmall\""
+          },
+          {
+            "name": "literal",
+            "value": "\"small\""
+          },
+          {
+            "name": "literal",
+            "value": "\"base\""
+          },
+          {
+            "name": "literal",
+            "value": "\"large\""
+          }
+        ]
+      },
       "required": false
     },
     "rounded": {
@@ -28,6 +54,20 @@
         "computed": false
       },
       "description": "The style of the badge's border radius.",
+      "tsType": {
+        "name": "union",
+        "raw": "\"base\" \\| \"full\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"base\""
+          },
+          {
+            "name": "literal",
+            "value": "\"full\""
+          }
+        ]
+      },
       "required": false
     },
     "color": {
@@ -36,6 +76,36 @@
         "computed": false
       },
       "description": "The badge's color.",
+      "tsType": {
+        "name": "union",
+        "raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"green\""
+          },
+          {
+            "name": "literal",
+            "value": "\"red\""
+          },
+          {
+            "name": "literal",
+            "value": "\"blue\""
+          },
+          {
+            "name": "literal",
+            "value": "\"orange\""
+          },
+          {
+            "name": "literal",
+            "value": "\"grey\""
+          },
+          {
+            "name": "literal",
+            "value": "\"purple\""
+          }
+        ]
+      },
       "required": false
     }
   },

diff --git a/www/apps/ui/src/specs/Button/Button.json b/www/apps/ui/src/specs/Button/Button.json
@@ -31,6 +31,28 @@
         "computed": false
       },
       "description": "The button's style.",
+      "tsType": {
+        "name": "union",
+        "raw": "\"primary\" \\| \"transparent\" \\| \"secondary\" \\| \"danger\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"primary\""
+          },
+          {
+            "name": "literal",
+            "value": "\"transparent\""
+          },
+          {
+            "name": "literal",
+            "value": "\"secondary\""
+          },
+          {
+            "name": "literal",
+            "value": "\"danger\""
+          }
+        ]
+      },
       "required": false
     },
     "size": {
@@ -39,6 +61,28 @@
         "computed": false
       },
       "description": "The button's size.",
+      "tsType": {
+        "name": "union",
+        "raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"small\""
+          },
+          {
+            "name": "literal",
+            "value": "\"base\""
+          },
+          {
+            "name": "literal",
+            "value": "\"large\""
+          },
+          {
+            "name": "literal",
+            "value": "\"xlarge\""
+          }
+        ]
+      },
       "required": false
     }
   },