@geoinsight/react-components 0.6.5 → 0.6.7

package/dist/cjs/index.css

@@ -334,6 +334,18 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
+.input__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.input__header--error {
+  font-size: 12px;
+  color: var(--color-danger);
+}
+
 .input--icon {
   padding: var(--spacing-16) var(--spacing-40);
 }
@@ -368,19 +380,13 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .input--error {
-  border: 3px solid var(--color-danger);
+  border: 3px solid var(--color-danger) !important;
 }
 
 .input--error:focus {
   border: 3px solid var(--color-danger);
   outline: none;
 }
-
-.error {
-  font-size: 12px;
-  color: var(--color-danger);
-}
-
 .loading {
   align-items: center;
   display: flex;
@@ -508,17 +514,25 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   outline: none;
 }
 
-.error {
-  font-size: 12px;
-  color: var(--color-danger);
-}
-
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
   width: 100%;
 }
 
+.textarea__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.textarea__header--error {
+  font-size: 12px;
+  color: var(--color-danger);
+
+}
+
 .textarea__input {
   background-color: var(--color-white);
   box-sizing: border-box;
@@ -532,10 +546,13 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
+.textarea__input--error {
+  border: 3px solid var(--color-danger);
+}
+
 .textarea__input:enabled:hover {
   box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
   transition: var(--transition-box-shadow-cubic-bezier);
-  
 }
 
 .textarea__input:disabled {
@@ -555,6 +572,11 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
+.textarea__button--error {
+  background: var(--color-danger) !important;
+  border: 3px solid var(--color-danger);
+}
+
 .textarea__button > svg {
   color: var(--color-neutral-100);
 }

package/dist/cjs/index.js

@@ -190,43 +190,23 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
 function Form({ children, onSubmit, submitButton = {
     label: "Submit",
 }, ...rest }) {
-    const { handleSubmit, setValue, control, formState: { errors, isValid }, } = reactHookForm.useForm();
+    const methods = reactHookForm.useForm();
+    const { formState: { isValid }, } = methods;
     const [result, setResult] = react.useState({
         message: "",
         isSuccess: false,
     });
-    return (jsxRuntime.jsxs("form", { className: "form", onSubmit: handleSubmit(async (data) => await onSubmit(data, setResult)), ...rest, children: [react.Children.map(children, (child) => {
-                const { props: { name, error, isRequired, ...rest }, } = child;
-                return child.props.name ? (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
-                        ...(isRequired
-                            ? {
-                                required: error?.message || "Field is required",
-                            }
-                            : {}),
-                    }, render: ({ field: { onBlur, ...restField } }) => {
-                        return react.cloneElement(child, {
-                            error: {
-                                is: Object.keys(errors).length > 0 && !!errors[name],
-                                message: errors &&
-                                    Object.keys(errors).length > 0 &&
-                                    errors[name]?.message,
-                            },
-                            setFormSelected: setValue,
-                            onFormBlur: onBlur,
-                            ...restField,
-                            ...rest,
-                        });
-                    } })) : child;
-            }), result.message && (jsxRuntime.jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsxRuntime.jsx(bs.BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsxRuntime.jsx(bs.BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsxRuntime.jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }));
+    return (jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: jsxRuntime.jsxs("form", { className: "form", onSubmit: methods.handleSubmit((data) => onSubmit(data, setResult)), ...rest, children: [children, result.message && (jsxRuntime.jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsxRuntime.jsx(bs.BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsxRuntime.jsx(bs.BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsxRuntime.jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
 }
 
 function Input({ inputClassName = "", classNameGroup = "", error = {
     is: false,
     message: "",
 }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
-    return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), 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", 
+    console.log(error);
+    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", 
                         // `input__icon--${icon.position || "right"}`,
-                        icon.className), children: icon.element }))] }), error && error.is && (jsxRuntime.jsx("span", { className: "error", children: error.message }))] }));
+                        icon.className), children: icon.element }))] })] }));
 }
 
 function Loading({ img, children }) {
@@ -237,7 +217,9 @@ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = t
     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 })] })] })] }));
 }
 
-function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, inputProps, setFormSelected, onFormBlur, handleSelect, ...rest }) {
+function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, 
+// inputProps,
+setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
     const [isOpen, setIsOpen] = react.useState(false);
     const [value, setValue] = react.useState(defaultValue || (options && options[0]));
     const [filteredOptions, setFilteredOptions] = react.useState(options);
@@ -259,7 +241,6 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
     };
     const handleValueChange = (e) => {
         const { value } = e.target;
-        console.log(value);
         setValue(value);
         // for autocomplete
         // const { value } = e.target;
@@ -269,6 +250,9 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
         const { name: value } = e.target;
         if (setFormSelected) {
             setFormSelected(name, value);
+            if (clearError) {
+                clearError(name);
+            }
         }
         else {
             setValue(value);
@@ -296,7 +280,10 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
                 }, 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}`))) }))] }));
 }
 
-function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, ...rest }) {
+function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
+    is: false,
+    message: "",
+}, ...rest }) {
     const ref = react.useRef();
     const [isShow, setIsShow] = react.useState(false);
     const handleClickToggle = () => {
@@ -310,9 +297,9 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
             setIsShow((prev) => !prev);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
+    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: {
                     height: hasToggleButton ? hideHeight : showHeight,
-                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
+                }, 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" }) }))] }));
 }
 
 const LoadingContext = react.createContext(undefined);

package/dist/esm/index.css

@@ -334,6 +334,18 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
+.input__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.input__header--error {
+  font-size: 12px;
+  color: var(--color-danger);
+}
+
 .input--icon {
   padding: var(--spacing-16) var(--spacing-40);
 }
@@ -368,19 +380,13 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .input--error {
-  border: 3px solid var(--color-danger);
+  border: 3px solid var(--color-danger) !important;
 }
 
 .input--error:focus {
   border: 3px solid var(--color-danger);
   outline: none;
 }
-
-.error {
-  font-size: 12px;
-  color: var(--color-danger);
-}
-
 .loading {
   align-items: center;
   display: flex;
@@ -508,17 +514,25 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   outline: none;
 }
 
-.error {
-  font-size: 12px;
-  color: var(--color-danger);
-}
-
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
   width: 100%;
 }
 
+.textarea__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.textarea__header--error {
+  font-size: 12px;
+  color: var(--color-danger);
+
+}
+
 .textarea__input {
   background-color: var(--color-white);
   box-sizing: border-box;
@@ -532,10 +546,13 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
+.textarea__input--error {
+  border: 3px solid var(--color-danger);
+}
+
 .textarea__input:enabled:hover {
   box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
   transition: var(--transition-box-shadow-cubic-bezier);
-  
 }
 
 .textarea__input:disabled {
@@ -555,6 +572,11 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
+.textarea__button--error {
+  background: var(--color-danger) !important;
+  border: 3px solid var(--color-danger);
+}
+
 .textarea__button > svg {
   color: var(--color-neutral-100);
 }

package/dist/esm/index.js

@@ -3,7 +3,7 @@ import { Children, isValidElement, cloneElement, createContext, useMemo, useStat
 import clsx from 'clsx';
 import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
 import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
-import { useForm, Controller } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 import { IoClose } from 'react-icons/io5';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 
@@ -188,43 +188,23 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
 function Form({ children, onSubmit, submitButton = {
     label: "Submit",
 }, ...rest }) {
-    const { handleSubmit, setValue, control, formState: { errors, isValid }, } = useForm();
+    const methods = useForm();
+    const { formState: { isValid }, } = methods;
     const [result, setResult] = useState({
         message: "",
         isSuccess: false,
     });
-    return (jsxs("form", { className: "form", onSubmit: handleSubmit(async (data) => await onSubmit(data, setResult)), ...rest, children: [Children.map(children, (child) => {
-                const { props: { name, error, isRequired, ...rest }, } = child;
-                return child.props.name ? (jsx(Controller, { name: name, control: control, rules: {
-                        ...(isRequired
-                            ? {
-                                required: error?.message || "Field is required",
-                            }
-                            : {}),
-                    }, render: ({ field: { onBlur, ...restField } }) => {
-                        return cloneElement(child, {
-                            error: {
-                                is: Object.keys(errors).length > 0 && !!errors[name],
-                                message: errors &&
-                                    Object.keys(errors).length > 0 &&
-                                    errors[name]?.message,
-                            },
-                            setFormSelected: setValue,
-                            onFormBlur: onBlur,
-                            ...restField,
-                            ...rest,
-                        });
-                    } })) : child;
-            }), result.message && (jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsx(BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsx(BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }));
+    return (jsx(FormProvider, { ...methods, children: jsxs("form", { className: "form", onSubmit: methods.handleSubmit((data) => onSubmit(data, setResult)), ...rest, children: [children, result.message && (jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsx(BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsx(BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
 }
 
 function Input({ inputClassName = "", classNameGroup = "", error = {
     is: false,
     message: "",
 }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
-    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), 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", 
+    console.log(error);
+    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", 
                         // `input__icon--${icon.position || "right"}`,
-                        icon.className), children: icon.element }))] }), error && error.is && (jsx("span", { className: "error", children: error.message }))] }));
+                        icon.className), children: icon.element }))] })] }));
 }
 
 function Loading({ img, children }) {
@@ -235,7 +215,9 @@ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = t
     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 })] })] })] }));
 }
 
-function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, inputProps, setFormSelected, onFormBlur, handleSelect, ...rest }) {
+function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, 
+// inputProps,
+setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(defaultValue || (options && options[0]));
     const [filteredOptions, setFilteredOptions] = useState(options);
@@ -257,7 +239,6 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
     };
     const handleValueChange = (e) => {
         const { value } = e.target;
-        console.log(value);
         setValue(value);
         // for autocomplete
         // const { value } = e.target;
@@ -267,6 +248,9 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
         const { name: value } = e.target;
         if (setFormSelected) {
             setFormSelected(name, value);
+            if (clearError) {
+                clearError(name);
+            }
         }
         else {
             setValue(value);
@@ -294,7 +278,10 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
                 }, 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}`))) }))] }));
 }
 
-function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, ...rest }) {
+function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
+    is: false,
+    message: "",
+}, ...rest }) {
     const ref = useRef();
     const [isShow, setIsShow] = useState(false);
     const handleClickToggle = () => {
@@ -308,9 +295,9 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
             setIsShow((prev) => !prev);
         }
     };
-    return (jsxs("div", { className: clsx("textarea", className), style: style, children: [label && jsx("label", { className: labelClass, children: label }), jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
+    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: {
                     height: hasToggleButton ? hideHeight : showHeight,
-                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
+                }, 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" }) }))] }));
 }
 
 const LoadingContext = createContext(undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",