Skip to content

Commit b47693f

Browse files
owjs3901owjs3901
authored
Merge pull request #375 from hyu-dev/main
husky, pre-commit rules 적용
2 parents 38febe6 + d90b94a commit b47693f

File tree

130 files changed

+2244
-1389
lines changed

Some content is hidden

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

130 files changed

+2244
-1389
lines changed

‎.husky/pre-commit‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
pnpm lint-staged

‎.lintstagedrc.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
'**/*.{js,jsx,ts,tsx,mjs,md,mdx,json,json5,jsonc}': (files) => {
3+
return [
4+
`npx eslint --config eslint.config.mjs --fix ${files.join(' ')}`,
5+
`git add ${files.join(' ')}`,
6+
]
7+
},
8+
}

‎README.md‎

Lines changed: 48 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
33
</div>
44

5-
65
<h3 align="center">
76
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
87
</h3>
@@ -23,8 +22,8 @@
2322
<a href="https://discord.gg/8zjcGc7cWh">
2423
<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
2524
</a>
26-
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
27-
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
25+
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
26+
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
2827
</a>
2928
</div>
3029

@@ -76,48 +75,58 @@ npm install @devup-ui/webpack-plugin
7675

7776
Next.js Build Time and Build Size (github action - ubuntu-latest)
7877

79-
| Library | Version | Build Time | Build Size |
80-
|--------------------------|----------|------------|-------------------|
81-
| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
82-
| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
83-
| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
84-
| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
85-
| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
86-
| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
87-
| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
88-
| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
89-
| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
78+
| Library | Version | Build Time | Build Size |
79+
| ---------------------- | ------- | ---------- | ----------------- |
80+
| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
81+
| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
82+
| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
83+
| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
84+
| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
85+
| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
86+
| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
87+
| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
88+
| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
9089

9190
## How it works
9291

9392
Devup UI is a CSS in JS preprocessor that does not require runtime.
9493
Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
9594
We develop a preprocessor that considers all grammatical cases.
9695

97-
```typescript
98-
const before = <Box bg={"red"}/>
96+
```tsx
97+
const before = <Box bg="red" />
9998

100-
const after = <div className="d0"/>
99+
const after = <div className="d0" />
101100
```
102101

103102
Variables are fully supported.
104103

105-
```typescript
106-
const before = <Box bg={colorVariable}/>
107-
108-
const after = <div className="d0" style={{
109-
"--d0": colorVariable
110-
}}/>
104+
```tsx
105+
const before = <Box bg={colorVariable} />
106+
107+
const after = (
108+
<div
109+
className="d0"
110+
style={{
111+
'--d0': colorVariable,
112+
}}
113+
/>
114+
)
111115
```
112116

113117
Various expressions and responsiveness are also fully supported.
114118

115-
```typescript
116-
const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
117-
118-
const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
119-
"--d2": variable
120-
}}/>
119+
```tsx
120+
const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
121+
122+
const after = (
123+
<div
124+
className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
125+
style={{
126+
'--d2': variable,
127+
}}
128+
/>
129+
)
121130
```
122131

123132
Support Theme with Typing
@@ -139,36 +148,40 @@ Support Theme with Typing
139148
}
140149
```
141150

142-
```typescript
151+
```tsx
143152
// Type Safe
144-
<Text color="$text"/>
153+
<Text color="$text" />
145154
```
146155

147156
Support Responsive And Pseudo Selector
148157

149158
You can use responsive and pseudo selector.
150159

151-
```typescript
160+
```tsx
152161
// Responsive with Selector
153-
const box = <Box _hover={{bg: ["red", "blue"]}}/>
162+
const box = <Box _hover={{ bg: ['red', 'blue'] }} />
154163

155164
// Same
156-
const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
165+
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
157166
```
158167

159168
## How to Contribute
160169

161170
### Requirements
171+
162172
- [Node.js](https://nodejs.org) (LTS version recommended)
163173
- [Rust](https://rustup.rs) compiler
164174
- pnpm package manager (`npm install -g pnpm`)
165175

166176
### Development Setup
177+
167178
To set up the development environment, install the following packages:
179+
168180
```sh
169181
pnpm i
170182
pnpm build
171183
cargo install cargo-tarpaulin
172184
cargo install wasm-pack
173185
```
174-
After installation, run `pnpm test` to ensure everything works correctly.
186+
187+
After installation, run `pnpm test` to ensure everything works correctly.

‎README_ko.md‎

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
33
</div>
44

5-
65
<h3 align="center">
76
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
87
</h3>
@@ -23,8 +22,8 @@
2322
<a href="https://discord.gg/8zjcGc7cWh">
2423
<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
2524
</a>
26-
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
27-
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
25+
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
26+
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
2827
</a>
2928
</div>
3029

@@ -70,48 +69,58 @@ npm install @devup-ui/vite-plugin
7069

7170
Next.js Build Time and Build Size (github action - ubuntu-latest)
7271

73-
| 라이브러리 | 버전 | 빌드 시간 | 빌드 사이즈 |
74-
|--------------------------|----------|------------|-------------------|
75-
| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
76-
| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
77-
| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
78-
| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
79-
| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
80-
| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
81-
| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
82-
| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
83-
| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
72+
| 라이브러리 | 버전 | 빌드 시간 | 빌드 사이즈 |
73+
| ---------------------- | ------ | --------- | ----------------- |
74+
| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
75+
| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
76+
| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
77+
| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
78+
| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
79+
| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
80+
| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
81+
| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
82+
| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
8483

8584
## 작동 원리
8685

8786
Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다.
8887
Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다.
8988
모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다.
9089

91-
```typescript
92-
const before = <Box bg={"red"}/>
90+
```tsx
91+
const before = <Box bg="red" />
9392

94-
const after = <div className="d0"/>
93+
const after = <div className="d0" />
9594
```
9695

9796
변수 사용도 완전히 지원합니다.
9897

99-
```typescript
100-
const before = <Box bg={colorVariable}/>
101-
102-
const after = <div className="d0" style={{
103-
"--d0": colorVariable
104-
}}/>
98+
```tsx
99+
const before = <Box bg={colorVariable} />
100+
101+
const after = (
102+
<div
103+
className="d0"
104+
style={{
105+
'--d0': colorVariable,
106+
}}
107+
/>
108+
)
105109
```
106110

107111
다양한 표현식과 반응형도 모두 지원합니다.
108112

109-
```typescript
110-
const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
111-
112-
const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
113-
"--d2": variable
114-
}}/>
113+
```tsx
114+
const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
115+
116+
const after = (
117+
<div
118+
className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
119+
style={{
120+
'--d2': variable,
121+
}}
122+
/>
123+
)
115124
```
116125

117126
타이핑이 되는 테마를 지원합니다.
@@ -133,36 +142,40 @@ const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
133142
}
134143
```
135144

136-
```typescript
145+
```tsx
137146
// Type Safe
138-
<Text color="$text"/>
147+
<Text color="$text" />
139148
```
140149

141150
반응형과 가상 선택자도 지원합니다.
142151

143152
물론 동시 사용도 가능합니다.
144153

145-
```typescript
154+
```tsx
146155
// Responsive with Selector
147-
const box = <Box _hover={{bg: ["red", "blue"]}}/>
156+
const box = <Box _hover={{ bg: ['red', 'blue'] }} />
148157

149158
// Same
150-
const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
159+
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
151160
```
152161

153162
## 기여 방법
154163

155164
### 요구 사항
165+
156166
- [Node.js](https://nodejs.org) (LTS 버전 권장)
157167
- [Rust](https://rustup.rs) 컴파일러
158168
- pnpm 패키지 매니저 (`npm install -g pnpm`)
159169

160170
### 개발 환경 설정
171+
161172
개발 환경을 위해 아래 패키지들을 설치합니다:
173+
162174
```sh
163175
pnpm i
164176
pnpm build
165177
cargo install cargo-tarpaulin
166178
cargo install wasm-pack
167179
```
180+
168181
설치 후 `pnpm test`를 실행하여 문제가 없는지 확인합니다.

‎apps/landing/src/app/(detail)/components/[component]/bottom-sheet/Api.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-

‎apps/landing/src/app/(detail)/components/[component]/bottom-sheet/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
`Bottom Sheet` component displays content in a slide-up panel from the bottom of the screen.
1+
`Bottom Sheet` component displays content in a slide-up panel from the bottom of the screen.

‎apps/landing/src/app/(detail)/components/[component]/button/Api.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
###### API
2-
`Button` props extends the button HTML attributes.
2+
3+
`Button` props extends the button HTML attributes.
34

45
<div style={{ width: '100%', overflow: 'auto'}}>
56
| Property | Description | Type | Default |

‎apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-

‎apps/landing/src/app/(detail)/components/[component]/checkbox/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
`Checkbox` component allows users to select multiple options.
1+
`Checkbox` component allows users to select multiple options.

‎apps/landing/src/app/(detail)/components/[component]/color-picker/Api.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-

0 commit comments

Comments
 (0)