groovinads-ui 1.2.68 → 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.68",
+	"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,
@@ -33,14 +34,22 @@ const DropdownMultiSelect = ({
 	buttonVariant = 'input',
 	nowrap = false,
 	hasId = true,
+	validate = false,
+	requiredText = 'required',
+	errorRequired = false,
+	setErrorRequiered,
 }) => {
+	// STATES
 	const [query, setQuery] = useState('');
 	const [innerShow, setInnerShow] = useState(!!show);
 
 	const dropdownRef = useRef(null);
+	const toggleRef = useRef(null);
+	const menuRef = useRef(null);
 
 	const { highlightText } = useTextFormatter();
 
+	// FUNCTIONS
 	const handleCheckbox = (status, value) => {
 		const i = values.findIndex(
 			(item) =>
@@ -68,16 +77,12 @@ const DropdownMultiSelect = ({
 	const valuesFromSearch = () =>
 		values.filter(
 			(item) =>
-				(object ? `${item[idKey]} ${item[nameKey]}` : item)
+				(object ? `${item[idKey]} ${item[nameKey]} ${item[customKey]}` : item)
 					.toLowerCase()
 					.includes(query.toLowerCase()) &&
 				(showStatus ? parseInt(item.status) === parseInt(showStatus) : true),
 		);
 
-	useEffect(() => {
-		setInnerShow(show);
-	}, [show]);
-
 	const handleClickOutside = useCallback((event) => {
 		if (
 			dropdownRef?.current &&
@@ -89,6 +94,19 @@ const DropdownMultiSelect = ({
 		}
 	}, []);
 
+	// VALIDATION REQUIRED
+	const validateRequired = () => {
+		if (!valuesSelected.length) {
+			setTimeout(() => {
+				setErrorRequiered((prev) => !prev);
+			}, 2000);
+		}
+	};
+
+	useEffect(() => {
+		setInnerShow(show);
+	}, [show]);
+
 	useEffect(() => {
 		document.addEventListener('click', handleClickOutside);
 		return () => {
@@ -96,6 +114,36 @@ 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}
@@ -104,14 +152,16 @@ const DropdownMultiSelect = ({
 			ref={dropdownRef}
 			onToggle={onToggle}
 			drop={drop}
+			data-error={requiredText}
 		>
 			<Dropdown.Toggle
 				as={'div'}
-				className={`btn btn-${buttonVariant} w-100 ${nowrap ? 'nowrap' : ''}`}
+				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
-					setShow((prevShow) => !prevShow); // Alterna el estado del dropdown en el estado externo también
+					// setShow((prevShow) => !prevShow); // Alterna el estado del dropdown en el estado externo también
 				}}
 			>
 				{valuesSelected.length > 0 && buttonVariant === 'input' && (
@@ -127,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>
 							);
 						})}
@@ -145,6 +201,7 @@ const DropdownMultiSelect = ({
 
 			<Dropdown.Menu
 				className='w-100'
+				ref={menuRef}
 				popperConfig={
 					overflow
 						? {
@@ -188,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,
 										)}
@@ -222,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,
@@ -235,6 +295,10 @@ DropdownMultiSelect.propTypes = {
 	]),
 	nowrap: PropTypes.bool,
 	hasId: PropTypes.bool,
+	requiredText: PropTypes.string,
+	validate: PropTypes.bool,
+	errorRequired: PropTypes.bool,
+	setErrorRequiered: PropTypes.func,
 };
 
 export default DropdownMultiSelect;

package/src/components/Inputs/Input.jsx

@@ -149,6 +149,7 @@ Input.propTypes = {
 	autoFocus: PropTypes.bool,
 	min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	maxLength: PropTypes.number,
 };
 
 export default Input;

package/src/components/Inputs/InputEmail.jsx

@@ -31,7 +31,6 @@ const InputEmail = ({
 	// GET, Returns a list of emails
 	const fetchNotifications = async () => {
 		const resp = await ComponentsService.getInfo(apiGetEmail);
-		console.log('resp', resp);
 		setNotifications(resp || []);
 		
 	};

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

@@ -22,7 +22,6 @@ const DeckDropdown = () => {
 				element.app_icon_sm = element.application_icon;
 				element.app_name = element.application_name;
 			});
-
 			setApplications(resp);
 		} catch (error) {
 			console.error('fetchData error', error);
@@ -52,10 +51,8 @@ const DeckDropdown = () => {
 
 	const favApp = async (identification) => {
 		try {
-			const resp = await ComponentsService.favApplication(identification);
-			//console.log('if ---->');
+			await ComponentsService.favApplication(identification);
 			setApplications((prev) => {
-				//console.log('setApplications ---->');
 				const index = prev.findIndex(
 					(element) => element?.id_application === identification,
 				);
@@ -69,141 +66,144 @@ const DeckDropdown = () => {
 
 	const unfavApp = async (identification) => {
 		try {
-			const resp = await ComponentsService.unfavApplication(identification);
-
-			if (resp.status === 204) {
-				setApplications((prev) => {
-					const index = prev.findIndex(
-						(element) => element?.id_application === identification,
-					);
-					prev[index].favorite = false;
-					return [...prev];
-				});
-			}
+			await ComponentsService.unfavApplication(identification);
+
+			setApplications((prev) => {
+				const index = prev.findIndex(
+					(element) => element?.id_application === identification,
+				);
+				prev[index].favorite = false;
+				return [...prev];
+			});
 		} catch (error) {
 			console.error('unfavApp error', error);
 		}
 	};
 
 	useEffect(() => {
-		if (applications?.length === 0) fetchData();
+		if (!applications?.length) fetchData();
 	}, []);
 
 	return (
-		<Dropdown>
-			<Dropdown.Toggle className='btn btn-terciary'>
-				<svg
-					id='deckApps'
-					xmlns='http://www.w3.org/2000/svg'
-					className='icon'
-					viewBox='0 0 16 16'
-				>
-					<g>
-						<rect x='1' y='1' width='4' height='4' rx='1.25' ry='1.25' />
-						<rect x='1' y='6' width='4' height='4' rx='1.25' ry='1.25' />
-						<rect x='1' y='11' width='4' height='4' rx='1.25' ry='1.25' />
-						<rect x='6' y='1' width='4' height='4' rx='1.25' ry='1.25' />
-						<rect x='6' y='6' width='4' height='4' rx='1.25' ry='1.25' />
-						<rect x='6' y='11' width='4' height='4' rx='1.25' ry='1.25' />
-						<rect x='11' y='1' width='4' height='4' rx='1.25' ry='1.25' />
-						<rect x='11' y='6' width='4' height='4' rx='1.25' ry='1.25' />
-						<rect x='11' y='11' width='4' height='4' rx='1.25' ry='1.25' />
-					</g>
-				</svg>
-			</Dropdown.Toggle>
-
-			<Dropdown.Menu as={'ul'}>
-				{applications?.filter((item) => item.favorite).length > 0 && (
-					<Dropdown.Item as={'li'}>
-						<h4 className='dropdown-header'>Favorites</h4>
-					</Dropdown.Item>
-				)}
-
-				{applications
-					.filter((item) => item.favorite)
-					.map((element, i) => {
-						return (
-							<Dropdown.Item key={i} as={'li'}>
-								<div
-									onClick={() => {
-										window.location.replace(
-											linkToApp(
-												element.application_url,
-												element.application_name,
-											),
-										);
-									}}
-									className='link-app'
-								>
-									<span className='icon-app'>
-										<Icon
-											style={'solid'}
-											iconName={element.app_icon_sm}
-											scale={1}
-										/>
-									</span>
-
-									<span>{element.app_name}</span>
-								</div>
-								<button
-									className='deck-fav'
-									onClick={(e) => {
-										e.stopPropagation();
-										unfavApp(element.id_application);
-									}}
-								>
-									<Icon style={'solid'} iconName={'star'} scale={1} />
-								</button>
+		<>
+			{applications.length ? (
+				<Dropdown>
+					<Dropdown.Toggle className='btn btn-terciary'>
+						<svg
+							id='deckApps'
+							xmlns='http://www.w3.org/2000/svg'
+							className='icon'
+							viewBox='0 0 16 16'
+						>
+							<g>
+								<rect x='1' y='1' width='4' height='4' rx='1.25' ry='1.25' />
+								<rect x='1' y='6' width='4' height='4' rx='1.25' ry='1.25' />
+								<rect x='1' y='11' width='4' height='4' rx='1.25' ry='1.25' />
+								<rect x='6' y='1' width='4' height='4' rx='1.25' ry='1.25' />
+								<rect x='6' y='6' width='4' height='4' rx='1.25' ry='1.25' />
+								<rect x='6' y='11' width='4' height='4' rx='1.25' ry='1.25' />
+								<rect x='11' y='1' width='4' height='4' rx='1.25' ry='1.25' />
+								<rect x='11' y='6' width='4' height='4' rx='1.25' ry='1.25' />
+								<rect x='11' y='11' width='4' height='4' rx='1.25' ry='1.25' />
+							</g>
+						</svg>
+					</Dropdown.Toggle>
+
+					<Dropdown.Menu as={'ul'}>
+						{applications?.filter((item) => item.favorite).length > 0 && (
+							<Dropdown.Item as={'li'}>
+								<h4 className='dropdown-header'>Favorites</h4>
 							</Dropdown.Item>
-						);
-					})}
-
-				{applications?.filter((item) => item.favorite).length > 0 &&
-					applications?.filter((item) => !item.favorite).length > 0 && (
-						<Dropdown.Divider as={'li'} />
-					)}
-
-				{applications
-					.filter((item) => !item.favorite)
-					.map((element, i) => {
-						return (
-							<Dropdown.Item key={i} as={'li'}>
-								<div
-									onClick={() => {
-										window.location.replace(
-											linkToApp(
-												element.application_url,
-												element.application_name,
-											),
-										);
-									}}
-									className='link-app'
-								>
-									<span className='icon-app'>
-										<Icon
-											style={'solid'}
-											iconName={element.app_icon_sm}
-											scale={1}
-										/>
-									</span>
-
-									<span>{element.app_name}</span>
-								</div>
-								<button
-									className='deck-fav'
-									onClick={(e) => {
-										e.stopPropagation();
-										favApp(element.id_application);
-									}}
-								>
-									<Icon style={'regular'} iconName={'star'} scale={1} />
-								</button>
-							</Dropdown.Item>
-						);
-					})}
-			</Dropdown.Menu>
-
-		</Dropdown>
+						)}
+
+						{applications
+							.filter((item) => item.favorite)
+							.map((element, i) => {
+								return (
+									<Dropdown.Item key={i} as={'li'}>
+										<div
+											onClick={() => {
+												window.location.replace(
+													linkToApp(
+														element.application_url,
+														element.application_name,
+													),
+												);
+											}}
+											className='link-app'
+										>
+											<span className='icon-app'>
+												<Icon
+													style={'solid'}
+													iconName={element.app_icon_sm}
+													scale={1}
+												/>
+											</span>
+
+											<span>{element.app_name}</span>
+										</div>
+										<button
+											className='deck-fav'
+											onClick={(e) => {
+												e.stopPropagation();
+												unfavApp(element.id_application);
+											}}
+										>
+											<Icon style={'solid'} iconName={'star'} scale={1} />
+										</button>
+									</Dropdown.Item>
+								);
+							})}
+
+						{applications?.filter((item) => item.favorite).length > 0 &&
+							applications?.filter((item) => !item.favorite).length > 0 && (
+								<Dropdown.Divider as={'li'} />
+							)}
+
+						{applications
+							.filter((item) => !item.favorite)
+							.map((element, i) => {
+								return (
+									<Dropdown.Item key={i} as={'li'}>
+										<div
+											onClick={() => {
+												window.location.replace(
+													linkToApp(
+														element.application_url,
+														element.application_name,
+													),
+												);
+											}}
+											className='link-app'
+										>
+											<span className='icon-app'>
+												<Icon
+													style={'solid'}
+													iconName={element.app_icon_sm}
+													scale={1}
+												/>
+											</span>
+
+											<span>{element.app_name}</span>
+										</div>
+										<button
+											className='deck-fav'
+											onClick={(e) => {
+												e.stopPropagation();
+												favApp(element.id_application);
+											}}
+										>
+											<Icon style={'regular'} iconName={'star'} scale={1} />
+										</button>
+									</Dropdown.Item>
+								);
+							})}
+					</Dropdown.Menu>
+				</Dropdown>
+			) : (
+				<></>
+			)}
+		</>
 	);
 };
 

package/src/components/Navigation/Navbar.jsx

@@ -18,7 +18,10 @@ const Navbar = ({
 	children,
 	show,
 	setShow,
+	applications,
+	setApplications,
 }) => {
+	
 	return (
 		<div id='ga-header' className='header fixed-top shadow-2'>
 			<Container fluid className='navbar'>
@@ -50,6 +53,7 @@ const Navbar = ({
 						</svg>
 					</Button>
 					{/* Dropdown apps */}
+					 {/* TODO: conditional */}
 					{showDeckMenu && <DeckDropdown />}
 
 					<img

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;