Skip to content

Commit 273f28b

Browse files
claudeclaude
committed
Convert markdown tables to Table component in MDX files
Replace all markdown-style tables in landing MDX files with Table component to fix eslint issues. Updated files: - docs/overview/page.mdx (2 tables) - docs/devup/typography/page.mdx (1 table) - docs/devup/breakpoints/page.mdx (1 table) - docs/api/group-selector/page.mdx (1 table)
1 parent 2745a90 commit 273f28b

File tree

4 files changed

+235
-36
lines changed

4 files changed

+235
-36
lines changed

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

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import {
2+
Table,
3+
TableHead,
4+
TableBody,
5+
TableRow,
6+
TableHeaderCell,
7+
TableCell,
8+
} from '@/components/mdx/components/Table'
9+
110
export const metadata = {
211
title: 'Group Selector',
312
alternates: {
@@ -26,12 +35,32 @@ 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>`_groupHover`</TableCell>
48+
<TableCell>Parent with `role="group"` is hovered</TableCell>
49+
</TableRow>
50+
<TableRow>
51+
<TableCell>`_groupFocus`</TableCell>
52+
<TableCell>Parent with `role="group"` is focused</TableCell>
53+
</TableRow>
54+
<TableRow>
55+
<TableCell>`_groupActive`</TableCell>
56+
<TableCell>Parent with `role="group"` is active (pressed)</TableCell>
57+
</TableRow>
58+
<TableRow>
59+
<TableCell>`_groupFocusWithin`</TableCell>
60+
<TableCell>Any element inside the group receives focus</TableCell>
61+
</TableRow>
62+
</TableBody>
63+
</Table>
3564

3665
## Interactive Card Example
3766

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

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import {
2+
Table,
3+
TableHead,
4+
TableBody,
5+
TableRow,
6+
TableHeaderCell,
7+
TableCell,
8+
} from '@/components/mdx/components/Table'
9+
110
export const metadata = {
211
title: 'Breakpoints',
312
alternates: {
@@ -11,14 +20,54 @@ 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>`xs`</TableCell>
36+
<TableCell>0px - 479px</TableCell>
37+
<TableCell>Mobile (portrait)</TableCell>
38+
</TableRow>
39+
<TableRow>
40+
<TableCell>1</TableCell>
41+
<TableCell>`sm`</TableCell>
42+
<TableCell>480px - 767px</TableCell>
43+
<TableCell>Mobile (landscape)</TableCell>
44+
</TableRow>
45+
<TableRow>
46+
<TableCell>2</TableCell>
47+
<TableCell>`md`</TableCell>
48+
<TableCell>768px - 991px</TableCell>
49+
<TableCell>Tablet</TableCell>
50+
</TableRow>
51+
<TableRow>
52+
<TableCell>3</TableCell>
53+
<TableCell>`lg`</TableCell>
54+
<TableCell>992px - 1279px</TableCell>
55+
<TableCell>Small desktop</TableCell>
56+
</TableRow>
57+
<TableRow>
58+
<TableCell>4</TableCell>
59+
<TableCell>`xl`</TableCell>
60+
<TableCell>1280px - 1599px</TableCell>
61+
<TableCell>Desktop</TableCell>
62+
</TableRow>
63+
<TableRow>
64+
<TableCell>5</TableCell>
65+
<TableCell>`2xl`</TableCell>
66+
<TableCell>1600px+</TableCell>
67+
<TableCell>Large desktop</TableCell>
68+
</TableRow>
69+
</TableBody>
70+
</Table>
2271

2372
## Basic Usage
2473

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

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import {
2+
Table,
3+
TableHead,
4+
TableBody,
5+
TableRow,
6+
TableHeaderCell,
7+
TableCell,
8+
} from '@/components/mdx/components/Table'
9+
110
export const metadata = {
211
title: 'Typography',
312
alternates: {
@@ -61,15 +70,52 @@ 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>`fontFamily`</TableCell>
84+
<TableCell>Font family name</TableCell>
85+
<TableCell>`"Pretendard"`</TableCell>
86+
</TableRow>
87+
<TableRow>
88+
<TableCell>`fontSize`</TableCell>
89+
<TableCell>Font size</TableCell>
90+
<TableCell>`"16px"`</TableCell>
91+
</TableRow>
92+
<TableRow>
93+
<TableCell>`fontWeight`</TableCell>
94+
<TableCell>Font weight (number or string)</TableCell>
95+
<TableCell>`700` or `"bold"`</TableCell>
96+
</TableRow>
97+
<TableRow>
98+
<TableCell>`fontStyle`</TableCell>
99+
<TableCell>Font style</TableCell>
100+
<TableCell>`"normal"` or `"italic"`</TableCell>
101+
</TableRow>
102+
<TableRow>
103+
<TableCell>`lineHeight`</TableCell>
104+
<TableCell>Line height (number or string)</TableCell>
105+
<TableCell>`1.5` or `"150%"`</TableCell>
106+
</TableRow>
107+
<TableRow>
108+
<TableCell>`letterSpacing`</TableCell>
109+
<TableCell>Letter spacing</TableCell>
110+
<TableCell>`"-0.02em"`</TableCell>
111+
</TableRow>
112+
<TableRow>
113+
<TableCell>`textTransform`</TableCell>
114+
<TableCell>Text transformation</TableCell>
115+
<TableCell>`"uppercase"`</TableCell>
116+
</TableRow>
117+
</TableBody>
118+
</Table>
73119

74120
## Responsive Typography
75121

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

Lines changed: 88 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import {
2+
Table,
3+
TableHead,
4+
TableBody,
5+
TableRow,
6+
TableHeaderCell,
7+
TableCell,
8+
} from '@/components/mdx/components/Table'
9+
110
export const metadata = {
211
title: 'What is Devup UI?',
312
alternates: {
@@ -32,13 +41,54 @@ Devup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analy
3241

3342
### Key Advantages
3443

35-
| Feature | Devup UI | styled-components | Emotion | Vanilla Extract |
36-
| -------------------- | -------- | ----------------- | ------- | --------------- |
37-
| Zero Runtime | Yes | No | No | Yes |
38-
| Dynamic Values | Yes | Yes | Yes | Limited |
39-
| Full Syntax Coverage | Yes | Yes | Yes | No |
40-
| Type-Safe Themes | Yes | Limited | Limited | Yes |
41-
| Build Performance | Fastest | N/A | N/A | Fast |
44+
<Table>
45+
<TableHead>
46+
<TableRow>
47+
<TableHeaderCell>Feature</TableHeaderCell>
48+
<TableHeaderCell>Devup UI</TableHeaderCell>
49+
<TableHeaderCell>styled-components</TableHeaderCell>
50+
<TableHeaderCell>Emotion</TableHeaderCell>
51+
<TableHeaderCell>Vanilla Extract</TableHeaderCell>
52+
</TableRow>
53+
</TableHead>
54+
<TableBody>
55+
<TableRow>
56+
<TableCell>Zero Runtime</TableCell>
57+
<TableCell>Yes</TableCell>
58+
<TableCell>No</TableCell>
59+
<TableCell>No</TableCell>
60+
<TableCell>Yes</TableCell>
61+
</TableRow>
62+
<TableRow>
63+
<TableCell>Dynamic Values</TableCell>
64+
<TableCell>Yes</TableCell>
65+
<TableCell>Yes</TableCell>
66+
<TableCell>Yes</TableCell>
67+
<TableCell>Limited</TableCell>
68+
</TableRow>
69+
<TableRow>
70+
<TableCell>Full Syntax Coverage</TableCell>
71+
<TableCell>Yes</TableCell>
72+
<TableCell>Yes</TableCell>
73+
<TableCell>Yes</TableCell>
74+
<TableCell>No</TableCell>
75+
</TableRow>
76+
<TableRow>
77+
<TableCell>Type-Safe Themes</TableCell>
78+
<TableCell>Yes</TableCell>
79+
<TableCell>Limited</TableCell>
80+
<TableCell>Limited</TableCell>
81+
<TableCell>Yes</TableCell>
82+
</TableRow>
83+
<TableRow>
84+
<TableCell>Build Performance</TableCell>
85+
<TableCell>Fastest</TableCell>
86+
<TableCell>N/A</TableCell>
87+
<TableCell>N/A</TableCell>
88+
<TableCell>Fast</TableCell>
89+
</TableRow>
90+
</TableBody>
91+
</Table>
4292

4393
### How It Works
4494

@@ -81,12 +131,37 @@ const Card = styled('div', {
81131

82132
Benchmarks on Next.js (GitHub Actions - ubuntu-latest):
83133

84-
| Library | Build Time | Build Size |
85-
| ------------------------- | ---------- | -------------------- |
86-
| tailwindcss | 19.31s | 59,521,539 bytes |
87-
| styleX | 41.78s | 86,869,452 bytes |
88-
| vanilla-extract | 19.50s | 61,494,033 bytes |
89-
| **devup-ui (single css)** | **17.05s** | **59,520,196 bytes** |
134+
<Table>
135+
<TableHead>
136+
<TableRow>
137+
<TableHeaderCell>Library</TableHeaderCell>
138+
<TableHeaderCell>Build Time</TableHeaderCell>
139+
<TableHeaderCell>Build Size</TableHeaderCell>
140+
</TableRow>
141+
</TableHead>
142+
<TableBody>
143+
<TableRow>
144+
<TableCell>tailwindcss</TableCell>
145+
<TableCell>19.31s</TableCell>
146+
<TableCell>59,521,539 bytes</TableCell>
147+
</TableRow>
148+
<TableRow>
149+
<TableCell>styleX</TableCell>
150+
<TableCell>41.78s</TableCell>
151+
<TableCell>86,869,452 bytes</TableCell>
152+
</TableRow>
153+
<TableRow>
154+
<TableCell>vanilla-extract</TableCell>
155+
<TableCell>19.50s</TableCell>
156+
<TableCell>61,494,033 bytes</TableCell>
157+
</TableRow>
158+
<TableRow>
159+
<TableCell>**devup-ui (single css)**</TableCell>
160+
<TableCell>**17.05s**</TableCell>
161+
<TableCell>**59,520,196 bytes**</TableCell>
162+
</TableRow>
163+
</TableBody>
164+
</Table>
90165

91166
With Turbopack, Devup UI achieves the **smallest bundle size** at just 4,772,050 bytes.
92167

0 commit comments

Comments
 (0)