groovinads-ui 1.2.38 → 1.2.40

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.38",
+	"version": "1.2.40",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Dropdowns/DropdownsDatePicker/DropdownDatePicker.jsx

@@ -32,16 +32,10 @@ const DropdownDatePicker = ({
 	dateTo2,
 	setDateTo2,
 }) => {
-	const [activeTab, setActiveTab] = useState(1);
+	//const [activeTab, setActiveTab] = useState(1);
 
 	const [compareDates, setCompareDates] = useState(true);
 
-	/* State for dropdowns only visible when selecting 'compare dates' option */
-	const [period1, setPeriod1] = useState('Custom range');
-	const [detailLevel1, setDetailLevel1] = useState('Daily');
-
-	const [period2, setPeriod2] = useState('Custom range');
-	const [detailLevel2, setDetailLevel2] = useState('Daily');
 
 	/* We have a 'local' state for datepickers inside the dropdown, so the user can cancel the dropdown and go back to previous values. */
 	/* When user confirms selected values, the 'local' state replaces the values previously stored in the DateFilters component. */
@@ -49,9 +43,6 @@ const DropdownDatePicker = ({
 	const [editingDateFrom, setEditingDateFrom] = useState(dateFrom);
 	const [editingDateTo, setEditingDateTo] = useState(dateTo);
 
-	const [editingDateFrom2, setEditingDateFrom2] = useState(dateFrom2);
-	const [editingDateTo2, setEditingDateTo2] = useState(dateTo2);
-
 	const [internalShow, setInternalShow] = useState(!!show);
 
 	const { capitalice } = useTextFormatter();
@@ -64,12 +55,6 @@ const DropdownDatePicker = ({
 		setEditingDateTo(end);
 	};
 
-	const onChangeDate2 = (dates) => {
-		const [start, end] = dates;
-		setEditingDateFrom2(start);
-		setEditingDateTo2(end);
-	};
-
 	const internalToggle = () => {
 		setInternalShow((prevShow) => !prevShow);
 		try {
@@ -105,7 +90,7 @@ const DropdownDatePicker = ({
 	return (
 		<Dropdown
 			show={internalShow}
-			className={`${variant === 'filter' ? 'dropdown-filter' : ''}`}
+			className={`${variant === 'filter' ? 'dropdown-filter' : ''} ${className}`}
 		>
 			<Dropdown.Toggle
 				variant='toggle-filter'

package/src/components/Labels/PillComponent.jsx

@@ -16,11 +16,11 @@ const PillComponent = ({
       <span>{children}</span>
       {closeButton && (
         <button onClick={onClick}>
-            <Icon
-                style={'solid'}
-                iconName={'xmark'}
-                scale={0.7}
-            />
+          <Icon
+            style={'solid'}
+            iconName={'xmark'}
+            scale={0.7}
+          />
         </button>
       )}
     </div>

package/src/components/Navigation/Sidebar.jsx

@@ -11,15 +11,21 @@ import PropTypes from 'prop-types';
 // COMPONENTES
 import { Icon } from '../Labels';
 
-const Sidebar = ({ api, customLinks, defaultOpened = true, show, setShow}) => {
-	const isMobile = useMediaQuery({ query: '(max-width: 992px)' })
+const Sidebar = ({
+	api,
+	customLinks,
+	defaultOpened = true,
+	show,
+	setShow,
+	onNavigate,
+}) => {
+	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);
-	console.log('defaultOpened', defaultOpened, isMobile? false : defaultOpened);
-	const [innerShow, setInnerShow] = useState(isMobile? false : defaultOpened);
+	const [innerShow, setInnerShow] = useState(isMobile ? false : defaultOpened);
 
 	const sidebarRef = useRef(null);
 	const firstOpen = useRef(true);
@@ -43,7 +49,7 @@ const Sidebar = ({ api, customLinks, defaultOpened = true, show, setShow}) => {
 
 	useEffect(() => {
 		if (isMobile && setShow) setShow(innerShow);
-		setInnerShow(isMobile ? false : firstOpen.current ? defaultOpened : show)
+		setInnerShow(isMobile ? false : firstOpen.current ? defaultOpened : show);
 		firstOpen.current = false;
 	}, []);
 
@@ -91,31 +97,29 @@ const Sidebar = ({ api, customLinks, defaultOpened = true, show, setShow}) => {
 														<ul className='btn-toggle-nav'>
 															{linkSection.children.map((childSection, x) => (
 																<li key={`childSectionIndex${x}`}>
-																	<a
+																	<button
 																		className={`nav-link ${
 																			url === childSection.url ? 'active' : ''
 																		}`}
-																		href={childSection.url}
+																		onClick={() => onNavigate(childSection.url)}
 																	>
 																		{childSection.name}
-																	</a>
+																	</button>
 																</li>
 															))}
 														</ul>
 													</Collapse>
 												</>
 											) : (
-												<>
-													<a
-														className={`nav-link ${
-															url === linkSection.url ? 'active' : ''
-														}`}
-														href={linkSection.url}
-													>
-														<Icon iconName={linkSection.icon} />
-														{linkSection.name}
-													</a>
-												</>
+												<button
+													className={`nav-link ${
+														url === linkSection.url ? 'active' : ''
+													}`}
+													onClick={() => onNavigate(linkSection.url)}
+												>
+													<Icon iconName={linkSection.icon} />
+													{linkSection.name}
+												</button>
 											)}
 										</li>
 									</ul>
@@ -135,6 +139,7 @@ Sidebar.propTypes = {
 	defaultOpened: PropTypes.bool,
 	show: PropTypes.bool, // Add show prop for controlling visibility
 	setShow: PropTypes.func, // Add setShow prop for controlling visibility
+	onNavigate: PropTypes.func.isRequired, // Nueva prop para manejar la navegación
 };
 
 export default Sidebar;

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,32 +39,37 @@ 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>
 	);
 }
 
 Tabnav.propTypes = {
-	tabs: PropTypes.array,
+	tabs: PropTypes.array.isRequired,
 	activeTab: PropTypes.number,
-  customFunction: PropTypes.bool
+  	customFunction: PropTypes.bool,
+	navigateTab: PropTypes.bool,
+	setExternalTab: PropTypes.func,
 };
 
 export default Tabnav;

package/src/stories/DropdownComponent.stories.jsx

@@ -41,7 +41,7 @@ const Template = (args) => {
 						// onClick={() => handleToggle()}
 					>
 						<span>Add filter</span>
-						<Icon iconName='fas fa-chevron-down' className='ms-2' />
+						<Icon iconName='chevron-down' className='ms-2' />
 					</Button>
 
 					<DropdownMenu>

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({});