groovinads-ui 1.2.75 → 1.9.0

package/src/components/Inputs/Textarea.jsx

@@ -1,68 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-// HOOKS
-import useTextFormatter from '../../hooks/useTextFormatter';
-
-const Textarea = ({
-	className = '',
-	helpText,
-	label = 'Label',
-	name,
-	onChange,
-	requiredText,
-	showError,
-	setShowError,
-	size = 'md',
-	value = ''
-}) => {
-	const { toCamelCase } = useTextFormatter();
-
-	const sizeClass =
-		size === 'lg' ? 'form-control-lg' : size === 'xs' ? 'form-control-xs' : '';
-	const id = toCamelCase(label);
-
-	useEffect(() => {
-		if (showError) {
-			setTimeout(() => {
-				setShowError(false);
-			}, 3000);
-		}
-	}, [showError]);
-
-	return (
-		<div className={`position-relative ${className}`}>
-			<div
-				className={`form-floating ${showError ? 'not-validated' : ''}`}
-				data-error={requiredText}
-			>
-				<textarea
-					className={`form-control ${sizeClass}`}
-					onChange={onChange}
-					placeholder={label}
-					id={id}
-					name={name}
-					required={!!requiredText}
-					value={value || ''}
-				/>
-				<label htmlFor={id}>{label}</label>
-				{helpText && <small className='form-text text-muted'>{helpText}</small>}
-			</div>
-		</div>
-	);
-};
-
-Textarea.propTypes = {
-	className: PropTypes.string,
-	helpText: PropTypes.string,
-	label: PropTypes.string,
-	name: PropTypes.string,
-	onChange: PropTypes.func,
-	requiredText: PropTypes.string,
-	showError: PropTypes.bool,
-	setShowError: PropTypes.func,
-	size: PropTypes.oneOf(['xs', 'md', 'lg']),
-	value: PropTypes.string
-};
-
-export default Textarea;

package/src/components/Inputs/index.js

@@ -1,9 +0,0 @@
-import Checkbox from './Checkbox';
-import Input from './Input';
-import Radio from './Radio';
-import Switch from './Switch';
-import Textarea from './Textarea';
-import InputChip from './InputChip';
-import InputEmail from './InputEmail';
-
-export { Checkbox, Input, Radio, Switch, Textarea, InputChip, InputEmail };

package/src/components/Labels/Alert.jsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// COMPONENTS
-import Icon from '../Labels/Icon';
-
-const Alert = ({
-	icon = true,
-	animation = false,
-	type = 'info',
-	size = 'md',
-	onClose = null,
-	children,
-	className = '',
-}) => {
-
-	const iconMap = {
-		info: 'circle-info',
-		success: 'check',
-		warning: 'triangle-exclamation',
-		danger: 'circle-xmark',
-	};
-
-	return (
-		<div
-			className={`alert ${
-				animation ? 'alert-animation' : ''
-			} alert-${type} alert-${size} ${className}`}
-			role='alert'
-		>
-			<div className='alert-wrapper'>
-				{icon && (
-					<Icon
-						style={'solid'}
-						iconName={iconMap[type]}
-					/>
-				)}
-				<span>{children}</span>
-			</div>
-			{onClose && (
-				<button onClick={onClose} className='btn-close'>
-					<Icon
-						style={'solid'}
-						iconName={'xmark'}
-					/>
-				</button>
-			)}
-		</div>
-	);
-};
-
-Alert.propTypes = {
-	icon: PropTypes.bool,
-	animation: PropTypes.bool,
-	type: PropTypes.oneOf(['warning', 'danger', 'success', 'info']).isRequired,
-	size: PropTypes.oneOf(['xs', 'md', 'lg']),
-	onClose: PropTypes.func,
-	children: PropTypes.node.isRequired,
-	className: PropTypes.string,
-};
-
-export default Alert;

package/src/components/Labels/Icon.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Icon = ({
-	style = 'solid',
-	scale = 1,
-	iconName = 'user-bounty-hunter',
-	className = '',
-	animation = '',
-}) => {
-	const iconStyle = `fa-${style}`;
-	const iconClass = `fa-${iconName}`;
-
-	let iconScale;
-	switch(scale) {
-		case 0.7:
-			iconScale = 'icon-07x';
-			break;
-		case 1:
-			iconScale = 'icon-1x';
-			break;
-		case 2:
-			iconScale = 'icon-2x';
-			break;
-		case 3:
-			iconScale = 'icon-3x';
-			break;
-		case 4:
-			iconScale = 'icon-4x';
-			break;
-		default:
-		iconScale = '';
-	}
-
-	let iconAnimation;
-	switch(animation) {
-		case 'beat':
-			iconAnimation = 'fa-beat';
-			break;
-		case 'fade':
-			iconAnimation = 'fa-fade';
-			break;
-		case 'beat-fade':
-			iconAnimation = 'fa-beat-fade';
-			break;
-		case 'bounce':
-			iconAnimation = 'fa-bounce';
-			break;
-		case 'flip':
-			iconAnimation = 'fa-flip';
-			break;
-		case 'shake':
-			iconAnimation = 'fa-shake';
-			break;
-		case 'spin':
-			iconAnimation = 'fa-spin';
-			break;
-		case 'spin-reverse':
-			iconAnimation = 'fa-spin fa-spin-reverse';
-			break;
-		default:
-		iconAnimation = '';
-	}
-
-	return <i className={`${iconStyle} ${iconClass} ${iconScale} ${iconAnimation} ${className}`} aria-hidden='true'></i>;
-};
-
-Icon.propTypes = {
-	style: PropTypes.oneOf(['light', 'solid', 'regular', 'thin', 'duotone', 'sharp']),
-	scale: PropTypes.oneOf([0.7, 1, 2, 3, 4]),
-	iconName: PropTypes.string,
-	className: PropTypes.string,
-	animation: PropTypes.oneOf(['beat', 'fade', 'beat-fade', 'bounce', 'flip', 'shake', 'spin', 'spin-reverse']),
-};
-
-export default Icon;

package/src/components/Labels/LoginSource.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const LoginSource = ({
-	logo = 'groovinads'
-}) => {
-	return (
-		<div
-			className={`login-source ${logo || ''}`}
-			aria-label={`${logo} logo`}
-		></div>
-	);
-};
-
-LoginSource.propTypes = {
-	logo: PropTypes.oneOf(['groovinads', 'google', 'microsoft', 'linkedin', 'slack']),
-};
-
-export default LoginSource;

package/src/components/Labels/PillComponent.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// COMPONENTS
-import Icon from '../Labels/Icon';
-
-const PillComponent = ({
-  children,
-  className = '',
-  color = 'neutral',
-  closeButton = false,
-  onClick,
-}) => {
-  return (
-    <div className={`pill ${color} ${className}`}>
-      <span>{children}</span>
-      {closeButton && (
-        <button onClick={onClick}>
-          <Icon
-            style={'solid'}
-            iconName={'xmark'}
-            scale={0.7}
-          />
-        </button>
-      )}
-    </div>
-  );
-};
-
-PillComponent.propTypes = {
-	color: PropTypes.oneOf([
-		'green',
-		'yellow',
-		'red',
-		'danger',
-		'neutral',
-		'blue',
-		'light',
-		'midtone',
-		'dark',
-	]),
-	closeButton: PropTypes.bool,
-	onClick: PropTypes.func,
-	className: PropTypes.string,
-};
-
-export default PillComponent;

package/src/components/Labels/Spinner.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Spinner = ({
-	scale = 1,
-	className = '',
-}) => {
-
-	let iconScale;
-	switch(scale) {
-		case 0.7:
-			iconScale = 'icon-07x';
-			break;
-		case 1:
-			iconScale = 'icon-1x';
-			break;
-		case 2:
-			iconScale = 'icon-2x';
-			break;
-		case 3:
-			iconScale = 'icon-3x';
-			break;
-		default:
-		iconScale = '';
-	}
-
-	return <i className={`icon fa-solid fa-spinner-third fa-spin ${iconScale} ${className}`} aria-hidden='true'></i>;
-};
-
-Spinner.propTypes = {
-	scale: PropTypes.oneOf([0.7, 1, 2, 3, 4]),
-	className: PropTypes.string,
-};
-
-export default Spinner;

package/src/components/Labels/StatusIcon.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const StatusIcon = ({ animated = false, className = '', status = 0 }) => {
-	const getStatusClass = (status) => {
-		switch (status) {
-			case 1:
-				return 'active';
-			case 3:
-				return 'active-warning';
-			case 4:
-				return 'warning';
-			case 5:
-				return 'danger';
-			default:
-				return '';
-		}
-	};
-
-	return (
-		<svg
-			xmlns='http://www.w3.org/2000/svg'
-			viewBox={status === 3 ? '0 0 24 16' : '0 0 16 16'}
-			className={`status-icon ${getStatusClass(status)} ${className} ${animated ? 'animated' : ''}`}
-		>
-			<circle cx={status === 3 ? '12' : '8'} cy='8' r='8' />
-
-			{(() => {
-				switch (status) {
-					case 1:
-						return (
-							<>
-								<polyline
-									className='line-back'
-									points='0 7.99 4.99 7.99 6.29 12 9.82 4 10.99 8 16 8'
-								/>
-								<polyline
-									className='line-front'
-									points='0 7.99 4.99 7.99 6.29 12 9.82 4 10.99 8 16 8'
-								/>
-							</>
-						);
-					case 3:
-						return (
-							<>
-								<path d='M3.5304 1.14718C4.00269 1.4241 4.13257 1.9886 3.83739 2.37202C2.69207 4.0229 2.01906 5.94004 2.01906 7.96369C2.01906 9.98735 2.69207 11.979 3.83739 13.5873C4.14438 14.0133 4.00269 14.5778 3.5304 14.8548C3.0581 15.1317 2.43231 15.0039 2.13713 14.5459C0.779285 12.682 0 10.424 0 7.96369C0 5.50336 0.779285 3.31995 2.12532 1.41345C2.43231 0.998071 3.0581 0.870262 3.5304 1.14718Z' />
-								<path d='M20.4682 1.14658C20.9391 0.869859 21.5631 0.997576 21.8692 1.4233C23.223 3.31777 24 5.5741 24 7.96879C24 10.3635 23.223 12.6837 21.8692 14.5462C21.5631 15.0039 20.9391 15.1316 20.4682 14.8549C19.9973 14.5781 19.8678 14.0141 20.1621 13.5883C21.3158 11.9812 21.9751 10.0655 21.9751 7.96879C21.9751 5.87211 21.3158 4.03085 20.1621 2.38118C19.856 1.98738 19.9973 1.4233 20.4682 1.15722V1.14658Z' />
-								<path d='M12 12C12.5523 12 13 11.5523 13 11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11C11 11.5523 11.4477 12 12 12Z' />
-								<path d='M12 3C12.5465 3 13 3.3986 13 3.9021V8.0979C13 8.59091 12.5581 9 12 9C11.4419 9 11 8.6014 11 8.0979V3.9021C11 3.40909 11.4419 3 12 3Z' />
-							</>
-						);
-					default:
-						return null;
-				}
-			})()}
-		</svg>
-	);
-};
-
-StatusIcon.propTypes = {
-	className: PropTypes.string,
-	status: PropTypes.number.isRequired,
-	animated: PropTypes.bool,
-};
-
-export default StatusIcon;

package/src/components/Labels/index.js

@@ -1,8 +0,0 @@
-import Alert from './Alert';
-import Icon from './Icon';
-import LoginSource from './LoginSource';
-import PillComponent from './PillComponent';
-import Spinner from './Spinner';
-import StatusIcon from './StatusIcon';
-
-export { Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon }

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

@@ -1,210 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-// BOOTSTRAP
-import Dropdown from 'react-bootstrap/Dropdown';
-
-// COMPONENTS
-import Icon from '../../Labels/Icon';
-
-// HOOKS
-import { useGetBaseDomain } from '../../../hooks/index';
-
-// SERVICES
-import { ComponentsService } from '../../../services/index';
-
-const DeckDropdown = () => {
-	const [applications, setApplications] = useState([]);
-
-	const fetchData = async () => {
-		try {
-			const resp = await ComponentsService.applications();
-			resp.forEach((element) => {
-				element.app_icon_sm = element.application_icon;
-				element.app_name = element.application_name;
-			});
-			setApplications(resp);
-		} catch (error) {
-			console.error('fetchData error', error);
-			// setShowAPIerrorModal(true);
-			// setErrorModalDetail(`${error}`);
-		}
-	};
-
-	const linkToApp = (path, title) => {
-		// if path begins with /, path is a subdomain, linkUrl must be window.location.origin + path + '/'
-		let linkUrl;
-		const base_domain = useGetBaseDomain();
-		const nextState = { additionalInformation: 'Updated the URL' };
-
-		// If path is subdomain
-		if (path.startsWith('/')) {
-			if (base_domain === 'groovinads.com') {
-				linkUrl = window.location.origin + path + '/';
-				window.history.pushState(nextState, title, linkUrl);
-			} else {
-				linkUrl = 'https://deck-dev.groovinads.com' + path + '/';
-			}
-		} else linkUrl = path;
-
-		return linkUrl;
-	};
-
-	const favApp = async (identification) => {
-		try {
-			await ComponentsService.favApplication(identification);
-			setApplications((prev) => {
-				const index = prev.findIndex(
-					(element) => element?.id_application === identification,
-				);
-				prev[index].favorite = true;
-				return [...prev];
-			});
-		} catch (error) {
-			console.error('favApp error', error);
-		}
-	};
-
-	const unfavApp = async (identification) => {
-		try {
-			await ComponentsService.unfavApplication(identification);
-
-			setApplications((prev) => {
-				const index = prev.findIndex(
-					(element) => element?.id_application === identification,
-				);
-				prev[index].favorite = false;
-				return [...prev];
-			});
-		} catch (error) {
-			console.error('unfavApp error', error);
-		}
-	};
-
-	useEffect(() => {
-		if (!applications?.length) fetchData();
-	}, []);
-
-	return (
-		<>
-			{applications.length ? (
-				<Dropdown>
-					<Dropdown.Toggle className='btn btn-terciary'>
-						<svg
-							id='deckApps'
-							xmlns='http://www.w3.org/2000/svg'
-							className='icon'
-							viewBox='0 0 16 16'
-						>
-							<g>
-								<rect x='1' y='1' width='4' height='4' rx='1.25' ry='1.25' />
-								<rect x='1' y='6' width='4' height='4' rx='1.25' ry='1.25' />
-								<rect x='1' y='11' width='4' height='4' rx='1.25' ry='1.25' />
-								<rect x='6' y='1' width='4' height='4' rx='1.25' ry='1.25' />
-								<rect x='6' y='6' width='4' height='4' rx='1.25' ry='1.25' />
-								<rect x='6' y='11' width='4' height='4' rx='1.25' ry='1.25' />
-								<rect x='11' y='1' width='4' height='4' rx='1.25' ry='1.25' />
-								<rect x='11' y='6' width='4' height='4' rx='1.25' ry='1.25' />
-								<rect x='11' y='11' width='4' height='4' rx='1.25' ry='1.25' />
-							</g>
-						</svg>
-					</Dropdown.Toggle>
-
-					<Dropdown.Menu as={'ul'}>
-						{applications?.filter((item) => item.favorite).length > 0 && (
-							<Dropdown.Item as={'li'}>
-								<h4 className='dropdown-header'>Favorites</h4>
-							</Dropdown.Item>
-						)}
-
-						{applications
-							.filter((item) => item.favorite)
-							.map((element, i) => {
-								return (
-									<Dropdown.Item key={i} as={'li'}>
-										<div
-											onClick={() => {
-												window.location.replace(
-													linkToApp(
-														element.application_url,
-														element.application_name,
-													),
-												);
-											}}
-											className='link-app'
-										>
-											<span className='icon-app'>
-												<Icon
-													style={'solid'}
-													iconName={element.app_icon_sm}
-													scale={1}
-												/>
-											</span>
-
-											<span>{element.app_name}</span>
-										</div>
-										<button
-											className='deck-fav'
-											onClick={(e) => {
-												e.stopPropagation();
-												unfavApp(element.id_application);
-											}}
-										>
-											<Icon style={'solid'} iconName={'star'} scale={1} />
-										</button>
-									</Dropdown.Item>
-								);
-							})}
-
-						{applications?.filter((item) => item.favorite).length > 0 &&
-							applications?.filter((item) => !item.favorite).length > 0 && (
-								<Dropdown.Divider as={'li'} />
-							)}
-
-						{applications
-							.filter((item) => !item.favorite)
-							.map((element, i) => {
-								return (
-									<Dropdown.Item key={i} as={'li'}>
-										<div
-											onClick={() => {
-												window.location.replace(
-													linkToApp(
-														element.application_url,
-														element.application_name,
-													),
-												);
-											}}
-											className='link-app'
-										>
-											<span className='icon-app'>
-												<Icon
-													style={'solid'}
-													iconName={element.app_icon_sm}
-													scale={1}
-												/>
-											</span>
-
-											<span>{element.app_name}</span>
-										</div>
-										<button
-											className='deck-fav'
-											onClick={(e) => {
-												e.stopPropagation();
-												favApp(element.id_application);
-											}}
-										>
-											<Icon style={'regular'} iconName={'star'} scale={1} />
-										</button>
-									</Dropdown.Item>
-								);
-							})}
-					</Dropdown.Menu>
-				</Dropdown>
-			) : (
-				<></>
-			)}
-		</>
-	);
-};
-
-export default DeckDropdown;