@geoinsight/react-components 0.3.5 → 0.3.6

package/dist/cjs/index.css

@@ -195,6 +195,47 @@
   padding: var(--spacing-16);
 }
 
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4)
+}
+
+.accordion__title {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-700);
+  color: var(--color-neutral-100);
+  justify-content: flex-end;
+  gap: 8px;
+  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+}
+
+.accordion__menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: 0 0 var(--spacing-8) var(--spacing-16);
+}
+
+.accordion__child {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-900);
+  /* background: none !important; */
+  font-size: var(--font-size-14);
+}
+
+.accordion__child--active {
+  background-color: var(--color-neutral-500);
+}
+
+.accordion__check {
+  color: var(--color-neutral-500);
+  margin-right: calc(var(--spacing-24)*-1);
+  position: absolute;
+  right: 0;
+}
+
 .input-group {
   display: flex;
   flex-direction: column;

package/dist/cjs/index.js

@@ -1,8 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var react = require('react');
+var clsx = require('clsx');
+var tfi = require('react-icons/tfi');
+var bs = require('react-icons/bs');
 var tb = require('react-icons/tb');
 var io5 = require('react-icons/io5');
 
@@ -11,6 +13,24 @@ function Button({ children = "Click me", className = "", icon = undefined, isNew
     return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx("button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`, className), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
 }
 
+function Accordion({ menu, allExpanded, defaultValue, selectValue, }) {
+    const [toggle, setToggle] = react.useState(Object.fromEntries(Object.entries(menu).map(([key, { isExpanded = false }]) => [
+        key,
+        allExpanded !== undefined ? allExpanded : isExpanded,
+    ])));
+    const [selected, setSelected] = react.useState(defaultValue);
+    const handleToggle = (name) => {
+        setToggle((prev) => {
+            return { ...prev, [name]: !prev[name] };
+        });
+    };
+    return (jsxRuntime.jsx("div", { className: "accordion", children: Object.keys(menu).map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { className: "accordion__title", "data-theme": menu[item].dataTheme, icon: toggle[item] ? jsxRuntime.jsx(tfi.TfiAngleDown, {}) : jsxRuntime.jsx(tfi.TfiAngleUp, {}), onClick: () => handleToggle(item), children: menu[item].label }), toggle[item] && (jsxRuntime.jsx("div", { className: "accordion__menu", children: menu[item].children.map((child) => (jsxRuntime.jsx(Button, { mode: "secondary", "data-theme": menu[item].dataTheme, className: `accordion__child ${child.id === selected &&
+                            ` accordion__child--active`}`, onClick: () => {
+                            setSelected(child.id);
+                            selectValue && selectValue(item, child);
+                        }, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child.label, child.id === selected ? (jsxRuntime.jsx(bs.BsCheckLg, { className: "accordion__check", size: "1rem" })) : ("")] }) }))) }))] }))) }));
+}
+
 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 })] }));
 }
@@ -211,6 +231,7 @@ function useModal({} = {}) {
     return context;
 }
 
+exports.Accordion = Accordion;
 exports.Button = Button;
 exports.Input = Input;
 exports.Loading = Loading;

package/dist/esm/index.css

@@ -195,6 +195,47 @@
   padding: var(--spacing-16);
 }
 
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4)
+}
+
+.accordion__title {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-700);
+  color: var(--color-neutral-100);
+  justify-content: flex-end;
+  gap: 8px;
+  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+}
+
+.accordion__menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: 0 0 var(--spacing-8) var(--spacing-16);
+}
+
+.accordion__child {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-900);
+  /* background: none !important; */
+  font-size: var(--font-size-14);
+}
+
+.accordion__child--active {
+  background-color: var(--color-neutral-500);
+}
+
+.accordion__check {
+  color: var(--color-neutral-500);
+  margin-right: calc(var(--spacing-24)*-1);
+  position: absolute;
+  right: 0;
+}
+
 .input-group {
   display: flex;
   flex-direction: column;

package/dist/esm/index.js

@@ -1,6 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, createContext, useEffect, useContext, useReducer } from 'react';
 import clsx from 'clsx';
-import { useRef, useState, createContext, useEffect, useContext, useReducer } from 'react';
+import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
+import { BsCheckLg } from 'react-icons/bs';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 import { IoClose } from 'react-icons/io5';
 
@@ -9,6 +11,24 @@ function Button({ children = "Click me", className = "", icon = undefined, isNew
     return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx("button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`, className), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
 }
 
+function Accordion({ menu, allExpanded, defaultValue, selectValue, }) {
+    const [toggle, setToggle] = useState(Object.fromEntries(Object.entries(menu).map(([key, { isExpanded = false }]) => [
+        key,
+        allExpanded !== undefined ? allExpanded : isExpanded,
+    ])));
+    const [selected, setSelected] = useState(defaultValue);
+    const handleToggle = (name) => {
+        setToggle((prev) => {
+            return { ...prev, [name]: !prev[name] };
+        });
+    };
+    return (jsx("div", { className: "accordion", children: Object.keys(menu).map((item) => (jsxs(Fragment, { children: [jsx(Button, { className: "accordion__title", "data-theme": menu[item].dataTheme, icon: toggle[item] ? jsx(TfiAngleDown, {}) : jsx(TfiAngleUp, {}), onClick: () => handleToggle(item), children: menu[item].label }), toggle[item] && (jsx("div", { className: "accordion__menu", children: menu[item].children.map((child) => (jsx(Button, { mode: "secondary", "data-theme": menu[item].dataTheme, className: `accordion__child ${child.id === selected &&
+                            ` accordion__child--active`}`, onClick: () => {
+                            setSelected(child.id);
+                            selectValue && selectValue(item, child);
+                        }, children: jsxs(Fragment, { children: [child.label, child.id === selected ? (jsx(BsCheckLg, { className: "accordion__check", size: "1rem" })) : ("")] }) }))) }))] }))) }));
+}
+
 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 })] }));
 }
@@ -209,4 +229,4 @@ function useModal({} = {}) {
     return context;
 }
 
-export { Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
+export { Accordion, Button, 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.3.5",
+  "version": "0.3.6",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",