From 273f28b38981793ca0dbf608fcf1f3ca5c3e69f1 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 19 Dec 2025 10:18:43 +0000 Subject: [PATCH 1/4] 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) --- .../(detail)/docs/api/group-selector/page.mdx | 41 +++++-- .../(detail)/docs/devup/breakpoints/page.mdx | 65 +++++++++-- .../(detail)/docs/devup/typography/page.mdx | 64 +++++++++-- .../src/app/(detail)/docs/overview/page.mdx | 101 +++++++++++++++--- 4 files changed, 235 insertions(+), 36 deletions(-) diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx index c84ed147..8b6fa41e 100644 --- a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx +++ b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx @@ -1,3 +1,12 @@ +import { + Table, + TableHead, + TableBody, + TableRow, + TableHeaderCell, + TableCell, +} from '@/components/mdx/components/Table' + export const metadata = { title: 'Group Selector', alternates: { @@ -26,12 +35,32 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o ## Available Group Selectors -| Selector | Triggered when | -| ------------------- | ---------------------------------------------- | -| `_groupHover` | Parent with `role="group"` is hovered | -| `_groupFocus` | Parent with `role="group"` is focused | -| `_groupActive` | Parent with `role="group"` is active (pressed) | -| `_groupFocusWithin` | Any element inside the group receives focus | + + + + Selector + Triggered when + + + + + `_groupHover` + Parent with `role="group"` is hovered + + + `_groupFocus` + Parent with `role="group"` is focused + + + `_groupActive` + Parent with `role="group"` is active (pressed) + + + `_groupFocusWithin` + Any element inside the group receives focus + + +
## Interactive Card Example diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx index 638ee397..57beecef 100644 --- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx +++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx @@ -1,3 +1,12 @@ +import { + Table, + TableHead, + TableBody, + TableRow, + TableHeaderCell, + TableCell, +} from '@/components/mdx/components/Table' + export const metadata = { title: 'Breakpoints', alternates: { @@ -11,14 +20,54 @@ Devup UI uses a mobile-first responsive design system with 6 breakpoints. Use ar ## Breakpoint Ranges -| Index | Breakpoint | Range | Device | -| ----- | ---------- | --------------- | ------------------ | -| 0 | `xs` | 0px - 479px | Mobile (portrait) | -| 1 | `sm` | 480px - 767px | Mobile (landscape) | -| 2 | `md` | 768px - 991px | Tablet | -| 3 | `lg` | 992px - 1279px | Small desktop | -| 4 | `xl` | 1280px - 1599px | Desktop | -| 5 | `2xl` | 1600px+ | Large desktop | + + + + Index + Breakpoint + Range + Device + + + + + 0 + `xs` + 0px - 479px + Mobile (portrait) + + + 1 + `sm` + 480px - 767px + Mobile (landscape) + + + 2 + `md` + 768px - 991px + Tablet + + + 3 + `lg` + 992px - 1279px + Small desktop + + + 4 + `xl` + 1280px - 1599px + Desktop + + + 5 + `2xl` + 1600px+ + Large desktop + + +
## Basic Usage diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx index dee9d86b..ed584dd7 100644 --- a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx +++ b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx @@ -1,3 +1,12 @@ +import { + Table, + TableHead, + TableBody, + TableRow, + TableHeaderCell, + TableCell, +} from '@/components/mdx/components/Table' + export const metadata = { title: 'Typography', alternates: { @@ -61,15 +70,52 @@ const captionExample = Caption text Each typography style can include: -| Property | Description | Example | -| --------------- | ------------------------------ | ------------------------ | -| `fontFamily` | Font family name | `"Pretendard"` | -| `fontSize` | Font size | `"16px"` | -| `fontWeight` | Font weight (number or string) | `700` or `"bold"` | -| `fontStyle` | Font style | `"normal"` or `"italic"` | -| `lineHeight` | Line height (number or string) | `1.5` or `"150%"` | -| `letterSpacing` | Letter spacing | `"-0.02em"` | -| `textTransform` | Text transformation | `"uppercase"` | + + + + Property + Description + Example + + + + + `fontFamily` + Font family name + `"Pretendard"` + + + `fontSize` + Font size + `"16px"` + + + `fontWeight` + Font weight (number or string) + `700` or `"bold"` + + + `fontStyle` + Font style + `"normal"` or `"italic"` + + + `lineHeight` + Line height (number or string) + `1.5` or `"150%"` + + + `letterSpacing` + Letter spacing + `"-0.02em"` + + + `textTransform` + Text transformation + `"uppercase"` + + +
## Responsive Typography diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx index d980f0f4..1237e5a4 100644 --- a/apps/landing/src/app/(detail)/docs/overview/page.mdx +++ b/apps/landing/src/app/(detail)/docs/overview/page.mdx @@ -1,3 +1,12 @@ +import { + Table, + TableHead, + TableBody, + TableRow, + TableHeaderCell, + TableCell, +} from '@/components/mdx/components/Table' + export const metadata = { title: 'What is Devup UI?', alternates: { @@ -32,13 +41,54 @@ Devup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analy ### Key Advantages -| Feature | Devup UI | styled-components | Emotion | Vanilla Extract | -| -------------------- | -------- | ----------------- | ------- | --------------- | -| Zero Runtime | Yes | No | No | Yes | -| Dynamic Values | Yes | Yes | Yes | Limited | -| Full Syntax Coverage | Yes | Yes | Yes | No | -| Type-Safe Themes | Yes | Limited | Limited | Yes | -| Build Performance | Fastest | N/A | N/A | Fast | + + + + Feature + Devup UI + styled-components + Emotion + Vanilla Extract + + + + + Zero Runtime + Yes + No + No + Yes + + + Dynamic Values + Yes + Yes + Yes + Limited + + + Full Syntax Coverage + Yes + Yes + Yes + No + + + Type-Safe Themes + Yes + Limited + Limited + Yes + + + Build Performance + Fastest + N/A + N/A + Fast + + +
### How It Works @@ -81,12 +131,37 @@ const Card = styled('div', { Benchmarks on Next.js (GitHub Actions - ubuntu-latest): -| Library | Build Time | Build Size | -| ------------------------- | ---------- | -------------------- | -| tailwindcss | 19.31s | 59,521,539 bytes | -| styleX | 41.78s | 86,869,452 bytes | -| vanilla-extract | 19.50s | 61,494,033 bytes | -| **devup-ui (single css)** | **17.05s** | **59,520,196 bytes** | + + + + Library + Build Time + Build Size + + + + + tailwindcss + 19.31s + 59,521,539 bytes + + + styleX + 41.78s + 86,869,452 bytes + + + vanilla-extract + 19.50s + 61,494,033 bytes + + + **devup-ui (single css)** + **17.05s** + **59,520,196 bytes** + + +
With Turbopack, Devup UI achieves the **smallest bundle size** at just 4,772,050 bytes. From be28cb5a948313218706ccde9ec619b7d6a61183 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 19 Dec 2025 10:22:58 +0000 Subject: [PATCH 2/4] Add comprehensive benchmark results to overview page Expand benchmark table with complete comparison data from README: - Add Version column for all libraries - Include kuma-ui, panda-css, chakra-ui, and mui benchmarks - Add devup-ui per-file css variant - Include Turbopack benchmark results for both tailwindcss and devup-ui - Show devup-ui's smallest bundle size (4,772,050 bytes with Turbopack) --- .../src/app/(detail)/docs/overview/page.mdx | 49 ++++++++++++++++++- 1 file changed, 47 insertions(+), 2 deletions(-) diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx index 1237e5a4..3048187b 100644 --- a/apps/landing/src/app/(detail)/docs/overview/page.mdx +++ b/apps/landing/src/app/(detail)/docs/overview/page.mdx @@ -135,6 +135,7 @@ Benchmarks on Next.js (GitHub Actions - ubuntu-latest): Library + Version Build Time Build Size @@ -142,29 +143,73 @@ Benchmarks on Next.js (GitHub Actions - ubuntu-latest): tailwindcss + 4.1.13 19.31s 59,521,539 bytes styleX + 0.15.4 41.78s 86,869,452 bytes vanilla-extract + 1.17.4 19.50s 61,494,033 bytes + + kuma-ui + 1.5.9 + 20.93s + 69,924,179 bytes + + + panda-css + 1.3.1 + 20.64s + 64,573,260 bytes + + + chakra-ui + 3.27.0 + 28.81s + 222,435,802 bytes + + + mui + 7.3.2 + 20.86s + 97,964,458 bytes + + + **devup-ui (per-file css)** + **1.0.18** + **16.90s** + 59,540,459 bytes + **devup-ui (single css)** + **1.0.18** **17.05s** **59,520,196 bytes** + + tailwindcss (turbopack) + 4.1.13 + 6.72s + 5,355,082 bytes + + + **devup-ui (single css + turbopack)** + **1.0.18** + 10.34s + **4,772,050 bytes** + -With Turbopack, Devup UI achieves the **smallest bundle size** at just 4,772,050 bytes. - ### Get Started Ready to experience the future of CSS-in-JS? Head to the [Installation](/docs/installation) guide to get started in minutes. From 167460bc7687bb49d61b084321d8f4239ff1ca14 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 19 Dec 2025 10:34:53 +0000 Subject: [PATCH 3/4] Fix MDX lint errors by replacing backticks with code tags Replace backticks in TableCell components with tags to fix MDX parsing issues: - typography/page.mdx: Fix property names and examples - breakpoints/page.mdx: Fix breakpoint names - group-selector/page.mdx: Fix selector names and role attribute --- .../(detail)/docs/api/group-selector/page.mdx | 14 +++++----- .../(detail)/docs/devup/breakpoints/page.mdx | 12 ++++---- .../(detail)/docs/devup/typography/page.mdx | 28 +++++++++---------- 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx index 8b6fa41e..53088e9a 100644 --- a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx +++ b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx @@ -44,19 +44,19 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o - `_groupHover` - Parent with `role="group"` is hovered + _groupHover + Parent with role="group" is hovered - `_groupFocus` - Parent with `role="group"` is focused + _groupFocus + Parent with role="group" is focused - `_groupActive` - Parent with `role="group"` is active (pressed) + _groupActive + Parent with role="group" is active (pressed) - `_groupFocusWithin` + _groupFocusWithin Any element inside the group receives focus diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx index 57beecef..025ed6ca 100644 --- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx +++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx @@ -32,37 +32,37 @@ Devup UI uses a mobile-first responsive design system with 6 breakpoints. Use ar 0 - `xs` + xs 0px - 479px Mobile (portrait) 1 - `sm` + sm 480px - 767px Mobile (landscape) 2 - `md` + md 768px - 991px Tablet 3 - `lg` + lg 992px - 1279px Small desktop 4 - `xl` + xl 1280px - 1599px Desktop 5 - `2xl` + 2xl 1600px+ Large desktop diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx index ed584dd7..0c271618 100644 --- a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx +++ b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx @@ -80,39 +80,39 @@ Each typography style can include: - `fontFamily` + fontFamily Font family name - `"Pretendard"` + "Pretendard" - `fontSize` + fontSize Font size - `"16px"` + "16px" - `fontWeight` + fontWeight Font weight (number or string) - `700` or `"bold"` + 700 or "bold" - `fontStyle` + fontStyle Font style - `"normal"` or `"italic"` + "normal" or "italic" - `lineHeight` + lineHeight Line height (number or string) - `1.5` or `"150%"` + 1.5 or "150%" - `letterSpacing` + letterSpacing Letter spacing - `"-0.02em"` + "-0.02em" - `textTransform` + textTransform Text transformation - `"uppercase"` + "uppercase" From 281d5a627e9932ee91374697405249110c9af5a3 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 19 Dec 2025 10:44:30 +0000 Subject: [PATCH 4/4] Fix all MDX lint errors with proper formatting Apply comprehensive lint fixes: - Sort imports alphabetically (simple-import-sort) - Add proper indentation for TableCell contents (prettier) - Replace quotes with HTML entities " (react/no-unescaped-entities) Changes apply to: - overview/page.mdx - typography/page.mdx - breakpoints/page.mdx - group-selector/page.mdx --- .../(detail)/docs/api/group-selector/page.mdx | 34 +++++++--- .../(detail)/docs/devup/breakpoints/page.mdx | 30 ++++++--- .../(detail)/docs/devup/typography/page.mdx | 62 ++++++++++++++----- .../src/app/(detail)/docs/overview/page.mdx | 6 +- 4 files changed, 93 insertions(+), 39 deletions(-) diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx index 53088e9a..4ab39330 100644 --- a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx +++ b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx @@ -1,10 +1,10 @@ import { Table, - TableHead, TableBody, - TableRow, - TableHeaderCell, TableCell, + TableHead, + TableHeaderCell, + TableRow, } from '@/components/mdx/components/Table' export const metadata = { @@ -44,19 +44,33 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o - _groupHover - Parent with role="group" is hovered + + _groupHover + + + Parent with role="group" is hovered + - _groupFocus - Parent with role="group" is focused + + _groupFocus + + + Parent with role="group" is focused + - _groupActive - Parent with role="group" is active (pressed) + + _groupActive + + + Parent with role="group" is active (pressed) + - _groupFocusWithin + + _groupFocusWithin + Any element inside the group receives focus diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx index 025ed6ca..205036bb 100644 --- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx +++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx @@ -1,10 +1,10 @@ import { Table, - TableHead, TableBody, - TableRow, - TableHeaderCell, TableCell, + TableHead, + TableHeaderCell, + TableRow, } from '@/components/mdx/components/Table' export const metadata = { @@ -32,37 +32,49 @@ Devup UI uses a mobile-first responsive design system with 6 breakpoints. Use ar 0 - xs + + xs + 0px - 479px Mobile (portrait) 1 - sm + + sm + 480px - 767px Mobile (landscape) 2 - md + + md + 768px - 991px Tablet 3 - lg + + lg + 992px - 1279px Small desktop 4 - xl + + xl + 1280px - 1599px Desktop 5 - 2xl + + 2xl + 1600px+ Large desktop diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx index 0c271618..a356fffd 100644 --- a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx +++ b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx @@ -1,10 +1,10 @@ import { Table, - TableHead, TableBody, - TableRow, - TableHeaderCell, TableCell, + TableHead, + TableHeaderCell, + TableRow, } from '@/components/mdx/components/Table' export const metadata = { @@ -80,39 +80,67 @@ Each typography style can include: - fontFamily + + fontFamily + Font family name - "Pretendard" + + "Pretendard" + - fontSize + + fontSize + Font size - "16px" + + "16px" + - fontWeight + + fontWeight + Font weight (number or string) - 700 or "bold" + + 700 or "bold" + - fontStyle + + fontStyle + Font style - "normal" or "italic" + + "normal" or "italic" + - lineHeight + + lineHeight + Line height (number or string) - 1.5 or "150%" + + 1.5 or "150%" + - letterSpacing + + letterSpacing + Letter spacing - "-0.02em" + + "-0.02em" + - textTransform + + textTransform + Text transformation - "uppercase" + + "uppercase" + diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx index 3048187b..2f40a4bc 100644 --- a/apps/landing/src/app/(detail)/docs/overview/page.mdx +++ b/apps/landing/src/app/(detail)/docs/overview/page.mdx @@ -1,10 +1,10 @@ import { Table, - TableHead, TableBody, - TableRow, - TableHeaderCell, TableCell, + TableHead, + TableHeaderCell, + TableRow, } from '@/components/mdx/components/Table' export const metadata = {