groovinads-ui 1.2.75 → 1.9.1

package/src/components/Toasts/ToastComponent.jsx

@@ -1,45 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-// BOOTSTRAP
-import { ToastContainer } from 'react-bootstrap';
-
-// COMPONENTS
-import ToastCardComponent from './Toast/ToastCardComponent';
-
-const ToastComponent = ({ toast, position = 'bottom-end' }) => {
-	const [toastsHistory, setToastsHistory] = useState([]);
-
-	useEffect(() => {
-		if (toast) setToastsHistory([...toastsHistory, toast]);
-	}, [toast]);
-
-	return (
-		<ToastContainer position={position}>
-			{toastsHistory.map(
-				({ variant = 'info', autoClose = true, children, className }, i) => (
-					<ToastCardComponent
-						variant={variant}
-						autoClose={autoClose}
-						children={children}
-						className={className}
-						position={position}
-						key={children + variant + i}
-					/>
-				),
-			)}
-		</ToastContainer>
-	);
-};
-
-ToastComponent.propTypes = {
-	toast: PropTypes.object,
-	position: PropTypes.oneOf([
-		'top-start',
-		'top-end',
-		'bottom-start',
-		'bottom-end',
-	]),
-};
-
-export default ToastComponent;

package/src/components/Toasts/ToastProgress.jsx

@@ -1,118 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-// COMPONENTS
-import { Toast, ProgressBar, ToastContainer } from 'react-bootstrap';
-import { Button } from '../Button';
-import {Icon, Spinner} from '../Labels';
-
-const ProgressToast = ({
-	variant,
-	status = 'in-progress',
-	cancelButton = false,
-	onCancel,
-	position = 'bottom-start',
-	currentProgress,
-}) => {
-	const toggleShow = () => setShow(!show);
-	const [show, setShow] = useState(true);
-	const [uploadCompleted, setUploadCompleted] = useState(false);
-
-	let content;
-
-	switch (variant) {
-		case 'upload':
-			content = (
-				<div className='uploading'>
-					<ProgressBar now={status === 'in-progress' ? currentProgress : currentProgress} />
-					<div className='uploading-wrapper'>
-						{uploadCompleted ?
-						<div className='toast-wrapper'>
-							<div className='toast-type'>
-								<Icon
-									style={'solid'}
-									iconName={'circle-check'}
-									scale={1}
-									className={'icon'}
-								/>
-							</div>
-							<p>Upload completed</p>
-						</div>
-						:
-						<>
-							<Spinner />
-							<p>Uploading…</p>
-						</>
-						}
-						<p className='progress-percentage'>{currentProgress}%</p>
-					</div>
-				</div>
-			);
-			break;
-			case 'processing':
-			content = (
-				<div className='uploading-wrapper'>
-					<Spinner />
-					<p>Processing…</p>
-				</div>
-			);
-			break;
-			default:
-				content = null;
-			}
-
-	if (status === 'error') {
-		content = (
-			<div className='uploading-wrapper'>
-				<div className='toast-wrapper'>
-					<div className='toast-type'>
-						<Icon
-							style={'solid'}
-							iconName={'circle-xmark'}
-							scale={1}
-							className={'icon'}
-						/>
-					</div>
-					<p>Upload failed!</p>
-				</div>
-			</div>
-		);
-	}
-
-	useEffect(() => {
-	  if (currentProgress === 100) {
-		setUploadCompleted(true);
-		setTimeout(() => setShow(false), 3000);
-	  }
-	}, [currentProgress]);
-
-	return (
-		<ToastContainer position={position}>
-			<Toast className={`${status === 'error' ? 'error' : ''} ${position} ${uploadCompleted ? 'success' : ''}`} onClose={toggleShow} show={show}>
-				<Toast.Body>
-					{content}
-					{cancelButton && (
-						<Button variant={'terciary'} size={'xs'} onClick={onCancel}>
-							Cancel
-						</Button>
-					)}
-				</Toast.Body>
-			</Toast>
-		</ToastContainer>
-	);
-};
-
-ProgressToast.propTypes = {
-	variant: PropTypes.oneOf(['upload', 'processing']).isRequired,
-	cancelButton: PropTypes.bool,
-	position: PropTypes.oneOf([
-		'top-start',
-		'top-end',
-		'bottom-start',
-		'bottom-end',
-	]),
-	status: PropTypes.oneOf(['in-progress', 'error']),
-	currentProgress: PropTypes.number,
-};
-
-export default ProgressToast;

package/src/components/Toasts/index.js

@@ -1,4 +0,0 @@
-import ToastComponent from './ToastComponent';
-import ToastProgress from './ToastProgress';
-
-export { ToastComponent, ToastProgress }

package/src/components/index.js

@@ -1,50 +0,0 @@
-// Buttons
-import Button from "./Button/Button";
-
-// Dropdowns
-import { DropdownComponent, DropdownMultiSelect, DropdownDatePicker, DropdownFilter, DropdownSimpleDatePicker } from './Dropdowns';
-
-// Inputs
-import { Checkbox, Input, Radio, Switch, Textarea, InputEmail } from './Inputs';
-
-// Labels
-import { Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon } from './Labels';
-
-// Toasts
-import {ToastComponent, ToastProgress} from './Toasts';
-
-// Navigation
-import {Navbar, Stepper, Tabnav, Sidebar}  from './Navigation';
-
-export {
-    // Buttons
-    Button,
-    // Dropdowns
-    DropdownComponent,
-    DropdownFilter,
-    DropdownMultiSelect,
-    DropdownSimpleDatePicker,
-    DropdownDatePicker,
-    // Inputs
-    Checkbox,
-    Input,
-    Radio,
-    Switch,
-    Textarea,
-    InputEmail,
-    // Labels
-    Alert,
-    Icon,
-    LoginSource,
-    PillComponent,
-    Spinner,
-    StatusIcon,
-    // Toasts
-    ToastComponent,
-    ToastProgress,
-    // Navigation
-    Navbar,
-    Stepper,
-    Tabnav,
-    Sidebar
-}

package/src/hooks/index.js

@@ -1,4 +0,0 @@
-import useGetBaseDomain from './useGetBaseDomain';
-import useTextFormatter from './useTextFormatter';
-
-export { useTextFormatter, useGetBaseDomain };

package/src/hooks/useGetBaseDomain.jsx

@@ -1,9 +0,0 @@
-const useGetBaseDomain = () => {
-	// get the base domain from window.location.hostname, e.g. groovinads.com or localhost
-	let hostname = window.location.hostname;
-	if (hostname.includes('.'))
-		hostname = hostname.split('.').slice(-2).join('.');
-	return hostname;
-};
-
-export default useGetBaseDomain;

package/src/hooks/useTextFormatter.jsx

@@ -1,48 +0,0 @@
-import React, { useCallback } from 'react';
-
-const useTextFormatter = () => {
-	const toCamelCase = useCallback((str) => {
-		let s = str?.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
-			if (+match === 0) return ''; // or if (/\s+/.test(match)) for white spaces
-			return index === 0 ? match?.toLowerCase() : match?.toUpperCase();
-		});
-
-		// Ensure the string doesn't start with a number
-		s = s?.replace(/^\d+/, '');
-
-		// Remove any remaining non-alphanumeric characters (excluding underscores)
-		s = s?.replace(/[^a-zA-Z0-9_]/g, '');
-
-		return s;
-	}, []);
-
-	const capitalice = (str) => (str ? `${str.charAt(0).toUpperCase()}${str.slice(1)}` : '');
-
-	const highlightText = (text, query) => {
-		if (!query) return text;
-
-		const parts = text.split(new RegExp(`(${query})`, 'gi'));
-
-		return (
-			<span>
-				{parts.map((part, index) => (
-					<span
-						className={[
-							part.toLowerCase() === query.toLowerCase() &&
-								'highligthed-search',
-						]}
-						key={index}
-					>
-						{part}
-					</span>
-				))}
-			</span>
-		);
-	};
-
-	// Additional methods can be added here
-
-	return { toCamelCase, highlightText, capitalice };
-};
-
-export default useTextFormatter;

package/src/index.js

@@ -1,51 +0,0 @@
-// Buttons
-import Button from "./components/Button/Button";
-
-// Dropdowns
-import {DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker, DropdownSimpleDatePicker} from './components/Dropdowns';
-
-// Inputs
-import {Checkbox, Input, Radio, Switch, Textarea, InputEmail, InputChip} from './components/Inputs';
-
-// Labels
-import {Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon} from './components/Labels';
-
-// Toasts
-import {ToastComponent, ToastProgress} from './components/Toasts';
-
-// Navigation
-import {Navbar, Stepper, Tabnav, Sidebar} from './components/Navigation';
-
-export {
-    // Buttons
-    Button,
-    // Dropdowns
-    DropdownComponent,
-    DropdownFilter,
-    DropdownMultiSelect,
-    DropdownSimpleDatePicker,
-    DropdownDatePicker,
-    // Inputs
-    Checkbox,
-    Input,
-    Radio,
-    Switch,
-    Textarea,
-    InputEmail,
-    InputChip,
-    // Labels
-    Alert,
-    Icon,
-    LoginSource,
-    PillComponent,
-    Spinner,
-    StatusIcon,
-    // Toasts
-    ToastComponent,
-    ToastProgress,
-    // Navigation
-    Navbar,
-    Stepper,
-    Tabnav,
-    Sidebar
-}

package/src/services/components.services.js

@@ -1,29 +0,0 @@
-import urlPath, { basePath } from './url.path';
-import { POST, GET, DELETE } from './helpers';
-
-// GETS
-export const getInfo = async (apiGetInfo) => await GET({ url: `${basePath}${apiGetInfo}`}); // (Sidebar and InputEmail) 
-
-export const authStatus = async () => await GET({ url: urlPath.authStatus });
-
-export const applications = async () => await GET({ url: urlPath.applications });
-
-export const getClientsList = async () =>  await GET({ url: urlPath.clients });
-
-export const getCustomReportsList = async () => await GET(`${urlPath.customReports}/?sort=id_report.desc&offset=0&limit=100`);
-
-// POSTS
-export const postInfo = async (apiPostInfo, data) => await POST({ url: `${basePath}${apiPostInfo}`, data }); // update emails RETAIL MEDIA (notifications)
-
-export const authLogout = async () => await POST({ url: urlPath.authLogout });
-
-export const favApplication = async (appToFav) => await POST({url: `${urlPath.favApps}/${appToFav}`, data: appToFav})
-
-export const clientsLogin = async (clientId) => await POST({ url: urlPath.clientsLogin, data:{ id_client: clientId }});
-
-// DELETES
-export const unfavApplication = async (appToUnfav) => await DELETE({url: `${urlPath.favApps}/${appToUnfav}`});
-
-export const deleteEmails = async (apiDeleteEmail, email) => await DELETE({ url: `${basePath}${apiDeleteEmail}/${email}` }); // delete emails RETAIL MEDIA (notifications)
-
-

package/src/services/helpers.js

@@ -1,32 +0,0 @@
-import axios from 'axios';
-import urlPath from './url.path';
-
-axios.defaults.withCredentials = true;
-
-export const GET = async ({ url }) => {
-	return await axios
-		.get(url, urlPath.headers)
-		.then(({ data }) => data)
-		.catch((response) => Promise.reject(response || 'error en la url'));
-};
-
-export const POST = async ({ url, data }) => {
-	return await axios
-		.post(url, data, urlPath.headers)
-		.then(({ data }) => data)
-		.catch((response) => Promise.reject(response || 'error en la url'));
-};
-
-export const PUT = async ({ url, data }) => {
-	return await axios
-		.put(url, data, urlPath.headers)
-		.then(({ data }) => data)
-		.catch((response) => Promise.reject(response || 'error en la url'));
-};
-
-export const DELETE = async ({ url }) => {
-	return await axios
-		.delete(url, urlPath.headers)
-		.then(({data}) => data)
-		.catch((response) => Promise.reject(response || 'error en la url'));
-};

package/src/services/index.jsx

@@ -1,10 +0,0 @@
-// COMPONENTS SERVICES
-import * as ComponentsService from './components.services';
-
-// URL PATH
-import urlPath from './url.path';
-
-export {
-	ComponentsService,
-	urlPath,
-};

package/src/services/url.path.js

@@ -1,29 +0,0 @@
-import Cookies from 'js-cookie';
-
-const modeEnv = import.meta.env.MODE;
-
-export const basePath =
-	modeEnv === 'production'
-		? 'https://api.groovinads.com/'
-		: modeEnv === 'localdev'
-		? 'https://api-test.groovinads.com/'
-		: 'https://api-dev.groovinads.com/';
-
-export default {
-	authStatus: basePath + 'v2/auth/status',
-	authLogout: basePath + 'v2/auth/logout',
-
-	/* APPS FOR DROPDOWN */
-	applications: basePath + 'v2/applications',
-	favApps: basePath + 'v2/applications/favorite',
-	clients: basePath + 'v2/auth/clients',
-	clientsLogin: basePath + 'v2/auth/clients/login',
-
-	headers: {
-		headers: {
-			'Content-Type': 'application/json',
-			Authorization: 'Bearer ' + Cookies.get('groovinadsAuthToken'),
-			'Accept-Language': 'en',
-		},
-	},
-};

package/src/stories/Alert.stories.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import Alert from '../components/Labels/Alert';
-
-export default {
-  title: 'Labels/Alert',
-  component: Alert,
-};
-
-const Template = (args) => <Alert {...args}>This is an alert component</Alert>;
-
-export const Default = Template.bind({});

package/src/stories/Button.stories.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import Button from '../components/Button/Button';
-
-export default {
-	title: 'Buttons/Button',
-	component: Button,
-};
-
-const Template = (args) => {
-	return (
-		<>
-			<Button {...args} onClick={() => console.log('Button clicked')}
-			>
-				Disabled Button
-			</Button>
-		</>
-	);
-};
-
-export const Default = Template.bind({});

package/src/stories/Checkbox.stories.jsx

@@ -1,17 +0,0 @@
-import React, { useState } from 'react';
-import Checkbox from '../components/Inputs/Checkbox';
-
-export default {
-  title: 'Inputs/Checkbox',
-  component: Checkbox,
-};
-
-const Template = (args) => {
-  const [status, setStatus] = useState(false);
-
-  return (
-    <Checkbox {...args} status={status} setStatus={setStatus}>Checkbox</Checkbox>
-  )
-};
-
-export const Default = Template.bind({});

package/src/stories/DropdownComponent.stories.jsx

@@ -1,89 +0,0 @@
-import React, { useState } from 'react';
-import DropdownComponent from '../components/Dropdowns/DropdownComponent';
-import { DropdownMenu, DropdownToggle, DropdownItem } from 'react-bootstrap';
-
-import { Button } from '../components/Button';
-import { Icon } from '../components/Labels';
-
-export default {
-	title: 'Dropdown/DropdownComponent',
-	component: DropdownComponent,
-};
-
-const Template = (args) => {
-	const [show, setShow] = useState(false);
-	const handleToggle = () => setShow((prevShow) => !prevShow);
-
-	return (
-		<div style={{ marginLeft: 150 }}>
-			<button onClick={() => setShow(false)}>Close</button>
-			<button onClick={() => setShow(true)}>Open</button>
-			<div className='d-flex'>
-				<DropdownComponent
-					{...args}
-					show={show}
-					setShow={setShow}
-					autoClose={'outside'}
-				>
-					<DropdownToggle onClick={() => handleToggle()}>Toggle</DropdownToggle>
-					<DropdownMenu>
-						<DropdownItem>
-
-							<DropdownComponent
-								{...args}
-								autoClose={'outside'}
-								drop={'end'}
-							>
-								<DropdownToggle as={'div'}>Toggle</DropdownToggle>
-								<DropdownMenu>
-									<DropdownItem>Item 1</DropdownItem>
-									<DropdownItem>Item 2</DropdownItem>
-									<DropdownItem>Item 3</DropdownItem>
-								</DropdownMenu>
-							</DropdownComponent>
-
-						</DropdownItem>
-						<DropdownItem>Item 2</DropdownItem>
-						<DropdownItem>Item 3</DropdownItem>
-					</DropdownMenu>
-				</DropdownComponent>
-
-				<DropdownComponent {...args} autoClose={'outside'}>
-					<Button
-						variant='outline'
-						icon='plus'
-						className='dropdown-toggle'
-						// onClick={() => handleToggle()}
-					>
-						<span>Add filters</span>
-						<Icon iconName='chevron-down' className='ms-2' />
-					</Button>
-
-					<DropdownMenu>
-						{[{ name: '1' }, { name: '2' }].map((filter) => (
-							<DropdownItem
-								key={filter.name}
-								onClick={() => console.log('click item')}
-								// disabled={
-								// 	// If already selected, show as disabled
-								// 	selectedFilters[filter] ? true : false
-								// }
-								// onClick={() => {
-								// 	setSelectedFilters((prevFilters) => ({
-								// 		...prevFilters,
-								// 		[filter]: [],
-								// 	}));
-								// 	setShowAddFilterDropdown(false);
-								// }}
-							>
-								{filter.name}
-							</DropdownItem>
-						))}
-					</DropdownMenu>
-				</DropdownComponent>
-			</div>
-		</div>
-	);
-};
-
-export const Default = Template.bind({});

package/src/stories/DropdownDatePicker.stories.jsx

@@ -1,69 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { DropdownDatePicker } from '../components/Dropdowns';
-
-export default {
-	title: 'Dropdown/DropdownDatePicker',
-	component: DropdownDatePicker,
-};
-
-const Template = (args) => {
-	const [show, setShow] = useState(false);
-
-	const [dateFrom, setDateFrom] = useState('');
-	const [dateTo, setDateTo] = useState('');
-
-	const [dateFrom2, setDateFrom2] = useState('');
-	const [dateTo2, setDateTo2] = useState('');
-
-	const handleToggle = () => setShow((prevShow) => !prevShow);
-
-	useEffect(() => {
-		console.log('dates From:', dateFrom);
-	}, [dateFrom]);
-
-	useEffect(() => {
-		console.log('dates To:', dateTo);
-	}, [dateTo]);
-
-	return (
-		<>
-			<button onClick={() => setShow(!show)}>Toggle</button>
-			<div>
-				<DropdownDatePicker
-					{...args}
-					// show={show}
-					// setShow={setShow}
-					// onToggle={handleToggle}
-					// variant='filter'
-					dateFrom={dateFrom}
-					setDateFrom={setDateFrom}
-					dateTo={dateTo}
-					setDateTo={setDateTo}
-					// dateFrom2={dateFrom2}
-					// setDateFrom2={setDateFrom2}
-					// dateTo2={dateTo2}
-					// 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>
-		</>
-	);
-};
-
-export const Default = Template.bind({});