siam-ui-utils 2.1.10 → 2.1.11

package/eslint.config.js

@@ -1,28 +1,41 @@
 import js from '@eslint/js'
 import globals from 'globals'
+import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
 
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+export default [
+	{ ignores: ['build'] },
+	{
+		files: ['**/*.{js,jsx,ts,tsx}'],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+			parserOptions: {
+				ecmaVersion: 'latest',
+				ecmaFeatures: { jsx: true },
+				sourceType: 'module',
+			},
+		},
+		settings: { react: { version: '18.3' } },
+		plugins: {
+			react,
+			'react-hooks': reactHooks,
+			'react-refresh': reactRefresh,
+		},
+		rules: {
+			...js.configs.recommended.rules,
+			...react.configs.recommended.rules,
+			...react.configs['jsx-runtime'].rules,
+			...reactHooks.configs.recommended.rules,
+			'react/jsx-no-target-blank': 'off',
+			'react-refresh/only-export-components': [
+				'off',
+				{ allowConstantExport: true },
+			],
+			'react/prop-types': 'off',
+			'@/no-default-export': 'off',
+			'no-unused-vars': 'warn',
+		},
+	},
+]

package/index.d.ts

@@ -1,20 +1,79 @@
-declare module "siam-ui-utils" {
-    //BRIDGES
-    export function withRouter(props);
+declare module 'siam-ui-utils' {
+  //BRIDGES
+  export function withRouter(props);
 
-    //CUSTOMBOOSTRAP
-    export function Colxx(props);
-    export function Separator(props);
+  //CUSTOMBOOSTRAP
+  export function Colxx(props);
+  export function Separator(props);
 
-    //CUSTOMSELECTINPUT
-    export function CustomSelectInput(props);
+  //CUSTOMSELECTINPUT
+  export function CustomSelectInput(props);
 
-    //DROPZONEUploader
-    export function DropzoneUploader(props);
+  //DROPZONEUploader
+  export function DropzoneUploader(props);
 
-    //INTLMESSAGES
-    export function IntlMessages(props);
+  //DropzoneUploaderDniDigital
+  export function DropzoneUploaderDniDigital(props);
 
-    //TOMAR FOTO
-    export function TomarFoto(props);
+  //INTLMESSAGES
+  export function IntlMessages(props);
+
+  //ICONOS
+  export function AnularAyudaIcon(props);
+  export function AsesoriaBurbujaButton(props);
+  export function AsesoriaBurbujaIcon(props);
+  export function AtencionPresencial(props);
+  export function AtencionTelefonica(props);
+  export function AtencionTurnoTelefonico(props);
+  export function AtencionVirtual(props);
+  export function BibliotecaBurbujaButton(props);
+  export function BibliotecaBurbujaIcon(props);
+  export function CancelarTurnoIcon(props);
+  export function CodigoVerificacionIcon(props);
+  export const passwordEyeSvg;
+  export const passwordEyeOpenSvg;
+  export const contactoBarraSup;
+  export const pagosMenuLateral;
+  export const delegacionMenuLateral;
+  export const delegacionesVerde;
+  export const telefonoCeleste;
+  export const mailRojo;
+  export const whatAppIcon;
+  export const telefonoEmergencia;
+  export const telefonoConsulta;
+  export const telefonoExequial;
+  export const telefonoSalud;
+  export const descarga;
+  export const descargaOver;
+  export const anularAyuda;
+  export const continuar;
+  export const pdfImage;
+  export function CursoAutogestionadoColor(props);
+  export function CursoAutogestionado(props);
+  export function CursoBurbujaButton(props);
+  export function CursoBurbujaIcon(props);
+  export function CursoPresencialColor(props);
+  export function CursoPresencial(props);
+  export function CursoVirtualColor(props);
+  export function CursoVirtual(props);
+  export function DelegacionesIcon(props);
+  export function ForgotDniIcon(props);
+  export function ForgotPasswordIcon(props);
+  export function IconButtonSvg(props);
+  export function LabelTimer(props);
+  export function LapizActContactoPerfilButton(props);
+  export function Icon(props);
+  export function UserIcon(props);
+  export function VerificarSinVerificarIcon(props);
+  export function VerificarVerificadoIcon(props);
+  export function WhatsappIconButton(props);
+
+  //ICONOS/USER
+  export function UserIcon(props);
+
+  //TOMAR FOTO
+  export function TomarFoto(props);
+
+  //VIDEO CALL ROOM
+  export function VideoCallRoom(props);
 }

package/index.html

@@ -1,9 +1,9 @@
-<!doctype html>
-<html lang="en">
+<!doctype html><html lang="en">
 	<head>
 		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Firma digital</title>
+		<title>Siam - UI - utils</title>
 	</head>
 	<body>
 		<div id="root"></div>

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "keywords": [
     "ampf-react",
     "ampf-utils",
     "siam-ui-utils"
   ],
-  "type": "module",
   "author": "Ampf Development Team",
   "license": "MIT",
   "description": "Conjunto de librerias de componentes utiles para AMPF",
@@ -21,17 +20,12 @@
   "moduleResolution": "nodenext",
   "scripts": {
     "start": "vite",
-    "publish-npm": "npm publish",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "publish-npm": "npm publish"
   },
   "dependencies": {
-    "@storybook/cli": "^8.3.2",
     "@types/react-intl": "^3.0.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.12",
+    "events": "^3.3.0",
     "html5-file-selector": "^2.1.0",
-    "init": "^0.1.2",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dropzone-uploader": "^2.11.0",
@@ -48,40 +42,29 @@
     "vite-plugin-commonjs": "^0.10.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@storybook/addon-essentials": "^8.3.2",
-    "@storybook/addon-interactions": "^8.3.2",
-    "@storybook/addon-links": "^8.3.2",
-    "@storybook/addon-onboarding": "^8.3.2",
-    "@storybook/blocks": "^8.3.2",
-    "@storybook/react": "^8.3.2",
-    "@storybook/react-vite": "^8.3.2",
-    "@storybook/test": "^8.3.2",
+    "@eslint/js": "^9.9.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57.1",
+    "eslint": "^9.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0-alpha.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "storybook": "^8.3.2",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "sass-embedded": "^1.79.4",
     "vite": "^5.3.4",
-    "vite-plugin-eslint": "^1.1.0",
+    "vite-plugin-eslint": "^1.8.1",
     "vitest": "^2.0.5"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
   }
 }

package/src/App.css

@@ -0,0 +1,47 @@
+#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;
+}
+
+
+.custom-dropzone-uploader-dni-digital{
+    display: flex;
+}

package/src/App.jsx

@@ -1,43 +1,86 @@
-import React, { useState } from "react";
-import { TomarFoto } from './tomar-foto'
-import { LABEL_BUTTONS } from "./constants";
+import React, { useState } from 'react';
+import {
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+  AccordionItem,
+  Modal,
+} from 'reactstrap';
+import { TomarFoto, DropzoneUploader, DropzoneUploaderDniDigital } from './';
+import './index.css';
+import './App.css';
+import './assets/css/vendor/bootstrap.min.css';
+import { VideoCallRoom } from './video-call-room';
 
-const { TOMAR_FOTO_CELULAR, TOMAR_FOTO_WEB } = LABEL_BUTTONS
-
-function App() {
-    const [componentReference, setComponentReference] = useState(undefined);
-    
-    const handleLinkClick = (e) => {
-        const { target: { innerText } } = e;
-        setComponentReference(innerText);
+const App = () => {
+  const [open, setOpen] = useState('0');
+  const toggle = (id) => {
+    if (open === id) {
+      setOpen();
+    } else {
+      setOpen(id);
     }
+  };
 
-    return (
-        <div className="d-flex">
-            <div id="menu">
-                <button onClick={handleLinkClick}>{TOMAR_FOTO_CELULAR}</button>
-                <button onClick={handleLinkClick}>{TOMAR_FOTO_WEB}</button>
-
-            </div>
-            
-            <div id="content">
-                {componentReference === TOMAR_FOTO_CELULAR && <TomarFoto isMobile={true} />}
-                 {componentReference===TOMAR_FOTO_WEB && <TomarFoto isMobile={false} />}
-            </div>
-        </div>
-
-        
-		// <AnularAyudaIcon
-		// 	cbuPago='1234'
-		// 	codDelegacion='AMPF'
-		// 	fechaAcreditacion='10/10/2025'
-		// 	fechaVtoTramite='10/10/2025'
-		// 	netoFinal={124}
-		// 	nroSolicitud='1234'
-		// 	size='3.5rem'
-		// 	title='Botón de arrepentimiento'
-		// />
-	)
-}
+  return (
+    <div>
+      <Accordion open={open} toggle={toggle}>
+        <AccordionItem>
+          <AccordionHeader targetId="1">Tomar Foto</AccordionHeader>
+          <AccordionBody accordionId="1">
+            <TomarFoto isMobile={true} />
+            <DropzoneUploader
+              totalFiles={4}
+              onChangeFiles={() => alert('onChange')}
+              maxFiles={3}
+              nameFileLabel="file"
+            />
+          </AccordionBody>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="2">
+            DropzoneUploader Firma Digital
+          </AccordionHeader>
+          <AccordionBody accordionId="2">
+            <DropzoneUploader
+              totalFiles={0}
+              onChangeFiles={() => {
+                console.log('onChange');
+              }}
+              maxFiles={7}
+              nameFileLabel="Subir archivos"
+              capture="environment"
+              onFilesSelectedSelfie
+            />
+          </AccordionBody>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="3">
+            DropzoneUploader DNI Digital
+          </AccordionHeader>
+          <AccordionBody accordionId="3">
+            <DropzoneUploaderDniDigital
+              totalFiles={0}
+              maxFiles={2}
+              onChangeFiles={() => {
+                console.log('onChange');
+              }}
+              classNames="custom-dropzone-uploader-dni-digital"
+            />
+          </AccordionBody>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="4">Video Call Room</AccordionHeader>
+          <AccordionBody accordionId="4">
+            <VideoCallRoom
+              url="https://whereby.com/test-ampf-room"
+              title="Videollamada de ejemplo"
+            />
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
 
-export default App
+export default App;

package/src/CustomSelectInput.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { components } from 'react-select';
 
-export const CustomSelectInput = (props) => {
+const CustomSelectInput = (props) => {
   const customProps = { ...props };
   delete customProps.autoCorrect;
   delete customProps.autoCapitalize;

package/src/IntlMessages.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
-import { FormattedMessage, injectIntl } from 'react-intl'
-const _InjectMassage = (props) => <FormattedMessage {...props} />
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
-export const IntlMessages = injectIntl(_InjectMassage, {
-	withRef: false,
-})
+const InjectMassage = (props) => <FormattedMessage {...props} />;
+
+export default injectIntl(InjectMassage, {
+  withRef: false,
+});

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

@@ -0,0 +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 { pdfImage, IconButtonSvg } from '../../iconos';
+import '../dropzone-uploader.css';
+
+export const DropzoneUploaderDniDigital = ({
+  accept = 'image/*, application/pdf',
+  classNames = '',
+  onChangeFiles,
+  totalFiles,
+  label = 'Cargar Dni',
+  maxFiles = 2,
+  maxSize = 2,
+  onMaxFileSizeError = () => {
+    alert('El archivo supera el tamaño máximo');
+  },
+}) => {
+  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 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) {
+      onMaxFileSizeError();
+      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 ? `${maxFiles - 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 < maxFiles ? maxFiles : 0}
+        maxSize={maxSize} // en megas
+        InputComponent={Input}
+        PreviewComponent={CustomPreview}
+        classNames={{ dropzone: 'dropzone-upload-frame' }}
+        onChangeStatus={handleChangeStatus}
+        getFilesFromEvent={getFilesFromEvent}
+        accept={accept}
+      />
+    </div>
+  );
+};
+
+export default DropzoneUploaderDniDigital;