groovinads-ui 1.2.74 → 1.9.0

package/.yarnrc.yml

@@ -1,3 +0,0 @@
-nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.1.1.cjs

package/rollup.config.mjs

@@ -1,42 +0,0 @@
-import babel from 'rollup-plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import external from 'rollup-plugin-peer-deps-external';
-import { terser } from 'rollup-plugin-terser';
-import postcss from 'rollup-plugin-postcss';
-import commonjs from 'rollup-plugin-commonjs';
-import json from '@rollup/plugin-json';
-
-export default [
-  {
-    input: './src/index.js',
-    output: [
-      {
-        file: 'dist/index.js',
-        format: 'cjs',
-      },
-      {
-        file: 'dist/index.es.js',
-        format: 'es',
-        exports: 'named',
-      }
-    ],
-    plugins: [
-      json(),
-      commonjs({
-        include: 'node_modules/**',  // incluye todos los módulos de node_modules
-      }),
-      postcss({
-        plugins: [],
-        minimize: true,
-      }),
-      babel({
-        exclude: 'node_modules/**',
-        presets: ['@babel/preset-react']
-      }),
-      external(),
-      // typescript(), // Añade esto para procesar archivos TypeScript
-      resolve({extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json']}),
-      terser(),
-    ]
-  }
-];

package/src/components/Button/Button.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// COMPONENTS
-import { Icon, Spinner } from '../Labels'
-
-const Button = ({
-    variant = 'primary',
-    size = 'md',
-    onClick,
-    children,
-    icon,
-    iconPosition = 'start',
-    className = '',
-    style = 'default',
-    processing = false,
-    disabled = false,
-}) => {
-    // Icon
-    const content = processing ? (
-    <>
-        <Spinner scale={1} />
-        {children && <span>{children}…</span>}
-    </>
-    ) : icon ? (
-        iconPosition === 'end' ? (
-            <>
-                {children && <span>{children}</span>}
-                <Icon
-                    style={'solid'}
-                    iconName={icon}
-                    scale={1}
-                />
-            </>
-        ) : (
-            <>
-                <Icon
-                    style={'solid'}
-                    iconName={icon}
-                    scale={1}
-                />
-                {children && <span>{children}</span>}
-            </>
-        )
-    ) : (
-        children && <span>{children}</span>
-    );
-
-    return (
-        <button
-            className={
-                `btn ${className}
-                btn-${variant}
-                btn-${style}
-                btn-${size}
-                ${processing ? 'btn-processing' : ''}
-                ${disabled ? 'disabled' : ''}`
-            }
-            onClick={onClick}
-        >
-            {content}
-        </button>
-    );
-};
-
-Button.propTypes = {
-    variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
-    size: PropTypes.oneOf(['xs', 'md', 'lg']),
-    onClick: PropTypes.func,
-    children: PropTypes.node,
-    icon: PropTypes.string,
-    iconPosition: PropTypes.oneOf(['start', 'end']),
-    className: PropTypes.string,
-    style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
-    processing: PropTypes.bool,
-};
-
-export default Button;

package/src/components/Button/index.js

@@ -1,3 +0,0 @@
-import Button from "./Button";
-
-export { Button };

package/src/components/Dropdowns/DropdownComponent.jsx

@@ -1,135 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Dropdown from 'react-bootstrap/Dropdown';
-
-const DropdownComponent = ({
-	autoClose = false,
-	children,
-	className = '',
-	drop,
-	fullWidth = false,
-	onToggle,
-	overflow = false,
-	align = 'start',
-	show,
-	setShow,
-}) => {
-	const [innerShow, setInnerShow] = useState(!!show);
-	const dropdownRef = useRef(null);
-	const menuRef = useRef(null);
-
-	const [Toggle, Menu] = children;
-
-	const onAutoclose = () => {
-		// Cierra el dropdown solo si autoClose es 'true' o 'inside'
-		if (autoClose === true || autoClose === 'inside') {
-			setInnerShow(false);
-			if (setShow) setShow(false);
-		}
-	};
-
-	const modifiedToggle = React.cloneElement(Toggle, {
-		align,
-		onClick: (e) => {
-			// Se eliminan e.stopPropagation() y e.preventDefault()
-			// para que el evento se maneje correctamente
-			Toggle.props && Toggle.props.onClick
-				? Toggle.props.onClick()
-				: setInnerShow(!innerShow);
-		},
-	});
-
-	const modifiedMenu = React.cloneElement(Menu, {
-		as: 'ul',
-		align,
-		className: fullWidth ? 'w-100' : '',
-		ref: menuRef,
-		popperConfig: overflow
-			? {
-					strategy: 'fixed',
-					onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')),
-				}
-			: undefined,
-		children: Menu.props.children.length
-			? Menu.props.children.map((child, i) =>
-					React.cloneElement(child, {
-						as: 'li',
-						key: `${child}${i}`,
-						onClick: () => {
-							if (child.props.onClick) {
-								child.props.onClick();
-							}
-							onAutoclose();
-						},
-					}),
-				)
-			: Menu.props.children.map((child, i) =>
-					React.cloneElement(Menu.props.children, {
-						as: 'li',
-						key: `${child}${i}`,
-						onClick: () => {
-							if (
-								Menu.props.children.props &&
-								Menu.props.children.props.onClick
-							) {
-								Menu.props.children.props.onClick();
-							}
-							onAutoclose();
-						},
-					}),
-				),
-	});
-
-	useEffect(() => {
-		setInnerShow(show);
-	}, [show]);
-
-	useEffect(() => {
-		const handleClickOutside = (event) => {
-			if (
-				dropdownRef.current &&
-				!dropdownRef.current.contains(event.target) &&
-				(autoClose === true || autoClose === 'outside')
-			) {
-				setInnerShow(false);
-				if (setShow) setShow(false);
-			}
-		};
-		document.addEventListener('click', handleClickOutside);
-		return () => {
-			document.removeEventListener('click', handleClickOutside);
-		};
-	}, [autoClose]);
-
-	return (
-		<Dropdown
-			autoClose={autoClose}
-			show={innerShow}
-			onToggle={onToggle}
-			className={className}
-			align={align}
-			drop={drop}
-			ref={dropdownRef}
-		>
-			{modifiedToggle}
-			{modifiedMenu}
-		</Dropdown>
-	);
-};
-
-DropdownComponent.propTypes = {
-	children: PropTypes.node.isRequired,
-	autoClose: PropTypes.oneOfType([
-		PropTypes.bool,
-		PropTypes.oneOf(['inside', 'outside']),
-	]),
-	show: PropTypes.bool,
-	onToggle: PropTypes.func,
-	className: PropTypes.string,
-	overflow: PropTypes.bool,
-	align: PropTypes.oneOf(['start', 'end']),
-	fullWidth: PropTypes.bool,
-	drop: PropTypes.oneOf(['up', 'down', 'start', 'end']),
-};
-
-export default DropdownComponent;

package/src/components/Dropdowns/DropdownFilter.jsx

@@ -1,304 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-
-// BOOTSTRAP
-import Dropdown from 'react-bootstrap/Dropdown';
-
-// COMPONENTS
-import Button from '../Button/Button';
-import { Icon, PillComponent } from '../Labels';
-import { Checkbox, Input } from '../Inputs';
-
-const DropdownFilter = ({
-	title,
-	valuesSelected = [],
-	setValuesSelected,
-	values = [],
-	menuType = 'simple',
-	locked = false,
-	onRemoveFilter,
-	show,
-	setShow,
-	onToggle,
-	overflow = false,
-	className = '',
-	autoClose,
-}) => {
-	const [query, setQuery] = useState('');
-
-	const [innerShow, setInnerShow] = useState(!!show);
-
-	const dropdownRef = useRef(null);
-
-	const EmptySpace = () => {
-		return (
-			<div className='dropdown-filter-empty-space'>
-				<img
-					src={'https://ui.groovinads.com/assets/not-found.svg'}
-					alt='Sad magnifier on abstract background'
-				/>
-				<div>
-					<h5>Value not found</h5>
-					<p>It looks like this value does not exist.</p>
-				</div>
-			</div>
-		);
-	};
-
-	const handleCheckbox = (value, i) => {
-		if (value) setValuesSelected([...valuesSelected, values[i]]);
-		else setValuesSelected(valuesSelected.filter((item) => item !== values[i]));
-	};
-
-	const selectAll = () => {
-		setValuesSelected([...values]);
-	};
-
-	const clearSelection = () => {
-		setValuesSelected([]);
-	};
-
-	const handlePill = (index) =>
-		setValuesSelected(valuesSelected.filter((item, i) => i !== index));
-
-	useEffect(() => {
-		setInnerShow(show);
-	}, [show]);
-
-	const handleClickOutside = useCallback((event) => {
-		if (
-			dropdownRef?.current &&
-			!dropdownRef?.current.contains(event?.target) &&
-			(autoClose === true || autoClose === 'outside')
-		) {
-			setInnerShow(false);
-			setShow(false);
-		}
-	}, []);
-
-	useEffect(() => {
-		document.addEventListener('click', handleClickOutside);
-		return () => {
-			document.removeEventListener('click', handleClickOutside);
-		};
-	}, []);
-
-	return (
-		<Dropdown
-			onToggle={onToggle}
-			className={`dropdown-filter ${locked ? 'locked' : ''} ${className}`}
-			autoClose={autoClose}
-			show={innerShow}
-			ref={dropdownRef}
-		>
-			<Dropdown.Toggle
-				variant='toggle-filter'
-				onClick={(e) => {
-					e.stopPropagation(); // Detiene la propagación del clic
-					setInnerShow((prevShow) => !prevShow); // Alterna el estado interno del dropdown
-					setShow((prevShow) => !prevShow); // Alterna el estado del dropdown en el estado externo también
-				}}
-			>
-				<div className='filter-heading'>
-					<div className='filter-title'>
-						<span>{title}</span>
-						{locked && (
-							<Icon style={'solid'} iconName={'lock-keyhole'} scale={0.7} />
-						)}
-					</div>
-					<Icon
-						style={'solid'}
-						iconName={'chevron-down'}
-						scale={1}
-						className='caret'
-					/>
-				</div>
-				<div className='filter-values'>
-					{valuesSelected.length === values.length
-						? 'All selected'
-						: valuesSelected.length
-							? valuesSelected.join('; ')
-							: 'None'}
-				</div>
-			</Dropdown.Toggle>
-			{!locked && (
-				<Button
-					variant='terciary'
-					icon='xmark-circle'
-					size='md'
-					className='remove-filter'
-					onClick={onRemoveFilter}
-				/>
-			)}
-
-			{menuType === 'simple' && (
-				<Dropdown.Menu
-					className='dropdown-menu-simple'
-					popperConfig={
-						overflow
-							? {
-									strategy: 'fixed',
-									onFirstUpdate: () =>
-										window.dispatchEvent(new CustomEvent('scroll')),
-								}
-							: undefined
-					}
-				>
-					<div className='dropdown-menu-wrapper'>
-						<Input
-							size='xs'
-							label='Search'
-							icon='magnifying-glass'
-							className='w-100'
-							value={query}
-							onChange={({ target }) => setQuery(target.value)}
-							customRef={show}
-						/>
-						{values.filter((item) =>
-							item.toString().toLowerCase().includes(query.toLowerCase()),
-						).length > 0 ? (
-							<ul className='dropdown-filter-list'>
-								{/* List values */}
-								{values
-									.filter((item) =>
-										item.toString().toLowerCase().includes(query.toLowerCase()),
-									)
-									.map((value, index) => {
-										return (
-											<Checkbox
-												setStatus={(status) => {
-													handleCheckbox(status, index);
-												}}
-												status={valuesSelected.includes(value)}
-												key={'Dropdown.Simple.Checkbox' + index}
-											>
-												{value}
-											</Checkbox>
-										);
-									})}
-							</ul>
-						) : (
-							<EmptySpace />
-						)}
-					</div>
-				</Dropdown.Menu>
-			)}
-			{menuType === 'selection' && (
-				<Dropdown.Menu
-					className='dropdown-menu-selection'
-					popperConfig={
-						overflow
-							? {
-									strategy: 'fixed',
-									onFirstUpdate: () =>
-										window.dispatchEvent(new CustomEvent('scroll')),
-								}
-							: undefined
-					}
-				>
-					<div className='dropdown-menu-wrapper'>
-						<div className='dropdown-filter-list-wrapper'>
-							<Input
-								size='xs'
-								label='Search'
-								icon='magnifying-glass'
-								className='w-100'
-								value={query}
-								onChange={({ target }) => setQuery(target.value)}
-								customRef={show}
-							/>
-							<h4>All values ({values.length})</h4>
-							{values.filter((item) =>
-								item.toString().toLowerCase().includes(query.toLowerCase()),
-							).length > 0 ? (
-								<>
-									<ul className='dropdown-filter-list'>
-										{/* List values */}
-										{values
-											.filter((item) =>
-												item
-													.toString()
-													.toLowerCase()
-													.includes(query.toLowerCase()),
-											)
-											.map((value, index) => {
-												return (
-													<Checkbox
-														setStatus={(status) => {
-															handleCheckbox(status, index);
-														}}
-														status={valuesSelected.includes(value)}
-														key={'Dropdown.Selection.Checkbox' + index}
-													>
-														{value}
-													</Checkbox>
-												);
-											})}
-									</ul>
-								</>
-							) : (
-								<EmptySpace />
-							)}
-						</div>
-						<div className='dropdown-filter-values-wrapper'>
-							<div className='dropdown-filter-buttons-wrapper'>
-								<Button
-									icon={'check'}
-									size='xs'
-									variant='terciary'
-									onClick={selectAll}
-								>
-									Select all
-								</Button>
-								<Button
-									icon={'xmark'}
-									size='xs'
-									variant='terciary'
-									onClick={clearSelection}
-								>
-									Clear selection
-								</Button>
-							</div>
-							<h4>Selected values ({valuesSelected.length})</h4>
-							<div className='dropdown-filter-selected-list'>
-								{/* List selected values */}
-								{valuesSelected.map((value, index) => {
-									return (
-										<PillComponent
-											color='light'
-											closeButton={true}
-											onClick={() => {
-												handlePill(index);
-											}}
-											key={'Dropdown.PillComponent' + index}
-										>
-											{value}
-										</PillComponent>
-									);
-								})}
-							</div>
-						</div>
-					</div>
-				</Dropdown.Menu>
-			)}
-		</Dropdown>
-	);
-};
-
-DropdownFilter.propTypes = {
-	title: PropTypes.string,
-	valuesSelected: PropTypes.array,
-	setValuesSelected: PropTypes.func,
-	values: PropTypes.array,
-	menuType: PropTypes.oneOf(['simple', 'selection']),
-	locked: PropTypes.bool,
-	onRemoveFilter: PropTypes.func,
-	show: PropTypes.bool,
-	setShow: PropTypes.func,
-	onToggle: PropTypes.func,
-	overflow: PropTypes.bool,
-	className: PropTypes.string,
-	autoClose: PropTypes.bool,
-};
-
-export default DropdownFilter;