groovinads-ui 1.2.68 → 1.2.69

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

package/src/components/Dropdowns/DropdownMultiSelect.jsx

@@ -33,7 +33,12 @@ 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);
 
@@ -41,6 +46,7 @@ const DropdownMultiSelect = ({
 
 	const { highlightText } = useTextFormatter();
 
+	// FUNCTIONS
 	const handleCheckbox = (status, value) => {
 		const i = values.findIndex(
 			(item) =>
@@ -67,17 +73,14 @@ const DropdownMultiSelect = ({
 
 	const valuesFromSearch = () =>
 		values.filter(
-			(item) =>
-				(object ? `${item[idKey]} ${item[nameKey]}` : item)
-					.toLowerCase()
-					.includes(query.toLowerCase()) &&
-				(showStatus ? parseInt(item.status) === parseInt(showStatus) : true),
-		);
-
-	useEffect(() => {
-		setInnerShow(show);
-	}, [show]);
+		(item) =>
+			(object ? `${item[idKey]} ${item[nameKey]}` : item)
+				.toLowerCase()
+				.includes(query.toLowerCase()) &&
+			(showStatus ? parseInt(item.status) === parseInt(showStatus) : true),
+	);
 
+	
 	const handleClickOutside = useCallback((event) => {
 		if (
 			dropdownRef?.current &&
@@ -88,7 +91,20 @@ const DropdownMultiSelect = ({
 			setShow(false);
 		}
 	}, []);
-
+	
+	// VALIDATION REQUIRED
+	const validateRequired = () => {
+		if (!valuesSelected.length) {
+			setTimeout(() => {
+				setErrorRequiered((prev) => !prev);
+			}, 2000);
+		}
+	};
+	
+	useEffect(() => {
+		setInnerShow(show);
+	}, [show]);
+	
 	useEffect(() => {
 		document.addEventListener('click', handleClickOutside);
 		return () => {
@@ -96,6 +112,9 @@ const DropdownMultiSelect = ({
 		};
 	}, []);
 
+	useEffect(() => {
+		if (validate && errorRequired) validateRequired();
+	}, [validate, errorRequired]);
 	return (
 		<Dropdown
 			className={className}
@@ -104,14 +123,15 @@ const DropdownMultiSelect = ({
 			ref={dropdownRef}
 			onToggle={onToggle}
 			drop={drop}
+			data-error={requiredText}
 		>
 			<Dropdown.Toggle
 				as={'div'}
-				className={`btn btn-${buttonVariant} w-100 ${nowrap ? 'nowrap' : ''}`}
+				className={`btn btn-${buttonVariant} w-100 ${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' && (
@@ -235,6 +255,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/stories/DropdownMultiSelect.stories.jsx

@@ -8,6 +8,8 @@ export default {
 
 const Template = (args) => {
 	const [show, setShow] = useState(false);
+	const [errorRequired, setErrorRequired] = useState(false);
+
 	const handleToggle = () => setShow((prevShow) => !prevShow);
 
 	/* ========== */
@@ -51,7 +53,12 @@ const Template = (args) => {
 				inputLabel={'Filters (array de objetos)'}
 				focus={show}
 				hasId={true}
+				errorRequired={errorRequired}
+				setErrorRequiered={setErrorRequired}
+				validate={true}
 			/>
+			<button className='my-3' onClick={() => setErrorRequired(true)}>Validate</button>
+
 
 			{/* OPCION 2 */}
 			<DropdownMultiSelect

package/src/stories/Navbar.stories.jsx

@@ -1,21 +1,24 @@
-import React from "react";
-import Navbar from "../components/Navigation/Navbar";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import React, { useState } from 'react';
+import Navbar from '../components/Navigation/Navbar';
 
 export default {
-  title: "Navigation/Navbar",
-  component: Navbar,
+	title: 'Navigation/Navbar',
+	component: Navbar,
 };
 
 const Template = (args) => {
-  return (
-    <Navbar {...args}></Navbar>
-/*     <BrowserRouter>
+	return (
+		<Navbar
+			{...args}
+			showDeckMenu={true}
+			showUserMenu={true}
+		></Navbar>
+		/*     <BrowserRouter>
       <Routes>
         <Route path="*" element={<Navbar {...args}></Navbar>} />
       </Routes>
     </BrowserRouter> */
-  );
+	);
 };
 
 export const Default = Template.bind({});