@geoinsight/react-components 0.4.4 → 0.5.0

package/dist/cjs/index.css

@@ -79,7 +79,7 @@
   }
 }
 
-[palette-theme="water"] {
+[data-palette="water"] {
   --color-primary-100: #d6efff;
   --color-primary-200: #ade0ff;
   --color-primary-300: #85d0ff;
@@ -91,7 +91,7 @@
   --color-primary-900: #00588f;
 }
 
-[palette-theme="earth"]{
+[data-palette="earth"]{
   --color-primary-100: #f6e3cb;
   --color-primary-200: #edc897;
   --color-primary-300: #eabe86;
@@ -103,7 +103,7 @@
   --color-primary-900: #684312;
 }
 
-[palette-theme="forest"] {
+[data-palette="forest"] {
   --color-primary-100: #bee8b0;
   --color-primary-200: #a4df90;
   --color-primary-300: #8ad671;
@@ -295,14 +295,18 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  width: 100%;
 }
 
 .input {
+  box-sizing: border-box;
   background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   color: var(--color-black);
   padding: var(--spacing-16) var(--spacing-24);
+  font-size:var(--font-size-16);
+  width: 100%;
 }
 
 .input:hover {
@@ -318,6 +322,11 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   border: 3px solid var(--color-danger);
 }
 
+.input--error:focus {
+  border: 3px solid var(--color-danger);
+  outline: none;
+}
+
 .error {
   font-size: 12px;
   color: var(--color-danger);
@@ -326,6 +335,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
+  width: 100%;
 }
 
 .textarea__input {

package/dist/cjs/index.js

@@ -80,7 +80,7 @@ function Accordion({ children, expanded = "all",
 }
 
 function AccordionItem({ children, label, isExpanded = false, }) {
-    const { toggle, setToggle } = useAccordion();
+    const { toggle } = useAccordion();
     return (jsxRuntime.jsx("div", { className: "accordion-item", style: {
             paddingLeft: toggle && label && toggle[label].paddingLeft,
         }, children: react.Children.map(children, (child) => react.cloneElement(child, {
@@ -98,12 +98,57 @@ function Button({ children = "Click me", className = "", icon = undefined, isNew
     return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
 }
 
-// import { useTheme } from "../../context/themeContext";
+const ThemeContext = react.createContext(undefined);
+function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
+    const [dataTheme, setDataTheme] = react.useState();
+    const [dataPalette, setDataPalette] = react.useState();
+    react.useEffect(() => {
+        if (dataPaletteProp) {
+            switchDataPalette(dataPaletteProp);
+        }
+    }, [dataPaletteProp]);
+    react.useEffect(() => {
+        if (dataThemeProp) {
+            switchDataTheme(dataThemeProp);
+        }
+    }, [dataThemeProp]);
+    react.useEffect(() => {
+        if (window.matchMedia) {
+            if (localStorage.getItem("data-theme")) {
+                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
+                setDataTheme(localStorage.getItem("data-theme"));
+            }
+            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                document.documentElement.setAttribute("data-theme", "dark");
+                setDataTheme("dark");
+            }
+        }
+    }, []);
+    const switchDataTheme = (mode) => {
+        document.documentElement.setAttribute("data-theme", mode);
+        setDataTheme(mode);
+        localStorage.setItem("data-theme", mode);
+    };
+    const switchDataPalette = (mode) => {
+        document.documentElement.setAttribute("data-palette", mode);
+        setDataPalette(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
+}
+function useTheme() {
+    const context = react.useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
 function AccordionButton({ children, is = "link", label, 
 // toggle,
 // setToggle = (prev: any) => void,
 ...rest }) {
-    // const { dataTheme } = useTheme();
+    const { dataTheme } = useTheme();
     const { toggle, setToggle } = useAccordion();
     const handleToggle = () => {
         setToggle((prev) => {
@@ -121,9 +166,7 @@ function AccordionButton({ children, is = "link", label,
             }
         });
     };
-    return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`
-        // `accordion-button__${is}--${dataTheme}`
-        ), ...(is !== "link" && {
+    return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
             icon: label && toggle && toggle[label].isToggle ? (jsxRuntime.jsx(tfi.TfiAngleDown, {})) : (jsxRuntime.jsx(tfi.TfiAngleUp, {})),
         }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
 }
@@ -134,11 +177,14 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
         toggle[label].isToggle && (jsxRuntime.jsx("div", { className: "accordion-content", children: children })));
 };
 
-function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
-    return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
+function Input({ className = "", classNameGroup = "", error = {
+    is: false,
+    message: "",
+}, inputRef, styleGroup, placeholder = "Insert value", isRequired, ...rest }) {
+    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 TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+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);
     const handleClickToggle = () => {
@@ -154,7 +200,7 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
     };
     return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
                     height: hasToggleButton ? hideHeight : showHeight,
-                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("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"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }
 
 function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
@@ -165,54 +211,6 @@ function Loading({ img, children }) {
     return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
 }
 
-const ThemeContext = react.createContext(undefined);
-function ThemeProvider({ children }) {
-    const [dataTheme, setDataTheme] = react.useState();
-    const [paletteTheme, setPaletteTheme] = react.useState();
-    react.useEffect(() => {
-        if (window.matchMedia) {
-            if (localStorage.getItem("data-theme")) {
-                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
-                setDataTheme(localStorage.getItem("data-theme"));
-            }
-            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-                document.documentElement.setAttribute("data-theme", "dark");
-                setDataTheme("dark");
-            }
-        }
-    }, []);
-    const switchDataTheme = (mode) => {
-        document.documentElement.setAttribute("data-theme", mode);
-        setDataTheme(mode);
-        localStorage.setItem("data-theme", mode);
-    };
-    const switchPaletteTheme = (mode) => {
-        document.documentElement.setAttribute("palette-theme", mode);
-        setPaletteTheme(mode);
-        localStorage.setItem("palette-theme", mode);
-    };
-    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
-}
-function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
-    const context = react.useContext(ThemeContext);
-    // only happens if there is an initial mode value.
-    react.useEffect(() => {
-        if (dataTheme && !localStorage.getItem("data-theme")) {
-            context?.switchDataTheme(dataTheme);
-        }
-        else if (!dataTheme && localStorage.getItem("data-theme")) {
-            localStorage.removeItem("data-theme");
-        }
-    }, []);
-    react.useEffect(() => {
-        context?.switchPaletteTheme(paletteTheme);
-    }, []);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-
 const LoadingContext = react.createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {

package/dist/esm/index.css

@@ -79,7 +79,7 @@
   }
 }
 
-[palette-theme="water"] {
+[data-palette="water"] {
   --color-primary-100: #d6efff;
   --color-primary-200: #ade0ff;
   --color-primary-300: #85d0ff;
@@ -91,7 +91,7 @@
   --color-primary-900: #00588f;
 }
 
-[palette-theme="earth"]{
+[data-palette="earth"]{
   --color-primary-100: #f6e3cb;
   --color-primary-200: #edc897;
   --color-primary-300: #eabe86;
@@ -103,7 +103,7 @@
   --color-primary-900: #684312;
 }
 
-[palette-theme="forest"] {
+[data-palette="forest"] {
   --color-primary-100: #bee8b0;
   --color-primary-200: #a4df90;
   --color-primary-300: #8ad671;
@@ -295,14 +295,18 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  width: 100%;
 }
 
 .input {
+  box-sizing: border-box;
   background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   color: var(--color-black);
   padding: var(--spacing-16) var(--spacing-24);
+  font-size:var(--font-size-16);
+  width: 100%;
 }
 
 .input:hover {
@@ -318,6 +322,11 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   border: 3px solid var(--color-danger);
 }
 
+.input--error:focus {
+  border: 3px solid var(--color-danger);
+  outline: none;
+}
+
 .error {
   font-size: 12px;
   color: var(--color-danger);
@@ -326,6 +335,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
+  width: 100%;
 }
 
 .textarea__input {

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement, createContext, useState, useContext, useRef, useEffect, useReducer } from 'react';
+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';
@@ -78,7 +78,7 @@ function Accordion({ children, expanded = "all",
 }
 
 function AccordionItem({ children, label, isExpanded = false, }) {
-    const { toggle, setToggle } = useAccordion();
+    const { toggle } = useAccordion();
     return (jsx("div", { className: "accordion-item", style: {
             paddingLeft: toggle && label && toggle[label].paddingLeft,
         }, children: Children.map(children, (child) => cloneElement(child, {
@@ -96,12 +96,57 @@ function Button({ children = "Click me", className = "", icon = undefined, isNew
     return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
 }
 
-// import { useTheme } from "../../context/themeContext";
+const ThemeContext = createContext(undefined);
+function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
+    const [dataTheme, setDataTheme] = useState();
+    const [dataPalette, setDataPalette] = useState();
+    useEffect(() => {
+        if (dataPaletteProp) {
+            switchDataPalette(dataPaletteProp);
+        }
+    }, [dataPaletteProp]);
+    useEffect(() => {
+        if (dataThemeProp) {
+            switchDataTheme(dataThemeProp);
+        }
+    }, [dataThemeProp]);
+    useEffect(() => {
+        if (window.matchMedia) {
+            if (localStorage.getItem("data-theme")) {
+                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
+                setDataTheme(localStorage.getItem("data-theme"));
+            }
+            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                document.documentElement.setAttribute("data-theme", "dark");
+                setDataTheme("dark");
+            }
+        }
+    }, []);
+    const switchDataTheme = (mode) => {
+        document.documentElement.setAttribute("data-theme", mode);
+        setDataTheme(mode);
+        localStorage.setItem("data-theme", mode);
+    };
+    const switchDataPalette = (mode) => {
+        document.documentElement.setAttribute("data-palette", mode);
+        setDataPalette(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
+}
+function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
 function AccordionButton({ children, is = "link", label, 
 // toggle,
 // setToggle = (prev: any) => void,
 ...rest }) {
-    // const { dataTheme } = useTheme();
+    const { dataTheme } = useTheme();
     const { toggle, setToggle } = useAccordion();
     const handleToggle = () => {
         setToggle((prev) => {
@@ -119,9 +164,7 @@ function AccordionButton({ children, is = "link", label,
             }
         });
     };
-    return (jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`
-        // `accordion-button__${is}--${dataTheme}`
-        ), ...(is !== "link" && {
+    return (jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
             icon: label && toggle && toggle[label].isToggle ? (jsx(TfiAngleDown, {})) : (jsx(TfiAngleUp, {})),
         }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
 }
@@ -132,11 +175,14 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
         toggle[label].isToggle && (jsx("div", { className: "accordion-content", children: children })));
 };
 
-function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
-    return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
+function Input({ className = "", classNameGroup = "", error = {
+    is: false,
+    message: "",
+}, inputRef, styleGroup, placeholder = "Insert value", isRequired, ...rest }) {
+    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 TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+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);
     const handleClickToggle = () => {
@@ -152,7 +198,7 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
     };
     return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
                     height: hasToggleButton ? hideHeight : showHeight,
-                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("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"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }
 
 function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
@@ -163,54 +209,6 @@ function Loading({ img, children }) {
     return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
 }
 
-const ThemeContext = createContext(undefined);
-function ThemeProvider({ children }) {
-    const [dataTheme, setDataTheme] = useState();
-    const [paletteTheme, setPaletteTheme] = useState();
-    useEffect(() => {
-        if (window.matchMedia) {
-            if (localStorage.getItem("data-theme")) {
-                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
-                setDataTheme(localStorage.getItem("data-theme"));
-            }
-            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-                document.documentElement.setAttribute("data-theme", "dark");
-                setDataTheme("dark");
-            }
-        }
-    }, []);
-    const switchDataTheme = (mode) => {
-        document.documentElement.setAttribute("data-theme", mode);
-        setDataTheme(mode);
-        localStorage.setItem("data-theme", mode);
-    };
-    const switchPaletteTheme = (mode) => {
-        document.documentElement.setAttribute("palette-theme", mode);
-        setPaletteTheme(mode);
-        localStorage.setItem("palette-theme", mode);
-    };
-    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
-}
-function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
-    const context = useContext(ThemeContext);
-    // only happens if there is an initial mode value.
-    useEffect(() => {
-        if (dataTheme && !localStorage.getItem("data-theme")) {
-            context?.switchDataTheme(dataTheme);
-        }
-        else if (!dataTheme && localStorage.getItem("data-theme")) {
-            localStorage.removeItem("data-theme");
-        }
-    }, []);
-    useEffect(() => {
-        context?.switchPaletteTheme(paletteTheme);
-    }, []);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-
 const LoadingContext = createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -18,6 +18,7 @@
     "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.2",
     "react-icons": "^4.7.1",
     "typescript": "^4.9.4"
   },