groovinads-ui 1.2.51 → 1.2.53

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.51",
+	"version": "1.2.53",
 	"keywords": [
 		"css",
 		"sass",
@@ -74,6 +74,7 @@
 		"build-lib": "rollup -c"
 	},
 	"dependencies": {
+		"date-fns": "^4.1.0",
 		"react-datepicker": "^7.3.0",
 		"react-responsive": "^10.0.0"
 	}

package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react'
+import { format } from 'date-fns';
 
 // COMPONENTS
 import { Dropdown } from 'react-bootstrap'
@@ -17,24 +18,18 @@ export default function DropdownSimpleDatePicker({
     overflow = false,
     date,
     setDate,
-	handleClear,
+    handleClear,
 }) {
-    
+
     const [internalShow, setInternalShow] = useState(!!show);
     const dropdownRef = useRef(null);
-    
-    const handleGlobalToggle = (event) => {
-        if (event.detail !== inputLabel) {
-            closeDropdown();
-        }
-    };
 
     const internalToggle = () => {
         const newShowState = !internalShow;
         setInternalShow(newShowState);
 
-        if (newShowState)  window.dispatchEvent(new CustomEvent('dropdownToggle', { detail: inputLabel }));
-        
+        if (newShowState) window.dispatchEvent(new CustomEvent('dropdownToggle', { detail: inputLabel }));
+
         try {
             onToggle();
         } catch (error) { }
@@ -54,8 +49,8 @@ export default function DropdownSimpleDatePicker({
         }, 200);
     };
 
-   
-	const clearDate = () => {
+
+    const clearDate = () => {
         closeDropdown();
 
         if (handleClear) {
@@ -95,7 +90,7 @@ export default function DropdownSimpleDatePicker({
             >
                 <span className='dropdown-label'>{inputLabel}</span>
                 <span>
-                    {(date || '').toString().split('00')[0]}
+                    {date ? format(new Date(date), 'EEE MMM dd yyyy') : ''}
                 </span>
 
                 <Icon iconName='angle-down' className={'caret'} />
@@ -142,14 +137,14 @@ export default function DropdownSimpleDatePicker({
 }
 
 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,
 };

package/src/components/Toasts/Toast/ToastCardComponent.jsx

@@ -0,0 +1,49 @@
+import React, { children, useState } from 'react';
+import Toast from 'react-bootstrap/Toast';
+import { Icon } from '../../Labels';
+
+function ToastCardComponent({ variant, autoClose, children, className, position }) {
+	const [show, setShow] = useState(true);
+
+	const toggleShow = () => setShow(!show);
+
+	const variantIcons = {
+		info: 'circle-info',
+		success: 'circle-check',
+		warning: 'triangle-exclamation',
+		error: 'circle-xmark',
+	};
+
+	console.log('Hola');
+
+	return (
+		<Toast
+			onClose={toggleShow}
+			show={show}
+			delay={autoClose ? 3500 : null}
+			autohide={autoClose}
+			className={`${position} ${variant} ${className ? className : ''}`}
+		>
+			<Toast.Body>
+				<div className='toast-wrapper'>
+					<div className='toast-type'>
+						<Icon
+							style={'solid'}
+							iconName={variantIcons[variant]}
+							scale={1}
+							className={'icon'}
+						/>
+					</div>
+					<span>{children}</span>
+				</div>
+				{!autoClose && (
+					<button className='btn-close' onClick={toggleShow}>
+						<Icon style={'solid'} iconName={'xmark'} scale={1} />
+					</button>
+				)}
+			</Toast.Body>
+		</Toast>
+	);
+}
+
+export default ToastCardComponent;

package/src/components/Toasts/ToastComponent.jsx

@@ -1,82 +1,45 @@
-import React, { children, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 // BOOTSTRAP
-import Toast from 'react-bootstrap/Toast';
 import { ToastContainer } from 'react-bootstrap';
 
 // COMPONENTS
-import Icon from '../Labels/Icon';
+import ToastCardComponent from './Toast/ToastCardComponent';
 
-const ToastComponent = ({
-	variant = 'info',
-	autoClose = true,
-	position = 'bottom-start',
-	children,
-	className,
-}) => {
-	const [show, setShow] = useState(true);
+const ToastComponent = ({ toast, position = 'bottom-end' }) => {
+	const [toastsHistory, setToastsHistory] = useState([]);
 
-	const toggleShow = () => setShow(!show);
-
-	const delay = autoClose ? 3500 : null;
-	const autohide = autoClose ? true : false;
-
-	const variantIcons = {
-		info: 'circle-info',
-		success: 'circle-check',
-		warning: 'triangle-exclamation',
-		error: 'circle-xmark',
-	};
-
-	const iconClass = variantIcons[variant];
+	useEffect(() => {
+		if (toast) setToastsHistory([...toastsHistory, toast]);
+	}, [toast]);
 
 	return (
 		<ToastContainer position={position}>
-			<Toast
-				onClose={toggleShow}
-				show={show}
-				delay={delay}
-				autohide={autohide}
-				className={`${position} ${variant} ${className ? className : ''}`}
-			>
-				<Toast.Body>
-					<div className='toast-wrapper'>
-						<div className='toast-type'>
-							<Icon
-								style={'solid'}
-								iconName={iconClass}
-								scale={1}
-								className={'icon'}
-							/>
-						</div>
-						<span>{children}</span>
-					</div>
-					{!autoClose && (
-						<button className='btn-close' onClick={toggleShow}>
-							<Icon
-								style={'solid'}
-								iconName={'xmark'}
-								scale={1}
-							/>
-						</button>
-					)}
-				</Toast.Body>
-			</Toast>
+			{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 = {
-	variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
-	autoClose: PropTypes.bool,
+	toast: PropTypes.object,
 	position: PropTypes.oneOf([
 		'top-start',
 		'top-end',
 		'bottom-start',
 		'bottom-end',
 	]),
-	className: PropTypes.string,
 };
 
-export default ToastComponent;
+export default ToastComponent;

package/src/stories/ToastComponent.stories.jsx

@@ -1,11 +1,62 @@
 import React, { useState } from 'react';
 import ToastComponent from '../components/Toasts/ToastComponent';
 
+import Button from '../components/Button/Button';
+
 export default {
-  title: 'Toasts/ToastComponent',
-  component: ToastComponent,
+	title: 'Toasts/ToastComponent',
+	component: ToastComponent,
 };
 
-const Template = (args) => <ToastComponent {...args}>ToastComponent</ToastComponent>;
+const Template = (args) => {
+
+  const [selected, setSelected] = useState(null);
+
+  const toasts = [
+    {
+      variant: 'info',
+      autoClose: true,
+      children: 'Se eliminó',
+      // className,
+    },
+    {
+      variant: 'success',
+      autoClose: true,
+      children: 'Se guardó',
+      // className,
+    },
+    {
+      variant: 'warning',
+      autoClose: true,
+      children: 'Se modificó',
+      // className,
+    },
+    {
+      variant: 'error',
+      autoClose: true,
+      children: 'Error',
+      // className,
+    },
+    {
+      variant: 'info',
+      autoClose: false,
+      children: 'No se puede eliminar',
+      // className,
+    }
+  ]
+
+  const pushToast = () => {
+    setSelected(toasts[Math.floor(Math.random() * toasts.length)]);
+  }
+
+	return (
+		<>
+			<Button onClick={pushToast}>Nuevo toast</Button>
+			<ToastComponent toast={selected} {...args}>
+				ToastComponent
+			</ToastComponent>
+		</>
+	);
+};
 
-export const Default = Template.bind({});
+export const Default = Template.bind({});