groovinads-ui 1.2.75 → 1.9.0

package/src/components/Inputs/Checkbox.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// HOOKS
-import useTextFormatter from '../../hooks/useTextFormatter';
-
-// Checkbox
-const Checkbox = ({
-	children,
-	className = '',
-	id,
-	name,
-	status = false,
-	setStatus
-}) => {
-  	const { toCamelCase } = useTextFormatter();
-
-	let checkboxId = id;
-		if (!id && typeof children === 'string') {
-		checkboxId = toCamelCase(children);
-	}
-
-	const handleChange = (event) => {
-		setStatus(event.target.checked);
-	};
-
-	return (
-		<div className={`form-group form-check ${className}`}>
-			<label className='checkbox'>
-				<input
-					type='checkbox'
-					checked={status}
-					onChange={handleChange}
-					minLength='1'
-					id={checkboxId}
-					name={name}
-				/>
-				<span className='outer'>
-					<span className='inner'></span>
-				</span>
-				{children}
-			</label>
-		</div>
-	);
-};
-
-Checkbox.propTypes = {
-	className: PropTypes.string,
-	id: PropTypes.string,
-	name: PropTypes.string,
-	status: PropTypes.bool,
-	setStatus: PropTypes.func,
-};
-
-export default Checkbox;

package/src/components/Inputs/Input.jsx

@@ -1,155 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-// HOOKS
-import useTextFormatter from '../../hooks/useTextFormatter';
-
-// COMPONENTS
-import Icon from '../Labels/Icon';
-
-// Input
-const Input = ({
-	autoFocus = false,
-	className = '',
-	focus=false,
-	disabled,
-	helpText,
-	icon,
-	label = 'Label',
-	name,
-	onChange,
-	prefix,
-	requiredText,
-	showError,
-	setShowError,
-	size = 'md',
-	suffix,
-	type = 'text',
-	value,
-	min,
-    max,
-	maxLength,
-}) => {
-	const { toCamelCase } = useTextFormatter();
-	const inputRef = useRef(null);
-
-	const id = toCamelCase(label);
-
-	useEffect(() => {
-		if (showError) {
-			setTimeout(() => {
-				setShowError(false);
-			}, 3000);
-		}
-	}, [showError]);
-
-	useEffect(() => {
-		if(inputRef.current && focus) {
-			inputRef.current.focus();
-		  }
-	}, [focus])
-
-	return (
-		<div className={`position-relative ${className}`}>
-			{prefix || suffix || icon ? (
-				<div
-					className={`input-group ${showError ? 'not-validated' : ''}`}
-					data-error={requiredText}
-				>
-					{icon && (
-						<span className='input-group-text'>
-							<Icon
-								style={'solid'}
-								iconName={icon}
-								scale={1}
-							/>
-						</span>
-					)}
-					{prefix && <span className='input-group-text'>{prefix}</span>}
-					<div className='form-floating'>
-						<input
-							type={type}
-							className={`form-control ${size !== 'md' ? `form-control-${size}` : ''}`}
-							value={value}
-							id={id}
-							name={name}
-							placeholder={label}
-							onChange={onChange}
-							required={!!requiredText}
-							autoFocus={autoFocus}
-							ref={inputRef}
-							min={min}
-                            max={max}
-						/>
-						<label htmlFor={id}>{label}</label>
-					</div>
-					{suffix && <span className='input-group-text'>{suffix}</span>}
-				</div>
-			) : (
-				<div
-					className={`form-floating ${showError ? 'not-validated' : ''}`}
-					data-error={requiredText}
-				>
-					<input
-						type={type}
-						className={`form-control ${size !== 'md' ? `form-control-${size}` : ''}`}
-						value={value}
-						id={id}
-						placeholder={label}
-						onChange={onChange}
-						required={!!requiredText}
-						name={name}
-						disabled={disabled}
-						autoFocus={autoFocus}
-						ref={inputRef}
-						min={min}
-                        max={max}
-						maxLength={maxLength}
-					/>
-					<label htmlFor={id}>{label}</label>
-				</div>
-			)}
-			{helpText && <small className='form-text text-muted'>{helpText}</small>}
-		</div>
-	);
-};
-
-Input.propTypes = {
-	className: PropTypes.string,
-	focus: PropTypes.bool,
-	disabled: PropTypes.bool,
-	helpText: PropTypes.string,
-	icon: PropTypes.string,
-	label: PropTypes.string,
-	name: PropTypes.string,
-	onChange: PropTypes.func,
-	prefix: PropTypes.string,
-	requiredText: PropTypes.string,
-	size: PropTypes.oneOf(['xs', 'md', 'lg']),
-	showError: PropTypes.bool,
-	setShowError: PropTypes.func,
-	suffix: PropTypes.string,
-	type: PropTypes.oneOf([
-		'color',
-		'date',
-		'datetime-local',
-		'email',
-		'file',
-		'image',
-		'month',
-		'number',
-		'password',
-		'tel',
-		'text',
-		'time',
-		'url',
-		'week',
-	]),
-	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-	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/InputChip.jsx

@@ -1,168 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-// COMPONENTS
-import { PillComponent } from '../Labels';
-
-const InputChip = ({
-	className ='',
-	placeholder,
-	keywordsList = [],
-	setKeywordsList,
-	pillColor = 'neutral',
-	counter = false,
-	maxKeywordLength,        // max keyword length (each keyword).
-	recomendedKeywords,	 	 // Num recomendedKeywords.
-	maxKeywords,			 // maxKeywords (total array).
-	requiredText,            // requiered--> maxKeywordsList.
-	duplicateKeywordErrorText 
-
-}) => {
-	// STATE
-	const [inputValue, setInputValue] = useState('');
-	const [error, setError] = useState('');
-	const [showNotValidated, setShowNotValidated] = useState(false);
-
-	// 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;
-			}
-			// CHECK IF DUPLICATE KEYWORD
-			if (keywordsList.includes(inputValue.trim())) {
-				setError(duplicateKeywordErrorText);
-				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);
-	};
-
-	useEffect(() => {
-		if (keywordsList.length === maxKeywords) {
-			setShowNotValidated(true);
-			setTimeout(() => {
-				setShowNotValidated(false);
-			}, 3000);
-		}
-	}, [keywordsList]);
-
-	return (
-		<>
-			<div className={`position-relative ${className}`}>
-				<div className={`input-chip ${showNotValidated  ? 'not-validated' : ''}`} data-error={requiredText}>
-
-					<div className='wrapper'>
-						{/* PILLS */}
-						{keywordsList.map((chip, index) => (
-							<PillComponent
-								key={index}
-								closeButton={true}
-								color={
-									pillColor
-								}
-								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,
-	pillColor: PropTypes.oneOf(['blue', 'danger', 'dark', 'green', 'light', 'midtone', 'neutral', 'red', 'yellow']), 
-	maxKeywords: PropTypes.number.isRequired,
-	requiredText: PropTypes.string.isRequired,
-	counter: PropTypes.bool,
-	duplicateKeywordErrorText: PropTypes.string,
-};
-
-export default InputChip;

package/src/components/Inputs/InputEmail.jsx

@@ -1,175 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-// COMPONENTS GROOVINADS
-import Input from './Input';
-import { Button } from '../Button';
-
-import { ComponentsService } from '../../services';
-import { Icon, Spinner } from '../Labels';
-
-const InputEmail = ({
-	showModal = true,
-	titleList = 'Added emails',
-	label = 'Email addresses',
-	textButton = 'Add',
-	textError = 'You must enter a valid email address',
-	apiGetEmail,
-	apiPostEmail,
-}) => {
-	// STATE
-	const [notifications, setNotifications] = useState([]);
-	const [newEmail, setNewEmail] = useState('');
-
-	const [selectedButton, setSelectedButton] = useState([]);
-
-	const [emailInvalid, setEmailInvalid] = useState(false);
-
-	// VARIABLES
-	const validEmailPattern = /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
-
-	// GET, Returns a list of emails
-	const fetchNotifications = async () => {
-		const resp = await ComponentsService.getInfo(apiGetEmail);
-		setNotifications(resp || []);
-		
-	};
-
-	// POST, Receives a list of emails
-	const handleAddEmail = async () => {
-		const emails = newEmail
-			.split(/[;, ]+/)
-			.map((email) => email.trim())
-			.filter((email) => email.length > 0);
-
-		// Filter invalid emails
-		const invalidEmails = emails.filter(
-			(email) => !validEmailPattern.test(email),
-		);
-		const validEmails = emails.filter((email) => validEmailPattern.test(email));
-
-		if (invalidEmails.length) {
-			setNewEmail(invalidEmails.join(' ')); // if there are multiple invalid emails, they are joined in the array and separated by a space
-			setEmailInvalid(true);
-			setTimeout(() => {
-				setEmailInvalid(false);
-			}, 3000);
-		}
-
-		// update total list of emails validated
-		if (validEmails.length) {
-			const resp = await ComponentsService.postInfo(apiPostEmail, [
-				...notifications,
-				...validEmails,
-			]);
-			setNotifications(resp);
-		}
-		setNewEmail(invalidEmails.join(' '));
-	};
-
-	const handleInputChange = (e) => {
-		const value = e.target.value.replace(/\. +/g, ' '); // removes the dot and space, replacing it with ' '
-		setNewEmail(value);
-
-		if (!value.trim() || validEmailPattern.test(value)) {
-			setEmailInvalid(false);
-		}
-	};
-
-	// DELETE, Receives a list of emails
-	const handleDeleteEmail = async (emailToDelete) => {
-		setSelectedButton([...selectedButton, emailToDelete]);
-
-		const emailDeletedList = notifications.filter(
-			(email) => email !== emailToDelete,
-		)
-
-		const resp = await ComponentsService.postInfo(
-			apiPostEmail,
-			emailDeletedList,
-		);
-		
-		setTimeout(() => {
-			setSelectedButton(
-				selectedButton.filter((email) => email !== emailToDelete),
-			);
-			setNotifications(resp);
-		}, 1000);
-	};
-
-	useEffect(() => {
-		if (showModal) {
-			fetchNotifications();
-		} else if(notifications.length){
-			setNotifications([]);
-		}
-	}, [showModal]);
-	return (
-		<>
-			{/* SECTIONS ADD EMAILS */}
-			<div className={'mb-3'}>
-				<div
-					className={`mb-3 input-group w-100 mb-4 ${
-						emailInvalid ? 'not-validated' : ''
-					}`}
-					data-error={textError}
-				>
-					<Input
-						label={label}
-						value={newEmail}
-						onChange={(e) => {
-							handleInputChange(e);
-						}}
-					/>
-					{/* ADD BUTTON */}
-					<Button
-						onClick={handleAddEmail}
-						className={`${newEmail.trim() ? '' : 'disabled'}`}
-					>
-						{textButton}
-					</Button>
-				</div>
-			</div>
-			{/* SECTIONS LIST ADDED EMAILS */}
-			{notifications?.length ? (
-				<div className='shared-users-list'>
-					<h3>{titleList}</h3>
-					{notifications?.map((email, index) => (
-						<div key={`email${index}`} className='shared-user-item'>
-							<div className='shared-user'>
-								<Icon iconName='user-circle' scale={2} />
-								<span>{email}</span>
-							</div>
-							{selectedButton.some(
-								(selectedEmail) => selectedEmail === email,
-							) ? (
-								<div className='spinner-wrapper'>
-									<Spinner scale={1} />
-								</div>
-							) : (
-								<Button
-									variant='terciary'
-									style='danger'
-									icon='trash-can'
-									onClick={() => handleDeleteEmail(email)}
-								/>
-							)}
-						</div>
-					))}
-				</div>
-			) : null}
-		</>
-	);
-};
-
-InputEmail.propTypes = {
-	showModal: PropTypes.bool,
-	apiGetEmail: PropTypes.string.isRequired,
-	apiPostEmail: PropTypes.string.isRequired,
-	titleList: PropTypes.string,
-	label: PropTypes.string,
-	textButton: PropTypes.string,
-	textError: PropTypes.string,
-};
-
-export default InputEmail;

package/src/components/Inputs/Radio.jsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// HOOKS
-import useTextFormatter from '../../hooks/useTextFormatter';
-
-// Radio
-const Radio = ({
-	children,
-	className = '',
-	id,
-	fullWidth = false,
-	name,
-	setStatus,
-	status = false,
-}) => {
-	const { toCamelCase } = useTextFormatter();
-
-	let RadioId = id;
-	if (!id && typeof children === 'string') {
-		RadioId = toCamelCase(children);
-	}
-
-	const handleChange = (event) => {
-		setStatus(event.target.checked);
-	};
-
-	return (
-		<div className={`form-group form-check ${className}`}>
-			<label className={`radio ${fullWidth ? 'w-100' : ''}`}>
-				<input
-					type='radio'
-					checked={status}
-					onChange={handleChange}
-					minLength='1'
-					id={RadioId}
-					name={name}
-				/>
-				<span className='outer'>
-					<span className='inner'></span>
-				</span>
-				{children}
-			</label>
-		</div>
-	);
-};
-
-Radio.propTypes = {
-	className: PropTypes.string,
-	id: PropTypes.string,
-	fullWidth: PropTypes.bool,
-	name: PropTypes.string,
-	setStatus: PropTypes.func,
-	status: PropTypes.bool,
-};
-
-export default Radio;

package/src/components/Inputs/Switch.jsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// HOOKS
-import useTextFormatter from '../../hooks/useTextFormatter';
-
-const Switch = ({
-	children,
-	className = '',
-	icon = false,
-	id,
-	name,
-	size,
-	setStatus,
-	status = 0,
-	switchPosition = 'start'
-}) => {
-	const { toCamelCase } = useTextFormatter();
-
-	const sizeClass =
-		size === 'lg' ? 'form-switch-lg' : size === 'xs' ? 'form-switch-xs' : '';
-
-	const inputId = id ? id : toCamelCase(children);
-
-	const handleChange = () => {
-		if (typeof status === 'boolean') {
-			return setStatus(!status);
-		} else {
-			setStatus(status ? 0 : 1);
-		}
-	};
-
-	return (
-		<div
-			className={`form-check form-switch ${sizeClass} ${className} ${
-				switchPosition === 'end' ? 'switch-end' : ''
-			} ${icon ? 'switch-icon' : ''}`}
-		>
-			<input
-				className='form-check-input'
-				type='checkbox'
-				role='switch'
-				onChange={handleChange}
-				id={inputId}
-				name={name}
-				checked={!!status}
-			/>
-			{children && (
-				<label className='form-check-label' htmlFor={inputId}>
-					{children}
-				</label>
-			)}
-		</div>
-	);
-};
-
-Switch.propTypes = {
-	className: PropTypes.string,
-	icon: PropTypes.bool,
-	id: PropTypes.string,
-	name: PropTypes.string,
-	setStatus: PropTypes.func,
-	status: PropTypes.oneOfType([
-		PropTypes.number,
-		PropTypes.bool
-	  ]),
-	switchPosition: PropTypes.oneOf(['start', 'end']),
-};
-
-export default Switch;