groovinads-ui 1.2.75 → 1.9.0

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

@@ -1,171 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// SERVICES
-import { ComponentsService } from '../../../services';
-import { Dropdown } from 'react-bootstrap';
-
-// COMPONENTS
-import Input from '../../Inputs/Input';
-import Icon from '../../Labels/Icon';
-
-const DropdownClients = ({ profileSelectedClient }) => {
-	const [generalSkeleton, setGeneralSkeleton] = useState(false);
-
-	const [showDropdownSkeleton, setshowDropdownSkeleton] = useState(false);
-
-	const { id_client, client_name, email } = profileSelectedClient;
-	const initial_client = { id_client, client_name, email };
-
-	const [clientsList, setClientsList] = useState([]);
-	const [searchInput, setSearchInput] = useState('');
-	const [selectedClient, setSelectedClient] = useState(initial_client);
-
-	const [dropdownOpen, setDropdownOpen] = useState(false);
-
-	const clientInitials = selectedClient?.client_name?.slice(0, 2);
-	const toggleDropdown = () => setDropdownOpen((prev) => !prev);
-
-	const fetchClientsData = async () => {
-		try {
-			setshowDropdownSkeleton(true);
-			const clientsList = await ComponentsService.getClientsList();
-
-			setClientsList(clientsList);
-			setshowDropdownSkeleton(false);
-		} catch (error) {
-			console.error('fetchClientsData error', error);
-		}
-	};
-
-	const filterClients = () => {
-		return clientsList.filter(
-			({ client_name, id_client, email }) =>
-				`${client_name} ${id_client}`
-					.toLowerCase()
-					.includes(searchInput.toLowerCase()) ||
-				email?.toLowerCase()?.includes(searchInput?.toLowerCase()),
-		);
-	};
-
-	const changeClient = async (client) => {
-		try {
-			setGeneralSkeleton(true);
-			setshowDropdownSkeleton(true);
-
-			await ComponentsService.clientsLogin(client.id_client);
-
-			setSelectedClient(client);
-
-			// Check if current url ends with '/', if not, add it and redirect to that url
-			// If it currently ends with '/', just reload that url
-			if (window.location.href.slice(-1) !== '/')
-				window.location.replace(window.location.href + '/');
-			else window.location.reload();
-		} catch (error) {
-			console.error(' error en ClientsDropdowns ', error);
-		}
-	};
-
-	useEffect(() => {
-		fetchClientsData();
-	}, []);
-
-	return (
-		<>
-			{showDropdownSkeleton || generalSkeleton ? (
-				<div className='bottom-list loading'>
-					<div className='dropdown-clients'>
-						<div className='client-logo load'></div>
-						<div className='dropdown-clients-wrapper load-paragraph w-75'>
-							<div className='load text small mb-0'></div>
-							<div className='load text small mb-0'></div>
-						</div>
-					</div>
-				</div>
-			) : (
-				<div className='bottom-list'>
-					<Dropdown
-						drop='up'
-						className='dropdown-clients'
-						show={clientsList.length <= 1 ? false : dropdownOpen}
-						onToggle={toggleDropdown}
-					>
-						<Dropdown.Toggle variant='client-selector' onClick={toggleDropdown}>
-							{/* Logo cliente. Si no tiene logo, usar el genérico generado. Ver JS en la parte inferior */}
-							{selectedClient ? (
-								<div className='client-logo'>
-									<p>{clientInitials}</p>
-								</div>
-							) : (
-								<img src='/react.svg' alt='' className='client-logo' />
-							)}
-
-							<div className='dropdown-clients-wrapper'>
-								<p className='dropdown-client-name'>
-									{selectedClient?.client_name || 'Client name'} [
-									{selectedClient?.id_client}]
-								</p>
-								<p className='dropdown-client-email'>
-									{selectedClient?.email || 'Client Email'}
-								</p>
-							</div>
-							{clientsList.length > 1 ? (
-								<Icon
-									style={'solid'}
-									iconName={'chevron-up'}
-									scale={1}
-									className={'icon caret'}
-								/>
-							) : (
-								<></>
-							)}
-						</Dropdown.Toggle>
-						<Dropdown.Menu>
-							<Dropdown.Item as={'div'} onClick={(e) => e.stopPropagation()}>
-								<Input
-									size={'xs'}
-									label={'Search client'}
-									icon={'magnifying-glass'}
-									className='w-100'
-									value={searchInput}
-									onChange={(e) => setSearchInput(e.target.value)}
-								/>
-							</Dropdown.Item>
-							<Dropdown.Item as={'ul'} className='client-list'>
-								{filterClients().length ? (
-									filterClients().map((client) => (
-										<li
-											className='client'
-											key={client.id_client}
-											onClick={() => changeClient(client)}
-										>
-											<p className='dropdown-client-name'>
-												{client.client_name} [{client.id_client}]
-											</p>
-											<p className='dropdown-client-email'>{client.email}</p>
-										</li>
-									))
-								) : (
-									<li>
-										<div className='empty-space'>
-											<img
-												src={'https://ui.groovinads.com/assets/not-found.svg'}
-												alt='Sad magnifier on abstract background'
-											/>
-											<div className='empty-space-text-wrapper'>
-												<h5 className='mb-1'>Client not found</h5>
-												<p>It looks like this client does not exist.</p>
-											</div>
-										</div>
-									</li>
-								)}
-							</Dropdown.Item>
-						</Dropdown.Menu>
-					</Dropdown>
-				</div>
-			)}
-		</>
-	);
-};
-
-export default DropdownClients;

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

@@ -1,69 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// BOOTSTRAP
-import Dropdown from 'react-bootstrap/Dropdown';
-
-// COMPONENTS
-import Icon from '../../Labels/Icon';
-
-// SERVICES
-import { ComponentsService } from '../../../services';
-
-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) => {
-
-			const { google_name: fullNameAuth, google_picture: imageAuth } = resp?.auth_data;
-
-			const splitFullNameAuth = fullNameAuth?.split(' ');
-			const nameAuth = splitFullNameAuth ? splitFullNameAuth[0] : undefined;
-
-			setGroovinProfile({imageAuth, nameAuth})
-
-		}).catch((error) => {
-			console.log('Error', error);
-		})
-	}, []);
-
-	return (
-		<Dropdown>
-			<Dropdown.Toggle className='btn btn-user'>
-				<div className='avatar'>
-					{/* Imagen de perfil */}
-					<img src={groovinProfile.imageAuth} />
-				</div>
-				{/* Nombre */}
-				<span>{groovinProfile.nameAuth}</span>
-				<Icon
-					style={'solid'}
-					iconName={'chevron-down'}
-					scale={1}
-					className={'icon caret'}
-				/>
-			</Dropdown.Toggle>
-			<Dropdown.Menu as={'ul'} align={'end'}>
-				<Dropdown.Item as={'li'}
-					onClick={handleLogout}
-				>
-					<Icon
-						iconName={'right-from-bracket'}
-					/>
-					<span>Logout</span>
-				</Dropdown.Item>
-			</Dropdown.Menu>
-		</Dropdown>
-	);
-};
-
-export default UserDropdown;

package/src/components/Navigation/Dropdowns/index.js

@@ -1,5 +0,0 @@
-import DeckDropdown from './DeckDropdown';
-import UserDropdown from './UserDropdown';
-import DropdownClients from './DropdownClient';
-
-export { DeckDropdown, UserDropdown, DropdownClients }

package/src/components/Navigation/Navbar.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// BOOTSTRAP
-import Container from 'react-bootstrap/Container';
-
-// COMPONENTS
-import { DeckDropdown, UserDropdown } from './Dropdowns';
-import { Button } from '../Button';
-
-// ASSETS
-const appLogo = 'https://ui.groovinads.com/assets/groovinads-logo.svg';
-
-const Navbar = ({
-	logoUrl,
-	showDeckMenu = false,
-	showUserMenu = false,
-	children,
-	show,
-	setShow,
-}) => {
-
-	return (
-		<div id='ga-header' className='header fixed-top shadow-2'>
-			<Container fluid className='navbar'>
-				<div className='brand-wrapper'>
-					{/* Sidebar collapse */}
-					<Button
-						className={show ? 'sidebar-toggler' : 'sidebar-toggler collapsed'} // Necesito que agreguen o quiten la clase 'collapsed' para que el icono cambie
-						variant='terciary'
-						type='button'
-						onClick={() => setShow((prev) => !prev)}
-					>
-						<svg
-							className='icon'
-							xmlns='http://www.w3.org/2000/svg'
-							viewBox='0 0 16 16'
-						>
-							<path
-								className='top'
-								d='M1,3c0-.55.45-1,1-1h12c.55,0,1,.45,1,1s-.45,1-1,1H2c-.55,0-1-.45-1-1Z'
-							/>
-							<path
-								className='mid'
-								d='M1,8c0-.55.45-1,1-1h12c.55,0,1,.45,1,1s-.45,1-1,1H2c-.55,0-1-.45-1-1Z'
-							/>
-							<path
-								className='bottom'
-								d='M15,13c0,.55-.45,1-1,1H2c-.55,0-1-.45-1-1s.45-1,1-1h12c.55,0,1,.45,1,1Z'
-							/>
-						</svg>
-					</Button>
-					{/* Dropdown apps */}
-					 {/* TODO: conditional */}
-					{showDeckMenu && <DeckDropdown />}
-
-					<img
-						src={logoUrl || appLogo}
-						className='ga-logo'
-						alt='Groovinads logo'
-					/>
-				</div>
-				{(children || showUserMenu) && (
-					<div className='nav-wrapper'>
-						{children}
-						{showUserMenu && <UserDropdown />}
-					</div>
-				)}
-			</Container>
-		</div>
-	);
-};
-
-Navbar.propTypes = {
-	logoUrl: PropTypes.string,
-	showDeckMenu: PropTypes.bool,
-	showUserMenu: PropTypes.bool,
-	children: PropTypes.node,
-};
-
-export default Navbar;

package/src/components/Navigation/Sidebar.jsx

@@ -1,201 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Collapse } from 'react-bootstrap';
-import { useMediaQuery } from 'react-responsive';
-
-// SERVICES
-import { ComponentsService } from '../../services';
-
-// PROP TYPES
-import PropTypes from 'prop-types';
-
-// COMPONENTES
-import { Icon } from '../Labels';
-import { DropdownClients } from './Dropdowns';
-
-const Sidebar = ({
-	api,
-	customLinks,
-	defaultOpened = true,
-	show,
-	setShow,
-	onNavigate,
-	selectedClient,
-	showClients = false,
-	setGroovinProfile,
-	inModal = false,
-	customUrl,
-}) => {
-	const isMobile = inModal
-		? true
-		: useMediaQuery({ query: '(max-width: 992px)' });
-
-	const url = customUrl !== undefined ? customUrl : window.location.pathname; // to get current url
-
-	const [sidebarLinks, setSidebarLinks] = useState([]);
-	const [openIndex, setOpenIndex] = useState(null);
-	const [innerShow, setInnerShow] = useState(isMobile ? false : defaultOpened);
-
-	const sidebarRef = useRef(null);
-	const firstOpen = useRef(true);
-
-	const handleToggle = (index) => {
-		setOpenIndex(openIndex === index ? null : index);
-	};
-
-	const fetchData = async () => {
-		const resp = await ComponentsService.getInfo(api);
-		setSidebarLinks(resp);
-	};
-
-	useEffect(() => {
-		if (api) fetchData();
-	}, [api]);
-
-	useEffect(() => {
-		setInnerShow(firstOpen.current ? defaultOpened : show);
-	}, [show]);
-
-	useEffect(() => {
-		if (isMobile && setShow && !inModal) setShow(innerShow);
-		if (!inModal)
-			setInnerShow(isMobile ? false : firstOpen.current ? defaultOpened : show);
-		firstOpen.current = false;
-	}, []);
-
-	return (
-		<Collapse in={innerShow} dimension={'width'}>
-			<nav id='sidebarMenu' className='sidebar' ref={sidebarRef}>
-				{!inModal ? (
-					<div className='position-relative d-none d-lg-block'>
-						<button
-							className='collapse-button'
-							// Toggle the sidebar
-							onClick={() => {
-								setInnerShow((prev) => !prev);
-								setShow(!show);
-							}}
-						>
-							<Icon className='collapse-icon' iconName='chevron-left' />
-						</button>
-					</div>
-				) : (
-					<></>
-				)}
-
-				{/* SECTIONS */}
-				<div className='scroll'>
-					{customLinks.map((section, i) => (
-						<div className='sidebar-section' key={`sectionIndex${i}`}>
-							{section.title ? <h4>{section.title}</h4> : <></>}
-
-							{/* PROPS LINKS */}
-
-							<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 ? (
-												<>
-													<button
-														className={`btn-toggle ${
-															openIndex !== `${i}.${y}` ? 'collapsed' : ''
-														}`}
-														onClick={() => handleToggle(`${i}.${y}`)}
-														aria-controls='example-collapse-text'
-														aria-expanded={openIndex === `${i}.${y}`}
-													>
-														<Icon iconName={linkSection.icon} />
-														{linkSection.name}
-													</button>
-
-													{/* COLLAPSE */}
-													<Collapse in={openIndex === `${i}.${y}`}>
-														<ul className='btn-toggle-nav'>
-															{linkSection.children.map((childSection, x) => (
-																<li key={`childSectionIndex${x}`}>
-																	<button
-																		className={`nav-link ${
-																			url === childSection.url ? 'active' : ''
-																		}`}
-																		onClick={() => onNavigate(childSection.url)}
-																	>
-																		{childSection.name}
-																	</button>
-																</li>
-															))}
-														</ul>
-													</Collapse>
-												</>
-											) : (
-												<>
-													<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>
-						</div>
-					))}
-				</div>
-				{showClients ? (
-					<DropdownClients
-						profileSelectedClient={selectedClient}
-						showClients={showClients}
-						setGroovinProfile={setGroovinProfile}
-					/>
-				) : (
-					<></>
-				)}
-			</nav>
-		</Collapse>
-	);
-};
-
-Sidebar.propTypes = {
-	api: PropTypes.string,
-	customLinks: PropTypes.array.isRequired,
-	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
-	selectedClient: PropTypes.object,
-	showClients: PropTypes.oneOf([true, false, 'single']),
-	setGroovinProfile: PropTypes.func,
-	inModal: PropTypes.bool,
-	customUrl: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.oneOf([undefined]),
-	]),
-	pendingType: PropTypes.oneOf(['warning', 'badge']),
-};
-
-export default Sidebar;

package/src/components/Navigation/Stepper.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Stepper = ({
-	list,
-	current
-}) => {
-	return <ol className='stepper'>
-		{list.map((step, index) => {
-			return <li key={'Stepper' + index} className={current === index ? 'current' : ''}>
-				<span>{step}</span>
-			</li>;
-		})}
-	</ol>;
-};
-
-Stepper.propTypes = {
-	list: PropTypes.array.isRequired,
-	current: PropTypes.number.isRequired
-};
-
-export default Stepper;

package/src/components/Navigation/Tabnav.jsx

@@ -1,73 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Nav } from 'react-bootstrap';
-
-// COMPONENTS
-import { Icon } from '../Labels';
-
-// HOOKS
-import useTextFormatter from '../../hooks/useTextFormatter';
-
-function Tabnav({
-	tabs = [],
-	activeTab = 1,
-	navigateTab = false,
-	setActiveTab,
-	onNavigate,
-}) {
-	const { toCamelCase } = useTextFormatter();
-
-	// initial activeTab (in case it's not sent, it has a default value)
-	const [activeTabState, setActiveTabState] = useState(activeTab);
-
-	const handleSelect = (k) => {
-		if (navigateTab) {
-			const tab = tabs.find((tab) => toCamelCase(tab.tab) === k);
-			onNavigate(tab.url);
-		} else {
-			const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k) + 1;
-			setActiveTab ? setActiveTab(tabIndex) : setActiveTabState(tabIndex);
-		}
-	};
-
-	const formatTabsName = (tab) => {
-		if (tab === 'api_keys') return 'API Keys';
-
-		const tabReplace = tab.replace('_', ' ');
-		return tabReplace.charAt(0).toUpperCase() + tabReplace.slice(1);
-	};
-
-	useEffect(() => {
-		setActiveTabState(activeTab);
-	}, [activeTab]);
-
-	return (
-		<Nav
-			variant='tabs'
-			activeKey={toCamelCase(tabs[activeTabState - 1]?.tab)}
-			onSelect={handleSelect}
-		>
-			{(tabs || [])?.map(({ tab, badgeNumber, warningIcon }, index) => {
-				return (
-					<Nav.Item key={`tabs.tab: ${index}`}>
-						<Nav.Link eventKey={toCamelCase(tab)}>
-							{warningIcon && <Icon iconName='triangle-exclamation' />}
-							{formatTabsName(tab)}
-							{badgeNumber && <span className='tab-badge'>{badgeNumber}</span>}
-						</Nav.Link>
-					</Nav.Item>
-				);
-			})}
-		</Nav>
-	);
-}
-
-Tabnav.propTypes = {
-	tabs: PropTypes.array.isRequired,
-	activeTab: PropTypes.number,
-	customFunction: PropTypes.bool,
-	navigateTab: PropTypes.bool,
-	setExternalTab: PropTypes.func,
-};
-
-export default Tabnav;

package/src/components/Navigation/index.js

@@ -1,6 +0,0 @@
-import Navbar from './Navbar';
-import Stepper from './Stepper';
-import Tabnav from './Tabnav';
-import Sidebar from './Sidebar';
-
-export { Navbar, Stepper, Tabnav, Sidebar }

package/src/components/Toasts/Toast/ToastCardComponent.jsx

@@ -1,47 +0,0 @@
-import React, { children, useState } from 'react';
-import Toast from 'react-bootstrap/Toast';
-import { Icon } from '../../Labels';
-
-function ToastCardComponent({ variant, autoClose, children, className, position }) {
-	const [show, setShow] = useState(true);
-
-	const toggleShow = () => setShow(!show);
-
-	const variantIcons = {
-		info: 'circle-info',
-		success: 'circle-check',
-		warning: 'triangle-exclamation',
-		error: 'circle-xmark',
-	};
-
-	return (
-		<Toast
-			onClose={toggleShow}
-			show={show}
-			delay={autoClose ? 3500 : null}
-			autohide={autoClose}
-			className={`${position} ${variant} ${className ? className : ''}`}
-		>
-			<Toast.Body>
-				<div className='toast-wrapper'>
-					<div className='toast-type'>
-						<Icon
-							style={'solid'}
-							iconName={variantIcons[variant]}
-							scale={1}
-							className={'icon'}
-						/>
-					</div>
-					<span>{children}</span>
-				</div>
-				{!autoClose && (
-					<button className='btn-close' onClick={toggleShow}>
-						<Icon style={'solid'} iconName={'xmark'} scale={1} />
-					</button>
-				)}
-			</Toast.Body>
-		</Toast>
-	);
-}
-
-export default ToastCardComponent;