@geoinsight/react-components 0.6.7 → 0.6.9

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 (5) hide show
  1. package/dist/cjs/index.css +103 -102
  2. package/dist/cjs/index.js +76 -26
  3. package/dist/esm/index.css +103 -102
  4. package/dist/esm/index.js +75 -28
  5. package/package.json +1 -1
package/dist/cjs/index.css CHANGED
@@ -387,57 +387,89 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
387
387
  border: 3px solid var(--color-danger);
388
388
  outline: none;
389
389
  }
390
- .loading {
390
+ .textarea {
391
+ margin-bottom: var(--spacing-8);
392
+ position: relative;
393
+ width: 100%;
394
+ }
395
+
396
+ .textarea__header {
391
397
  align-items: center;
392
398
  display: flex;
393
- flex-direction: column;
394
- height: 100%;
395
- justify-content: center;;
396
- position: relative;
399
+ justify-content: space-between;
400
+ width: 100%;
397
401
  }
398
402
 
399
- .modal-overlay {
400
- background: rgba(0, 0, 0, 0.3);
401
- bottom: 0;
402
- left: 0;
403
- position: fixed;
404
- right: 0;
405
- top: 0;
403
+ .textarea__header--error {
404
+ font-size: 12px;
405
+ color: var(--color-danger);
406
+
406
407
  }
407
408
 
408
- .modal {
409
- background: white;
409
+ .textarea__input {
410
+ background-color: var(--color-white);
411
+ box-sizing: border-box;
410
412
  border-radius: var(--spacing-8);
411
- border: 1px solid var(--color-neutral-600);
413
+ border: 2px solid var(--color-primary);
414
+ cursor: text;
412
415
  color: var(--color-black);
413
- left: 50%;
414
- padding: var(--spacing-4) var(--spacing-4);
415
- position: absolute;
416
- right: var(--spacing-16);
417
- top: 50%;
418
- transform: translate(-50%, -50%);
419
- z-index: 5;
416
+ outline: none;
417
+ padding: var(--spacing-8) var(--spacing-16);
418
+ resize: vertical;
419
+ width: 100%;
420
420
  }
421
421
 
422
- .modal__close {
422
+ .textarea__input--error {
423
+ border: 3px solid var(--color-danger);
424
+ }
425
+
426
+ .textarea__input:enabled:hover {
427
+ box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
428
+ transition: var(--transition-box-shadow-cubic-bezier);
429
+ }
430
+
431
+ .textarea__input:disabled {
432
+ opacity: 0.5;
433
+ }
434
+
435
+ .textarea__button {
436
+ background: var(--color-primary);
437
+ border: 2px solid var(--color-secondary);
438
+ box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
439
+ border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
440
+ bottom: 0;
441
+ cursor: pointer;
442
+ left: 0;
443
+ padding-bottom: -20px;
423
444
  position: absolute;
424
- right: calc(var(--spacing-16) * -1);
425
- top: calc(var(--spacing-16) * -1);
426
- z-index: 5;
445
+ width: 100%;
427
446
  }
428
447
 
429
- .modal__content {
430
- border: 1px solid var(--color-neutral-100);
431
- border-radius: var(--spacing-8);
432
- display: flex;
433
- flex-direction: column;
434
- gap: var(--spacing-16);
435
- padding: 0 var(--spacing-16);
448
+ .textarea__button--error {
449
+ background: var(--color-danger) !important;
450
+ border: 3px solid var(--color-danger);
436
451
  }
437
452
 
438
- .modal__footer {
439
- padding-bottom: var(--spacing-16);
453
+ .textarea__button > svg {
454
+ color: var(--color-neutral-100);
440
455
  }
456
+
457
+ .textarea__button:disabled {
458
+ cursor: unset;
459
+ opacity: 0.5;
460
+ pointer-events: none;
461
+ }
462
+
463
+ .textarea__button:enabled:hover {
464
+ background: var(--color-secondary);
465
+ color: var(--color-neutral-100);
466
+ }
467
+
468
+ .textarea__button--show {
469
+ background: var(--color-primary-700);
470
+ color: var(--color-neutral-100);
471
+ }
472
+
441
473
  .select-group {
442
474
  display: flex;
443
475
  flex-direction: column;
@@ -514,85 +546,54 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
514
546
  outline: none;
515
547
  }
516
548
 
517
- .textarea {
518
- margin-bottom: var(--spacing-8);
519
- position: relative;
520
- width: 100%;
521
- }
522
-
523
- .textarea__header {
549
+ .loading {
524
550
  align-items: center;
525
551
  display: flex;
526
- justify-content: space-between;
527
- width: 100%;
552
+ flex-direction: column;
553
+ height: 100%;
554
+ justify-content: center;;
555
+ position: relative;
528
556
  }
529
557
 
530
- .textarea__header--error {
531
- font-size: 12px;
532
- color: var(--color-danger);
533
-
558
+ .modal-overlay {
559
+ background: rgba(0, 0, 0, 0.3);
560
+ bottom: 0;
561
+ left: 0;
562
+ position: fixed;
563
+ right: 0;
564
+ top: 0;
534
565
  }
535
566
 
536
- .textarea__input {
537
- background-color: var(--color-white);
538
- box-sizing: border-box;
567
+ .modal {
568
+ background: white;
539
569
  border-radius: var(--spacing-8);
540
- border: 2px solid var(--color-primary);
541
- cursor: text;
570
+ border: 1px solid var(--color-neutral-600);
542
571
  color: var(--color-black);
543
- outline: none;
544
- padding: var(--spacing-8) var(--spacing-16);
545
- resize: vertical;
546
- width: 100%;
547
- }
548
-
549
- .textarea__input--error {
550
- border: 3px solid var(--color-danger);
551
- }
552
-
553
- .textarea__input:enabled:hover {
554
- box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
555
- transition: var(--transition-box-shadow-cubic-bezier);
556
- }
557
-
558
- .textarea__input:disabled {
559
- opacity: 0.5;
560
- }
561
-
562
- .textarea__button {
563
- background: var(--color-primary);
564
- border: 2px solid var(--color-secondary);
565
- box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
566
- border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
567
- bottom: 0;
568
- cursor: pointer;
569
- left: 0;
570
- padding-bottom: -20px;
572
+ left: 50%;
573
+ padding: var(--spacing-4) var(--spacing-4);
571
574
  position: absolute;
572
- width: 100%;
573
- }
574
-
575
- .textarea__button--error {
576
- background: var(--color-danger) !important;
577
- border: 3px solid var(--color-danger);
578
- }
579
-
580
- .textarea__button > svg {
581
- color: var(--color-neutral-100);
575
+ right: var(--spacing-16);
576
+ top: 50%;
577
+ transform: translate(-50%, -50%);
578
+ z-index: 5;
582
579
  }
583
580
 
584
- .textarea__button:disabled {
585
- cursor: unset;
586
- opacity: 0.5;
587
- pointer-events: none;
581
+ .modal__close {
582
+ position: absolute;
583
+ right: calc(var(--spacing-16) * -1);
584
+ top: calc(var(--spacing-16) * -1);
585
+ z-index: 5;
588
586
  }
589
587
 
590
- .textarea__button:enabled:hover {
591
- background: var(--color-secondary);
592
- color: var(--color-neutral-100);
588
+ .modal__content {
589
+ border: 1px solid var(--color-neutral-100);
590
+ border-radius: var(--spacing-8);
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: var(--spacing-16);
594
+ padding: 0 var(--spacing-16);
593
595
  }
594
596
 
595
- .textarea__button--show {
596
- background: var(--color-primary-700);
597
- color: var(--color-neutral-100);
598
- }
597
+ .modal__footer {
598
+ padding-bottom: var(--spacing-16);
599
+ }
package/dist/cjs/index.js CHANGED
@@ -6,8 +6,8 @@ var clsx = require('clsx');
6
6
  var tfi = require('react-icons/tfi');
7
7
  var bs = require('react-icons/bs');
8
8
  var reactHookForm = require('react-hook-form');
9
- var io5 = require('react-icons/io5');
10
9
  var tb = require('react-icons/tb');
10
+ var io5 = require('react-icons/io5');
11
11
 
12
12
  let uniqueId = (function () {
13
13
  let num = 0;
@@ -203,18 +203,63 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
203
203
  is: false,
204
204
  message: "",
205
205
  }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
206
- console.log(error);
207
206
  return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsxRuntime.jsxs("div", { className: "input__header", children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "input__header--error", children: error.message }))] }), jsxRuntime.jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--right",
208
207
  // `input__icon--${icon.position || "right"}`,
209
208
  icon.className), children: icon.element }))] })] }));
210
209
  }
211
210
 
212
- function Loading({ img, children }) {
213
- return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
211
+ function FormInput({ name, isRequired, error, ...rest }) {
212
+ const { control } = reactHookForm.useFormContext();
213
+ return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
214
+ ...(isRequired
215
+ ? {
216
+ required: error?.message || "Field is required",
217
+ }
218
+ : {}),
219
+ }, render: ({ field, fieldState: { error } }) => {
220
+ return (jsxRuntime.jsx(Input, { isRequired: true, error: {
221
+ is: !!error,
222
+ message: error?.message,
223
+ }, ...field, ...rest }));
224
+ } }));
214
225
  }
215
226
 
216
- function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
217
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
227
+ function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
228
+ is: false,
229
+ message: "",
230
+ }, ...rest }) {
231
+ const ref = react.useRef();
232
+ const [isShow, setIsShow] = react.useState(false);
233
+ const handleClickToggle = () => {
234
+ if (ref && ref.current) {
235
+ if (isShow) {
236
+ ref.current.style.height = hideHeight;
237
+ }
238
+ else {
239
+ ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
240
+ }
241
+ setIsShow((prev) => !prev);
242
+ }
243
+ };
244
+ return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsxs("div", { className: "textarea__header", children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
245
+ height: hasToggleButton ? hideHeight : showHeight,
246
+ }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
247
+ }
248
+
249
+ function FormTextArea({ name, isRequired, error, ...rest }) {
250
+ const { control } = reactHookForm.useFormContext();
251
+ return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
252
+ ...(isRequired
253
+ ? {
254
+ required: error?.message || "Field is required",
255
+ }
256
+ : {}),
257
+ }, render: ({ field, fieldState: { error } }) => {
258
+ return (jsxRuntime.jsx(TextArea, { isRequired: true, error: {
259
+ is: !!error,
260
+ message: error?.message,
261
+ }, ...field, ...rest }));
262
+ } }));
218
263
  }
219
264
 
220
265
  function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue,
@@ -280,26 +325,28 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
280
325
  }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", ...rest }), isOpen && (jsxRuntime.jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsxRuntime.jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
281
326
  }
282
327
 
283
- function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
284
- is: false,
285
- message: "",
286
- }, ...rest }) {
287
- const ref = react.useRef();
288
- const [isShow, setIsShow] = react.useState(false);
289
- const handleClickToggle = () => {
290
- if (ref && ref.current) {
291
- if (isShow) {
292
- ref.current.style.height = hideHeight;
293
- }
294
- else {
295
- ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
296
- }
297
- setIsShow((prev) => !prev);
298
- }
299
- };
300
- return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsxs("div", { className: "textarea__header", children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
301
- height: hasToggleButton ? hideHeight : showHeight,
302
- }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
328
+ function FormSelect({ name, isRequired, error, ...rest }) {
329
+ const { control, setValue, clearErrors } = reactHookForm.useFormContext();
330
+ return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
331
+ ...(isRequired
332
+ ? {
333
+ required: error?.message || "Field is required",
334
+ }
335
+ : {}),
336
+ }, render: ({ field: { onBlur, ...restField }, fieldState: { error } }) => {
337
+ return (jsxRuntime.jsx(Select, { isRequired: true, error: {
338
+ is: !!error,
339
+ message: error?.message,
340
+ }, setFormSelected: setValue, clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
341
+ } }));
342
+ }
343
+
344
+ function Loading({ img, children }) {
345
+ return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
346
+ }
347
+
348
+ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
349
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
303
350
  }
304
351
 
305
352
  const LoadingContext = react.createContext(undefined);
@@ -429,6 +476,9 @@ exports.AccordionContent = AccordionContent;
429
476
  exports.AccordionItem = AccordionItem;
430
477
  exports.Button = Button;
431
478
  exports.Form = Form;
479
+ exports.FormInput = FormInput;
480
+ exports.FormSelect = FormSelect;
481
+ exports.FormTextArea = FormTextArea;
432
482
  exports.Input = Input;
433
483
  exports.Loading = Loading;
434
484
  exports.LoadingContext = LoadingContext;
package/dist/esm/index.css CHANGED
@@ -387,57 +387,89 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
387
387
  border: 3px solid var(--color-danger);
388
388
  outline: none;
389
389
  }
390
- .loading {
390
+ .textarea {
391
+ margin-bottom: var(--spacing-8);
392
+ position: relative;
393
+ width: 100%;
394
+ }
395
+
396
+ .textarea__header {
391
397
  align-items: center;
392
398
  display: flex;
393
- flex-direction: column;
394
- height: 100%;
395
- justify-content: center;;
396
- position: relative;
399
+ justify-content: space-between;
400
+ width: 100%;
397
401
  }
398
402
 
399
- .modal-overlay {
400
- background: rgba(0, 0, 0, 0.3);
401
- bottom: 0;
402
- left: 0;
403
- position: fixed;
404
- right: 0;
405
- top: 0;
403
+ .textarea__header--error {
404
+ font-size: 12px;
405
+ color: var(--color-danger);
406
+
406
407
  }
407
408
 
408
- .modal {
409
- background: white;
409
+ .textarea__input {
410
+ background-color: var(--color-white);
411
+ box-sizing: border-box;
410
412
  border-radius: var(--spacing-8);
411
- border: 1px solid var(--color-neutral-600);
413
+ border: 2px solid var(--color-primary);
414
+ cursor: text;
412
415
  color: var(--color-black);
413
- left: 50%;
414
- padding: var(--spacing-4) var(--spacing-4);
415
- position: absolute;
416
- right: var(--spacing-16);
417
- top: 50%;
418
- transform: translate(-50%, -50%);
419
- z-index: 5;
416
+ outline: none;
417
+ padding: var(--spacing-8) var(--spacing-16);
418
+ resize: vertical;
419
+ width: 100%;
420
420
  }
421
421
 
422
- .modal__close {
422
+ .textarea__input--error {
423
+ border: 3px solid var(--color-danger);
424
+ }
425
+
426
+ .textarea__input:enabled:hover {
427
+ box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
428
+ transition: var(--transition-box-shadow-cubic-bezier);
429
+ }
430
+
431
+ .textarea__input:disabled {
432
+ opacity: 0.5;
433
+ }
434
+
435
+ .textarea__button {
436
+ background: var(--color-primary);
437
+ border: 2px solid var(--color-secondary);
438
+ box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
439
+ border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
440
+ bottom: 0;
441
+ cursor: pointer;
442
+ left: 0;
443
+ padding-bottom: -20px;
423
444
  position: absolute;
424
- right: calc(var(--spacing-16) * -1);
425
- top: calc(var(--spacing-16) * -1);
426
- z-index: 5;
445
+ width: 100%;
427
446
  }
428
447
 
429
- .modal__content {
430
- border: 1px solid var(--color-neutral-100);
431
- border-radius: var(--spacing-8);
432
- display: flex;
433
- flex-direction: column;
434
- gap: var(--spacing-16);
435
- padding: 0 var(--spacing-16);
448
+ .textarea__button--error {
449
+ background: var(--color-danger) !important;
450
+ border: 3px solid var(--color-danger);
436
451
  }
437
452
 
438
- .modal__footer {
439
- padding-bottom: var(--spacing-16);
453
+ .textarea__button > svg {
454
+ color: var(--color-neutral-100);
440
455
  }
456
+
457
+ .textarea__button:disabled {
458
+ cursor: unset;
459
+ opacity: 0.5;
460
+ pointer-events: none;
461
+ }
462
+
463
+ .textarea__button:enabled:hover {
464
+ background: var(--color-secondary);
465
+ color: var(--color-neutral-100);
466
+ }
467
+
468
+ .textarea__button--show {
469
+ background: var(--color-primary-700);
470
+ color: var(--color-neutral-100);
471
+ }
472
+
441
473
  .select-group {
442
474
  display: flex;
443
475
  flex-direction: column;
@@ -514,85 +546,54 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
514
546
  outline: none;
515
547
  }
516
548
 
517
- .textarea {
518
- margin-bottom: var(--spacing-8);
519
- position: relative;
520
- width: 100%;
521
- }
522
-
523
- .textarea__header {
549
+ .loading {
524
550
  align-items: center;
525
551
  display: flex;
526
- justify-content: space-between;
527
- width: 100%;
552
+ flex-direction: column;
553
+ height: 100%;
554
+ justify-content: center;;
555
+ position: relative;
528
556
  }
529
557
 
530
- .textarea__header--error {
531
- font-size: 12px;
532
- color: var(--color-danger);
533
-
558
+ .modal-overlay {
559
+ background: rgba(0, 0, 0, 0.3);
560
+ bottom: 0;
561
+ left: 0;
562
+ position: fixed;
563
+ right: 0;
564
+ top: 0;
534
565
  }
535
566
 
536
- .textarea__input {
537
- background-color: var(--color-white);
538
- box-sizing: border-box;
567
+ .modal {
568
+ background: white;
539
569
  border-radius: var(--spacing-8);
540
- border: 2px solid var(--color-primary);
541
- cursor: text;
570
+ border: 1px solid var(--color-neutral-600);
542
571
  color: var(--color-black);
543
- outline: none;
544
- padding: var(--spacing-8) var(--spacing-16);
545
- resize: vertical;
546
- width: 100%;
547
- }
548
-
549
- .textarea__input--error {
550
- border: 3px solid var(--color-danger);
551
- }
552
-
553
- .textarea__input:enabled:hover {
554
- box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
555
- transition: var(--transition-box-shadow-cubic-bezier);
556
- }
557
-
558
- .textarea__input:disabled {
559
- opacity: 0.5;
560
- }
561
-
562
- .textarea__button {
563
- background: var(--color-primary);
564
- border: 2px solid var(--color-secondary);
565
- box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
566
- border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
567
- bottom: 0;
568
- cursor: pointer;
569
- left: 0;
570
- padding-bottom: -20px;
572
+ left: 50%;
573
+ padding: var(--spacing-4) var(--spacing-4);
571
574
  position: absolute;
572
- width: 100%;
573
- }
574
-
575
- .textarea__button--error {
576
- background: var(--color-danger) !important;
577
- border: 3px solid var(--color-danger);
578
- }
579
-
580
- .textarea__button > svg {
581
- color: var(--color-neutral-100);
575
+ right: var(--spacing-16);
576
+ top: 50%;
577
+ transform: translate(-50%, -50%);
578
+ z-index: 5;
582
579
  }
583
580
 
584
- .textarea__button:disabled {
585
- cursor: unset;
586
- opacity: 0.5;
587
- pointer-events: none;
581
+ .modal__close {
582
+ position: absolute;
583
+ right: calc(var(--spacing-16) * -1);
584
+ top: calc(var(--spacing-16) * -1);
585
+ z-index: 5;
588
586
  }
589
587
 
590
- .textarea__button:enabled:hover {
591
- background: var(--color-secondary);
592
- color: var(--color-neutral-100);
588
+ .modal__content {
589
+ border: 1px solid var(--color-neutral-100);
590
+ border-radius: var(--spacing-8);
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: var(--spacing-16);
594
+ padding: 0 var(--spacing-16);
593
595
  }
594
596
 
595
- .textarea__button--show {
596
- background: var(--color-primary-700);
597
- color: var(--color-neutral-100);
598
- }
597
+ .modal__footer {
598
+ padding-bottom: var(--spacing-16);
599
+ }
package/dist/esm/index.js CHANGED
@@ -3,9 +3,9 @@ import { Children, isValidElement, cloneElement, createContext, useMemo, useStat
3
3
  import clsx from 'clsx';
4
4
  import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
5
5
  import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
6
- import { useForm, FormProvider } from 'react-hook-form';
7
- import { IoClose } from 'react-icons/io5';
6
+ import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
8
7
  import { TbArrowsDiagonal2 } from 'react-icons/tb';
8
+ import { IoClose } from 'react-icons/io5';
9
9
 
10
10
  let uniqueId = (function () {
11
11
  let num = 0;
@@ -201,18 +201,63 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
201
201
  is: false,
202
202
  message: "",
203
203
  }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
204
- console.log(error);
205
204
  return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsxs("div", { className: "input__header", children: [label && jsx("label", { className: labelClass, children: label }), error && error.is && (jsx("span", { className: "input__header--error", children: error.message }))] }), jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsx("div", { className: clsx("input__icon", "input__icon--right",
206
205
  // `input__icon--${icon.position || "right"}`,
207
206
  icon.className), children: icon.element }))] })] }));
208
207
  }
209
208
 
210
- function Loading({ img, children }) {
211
- return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
209
+ function FormInput({ name, isRequired, error, ...rest }) {
210
+ const { control } = useFormContext();
211
+ return (jsx(Controller, { name: name, control: control, rules: {
212
+ ...(isRequired
213
+ ? {
214
+ required: error?.message || "Field is required",
215
+ }
216
+ : {}),
217
+ }, render: ({ field, fieldState: { error } }) => {
218
+ return (jsx(Input, { isRequired: true, error: {
219
+ is: !!error,
220
+ message: error?.message,
221
+ }, ...field, ...rest }));
222
+ } }));
212
223
  }
213
224
 
214
- function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
215
- return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
225
+ function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
226
+ is: false,
227
+ message: "",
228
+ }, ...rest }) {
229
+ const ref = useRef();
230
+ const [isShow, setIsShow] = useState(false);
231
+ const handleClickToggle = () => {
232
+ if (ref && ref.current) {
233
+ if (isShow) {
234
+ ref.current.style.height = hideHeight;
235
+ }
236
+ else {
237
+ ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
238
+ }
239
+ setIsShow((prev) => !prev);
240
+ }
241
+ };
242
+ return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxs("div", { className: "textarea__header", children: [label && jsx("label", { className: labelClass, children: label }), error && error.is && (jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
243
+ height: hasToggleButton ? hideHeight : showHeight,
244
+ }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
245
+ }
246
+
247
+ function FormTextArea({ name, isRequired, error, ...rest }) {
248
+ const { control } = useFormContext();
249
+ return (jsx(Controller, { name: name, control: control, rules: {
250
+ ...(isRequired
251
+ ? {
252
+ required: error?.message || "Field is required",
253
+ }
254
+ : {}),
255
+ }, render: ({ field, fieldState: { error } }) => {
256
+ return (jsx(TextArea, { isRequired: true, error: {
257
+ is: !!error,
258
+ message: error?.message,
259
+ }, ...field, ...rest }));
260
+ } }));
216
261
  }
217
262
 
218
263
  function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue,
@@ -278,26 +323,28 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
278
323
  }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", ...rest }), isOpen && (jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
279
324
  }
280
325
 
281
- function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
282
- is: false,
283
- message: "",
284
- }, ...rest }) {
285
- const ref = useRef();
286
- const [isShow, setIsShow] = useState(false);
287
- const handleClickToggle = () => {
288
- if (ref && ref.current) {
289
- if (isShow) {
290
- ref.current.style.height = hideHeight;
291
- }
292
- else {
293
- ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
294
- }
295
- setIsShow((prev) => !prev);
296
- }
297
- };
298
- return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxs("div", { className: "textarea__header", children: [label && jsx("label", { className: labelClass, children: label }), error && error.is && (jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
299
- height: hasToggleButton ? hideHeight : showHeight,
300
- }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
326
+ function FormSelect({ name, isRequired, error, ...rest }) {
327
+ const { control, setValue, clearErrors } = useFormContext();
328
+ return (jsx(Controller, { name: name, control: control, rules: {
329
+ ...(isRequired
330
+ ? {
331
+ required: error?.message || "Field is required",
332
+ }
333
+ : {}),
334
+ }, render: ({ field: { onBlur, ...restField }, fieldState: { error } }) => {
335
+ return (jsx(Select, { isRequired: true, error: {
336
+ is: !!error,
337
+ message: error?.message,
338
+ }, setFormSelected: setValue, clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
339
+ } }));
340
+ }
341
+
342
+ function Loading({ img, children }) {
343
+ return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
344
+ }
345
+
346
+ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
347
+ return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
301
348
  }
302
349
 
303
350
  const LoadingContext = createContext(undefined);
@@ -421,4 +468,4 @@ function useModal({} = {}) {
421
468
  return context;
422
469
  }
423
470
 
424
- export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
471
+ export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoinsight/react-components",
3
- "version": "0.6.7",
3
+ "version": "0.6.9",
4
4
  "description": "This library is the main UI component library for geoinsight",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",