Skip to content

Commit 1c355da

Browse files
shahednassershahednasser
authored
docs: update and fix UI props docs (#10754)
1 parent 8839970 commit 1c355da

File tree

85 files changed

+2059
-315
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+2059
-315
lines changed

‎www/apps/book/next.config.mjs

+4-4
Original file line numberDiff line numberDiff line change
@@ -167,12 +167,12 @@ const nextConfig = {
167167
}
168168
},
169169
redirects,
170+
outputFileTracingExcludes: {
171+
"*": ["node_modules/@medusajs/icons"],
172+
},
170173
experimental: {
171-
outputFileTracingExcludes: {
172-
"*": ["node_modules/@medusajs/icons"],
173-
},
174+
optimizePackageImports: ["@medusajs/icons", "@medusajs/ui"],
174175
},
175-
optimizePackageImports: ["@medusajs/icons", "@medusajs/ui"],
176176
}
177177

178178
export default withMDX(nextConfig)

‎www/apps/ui/src/components/component-reference.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,10 @@ const ComponentReference = ({
6666
<PropTable props={componentSpec.props!} />
6767
</Suspense>
6868
</Container>
69-
<Feedback title={`props of ${component}`} />
69+
<Feedback
70+
title={`props of ${component}`}
71+
question="Was this helpful?"
72+
/>
7073
</>
7174
)}
7275
</>

‎www/apps/ui/src/components/props-table.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@ const Row = ({
4545
propData: { tsType: tsType, defaultValue, description },
4646
}: RowProps) => {
4747
const normalizeRaw = (str: string): string => {
48-
return str.replace("\\|", "|")
48+
return str
49+
.replace("\\|", "|")
50+
.replaceAll("&#60;", "<")
51+
.replaceAll("&#62;", ">")
4952
}
5053
const getTypeRaw = useCallback((type: PropSpecType): string => {
5154
let raw = "raw" in type ? type.raw || type.name : type.name
@@ -74,9 +77,11 @@ const Row = ({
7477
}, [])
7578
const getTypeTooltipContent = useCallback(
7679
(type: PropSpecType): string | undefined => {
77-
if (type?.name === "signature" && "type" in type) {
78-
return getTypeRaw(type)
79-
} else if (type?.name === "Array" && type.raw) {
80+
if (
81+
(type?.name === "signature" && "type" in type) ||
82+
(type?.name === "Array" && type.raw) ||
83+
("raw" in type && type.raw)
84+
) {
8085
return getTypeRaw(type)
8186
}
8287

@@ -107,6 +112,11 @@ const Row = ({
107112
text: element.value,
108113
canBeCopied: true,
109114
})
115+
} else if ("raw" in element) {
116+
typeNodes.push({
117+
text: getTypeText(element),
118+
tooltipContent: getTypeTooltipContent(element),
119+
})
110120
} else {
111121
typeNodes.push({
112122
text: element.name,

‎www/apps/ui/src/config/site.ts

+4
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,8 @@ export const siteConfig: SiteConfig = {
2929
showCategories: true,
3030
},
3131
logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
32+
version: {
33+
...globalConfig.version,
34+
hide: true,
35+
},
3236
}

‎www/apps/ui/src/content/docs/components/drawer.mdx

+9-1
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,12 @@ import { Drawer } from "@medusajs/ui"
3131

3232
---
3333

34-
<ComponentReference mainComponent="Drawer" />
34+
<ComponentReference mainComponent="Drawer" componentsToShow={[
35+
"Drawer",
36+
"Drawer.Trigger",
37+
"Drawer.Content",
38+
"Drawer.Header",
39+
"Drawer.Title",
40+
"Drawer.Body",
41+
"Drawer.Footer"
42+
]} />

‎www/apps/ui/src/content/docs/components/focus-modal.mdx

+3
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,11 @@ import { FocusModal } from "@medusajs/ui"
3030

3131
<ComponentReference mainComponent="FocusModal" componentsToShow={[
3232
"FocusModal",
33+
"FocusModal.Trigger",
34+
"FocusModal.Content",
3335
"FocusModal.Header",
3436
"FocusModal.Body",
37+
"FocusModal.Footer"
3538
]} />
3639

3740
## Example: Control Open State

‎www/apps/ui/src/content/docs/components/select.mdx

+6-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ import { Select } from "@medusajs/ui"
3939
"Select.Value",
4040
"Select.Group",
4141
"Select.Label",
42-
"Select.Item"
42+
"Select.Item",
43+
"Select.Content"
4344
]} />
4445

4546
## Examples
@@ -50,6 +51,10 @@ import { Select } from "@medusajs/ui"
5051

5152
<ComponentExample name="select-small" />
5253

54+
### Item-Aligned Position
55+
56+
<ComponentExample name="select-item-aligned" />
57+
5358
### Disabled
5459

5560
<ComponentExample name="select-disabled" />

‎www/apps/ui/src/examples/select-item-aligned.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Select } from "@medusajs/ui"
2+
3+
export default function SelectItemAligned() {
4+
return (
5+
<div className="w-[256px]">
6+
<Select>
7+
<Select.Trigger>
8+
<Select.Value placeholder="Select a currency" />
9+
</Select.Trigger>
10+
<Select.Content position="item-aligned">
11+
{currencies.map((item) => (
12+
<Select.Item key={item.value} value={item.value}>
13+
{item.label}
14+
</Select.Item>
15+
))}
16+
</Select.Content>
17+
</Select>
18+
</div>
19+
)
20+
}
21+
22+
const currencies = [
23+
{
24+
value: "eur",
25+
label: "EUR",
26+
},
27+
{
28+
value: "usd",
29+
label: "USD",
30+
},
31+
{
32+
value: "dkk",
33+
label: "DKK",
34+
},
35+
]

‎www/apps/ui/src/registries/example-registry.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -545,6 +545,11 @@ export const ExampleRegistry: Record<string, ExampleType> = {
545545
component: React.lazy(async () => import("@/examples/button-loading")),
546546
file: "src/examples/button-loading.tsx",
547547
},
548+
"select-item-aligned": {
549+
name: "select-item-aligned",
550+
component: React.lazy(async () => import("@/examples/select-item-aligned")),
551+
file: "src/examples/select-item-aligned.tsx",
552+
},
548553
"select-small": {
549554
name: "select-small",
550555
component: React.lazy(async () => import("@/examples/select-small")),

‎www/apps/ui/src/specs/Avatar/Avatar.json

+44
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,20 @@
2323
"computed": false
2424
},
2525
"description": "The style of the avatar.",
26+
"tsType": {
27+
"name": "union",
28+
"raw": "\"squared\" \\| \"rounded\"",
29+
"elements": [
30+
{
31+
"name": "literal",
32+
"value": "\"squared\""
33+
},
34+
{
35+
"name": "literal",
36+
"value": "\"rounded\""
37+
}
38+
]
39+
},
2640
"required": false
2741
},
2842
"size": {
@@ -31,6 +45,36 @@
3145
"computed": false
3246
},
3347
"description": "The size of the avatar's border radius.",
48+
"tsType": {
49+
"name": "union",
50+
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
51+
"elements": [
52+
{
53+
"name": "literal",
54+
"value": "\"2xsmall\""
55+
},
56+
{
57+
"name": "literal",
58+
"value": "\"xsmall\""
59+
},
60+
{
61+
"name": "literal",
62+
"value": "\"small\""
63+
},
64+
{
65+
"name": "literal",
66+
"value": "\"base\""
67+
},
68+
{
69+
"name": "literal",
70+
"value": "\"large\""
71+
},
72+
{
73+
"name": "literal",
74+
"value": "\"xlarge\""
75+
}
76+
]
77+
},
3478
"required": false
3579
}
3680
},

‎www/apps/ui/src/specs/Badge/Badge.json

+70
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,32 @@
2020
"computed": false
2121
},
2222
"description": "The badge's size.",
23+
"tsType": {
24+
"name": "union",
25+
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\"",
26+
"elements": [
27+
{
28+
"name": "literal",
29+
"value": "\"2xsmall\""
30+
},
31+
{
32+
"name": "literal",
33+
"value": "\"xsmall\""
34+
},
35+
{
36+
"name": "literal",
37+
"value": "\"small\""
38+
},
39+
{
40+
"name": "literal",
41+
"value": "\"base\""
42+
},
43+
{
44+
"name": "literal",
45+
"value": "\"large\""
46+
}
47+
]
48+
},
2349
"required": false
2450
},
2551
"rounded": {
@@ -28,6 +54,20 @@
2854
"computed": false
2955
},
3056
"description": "The style of the badge's border radius.",
57+
"tsType": {
58+
"name": "union",
59+
"raw": "\"base\" \\| \"full\"",
60+
"elements": [
61+
{
62+
"name": "literal",
63+
"value": "\"base\""
64+
},
65+
{
66+
"name": "literal",
67+
"value": "\"full\""
68+
}
69+
]
70+
},
3171
"required": false
3272
},
3373
"color": {
@@ -36,6 +76,36 @@
3676
"computed": false
3777
},
3878
"description": "The badge's color.",
79+
"tsType": {
80+
"name": "union",
81+
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
82+
"elements": [
83+
{
84+
"name": "literal",
85+
"value": "\"green\""
86+
},
87+
{
88+
"name": "literal",
89+
"value": "\"red\""
90+
},
91+
{
92+
"name": "literal",
93+
"value": "\"blue\""
94+
},
95+
{
96+
"name": "literal",
97+
"value": "\"orange\""
98+
},
99+
{
100+
"name": "literal",
101+
"value": "\"grey\""
102+
},
103+
{
104+
"name": "literal",
105+
"value": "\"purple\""
106+
}
107+
]
108+
},
39109
"required": false
40110
}
41111
},

‎www/apps/ui/src/specs/Button/Button.json

+44
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,28 @@
3131
"computed": false
3232
},
3333
"description": "The button's style.",
34+
"tsType": {
35+
"name": "union",
36+
"raw": "\"primary\" \\| \"transparent\" \\| \"secondary\" \\| \"danger\"",
37+
"elements": [
38+
{
39+
"name": "literal",
40+
"value": "\"primary\""
41+
},
42+
{
43+
"name": "literal",
44+
"value": "\"transparent\""
45+
},
46+
{
47+
"name": "literal",
48+
"value": "\"secondary\""
49+
},
50+
{
51+
"name": "literal",
52+
"value": "\"danger\""
53+
}
54+
]
55+
},
3456
"required": false
3557
},
3658
"size": {
@@ -39,6 +61,28 @@
3961
"computed": false
4062
},
4163
"description": "The button's size.",
64+
"tsType": {
65+
"name": "union",
66+
"raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
67+
"elements": [
68+
{
69+
"name": "literal",
70+
"value": "\"small\""
71+
},
72+
{
73+
"name": "literal",
74+
"value": "\"base\""
75+
},
76+
{
77+
"name": "literal",
78+
"value": "\"large\""
79+
},
80+
{
81+
"name": "literal",
82+
"value": "\"xlarge\""
83+
}
84+
]
85+
},
4286
"required": false
4387
}
4488
},

0 commit comments

Comments
 (0)