groovinads-ui 1.2.55 → 1.2.58

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.55",
+	"version": "1.2.58",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Button/Button.jsx

@@ -14,31 +14,10 @@ const Button = ({
     className = '',
     style = 'default',
     processing = false,
+    disabled = false,
 }) => {
-    let classes = `btn ${className}`;
-
-    // Variant
-    if (variant !== 'default') {
-        classes += ` btn-${variant}`;
-    }
-
-    // Size
-    if (size !== 'md') {
-        classes += ` btn-${size}`;
-    }
-
-    // Style
-    if (style !== 'default') {
-        classes += ` btn-${style}`;
-    }
-
-    // Processing
-    if (processing) {
-       classes += ` btn-processing`;
-    }
-
-  // Icon
-const content = processing ? (
+    // Icon
+    const content = processing ? (
     <>
         <Spinner scale={1} />
         {children && <span>{children}…</span>}
@@ -68,7 +47,16 @@ const content = processing ? (
     );
 
     return (
-        <button className={classes} onClick={onClick}>
+        <button 
+            className={
+                `btn ${className}
+                btn-${variant} 
+                btn-${style}
+                ${processing ? 'btn-processing' : ''}
+                ${disabled ? 'disabled' : ''}`
+            } 
+            onClick={onClick}
+        >
             {content}
         </button>
     );

package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx

@@ -1,150 +1,148 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react';
 import { format } from 'date-fns';
 
 // COMPONENTS
-import { Dropdown } from 'react-bootstrap'
+import { Dropdown } from 'react-bootstrap';
 import { Icon } from '../Labels';
 import { Button } from '../Button';
 import DatePicker from 'react-datepicker';
 
-
 export default function DropdownSimpleDatePicker({
-    className = '',
-    show,
-    setShow,
-    onToggle,
-    inputLabel = 'period',
-    overflow = false,
-    date,
-    setDate,
-    handleClear,
+	className = '',
+	show,
+	setShow,
+	onToggle,
+	inputLabel = 'period',
+	overflow = false,
+	date,
+	setDate,
+	handleClear,
+	minDate,
+	maxDate,
 }) {
-
-    const [internalShow, setInternalShow] = useState(!!show);
-    const dropdownRef = useRef(null);
-
-    const internalToggle = () => {
-        const newShowState = !internalShow;
-        setInternalShow(newShowState);
-
-        if (newShowState) window.dispatchEvent(new CustomEvent('dropdownToggle', { detail: inputLabel }));
-
-        try {
-            onToggle();
-        } catch (error) { }
-    };
-
-    const closeDropdown = () => {
-        setInternalShow(false);
-        try {
-            setShow(false);
-        } catch (error) { }
-    };
-
-    const updateDateFilters = (newDate) => {
-        setDate(newDate?.toString());
-        setTimeout(() => {
-            closeDropdown();
-        }, 200);
-    };
-
-
-    const clearDate = () => {
-        closeDropdown();
-
-        if (handleClear) {
-            handleClear()
-            return
-        }
-        setDate(null);
-    }
-
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                closeDropdown();
-            }
-        };
-
-        document.addEventListener('click', handleClickOutside);
-        return () => {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, []);
-
-    useEffect(() => {
-        setInternalShow(!!show);
-    }, [show]);
-
-    return (
-        <Dropdown
-            show={internalShow}
-            className={className}
-            ref={dropdownRef}
-        >
-            <Dropdown.Toggle
-                variant='toggle-filter'
-                onClick={internalToggle}
-                className={`btn-input w-100`}
-            >
-                <span className='dropdown-label'>{inputLabel}</span>
-                <span>
-                    {date ? format(new Date(date), 'EEE MMM dd yyyy') : ''}
-                </span>
-
-                <Icon iconName='angle-down' className={'caret'} />
-
-            </Dropdown.Toggle>
-
-            <Dropdown.Menu
-                popperConfig={
-                    overflow
-                        ? {
-                            strategy: 'fixed',
-                            onFirstUpdate: () =>
-                                window.dispatchEvent(new CustomEvent('scroll')),
-                        }
-                        : undefined
-                }
-            >
-                <Dropdown.Item as={'div'}>
-
-                    <DatePicker
-                        className='form-control form-search'
-                        selected={date || ''}
-                        onChange={updateDateFilters}
-                        startDate={date || ''}
-                        monthsShown={1}
-                        inline
-                    />
-
-                    <div className='px-2 w-100'>
-                        <Button
-                            onClick={clearDate}
-                            icon='calendar-circle-minus'
-                            size='xs'
-                            variant='terciary'
-                            className='w-100'
-                        >
-                            Clear
-                        </Button>
-                    </div>
-                </Dropdown.Item>
-            </Dropdown.Menu>
-        </Dropdown>
-    )
+	const [internalShow, setInternalShow] = useState(!!show);
+	const dropdownRef = useRef(null);
+
+	const internalToggle = () => {
+		const newShowState = !internalShow;
+		setInternalShow(newShowState);
+
+		if (newShowState)
+			window.dispatchEvent(
+				new CustomEvent('dropdownToggle', { detail: inputLabel }),
+			);
+
+		try {
+			onToggle();
+		} catch (error) {}
+	};
+
+	const closeDropdown = () => {
+		setInternalShow(false);
+		try {
+			setShow(false);
+		} catch (error) {}
+	};
+
+	const updateDateFilters = (newDate) => {
+		setDate(newDate?.toString());
+		setTimeout(() => {
+			closeDropdown();
+		}, 200);
+	};
+
+	const clearDate = () => {
+		closeDropdown();
+
+		if (handleClear) {
+			handleClear();
+			return;
+		}
+		setDate(null);
+	};
+
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+				closeDropdown();
+			}
+		};
+
+		document.addEventListener('click', handleClickOutside);
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	}, []);
+
+	useEffect(() => {
+		setInternalShow(!!show);
+	}, [show]);
+
+	return (
+		<Dropdown show={internalShow} className={className} ref={dropdownRef}>
+			<Dropdown.Toggle
+				variant='toggle-filter'
+				onClick={internalToggle}
+				className={`btn-input w-100`}
+			>
+				<span className='dropdown-label'>{inputLabel}</span>
+				<span>{date ? format(new Date(date), 'EEE MMM dd yyyy') : ''}</span>
+
+				<Icon iconName='angle-down' className={'caret'} />
+			</Dropdown.Toggle>
+
+			<Dropdown.Menu
+				popperConfig={
+					overflow
+						? {
+								strategy: 'fixed',
+								onFirstUpdate: () =>
+									window.dispatchEvent(new CustomEvent('scroll')),
+							}
+						: undefined
+				}
+			>
+				<Dropdown.Item as={'div'}>
+					<DatePicker
+						className='form-control form-search'
+						selected={date || ''}
+						onChange={updateDateFilters}
+						startDate={date || ''}
+						monthsShown={1}
+						inline
+						minDate={minDate}
+						maxDate={maxDate}
+					/>
+
+					<div className='px-2 w-100'>
+						<Button
+							onClick={clearDate}
+							icon='calendar-circle-minus'
+							size='xs'
+							variant='terciary'
+							className='w-100'
+						>
+							Clear
+						</Button>
+					</div>
+				</Dropdown.Item>
+			</Dropdown.Menu>
+		</Dropdown>
+	);
 }
 
 DropdownSimpleDatePicker.propTypes = {
-    className: PropTypes.string,
-    show: PropTypes.bool,
-    setShow: PropTypes.func,
-    onToggle: PropTypes.func,
-    inputLabel: PropTypes.string,
-    overflow: PropTypes.bool,
-    date: PropTypes.string,
-    setDate: PropTypes.func,
-    clearDate: PropTypes.func,
-    handleClear: PropTypes.func,
-};
+	className: PropTypes.string,
+	show: PropTypes.bool,
+	setShow: PropTypes.func,
+	onToggle: PropTypes.func,
+	inputLabel: PropTypes.string,
+	overflow: PropTypes.bool,
+	date: PropTypes.string,
+	setDate: PropTypes.func,
+	clearDate: PropTypes.func,
+	handleClear: PropTypes.func,
+	minDate: PropTypes.object,
+	maxDate: PropTypes.object,
+};

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

@@ -1,4 +1,4 @@
-import React, { Children, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import DatePicker from 'react-datepicker'; // https://reactdatepicker.com
 import PropTypes from 'prop-types';
 import Dropdown from 'react-bootstrap/Dropdown';
@@ -6,9 +6,6 @@ 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';
@@ -31,12 +28,13 @@ const DropdownDatePicker = ({
 	setDateFrom2,
 	dateTo2,
 	setDateTo2,
+	minDate,
+	maxDate,
 }) => {
-	//const [activeTab, setActiveTab] = useState(1);
+	// const [activeTab, setActiveTab] = useState(1);
 
 	const [compareDates, setCompareDates] = useState(true);
 
-
 	/* 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 ========== */
@@ -252,6 +250,8 @@ const DropdownDatePicker = ({
 						monthsShown={isMobile ? 1 : 2}
 						selectsRange
 						inline
+						minDate={minDate}
+						maxDate={maxDate}
 					/>
 
 					<div className='datepicker-footer'>

package/src/components/Inputs/InputChip.jsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+// COMPONENTS
+import { PillComponent } from '../Labels';
+
+const InputChip = ({
+	className ='',
+	placeholder,
+	keywordsList = [],
+	setKeywordsList,
+	counter = false,
+	nonRecomendedKeywords = [],
+	maxKeywordLength,        // max keyword length (each keyword).
+	recomendedKeywords,	 	 // Num recomendedKeywords.
+	maxKeywords,			 // maxKeywords (total array).
+	requiredText,            // requiered--> maxKeywordsList.
+
+}) => {
+	// STATE
+	const [inputValue, setInputValue] = useState('');
+	const [error, setError] = useState('');
+
+	// VARIABLES	
+	const strokeDasharray = 56.55
+
+	// FUNCTIONS
+	// ADD
+	const handleKeyDown = (e) => {
+		if (
+			e.key === 'Enter' && 
+			inputValue.trim() !== '' 
+			&& keywordsList.length < maxKeywords
+		) {	
+			// MAX KEYWORD LENGTH
+			if (inputValue.length > maxKeywordLength) {
+				setError(`Each keyword must be ${maxKeywordLength} characters or less.`);
+				setTimeout(() => setError(''), 2000);
+				setInputValue('');
+				return;
+			}
+
+			const newChipsList = [...keywordsList, inputValue.trim()];
+			setKeywordsList(newChipsList);
+			setInputValue('');
+		}
+	};
+
+	// DELETE
+	const handleDelete = (chipToDelete) => {
+		const newChipsList = keywordsList.filter((chip) => chip !== chipToDelete);
+		setKeywordsList(newChipsList);
+	};
+
+	return (
+		<>
+			<div className={`position-relative ${className}`}>
+				<div className={`input-chip ${keywordsList.length === maxKeywords  ? 'not-validated' : ''}`} data-error={requiredText}>
+
+					<div className='wrapper'>
+						{/* PILLS */}
+						{keywordsList.map((chip, index) => (
+							<PillComponent
+								key={index}
+								closeButton={true}
+								color={
+									nonRecomendedKeywords.includes(chip) ? 'danger' : 'green'
+								}
+								onClick={() => handleDelete(chip)}
+							>
+								{chip}
+							</PillComponent>
+						))}
+					</div>
+
+					{/* INPUT */}
+					<input
+						type='text'
+						value={inputValue}
+						onKeyDown={handleKeyDown}
+						onChange={(e) => {
+							setInputValue(e.target.value);
+						}}
+						placeholder={placeholder}
+					/>
+
+					{/* KEYWORDS COUNTER */}
+					{counter && keywordsList.length >= recomendedKeywords && (
+						<div className={`progress-counter-wrapper ${ 
+							keywordsList.length >= maxKeywords 
+							  ? 'progress-value-error' 
+							  : keywordsList.length >= recomendedKeywords 
+							  ? 'progress-value-warning' 
+							  : ''
+						  }`}
+						>
+							<svg
+								width='20'
+								height='20'
+								viewBox='0 0 20 20'
+								xmlns='http://www.w3.org/2000/svg'
+								className='progress-counter'
+							>
+								<circle
+									className='progress-bg'
+									cx='10'
+									cy='10'
+									r='9'
+									fill='none'
+								/>
+								
+								<circle
+									className='progress-value'
+									cx='10'
+									cy='10'
+									r='9'
+									strokeDasharray={strokeDasharray}
+									strokeDashoffset={strokeDasharray * (1 - keywordsList.length / maxKeywords)} 
+									strokeLinecap='round'
+									fill='none'
+								/>
+							</svg>
+							<span className='progress-counter-text'>
+								{keywordsList.length}
+							</span>
+						</div>
+					)}
+				</div>
+
+				{/* ERROR MESSAGGE */}
+				{error && <small className='form-text text-muted'>{error}</small>}
+			</div>
+		</>
+	);
+};
+
+InputChip.propTypes = {
+	className: PropTypes.string,
+	placeholder: PropTypes.string.isRequired,
+	keywordsList: PropTypes.array.isRequired,
+	setKeywordsList: PropTypes.func.isRequired,
+	maxKeywordLength: PropTypes.number.isRequired,
+	nonRecomendedKeywords: PropTypes.array,
+	maxKeywords: PropTypes.number.isRequired,
+	requiredText: PropTypes.string.isRequired,
+	counter: PropTypes.bool,
+};
+
+export default InputChip;

package/src/components/Inputs/index.js

@@ -3,5 +3,6 @@ import Input from './Input';
 import Radio from './Radio';
 import Switch from './Switch';
 import Textarea from './Textarea';
+import InputChip from './InputChip';
 
-export { Checkbox, Input, Radio, Switch, Textarea }
+export { Checkbox, Input, Radio, Switch, Textarea, InputChip };

package/src/stories/Button.stories.jsx

@@ -2,10 +2,22 @@ import React from 'react';
 import Button from '../components/Button/Button';
 
 export default {
-  title: 'Buttons/Button',
-  component: Button,
+	title: 'Buttons/Button',
+	component: Button,
 };
 
-const Template = (args) => <Button {...args}>Button</Button>;
+const Template = (args) => {
+	return (
+		<>
+			<Button
+				variant='primary'
+				size='lg'
+        		onClick={() => console.log('Button clicked')}
+			>
+				Disabled Button
+			</Button>
+		</>
+	);
+};
 
-export const Default = Template.bind({});
+export const Default = Template.bind({});

package/src/stories/DropdownDatePicker.stories.jsx

@@ -23,7 +23,7 @@ const Template = (args) => {
 
 	useEffect(() => {
 		console.log('dates To:', dateTo);
-	}, [ dateTo ]);
+	}, [dateTo]);
 
 	return (
 		<>
@@ -34,7 +34,7 @@ const Template = (args) => {
 					// show={show}
 					// setShow={setShow}
 					// onToggle={handleToggle}
-					//variant='filter'
+					// variant='filter'
 					dateFrom={dateFrom}
 					setDateFrom={setDateFrom}
 					dateTo={dateTo}
@@ -45,6 +45,23 @@ const Template = (args) => {
 					// setDateTo2={setDateTo2}
 				/>
 			</div>
+
+			<div>
+				<p>min max</p>
+				<DropdownDatePicker
+					{...args}
+					// show={show}
+					// setShow={setShow}
+					// onToggle={handleToggle}
+					// variant='filter'
+					dateFrom={dateFrom}
+					setDateFrom={setDateFrom}
+					dateTo={dateTo}
+					setDateTo={setDateTo}
+					minDate={new Date('2025-01-01')}
+					maxDate={new Date('2025-01-31')}
+				/>
+			</div>
 		</>
 	);
 };

package/src/stories/DropdownSimpleDatePicker.stories.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import DropdownSimpleDatePicker from '../components/Dropdowns/DropdownSimpleDatePicker';
 
 export default {
@@ -13,39 +13,42 @@ const Template = (args) => {
 	const [endDate, setEndDate] = useState('');
 
 	return (
-		// <>
-		// 	<button onClick={() => setShow(!show)}>Toggle</button>
-		// 	<div className='col-2'>
-		// 		<DropdownSimpleDatePicker
-		// 			{...args}
-		// 			dateFrom={dateFrom}
-		// 			setDateFrom={setDateFrom}
-		// 			date={dateTo}
-		// 			setDate={setDateTo}
-		// 		/>
-		// 	</div>
-		// </>
-
 		<>
 			<div className='d-flex justify-content-between mt-3'>
 				{/* DROPDOWN TO TEST THE handleGlobalToggle */}
-
 				<div className='col-3'>
 					<DropdownSimpleDatePicker
 						{...args}
-						inputLabel="Start Date"
+						inputLabel='Start Date'
 						date={startDate}
 						setDate={setStartDate}
 					/>
 				</div>
-				
+
+				<div className='col-3'>
+					<DropdownSimpleDatePicker
+						{...args}
+						inputLabel='End Date'
+						date={endDate}
+						setDate={setEndDate}
+						handleClear={() => {
+							console.log('Aqui');
+						}}
+					/>
+				</div>
+
 				<div className='col-3'>
+					<p>minmax</p>
 					<DropdownSimpleDatePicker
 						{...args}
-						inputLabel="End Date"
+						inputLabel='End Date'
 						date={endDate}
 						setDate={setEndDate}
-						handleClear={() => {console.log('Aqui');}}
+						handleClear={() => {
+							console.log('Aqui');
+						}}
+						minDate={new Date('2025-01-01')}
+						maxDate={new Date('2025-01-31')}
 					/>
 				</div>
 			</div>