groovinads-ui 1.2.69 → 1.2.70

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

package/src/components/Dropdowns/DropdownMultiSelect.jsx

@@ -18,6 +18,7 @@ const DropdownMultiSelect = ({
 	inputLabel = '',
 	object = false,
 	nameKey,
+	customKey,
 	idKey,
 	searchLabel = 'Search',
 	onToggle,
@@ -43,6 +44,8 @@ const DropdownMultiSelect = ({
 	const [innerShow, setInnerShow] = useState(!!show);
 
 	const dropdownRef = useRef(null);
+	const toggleRef = useRef(null);
+	const menuRef = useRef(null);
 
 	const { highlightText } = useTextFormatter();
 
@@ -73,14 +76,13 @@ const DropdownMultiSelect = ({
 
 	const valuesFromSearch = () =>
 		values.filter(
-		(item) =>
-			(object ? `${item[idKey]} ${item[nameKey]}` : item)
-				.toLowerCase()
-				.includes(query.toLowerCase()) &&
-			(showStatus ? parseInt(item.status) === parseInt(showStatus) : true),
-	);
+			(item) =>
+				(object ? `${item[idKey]} ${item[nameKey]} ${item[customKey]}` : item)
+					.toLowerCase()
+					.includes(query.toLowerCase()) &&
+				(showStatus ? parseInt(item.status) === parseInt(showStatus) : true),
+		);
 
-	
 	const handleClickOutside = useCallback((event) => {
 		if (
 			dropdownRef?.current &&
@@ -91,7 +93,7 @@ const DropdownMultiSelect = ({
 			setShow(false);
 		}
 	}, []);
-	
+
 	// VALIDATION REQUIRED
 	const validateRequired = () => {
 		if (!valuesSelected.length) {
@@ -100,11 +102,11 @@ const DropdownMultiSelect = ({
 			}, 2000);
 		}
 	};
-	
+
 	useEffect(() => {
 		setInnerShow(show);
 	}, [show]);
-	
+
 	useEffect(() => {
 		document.addEventListener('click', handleClickOutside);
 		return () => {
@@ -115,6 +117,33 @@ const DropdownMultiSelect = ({
 	useEffect(() => {
 		if (validate && errorRequired) validateRequired();
 	}, [validate, errorRequired]);
+
+	useEffect(() => {
+		if (overflow && menuRef.current && toggleRef.current) {
+			menuRef.current.style.width = `${toggleRef.current.offsetWidth}px`;
+		}
+	}, [innerShow, overflow]);
+
+	useEffect(() => {
+		function updateMenuWidth() {
+			if (overflow && menuRef.current && toggleRef.current) {
+				const width = toggleRef.current.offsetWidth;
+				menuRef.current.style.width = `${width}px`;
+				menuRef.current.style.minWidth = `${width}px`;
+				menuRef.current.style.maxWidth = `${width}px`;
+			}
+		}
+
+		if (innerShow) {
+			updateMenuWidth();
+			window.addEventListener('resize', updateMenuWidth);
+		}
+
+		return () => {
+			window.removeEventListener('resize', updateMenuWidth);
+		};
+	}, [innerShow, overflow]);
+
 	return (
 		<Dropdown
 			className={className}
@@ -127,7 +156,8 @@ const DropdownMultiSelect = ({
 		>
 			<Dropdown.Toggle
 				as={'div'}
-				className={`btn btn-${buttonVariant} w-100 ${nowrap ? 'nowrap' : ''}${errorRequired && valuesSelected.length === 0 ? 'not-validated' : ''}`}
+				ref={toggleRef}
+				className={`btn btn-${buttonVariant} ${nowrap ? 'nowrap' : ''}${errorRequired && valuesSelected.length === 0 ? 'not-validated' : ''}`}
 				onClick={(e) => {
 					e.stopPropagation(); // Detiene la propagación del clic
 					setInnerShow((prevShow) => !prevShow); // Alterna el estado interno del dropdown
@@ -147,8 +177,14 @@ const DropdownMultiSelect = ({
 									}}
 									key={'Dropdown.PillComponent' + index}
 								>
-									{idInPill ? `#${value[idKey]} - ` : ''}
-									<span>{object ? value[nameKey] : value}</span>
+									{customKey
+										? `${value[nameKey]} - ${value[customKey]}`
+										: idInPill
+											? `#${value[idKey]}`
+											: value[nameKey] || value}
+
+									{/* {idInPill ? `#${value[idKey]} - ` : ''}
+									<span>{object ? value[nameKey] : value}</span> */}
 								</PillComponent>
 							);
 						})}
@@ -165,6 +201,7 @@ const DropdownMultiSelect = ({
 
 			<Dropdown.Menu
 				className='w-100'
+				ref={menuRef}
 				popperConfig={
 					overflow
 						? {
@@ -208,7 +245,9 @@ const DropdownMultiSelect = ({
 									>
 										{highlightText(
 											object
-												? `${hasId ? `#${value[idKey]} - ` : ''}${value[nameKey]}`
+												? customKey
+													? `${value[nameKey]} - ${value[customKey]}`
+													: `${hasId ? `#${value[idKey]} - ` : ''}${value[nameKey]}`
 												: value[nameKey] || value,
 											query,
 										)}
@@ -242,6 +281,7 @@ DropdownMultiSelect.propTypes = {
 	setShow: PropTypes.func,
 	object: PropTypes.bool,
 	nameKey: PropTypes.string,
+	customKey: PropTypes.string,
 	idKey: PropTypes.string,
 	idInPill: PropTypes.bool,
 	showStatus: PropTypes.string,

package/src/components/Navigation/Sidebar.jsx

@@ -25,7 +25,9 @@ const Sidebar = ({
 	inModal = false,
 	customUrl,
 }) => {
-	const isMobile = inModal ? true : useMediaQuery({ query: '(max-width: 992px)' });
+	const isMobile = inModal
+		? true
+		: useMediaQuery({ query: '(max-width: 992px)' });
 
 	const url = customUrl !== undefined ? customUrl : window.location.pathname; // to get current url
 
@@ -55,7 +57,8 @@ const Sidebar = ({
 
 	useEffect(() => {
 		if (isMobile && setShow && !inModal) setShow(innerShow);
-		if (!inModal) setInnerShow(isMobile ? false : firstOpen.current ? defaultOpened : show);
+		if (!inModal)
+			setInnerShow(isMobile ? false : firstOpen.current ? defaultOpened : show);
 		firstOpen.current = false;
 	}, []);
 
@@ -80,13 +83,14 @@ const Sidebar = ({
 				<div className='scroll'>
 					{customLinks.map((section, i) => (
 						<div className='sidebar-section' key={`sectionIndex${i}`}>
-							{section.title ? <h4>{section.title}</h4> : <></> }
+							{section.title ? <h4>{section.title}</h4> : <></>}
 
 							{/* PROPS LINKS */}
-							{(section.backData ? sidebarLinks : section.links || []).map(
-								(linkSection, y) => (
-									<ul className='nav' key={`linksSections${y}`}>
-										<li className='nav-item'>
+
+							<ul className='nav'>
+								{(section.backData ? sidebarLinks : section.links || []).map(
+									(linkSection, y) => (
+										<li className='nav-item' key={`linksSections${y}`}>
 											{/* CHILDREN - If has children, the collapse is expanded */}
 											{linkSection.children && linkSection.children.length ? (
 												<>
@@ -121,20 +125,41 @@ const Sidebar = ({
 													</Collapse>
 												</>
 											) : (
-												<button
-													className={`nav-link ${
-														url === linkSection.url ? 'active' : ''
-													}`}
-													onClick={() => onNavigate(linkSection.url)}
-												>
-													<Icon iconName={linkSection.icon} />
-													{linkSection.name}
-												</button>
+												<>
+													<button
+														className={`nav-link ${
+															url === linkSection.url ? 'active' : ''
+														}`}
+														onClick={() => onNavigate(linkSection.url)}
+													>
+														<Icon iconName={linkSection.icon} />
+
+														{linkSection.pendingType ? (
+															<div className='link-wrapper'>
+																{linkSection.name}
+																{linkSection.pendingLength > 0 &&
+																	(linkSection.pendingType === 'warning' ? (
+																		<Icon
+																			iconName='triangle-exclamation'
+																			className='warning-icon'
+																			style='duotone'
+																		/>
+																	) : linkSection.pendingType === 'badge' ? (
+																		<span className='badge'>
+																			{linkSection.pendingLength}
+																		</span>
+																	) : null)}
+															</div>
+														) : (
+															linkSection.name
+														)}
+													</button>
+												</>
 											)}
 										</li>
-									</ul>
-								),
-							)}
+									),
+								)}
+							</ul>
 						</div>
 					))}
 				</div>
@@ -160,13 +185,14 @@ Sidebar.propTypes = {
 	setShow: PropTypes.func, // Add setShow prop for controlling visibility
 	onNavigate: PropTypes.func.isRequired, // Nueva prop para manejar la navegación
 	selectedClient: PropTypes.object,
-	showClients:PropTypes.oneOf([true, false, 'single']),
+	showClients: PropTypes.oneOf([true, false, 'single']),
 	setGroovinProfile: PropTypes.func,
 	inModal: PropTypes.bool,
 	customUrl: PropTypes.oneOfType([
 		PropTypes.string,
-		PropTypes.oneOf([undefined])
-	  ]),
+		PropTypes.oneOf([undefined]),
+	]),
+	pendingType: PropTypes.oneOf(['warning', 'badge']),
 };
 
 export default Sidebar;

package/src/stories/DropdownMultiSelect.stories.jsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import DropdownMultiSelect from '../components/Dropdowns/DropdownMultiSelect';
 
 export default {
-    title: 'Dropdown/DropdownMultiSelect',
-  	component: DropdownMultiSelect,
+	title: 'Dropdown/DropdownMultiSelect',
+	component: DropdownMultiSelect,
 };
 
 const Template = (args) => {
@@ -15,12 +15,12 @@ const Template = (args) => {
 	/* ========== */
 	/* OPCION 1 - Opciones y valores seleccionados son array de objetos */
 	const filters = [
-		{ id: 1, name: 'Filter 1', showStatus: '1' },
-		{ id: 2, name: 'Filter 2', showStatus: '0' },
-		{ id: 3, name: 'Filter 3', showStatus: '1' },
-		{ id: 4, name: 'Filter 4', showStatus: '0' },
-		{ id: 5, name: 'Filter 5', showStatus: '0' },
-		{ id: 6, name: 'Filter 6', showStatus: '2' },
+		{ id: 1, name: 'Filter 1', showStatus: '1', name1: 'loreal' },
+		{ id: 2, name: 'Filter 2', showStatus: '0', name1: 'jabon' },
+		{ id: 3, name: 'Filter 3', showStatus: '1', name1: 'blue' },
+		{ id: 4, name: 'Filter 4', showStatus: '0', name1: 'name' },
+		{ id: 5, name: 'Filter 5', showStatus: '0', name1: 'name' },
+		{ id: 6, name: 'Filter 6', showStatus: '2', name1: 'name' },
 	];
 	const [selectedValues, setSelectedValues] = useState([]);
 	/* ========== */
@@ -35,11 +35,12 @@ const Template = (args) => {
 		'Filter 5',
 	];
 	const [selectedStringValues, setSelectedStringValues] = useState([]);
+
+	/* const list= ['palabra1', 'palabra2']  */
 	/* =========== */
 
 	return (
 		<>
-			{/* OPCION 1 */}
 			<DropdownMultiSelect
 				{...args}
 				values={filters}
@@ -49,32 +50,21 @@ const Template = (args) => {
 				onToggle={handleToggle}
 				object={true}
 				nameKey='name'
+				nameKey1='name1'
 				idKey={'id'}
 				inputLabel={'Filters (array de objetos)'}
 				focus={show}
-				hasId={true}
+				hasId={false}
 				errorRequired={errorRequired}
 				setErrorRequiered={setErrorRequired}
 				validate={true}
+				disableHash={true}
+				overflow={true}
 			/>
-			<button className='my-3' onClick={() => setErrorRequired(true)}>Validate</button>
-
 
-			{/* OPCION 2 */}
-			<DropdownMultiSelect
-				{...args}
-				values={stringFilters}
-				valuesSelected={selectedStringValues}
-				setValuesSelected={setSelectedStringValues}
-				show={show}
-				onToggle={handleToggle}
-				object={false}
-				nameKey='name'
-				idKey={'id'}
-				inputLabel={'Filters (array de strings)'}
-				focus={show}
-				hasId={true}
-			/>
+			<button className='my-3' onClick={() => setErrorRequired(true)}>
+				Validate
+			</button>
 		</>
 	);
 };

package/src/stories/Sidebar.stories.jsx

@@ -1,4 +1,4 @@
-import React, { Children } from 'react';
+import React, { Children, useState } from 'react';
 import { Sidebar } from '../components/Navigation';
 
 export default {
@@ -12,12 +12,29 @@ const Template = (args) => {
 		{
 			title: 'Main menu', // section.title
 			links: [
-				
 				{
-					name: 'Home',
-					icon: 'home', 
+					name: 'Campaings',
+					icon: 'home',
 					url: '/home',
 					children: [],
+					pendingLength: 5, // explanation(number) Pass the length of the array from the relevant endpoint data, for example, if there are pending campaigns.
+									  // Not required, only if you want to display a type of pendingType ('warning' or 'badge').
+					pendingType: 'warning',
+				},
+				{
+					name: 'Reports',
+					icon: 'home',
+					url: '/home',
+					children: [
+						/* {
+							name: 'Item 1',
+							icon: 'home', 
+							url: '/home',
+							children: [],
+						}, */
+					],
+					pendingLength: 5,
+					pendingType: 'badge',
 				},
 			],
 		},
@@ -26,7 +43,7 @@ const Template = (args) => {
 			links: [
 				{
 					name: 'Impressions',
-					icon: 'table', 
+					icon: 'table',
 					url: '',
 					children: [
 						{
@@ -44,6 +61,14 @@ const Template = (args) => {
 							name: 'Monthly impressions by...',
 							url: '/impressions',
 						},
+						{
+							name: '2Monthly impressions by...',
+							url: '/2impressions',
+						},
+						{
+							name: '3Monthly impressions by...',
+							url: '/3impressions',
+						},
 					],
 				},
 			],
@@ -117,7 +142,7 @@ const Template = (args) => {
 		php_session_id: 'u7o2br84i92jmfkdrqen10ngp1',
 		is_api2_login: true,
 	};
-	
+
 	return (
 		<div className='container-fluid'>
 			<Sidebar

package/version.js

@@ -0,0 +1,8 @@
+import packageJson from './package.json';
+
+if (typeof window !== 'undefined') {
+  window.GroovinUI = {
+    version: packageJson.version,
+  };
+}
+export default packageJson.version;