@geoinsight/react-components 0.5.0 → 0.5.1

package/dist/cjs/index.css

@@ -291,6 +291,20 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   padding: var(--spacing-16);
 }
 
+.form {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+  padding: var(--spacing-32) 0;
+}
+
+.form__message {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-16);
+}
 .input-group {
   display: flex;
   flex-direction: column;
@@ -309,7 +323,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
-.input:hover {
+.input:enabled:hover {
   border: 3px solid var(--color-primary-700);
 }
 
@@ -318,6 +332,10 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   outline: none;
 }
 
+.input:disabled {
+  opacity: 0.5;
+}
+
 .input--error {
   border: 3px solid var(--color-danger);
 }
@@ -332,6 +350,57 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   color: var(--color-danger);
 }
 
+.loading {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;;
+  position: relative;
+}
+
+.modal-overlay {
+  background: rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.modal {
+  background: white;
+  border-radius: var(--spacing-8);
+  border: 1px solid var(--color-neutral-600);
+  color: var(--color-black);
+  left: 50%;
+  padding: var(--spacing-4) var(--spacing-4);
+  position: absolute;
+  right: var(--spacing-16);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+}
+
+.modal__close {
+  position: absolute;
+  right: calc(var(--spacing-16) * -1);
+  top: calc(var(--spacing-16) * -1);
+  z-index: 5;
+}
+
+.modal__content {
+  border: 1px solid var(--color-neutral-100);
+  border-radius: var(--spacing-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: 0 var(--spacing-16);
+}
+
+.modal__footer {
+  padding-bottom: var(--spacing-16);
+}
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
@@ -351,10 +420,14 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
-.textarea__input:hover {
+.textarea__input:enabled:hover {
   border: 3px solid var(--color-primary-700);
 }
 
+.textarea__input:disabled {
+  opacity: 0.5;
+}
+
 .textarea__button {
   background: var(--color-primary);
   border: 2px solid var(--color-secondary);
@@ -378,7 +451,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   pointer-events: none;
 }
 
-.textarea__button:hover {
+.textarea__button:enabled:hover {
   background: var(--color-secondary);
   color: var(--color-neutral-100);
 }
@@ -387,54 +460,3 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   background: var(--color-primary-700);
   color: var(--color-neutral-100);
 }
-
-.modal-overlay {
-  background: rgba(0, 0, 0, 0.3);
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-
-.modal {
-  background: white;
-  border-radius: var(--spacing-8);
-  border: 1px solid var(--color-neutral-600);
-  color: var(--color-black);
-  left: 50%;
-  padding: var(--spacing-4) var(--spacing-4);
-  position: absolute;
-  right: var(--spacing-16);
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 5;
-}
-
-.modal__close {
-  position: absolute;
-  right: calc(var(--spacing-16) * -1);
-  top: calc(var(--spacing-16) * -1);
-  z-index: 5;
-}
-
-.modal__content {
-  border: 1px solid var(--color-neutral-100);
-  border-radius: var(--spacing-8);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding: 0 var(--spacing-16);
-}
-
-.modal__footer {
-  padding-bottom: var(--spacing-16);
-}
-.loading {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;;
-  position: relative;
-}

package/dist/cjs/index.js

@@ -4,8 +4,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var clsx = require('clsx');
 var tfi = require('react-icons/tfi');
-var tb = require('react-icons/tb');
+var bs = require('react-icons/bs');
+var reactHookForm = require('react-hook-form');
 var io5 = require('react-icons/io5');
+var tb = require('react-icons/tb');
 
 function recursiveChildren(children, i = 0) {
     return react.Children.map(children, (child, index) => {
@@ -177,6 +179,33 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
         toggle[label].isToggle && (jsxRuntime.jsx("div", { className: "accordion-content", children: children })));
 };
 
+function Form({ children, onSubmit, submitButton = {
+    label: "Submit",
+}, ...rest }) {
+    const { handleSubmit, control, formState: { errors, isValid }, } = reactHookForm.useForm();
+    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 (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
+                        ...(isRequired ? {
+                            required: error?.message || "Field is required",
+                        } : {}),
+                    }, render: ({ field }) => react.cloneElement(child, {
+                        error: {
+                            is: Object.keys(errors).length > 0 && !!errors[name],
+                            message: errors &&
+                                Object.keys(errors).length > 0 &&
+                                errors[name]?.message,
+                        },
+                        ...field,
+                        ...rest,
+                    }) }));
+            }), 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({ className = "", classNameGroup = "", error = {
     is: false,
     message: "",
@@ -184,6 +213,14 @@ function Input({ className = "", classNameGroup = "", error = {
     return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", className), placeholder: placeholder, ...rest }), error && error.is && jsxRuntime.jsx("span", { className: "error", children: error.message })] }));
 }
 
+function Loading({ img, children }) {
+    return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+}
+
+function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
+    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 TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
     const ref = react.useRef();
     const [isShow, setIsShow] = react.useState(false);
@@ -203,14 +240,6 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
                 }, 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" }) }))] }));
 }
 
-function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
-    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 Loading({ img, children }) {
-    return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
-}
-
 const LoadingContext = react.createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -337,6 +366,7 @@ exports.AccordionButton = AccordionButton;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
 exports.Button = Button;
+exports.Form = Form;
 exports.Input = Input;
 exports.Loading = Loading;
 exports.LoadingContext = LoadingContext;

package/dist/esm/index.css

@@ -291,6 +291,20 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   padding: var(--spacing-16);
 }
 
+.form {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+  padding: var(--spacing-32) 0;
+}
+
+.form__message {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-16);
+}
 .input-group {
   display: flex;
   flex-direction: column;
@@ -309,7 +323,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
-.input:hover {
+.input:enabled:hover {
   border: 3px solid var(--color-primary-700);
 }
 
@@ -318,6 +332,10 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   outline: none;
 }
 
+.input:disabled {
+  opacity: 0.5;
+}
+
 .input--error {
   border: 3px solid var(--color-danger);
 }
@@ -332,6 +350,57 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   color: var(--color-danger);
 }
 
+.loading {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;;
+  position: relative;
+}
+
+.modal-overlay {
+  background: rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.modal {
+  background: white;
+  border-radius: var(--spacing-8);
+  border: 1px solid var(--color-neutral-600);
+  color: var(--color-black);
+  left: 50%;
+  padding: var(--spacing-4) var(--spacing-4);
+  position: absolute;
+  right: var(--spacing-16);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+}
+
+.modal__close {
+  position: absolute;
+  right: calc(var(--spacing-16) * -1);
+  top: calc(var(--spacing-16) * -1);
+  z-index: 5;
+}
+
+.modal__content {
+  border: 1px solid var(--color-neutral-100);
+  border-radius: var(--spacing-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: 0 var(--spacing-16);
+}
+
+.modal__footer {
+  padding-bottom: var(--spacing-16);
+}
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
@@ -351,10 +420,14 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
-.textarea__input:hover {
+.textarea__input:enabled:hover {
   border: 3px solid var(--color-primary-700);
 }
 
+.textarea__input:disabled {
+  opacity: 0.5;
+}
+
 .textarea__button {
   background: var(--color-primary);
   border: 2px solid var(--color-secondary);
@@ -378,7 +451,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   pointer-events: none;
 }
 
-.textarea__button:hover {
+.textarea__button:enabled:hover {
   background: var(--color-secondary);
   color: var(--color-neutral-100);
 }
@@ -387,54 +460,3 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   background: var(--color-primary-700);
   color: var(--color-neutral-100);
 }
-
-.modal-overlay {
-  background: rgba(0, 0, 0, 0.3);
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-
-.modal {
-  background: white;
-  border-radius: var(--spacing-8);
-  border: 1px solid var(--color-neutral-600);
-  color: var(--color-black);
-  left: 50%;
-  padding: var(--spacing-4) var(--spacing-4);
-  position: absolute;
-  right: var(--spacing-16);
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 5;
-}
-
-.modal__close {
-  position: absolute;
-  right: calc(var(--spacing-16) * -1);
-  top: calc(var(--spacing-16) * -1);
-  z-index: 5;
-}
-
-.modal__content {
-  border: 1px solid var(--color-neutral-100);
-  border-radius: var(--spacing-8);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding: 0 var(--spacing-16);
-}
-
-.modal__footer {
-  padding-bottom: var(--spacing-16);
-}
-.loading {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;;
-  position: relative;
-}

package/dist/esm/index.js

@@ -2,8 +2,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Children, isValidElement, cloneElement, createContext, useState, useContext, useEffect, useRef, useReducer } from 'react';
 import clsx from 'clsx';
 import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
-import { TbArrowsDiagonal2 } from 'react-icons/tb';
+import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
+import { useForm, Controller } from 'react-hook-form';
 import { IoClose } from 'react-icons/io5';
+import { TbArrowsDiagonal2 } from 'react-icons/tb';
 
 function recursiveChildren(children, i = 0) {
     return Children.map(children, (child, index) => {
@@ -175,6 +177,33 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
         toggle[label].isToggle && (jsx("div", { className: "accordion-content", children: children })));
 };
 
+function Form({ children, onSubmit, submitButton = {
+    label: "Submit",
+}, ...rest }) {
+    const { handleSubmit, control, formState: { errors, isValid }, } = useForm();
+    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 (jsx(Controller, { name: name, control: control, rules: {
+                        ...(isRequired ? {
+                            required: error?.message || "Field is required",
+                        } : {}),
+                    }, render: ({ field }) => cloneElement(child, {
+                        error: {
+                            is: Object.keys(errors).length > 0 && !!errors[name],
+                            message: errors &&
+                                Object.keys(errors).length > 0 &&
+                                errors[name]?.message,
+                        },
+                        ...field,
+                        ...rest,
+                    }) }));
+            }), 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({ className = "", classNameGroup = "", error = {
     is: false,
     message: "",
@@ -182,6 +211,14 @@ function Input({ className = "", classNameGroup = "", error = {
     return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", className), placeholder: placeholder, ...rest }), error && error.is && jsx("span", { className: "error", children: error.message })] }));
 }
 
+function Loading({ img, children }) {
+    return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+}
+
+function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
+    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 TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
     const ref = useRef();
     const [isShow, setIsShow] = useState(false);
@@ -201,14 +238,6 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
                 }, 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" }) }))] }));
 }
 
-function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
-    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 Loading({ img, children }) {
-    return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
-}
-
 const LoadingContext = createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -330,4 +359,4 @@ function useModal({} = {}) {
     return context;
 }
 
-export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
+export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };

package/package.json

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