@creativecodeco/ui 0.4.0 → 0.4.2
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/lib/hooks/use-safe-button-props.hook.d.ts +3 -1
- package/lib/hooks/use-safe-button-props.hook.js +2 -2
- package/lib/theme/css/button.css +4 -0
- package/lib/theme/css/main.css +1 -0
- package/lib/theme/css/span.css +5 -0
- package/lib/theme/css/text-box.css +57 -31
- package/lib/theme/main.css +142 -0
- package/lib/types/ui/components/button.types.d.ts +2 -0
- package/lib/types/ui/forms/text-box.types.d.ts +2 -1
- package/lib/ui/components/button/button.component.js +16 -9
- package/lib/ui/forms/text-box/text-box.component.js +10 -7
- package/package.json +25 -25
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import type { ButtonEvent } from '../types';
|
|
4
|
-
export default function useSafeButtonProps({ onClick, onSubmit, ...props }: React.ComponentPropsWithoutRef<'button'>
|
|
4
|
+
export default function useSafeButtonProps({ onClick, onSubmit, loading, ...props }: React.ComponentPropsWithoutRef<'button'> & {
|
|
5
|
+
loading?: boolean;
|
|
6
|
+
}): {
|
|
5
7
|
onClick: (event: ButtonEvent) => void;
|
|
6
8
|
onSubmit: (event: ButtonEvent) => void;
|
|
7
9
|
name?: string | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
|
-
export default function useSafeButtonProps({ onClick, onSubmit, ...props }) {
|
|
2
|
+
export default function useSafeButtonProps({ onClick, onSubmit, loading, ...props }) {
|
|
3
3
|
const wrapper = useCallback((callback, event) => {
|
|
4
|
-
!props.disabled && callback(event);
|
|
4
|
+
!props.disabled && !loading && callback(event);
|
|
5
5
|
}, [props.disabled]);
|
|
6
6
|
const handleClick = useCallback((event) => {
|
|
7
7
|
onClick && wrapper(onClick, event);
|
package/lib/theme/css/button.css
CHANGED
package/lib/theme/css/main.css
CHANGED
|
@@ -1,48 +1,50 @@
|
|
|
1
|
-
.text-box-size
|
|
2
|
-
|
|
1
|
+
.text-box-size {
|
|
2
|
+
&-xs {
|
|
3
|
+
@apply input-xs;
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
&.text-box-with-left-icon {
|
|
6
|
+
@apply pl-8;
|
|
7
|
+
}
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
&.text-box-with-right-icon {
|
|
10
|
+
@apply pr-8;
|
|
11
|
+
}
|
|
10
12
|
}
|
|
11
|
-
}
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
&-sm {
|
|
15
|
+
@apply input-sm;
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
&.text-box-with-left-icon {
|
|
18
|
+
@apply pl-8;
|
|
19
|
+
}
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
&.text-box-with-right-icon {
|
|
22
|
+
@apply pr-8;
|
|
23
|
+
}
|
|
22
24
|
}
|
|
23
|
-
}
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
&-md {
|
|
27
|
+
@apply input-md;
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
&.text-box-with-left-icon {
|
|
30
|
+
@apply pl-9;
|
|
31
|
+
}
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
&.text-box-with-right-icon {
|
|
34
|
+
@apply pr-9;
|
|
35
|
+
}
|
|
34
36
|
}
|
|
35
|
-
}
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
&-lg {
|
|
39
|
+
@apply input-lg;
|
|
39
40
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
&.text-box-with-left-icon {
|
|
42
|
+
@apply pl-9;
|
|
43
|
+
}
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
&.text-box-with-right-icon {
|
|
46
|
+
@apply pr-9;
|
|
47
|
+
}
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
|
|
@@ -85,3 +87,27 @@
|
|
|
85
87
|
@apply top-6 right-3;
|
|
86
88
|
}
|
|
87
89
|
}
|
|
90
|
+
|
|
91
|
+
.text-box-color {
|
|
92
|
+
&-primary {
|
|
93
|
+
@apply input-primary;
|
|
94
|
+
}
|
|
95
|
+
&-secondary {
|
|
96
|
+
@apply input-secondary;
|
|
97
|
+
}
|
|
98
|
+
&-accent {
|
|
99
|
+
@apply input-accent;
|
|
100
|
+
}
|
|
101
|
+
&-success {
|
|
102
|
+
@apply input-success;
|
|
103
|
+
}
|
|
104
|
+
&-warning {
|
|
105
|
+
@apply input-warning;
|
|
106
|
+
}
|
|
107
|
+
&-info {
|
|
108
|
+
@apply input-info;
|
|
109
|
+
}
|
|
110
|
+
&-error {
|
|
111
|
+
@apply input-error;
|
|
112
|
+
}
|
|
113
|
+
}
|
package/lib/theme/main.css
CHANGED
|
@@ -622,6 +622,35 @@ html {
|
|
|
622
622
|
max-width: 1536px;
|
|
623
623
|
}
|
|
624
624
|
}
|
|
625
|
+
.alert {
|
|
626
|
+
display: grid;
|
|
627
|
+
width: 100%;
|
|
628
|
+
grid-auto-flow: row;
|
|
629
|
+
align-content: flex-start;
|
|
630
|
+
align-items: center;
|
|
631
|
+
justify-items: center;
|
|
632
|
+
gap: 1rem;
|
|
633
|
+
text-align: center;
|
|
634
|
+
border-radius: var(--rounded-box, 1rem);
|
|
635
|
+
border-width: 1px;
|
|
636
|
+
--tw-border-opacity: 1;
|
|
637
|
+
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
|
|
638
|
+
padding: 1rem;
|
|
639
|
+
--tw-text-opacity: 1;
|
|
640
|
+
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
|
641
|
+
--alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
|
|
642
|
+
--alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
|
|
643
|
+
background-color: var(--alert-bg);
|
|
644
|
+
}
|
|
645
|
+
@media (min-width: 640px) {
|
|
646
|
+
|
|
647
|
+
.alert {
|
|
648
|
+
grid-auto-flow: column;
|
|
649
|
+
grid-template-columns: auto minmax(auto,1fr);
|
|
650
|
+
justify-items: start;
|
|
651
|
+
text-align: start;
|
|
652
|
+
}
|
|
653
|
+
}
|
|
625
654
|
.avatar {
|
|
626
655
|
position: relative;
|
|
627
656
|
display: inline-flex;
|
|
@@ -1182,6 +1211,36 @@ html {
|
|
|
1182
1211
|
margin-bottom: 0px;
|
|
1183
1212
|
margin-inline-start: -1px;
|
|
1184
1213
|
}
|
|
1214
|
+
.\!loading {
|
|
1215
|
+
pointer-events: none !important;
|
|
1216
|
+
display: inline-block !important;
|
|
1217
|
+
aspect-ratio: 1 / 1 !important;
|
|
1218
|
+
width: 1.5rem !important;
|
|
1219
|
+
background-color: currentColor !important;
|
|
1220
|
+
-webkit-mask-size: 100% !important;
|
|
1221
|
+
mask-size: 100% !important;
|
|
1222
|
+
-webkit-mask-repeat: no-repeat !important;
|
|
1223
|
+
mask-repeat: no-repeat !important;
|
|
1224
|
+
-webkit-mask-position: center !important;
|
|
1225
|
+
mask-position: center !important;
|
|
1226
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
|
|
1227
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
|
|
1228
|
+
}
|
|
1229
|
+
.loading {
|
|
1230
|
+
pointer-events: none;
|
|
1231
|
+
display: inline-block;
|
|
1232
|
+
aspect-ratio: 1 / 1;
|
|
1233
|
+
width: 1.5rem;
|
|
1234
|
+
background-color: currentColor;
|
|
1235
|
+
-webkit-mask-size: 100%;
|
|
1236
|
+
mask-size: 100%;
|
|
1237
|
+
-webkit-mask-repeat: no-repeat;
|
|
1238
|
+
mask-repeat: no-repeat;
|
|
1239
|
+
-webkit-mask-position: center;
|
|
1240
|
+
mask-position: center;
|
|
1241
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
1242
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
1243
|
+
}
|
|
1185
1244
|
:where(.menu li:empty) {
|
|
1186
1245
|
--tw-bg-opacity: 1;
|
|
1187
1246
|
background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
|
|
@@ -1402,6 +1461,7 @@ html {
|
|
|
1402
1461
|
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
|
|
1403
1462
|
--tw-bg-opacity: 1;
|
|
1404
1463
|
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
|
|
1464
|
+
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
|
1405
1465
|
--tw-text-opacity: 0.2;
|
|
1406
1466
|
}
|
|
1407
1467
|
.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
|
|
@@ -2684,6 +2744,10 @@ html {
|
|
|
2684
2744
|
border-radius: 9999px;
|
|
2685
2745
|
padding: 0px;
|
|
2686
2746
|
}
|
|
2747
|
+
.button-loading {
|
|
2748
|
+
pointer-events: none;
|
|
2749
|
+
cursor: default;
|
|
2750
|
+
}
|
|
2687
2751
|
@supports (color: color-mix(in oklab, black, black)) {
|
|
2688
2752
|
|
|
2689
2753
|
.button:focus,
|
|
@@ -3230,6 +3294,21 @@ html {
|
|
|
3230
3294
|
height: 2rem;
|
|
3231
3295
|
width: 2rem;
|
|
3232
3296
|
}
|
|
3297
|
+
.span-loading {
|
|
3298
|
+
pointer-events: none;
|
|
3299
|
+
display: inline-block;
|
|
3300
|
+
aspect-ratio: 1 / 1;
|
|
3301
|
+
width: 1.5rem;
|
|
3302
|
+
background-color: currentColor;
|
|
3303
|
+
-webkit-mask-size: 100%;
|
|
3304
|
+
mask-size: 100%;
|
|
3305
|
+
-webkit-mask-repeat: no-repeat;
|
|
3306
|
+
mask-repeat: no-repeat;
|
|
3307
|
+
-webkit-mask-position: center;
|
|
3308
|
+
mask-position: center;
|
|
3309
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
3310
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
3311
|
+
}
|
|
3233
3312
|
.text-box-size-xs {
|
|
3234
3313
|
height: 1.5rem;
|
|
3235
3314
|
padding-left: 0.5rem;
|
|
@@ -3323,3 +3402,66 @@ html {
|
|
|
3323
3402
|
top: 1.5rem;
|
|
3324
3403
|
right: 0.75rem;
|
|
3325
3404
|
}
|
|
3405
|
+
.text-box-color-primary {
|
|
3406
|
+
--tw-border-opacity: 1;
|
|
3407
|
+
border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
|
|
3408
|
+
}
|
|
3409
|
+
.text-box-color-primary:focus,.text-box-color-primary:focus-within {
|
|
3410
|
+
--tw-border-opacity: 1;
|
|
3411
|
+
border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
|
|
3412
|
+
outline-color: var(--fallback-p,oklch(var(--p)/1));
|
|
3413
|
+
}
|
|
3414
|
+
.text-box-color-secondary {
|
|
3415
|
+
--tw-border-opacity: 1;
|
|
3416
|
+
border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
|
|
3417
|
+
}
|
|
3418
|
+
.text-box-color-secondary:focus,.text-box-color-secondary:focus-within {
|
|
3419
|
+
--tw-border-opacity: 1;
|
|
3420
|
+
border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
|
|
3421
|
+
outline-color: var(--fallback-s,oklch(var(--s)/1));
|
|
3422
|
+
}
|
|
3423
|
+
.text-box-color-accent {
|
|
3424
|
+
--tw-border-opacity: 1;
|
|
3425
|
+
border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
|
|
3426
|
+
}
|
|
3427
|
+
.text-box-color-accent:focus,.text-box-color-accent:focus-within {
|
|
3428
|
+
--tw-border-opacity: 1;
|
|
3429
|
+
border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
|
|
3430
|
+
outline-color: var(--fallback-a,oklch(var(--a)/1));
|
|
3431
|
+
}
|
|
3432
|
+
.text-box-color-success {
|
|
3433
|
+
--tw-border-opacity: 1;
|
|
3434
|
+
border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
|
|
3435
|
+
}
|
|
3436
|
+
.text-box-color-success:focus,.text-box-color-success:focus-within {
|
|
3437
|
+
--tw-border-opacity: 1;
|
|
3438
|
+
border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
|
|
3439
|
+
outline-color: var(--fallback-su,oklch(var(--su)/1));
|
|
3440
|
+
}
|
|
3441
|
+
.text-box-color-warning {
|
|
3442
|
+
--tw-border-opacity: 1;
|
|
3443
|
+
border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
|
|
3444
|
+
}
|
|
3445
|
+
.text-box-color-warning:focus,.text-box-color-warning:focus-within {
|
|
3446
|
+
--tw-border-opacity: 1;
|
|
3447
|
+
border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
|
|
3448
|
+
outline-color: var(--fallback-wa,oklch(var(--wa)/1));
|
|
3449
|
+
}
|
|
3450
|
+
.text-box-color-info {
|
|
3451
|
+
--tw-border-opacity: 1;
|
|
3452
|
+
border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
|
|
3453
|
+
}
|
|
3454
|
+
.text-box-color-info:focus,.text-box-color-info:focus-within {
|
|
3455
|
+
--tw-border-opacity: 1;
|
|
3456
|
+
border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
|
|
3457
|
+
outline-color: var(--fallback-in,oklch(var(--in)/1));
|
|
3458
|
+
}
|
|
3459
|
+
.text-box-color-error {
|
|
3460
|
+
--tw-border-opacity: 1;
|
|
3461
|
+
border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
|
|
3462
|
+
}
|
|
3463
|
+
.text-box-color-error:focus,.text-box-color-error:focus-within {
|
|
3464
|
+
--tw-border-opacity: 1;
|
|
3465
|
+
border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
|
|
3466
|
+
outline-color: var(--fallback-er,oklch(var(--er)/1));
|
|
3467
|
+
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { IconType } from 'react-icons';
|
|
3
|
-
import type { ErrorType, SizeType } from '../../../types';
|
|
3
|
+
import type { ColorType, ErrorType, SizeType } from '../../../types';
|
|
4
4
|
export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, ErrorType {
|
|
5
5
|
name: string;
|
|
6
6
|
label?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
size?: SizeType;
|
|
9
|
+
color?: ColorType;
|
|
9
10
|
leftIcon?: IconType;
|
|
10
11
|
rightIcon?: IconType;
|
|
11
12
|
rightButton?: boolean;
|
|
@@ -1,20 +1,27 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useMemo } from 'react';
|
|
3
3
|
import cls from 'classnames';
|
|
4
4
|
import { useSafeButtonProps } from '../../../hooks';
|
|
5
|
-
const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon: Icon, iconPosition = 'left',
|
|
6
|
-
const safeProps = useSafeButtonProps({
|
|
7
|
-
const
|
|
5
|
+
const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon: Icon, iconPosition = 'left', loading, loadingLabel, ...otherProps }, ref) => {
|
|
6
|
+
const safeProps = useSafeButtonProps({ loading, ...otherProps });
|
|
7
|
+
const newIcon = useMemo(() => {
|
|
8
8
|
if (!Icon) {
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
11
11
|
return _jsx(Icon, {});
|
|
12
|
-
};
|
|
13
|
-
|
|
12
|
+
}, [Icon]);
|
|
13
|
+
const content = useMemo(() => {
|
|
14
|
+
if (loading) {
|
|
15
|
+
return (_jsxs(_Fragment, { children: [_jsx("span", { className: 'span-loading' }), loadingLabel] }));
|
|
16
|
+
}
|
|
17
|
+
return (_jsxs(_Fragment, { children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
|
|
18
|
+
}, [loading, loadingLabel, iconPosition, children, newIcon]);
|
|
19
|
+
return (_jsx("button", { ref: ref, className: cls('button', {
|
|
14
20
|
'button-link': isLink,
|
|
15
21
|
'button-outline': !isLink && outline,
|
|
16
22
|
[`button-color-${color}`]: !isLink && color,
|
|
17
|
-
[`button-size-${size}`]: size !== 'md'
|
|
18
|
-
|
|
23
|
+
[`button-size-${size}`]: size !== 'md',
|
|
24
|
+
'button-loading': loading
|
|
25
|
+
}), ...safeProps, children: content }));
|
|
19
26
|
});
|
|
20
27
|
export default Button;
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
3
3
|
import cls from 'classnames';
|
|
4
|
-
const TextBox = forwardRef(({ name, label, isError, error, disabled, size = 'md', leftIcon: LeftIcon, rightIcon: RightIcon, rightButton, onClick, ...otherProps }, ref) => {
|
|
4
|
+
const TextBox = forwardRef(({ name, label, isError, error, disabled, size = 'md', color, leftIcon: LeftIcon, rightIcon: RightIcon, rightButton, onClick, ...otherProps }, ref) => {
|
|
5
5
|
const inputRef = useRef(null);
|
|
6
6
|
useImperativeHandle(ref, () => inputRef.current);
|
|
7
|
-
return (_jsxs("
|
|
8
|
-
[`text-box-left-icon-size-${size}`]: size
|
|
9
|
-
|
|
7
|
+
return (_jsxs("label", { htmlFor: name, className: 'form-control w-full flex', children: [label && _jsx("span", { className: 'label-text', children: label }), _jsxs("div", { className: 'relative', children: [LeftIcon && (_jsx(LeftIcon, { className: cls('text-box-left-icon', {
|
|
8
|
+
[`text-box-left-icon-size-${size}`]: size,
|
|
9
|
+
'cursor-not-allowed': disabled
|
|
10
|
+
}) })), _jsx("input", { ref: inputRef, id: name, name: name, "data-testid": name, ...otherProps, onClick: (e) => !disabled && onClick?.(e), className: cls('input input-bordered w-full', `text-box-size-${size}`, {
|
|
10
11
|
'input-error': isError,
|
|
11
12
|
'text-box-with-left-icon': LeftIcon,
|
|
12
|
-
'text-box-with-right-icon': RightIcon
|
|
13
|
+
'text-box-with-right-icon': RightIcon,
|
|
14
|
+
[`text-box-color-${color}`]: !isError && color
|
|
13
15
|
}), disabled: disabled }), RightIcon && (_jsx(RightIcon, { className: cls('text-box-right-icon', {
|
|
14
16
|
[`text-box-right-icon-size-${size}`]: size,
|
|
15
|
-
'cursor-pointer': rightButton
|
|
16
|
-
|
|
17
|
+
'cursor-pointer': !disabled && rightButton,
|
|
18
|
+
'cursor-not-allowed': disabled
|
|
19
|
+
}), onClick: () => rightButton && !disabled && inputRef.current?.click() }))] }), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
|
|
17
20
|
});
|
|
18
21
|
export default TextBox;
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"framework design",
|
|
11
11
|
"design system"
|
|
12
12
|
],
|
|
13
|
-
"version": "0.4.
|
|
13
|
+
"version": "0.4.2",
|
|
14
14
|
"homepage": "https://github.com/creativecodeco/ui",
|
|
15
15
|
"author": {
|
|
16
16
|
"name": "John Toro",
|
|
@@ -48,41 +48,41 @@
|
|
|
48
48
|
"usehooks-ts": "2.9.1"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"postcss": "8.4.
|
|
51
|
+
"postcss": "8.4.34",
|
|
52
52
|
"postcss-import": "16.0.0",
|
|
53
53
|
"react": "18.2.0",
|
|
54
|
-
"react-hook-form": "7.
|
|
54
|
+
"react-hook-form": "7.50.1",
|
|
55
55
|
"tailwindcss": "3.4.1",
|
|
56
|
-
"usehooks-ts": "2.
|
|
56
|
+
"usehooks-ts": "2.13.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@babel/core": "7.23.
|
|
60
|
-
"@babel/preset-env": "7.23.
|
|
59
|
+
"@babel/core": "7.23.9",
|
|
60
|
+
"@babel/preset-env": "7.23.9",
|
|
61
61
|
"@babel/preset-react": "7.23.3",
|
|
62
62
|
"@babel/preset-typescript": "7.23.3",
|
|
63
63
|
"@jest/globals": "29.7.0",
|
|
64
|
-
"@storybook/addon-essentials": "7.6.
|
|
65
|
-
"@storybook/addon-interactions": "7.6.
|
|
66
|
-
"@storybook/addon-links": "7.6.
|
|
67
|
-
"@storybook/addon-mdx-gfm": "7.6.
|
|
68
|
-
"@storybook/blocks": "7.6.
|
|
69
|
-
"@storybook/react": "7.6.
|
|
70
|
-
"@storybook/react-webpack5": "7.6.
|
|
71
|
-
"@storybook/test": "7.6.
|
|
64
|
+
"@storybook/addon-essentials": "7.6.12",
|
|
65
|
+
"@storybook/addon-interactions": "7.6.12",
|
|
66
|
+
"@storybook/addon-links": "7.6.12",
|
|
67
|
+
"@storybook/addon-mdx-gfm": "7.6.12",
|
|
68
|
+
"@storybook/blocks": "7.6.12",
|
|
69
|
+
"@storybook/react": "7.6.12",
|
|
70
|
+
"@storybook/react-webpack5": "7.6.12",
|
|
71
|
+
"@storybook/test": "7.6.12",
|
|
72
72
|
"@testing-library/dom": "9.3.4",
|
|
73
|
-
"@testing-library/jest-dom": "6.2
|
|
74
|
-
"@testing-library/react": "14.1
|
|
73
|
+
"@testing-library/jest-dom": "6.4.2",
|
|
74
|
+
"@testing-library/react": "14.2.1",
|
|
75
75
|
"@testing-library/user-event": "14.5.2",
|
|
76
|
-
"@types/jest": "29.5.
|
|
77
|
-
"@types/node": "20.11.
|
|
78
|
-
"@types/react": "18.2.
|
|
76
|
+
"@types/jest": "29.5.12",
|
|
77
|
+
"@types/node": "20.11.16",
|
|
78
|
+
"@types/react": "18.2.55",
|
|
79
79
|
"@types/react-dom": "18.2.18",
|
|
80
|
-
"@typescript-eslint/eslint-plugin": "6.
|
|
80
|
+
"@typescript-eslint/eslint-plugin": "6.21.0",
|
|
81
81
|
"autoprefixer": "10.4.17",
|
|
82
|
-
"chromatic": "10.
|
|
82
|
+
"chromatic": "10.7.1",
|
|
83
83
|
"classnames": "2.5.1",
|
|
84
84
|
"cpx2": "7.0.1",
|
|
85
|
-
"daisyui": "4.6.
|
|
85
|
+
"daisyui": "4.6.1",
|
|
86
86
|
"eslint": "8.56.0",
|
|
87
87
|
"eslint-config-prettier": "9.1.0",
|
|
88
88
|
"eslint-config-standard": "17.1.0",
|
|
@@ -98,17 +98,17 @@
|
|
|
98
98
|
"eslint-plugin-standard": "5.0.0",
|
|
99
99
|
"eslint-plugin-storybook": "0.6.15",
|
|
100
100
|
"eslint-plugin-unused-imports": "3.0.0",
|
|
101
|
-
"husky": "
|
|
101
|
+
"husky": "9.0.10",
|
|
102
102
|
"jest": "29.7.0",
|
|
103
103
|
"jest-environment-jsdom": "29.7.0",
|
|
104
104
|
"jest-junit": "16.0.0",
|
|
105
105
|
"jest-transform-css": "6.0.1",
|
|
106
106
|
"postcss-cli": "11.0.0",
|
|
107
|
-
"prettier": "3.2.
|
|
107
|
+
"prettier": "3.2.5",
|
|
108
108
|
"prop-types": "15.8.1",
|
|
109
109
|
"react-dom": "18.2.0",
|
|
110
110
|
"react-icons": "5.0.1",
|
|
111
|
-
"storybook": "7.6.
|
|
111
|
+
"storybook": "7.6.12",
|
|
112
112
|
"storybook-addon-themes": "6.1.0",
|
|
113
113
|
"string-width": "7.1.0",
|
|
114
114
|
"ts-jest": "29.1.2",
|