siam-ui-utils 2.0.25 → 2.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.0.25",
+  "version": "2.0.26",
   "keywords": [
     "ampf-react",
     "ampf-utils",
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@types/react-intl": "^3.0.0",
+    "events": "^3.3.0",
     "html5-file-selector": "^2.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
@@ -46,9 +47,14 @@
     "@testing-library/react": "^16.0.0",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/parser": "^8.2.0",
-    "@vitejs/plugin-react": "^4.3.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
+    "@eslint/js": "^9.9.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",

package/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/App.jsx

@@ -5,10 +5,17 @@ import {
   AccordionHeader,
   AccordionItem,
 } from 'reactstrap';
-import { TomarFoto, DropzoneUploader, DropzoneUploaderDniDigital } from './';
+import {
+  TomarFoto,
+  DropzoneUploader,
+  DropzoneUploaderDniDigital,
+  NotificationContainer,
+} from './';
+import './index.css';
+import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
 
-function App() {
+const App = () => {
   const [open, setOpen] = useState('0');
   const toggle = (id) => {
     if (open === id) {
@@ -20,6 +27,7 @@ function App() {
 
   return (
     <div>
+      <NotificationContainer />
       <Accordion open={open} toggle={toggle}>
         <AccordionItem>
           <AccordionHeader targetId="1">Tomar Foto</AccordionHeader>
@@ -56,7 +64,7 @@ function App() {
           <AccordionBody accordionId="3">
             <DropzoneUploaderDniDigital
               totalFiles={0}
-              maxFiles={1}
+              maxFiles={2}
               onChangeFiles={() => {
                 console.log('onChange');
               }}
@@ -66,6 +74,6 @@ function App() {
       </Accordion>
     </div>
   );
-}
+};
 
 export default App;

package/src/archivos-adjuntos/dropzone-uploader-dni-digital/index.jsx

@@ -1,153 +1,152 @@
 /* eslint-disable react/prop-types */
-import { useState } from 'react'
-
-import { Button } from 'reactstrap'
-
-import { getDroppedOrSelectedFiles } from 'html5-file-selector'
-import Dropzone from 'react-dropzone-uploader'
-import 'react-dropzone-uploader/dist/styles.css'
-import { NotificationManager } from 'react-notifications'
-import { pdfImage, IconButtonSvg } from '../../iconos'
-import '../dropzone-uploader.css'
+import { useState } from 'react';
+import { Button } from 'reactstrap';
+import { getDroppedOrSelectedFiles } from 'html5-file-selector';
+import Dropzone from 'react-dropzone-uploader';
+import 'react-dropzone-uploader/dist/styles.css';
+import { NotificationManager } from '../../react-notifications';
+import { pdfImage, IconButtonSvg } from '../../iconos';
+import '../dropzone-uploader.css';
 
 export const DropzoneUploaderDniDigital = ({
-	accept = 'image/*, application/pdf',
-	classNames = '',
-	onChangeFiles,
-	totalFiles,
-	label = 'Cargar Dni',
-	maxSize = 2,
+  accept = 'image/*, application/pdf',
+  classNames = '',
+  onChangeFiles,
+  totalFiles,
+  label = 'Cargar Dni',
+  maxSize = 2,
 }) => {
-	const [files, setFiles] = useState([])
+  const [files, setFiles] = useState([]);
 
-	const handleChangeStatus = ({ file }, status) => {
-		if (status === 'done') {
-			const filesTemp = [...files]
-			filesTemp.push(file)
-			setFiles(filesTemp)
-			onChangeFiles(filesTemp)
-		} else if (status === 'removed') {
-			const filesTemp = [...files]
-			const index = filesTemp.indexOf(file)
-			if (index > -1) {
-				filesTemp.splice(index, 1)
-			}
-			setFiles(filesTemp)
-			onChangeFiles(filesTemp)
-		}
-	}
+  const handleChangeStatus = ({ file }, status) => {
+    if (status === 'done') {
+      const filesTemp = [...files];
+      filesTemp.push(file);
+      setFiles(filesTemp);
+      onChangeFiles(filesTemp);
+    } else if (status === 'removed') {
+      const filesTemp = [...files];
+      const index = filesTemp.indexOf(file);
+      if (index > -1) {
+        filesTemp.splice(index, 1);
+      }
+      setFiles(filesTemp);
+      onChangeFiles(filesTemp);
+    }
+  };
 
-	const getFilesFromEvent = (e) => {
-		return new Promise((resolve) => {
-			getDroppedOrSelectedFiles(e).then((chosenFiles) => {
-				resolve(chosenFiles.map((f) => f.fileObject))
-			})
-		})
-	}
+  const getFilesFromEvent = (e) => {
+    return new Promise((resolve) => {
+      getDroppedOrSelectedFiles(e).then((chosenFiles) => {
+        resolve(chosenFiles.map((f) => f.fileObject));
+      });
+    });
+  };
 
-	const CustomPreview = ({ fileWithMeta }) => {
-		const { meta, remove } = fileWithMeta
-		if (meta.size / (1024 * 1024) > maxSize) {
-			NotificationManager.error(
-				'El archivo supera el tamaño máximo',
-				'Advertencia'
-			)
-			remove()
-		}
-		return (
-			<div
-				className='dropzone-upload-previewContainer'
-				style={{ width: '100%', display: 'flex', alignItems: 'center' }}
-			>
-				{meta.type === 'application/pdf' ? (
-					<>
-						<IconButtonSvg
-							className='form-control flex'
-							svg={pdfImage}
-							svgOver={pdfImage}
-							height='1.6rem'
-							width='1.6rem'
-							title={meta.name}
-						/>
-						<p style={{ paddingRight: '1rem' }}>
-							{meta.name.length > 17
-								? meta.name.substring(0, 17) + '...'
-								: meta.name}
-						</p>
-					</>
-				) : (
-					<>
-						<img
-							className='dropzone-upload-previewImage mt-1'
-							src={meta.previewUrl}
-							alt={meta.name}
-							style={{
-								width: '110px',
-								height: '110px',
-								objectFit: 'cover',
-								marginRight: '0.5rem',
-							}}
-						/>
-						<div className='dropzone-upload-file-name-container'>
-							<p className='dropzone-upload-file-name' title={meta.name}>
-								{meta.name}
-							</p>
-						</div>
-					</>
-				)}
-				<button
-					style={{ marginTop: '0rem' }}
-					onClick={remove}
-					className='dropzone-upload-delete-btn simple-icon-trash'
-				></button>
-			</div>
-		)
-	}
+  const CustomPreview = ({ fileWithMeta }) => {
+    const { meta, remove } = fileWithMeta;
+    console.log('meta.size :>> ', meta.size);
+    if (meta.size / (1024 * 1024) > maxSize) {
+      NotificationManager.error(
+        'El archivo supera el tamaño máximo',
+        'Advertencia',
+      );
+      remove();
+    }
+    return (
+      <div
+        className="dropzone-upload-previewContainer"
+        style={{ width: '100%', display: 'flex', alignItems: 'center' }}
+      >
+        {meta.type === 'application/pdf' ? (
+          <>
+            <IconButtonSvg
+              className="form-control flex"
+              svg={pdfImage}
+              svgOver={pdfImage}
+              height="1.6rem"
+              width="1.6rem"
+              title={meta.name}
+            />
+            <p style={{ paddingRight: '1rem' }}>
+              {meta.name.length > 17
+                ? meta.name.substring(0, 17) + '...'
+                : meta.name}
+            </p>
+          </>
+        ) : (
+          <>
+            <img
+              className="dropzone-upload-previewImage mt-1"
+              src={meta.previewUrl}
+              alt={meta.name}
+              style={{
+                width: '110px',
+                height: '110px',
+                objectFit: 'cover',
+                marginRight: '0.5rem',
+              }}
+            />
+            <div className="dropzone-upload-file-name-container">
+              <p className="dropzone-upload-file-name" title={meta.name}>
+                {meta.name}
+              </p>
+            </div>
+          </>
+        )}
+        <button
+          style={{ marginTop: '0rem' }}
+          onClick={remove}
+          className="dropzone-upload-delete-btn simple-icon-trash"
+        ></button>
+      </div>
+    );
+  };
 
-	const Input = ({ accept, onFiles, getFilesFromEvent }) => {
-		const text = totalFiles > 0 ? `${2 - totalFiles} archivos más` : `${label}`
-		return (
-			<>
-				<Button
-					outline
-					block
-					size='xs'
-					className='mt-5 ml-5'
-					onClick={() => document.getElementById('fileInput').click()}
-				>
-					{text}
-					<input
-						id='fileInput'
-						style={{ display: 'none' }}
-						type='file'
-						accept={accept}
-						multiple
-						onChange={(e) => {
-							getFilesFromEvent(e).then((chosenFiles) => {
-								onFiles(chosenFiles)
-							})
-						}}
-					/>
-				</Button>
-			</>
-		)
-	}
+  const Input = ({ accept, onFiles, getFilesFromEvent }) => {
+    const text = totalFiles > 0 ? `${2 - totalFiles} archivos más` : `${label}`;
+    return (
+      <>
+        <Button
+          outline
+          block
+          size="xs"
+          className="mt-5 ml-5"
+          onClick={() => document.getElementById('fileInput').click()}
+        >
+          {text}
+          <input
+            id="fileInput"
+            style={{ display: 'none' }}
+            type="file"
+            accept={accept}
+            multiple
+            onChange={(e) => {
+              getFilesFromEvent(e).then((chosenFiles) => {
+                onFiles(chosenFiles);
+              });
+            }}
+          />
+        </Button>
+      </>
+    );
+  };
 
-	return (
-		<div className={classNames}>
-			<Dropzone
-				disableUpload={false}
-				maxFiles={totalFiles < 2 ? 2 : 0}
-				maxSize={maxSize} // en megas
-				InputComponent={Input}
-				PreviewComponent={CustomPreview}
-				classNames={{ dropzone: 'dropzone-upload-frame' }}
-				onChangeStatus={handleChangeStatus}
-				getFilesFromEvent={getFilesFromEvent}
-				accept={accept}
-			/>
-		</div>
-	)
-}
+  return (
+    <div className={classNames}>
+      <Dropzone
+        disableUpload={false}
+        maxFiles={totalFiles < 2 ? 2 : 0}
+        maxSize={maxSize} // en megas
+        InputComponent={Input}
+        PreviewComponent={CustomPreview}
+        classNames={{ dropzone: 'dropzone-upload-frame' }}
+        onChangeStatus={handleChangeStatus}
+        getFilesFromEvent={getFilesFromEvent}
+        accept={accept}
+      />
+    </div>
+  );
+};
 
-export default DropzoneUploaderDniDigital
+export default DropzoneUploaderDniDigital;

package/src/index.css

@@ -0,0 +1,74 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 0.2;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 1.2em;
+  line-height: 1.1;
+}
+
+h2 {
+  font-size: 1.2em;
+  line-height: 1.1;
+}
+
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.js

@@ -4,3 +4,4 @@ export * from './bridges';
 export * from './CustomBootstrap';
 export * from './CustomSelectInput';
 export * from './tomar-foto';
+export * from './react-notifications';

package/src/react-notifications/Notification.jsx

@@ -0,0 +1,89 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const Notification = ({
+  title,
+  type,
+  message,
+  customClassName,
+  timeOut,
+  onClick,
+  onRequestHide,
+}) => {
+  const requestHide = () => {
+    if (onRequestHide) {
+      onRequestHide();
+    }
+  };
+
+  useEffect(() => {
+    let timer = null;
+    if (timeOut !== 0) {
+      timer = setTimeout(requestHide, timeOut);
+    }
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+    requestHide();
+  };
+
+  const className = classnames([
+    'notification',
+    `notification-${type}`,
+    customClassName,
+  ]);
+  const titleHtml = title ? <h4 className="title">{title}</h4> : null;
+  return (
+    <div className={className} onClick={() => handleClick()}>
+      <div className="notification-message" role="alert">
+        {titleHtml}
+        <div className="message">{message}</div>
+      </div>
+    </div>
+  );
+};
+
+Notification.propTypes = {
+  type: PropTypes.oneOf([
+    'info',
+    'success',
+    'warning',
+    'error',
+    'primary',
+    'secondary',
+  ]),
+  title: PropTypes.node,
+  message: PropTypes.node,
+  timeOut: PropTypes.number,
+  onClick: PropTypes.func,
+  onRequestHide: PropTypes.func,
+  customClassName: PropTypes.string,
+};
+
+Notification.defaultProps = {
+  type: 'info',
+  title: null,
+  message: null,
+  timeOut: 5000,
+
+  onClick: () => {
+    undefined;
+  },
+  onRequestHide: () => {
+    undefined;
+  },
+
+  customClassName: '',
+};
+
+export default Notification;

package/src/react-notifications/NotificationContainer.jsx

@@ -0,0 +1,53 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import NotificationManager from './NotificationManager';
+import Notifications from './Notifications';
+
+class NotificationContainer extends Component {
+  constructor(props) {
+    super(props);
+    NotificationManager.addChangeListener(this.handleStoreChange);
+    this.state = {
+      notifications: [],
+    };
+  }
+
+  componentWillUnmount = () => {
+    NotificationManager.removeChangeListener(this.handleStoreChange);
+  };
+
+  handleStoreChange = (notifications) => {
+    this.setState({
+      notifications,
+    });
+  };
+
+  handleRequestHide = (notification) => {
+    NotificationManager.remove(notification);
+  };
+
+  render() {
+    const { notifications } = this.state;
+    const { enterTimeout, leaveTimeout } = this.props;
+    return (
+      <Notifications
+        enterTimeout={enterTimeout}
+        leaveTimeout={leaveTimeout}
+        notifications={notifications}
+        onRequestHide={this.handleRequestHide}
+      />
+    );
+  }
+}
+
+NotificationContainer.propTypes = {
+  enterTimeout: PropTypes.number,
+  leaveTimeout: PropTypes.number,
+};
+
+NotificationContainer.defaultProps = {
+  enterTimeout: 400,
+  leaveTimeout: 400,
+};
+
+export default NotificationContainer;

package/src/react-notifications/NotificationManager.js

@@ -0,0 +1,135 @@
+import { EventEmitter } from "events";
+
+const createUUID = () => {
+  const pattern = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
+  return pattern.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+const Constants = {
+  CHANGE: "change",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error",
+};
+
+class NotificationManager extends EventEmitter {
+  constructor() {
+    super();
+    this.listNotify = [];
+  }
+
+  create(notify) {
+    const defaultNotify = {
+      id: createUUID(),
+      type: "info",
+      title: null,
+      message: null,
+      timeOut: 3000,
+      customClassName: "",
+    };
+    if (notify.priority) {
+      this.listNotify.unshift(Object.assign(defaultNotify, notify));
+    } else {
+      this.listNotify.push(Object.assign(defaultNotify, notify));
+    }
+    this.emitChange();
+  }
+
+  primary(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.PRIMARY,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  secondary(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.SECONDARY,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  info(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.INFO,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  success(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.SUCCESS,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  warning(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.WARNING,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  error(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.ERROR,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  remove(notification) {
+    this.listNotify = this.listNotify.filter((n) => notification.id !== n.id);
+    this.emitChange();
+  }
+
+  emitChange() {
+    this.emit(Constants.CHANGE, this.listNotify);
+  }
+
+  addChangeListener(callback) {
+    this.addListener(Constants.CHANGE, callback);
+  }
+
+  removeChangeListener(callback) {
+    this.removeListener(Constants.CHANGE, callback);
+  }
+}
+
+export default new NotificationManager();

package/src/react-notifications/Notifications.jsx

@@ -0,0 +1,66 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+import Notification from './Notification';
+
+class Notifications extends Component {
+  handleRequestHide = (notification) => () => {
+    const { onRequestHide } = this.props;
+    if (onRequestHide) {
+      onRequestHide(notification);
+    }
+  };
+
+  render() {
+    const { notifications, enterTimeout, leaveTimeout } = this.props;
+    const className = classnames('notification-container', {
+      'notification-container-empty': notifications.length === 0,
+    });
+    return (
+      <div className={className}>
+        <TransitionGroup>
+          {notifications.map((notification) => {
+            const key = notification.id || new Date().getTime();
+            return (
+              <CSSTransition
+                classNames="notification"
+                key={key}
+                timeout={{ exit: leaveTimeout, enter: enterTimeout }}
+              >
+                <Notification
+                  key={key}
+                  type={notification.type}
+                  title={notification.title}
+                  message={notification.message}
+                  timeOut={notification.timeOut}
+                  onClick={notification.onClick}
+                  onRequestHide={this.handleRequestHide(notification)}
+                  customClassName={notification.customClassName}
+                />
+              </CSSTransition>
+            );
+          })}
+        </TransitionGroup>
+      </div>
+    );
+  }
+}
+Notifications.propTypes = {
+  notifications: PropTypes.array,
+  onRequestHide: PropTypes.func,
+  enterTimeout: PropTypes.number,
+  leaveTimeout: PropTypes.number,
+};
+
+Notifications.defaultProps = {
+  notifications: [],
+
+  onRequestHide: () => {
+    undefined;
+  },
+
+  enterTimeout: 400,
+  leaveTimeout: 400,
+};
+export default Notifications;

package/src/react-notifications/index.js

@@ -0,0 +1,5 @@
+import Notifications from './Notifications';
+import NotificationContainer from './NotificationContainer';
+import NotificationManager from './NotificationManager';
+
+export { Notifications, NotificationContainer, NotificationManager };

package/vite.config.ts

@@ -1,11 +1,14 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vitest/config";
-import eslint from 'vite-plugin-eslint';
 import commonjs from 'vite-plugin-commonjs'
 
 export default defineConfig({
-    plugins: [react(), eslint(), commonjs()],
-    test: {
-        globals: true,
+    plugins: [react(), commonjs()],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                silenceDeprecations: ['legacy-js-api'],
+            },
+        },
     },
 });

package/.eslintrc.json

@@ -1,25 +0,0 @@
-{
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:react-hooks/recommended"
-    ],
-    "plugins": [
-        "react",
-        "react-hooks"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 2020,
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "jsx": true
-        }
-    },
-    "env": {
-        "browser": true,
-        "es2020": true
-    },
-    "rules": {
-        "react/react-in-jsx-scope": "off"
-    }
-}