groovinads-ui 1.2.19 → 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.19",
+	"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/{DropdownInput.jsx → DropdownMultiSelect.jsx}

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 // BOOTSTRAP
 import Dropdown from 'react-bootstrap/Dropdown';
 
 // COMPONENTS
-import { Icon, PillComponent } from '../../components/Labels';
-import { Checkbox, Input } from '../../components/Inputs';
+import { Icon, PillComponent } from '../Labels';
+import { Checkbox, Input } from '../Inputs';
 
 // HOOKS
 import { useTextFormatter } from '../../hooks/index';
 
-const DropdownInput = ({
+const DropdownMultiSelect = ({
 	autoClose = false,
 	className = '',
 	drop,
@@ -26,15 +26,17 @@ const DropdownInput = ({
 	setValuesSelected,
 	values = [],
 	show,
-  idInPill = false,
-  showStatus= '',
+	idInPill = false,
+	showStatus = '',
+	focus = false,
+	buttonVariant = 'input',
 }) => {
 	const [query, setQuery] = useState('');
 
 	const { highlightText } = useTextFormatter();
 
 	const handleCheckbox = (status, value) => {
-		let i = values.findIndex(
+		const i = values.findIndex(
 			(item) =>
 				(object ? item[idKey] : item) === (object ? value[idKey] : value),
 		);
@@ -58,11 +60,13 @@ const DropdownInput = ({
 	};
 
 	const valuesFromSearch = () =>
-    values.filter((item) =>
-        (object ? `${item[idKey]} ${item[nameKey]}` : item)
-            .toLowerCase()
-            .includes(query.toLowerCase()) && (showStatus ? parseInt(item.status) == parseInt(showStatus) : true),
-    );
+		values.filter(
+			(item) =>
+				(object ? `${item[idKey]} ${item[nameKey]}` : item)
+					.toLowerCase()
+					.includes(query.toLowerCase()) &&
+				(showStatus ? parseInt(item.status) === parseInt(showStatus) : true),
+		);
 
 	return (
 		<Dropdown
@@ -72,8 +76,8 @@ const DropdownInput = ({
 			onToggle={onToggle}
 			drop={drop}
 		>
-			<Dropdown.Toggle as={'div'} className='btn btn-input w-100'>
-				{valuesSelected.length > 0 && (
+			<Dropdown.Toggle as={'div'} className={`btn btn-${buttonVariant} w-100`}>
+				{( valuesSelected.length > 0 && buttonVariant === 'input' ) && (
 					<div className='wrapper'>
 						{valuesSelected.map((value, index) => {
 							return (
@@ -86,9 +90,8 @@ const DropdownInput = ({
 									}}
 									key={'Dropdown.PillComponent' + index}
 								>
-                  {idInPill ? `#${value[idKey]} - ` : ''}
+									{idInPill ? `#${value[idKey]} - ` : ''}
 									<span>{object ? value[nameKey] : value}</span>
-
 								</PillComponent>
 							);
 						})}
@@ -123,7 +126,7 @@ const DropdownInput = ({
 						icon={'magnifying-glass'}
 						size={'xs'}
 						className={'w-100'}
-						customRef={show}
+						focus={focus}
 					/>
 				</Dropdown.Item>
 
@@ -165,7 +168,7 @@ const DropdownInput = ({
 	);
 };
 
-DropdownInput.propTypes = {
+DropdownMultiSelect.propTypes = {
 	inputLabel: PropTypes.string,
 	searchLabel: PropTypes.string,
 	autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
@@ -180,8 +183,16 @@ DropdownInput.propTypes = {
 	object: PropTypes.bool,
 	nameKey: PropTypes.string,
 	idKey: PropTypes.string,
-  idInPill: PropTypes.bool,
-  showStatus: PropTypes.string,
+	idInPill: PropTypes.bool,
+	showStatus: PropTypes.string,
+	focus: PropTypes.bool,
+	buttonVariant: PropTypes.oneOf([
+		'input',
+		'primary',
+		'secondary',
+		'terciary',
+		'outline',
+	]),
 };
 
-export default DropdownInput;
+export default DropdownMultiSelect;

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;