@geoinsight/react-components 0.5.2 → 0.6.0

package/dist/cjs/index.css

@@ -27,6 +27,8 @@
   --spacing-96: 6rem;
   --spacing-128: 8rem;
 
+  --size-m: 12rem;
+
   --color-black: #1d1d1d;
   --color-white: #eee;
 
@@ -152,7 +154,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .accordion-button__button--dark.button {
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-neutral-400);
 }
 
 .accordion-button__button--light.button {
@@ -160,7 +162,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .accordion-button__link--dark.button {
-  background-color: var(--color-neutral-100) !important;
+  background-color: var(--color-neutral-200) !important;
 }
 
 .accordion-button__link--light.button {
@@ -309,6 +311,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  position: relative;
   width: 100%;
 }
 
@@ -319,16 +322,36 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   border: 2px solid var(--color-primary);
   color: var(--color-black);
   padding: var(--spacing-16) var(--spacing-24);
-  font-size:var(--font-size-16);
+  font-size: var(--font-size-16);
   width: 100%;
 }
 
+.input--icon {
+  padding: var(--spacing-16) var(--spacing-40);
+}
+
+.input__icon {
+  /* padding-top: var(--spacing-8); */
+  padding: var(--spacing-16) var(--spacing-16);
+  position: absolute;
+}
+
+.input__icon--right {
+  right: 0;
+}
+
+.input__icon--left {
+  left: 0;
+}
+
 .input:enabled:hover {
-  border: 3px solid var(--color-primary-700);
+  box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
+  transition: var(--transition-box-shadow-cubic-bezier);
 }
 
 .input:focus {
-  border: 3px solid var(--color-primary-700);
+  box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
+  transition: var(--transition-box-shadow-cubic-bezier);
   outline: none;
 }
 

package/dist/cjs/index.js

@@ -9,6 +9,14 @@ var reactHookForm = require('react-hook-form');
 var io5 = require('react-icons/io5');
 var tb = require('react-icons/tb');
 
+let uniqueId = (function () {
+    let num = 0;
+    return function (prefix) {
+        prefix = String(prefix) || '';
+        num += 1;
+        return prefix + num;
+    };
+}());
 function recursiveChildren(children, i = 0) {
     return react.Children.map(children, (child, index) => {
         if (!react.isValidElement(child)) {
@@ -19,7 +27,7 @@ function recursiveChildren(children, i = 0) {
                 ...child.props,
                 children: recursiveChildren(child.props.children, i++),
                 ...(child?.type?.name === "AccordionItem" && {
-                    label: `${child?.type?.name}-${index}-${i}`,
+                    label: uniqueId("id_") // `${(child?.type as any)?.name}-${index}-${i}`,
                 }),
             });
         }
@@ -58,7 +66,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
 
 const AccordionContext = react.createContext(undefined);
 function AccordionProvider({ children, expanded = "all" }) {
-    const newChildren = recursiveChildren(children, 0);
+    const newChildren = react.useMemo(() => recursiveChildren(children, 0), []);
     const [toggle, _setToggle] = react.useState(recursiveToggle(newChildren, {}, 0, { expanded }));
     const setToggle = (prev) => {
         _setToggle(prev);
@@ -84,7 +92,7 @@ function Accordion({ children, expanded = "all",
 function AccordionItem({ children, label, isExpanded = false, }) {
     const { toggle } = useAccordion();
     return (jsxRuntime.jsx("div", { className: "accordion-item", style: {
-            paddingLeft: toggle && label && toggle[label].paddingLeft,
+            paddingLeft: toggle && label && toggle[label]?.paddingLeft,
         }, children: react.Children.map(children, (child) => react.cloneElement(child, {
             toggle: toggle,
             // setToggle: setToggle,
@@ -190,27 +198,35 @@ function Form({ children, onSubmit, submitButton = {
     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,
-                    }) }));
+                        ...(isRequired
+                            ? {
+                                required: error?.message || "Field is required",
+                            }
+                            : {}),
+                    }, render: ({ field: { ...restField } }) => {
+                        return react.cloneElement(child, {
+                            error: {
+                                is: Object.keys(errors).length > 0 && !!errors[name],
+                                message: errors &&
+                                    Object.keys(errors).length > 0 &&
+                                    errors[name]?.message,
+                            },
+                            // name: name,
+                            // value: value || rest.value,
+                            ...restField,
+                            ...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 = {
+function Input({ inputClassName = "", classNameGroup = "", error = {
     is: false,
     message: "",
-}, inputRef, styleGroup, placeholder = "Insert value", isRequired, label, labelClass, ...rest }) {
-    return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), 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 })] }));
+}, 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 }), 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 }))] }));
 }
 
 function Loading({ img, children }) {

package/dist/esm/index.css

@@ -27,6 +27,8 @@
   --spacing-96: 6rem;
   --spacing-128: 8rem;
 
+  --size-m: 12rem;
+
   --color-black: #1d1d1d;
   --color-white: #eee;
 
@@ -152,7 +154,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .accordion-button__button--dark.button {
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-neutral-400);
 }
 
 .accordion-button__button--light.button {
@@ -160,7 +162,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .accordion-button__link--dark.button {
-  background-color: var(--color-neutral-100) !important;
+  background-color: var(--color-neutral-200) !important;
 }
 
 .accordion-button__link--light.button {
@@ -309,6 +311,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  position: relative;
   width: 100%;
 }
 
@@ -319,16 +322,36 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   border: 2px solid var(--color-primary);
   color: var(--color-black);
   padding: var(--spacing-16) var(--spacing-24);
-  font-size:var(--font-size-16);
+  font-size: var(--font-size-16);
   width: 100%;
 }
 
+.input--icon {
+  padding: var(--spacing-16) var(--spacing-40);
+}
+
+.input__icon {
+  /* padding-top: var(--spacing-8); */
+  padding: var(--spacing-16) var(--spacing-16);
+  position: absolute;
+}
+
+.input__icon--right {
+  right: 0;
+}
+
+.input__icon--left {
+  left: 0;
+}
+
 .input:enabled:hover {
-  border: 3px solid var(--color-primary-700);
+  box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
+  transition: var(--transition-box-shadow-cubic-bezier);
 }
 
 .input:focus {
-  border: 3px solid var(--color-primary-700);
+  box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
+  transition: var(--transition-box-shadow-cubic-bezier);
   outline: none;
 }
 

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement, createContext, useState, useContext, useEffect, useRef, useReducer } from 'react';
+import { Children, isValidElement, cloneElement, createContext, useMemo, useState, useContext, useEffect, useRef, useReducer } from 'react';
 import clsx from 'clsx';
 import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
 import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
@@ -7,6 +7,14 @@ import { useForm, Controller } from 'react-hook-form';
 import { IoClose } from 'react-icons/io5';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 
+let uniqueId = (function () {
+    let num = 0;
+    return function (prefix) {
+        prefix = String(prefix) || '';
+        num += 1;
+        return prefix + num;
+    };
+}());
 function recursiveChildren(children, i = 0) {
     return Children.map(children, (child, index) => {
         if (!isValidElement(child)) {
@@ -17,7 +25,7 @@ function recursiveChildren(children, i = 0) {
                 ...child.props,
                 children: recursiveChildren(child.props.children, i++),
                 ...(child?.type?.name === "AccordionItem" && {
-                    label: `${child?.type?.name}-${index}-${i}`,
+                    label: uniqueId("id_") // `${(child?.type as any)?.name}-${index}-${i}`,
                 }),
             });
         }
@@ -56,7 +64,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
 
 const AccordionContext = createContext(undefined);
 function AccordionProvider({ children, expanded = "all" }) {
-    const newChildren = recursiveChildren(children, 0);
+    const newChildren = useMemo(() => recursiveChildren(children, 0), []);
     const [toggle, _setToggle] = useState(recursiveToggle(newChildren, {}, 0, { expanded }));
     const setToggle = (prev) => {
         _setToggle(prev);
@@ -82,7 +90,7 @@ function Accordion({ children, expanded = "all",
 function AccordionItem({ children, label, isExpanded = false, }) {
     const { toggle } = useAccordion();
     return (jsx("div", { className: "accordion-item", style: {
-            paddingLeft: toggle && label && toggle[label].paddingLeft,
+            paddingLeft: toggle && label && toggle[label]?.paddingLeft,
         }, children: Children.map(children, (child) => cloneElement(child, {
             toggle: toggle,
             // setToggle: setToggle,
@@ -188,27 +196,35 @@ function Form({ children, onSubmit, submitButton = {
     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,
-                    }) }));
+                        ...(isRequired
+                            ? {
+                                required: error?.message || "Field is required",
+                            }
+                            : {}),
+                    }, render: ({ field: { ...restField } }) => {
+                        return cloneElement(child, {
+                            error: {
+                                is: Object.keys(errors).length > 0 && !!errors[name],
+                                message: errors &&
+                                    Object.keys(errors).length > 0 &&
+                                    errors[name]?.message,
+                            },
+                            // name: name,
+                            // value: value || rest.value,
+                            ...restField,
+                            ...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 = {
+function Input({ inputClassName = "", classNameGroup = "", error = {
     is: false,
     message: "",
-}, inputRef, styleGroup, placeholder = "Insert value", isRequired, label, labelClass, ...rest }) {
-    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), 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 })] }));
+}, 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 }), 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 }))] }));
 }
 
 function Loading({ img, children }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -31,6 +31,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
     "@storybook/addon-actions": "^7.0.7",
+    "@storybook/addon-console": "^2.0.0",
     "@storybook/addon-essentials": "^7.0.7",
     "@storybook/addon-interactions": "^7.0.7",
     "@storybook/addon-links": "^7.0.7",