groovinads-ui 1.2.20 → 1.2.21

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.20",
+	"version": "1.2.21",
 	"keywords": [
 		"css",
 		"sass",
@@ -72,5 +72,8 @@
 		"sb": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
 		"build-lib": "rollup -c"
+	},
+	"dependencies": {
+		"react-datepicker": "^7.3.0"
 	}
 }

package/src/components/Dropdowns/DropdownComponent.jsx

@@ -16,10 +16,9 @@ const DropdownComponent = ({
 	align = 'start',
 	show,
 }) => {
-
 	const [Toggle, Menu] = children;
 
-	const modifiedToggle = {...Toggle, align}; // Al toggle le agrega el align
+	const modifiedToggle = { ...Toggle, align }; // Al toggle le agrega el align
 
 	const modifiedMenu = React.cloneElement(Menu, {
 		as: 'ul',
@@ -27,12 +26,16 @@ const DropdownComponent = ({
 		className: fullWidth ? 'w-100' : '',
 		popperConfig: overflow
 			? {
-				strategy: 'fixed',
-				onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll'))
-			}
+					strategy: 'fixed',
+					onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')),
+				}
 			: undefined,
-		children: Menu.props.children.map((child) => React.cloneElement(child, {as: 'li'}))}
-	);
+		children: Menu.props.children.length
+			? Menu.props.children.map((child) =>
+					React.cloneElement(child, { as: 'li' }),
+				)
+			: React.cloneElement(Menu.props.children, { as: 'li' }),
+	});
 
 	return (
 		<Dropdown

package/src/components/Dropdowns/DropdownFilter.jsx

@@ -86,7 +86,7 @@ const DropdownFilter = ({
 					/>
 				</div>
 				<div className='filter-values'>
-					{ valuesSelected.length == values.length ? 'All selected' : valuesSelected.length ? valuesSelected.join('; ') : 'None'}
+					{ valuesSelected.length === values.length ? 'All selected' : valuesSelected.length ? valuesSelected.join('; ') : 'None'}
 				</div>
 			</Dropdown.Toggle>
 			{!locked && (

package/src/components/Dropdowns/DropdownsDatePicker/DropdownDatePicker copy.jsx

@@ -0,0 +1,306 @@
+import React, { useEffect, useRef, useState } from 'react';
+import DatePicker from 'react-datepicker'; // https://reactdatepicker.com
+import PropTypes from 'prop-types';
+
+// COMPONENTS
+import { Icon } from '../../Labels';
+import DropdownComponent from '../DropdownComponent'
+import PeriodAndDetailDropdowns from './PeriodAndDetailDropdowns';
+
+const DropdownDatePicker = ({
+	datePicker1StartDate,
+	setDatePicker1StartDate,
+	datePicker1EndDate,
+	setDatePicker1EndDate,
+	datePicker2StartDate,
+	setDatePicker2StartDate,
+	datePicker2EndDate,
+	setDatePicker2EndDate,
+	tableQueryObj,
+	setTableQueryObj,
+	fetchData,
+	variant = 'input',
+	locked = false,
+}) => {
+	// eslint-disable-next-line no-unused-vars
+	const [compareDates, setCompareDates] = useState(false);
+	const [activeTab, setActiveTab] = useState(1);
+
+	/* 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. */
+	/* ========== STATE FOR DATEPCIKER 1 ========== */
+	const [DDStartDate1, setDDStartDate1] = useState(datePicker1StartDate);
+	const [DDEndDate1, setDDEndDate1] = useState(datePicker1EndDate);
+	const [DDStartDate2, setDDStartDate2] = useState(datePicker2StartDate);
+	const [DDEndDate2, setDDEndDate2] = useState(datePicker2EndDate);
+
+	const onChangeDDDate1 = (dates) => {
+		const [start, end] = dates;
+		setDDStartDate1(start);
+		setDDEndDate1(end);
+	};
+
+	/* State for dropdowns only visible when selecting 'compare dates' option */
+	const [DDPeriod1, setDDPeriod1] = useState('Custom range');
+	const [DDDetailLevel1, setDDDetailLevel1] = useState('Daily');
+
+	/* ========== STATE FOR DATEPICKER 2 ========== - DatePicker 2 is only visible when selecting 'compare dates' option */
+	const [DDStartDate2, setDDStartDate2] = useState(datePicker2StartDate);
+	const [DDEndDate2, setDDEndDate2] = useState(datePicker2EndDate);
+
+	const onChangeDDDate2 = (dates) => {
+		const [start, end] = dates;
+		setDDStartDate2(start);
+		setDDEndDate2(end);
+	};
+
+	/* State for dropdowns only visible when selecting 'compare dates' option */
+	const [DDPeriod2, setDDPeriod2] = useState('Custom range');
+	const [DDDetailLevel2, setDDDetailLevel2] = useState('Daily');
+
+	const dropdown = useRef(null);
+
+	const closeDropwdown = () => {
+		if (dropdown?.current?.className)
+			dropdown.current.className = 'dropdown-menu p-3 shadow-2';
+	};
+
+	const formatDate = (date) => {
+		if (!date) return undefined;
+		return date.toLocaleString('en-US', {
+			month: 'short',
+			day: '2-digit',
+			year: 'numeric',
+		});
+	};
+
+	const formatDateForQueryObj = (date) => {
+		if (!date) return undefined;
+
+		const year = date?.getFullYear();
+		const month = (1 + date?.getMonth())?.toString()?.padStart(2, '0');
+		const day = date?.getDate()?.toString()?.padStart(2, '0');
+
+		return `${year}-${month}-${day} 00:00:00`;
+	};
+
+	const updateDateFilters = () => {
+		const newQueryObj = { ...tableQueryObj };
+
+		// Update state stored in the DateFilters component
+		setDatePicker1StartDate(DDStartDate1);
+		if (DDEndDate1 === null) {
+			setDatePicker1EndDate(DDStartDate1);
+			newQueryObj.report_request.date_to = formatDateForQueryObj(DDStartDate1);
+		} else {
+			setDatePicker1EndDate(DDEndDate1);
+			newQueryObj.report_request.date_to = formatDateForQueryObj(DDEndDate1);
+		}
+		setDatePicker2StartDate(DDStartDate2);
+		setDatePicker2EndDate(DDEndDate2);
+
+		// Update tableDateFilterQuery object
+		if (DDStartDate1)
+			newQueryObj.report_request.date_from =
+				formatDateForQueryObj(DDStartDate1);
+
+		newQueryObj.report_request.id_period = 0;
+
+		setTableQueryObj(newQueryObj);
+
+		fetchData(newQueryObj);
+
+		closeDropwdown();
+	};
+
+	const isMobile = window?.innerWidth < 500;
+
+	// ========== HACK ========== - Remove unnecesary div generated by the library
+	const removeBugDiv = () =>
+		document?.querySelector('.react-datepicker__aria-live')?.remove();
+
+	useEffect(() => removeBugDiv(), []);
+
+	return (
+		<div className='dropdown dropdown-pills'>
+			{/* INPUT */}
+			<label className='dropdown-label' htmlFor='reportDatePicker'>
+				Period
+			</label>
+
+			{variant === 'input' ? (
+				<button
+					className='btn btn-input dropdown-toggle'
+					id='reportDatePicker'
+					type='button'
+					data-bs-toggle='dropdown'
+					aria-expanded='false'
+				>
+					{/* Start date */}
+					<span className='fw-bold highlighted'>
+						{formatDate(datePicker1StartDate)}
+					</span>
+					<span>to</span>
+					{/* End date */}
+					<span className='fw-bold highlighted'>
+						{formatDate(datePicker1EndDate)}
+					</span>
+					<i className='fa-solid fa-calendar-day'></i>
+				</button>
+			) : (
+				<DropdownComponent>
+					<div className='filter-heading'>
+						<div className='filter-title'>
+							<span>Date</span>
+							{locked && (
+								<Icon style={'solid'} iconName={'lock-keyhole'} scale={0.7} />
+							)}
+						</div>
+						<Icon
+							style={'solid'}
+							iconName={'angle-down'}
+							scale={1}
+							className='caret'
+						/>
+					</div>
+					<div className='filter-values'>
+						<span className='fw-bold highlighted'>
+							{formatDate(datePicker1StartDate)}
+						</span>
+						<span>to</span>
+						{/* End date */}
+						<span className='fw-bold highlighted'>
+							{formatDate(datePicker1EndDate)}
+						</span>
+					</div>
+				</DropdownComponent>
+			)}
+
+			{/* DROPDOWN */}
+			<div
+				className='dropdown-menu p-3 shadow-2'
+				onClick={(e) => e.stopPropagation()} // Prevent Dropdown from closing when clicking inside of it
+				ref={dropdown}
+			>
+				{compareDates && (
+					<>
+						{/* DATE TABS */}
+						<ul className='nav nav-tabs' id='dateComparisonTabs' role='tablist'>
+							<li
+								className='nav-item'
+								role='presentation'
+								onClick={() => setActiveTab(1)}
+							>
+								<button
+									className='nav-link active'
+									id='date1ComparisonTab'
+									data-bs-toggle='tab'
+									data-bs-target='#date1ComparisonTabPane'
+									type='button'
+									role='tab'
+									aria-controls='date1ComparisonTabPane'
+									aria-selected='true'
+								>
+									Date 1
+								</button>
+							</li>
+
+							<li
+								className='nav-item'
+								role='presentation'
+								onClick={() => setActiveTab(2)}
+							>
+								<button
+									className='nav-link'
+									id='date2ComparisonTab'
+									data-bs-toggle='tab'
+									data-bs-target='#date2ComparisonTabPane'
+									type='button'
+									role='tab'
+									aria-controls='date2ComparisonTabPane'
+									aria-selected='false'
+								>
+									Date 2
+								</button>
+							</li>
+						</ul>
+
+						{/* PERIOD AND DETAIL LEVEL DROPDOWNS */}
+						<PeriodAndDetailDropdowns
+							DDPeriod1={DDPeriod1}
+							setDDPeriod1={setDDPeriod1}
+							DDDetailLevel1={DDDetailLevel1}
+							setDDDetailLevel1={setDDDetailLevel1}
+							DDPeriod2={DDPeriod2}
+							setDDPeriod2={setDDPeriod2}
+							DDDetailLevel2={DDDetailLevel2}
+							setDDDetailLevel2={setDDDetailLevel2}
+						/>
+					</>
+				)}
+
+				{/* DATE PICKERS */}
+				{activeTab === 1 ? (
+					<DatePicker
+						className='form-control form-search'
+						selected={DDStartDate1}
+						onChange={onChangeDDDate1}
+						startDate={DDStartDate1}
+						endDate={DDEndDate1}
+						monthsShown={isMobile ? 1 : 2}
+						selectsRange
+						inline
+					/>
+				) : (
+					<DatePicker
+						className='form-control form-search'
+						selected={DDStartDate2}
+						onChange={onChangeDDDate2}
+						startDate={DDStartDate2}
+						endDate={DDEndDate2}
+						monthsShown={isMobile ? 1 : 2}
+						selectsRange
+						inline
+					/>
+				)}
+
+				<div className='d-flex flex-nowrap flex-column flex-md-row'>
+					<div className='d-flex justify-content-end gap-3 flex-column-reverse flex-md-row w-100'>
+						<button
+							className='btn btn-small btn-terciary'
+							onClick={() => closeDropwdown()}
+						>
+							Cancel
+						</button>
+
+						<button
+							className='btn btn-small'
+							//							disabled={!DDStartDate1 || !DDEndDate1} // Start and end dates must be selected
+							onClick={() => updateDateFilters()}
+						>
+							Set date
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+DropdownDatePicker.propTypes = {
+	datePicker1StartDate: PropTypes.instanceOf(Date),
+	setDatePicker1StartDate: PropTypes.func,
+	datePicker1EndDate: PropTypes.instanceOf(Date),
+	setDatePicker1EndDate: PropTypes.func,
+	datePicker2StartDate: PropTypes.instanceOf(Date),
+	setDatePicker2StartDate: PropTypes.func,
+	datePicker2EndDate: PropTypes.instanceOf(Date),
+	setDatePicker2EndDate: PropTypes.func,
+	tableQueryObj: PropTypes.object,
+	setTableQueryObj: PropTypes.func,
+	fetchData: PropTypes.func,
+	variant: PropTypes.oneOf(['input', 'filter']),
+	locked: PropTypes.bool,
+};
+
+export default DropdownDatePicker;

package/src/components/Dropdowns/DropdownsDatePicker/DropdownDatePicker.jsx

@@ -0,0 +1,320 @@
+import React, { Children, useEffect, useRef, useState } from 'react';
+import DatePicker from 'react-datepicker'; // https://reactdatepicker.com
+import PropTypes from 'prop-types';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+// COMPONENTS
+import { Icon } from '../../Labels';
+import { Button } from '../../Button';
+// import { Switch } from '../../Inputs';
+// import { Tabnav } from '../../Navigation';
+// import PeriodAndDetailDropdowns from './PeriodAndDetailDropdowns';
+
+// HOOKS
+import { useTextFormatter } from '../../../hooks';
+
+const DropdownDatePicker = ({
+	className = '',
+	variant = 'input',
+	show,
+	setShow,
+	onToggle,
+	inputLabel = 'period',
+	dateFrom,
+	setDateFrom,
+	dateTo,
+	setDateTo,
+	locked = false,
+	overflow = false,
+	onRemoveFilter,
+	fromDate1,
+	setFromDate1,
+	toDate1,
+	setToDate1,
+	fromDate2,
+	setFromDate2,
+	toDate2,
+	setToDate2,
+}) => {
+	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. */
+	/* ========== STATE FOR DATEPCIKER 1 ========== */
+	const [editingFromDate1, setEditingFromDate1] = useState(fromDate1);
+	const [editingToDate1, setEditingToDate1] = useState(toDate1);
+
+	const [editingFromDate2, setEditingFromDate2] = useState(fromDate2);
+	const [editingToDate2, setEditingToDate2] = useState(toDate2);
+
+	const [internalShow, setInternalShow] = useState(!!show);
+
+	const { capitalice } = useTextFormatter();
+
+	const dropdown = useRef(null);
+
+	const isMobile = window?.innerWidth < 500;
+
+	const onChangeDDDate1 = (dates) => {
+		const [start, end] = dates;
+		setEditingFromDate1(start);
+		setEditingToDate1(end);
+	};
+
+	const onChangeDDDate2 = (dates) => {
+		const [start, end] = dates;
+		setEditingFromDate2(start);
+		setEditingToDate2(end);
+	};
+
+	const internalToggle = () => {
+		setInternalShow((prevShow) => !prevShow);
+		try {
+			onToggle();
+		} catch (error) {}
+	};
+
+	const closeDropdown = () => {
+		setInternalShow(false);
+		try {
+			setShow(false);
+		} catch (error) {}
+	};
+
+	const updateDateFilters = () => {
+		setFromDate1(editingFromDate1);
+
+		if (editingToDate1 === null) {
+			setToDate1(editingFromDate1);
+		} else {
+			setToDate1(editingToDate1);
+		}
+		setFromDate2(fromDate2);
+		setToDate2(toDate2);
+
+		closeDropdown();
+	};
+
+	useEffect(() => {
+		setInternalShow(!!show);
+	}, [show]);
+
+	useEffect(() => {
+		console.log('internalShow', internalShow);
+	}, []);
+
+	return (
+		<Dropdown
+			show={internalShow}
+			className={`${variant === 'filter' ? 'dropdown-filter' : ''}`}
+		>
+			<Dropdown.Toggle
+				variant='toggle-filter'
+				onClick={internalToggle}
+				className={`${variant === 'input' ? 'btn btn-input' : ''}`}
+			>
+				{variant === 'input' ? (
+					<>
+						{(dateFrom || dateTo) && (
+							<span className={'wrapper'}>
+								<strong>{dateFrom}</strong> to <strong>{dateTo}</strong>
+							</span>
+						)}
+						<span className='label'>{capitalice(inputLabel)}</span>
+						<Icon iconName='calendar-day' />
+					</>
+				) : (
+					<>
+						<div className='filter-heading'>
+							<div className='filter-title'>
+								<span>{capitalice(inputLabel)}</span>
+								{locked && (
+									<Icon style={'solid'} iconName={'lock-keyhole'} scale={0.7} />
+								)}
+							</div>
+							<Icon
+								style={'solid'}
+								iconName={'angle-down'}
+								scale={1}
+								className='caret'
+							/>
+						</div>
+						<div className='filter-values'>
+							{dateFrom || dateTo ? (
+								<>
+									<strong>{dateFrom}</strong> to <strong>{dateTo}</strong>
+								</>
+							) : (
+								<>None</>
+							)}
+						</div>
+					</>
+				)}
+			</Dropdown.Toggle>
+			{variant === 'filter' && !locked && (
+				<Button
+					variant='terciary'
+					icon='xmark-circle'
+					size='md'
+					className='remove-filter'
+					onClick={onRemoveFilter}
+				/>
+			)}
+
+			<Dropdown.Menu
+				popperConfig={
+					overflow
+						? {
+								strategy: 'fixed',
+								onFirstUpdate: () =>
+									window.dispatchEvent(new CustomEvent('scroll')),
+							}
+						: undefined
+				}
+			>
+				<Dropdown.Item as={'div'}>
+					{compareDates && (
+						<>
+							{/* DATE TABS */}
+							{/* <ul
+								className='nav nav-tabs'
+								id='dateComparisonTabs'
+								role='tablist'
+							>
+								<li
+									className='nav-item'
+									role='presentation'
+									onClick={() => setActiveTab(1)}
+								>
+									
+									<button
+										className='nav-link active'
+										id='date1ComparisonTab'
+										data-bs-toggle='tab'
+										data-bs-target='#date1ComparisonTabPane'
+										type='button'
+										role='tab'
+										aria-controls='date1ComparisonTabPane'
+										aria-selected='true'
+									>
+										Date 1
+									</button>
+								</li>
+
+								<li
+									className='nav-item'
+									role='presentation'
+									onClick={() => setActiveTab(2)}
+								>
+									<button
+										id='date2ComparisonTab'
+										data-bs-toggle='tab'
+										data-bs-target='#date2ComparisonTabPane'
+										type='button'
+										role='tab'
+										aria-controls='date2ComparisonTabPane'
+										aria-selected='false'
+									>
+										
+									</button>
+								</li>
+							</ul> */}
+
+							{/* <Tabnav
+								tabs={[{ tab: 'Date 1' }, { tab: 'Date 2' }]}
+								activeTab={1}
+								customFunction={true}
+							/> */}
+							{/* TO DO: permitir que TabNav maneje interna y externamente el estado de AtiveTab */}
+
+							{/* PERIOD AND DETAIL LEVEL DROPDOWNS */}
+							{/* <PeriodAndDetailDropdowns
+							DDPeriod1={DDPeriod1}
+							setDDPeriod1={setDDPeriod1}
+							DDDetailLevel1={DDDetailLevel1}
+							setDDDetailLevel1={setDDDetailLevel1}
+							DDPeriod2={DDPeriod2}
+							setDDPeriod2={setDDPeriod2}
+							DDDetailLevel2={DDDetailLevel2}
+							setDDDetailLevel2={setDDDetailLevel2}
+						/> */}
+						</>
+					)}
+
+					<DatePicker
+						className='form-control form-search'
+						selected={editingFromDate1}
+						onChange={onChangeDDDate1}
+						startDate={editingFromDate1}
+						endDate={editingToDate1}
+						monthsShown={isMobile ? 1 : 2}
+						selectsRange
+						inline
+					/>
+
+					<div className='datepicker-footer'>
+						{/* <Switch
+							status={compareDates}
+							setStatus={() => {
+								setCompareDates(!compareDates);
+							}}
+						>
+							Compare dates
+						</Switch> */}
+						<div className='datepicker-buttons-wrapper'>
+							<Button
+								onClick={() => closeDropdown()}
+								size='xs'
+								variant='terciary'
+							>
+								Cancel
+							</Button>
+
+							<Button
+								size='xs'
+								// disabled={!DDStartDate1 || !DDEndDate1} // Start and end dates must be selected
+								onClick={() => updateDateFilters()}
+							>
+								Set date
+							</Button>
+						</div>
+					</div>
+				</Dropdown.Item>
+			</Dropdown.Menu>
+		</Dropdown>
+	);
+};
+
+DropdownDatePicker.propTypes = {
+	className: PropTypes.string,
+	variant: PropTypes.oneOf(['input', 'filter']),
+	show: PropTypes.bool,
+	setShow: PropTypes.func,
+	onToggle: PropTypes.func,
+	dateFrom: PropTypes.string,
+	setDateFrom: PropTypes.func,
+	dateTo: PropTypes.string,
+	setDateTo: PropTypes.func,
+	locked: PropTypes.bool,
+	overflow: PropTypes.bool,
+	onRemoveFilter: PropTypes.func,
+	editingFromDate1: PropTypes.string,
+	setEditingFromDate1: PropTypes.string,
+	editingToDate1: PropTypes.string,
+	setEditingToDate1: PropTypes.string,
+	EditingFromDate2: PropTypes.string,
+	setEditingFromDate2: PropTypes.string,
+	EditingFoDate2: PropTypes.string,
+	setEditingToDate2: PropTypes.string,
+};
+
+export default DropdownDatePicker;