@sikka/hawa 0.0.86 → 0.0.88
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/dist/styles.css +23 -19
- package/es/index.es.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/src/blocks/AuthForms/AppLanding.js +20 -5
- package/src/blocks/AuthForms/SignUpForm.js +53 -25
- package/src/elements/HawaButton.js +1 -5
- package/src/elements/HawaCheckbox.js +16 -6
- package/src/elements/HawaPhoneInput.js +2 -2
- package/src/elements/HawaSelect.js +12 -54
- package/src/elements/HawaTextField.js +2 -2
- package/src/styles.css +23 -19
- package/src/tailwind.css +2 -2
package/package.json
CHANGED
|
@@ -6,9 +6,21 @@ import { HawaContainer } from "../../layout/HawaContainer";
|
|
|
6
6
|
export const AppLanding = (props) => {
|
|
7
7
|
return (
|
|
8
8
|
<HawaContainer>
|
|
9
|
-
<HawaButton
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
<HawaButton
|
|
10
|
+
fullWidth
|
|
11
|
+
text={props.texts.signIn}
|
|
12
|
+
onClick={props.handleSignIn}
|
|
13
|
+
/>
|
|
14
|
+
<HawaButton
|
|
15
|
+
fullWidth
|
|
16
|
+
text={props.texts.signUp}
|
|
17
|
+
onClick={props.handleSignUp}
|
|
18
|
+
/>
|
|
19
|
+
<HawaButton
|
|
20
|
+
fullWidth
|
|
21
|
+
text={props.texts.lang}
|
|
22
|
+
onClick={props.handleLangauge}
|
|
23
|
+
/>
|
|
12
24
|
</HawaContainer>
|
|
13
25
|
);
|
|
14
26
|
};
|
|
@@ -16,6 +28,9 @@ AppLanding.propTypes = {
|
|
|
16
28
|
texts: PropTypes.shape({
|
|
17
29
|
signIn: PropTypes.string,
|
|
18
30
|
signUp: PropTypes.string,
|
|
19
|
-
|
|
20
|
-
})
|
|
31
|
+
lang: PropTypes.string
|
|
32
|
+
}),
|
|
33
|
+
handleSignIn: PropTypes.func,
|
|
34
|
+
handleSignUp: PropTypes.func,
|
|
35
|
+
handleLangauge: PropTypes.func
|
|
21
36
|
};
|
|
@@ -143,44 +143,69 @@ export const SignUpForm = (props) => {
|
|
|
143
143
|
{...field}
|
|
144
144
|
/>
|
|
145
145
|
)}
|
|
146
|
-
rules={{ required: props.texts.passwordRequiredText }}
|
|
147
146
|
/>
|
|
148
147
|
)}
|
|
149
148
|
{props.showUserSource && (
|
|
150
|
-
<div
|
|
151
|
-
<
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
149
|
+
<div>
|
|
150
|
+
<Controller
|
|
151
|
+
control={control}
|
|
152
|
+
name="reference"
|
|
153
|
+
render={({ field }) => (
|
|
154
|
+
<HawaSelect
|
|
155
|
+
label="How did you learn about us?"
|
|
156
|
+
isCreatable={false}
|
|
157
|
+
isMulti={false ?? false}
|
|
158
|
+
isSearchable={false}
|
|
159
|
+
isClearable={false ?? false}
|
|
160
|
+
options={[
|
|
161
|
+
{ value: "friend", label: "From a friend" },
|
|
162
|
+
{ value: "ad", label: "Advertisement" },
|
|
163
|
+
{ value: "other", label: "Other" }
|
|
164
|
+
]}
|
|
165
|
+
onChange={(e, o) => console.log("chooo", e)}
|
|
166
|
+
onInputChange={(e, o) => console.log("changing", e)}
|
|
167
|
+
{...field}
|
|
168
|
+
/>
|
|
169
|
+
)}
|
|
164
170
|
/>
|
|
165
171
|
</div>
|
|
166
172
|
)}
|
|
167
173
|
{props.showTermsOption && (
|
|
168
174
|
<div className="py-2">
|
|
169
|
-
<
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
175
|
+
<Controller
|
|
176
|
+
control={control}
|
|
177
|
+
name="terms_accepted"
|
|
178
|
+
render={({ field }) => (
|
|
179
|
+
<HawaCheckbox
|
|
180
|
+
helperText={errors.terms_accepted?.message}
|
|
181
|
+
onChange={() => console.log("te")}
|
|
182
|
+
label={
|
|
183
|
+
<span>
|
|
184
|
+
{props.texts.iAcceptText}{" "}
|
|
185
|
+
<a className="cursor-pointer text-blue-800">
|
|
186
|
+
{props.texts.termsText}
|
|
187
|
+
</a>
|
|
188
|
+
</span>
|
|
189
|
+
}
|
|
190
|
+
{...field}
|
|
191
|
+
/>
|
|
192
|
+
)}
|
|
193
|
+
rules={{ required: props.texts.termsRequiredText }}
|
|
178
194
|
/>
|
|
179
195
|
</div>
|
|
180
196
|
)}
|
|
181
197
|
{props.showNewsletterOption && (
|
|
182
198
|
<div className="py-2">
|
|
183
|
-
<
|
|
199
|
+
<Controller
|
|
200
|
+
control={control}
|
|
201
|
+
name="newsletter_accepted"
|
|
202
|
+
render={({ field }) => (
|
|
203
|
+
<HawaCheckbox
|
|
204
|
+
label={props.texts.subscribeToNewsletter}
|
|
205
|
+
{...field}
|
|
206
|
+
/>
|
|
207
|
+
)}
|
|
208
|
+
/>
|
|
184
209
|
</div>
|
|
185
210
|
)}
|
|
186
211
|
<HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
|
|
@@ -247,6 +272,9 @@ SignUpForm.propTypes = {
|
|
|
247
272
|
confirmPasswordLabel: PropTypes.string,
|
|
248
273
|
confirmPasswordPlaceholder: PropTypes.string,
|
|
249
274
|
forgotPasswordText: PropTypes.string,
|
|
275
|
+
termsText: PropTypes.string,
|
|
276
|
+
iAcceptText: PropTypes.string,
|
|
277
|
+
termsRequiredText: PropTypes.string,
|
|
250
278
|
newUserText: PropTypes.string,
|
|
251
279
|
signUpText: PropTypes.string,
|
|
252
280
|
signInText: PropTypes.string,
|
|
@@ -9,7 +9,6 @@ export const HawaButton = ({
|
|
|
9
9
|
text,
|
|
10
10
|
isLoading = false,
|
|
11
11
|
loadingText,
|
|
12
|
-
onClick,
|
|
13
12
|
...props
|
|
14
13
|
}) => {
|
|
15
14
|
const [loading, setLoading] = useState(isLoading);
|
|
@@ -27,9 +26,7 @@ export const HawaButton = ({
|
|
|
27
26
|
return (
|
|
28
27
|
<button
|
|
29
28
|
data-tooltip-target={tooltip}
|
|
30
|
-
type="button"
|
|
31
29
|
className={styles}
|
|
32
|
-
onClick={() => console.log("clicking")}
|
|
33
30
|
disabled={isLoading}
|
|
34
31
|
{...props}
|
|
35
32
|
>
|
|
@@ -57,6 +54,5 @@ HawaButton.PropTypes = {
|
|
|
57
54
|
iconOnly: PropTypes.bool,
|
|
58
55
|
text: PropTypes.string,
|
|
59
56
|
isLoading: PropTypes.bool,
|
|
60
|
-
loadingText: PropTypes.string
|
|
61
|
-
onClick : PropTypes.func
|
|
57
|
+
loadingText: PropTypes.string
|
|
62
58
|
};
|
|
@@ -2,16 +2,26 @@ import React from "react";
|
|
|
2
2
|
|
|
3
3
|
export const HawaCheckbox = (props) => {
|
|
4
4
|
return (
|
|
5
|
-
<div className="flex items-
|
|
5
|
+
<div className="flex items-top h-full">
|
|
6
6
|
<input
|
|
7
7
|
type="checkbox"
|
|
8
8
|
value=""
|
|
9
|
-
className="w-4 h-
|
|
9
|
+
className="w-4 h-5 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
10
|
+
{...props}
|
|
10
11
|
/>
|
|
11
|
-
{props.label && (
|
|
12
|
-
<
|
|
13
|
-
{props.label
|
|
14
|
-
|
|
12
|
+
{(props.label || props.helperText) && (
|
|
13
|
+
<div className="flex flex-col items-stat">
|
|
14
|
+
{props.label && (
|
|
15
|
+
<label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
|
|
16
|
+
{props.label}
|
|
17
|
+
</label>
|
|
18
|
+
)}
|
|
19
|
+
{props.helperText && (
|
|
20
|
+
<p className="mx-2 mt-1 text-xs text-red-600 dark:text-red-500">
|
|
21
|
+
{props.helperText}
|
|
22
|
+
</p>
|
|
23
|
+
)}
|
|
24
|
+
</div>
|
|
15
25
|
)}
|
|
16
26
|
</div>
|
|
17
27
|
|
|
@@ -70,14 +70,14 @@ export const HawaPhoneInput = ({ preferredCountry }) => {
|
|
|
70
70
|
control: (base) => ({
|
|
71
71
|
...base,
|
|
72
72
|
width: 64,
|
|
73
|
-
borderRadius: "0.
|
|
73
|
+
borderRadius: "0.5rem",
|
|
74
74
|
borderTopRightRadius: 0,
|
|
75
75
|
borderBottomRightRadius: 0
|
|
76
76
|
}),
|
|
77
77
|
menu: (base) => ({
|
|
78
78
|
...base,
|
|
79
79
|
width: 190,
|
|
80
|
-
borderRadius: "0.
|
|
80
|
+
borderRadius: "0.5rem"
|
|
81
81
|
})
|
|
82
82
|
}}
|
|
83
83
|
components={{
|
|
@@ -29,17 +29,7 @@ const Control = ({
|
|
|
29
29
|
return (
|
|
30
30
|
<div
|
|
31
31
|
ref={innerRef}
|
|
32
|
-
className="
|
|
33
|
-
flex
|
|
34
|
-
bg-gray-50 border
|
|
35
|
-
border-gray-300
|
|
36
|
-
text-gray-900
|
|
37
|
-
text-sm rounded-lg
|
|
38
|
-
h-11
|
|
39
|
-
focus:ring-blue-500
|
|
40
|
-
focus:border-blue-500
|
|
41
|
-
w-full
|
|
42
|
-
dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
32
|
+
className="h-10 flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
43
33
|
{...innerProps}
|
|
44
34
|
// {...props}
|
|
45
35
|
>
|
|
@@ -50,7 +40,7 @@ const Control = ({
|
|
|
50
40
|
const Menu = ({ cx, children, getStyles, innerProps, innerRef, ...props }) => {
|
|
51
41
|
return (
|
|
52
42
|
<div
|
|
53
|
-
className="bg-white rounded-lg absolute w-full"
|
|
43
|
+
className="bg-white rounded-lg absolute w-full mt-2"
|
|
54
44
|
ref={innerRef}
|
|
55
45
|
{...innerProps}
|
|
56
46
|
// {...props}
|
|
@@ -62,7 +52,7 @@ const Menu = ({ cx, children, getStyles, innerProps, innerRef, ...props }) => {
|
|
|
62
52
|
|
|
63
53
|
export const HawaSelect = (props) => {
|
|
64
54
|
return (
|
|
65
|
-
|
|
55
|
+
<div className="mb-3">
|
|
66
56
|
{props.label && (
|
|
67
57
|
<label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
|
|
68
58
|
{props.label}
|
|
@@ -70,50 +60,13 @@ export const HawaSelect = (props) => {
|
|
|
70
60
|
)}
|
|
71
61
|
{!props.isCreatable && (
|
|
72
62
|
<Select
|
|
73
|
-
styles={
|
|
74
|
-
{
|
|
75
|
-
// input: (base) => ({
|
|
76
|
-
// ...base,
|
|
77
|
-
// "input:focus": {
|
|
78
|
-
// boxShadow: "none"
|
|
79
|
-
// }
|
|
80
|
-
// }),
|
|
81
|
-
// control: (base) => ({
|
|
82
|
-
// ...base,
|
|
83
|
-
// borderRadius: "0.75rem"
|
|
84
|
-
// }),
|
|
85
|
-
// menu: (base) => ({
|
|
86
|
-
// ...base,
|
|
87
|
-
// borderRadius: "0.75rem",
|
|
88
|
-
// padding: 0,
|
|
89
|
-
// display: "flex",
|
|
90
|
-
// justifyContent: "center"
|
|
91
|
-
// }),
|
|
92
|
-
// menuList: (base) => ({
|
|
93
|
-
// ...base,
|
|
94
|
-
// display: "flex",
|
|
95
|
-
// flexDirection: "column",
|
|
96
|
-
// justifyContent: "center",
|
|
97
|
-
// alignItems: "center",
|
|
98
|
-
// width: "100%"
|
|
99
|
-
// }),
|
|
100
|
-
// option: (base) => ({
|
|
101
|
-
// ...base,
|
|
102
|
-
// borderRadius: "0.75rem",
|
|
103
|
-
// margin: 3,
|
|
104
|
-
// width: "98%"
|
|
105
|
-
// }),
|
|
106
|
-
// multiValue: (base) => ({
|
|
107
|
-
// ...base,
|
|
108
|
-
// borderRadius: "0.4rem"
|
|
109
|
-
// })
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
63
|
options={props.options}
|
|
113
64
|
isClearable={props.isClearable}
|
|
114
65
|
isMulti={props.isMulti}
|
|
115
66
|
isSearchable={props.isSearchable}
|
|
116
|
-
onChange={(newValue, action) =>
|
|
67
|
+
onChange={(newValue, action) =>
|
|
68
|
+
props.onChange(newValue.label, action)
|
|
69
|
+
}
|
|
117
70
|
components={{
|
|
118
71
|
Control,
|
|
119
72
|
Option,
|
|
@@ -172,6 +125,11 @@ export const HawaSelect = (props) => {
|
|
|
172
125
|
}}
|
|
173
126
|
/>
|
|
174
127
|
)}
|
|
175
|
-
|
|
128
|
+
{props.helperText && (
|
|
129
|
+
<p className="mt-2 text-sm text-red-600 dark:text-red-500">
|
|
130
|
+
{props.helperText}
|
|
131
|
+
</p>
|
|
132
|
+
)}
|
|
133
|
+
</div>
|
|
176
134
|
);
|
|
177
135
|
};
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
|
|
3
3
|
export const HawaTextField = (props) => {
|
|
4
4
|
return (
|
|
5
|
-
<div>
|
|
5
|
+
<div className="mb-3">
|
|
6
6
|
<label
|
|
7
7
|
htmlFor="first_name"
|
|
8
8
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
@@ -24,7 +24,7 @@ export const HawaTextField = (props) => {
|
|
|
24
24
|
)}
|
|
25
25
|
|
|
26
26
|
{props.helperText && (
|
|
27
|
-
<p className="
|
|
27
|
+
<p className="mx-2 mt-1 text-xs text-red-600 dark:text-red-500">
|
|
28
28
|
{/* <span className="font-medium">Oh, snapp!</span> */}
|
|
29
29
|
{props.helperText}
|
|
30
30
|
</p>
|
package/src/styles.css
CHANGED
|
@@ -626,6 +626,10 @@ video {
|
|
|
626
626
|
margin-top: 0.25rem;
|
|
627
627
|
margin-bottom: 0.25rem;
|
|
628
628
|
}
|
|
629
|
+
.mx-2 {
|
|
630
|
+
margin-left: 0.5rem;
|
|
631
|
+
margin-right: 0.5rem;
|
|
632
|
+
}
|
|
629
633
|
.my-2 {
|
|
630
634
|
margin-top: 0.5rem;
|
|
631
635
|
margin-bottom: 0.5rem;
|
|
@@ -654,10 +658,6 @@ video {
|
|
|
654
658
|
margin-top: -0.25rem;
|
|
655
659
|
margin-bottom: -0.25rem;
|
|
656
660
|
}
|
|
657
|
-
.mx-2 {
|
|
658
|
-
margin-left: 0.5rem;
|
|
659
|
-
margin-right: 0.5rem;
|
|
660
|
-
}
|
|
661
661
|
.ml-auto {
|
|
662
662
|
margin-left: auto;
|
|
663
663
|
}
|
|
@@ -670,6 +670,9 @@ video {
|
|
|
670
670
|
.ml-2 {
|
|
671
671
|
margin-left: 0.5rem;
|
|
672
672
|
}
|
|
673
|
+
.mt-1 {
|
|
674
|
+
margin-top: 0.25rem;
|
|
675
|
+
}
|
|
673
676
|
.mr-2 {
|
|
674
677
|
margin-right: 0.5rem;
|
|
675
678
|
}
|
|
@@ -727,9 +730,6 @@ video {
|
|
|
727
730
|
.h-full {
|
|
728
731
|
height: 100%;
|
|
729
732
|
}
|
|
730
|
-
.h-4 {
|
|
731
|
-
height: 1rem;
|
|
732
|
-
}
|
|
733
733
|
.h-7 {
|
|
734
734
|
height: 1.75rem;
|
|
735
735
|
}
|
|
@@ -739,9 +739,15 @@ video {
|
|
|
739
739
|
.h-8 {
|
|
740
740
|
height: 2rem;
|
|
741
741
|
}
|
|
742
|
+
.h-4 {
|
|
743
|
+
height: 1rem;
|
|
744
|
+
}
|
|
742
745
|
.h-2 {
|
|
743
746
|
height: 0.5rem;
|
|
744
747
|
}
|
|
748
|
+
.h-10 {
|
|
749
|
+
height: 2.5rem;
|
|
750
|
+
}
|
|
745
751
|
.h-14 {
|
|
746
752
|
height: 3.5rem;
|
|
747
753
|
}
|
|
@@ -751,9 +757,6 @@ video {
|
|
|
751
757
|
.h-9 {
|
|
752
758
|
height: 2.25rem;
|
|
753
759
|
}
|
|
754
|
-
.h-10 {
|
|
755
|
-
height: 2.5rem;
|
|
756
|
-
}
|
|
757
760
|
.h-12 {
|
|
758
761
|
height: 3rem;
|
|
759
762
|
}
|
|
@@ -1316,6 +1319,10 @@ video {
|
|
|
1316
1319
|
--tw-text-opacity: 1;
|
|
1317
1320
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
1318
1321
|
}
|
|
1322
|
+
.text-red-600 {
|
|
1323
|
+
--tw-text-opacity: 1;
|
|
1324
|
+
color: rgb(220 38 38 / var(--tw-text-opacity));
|
|
1325
|
+
}
|
|
1319
1326
|
.text-blue-800 {
|
|
1320
1327
|
--tw-text-opacity: 1;
|
|
1321
1328
|
color: rgb(30 64 175 / var(--tw-text-opacity));
|
|
@@ -1324,10 +1331,6 @@ video {
|
|
|
1324
1331
|
--tw-text-opacity: 1;
|
|
1325
1332
|
color: rgb(55 65 81 / var(--tw-text-opacity));
|
|
1326
1333
|
}
|
|
1327
|
-
.text-red-600 {
|
|
1328
|
-
--tw-text-opacity: 1;
|
|
1329
|
-
color: rgb(220 38 38 / var(--tw-text-opacity));
|
|
1330
|
-
}
|
|
1331
1334
|
.text-green-500 {
|
|
1332
1335
|
--tw-text-opacity: 1;
|
|
1333
1336
|
color: rgb(34 197 94 / var(--tw-text-opacity));
|
|
@@ -1380,9 +1383,10 @@ video {
|
|
|
1380
1383
|
.duration-300 {
|
|
1381
1384
|
transition-duration: 300ms;
|
|
1382
1385
|
}
|
|
1386
|
+
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
|
|
1383
1387
|
|
|
1384
1388
|
body {
|
|
1385
|
-
font-family: "IBM Plex Sans Arabic";
|
|
1389
|
+
font-family: "IBM Plex Sans Arabic", sans-serif;
|
|
1386
1390
|
}
|
|
1387
1391
|
/* <div className="react-select-container">
|
|
1388
1392
|
<div className="react-select__control">
|
|
@@ -1652,6 +1656,10 @@ body {
|
|
|
1652
1656
|
--tw-text-opacity: 1;
|
|
1653
1657
|
color: rgb(209 213 219 / var(--tw-text-opacity));
|
|
1654
1658
|
}
|
|
1659
|
+
.dark .dark\:text-red-500 {
|
|
1660
|
+
--tw-text-opacity: 1;
|
|
1661
|
+
color: rgb(239 68 68 / var(--tw-text-opacity));
|
|
1662
|
+
}
|
|
1655
1663
|
.dark .dark\:text-gray-200 {
|
|
1656
1664
|
--tw-text-opacity: 1;
|
|
1657
1665
|
color: rgb(229 231 235 / var(--tw-text-opacity));
|
|
@@ -1660,10 +1668,6 @@ body {
|
|
|
1660
1668
|
--tw-text-opacity: 1;
|
|
1661
1669
|
color: rgb(107 114 128 / var(--tw-text-opacity));
|
|
1662
1670
|
}
|
|
1663
|
-
.dark .dark\:text-red-500 {
|
|
1664
|
-
--tw-text-opacity: 1;
|
|
1665
|
-
color: rgb(239 68 68 / var(--tw-text-opacity));
|
|
1666
|
-
}
|
|
1667
1671
|
.dark .dark\:text-blue-400 {
|
|
1668
1672
|
--tw-text-opacity: 1;
|
|
1669
1673
|
color: rgb(96 165 250 / var(--tw-text-opacity));
|
package/src/tailwind.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import "tailwindcss/base";
|
|
2
2
|
@import "tailwindcss/components";
|
|
3
3
|
@import "tailwindcss/utilities";
|
|
4
|
-
|
|
4
|
+
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
|
|
5
5
|
@layer base {
|
|
6
6
|
input[type="number"]::-webkit-inner-spin-button,
|
|
7
7
|
input[type="number"]::-webkit-outer-spin-button {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
body {
|
|
14
|
-
font-family: "IBM Plex Sans Arabic";
|
|
14
|
+
font-family: "IBM Plex Sans Arabic", sans-serif;
|
|
15
15
|
}
|
|
16
16
|
/* <div className="react-select-container">
|
|
17
17
|
<div className="react-select__control">
|