groovinads-ui 1.2.39 → 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.39",
+	"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

@@ -8,7 +8,7 @@ import { Icon } from '../Labels';
 // HOOKS
 import useTextFormatter from '../../hooks/useTextFormatter';
 
-function Tabnav({ 
+function Tabnav({
 	tabs = [],
 	activeTab = 1,
 	navigateTab= false,
@@ -17,7 +17,7 @@ function Tabnav({
 	const { toCamelCase } = useTextFormatter();
 
 	// initial activeTab (in case it's not sent, it has a default value)
-	const [activeTabState, setActiveTabState] = useState(activeTab); 
+	const [activeTabState, setActiveTabState] = useState(activeTab);
 
 	const handleSelect = (k) => {
 		if (navigateTab) {
@@ -28,7 +28,7 @@ function Tabnav({
 			// console.log('Valor de k:', k);
 			const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k) + 1;
 			setActiveTab ? setActiveTab(tabIndex) : setActiveTabState(tabIndex);
-		}	
+		}
 	};
 
 	const formatTabsName = (tab) => {
@@ -42,7 +42,7 @@ function Tabnav({
 	useEffect(() => {
 		setActiveTabState(activeTab);
 	}, [activeTab]);
-	
+
 	return (
 		<Nav
 			variant='tabs'
@@ -65,7 +65,7 @@ function Tabnav({
 }
 
 Tabnav.propTypes = {
-	tabs: PropTypes.array,
+	tabs: PropTypes.array.isRequired,
 	activeTab: PropTypes.number,
   	customFunction: PropTypes.bool,
 	navigateTab: PropTypes.bool,

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>