Skip to content

Commit e2b79a4

Browse files
owjs3901owjs3901
authored
Merge pull request #515 from dev-five-git/claude/fix-mdx-tables-FJced
Convert markdown tables to Table component in MDX files
2 parents 2745a90 + 281d5a6 commit e2b79a4

File tree

4 files changed

+336
-38
lines changed

4 files changed

+336
-38
lines changed

‎apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import {
2+
Table,
3+
TableBody,
4+
TableCell,
5+
TableHead,
6+
TableHeaderCell,
7+
TableRow,
8+
} from '@/components/mdx/components/Table'
9+
110
export const metadata = {
211
title: 'Group Selector',
312
alternates: {
@@ -26,12 +35,46 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
2635

2736
## Available Group Selectors
2837

29-
| Selector | Triggered when |
30-
| ------------------- | ---------------------------------------------- |
31-
| `_groupHover` | Parent with `role="group"` is hovered |
32-
| `_groupFocus` | Parent with `role="group"` is focused |
33-
| `_groupActive` | Parent with `role="group"` is active (pressed) |
34-
| `_groupFocusWithin` | Any element inside the group receives focus |
38+
<Table>
39+
<TableHead>
40+
<TableRow>
41+
<TableHeaderCell>Selector</TableHeaderCell>
42+
<TableHeaderCell>Triggered when</TableHeaderCell>
43+
</TableRow>
44+
</TableHead>
45+
<TableBody>
46+
<TableRow>
47+
<TableCell>
48+
<code>_groupHover</code>
49+
</TableCell>
50+
<TableCell>
51+
Parent with <code>role=&quot;group&quot;</code> is hovered
52+
</TableCell>
53+
</TableRow>
54+
<TableRow>
55+
<TableCell>
56+
<code>_groupFocus</code>
57+
</TableCell>
58+
<TableCell>
59+
Parent with <code>role=&quot;group&quot;</code> is focused
60+
</TableCell>
61+
</TableRow>
62+
<TableRow>
63+
<TableCell>
64+
<code>_groupActive</code>
65+
</TableCell>
66+
<TableCell>
67+
Parent with <code>role=&quot;group&quot;</code> is active (pressed)
68+
</TableCell>
69+
</TableRow>
70+
<TableRow>
71+
<TableCell>
72+
<code>_groupFocusWithin</code>
73+
</TableCell>
74+
<TableCell>Any element inside the group receives focus</TableCell>
75+
</TableRow>
76+
</TableBody>
77+
</Table>
3578

3679
## Interactive Card Example
3780

‎apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx‎

Lines changed: 69 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import {
2+
Table,
3+
TableBody,
4+
TableCell,
5+
TableHead,
6+
TableHeaderCell,
7+
TableRow,
8+
} from '@/components/mdx/components/Table'
9+
110
export const metadata = {
211
title: 'Breakpoints',
312
alternates: {
@@ -11,14 +20,66 @@ Devup UI uses a mobile-first responsive design system with 6 breakpoints. Use ar
1120

1221
## Breakpoint Ranges
1322

14-
| Index | Breakpoint | Range | Device |
15-
| ----- | ---------- | --------------- | ------------------ |
16-
| 0 | `xs` | 0px - 479px | Mobile (portrait) |
17-
| 1 | `sm` | 480px - 767px | Mobile (landscape) |
18-
| 2 | `md` | 768px - 991px | Tablet |
19-
| 3 | `lg` | 992px - 1279px | Small desktop |
20-
| 4 | `xl` | 1280px - 1599px | Desktop |
21-
| 5 | `2xl` | 1600px+ | Large desktop |
23+
<Table>
24+
<TableHead>
25+
<TableRow>
26+
<TableHeaderCell>Index</TableHeaderCell>
27+
<TableHeaderCell>Breakpoint</TableHeaderCell>
28+
<TableHeaderCell>Range</TableHeaderCell>
29+
<TableHeaderCell>Device</TableHeaderCell>
30+
</TableRow>
31+
</TableHead>
32+
<TableBody>
33+
<TableRow>
34+
<TableCell>0</TableCell>
35+
<TableCell>
36+
<code>xs</code>
37+
</TableCell>
38+
<TableCell>0px - 479px</TableCell>
39+
<TableCell>Mobile (portrait)</TableCell>
40+
</TableRow>
41+
<TableRow>
42+
<TableCell>1</TableCell>
43+
<TableCell>
44+
<code>sm</code>
45+
</TableCell>
46+
<TableCell>480px - 767px</TableCell>
47+
<TableCell>Mobile (landscape)</TableCell>
48+
</TableRow>
49+
<TableRow>
50+
<TableCell>2</TableCell>
51+
<TableCell>
52+
<code>md</code>
53+
</TableCell>
54+
<TableCell>768px - 991px</TableCell>
55+
<TableCell>Tablet</TableCell>
56+
</TableRow>
57+
<TableRow>
58+
<TableCell>3</TableCell>
59+
<TableCell>
60+
<code>lg</code>
61+
</TableCell>
62+
<TableCell>992px - 1279px</TableCell>
63+
<TableCell>Small desktop</TableCell>
64+
</TableRow>
65+
<TableRow>
66+
<TableCell>4</TableCell>
67+
<TableCell>
68+
<code>xl</code>
69+
</TableCell>
70+
<TableCell>1280px - 1599px</TableCell>
71+
<TableCell>Desktop</TableCell>
72+
</TableRow>
73+
<TableRow>
74+
<TableCell>5</TableCell>
75+
<TableCell>
76+
<code>2xl</code>
77+
</TableCell>
78+
<TableCell>1600px+</TableCell>
79+
<TableCell>Large desktop</TableCell>
80+
</TableRow>
81+
</TableBody>
82+
</Table>
2283

2384
## Basic Usage
2485

‎apps/landing/src/app/(detail)/docs/devup/typography/page.mdx‎

Lines changed: 83 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import {
2+
Table,
3+
TableBody,
4+
TableCell,
5+
TableHead,
6+
TableHeaderCell,
7+
TableRow,
8+
} from '@/components/mdx/components/Table'
9+
110
export const metadata = {
211
title: 'Typography',
312
alternates: {
@@ -61,15 +70,80 @@ const captionExample = <Text typography="$caption">Caption text</Text>
6170

6271
Each typography style can include:
6372

64-
| Property | Description | Example |
65-
| --------------- | ------------------------------ | ------------------------ |
66-
| `fontFamily` | Font family name | `"Pretendard"` |
67-
| `fontSize` | Font size | `"16px"` |
68-
| `fontWeight` | Font weight (number or string) | `700` or `"bold"` |
69-
| `fontStyle` | Font style | `"normal"` or `"italic"` |
70-
| `lineHeight` | Line height (number or string) | `1.5` or `"150%"` |
71-
| `letterSpacing` | Letter spacing | `"-0.02em"` |
72-
| `textTransform` | Text transformation | `"uppercase"` |
73+
<Table>
74+
<TableHead>
75+
<TableRow>
76+
<TableHeaderCell>Property</TableHeaderCell>
77+
<TableHeaderCell>Description</TableHeaderCell>
78+
<TableHeaderCell>Example</TableHeaderCell>
79+
</TableRow>
80+
</TableHead>
81+
<TableBody>
82+
<TableRow>
83+
<TableCell>
84+
<code>fontFamily</code>
85+
</TableCell>
86+
<TableCell>Font family name</TableCell>
87+
<TableCell>
88+
<code>&quot;Pretendard&quot;</code>
89+
</TableCell>
90+
</TableRow>
91+
<TableRow>
92+
<TableCell>
93+
<code>fontSize</code>
94+
</TableCell>
95+
<TableCell>Font size</TableCell>
96+
<TableCell>
97+
<code>&quot;16px&quot;</code>
98+
</TableCell>
99+
</TableRow>
100+
<TableRow>
101+
<TableCell>
102+
<code>fontWeight</code>
103+
</TableCell>
104+
<TableCell>Font weight (number or string)</TableCell>
105+
<TableCell>
106+
<code>700</code> or <code>&quot;bold&quot;</code>
107+
</TableCell>
108+
</TableRow>
109+
<TableRow>
110+
<TableCell>
111+
<code>fontStyle</code>
112+
</TableCell>
113+
<TableCell>Font style</TableCell>
114+
<TableCell>
115+
<code>&quot;normal&quot;</code> or <code>&quot;italic&quot;</code>
116+
</TableCell>
117+
</TableRow>
118+
<TableRow>
119+
<TableCell>
120+
<code>lineHeight</code>
121+
</TableCell>
122+
<TableCell>Line height (number or string)</TableCell>
123+
<TableCell>
124+
<code>1.5</code> or <code>&quot;150%&quot;</code>
125+
</TableCell>
126+
</TableRow>
127+
<TableRow>
128+
<TableCell>
129+
<code>letterSpacing</code>
130+
</TableCell>
131+
<TableCell>Letter spacing</TableCell>
132+
<TableCell>
133+
<code>&quot;-0.02em&quot;</code>
134+
</TableCell>
135+
</TableRow>
136+
<TableRow>
137+
<TableCell>
138+
<code>textTransform</code>
139+
</TableCell>
140+
<TableCell>Text transformation</TableCell>
141+
<TableCell>
142+
<code>&quot;uppercase&quot;</code>
143+
</TableCell>
144+
</TableRow>
145+
</TableBody>
146+
</Table>
73147

74148
## Responsive Typography
75149

0 commit comments

Comments
 (0)