@sikka/hawa 0.0.87 → 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.
Files changed (13) hide show
  1. package/dist/styles.css +23 -19
  2. package/es/index.es.js +1 -1
  3. package/lib/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/blocks/AuthForms/AppLanding.js +2 -2
  6. package/src/blocks/AuthForms/SignUpForm.js +53 -25
  7. package/src/elements/HawaButton.js +0 -1
  8. package/src/elements/HawaCheckbox.js +16 -6
  9. package/src/elements/HawaPhoneInput.js +2 -2
  10. package/src/elements/HawaSelect.js +12 -54
  11. package/src/elements/HawaTextField.js +2 -2
  12. package/src/styles.css +23 -19
  13. package/src/tailwind.css +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.0.87",
3
+ "version": "0.0.88",
4
4
  "description": "UI Kit",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.es.js",
package/src/blocks/AuthForms/AppLanding.js CHANGED
@@ -18,7 +18,7 @@ export const AppLanding = (props) => {
18
18
  />
19
19
  <HawaButton
20
20
  fullWidth
21
- text={props.texts.langauge}
21
+ text={props.texts.lang}
22
22
  onClick={props.handleLangauge}
23
23
  />
24
24
  </HawaContainer>
@@ -28,7 +28,7 @@ AppLanding.propTypes = {
28
28
  texts: PropTypes.shape({
29
29
  signIn: PropTypes.string,
30
30
  signUp: PropTypes.string,
31
- language: PropTypes.string
31
+ lang: PropTypes.string
32
32
  }),
33
33
  handleSignIn: PropTypes.func,
34
34
  handleSignUp: PropTypes.func,
package/src/blocks/AuthForms/SignUpForm.js CHANGED
@@ -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 className="py-2">
151
- <HawaSelect
152
- label="How did you learn about us?"
153
- isCreatable={false}
154
- isMulti={false ?? false}
155
- isSearchable={false}
156
- isClearable={false ?? false}
157
- options={[
158
- { value: "friend", label: "From a friend" },
159
- { value: "ad", label: "Advertisement" },
160
- { value: "other", label: "Other" }
161
- ]}
162
- onChange={(e, o) => console.log("chooo", e)}
163
- onInputChange={(e, o) => console.log("changing", e)}
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
- <HawaCheckbox
170
- label={
171
- <span>
172
- I accept the{" "}
173
- <a className="cursor-pointer text-blue-800">
174
- terms and conditions
175
- </a>
176
- </span>
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
- <HawaCheckbox label="Subscribe to newsletter?" />
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,
package/src/elements/HawaButton.js CHANGED
@@ -26,7 +26,6 @@ export const HawaButton = ({
26
26
  return (
27
27
  <button
28
28
  data-tooltip-target={tooltip}
29
- type="button"
30
29
  className={styles}
31
30
  disabled={isLoading}
32
31
  {...props}
package/src/elements/HawaCheckbox.js CHANGED
@@ -2,16 +2,26 @@ import React from "react";
2
2
 
3
3
  export const HawaCheckbox = (props) => {
4
4
  return (
5
- <div className="flex items-center h-full">
5
+ <div className="flex items-top h-full">
6
6
  <input
7
7
  type="checkbox"
8
8
  value=""
9
- className="w-4 h-4 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"
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
- <label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
13
- {props.label}
14
- </label>
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
 
package/src/elements/HawaPhoneInput.js CHANGED
@@ -70,14 +70,14 @@ export const HawaPhoneInput = ({ preferredCountry }) => {
70
70
  control: (base) => ({
71
71
  ...base,
72
72
  width: 64,
73
- borderRadius: "0.75rem",
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.75rem"
80
+ borderRadius: "0.5rem"
81
81
  })
82
82
  }}
83
83
  components={{
package/src/elements/HawaSelect.js CHANGED
@@ -29,17 +29,7 @@ const Control = ({
29
29
  return (
30
30
  <div
31
31
  ref={innerRef}
32
- className="mb-2
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) => props.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
  };
package/src/elements/HawaTextField.js CHANGED
@@ -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="mt-2 text-sm text-red-600 dark:text-red-500">
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">