groovinads-ui 1.2.39 → 1.2.41

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.41",
 	"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/Dropdowns/DeckDropdown.jsx

@@ -19,7 +19,6 @@ const DeckDropdown = () => {
 		try {
 			const resp = await ComponentsService.applications();
 			resp.forEach((element) => {
-				//element.app_icon = `fa-duotone fa-${element.application_icon}`; // Solo para Deck
 				element.app_icon_sm = element.application_icon;
 				element.app_name = element.application_name;
 			});
@@ -34,7 +33,6 @@ const DeckDropdown = () => {
 
 	const linkToApp = (path, title) => {
 		// if path begins with /, path is a subdomain, linkUrl must be window.location.origin + path + '/'
-		// else linkUrl must be path
 		let linkUrl;
 		const base_domain = useGetBaseDomain();
 		const nextState = { additionalInformation: 'Updated the URL' };
@@ -43,12 +41,10 @@ const DeckDropdown = () => {
 		if (path.startsWith('/')) {
 			if (base_domain === 'groovinads.com') {
 				linkUrl = window.location.origin + path + '/';
-				// we update the browser history window.history.pushState({ additionalInformation: 'URL updated' }, title, linkUrl);
 				window.history.pushState(nextState, title, linkUrl);
 			} else {
 				linkUrl = 'https://deck-dev.groovinads.com' + path + '/';
 			}
-			// Else return complete path
 		} else linkUrl = path;
 
 		return linkUrl;
@@ -68,8 +64,6 @@ const DeckDropdown = () => {
 			});
 		} catch (error) {
 			console.error('favApp error', error);
-			//setShowAPIerrorModal(true);
-			//setErrorModalDetail(`${error}`);
 		}
 	};
 
@@ -88,8 +82,6 @@ const DeckDropdown = () => {
 			}
 		} catch (error) {
 			console.error('unfavApp error', error);
-			//setShowAPIerrorModal(true);
-			//setErrorModalDetail(`${error}`);
 		}
 	};
 
@@ -144,7 +136,6 @@ const DeckDropdown = () => {
 									className='link-app'
 								>
 									<span className='icon-app'>
-										{/* <i className={element.app_icon_sm}></i> */}
 										<Icon
 											style={'solid'}
 											iconName={element.app_icon_sm}
@@ -189,7 +180,6 @@ const DeckDropdown = () => {
 									className='link-app'
 								>
 									<span className='icon-app'>
-										{/* <i className={element.app_icon_sm}></i> */}
 										<Icon
 											style={'solid'}
 											iconName={element.app_icon_sm}
@@ -213,43 +203,6 @@ const DeckDropdown = () => {
 					})}
 			</Dropdown.Menu>
 
-			{/* 			<Dropdown.Menu as={'ul'}>
-				<Dropdown.Item as={'li'}>
-					<h4 className='dropdown-header'>Favoritos</h4>
-				</Dropdown.Item>
-
-				<Dropdown.Item as={'li'}>
-					<div
-						onClick={() => {
-							console.log('link');
-						}}
-						className='link-app'
-					>
-						<span className='icon-app'>
-							<Icon
-								style={'solid'}
-								iconName={'book'}
-								scale={1}
-							/>
-						</span>
-
-						<span>La app va a acá</span>
-					</div>
-					<button
-						className='deck-fav'
-						onClick={(e) => {
-							e.stopPropagation();
-							console.log('fav');
-						}}
-					>
-						<Icon
-							style={'regular'}
-							iconName={'star'}
-							scale={1}
-						/>
-					</button>
-				</Dropdown.Item>
-			</Dropdown.Menu> */}
 		</Dropdown>
 	);
 };

package/src/components/Navigation/Dropdowns/UserDropdown.jsx

@@ -13,6 +13,14 @@ const UserDropdown = () => {
 
 	const [groovinProfile, setGroovinProfile] = useState({});
 
+	const handleLogout = async() => {
+		const resp = await ComponentsService.authLogout().then(() => {
+			window.location.href = '/';
+		}).catch((error) => {
+			console.error( error)
+		})
+	}
+
 	useEffect(() => {
 		ComponentsService.authStatus().then((resp) => {
 
@@ -46,9 +54,7 @@ const UserDropdown = () => {
 			</Dropdown.Toggle>
 			<Dropdown.Menu as={'ul'} align={'end'}>
 				<Dropdown.Item as={'li'}
-					onClick={() => {
-						window.location.href = '/logout';
-					}}
+					onClick={handleLogout}
 				>
 					<Icon
 						iconName={'right-from-bracket'}

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/services/components.services.js

@@ -3,6 +3,8 @@ import { POST, GET, DELETE } from './helpers';
 
 export const authStatus = async () => await GET({ url: urlPath.authStatus });
 
+export const authLogout = async () => await POST({ url: urlPath.authLogout });
+
 export const applications = async () => await GET({ url: urlPath.applications });
 
 export const favApplication = async (appToFav) => await POST({url: `${urlPath.favApps}/${appToFav}`, data: appToFav})

package/src/services/helpers.js

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import urlPath from './url.path';
 
+axios.defaults.withCredentials = true;
+
 export const GET = async ({ url }) => {
 	return await axios
 		.get(url, urlPath.headers)

package/src/services/url.path.js

@@ -9,11 +9,13 @@ export const basePath =
 
 export default {
 	authStatus: basePath + 'v2/auth/status',
+	authLogout: basePath + 'v2/auth/logout',
 
 	/* APPS FOR DROPDOWN */
 	applications: basePath + 'v2/applications',
 	favApps: basePath + 'v2/applications/favorite',
 
+
 	headers: {
 		headers: {
 			'Content-Type': 'application/json',

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>