virtual-ui-lib 1.0.4 → 1.0.9
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.
- package/README.md +165 -24
- package/dist/index.js +25 -0
- package/dist/index.mjs +24 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,30 @@
|
|
|
1
1
|
# Virtual UI
|
|
2
2
|
|
|
3
|
-
Simple React UI Component Library.
|
|
3
|
+
Simple **React UI Component Library** with customizable components.
|
|
4
|
+
|
|
5
|
+
---
|
|
4
6
|
|
|
5
7
|
## Install
|
|
6
8
|
|
|
9
|
+
```bash
|
|
7
10
|
npm install virtual-ui-lib
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
---
|
|
8
14
|
|
|
9
15
|
## Usage
|
|
10
16
|
|
|
11
17
|
```jsx
|
|
12
|
-
import {
|
|
18
|
+
import {
|
|
19
|
+
Button,
|
|
20
|
+
Card,
|
|
21
|
+
Input,
|
|
22
|
+
Badge,
|
|
23
|
+
Alert,
|
|
24
|
+
Avatar,
|
|
25
|
+
Spinner,
|
|
26
|
+
Modal
|
|
27
|
+
} from "virtual-ui-lib"
|
|
13
28
|
|
|
14
29
|
function App() {
|
|
15
30
|
return (
|
|
@@ -21,6 +36,14 @@ function App() {
|
|
|
21
36
|
</Card>
|
|
22
37
|
|
|
23
38
|
<Input placeholder="Enter name" />
|
|
39
|
+
|
|
40
|
+
<Badge text="New" />
|
|
41
|
+
|
|
42
|
+
<Alert text="Saved successfully" />
|
|
43
|
+
|
|
44
|
+
<Avatar />
|
|
45
|
+
|
|
46
|
+
<Spinner />
|
|
24
47
|
</>
|
|
25
48
|
)
|
|
26
49
|
}
|
|
@@ -28,52 +51,170 @@ function App() {
|
|
|
28
51
|
|
|
29
52
|
---
|
|
30
53
|
|
|
31
|
-
|
|
54
|
+
# Components
|
|
32
55
|
|
|
33
|
-
|
|
56
|
+
Virtual UI currently includes the following components:
|
|
57
|
+
|
|
58
|
+
* Button
|
|
59
|
+
* Card
|
|
60
|
+
* Input
|
|
61
|
+
* Badge
|
|
62
|
+
* Alert
|
|
63
|
+
* Avatar
|
|
64
|
+
* Spinner
|
|
65
|
+
* Modal
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
# Button
|
|
34
70
|
|
|
35
71
|
```jsx
|
|
36
72
|
<Button text="Click me" />
|
|
37
73
|
```
|
|
38
74
|
|
|
39
|
-
Props
|
|
75
|
+
### Props
|
|
76
|
+
|
|
77
|
+
| Prop | Description |
|
|
78
|
+
| -------- | ---------------- |
|
|
79
|
+
| text | Button text |
|
|
80
|
+
| bg | Background color |
|
|
81
|
+
| color | Text color |
|
|
82
|
+
| size | sm / md / lg |
|
|
83
|
+
| width | Button width |
|
|
84
|
+
| radius | Border radius |
|
|
85
|
+
| shadow | Box shadow |
|
|
86
|
+
| disabled | Disable button |
|
|
87
|
+
| icon | Add icon |
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
# Card
|
|
92
|
+
|
|
93
|
+
```jsx
|
|
94
|
+
<Card title="Card Title" text="Card description" />
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Props
|
|
98
|
+
|
|
99
|
+
| Prop | Description |
|
|
100
|
+
| -------- | ------------------------- |
|
|
101
|
+
| title | Card title |
|
|
102
|
+
| text | Card description |
|
|
103
|
+
| width | Card width |
|
|
104
|
+
| radius | Border radius |
|
|
105
|
+
| shadow | Box shadow |
|
|
106
|
+
| children | Extra content inside card |
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
# Input
|
|
111
|
+
|
|
112
|
+
```jsx
|
|
113
|
+
<Input placeholder="Enter name" />
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Props
|
|
117
|
+
|
|
118
|
+
| Prop | Description |
|
|
119
|
+
| ----------- | -------------------- |
|
|
120
|
+
| placeholder | Input placeholder |
|
|
121
|
+
| width | Input width |
|
|
122
|
+
| radius | Border radius |
|
|
123
|
+
| shadow | Box shadow |
|
|
124
|
+
| value | Input value |
|
|
125
|
+
| onChange | Input change handler |
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
# Badge
|
|
130
|
+
|
|
131
|
+
```jsx
|
|
132
|
+
<Badge text="New" />
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Props
|
|
40
136
|
|
|
41
137
|
| Prop | Description |
|
|
42
138
|
| ----- | ---------------- |
|
|
43
|
-
| text |
|
|
139
|
+
| text | Badge text |
|
|
44
140
|
| bg | Background color |
|
|
45
141
|
| color | Text color |
|
|
46
|
-
| size | sm / md / lg |
|
|
47
142
|
|
|
48
143
|
---
|
|
49
144
|
|
|
50
|
-
|
|
145
|
+
# Alert
|
|
51
146
|
|
|
52
147
|
```jsx
|
|
53
|
-
<
|
|
148
|
+
<Alert text="Saved successfully" />
|
|
54
149
|
```
|
|
55
150
|
|
|
56
|
-
Props
|
|
151
|
+
### Props
|
|
57
152
|
|
|
58
|
-
| Prop
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
| shadow | Card shadow |
|
|
153
|
+
| Prop | Description |
|
|
154
|
+
| ----- | ---------------- |
|
|
155
|
+
| text | Alert message |
|
|
156
|
+
| bg | Background color |
|
|
157
|
+
| color | Text color |
|
|
64
158
|
|
|
65
159
|
---
|
|
66
160
|
|
|
67
|
-
|
|
161
|
+
# Avatar
|
|
68
162
|
|
|
69
163
|
```jsx
|
|
70
|
-
<
|
|
164
|
+
<Avatar />
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Props
|
|
168
|
+
|
|
169
|
+
| Prop | Description |
|
|
170
|
+
| ------ | ------------- |
|
|
171
|
+
| src | Avatar image |
|
|
172
|
+
| size | Avatar size |
|
|
173
|
+
| radius | Border radius |
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
# Spinner
|
|
178
|
+
|
|
179
|
+
```jsx
|
|
180
|
+
<Spinner />
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Props
|
|
184
|
+
|
|
185
|
+
| Prop | Description |
|
|
186
|
+
| ------ | ------------- |
|
|
187
|
+
| size | Spinner size |
|
|
188
|
+
| color | Spinner color |
|
|
189
|
+
| border | Border width |
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
# Modal
|
|
194
|
+
|
|
195
|
+
```jsx
|
|
196
|
+
<Modal open={true} title="Example Modal">
|
|
197
|
+
Hello Modal
|
|
198
|
+
</Modal>
|
|
71
199
|
```
|
|
72
200
|
|
|
73
|
-
Props
|
|
201
|
+
### Props
|
|
202
|
+
|
|
203
|
+
| Prop | Description |
|
|
204
|
+
| -------- | ----------------- |
|
|
205
|
+
| open | Show / hide modal |
|
|
206
|
+
| title | Modal title |
|
|
207
|
+
| onClose | Close modal |
|
|
208
|
+
| children | Modal content |
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
# Contributing
|
|
213
|
+
|
|
214
|
+
Feel free to contribute by creating issues or pull requests.
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
# License
|
|
74
219
|
|
|
75
|
-
|
|
76
|
-
| ----------- | ----------------- |
|
|
77
|
-
| placeholder | Input placeholder |
|
|
78
|
-
| width | Input width |
|
|
79
|
-
| radius | Border radius |
|
|
220
|
+
MIT
|
package/dist/index.js
CHANGED
|
@@ -36,6 +36,7 @@ __export(index_exports, {
|
|
|
36
36
|
Card: () => Card,
|
|
37
37
|
Input: () => Input,
|
|
38
38
|
Modal: () => Modal,
|
|
39
|
+
ProgressBar: () => ProgressBar,
|
|
39
40
|
Spinner: () => Spinner
|
|
40
41
|
});
|
|
41
42
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -311,6 +312,29 @@ var Modal = ({
|
|
|
311
312
|
)
|
|
312
313
|
);
|
|
313
314
|
};
|
|
315
|
+
|
|
316
|
+
// src/components/ProgressBar/ProgressBar.jsx
|
|
317
|
+
var import_react9 = __toESM(require("react"));
|
|
318
|
+
var ProgressBar = ({
|
|
319
|
+
progress = 50,
|
|
320
|
+
height = "20px",
|
|
321
|
+
bgColor = "#2563eb",
|
|
322
|
+
trackColor = "#d1d5db",
|
|
323
|
+
radius = "10px",
|
|
324
|
+
label = "Progress",
|
|
325
|
+
textColor = "#ffffff"
|
|
326
|
+
}) => {
|
|
327
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", { style: { width: "100%", background: trackColor, borderRadius: radius, overflow: "hidden" } }, /* @__PURE__ */ import_react9.default.createElement("div", { style: {
|
|
328
|
+
width: progress + "%",
|
|
329
|
+
height,
|
|
330
|
+
background: bgColor,
|
|
331
|
+
borderRadius: radius,
|
|
332
|
+
display: "flex",
|
|
333
|
+
alignItems: "center",
|
|
334
|
+
justifyContent: "center",
|
|
335
|
+
position: "relative"
|
|
336
|
+
} }, /* @__PURE__ */ import_react9.default.createElement("span", { style: { color: textColor, fontWeight: "600", fontSize: "14px" } }, label, ": ", progress, "%")));
|
|
337
|
+
};
|
|
314
338
|
// Annotate the CommonJS export names for ESM import in node:
|
|
315
339
|
0 && (module.exports = {
|
|
316
340
|
Alert,
|
|
@@ -320,5 +344,6 @@ var Modal = ({
|
|
|
320
344
|
Card,
|
|
321
345
|
Input,
|
|
322
346
|
Modal,
|
|
347
|
+
ProgressBar,
|
|
323
348
|
Spinner
|
|
324
349
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -269,6 +269,29 @@ var Modal = ({
|
|
|
269
269
|
)
|
|
270
270
|
);
|
|
271
271
|
};
|
|
272
|
+
|
|
273
|
+
// src/components/ProgressBar/ProgressBar.jsx
|
|
274
|
+
import React9 from "react";
|
|
275
|
+
var ProgressBar = ({
|
|
276
|
+
progress = 50,
|
|
277
|
+
height = "20px",
|
|
278
|
+
bgColor = "#2563eb",
|
|
279
|
+
trackColor = "#d1d5db",
|
|
280
|
+
radius = "10px",
|
|
281
|
+
label = "Progress",
|
|
282
|
+
textColor = "#ffffff"
|
|
283
|
+
}) => {
|
|
284
|
+
return /* @__PURE__ */ React9.createElement("div", { style: { width: "100%", background: trackColor, borderRadius: radius, overflow: "hidden" } }, /* @__PURE__ */ React9.createElement("div", { style: {
|
|
285
|
+
width: progress + "%",
|
|
286
|
+
height,
|
|
287
|
+
background: bgColor,
|
|
288
|
+
borderRadius: radius,
|
|
289
|
+
display: "flex",
|
|
290
|
+
alignItems: "center",
|
|
291
|
+
justifyContent: "center",
|
|
292
|
+
position: "relative"
|
|
293
|
+
} }, /* @__PURE__ */ React9.createElement("span", { style: { color: textColor, fontWeight: "600", fontSize: "14px" } }, label, ": ", progress, "%")));
|
|
294
|
+
};
|
|
272
295
|
export {
|
|
273
296
|
Alert,
|
|
274
297
|
Avatar,
|
|
@@ -277,5 +300,6 @@ export {
|
|
|
277
300
|
Card,
|
|
278
301
|
Input,
|
|
279
302
|
Modal,
|
|
303
|
+
ProgressBar,
|
|
280
304
|
Spinner
|
|
281
305
|
};
|