@sikka/hawa 0.0.155 → 0.0.157

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.0.155",
3
+ "version": "0.0.157",
4
4
  "description": "UI Kit",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.es.js",
@@ -42,7 +42,6 @@ type SignUpFormTypes = {
42
42
  twitterButtonLabel: string
43
43
  }
44
44
  showUserSource: any
45
- signUpType: any
46
45
  viaGoogle: boolean
47
46
  viaGithub: boolean
48
47
  viaTwitter: boolean
@@ -58,6 +57,8 @@ type SignUpFormTypes = {
58
57
  showError: any
59
58
  errorTitle: any
60
59
  errorText: any
60
+ signUpFields: any[]
61
+ isLoading?: boolean
61
62
  }
62
63
 
63
64
  export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
@@ -80,68 +81,81 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
80
81
  )}
81
82
  <FormProvider {...methods}>
82
83
  <form onSubmit={handleSubmit((e) => props.handleSignUp(e))}>
83
- <Controller
84
- control={control}
85
- name="fullName"
86
- render={({ field }) => (
87
- <HawaTextField
88
- width="full"
89
- type="text"
90
- label={props.texts.fullNameLabel}
91
- placeholder={props.texts.fullNamePlaceholder}
92
- helperText={errors.fullName?.message}
93
- onChange={field.onChange}
94
- value={field.value ?? ""}
95
- />
96
- )}
97
- rules={{
98
- required: props.texts.fullNameRequiredText,
99
- }}
100
- />
101
- {props.signUpType === "email" ? (
102
- <Controller
103
- control={control}
104
- name="email"
105
- render={({ field }) => (
106
- <HawaTextField
107
- width="full"
108
- type="text"
109
- label={props.texts.emailLabel}
110
- helperText={errors.email?.message}
111
- placeholder={props.texts.emailPlaceholder}
112
- onChange={field.onChange}
113
- value={field.value ?? ""}
114
- />
115
- )}
116
- rules={{
117
- required: props.texts.emailRequiredText,
118
- pattern: {
119
- value:
120
- /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
121
- message: props.texts.emailInvalidText,
122
- },
123
- }}
124
- />
125
- ) : (
126
- <Controller
127
- control={control}
128
- name="username"
129
- render={({ field }) => (
130
- <HawaTextField
131
- width="full"
132
- type="text"
133
- label={props.texts.usernameLabel}
134
- helperText={errors.username?.message}
135
- placeholder={props.texts.usernamePlaceholder}
136
- onChange={field.onChange}
137
- value={field.value ?? ""}
138
- />
139
- )}
140
- rules={{
141
- required: props.texts.usernameRequired,
142
- }}
143
- />
144
- )}
84
+ <div>
85
+ {props.signUpFields.map((fld) => {
86
+ if (fld === "fullname") {
87
+ return (
88
+ <Controller
89
+ control={control}
90
+ name="fullName"
91
+ render={({ field }) => (
92
+ <HawaTextField
93
+ width="full"
94
+ type="text"
95
+ label={props.texts.fullNameLabel}
96
+ placeholder={props.texts.fullNamePlaceholder}
97
+ helperText={errors.fullName?.message}
98
+ onChange={field.onChange}
99
+ value={field.value ?? ""}
100
+ />
101
+ )}
102
+ rules={{
103
+ required: props.texts.fullNameRequiredText,
104
+ }}
105
+ />
106
+ )
107
+ }
108
+ if (fld === "email") {
109
+ return (
110
+ <Controller
111
+ control={control}
112
+ name="email"
113
+ render={({ field }) => (
114
+ <HawaTextField
115
+ width="full"
116
+ type="text"
117
+ label={props.texts.emailLabel}
118
+ helperText={errors.email?.message}
119
+ placeholder={props.texts.emailPlaceholder}
120
+ onChange={field.onChange}
121
+ value={field.value ?? ""}
122
+ />
123
+ )}
124
+ rules={{
125
+ required: props.texts.emailRequiredText,
126
+ pattern: {
127
+ value:
128
+ /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
129
+ message: props.texts.emailInvalidText,
130
+ },
131
+ }}
132
+ />
133
+ )
134
+ }
135
+ if (fld === "username") {
136
+ return (
137
+ <Controller
138
+ control={control}
139
+ name="username"
140
+ render={({ field }) => (
141
+ <HawaTextField
142
+ width="full"
143
+ type="text"
144
+ label={props.texts.usernameLabel}
145
+ helperText={errors.username?.message}
146
+ placeholder={props.texts.usernamePlaceholder}
147
+ onChange={field.onChange}
148
+ value={field.value ?? ""}
149
+ />
150
+ )}
151
+ rules={{
152
+ required: props.texts.usernameRequired,
153
+ }}
154
+ />
155
+ )
156
+ }
157
+ })}
158
+ </div>
145
159
  <Controller
146
160
  control={control}
147
161
  name="password"
@@ -261,7 +275,12 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
261
275
  />
262
276
  </div>
263
277
  )}
264
- <HawaButton color="primary" width="full" type="submit">
278
+ <HawaButton
279
+ isLoading={props.isLoading}
280
+ color="primary"
281
+ width="full"
282
+ type="submit"
283
+ >
265
284
  {props.texts.signUpText}
266
285
  </HawaButton>
267
286
  </form>
package/src/styles.css CHANGED
@@ -1276,8 +1276,7 @@ video {
1276
1276
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
1277
1277
  }
1278
1278
  .bg-layoutPrimary-default {
1279
- --tw-bg-opacity: 1;
1280
- background-color: rgb(210 205 250 / var(--tw-bg-opacity));
1279
+ background-color: var(--layout-primary);
1281
1280
  }
1282
1281
  .bg-white {
1283
1282
  --tw-bg-opacity: 1;
@@ -1307,8 +1306,7 @@ video {
1307
1306
  background-color: transparent;
1308
1307
  }
1309
1308
  .bg-buttonPrimary-default {
1310
- --tw-bg-opacity: 1;
1311
- background-color: rgb(76 55 235 / var(--tw-bg-opacity));
1309
+ background-color: var(--button-primary);
1312
1310
  }
1313
1311
  .bg-red-200 {
1314
1312
  --tw-bg-opacity: 1;
@@ -1932,8 +1930,7 @@ body {
1932
1930
  }
1933
1931
 
1934
1932
  .hover\:ring-buttonPrimary-default:hover {
1935
- --tw-ring-opacity: 1;
1936
- --tw-ring-color: rgb(76 55 235 / var(--tw-ring-opacity));
1933
+ --tw-ring-color: var(--button-primary);
1937
1934
  }
1938
1935
 
1939
1936
  .hover\:brightness-90:hover {