Skip to content

Commit e29c1bf

Browse files
owjs3901owjs3901
committed
Fix lint
1 parent b59b007 commit e29c1bf

File tree

12 files changed

+327
-328
lines changed

12 files changed

+327
-328
lines changed

‎README.md‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,19 @@ npm install @devup-ui/webpack-plugin
8181

8282
Next.js Build Time and Build Size (github action - ubuntu-latest)
8383

84-
| Library | Version | Build Time | Build Size |
85-
| ------------------------------ | ------- | ---------- | ----------------- |
86-
| tailwindcss | 4.1.13 | 19.31s | 59,521,539 bytes |
87-
| styleX | 0.15.4 | 41.78s | 86,869,452 bytes |
88-
| vanilla-extract | 1.17.4 | 19.50s | 61,494,033 bytes |
89-
| kuma-ui | 1.5.9 | 20.93s | 69,924,179 bytes |
90-
| panda-css | 1.3.1 | 20.64s | 64,573,260 bytes |
91-
| chakra-ui | 3.27.0 | 28.81s | 222,435,802 bytes |
92-
| mui | 7.3.2 | 20.86s | 97,964,458 bytes |
93-
| **devup-ui(per-file css)** | 1.0.18 | **16.90s** | 59,540,459 bytes |
94-
| **devup-ui(single css)** | 1.0.18 | **17.05s** | **59,520,196 bytes** |
95-
| tailwindcss(turbopack) | 4.1.13 | 6.72s | 5,355,082 bytes |
96-
| **devup-ui(single css+turbopack)** | 1.0.18 | 10.34s | **4,772,050 bytes** |
84+
| Library | Version | Build Time | Build Size |
85+
| ---------------------------------- | ------- | ---------- | -------------------- |
86+
| tailwindcss | 4.1.13 | 19.31s | 59,521,539 bytes |
87+
| styleX | 0.15.4 | 41.78s | 86,869,452 bytes |
88+
| vanilla-extract | 1.17.4 | 19.50s | 61,494,033 bytes |
89+
| kuma-ui | 1.5.9 | 20.93s | 69,924,179 bytes |
90+
| panda-css | 1.3.1 | 20.64s | 64,573,260 bytes |
91+
| chakra-ui | 3.27.0 | 28.81s | 222,435,802 bytes |
92+
| mui | 7.3.2 | 20.86s | 97,964,458 bytes |
93+
| **devup-ui(per-file css)** | 1.0.18 | **16.90s** | 59,540,459 bytes |
94+
| **devup-ui(single css)** | 1.0.18 | **17.05s** | **59,520,196 bytes** |
95+
| tailwindcss(turbopack) | 4.1.13 | 6.72s | 5,355,082 bytes |
96+
| **devup-ui(single css+turbopack)** | 1.0.18 | 10.34s | **4,772,050 bytes** |
9797

9898
## How it works
9999

@@ -103,10 +103,10 @@ Devup UI transforms your components at build time. Class names are generated usi
103103

104104
```tsx
105105
// You write:
106-
<Box bg="red" p={4} _hover={{ bg: "blue" }} />
106+
const variable = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
107107

108108
// Devup UI generates:
109-
<div className="a b c" />
109+
const variable = <div className="a b c" />
110110

111111
// With CSS:
112112
// .a { background-color: red; }
@@ -118,10 +118,10 @@ Devup UI transforms your components at build time. Class names are generated usi
118118

119119
```tsx
120120
// You write:
121-
<Box bg={colorVariable} />
121+
const example = <Box bg={colorVariable} />
122122

123123
// Devup UI generates:
124-
<div className="a" style={{ '--a': colorVariable }} />
124+
const example = <div className="a" style={{ '--a': colorVariable }} />
125125

126126
// With CSS:
127127
// .a { background-color: var(--a); }
@@ -131,13 +131,15 @@ Devup UI transforms your components at build time. Class names are generated usi
131131

132132
```tsx
133133
// You write:
134-
<Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
134+
const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
135135

136136
// Devup UI generates:
137-
<div
138-
className={`a b ${isActive ? 'c' : 'd'}`}
139-
style={{ '--d': dynamicColor }}
140-
/>
137+
const example = (
138+
<div
139+
className={`a b ${isActive ? 'c' : 'd'}`}
140+
style={{ '--d': dynamicColor }}
141+
/>
142+
)
141143

142144
// With responsive CSS for each breakpoint
143145
```
@@ -173,18 +175,18 @@ Devup UI transforms your components at build time. Class names are generated usi
173175

174176
```tsx
175177
// Type-safe theme tokens
176-
<Text color="$primary" />
177-
<Box typography="$heading" />
178+
const textExample = <Text color="$primary" />
179+
const boxExample = <Box typography="$heading" />
178180
```
179181

180182
**Responsive + Pseudo selectors together:**
181183

182184
```tsx
183185
// Responsive with pseudo selector
184-
<Box _hover={{ bg: ['red', 'blue'] }} />
186+
const example = <Box _hover={{ bg: ['red', 'blue'] }} />
185187

186188
// Equivalent syntax
187-
<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
189+
const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
188190
```
189191

190192
**styled-components / Emotion compatible `styled()` API:**
@@ -195,7 +197,7 @@ import { styled } from '@devup-ui/react'
195197
// Familiar syntax for styled-components and Emotion users
196198
const Card = styled('div', {
197199
bg: 'white',
198-
p: 4, // 4 * 4 = 16px
200+
p: 4, // 4 * 4 = 16px
199201
borderRadius: '8px',
200202
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
201203
_hover: {
@@ -204,15 +206,15 @@ const Card = styled('div', {
204206
})
205207

206208
const Button = styled('button', {
207-
px: 4, // 4 * 4 = 16px
208-
py: 2, // 2 * 4 = 8px
209+
px: 4, // 4 * 4 = 16px
210+
py: 2, // 2 * 4 = 8px
209211
borderRadius: '4px',
210212
cursor: 'pointer',
211213
})
212214

213215
// Usage
214-
<Card>Content</Card>
215-
<Button>Click me</Button>
216+
const cardExample = <Card>Content</Card>
217+
const buttonExample = <Button>Click me</Button>
216218
```
217219

218220
## Inspirations

‎README_ko.md‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,19 @@ npm install @devup-ui/webpack-plugin
8181

8282
Next.js Build Time and Build Size (github action - ubuntu-latest)
8383

84-
| 라이브러리 | 버전 | 빌드 시간 | 빌드 사이즈 |
85-
| ---------------------------------- | ------ | ---------- | --------------------- |
86-
| tailwindcss | 4.1.13 | 19.31s | 59,521,539 bytes |
87-
| styleX | 0.15.4 | 41.78s | 86,869,452 bytes |
88-
| vanilla-extract | 1.17.4 | 19.50s | 61,494,033 bytes |
89-
| kuma-ui | 1.5.9 | 20.93s | 69,924,179 bytes |
90-
| panda-css | 1.3.1 | 20.64s | 64,573,260 bytes |
91-
| chakra-ui | 3.27.0 | 28.81s | 222,435,802 bytes |
92-
| mui | 7.3.2 | 20.86s | 97,964,458 bytes |
93-
| **devup-ui(per-file css)** | 1.0.18 | **16.90s** | 59,540,459 bytes |
94-
| **devup-ui(single css)** | 1.0.18 | **17.05s** | **59,520,196 bytes** |
95-
| tailwindcss(turbopack) | 4.1.13 | 6.72s | 5,355,082 bytes |
96-
| **devup-ui(single css+turbopack)** | 1.0.18 | 10.34s | **4,772,050 bytes** |
84+
| 라이브러리 | 버전 | 빌드 시간 | 빌드 사이즈 |
85+
| ---------------------------------- | ------ | ---------- | -------------------- |
86+
| tailwindcss | 4.1.13 | 19.31s | 59,521,539 bytes |
87+
| styleX | 0.15.4 | 41.78s | 86,869,452 bytes |
88+
| vanilla-extract | 1.17.4 | 19.50s | 61,494,033 bytes |
89+
| kuma-ui | 1.5.9 | 20.93s | 69,924,179 bytes |
90+
| panda-css | 1.3.1 | 20.64s | 64,573,260 bytes |
91+
| chakra-ui | 3.27.0 | 28.81s | 222,435,802 bytes |
92+
| mui | 7.3.2 | 20.86s | 97,964,458 bytes |
93+
| **devup-ui(per-file css)** | 1.0.18 | **16.90s** | 59,540,459 bytes |
94+
| **devup-ui(single css)** | 1.0.18 | **17.05s** | **59,520,196 bytes** |
95+
| tailwindcss(turbopack) | 4.1.13 | 6.72s | 5,355,082 bytes |
96+
| **devup-ui(single css+turbopack)** | 1.0.18 | 10.34s | **4,772,050 bytes** |
9797

9898
## 작동 원리
9999

@@ -103,10 +103,10 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
103103

104104
```tsx
105105
// 개발자가 작성:
106-
<Box bg="red" p={4} _hover={{ bg: "blue" }} />
106+
const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
107107

108108
// Devup UI가 생성:
109-
<div className="a b c" />
109+
const generated = <div className="a b c" />
110110

111111
// CSS:
112112
// .a { background-color: red; }
@@ -118,10 +118,10 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
118118

119119
```tsx
120120
// 개발자가 작성:
121-
<Box bg={colorVariable} />
121+
const example = <Box bg={colorVariable} />
122122

123123
// Devup UI가 생성:
124-
<div className="a" style={{ '--a': colorVariable }} />
124+
const generated = <div className="a" style={{ '--a': colorVariable }} />
125125

126126
// CSS:
127127
// .a { background-color: var(--a); }
@@ -131,13 +131,15 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
131131

132132
```tsx
133133
// 개발자가 작성:
134-
<Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
134+
const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
135135

136136
// Devup UI가 생성:
137-
<div
138-
className={`a b ${isActive ? 'c' : 'd'}`}
139-
style={{ '--d': dynamicColor }}
140-
/>
137+
const generated = (
138+
<div
139+
className={`a b ${isActive ? 'c' : 'd'}`}
140+
style={{ '--d': dynamicColor }}
141+
/>
142+
)
141143

142144
// 각 브레이크포인트에 대한 반응형 CSS 생성
143145
```
@@ -173,18 +175,18 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
173175

174176
```tsx
175177
// 타입 세이프 테마 토큰
176-
<Text color="$primary" />
177-
<Box typography="$heading" />
178+
const textExample = <Text color="$primary" />
179+
const boxExample = <Box typography="$heading" />
178180
```
179181

180182
**반응형 + 가상 선택자 동시 사용:**
181183

182184
```tsx
183185
// 반응형과 가상 선택자 함께 사용
184-
<Box _hover={{ bg: ['red', 'blue'] }} />
186+
const example = <Box _hover={{ bg: ['red', 'blue'] }} />
185187

186188
// 동일한 표현
187-
<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
189+
const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
188190
```
189191

190192
**styled-components / Emotion 호환 `styled()` API:**
@@ -195,7 +197,7 @@ import { styled } from '@devup-ui/react'
195197
// styled-components, Emotion 사용자에게 익숙한 문법
196198
const Card = styled('div', {
197199
bg: 'white',
198-
p: 4, // 4 * 4 = 16px
200+
p: 4, // 4 * 4 = 16px
199201
borderRadius: '8px',
200202
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
201203
_hover: {
@@ -205,15 +207,15 @@ const Card = styled('div', {
205207

206208
// 버튼 예시
207209
const Button = styled('button', {
208-
px: 4, // 4 * 4 = 16px
209-
py: 2, // 2 * 4 = 8px
210+
px: 4, // 4 * 4 = 16px
211+
py: 2, // 2 * 4 = 8px
210212
borderRadius: '4px',
211213
cursor: 'pointer',
212214
})
213215

214216
// 사용
215-
<Card>Content</Card>
216-
<Button>Click me</Button>
217+
const cardExample = <Card>Content</Card>
218+
const buttonExample = <Button>Click me</Button>
217219
```
218220

219221
## 영감

0 commit comments

Comments
 (0)