groovinads-ui 1.2.37 → 1.2.39

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "groovinads-ui",
 	"description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-	"version": "1.2.37",
+	"version": "1.2.39",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Dropdowns/DropdownMultiSelect.jsx

@@ -30,6 +30,7 @@ const DropdownMultiSelect = ({
 	showStatus = '',
 	focus = false,
 	buttonVariant = 'input',
+	nowrap = false,
 }) => {
 	const [query, setQuery] = useState('');
 
@@ -76,7 +77,7 @@ const DropdownMultiSelect = ({
 			onToggle={onToggle}
 			drop={drop}
 		>
-			<Dropdown.Toggle as={'div'} className={`btn btn-${buttonVariant} w-100`}>
+			<Dropdown.Toggle as={'div'} className={`btn btn-${buttonVariant} w-100 ${nowrap ? 'nowrap' : ''}`}>
 				{( valuesSelected.length > 0 && buttonVariant === 'input' ) && (
 					<div className='wrapper'>
 						{valuesSelected.map((value, index) => {
@@ -193,6 +194,7 @@ DropdownMultiSelect.propTypes = {
 		'terciary',
 		'outline',
 	]),
+	nowrap: PropTypes.bool,
 };
 
 export default DropdownMultiSelect;

package/src/components/Navigation/Sidebar.jsx

@@ -11,17 +11,18 @@ import PropTypes from 'prop-types';
 // COMPONENTES
 import { Icon } from '../Labels';
 
-const Sidebar = ({ api, customLinks, defaultOpened = false, show, setShow}) => {
+const Sidebar = ({ api, customLinks, defaultOpened = true, show, setShow}) => {
 	const isMobile = useMediaQuery({ query: '(max-width: 992px)' })
 
 	const url = window.location.pathname; // to get current url
 
 	const [sidebarLinks, setSidebarLinks] = useState([]);
 	const [openIndex, setOpenIndex] = useState(null);
-	
-	const [innerShow, setInnerShow] = useState(false);
+	console.log('defaultOpened', defaultOpened, isMobile? false : defaultOpened);
+	const [innerShow, setInnerShow] = useState(isMobile? false : defaultOpened);
 
 	const sidebarRef = useRef(null);
+	const firstOpen = useRef(true);
 
 	const handleToggle = (index) => {
 		setOpenIndex(openIndex === index ? null : index);
@@ -37,12 +38,13 @@ const Sidebar = ({ api, customLinks, defaultOpened = false, show, setShow}) => {
 	}, [api]);
 
 	useEffect(() => {
-		setInnerShow(show);
+		setInnerShow(firstOpen.current ? defaultOpened : show);
 	}, [show]);
 
 	useEffect(() => {
 		if (isMobile && setShow) setShow(innerShow);
-		setInnerShow(isMobile ? false : (show ?? defaultOpened))
+		setInnerShow(isMobile ? false : firstOpen.current ? defaultOpened : show)
+		firstOpen.current = false;
 	}, []);
 
 	return (

package/src/components/Navigation/Tabnav.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Nav } from 'react-bootstrap';
 
@@ -8,19 +8,27 @@ import { Icon } from '../Labels';
 // HOOKS
 import useTextFormatter from '../../hooks/useTextFormatter';
 
-function Tabnav({ tabs = [], activeTab = 1, customFunction = false}) {
+function Tabnav({ 
+	tabs = [],
+	activeTab = 1,
+	navigateTab= false,
+	setActiveTab,
+}) {
 	const { toCamelCase } = useTextFormatter();
 
-	const handleSelect = (k) => {
-    if (customFunction){
-      console.log('custom function');
-    }else{
-      const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k);
-      console.log(tabs[tabIndex].url);
-  
-      window.location.href = tabs[tabIndex].url;
-    }
+	// initial activeTab (in case it's not sent, it has a default value)
+	const [activeTabState, setActiveTabState] = useState(activeTab); 
 
+	const handleSelect = (k) => {
+		if (navigateTab) {
+			const tab = tabs.find((tab) => toCamelCase(tab.tab) === k);
+			console.log(tab.url);
+			window.location.href = tab.url;
+		}else{
+			// console.log('Valor de k:', k);
+			const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k) + 1;
+			setActiveTab ? setActiveTab(tabIndex) : setActiveTabState(tabIndex);
+		}	
 	};
 
 	const formatTabsName = (tab) => {
@@ -31,24 +39,27 @@ function Tabnav({ tabs = [], activeTab = 1, customFunction = false}) {
 		return tabReplace.charAt(0).toUpperCase() + tabReplace.slice(1);
 	};
 
+	useEffect(() => {
+		setActiveTabState(activeTab);
+	}, [activeTab]);
+	
 	return (
 		<Nav
 			variant='tabs'
-			activeKey={toCamelCase(tabs[activeTab - 1].tab)}
+			activeKey={toCamelCase(tabs[activeTabState - 1].tab)}
 			onSelect={handleSelect}
 		>
-			{tabs.map(({ tab, badgeNumber, warningIcon }, index) => (
-				<Nav.Item key={index}>
-					<Nav.Link
-						eventKey={toCamelCase(tab)}
-					>
-						{/* Dia 1 => dia1 */}
-						{warningIcon && <Icon iconName='triangle-exclamation' />}
-						{formatTabsName(tab)}
-						{badgeNumber && <span className='tab-badge'>{badgeNumber}</span>}
-					</Nav.Link>
-				</Nav.Item>
-			))}
+			{tabs.map(({ tab, badgeNumber, warningIcon }, index) => {
+				return (
+					<Nav.Item key={`tabs.tab: ${index}`}>
+						<Nav.Link eventKey={toCamelCase(tab)}>
+							{warningIcon && <Icon iconName='triangle-exclamation' />}
+							{formatTabsName(tab)}
+							{badgeNumber && <span className='tab-badge'>{badgeNumber}</span>}
+						</Nav.Link>
+					</Nav.Item>
+				);
+			})}
 		</Nav>
 	);
 }
@@ -56,7 +67,9 @@ function Tabnav({ tabs = [], activeTab = 1, customFunction = false}) {
 Tabnav.propTypes = {
 	tabs: PropTypes.array,
 	activeTab: PropTypes.number,
-  customFunction: PropTypes.bool
+  	customFunction: PropTypes.bool,
+	navigateTab: PropTypes.bool,
+	setExternalTab: PropTypes.func,
 };
 
 export default Tabnav;

package/src/stories/Sidebar.stories.jsx

@@ -86,7 +86,7 @@ const Template = (args) => {
 				{...args}
 				api={'v2/reports/'}
 				customLinks={customLinks}
-				defaultOpened={true}
+				defaultOpened={false}
 			/>
 			<div className='main'>
 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quasi

package/src/stories/Tabnav.stories.jsx

@@ -1,5 +1,6 @@
-import React, { act, useState } from 'react';
+import React, { useState } from 'react';
 import Tabnav from '../components/Navigation/Tabnav';
+import { Button } from 'react-bootstrap';
 
 export default {
   title: 'Navigation/Tabnav',
@@ -8,13 +9,47 @@ export default {
 
 const Template = (args) => {
   const tabs = [
-    { tab: 'hola', badgeNumber: '', url: '/com', warningIcon: true },
-    { tab: 'tab 2', badgeNumber: '2', url: '/abc', warningIcon: false },
-    { tab: 'tab 3', badgeNumber: '1', url: '/www', warningIcon: false },
+    { tab: 'Tab', badgeNumber: '', url: '/com', warningIcon: true },  
+    { tab: 'Tab 1', badgeNumber: '1', url: '/abc', warningIcon: false },
+    { tab: 'Tab 2', badgeNumber: '2', url: '/www', warningIcon: false },
   ];
-  const activeTab = tabs[0].tab;
+  
+  const [activeTab, setActiveTab] = useState(1);
 
-  return <Tabnav {...args} tabs={tabs} activeTab={activeTab} />;
+  return (
+    <>
+      {/* test: external Buttons to change */}
+      <Button onClick={() => setActiveTab(1)}>1</Button>
+      <Button onClick={() => setActiveTab(2)}>2</Button>
+      <Button onClick={() => setActiveTab(3)}>3</Button>
+    
+      <Tabnav
+        {...args}
+        tabs={tabs}
+        activeTab={activeTab} // Send the external state
+        setActiveTab={setActiveTab} // Send the setter of the external state
+      />
+      <Tabnav 
+        {...args} 
+        tabs={tabs} 
+        activeTab={2} // Test with the activeTab prop
+
+      />
+
+      <Tabnav 
+        {...args} 
+        tabs={tabs} // Test without the activeTab prop
+      />
+
+      <Tabnav
+        {...args}
+        tabs={tabs}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        navigateTab={true} // Test with navigateTab prop
+      />
+    </>
+  );
 };
 
 export const Default = Template.bind({});