@devup-ui/react 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +149 -1
  2. package/package.json +12 -6
package/README.md CHANGED
@@ -1 +1,149 @@
1
- # WIP
1
+ <div align="center">
2
+ <img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
3
+ </div>
4
+
5
+
6
+ <h3 align="center">
7
+ Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
8
+ </h3>
9
+
10
+ ---
11
+
12
+ <div>
13
+ <img src='https://img.shields.io/npm/v/@devup-ui/react'>
14
+ <img src='https://img.shields.io/bundlephobia/minzip/@devup-ui/react'>
15
+ <img alt="Github Checks" src="https://badgen.net/github/checks/dev-five-git/devup-ui"/>
16
+ <img alt="Apache-2.0 License" src="https://img.shields.io/github/license/dev-five-git/devup-ui"/>
17
+ <a href="https://www.npmjs.com/package/@devup-ui/react">
18
+ <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@devup-ui/react.svg?style=flat"/>
19
+ </a>
20
+ <a href="https://badgen.net/github/stars/dev-five-git/devup-ui">
21
+ <img alt="Github Stars" src="https://badgen.net/github/stars/dev-five-git/devup-ui" />
22
+ </a>
23
+ <a href="https://discord.gg/BtNffusw">
24
+ <img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
25
+ </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"/>
28
+ </a>
29
+ </div>
30
+
31
+ ---
32
+
33
+ English | [한국어](README_ko.md)
34
+
35
+ ## Install
36
+
37
+ ```sh
38
+ npm install @devup-ui/react
39
+
40
+ # on next.js
41
+ npm install @devup-ui/next-plugin
42
+
43
+ # on vite
44
+ npm install @devup-ui/vite-plugin
45
+ ```
46
+
47
+ ## Features
48
+
49
+ - Preprocessor
50
+ - Zero Config
51
+ - Zero FOUC
52
+ - Zero Runtime
53
+ - RSC Support
54
+ - Must not use JavaScript, client-side logic, or hybrid solutions
55
+ - Support Library mode
56
+ - Zero Cost Dynamic Theme Support based on CSS Variables
57
+ - Theme with Typing
58
+ - Smallest size, fastest speed
59
+
60
+ ## Inspirations
61
+
62
+ - Styled System
63
+ - Chakra UI
64
+ - Theme UI
65
+ - Vanilla Extract
66
+ - Rainbow Sprinkles
67
+ - Kuma UI
68
+
69
+ ## Comparison Benchmarks
70
+
71
+ Next.js Build Time and Build Size (AMD Ryzen 9 9950X, 128GB RAM, Windows 11)
72
+
73
+ | Library | Build Time | Build Size |
74
+ |-----------|------------|--------------|
75
+ | kuma-ui | 20.933s | 57,295,073b |
76
+ | chakra-ui | 36.961s | 129,527,610b |
77
+ | devup-ui | 15.162s | 48,047,678b |
78
+
79
+ ## How it works
80
+
81
+ Devup UI is a CSS in JS preprocessor that does not require runtime.
82
+ Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
83
+ We develop a preprocessor that considers all grammatical cases.
84
+
85
+ ```jsx
86
+ // Before
87
+ <Box bg={"red"}/>
88
+ // After
89
+ <Box className={"d0"}/>
90
+ ```
91
+
92
+ Variables are fully supported.
93
+
94
+ ```jsx
95
+ // Before
96
+ <Box bg={colorVariable}/>
97
+ // After
98
+ <Box className={"d0"} style={{
99
+ "--d0": colorVariable
100
+ }}/>
101
+ ```
102
+
103
+ Various expressions and responsiveness are also fully supported.
104
+
105
+ ```jsx
106
+ // Before
107
+ <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
108
+ // After
109
+ <Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
110
+ "--d2": variable
111
+ }}/>
112
+ ```
113
+
114
+ Support Theme with Typing
115
+
116
+ `devup.json`
117
+
118
+ ```json
119
+ {
120
+ "theme": {
121
+ "colors": {
122
+ "default": {
123
+ "text": "#000"
124
+ },
125
+ "dark": {
126
+ "text": "white"
127
+ }
128
+ }
129
+ }
130
+ }
131
+ ```
132
+
133
+ ```jsx
134
+ // Type Safe
135
+ <Text color="$text"/>
136
+ ```
137
+
138
+ Support Responsive And Pseudo Selector
139
+
140
+ You can use responsive and pseudo selector.
141
+
142
+ ```jsx
143
+ // Responsive with Selector
144
+ <Box _hover={{bg: ["red", "blue"]}}/>
145
+
146
+ // Same
147
+ <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
148
+
149
+ ```
package/package.json CHANGED
@@ -1,11 +1,13 @@
1
1
  {
2
2
  "name": "@devup-ui/react",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
- "dependencies": {
6
- "react": "^19.0",
7
- "csstype": "^3.1"
5
+ "publishConfig": {
6
+ "access": "public"
8
7
  },
8
+ "sideEffects": false,
9
+ "main": "./dist/index.cjs",
10
+ "module": "./dist/index.js",
9
11
  "exports": {
10
12
  ".": {
11
13
  "import": "./dist/index.js",
@@ -16,11 +18,15 @@
16
18
  "dist"
17
19
  ],
18
20
  "types": "./dist/index.d.ts",
21
+ "dependencies": {
22
+ "react": "^19.0",
23
+ "csstype": "^3.1"
24
+ },
19
25
  "devDependencies": {
20
26
  "vite": "^6.0.7",
21
- "vite-plugin-dts": "^4.4.0",
27
+ "vite-plugin-dts": "^4.5.0",
22
28
  "vitest": "^2.1.8",
23
- "typescript": "^5.7.2",
29
+ "typescript": "^5.7.3",
24
30
  "@types/react": "^19"
25
31
  },
26
32
  "peerDependencies": {