@visns-studio/visns-components 5.7.15 → 5.7.17

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
@@ -20,12 +20,12 @@
20
20
  "dayjs": "^1.11.13",
21
21
  "fabric": "^6.6.4",
22
22
  "file-saver": "^2.0.5",
23
- "framer-motion": "^12.9.4",
23
+ "framer-motion": "^12.9.7",
24
24
  "html-react-parser": "^5.2.3",
25
25
  "lodash": "^4.17.21",
26
26
  "lodash.debounce": "^4.0.8",
27
27
  "moment": "^2.30.1",
28
- "motion": "^12.9.4",
28
+ "motion": "^12.9.7",
29
29
  "numeral": "^2.0.6",
30
30
  "pluralize": "^8.0.0",
31
31
  "qrcode.react": "^4.2.0",
@@ -58,7 +58,7 @@
58
58
  "truncate": "^3.0.0",
59
59
  "uuid": "^11.1.0",
60
60
  "validator": "^13.15.0",
61
- "vite": "^6.3.4",
61
+ "vite": "^6.3.5",
62
62
  "yarn": "^1.22.22",
63
63
  "yet-another-react-lightbox": "^3.23.0"
64
64
  },
@@ -82,7 +82,7 @@
82
82
  "react-dom": "^17.0.0 || ^18.0.0"
83
83
  },
84
84
  "name": "@visns-studio/visns-components",
85
- "version": "5.7.15",
85
+ "version": "5.7.17",
86
86
  "description": "Various packages to assist in the development of our Custom Applications.",
87
87
  "main": "src/index.js",
88
88
  "files": [
@@ -1717,6 +1717,18 @@ function Field({
1717
1717
  </table>
1718
1718
  );
1719
1719
  case 'textarea':
1720
+ const getTextareaRows = (heightSize) => {
1721
+ switch (heightSize) {
1722
+ case 'small':
1723
+ return 5;
1724
+ case 'large':
1725
+ return 11;
1726
+ case 'normal':
1727
+ default:
1728
+ return 8;
1729
+ }
1730
+ };
1731
+
1720
1732
  return (
1721
1733
  <textarea
1722
1734
  data-name={settings.id}
@@ -1727,7 +1739,7 @@ function Field({
1727
1739
  ? inputValue
1728
1740
  : ''
1729
1741
  }
1730
- style={{ height: '200px' }}
1742
+ rows={getTextareaRows(settings.textareaHeight)}
1731
1743
  ></textarea>
1732
1744
  );
1733
1745
  case 'text':
@@ -267,6 +267,9 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
267
267
  fontWeight: '500',
268
268
  fontSize: '0.875rem',
269
269
  }}
270
+ className={
271
+ styles.forgotPasswordLink
272
+ }
270
273
  >
271
274
  Forgot password?
272
275
  </Link>
@@ -1,167 +1,167 @@
1
1
  // Client Auth styles
2
2
  .container {
3
- min-height: 100vh;
4
- display: flex;
5
- align-items: center;
6
- justify-content: center;
7
- background-color: #f5f5f5;
3
+ min-height: 100vh;
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ background-color: #f5f5f5;
8
8
  }
9
9
 
10
10
  .loginBox {
11
- width: 100%;
12
- max-width: 500px;
13
- padding: 2.5rem;
14
- margin: 0 auto;
15
- background-color: white;
16
- border-radius: 8px;
17
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
11
+ width: 100%;
12
+ max-width: 500px;
13
+ padding: 2.5rem;
14
+ margin: 0 auto;
15
+ background-color: white;
16
+ border-radius: 8px;
17
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
18
18
  }
19
19
 
20
20
  .logo {
21
- display: block;
22
- width: 100%;
23
- max-width: 240px;
24
- height: auto;
25
- margin: 0 auto 2rem;
21
+ display: block;
22
+ width: 100%;
23
+ max-width: 240px;
24
+ height: auto;
25
+ margin: 0 auto 2rem;
26
26
  }
27
27
 
28
28
  .title {
29
- font-size: 1.75rem;
30
- font-weight: 600;
31
- color: #333;
32
- margin-bottom: 0.5rem;
33
- text-align: center;
29
+ font-size: 1.75rem;
30
+ font-weight: 600;
31
+ color: #333;
32
+ margin-bottom: 0.5rem;
33
+ text-align: center;
34
34
  }
35
35
 
36
36
  .subtitle {
37
- font-size: 1rem;
38
- color: #666;
39
- margin-bottom: 2rem;
40
- text-align: center;
41
- line-height: 1.5;
37
+ font-size: 1rem;
38
+ color: #666;
39
+ margin-bottom: 2rem;
40
+ text-align: center;
41
+ line-height: 1.5;
42
42
  }
43
43
 
44
44
  .formGroup {
45
- margin-bottom: 1.5rem;
46
- position: relative;
45
+ margin-bottom: 1.5rem;
46
+ position: relative;
47
47
  }
48
48
 
49
49
  .inputLabel {
50
- display: block;
51
- font-size: 0.9rem;
52
- font-weight: 500;
53
- color: #555;
54
- margin-bottom: 0.5rem;
50
+ display: block;
51
+ font-size: 0.9rem;
52
+ font-weight: 500;
53
+ color: #555;
54
+ margin-bottom: 0.5rem;
55
55
  }
56
56
 
57
57
  .input {
58
- width: 100%;
59
- padding: 0.75rem 1rem;
60
- font-size: 1rem;
61
- border: 1px solid #ddd;
62
- border-radius: 4px;
63
- background-color: white;
64
- transition: border-color 0.2s ease;
65
-
66
- &:focus {
67
- outline: none;
68
- border-color: var(--primary-color, #4a6741);
69
- box-shadow: 0 0 0 2px rgba(74, 103, 65, 0.1);
70
- }
71
-
72
- &.error {
73
- border-color: #e53935;
74
- }
58
+ width: 100%;
59
+ padding: 0.75rem 1rem;
60
+ font-size: 1rem;
61
+ border: 1px solid #ddd;
62
+ border-radius: 4px;
63
+ background-color: white;
64
+ transition: border-color 0.2s ease;
65
+
66
+ &:focus {
67
+ outline: none;
68
+ border-color: var(--primary-color, #4a6741);
69
+ box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
70
+ }
71
+
72
+ &.error {
73
+ border-color: #e53935;
74
+ }
75
75
  }
76
76
 
77
77
  .inputIcon {
78
- position: absolute;
79
- right: 1rem;
80
- top: 2.4rem;
81
- color: #999;
78
+ position: absolute;
79
+ right: 1rem;
80
+ top: 2.4rem;
81
+ color: #999;
82
82
  }
83
83
 
84
84
  .button {
85
- width: 100%;
86
- padding: 0.9rem 1.5rem;
87
- font-size: 1rem;
88
- font-weight: 500;
89
- color: white;
90
- background-color: var(--primary-color, #0f4229);
91
- border: none;
92
- border-radius: 4px;
93
- cursor: pointer;
94
- transition: background-color 0.2s ease;
95
-
96
- &:hover {
97
- background-color: var(--secondary-color, #0a2e1c);
98
- }
99
-
100
- &:disabled {
101
- background-color: #ccc;
102
- cursor: not-allowed;
103
- }
85
+ width: 100%;
86
+ padding: 0.9rem 1.5rem;
87
+ font-size: 1rem;
88
+ font-weight: 500;
89
+ color: white;
90
+ background-color: var(--primary-color, #0f4229);
91
+ border: none;
92
+ border-radius: 4px;
93
+ cursor: pointer;
94
+ transition: background-color 0.2s ease;
95
+
96
+ &:hover {
97
+ background-color: var(--secondary-color, #3cbf7d);
98
+ }
99
+
100
+ &:disabled {
101
+ background-color: #ccc;
102
+ cursor: not-allowed;
103
+ }
104
104
  }
105
105
 
106
106
  .linkText {
107
- display: block;
108
- text-align: center;
109
- margin-top: 1.5rem;
110
- font-size: 0.9rem;
111
- color: #666;
112
-
113
- a {
114
- color: var(--primary-color, #0f4229);
115
- text-decoration: none;
116
- font-weight: 500;
117
-
118
- &:hover {
119
- text-decoration: underline;
107
+ display: block;
108
+ text-align: center;
109
+ margin-top: 1.5rem;
110
+ font-size: 0.9rem;
111
+ color: #666;
112
+
113
+ a {
114
+ color: var(--primary-color, #0f4229);
115
+ text-decoration: none;
116
+ font-weight: 500;
117
+
118
+ &:hover {
119
+ text-decoration: underline;
120
+ }
120
121
  }
121
- }
122
122
  }
123
123
 
124
124
  // OTP verification specific styles
125
125
  .otpInput {
126
- letter-spacing: 0.25rem;
127
- font-size: 1.2rem;
128
- text-align: center;
126
+ letter-spacing: 0.25rem;
127
+ font-size: 1.2rem;
128
+ text-align: center;
129
129
  }
130
130
 
131
131
  .resendLink {
132
- color: var(--primary-color, #0f4229);
133
- text-decoration: none;
134
- font-weight: 500;
135
- cursor: pointer;
136
-
137
- &:hover {
138
- text-decoration: underline;
139
- }
140
-
141
- &.disabled {
142
- color: #999;
143
- cursor: default;
132
+ color: var(--primary-color, #0f4229);
144
133
  text-decoration: none;
145
- }
134
+ font-weight: 500;
135
+ cursor: pointer;
136
+
137
+ &:hover {
138
+ text-decoration: underline;
139
+ }
140
+
141
+ &.disabled {
142
+ color: #999;
143
+ cursor: default;
144
+ text-decoration: none;
145
+ }
146
146
  }
147
147
 
148
148
  .emailHighlight {
149
- font-weight: 600;
149
+ font-weight: 600;
150
150
  }
151
151
 
152
152
  .backLink {
153
- display: inline-flex;
154
- align-items: center;
155
- margin-top: 1rem;
156
- color: #666;
157
- text-decoration: none;
158
- font-size: 0.9rem;
159
-
160
- svg {
161
- margin-right: 0.5rem;
162
- }
163
-
164
- &:hover {
165
- color: var(--primary-color, #0f4229);
166
- }
153
+ display: inline-flex;
154
+ align-items: center;
155
+ margin-top: 1rem;
156
+ color: #666;
157
+ text-decoration: none;
158
+ font-size: 0.9rem;
159
+
160
+ svg {
161
+ margin-right: 0.5rem;
162
+ }
163
+
164
+ &:hover {
165
+ color: var(--secondary-color, #3cbf7d);
166
+ }
167
167
  }
@@ -166,6 +166,15 @@
166
166
  accent-color: var(--primary-color, #4f46e5);
167
167
  border-radius: 0.25rem;
168
168
  margin-right: 0.5rem;
169
+
170
+ &:hover {
171
+ accent-color: var(--secondary-color, #3cbf7d);
172
+ }
173
+
174
+ &:focus {
175
+ outline: 2px solid rgba(var(--primary-rgb), 0.25);
176
+ outline-offset: 2px;
177
+ }
169
178
  }
170
179
 
171
180
  .lcontainer {
@@ -208,12 +217,12 @@
208
217
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
209
218
 
210
219
  &:hover {
211
- background: #4338ca;
212
- border-color: #4338ca;
220
+ background: var(--secondary-color, #3cbf7d);
221
+ border-color: var(--secondary-color, #3cbf7d);
213
222
  }
214
223
 
215
224
  &:focus {
216
- box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
225
+ box-shadow: 0 0 0 2px rgba(var(--secondary-rgb, 60, 191, 125), 0.25);
217
226
  }
218
227
  }
219
228
 
@@ -229,6 +238,20 @@ select:not(:placeholder-shown) + .fi__span {
229
238
  color: var(--primary-color, #4f46e5) !important;
230
239
  }
231
240
 
241
+ input:focus + .fi__span,
242
+ textarea:focus + .fi__span,
243
+ select:focus + .fi__span {
244
+ color: var(--primary-color, #4f46e5) !important;
245
+ }
246
+
247
+ input:focus,
248
+ textarea:focus,
249
+ select:focus {
250
+ border-color: var(--primary-color, #4f46e5) !important;
251
+ outline: none;
252
+ box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
253
+ }
254
+
232
255
  /* Add divider styling for the OR section */
233
256
  .divider {
234
257
  display: flex;
@@ -271,11 +294,23 @@ select:not(:placeholder-shown) + .fi__span {
271
294
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
272
295
 
273
296
  &:hover {
274
- background-color: #f9fafb;
275
- border-color: #d1d5db;
297
+ background-color: var(--bg-color, #f5f3ef);
298
+ border-color: var(--border-color, #e1e1e1);
276
299
  }
277
300
 
278
301
  img {
279
302
  margin-right: 0.5rem;
280
303
  }
281
304
  }
305
+
306
+ .forgotPasswordLink {
307
+ &:hover {
308
+ color: var(--secondary-color, #3cbf7d) !important;
309
+ text-decoration: underline !important;
310
+ }
311
+
312
+ &:focus {
313
+ outline: 2px solid rgba(var(--primary-rgb), 0.25) !important;
314
+ outline-offset: 2px !important;
315
+ }
316
+ }
@@ -415,7 +415,7 @@ select:focus + .fi__span {
415
415
  padding: 0.5rem 0.85rem;
416
416
 
417
417
  &:hover:not(:disabled) {
418
- filter: brightness(90%);
418
+ background-color: rgba(var(--primary-rgb), 0.9);
419
419
  }
420
420
  }
421
421
 
@@ -427,7 +427,8 @@ select:focus + .fi__span {
427
427
  padding: 0.5rem 0.85rem;
428
428
 
429
429
  &:hover:not(:disabled) {
430
- background-color: #e5e5e5;
430
+ background-color: var(--bg-color, #f5f3ef);
431
+ border-color: var(--border-color, #e1e1e1);
431
432
  }
432
433
  }
433
434
 
@@ -438,7 +439,7 @@ select:focus + .fi__span {
438
439
  padding: 0.5rem 0.85rem;
439
440
 
440
441
  &:hover:not(:disabled) {
441
- background-color: #c0392b;
442
+ background-color: rgba(231, 76, 60, 0.85);
442
443
  }
443
444
  }
444
445
 
@@ -177,12 +177,12 @@
177
177
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
178
178
 
179
179
  &:hover {
180
- background: #4338ca;
181
- border-color: #4338ca;
180
+ background: var(--secondary-color, #3cbf7d);
181
+ border-color: var(--secondary-color, #3cbf7d);
182
182
  }
183
183
 
184
184
  &:focus {
185
- box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
185
+ box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
186
186
  }
187
187
  }
188
188
 
@@ -150,12 +150,12 @@
150
150
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
151
151
 
152
152
  &:hover {
153
- background: #4338ca;
154
- border-color: #4338ca;
153
+ background: var(--secondary-color, #3cbf7d);
154
+ border-color: var(--secondary-color, #3cbf7d);
155
155
  }
156
156
 
157
157
  &:focus {
158
- box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
158
+ box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
159
159
  }
160
160
  }
161
161
 
@@ -177,12 +177,12 @@
177
177
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
178
178
 
179
179
  &:hover {
180
- background: #4338ca;
181
- border-color: #4338ca;
180
+ background: var(--secondary-color, #3cbf7d);
181
+ border-color: var(--secondary-color, #3cbf7d);
182
182
  }
183
183
 
184
184
  &:focus {
185
- box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
185
+ box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
186
186
  }
187
187
  }
188
188
 
@@ -40,6 +40,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
40
40
  rows: [],
41
41
  size: 'half',
42
42
  required: 'no',
43
+ textareaHeight: 'normal',
43
44
  });
44
45
  const [dataOption, setDataOption] = useState({
45
46
  id: '',
@@ -220,6 +221,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
220
221
  rows: [],
221
222
  size: 'half',
222
223
  required: 'no',
224
+ textareaHeight: 'normal',
223
225
  }));
224
226
  setModalType(() => ({
225
227
  type: 'create',
@@ -674,9 +676,23 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
674
676
  </label>
675
677
  );
676
678
  case 'textarea':
679
+ const getTextareaRows = (heightSize) => {
680
+ switch (heightSize) {
681
+ case 'small':
682
+ return 3;
683
+ case 'large':
684
+ return 8;
685
+ case 'normal':
686
+ default:
687
+ return 5;
688
+ }
689
+ };
690
+
677
691
  return (
678
692
  <label className={styles.fi__label}>
679
- <textarea rows="5"></textarea>
693
+ <textarea
694
+ rows={getTextareaRows(field.textareaHeight)}
695
+ ></textarea>
680
696
  <span className={styles.fi__span}>
681
697
  {field.label}{' '}
682
698
  {field.required === 'yes' ? '*' : null}
@@ -1142,6 +1158,35 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1142
1158
  </label>
1143
1159
  </div>
1144
1160
 
1161
+ {dataField.type === 'textarea' && (
1162
+ <div className={styles.formItem}>
1163
+ <label className={styles.fi__label}>
1164
+ <select
1165
+ name="textareaHeight"
1166
+ value={
1167
+ dataField.textareaHeight
1168
+ }
1169
+ onChange={handleChangeForm}
1170
+ >
1171
+ <option value="small">
1172
+ Small
1173
+ </option>
1174
+ <option value="normal">
1175
+ Normal
1176
+ </option>
1177
+ <option value="large">
1178
+ Large
1179
+ </option>
1180
+ </select>
1181
+ <span
1182
+ className={styles.fi__span}
1183
+ >
1184
+ Height Size
1185
+ </span>
1186
+ </label>
1187
+ </div>
1188
+ )}
1189
+
1145
1190
  {dataField.type === 'image' && (
1146
1191
  <div className={styles.formItem}>
1147
1192
  <label className={styles.fi__label}>