siam-ui-utils 2.0.6 → 2.1.0

package/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import "./css/bootstrap.min.css";
+import "./css/bootstrap.rtl.only.min.css";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+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 },
+      ],
+    },
+  },
+)

package/index.d.ts

@@ -15,59 +15,6 @@ declare module "siam-ui-utils" {
     //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);
 }

package/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Firma digital</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.jsx"></script>
+	</body>
+</html>

package/package.json

@@ -1,70 +1,87 @@
-{
-	"name": "siam-ui-utils",
-	"version": "2.0.6",
-	"keywords": [
-		"ampf-react",
-		"ampf-utils",
-		"siam-ui-utils"
-	],
-	"author": "Ampf Development Team",
-	"license": "MIT",
-	"description": "Conjunto de librerias de componentes utiles para AMPF",
-	"main": "src/index.js",
-	"browser": "src/index.js",
-	"types": "index",
-	"homepage": "https://github.com/ampfgit/siam-ui-utils#readme",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/ampfgit/siam-ui-utils"
-	},
-	"moduleResolution": "nodenext",
-	"scripts": {
-		"publish-npm": "npm publish"
-	},
-	"dependencies": {
-		"@types/react-intl": "^3.0.0",
-		"html5-file-selector": "^2.1.0",
-		"prop-types": "^15.8.1",
-		"react": "^18.3.1",
-		"react-dropzone-uploader": "^2.11.0",
-		"react-intl": "^6.4.2",
-		"react-notifications": "^1.7.4",
-		"react-router": "^6.26.2",
-		"react-router-dom": "^6.26.2",
-		"react-select": "^5.8.0",
-		"reactstrap": "^9.2.2",
-		"siam-utils": "^1.1.4",
-		"source-map-loader": "^5.0.0",
-		"styled-components": "^6.1.12",
-		"typescript": "^5.5.4"
-	},
-	"devDependencies": {
-		"@testing-library/dom": "^10.4.0",
-		"@testing-library/jest-dom": "^6.4.8",
-		"@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-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": "^4.2.1",
-		"eslint-plugin-react": "^7.33.0",
-		"vite": "^5.3.4",
-		"vite-plugin-eslint": "^1.8.1",
-		"vitest": "^2.0.5"
-	},
-	"resolutions": {
-		"@babel/core": "7.19.6",
-		"@babel/generator": "7.19.6",
-		"@babel/compat-data": "7.19.4",
-		"@babel/helper-compilation-targets": "7.19.3",
-		"@babel/helper-create-class-features-plugin": "7.19.0",
-		"@babel/helper-module-transforms": "7.19.6",
-		"babel-loader": "8.2.5"
-	}
-}
+{
+  "name": "siam-ui-utils",
+  "version": "2.1.0",
+  "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",
+  "main": "src/index.js",
+  "browser": "src/index.js",
+  "types": "index",
+  "homepage": "https://github.com/ampfgit/siam-ui-utils#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampfgit/siam-ui-utils"
+  },
+  "moduleResolution": "nodenext",
+  "scripts": {
+    "start": "vite",
+    "publish-npm": "npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "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",
+    "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",
+    "react-intl": "^6.4.2",
+    "react-notifications": "^1.7.4",
+    "react-router": "^6.26.2",
+    "react-router-dom": "^6.26.2",
+    "react-select": "^5.8.0",
+    "reactstrap": "^9.2.2",
+    "siam-utils": "^1.1.4",
+    "source-map-loader": "^5.0.0",
+    "styled-components": "^6.1.12",
+    "typescript": "^5.5.4",
+    "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",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "copyfiles": "^2.4.1",
+    "eslint": "^8.57.1",
+    "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-react": "^7.33.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "storybook": "^8.3.2",
+    "vite": "^5.3.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^2.0.5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/App.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { TomarFoto } from './tomar-foto'
+import { LABEL_BUTTONS } from "./constants";
+
+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);
+    }
+
+    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'
+		// />
+	)
+}
+
+export default App

package/src/IntlMessages.jsx

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

package/src/bridges/{with-router-bridge.jsx → index.jsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router';
 
-export const withRouter = (Component) => {
+const withRouter = (Component) => {
   const Wrapper = (props) => {
     const history = useNavigate();
     return <Component history={history} {...props} />;

package/src/constants.js

@@ -5,3 +5,12 @@ export const TAKE_PHOTO = {
 		'La carga de una foto Selfie de frente junto a tu DNI solo es accesible desde su teléfono',
 	TAKE_PHOTO_MESSAGE: 'Hacer Foto',
 }
+
+
+export const LABEL_BUTTONS = {
+    TOMAR_FOTO_CELULAR: 'Tomar Foto CELULAR',
+    TOMAR_FOTO_WEB: 'Tomar Foto WEB',
+    SUBIR_ARCHIVO_MAX_3: 'Subir archivos (maximo 3)',
+    SUBIR_ARCHIVO_MAX_7: 'Subir archivos (maximo 7)'
+    
+}

package/src/dropzone-uploader/DropzoneUploader.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DropzoneUploader } from '.';
+
+const args={
+        onChangeFiles: () => {console.log('Dispatch an action onchange file')},
+        totalFiles: 0,
+        maxFiles: 3,
+        accept : 'image/*, application/pdf',
+        capture : null,
+        nameFileLabel : 'Subir archivos',
+        maxFileSize: 2
+    }
+
+const meta = {
+  title: 'Components/DropzoneUploader',
+  component: DropzoneUploader,
+    args: {
+        ...args
+    },
+} satisfies Meta<typeof DropzoneUploader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DropzoneUploaderBasic: Story = {
+  args: {
+    ...args,
+    maxFileSize: 7
+    },
+};
+

package/src/dropzone-uploader/dropzone-uploader.css

@@ -0,0 +1,66 @@
+.dropzone-upload-button{
+  padding: 25; 
+  border-radius: 5px !important;
+  cursor: pointer;
+  color: #fff;
+  width: 10rem !important;
+  height: 2rem !important;
+  line-height: 1.5 !important;
+  font-size: 13px;
+  text-align: center;
+  vertical-align: middle !important;
+  border: none;
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+  background-color: #af251b;
+  &:hover {
+    background-color: rgb(108, 31, 1);
+  }
+}
+.dropzone-upload-frame{
+  border: 0px !important;
+  overflow: 'none' !important;
+}
+.dropzone-upload-previewContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 100px;
+    min-height: 60px;
+    z-index: 1;
+    border-bottom: 1px solid #ECECEC;
+    box-sizing: border-box;
+}
+
+.dropzone-upload-previewImage {
+    width: 60rem;
+    max-height: 60px;
+    max-width: 10rem;
+    border-radius: 4px;
+    padding-right: 1rem;
+}
+ 
+.dropzone-upload-delete-btn {
+  width: 2rem;
+  line-height: 1.5; 
+  border : 0;
+  color: #ff0000;
+  background-color: #f8f8f8;
+  padding-right:1rem;
+}
+
+.dropzone-upload-file-name-container {
+  position: relative;
+  display: inline-block;
+  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
+}
+
+.dropzone-upload-file-name {
+  padding-right: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
+}

package/src/{archivos-adjuntos → dropzone-uploader}/index.jsx

@@ -1,18 +1,22 @@
+/* eslint-disable react/prop-types */
 import React, { useEffect, useState } from 'react'
 import { getDroppedOrSelectedFiles } from 'html5-file-selector'
 import Dropzone from 'react-dropzone-uploader'
 import { NotificationManager } from 'react-notifications'
 import 'react-dropzone-uploader/dist/styles.css'
-import { IconButtonSvg, pdfImage } from '../'
+import  IconButtonSvg  from '../iconos/icon-button-svg'
+import { pdfImage } from '../constants-svg'
+import "./dropzone-uploader.css"
 
-const maxSize = 7
+const maxSize = 7 //en MB
 export const DropzoneUploader = ({
 	onChangeFiles,
 	totalFiles,
-	maxFiles = 3,
+    maxFiles = 3,
 	accept = 'image/*, application/pdf',
 	capture = null,
-	nameFileLabel = 'Subir archivos',
+    nameFileLabel = 'Subir archivos',
+    maxFileSize=maxSize
 }) => {
 	const [files, setFiles] = useState([])
 	const [totalFilesDU, setTotalFilesDU] = useState(totalFiles)
@@ -43,7 +47,7 @@ export const DropzoneUploader = ({
 	}
 	const CustomPreview = ({ fileWithMeta }) => {
 		const { meta, remove } = fileWithMeta
-		if (meta.size / (1024 * 1024) > maxSize) {
+		if (meta.size / (1024 * 1024) > maxFileSize) {
 			NotificationManager.error(
 				'El archivo supera el tamaño máximo',
 				'Advertencia'
@@ -122,7 +126,7 @@ export const DropzoneUploader = ({
 		<Dropzone
 			disableUpload={false}
 			maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
-			maxSize={maxSize} // en megas
+			maxSize={maxFileSize} // en megas
 			InputComponent={Input}
 			PreviewComponent={CustomPreview}
 			classNames={{ dropzone: 'dropzone-upload-frame' }}

package/src/iconos/icon-button-svg.jsx

@@ -46,5 +46,4 @@ const IconButtonSvg = (props) => {
   );
 };
 IconButtonSvg.defaultProps = { theme: {} };
-const _t=withTheme(IconButtonSvg);
-export {_t as IconButtonSvg}
+export default withTheme(IconButtonSvg);

package/src/iconos/index.js

@@ -1,31 +1,3 @@
-export * from "./anular-ayuda-icon";
-export * from "./asesoria-burbuja-button";
-export * from "./asesoria-burbuja-icon";
-export * from "./atencion-presencial-icon";
-export * from "./atencion-telefonica-icon";
-export * from "./atencion-turno-telefonico-icon";
-export * from "./atencion-virtual-icon";
-export * from "./biblioteca-burbuja-button";
-export * from "./biblioteca-burbuja-icon";
-export * from "./cancelar-turno-icon";
-export * from "./codigo-verificacion-icon";
-export * from "./constants-svg";
-export * from "./curso-autogestionado-color-icon";
-export * from "./curso-autogestionado-icon";
-export * from "./curso-burbuja-button";
-export * from "./curso-burbuja-icon";
-export * from "./curso-presencial-color-icon";
-export * from "./curso-presencial-icon";
-export * from "./curso-virtual-color-icon";
-export * from "./curso-virtual-icon";
-export * from "./delegaciones-icon";
-export * from "./forgot-dni-icon";
-export * from "./forgot-password-icon";
-export * from "./icon-button-svg";
-export * from "./lapiz-act-contacto-perf-button";
-export * from "./styled-icon";
-export * from "./user/user-styled-icon";
-export * from "./styled-timer-reenv-cod";
-export * from "./verificar-sin-verificar-icon";
-export * from "./verificar-verificado-icon";
-export * from "./whatsapp-icon-button";
+import IconButtonSvg from "./icon-button-svg";
+export { IconButtonSvg };
+export * from "./styled-icon";

package/src/iconos/styled-icon.jsx

@@ -22,4 +22,4 @@ export const Icon = styled(IconDiv)`
     display: ${(props) => props.display || 'none'};
   }
 `;
-
+export default Icon;

package/src/index.js

@@ -1,7 +1,7 @@
-export * from './archivos-adjuntos'
+export * from './dropzone-uploader'
 export * from './bridges'
 export * from './CustomBootstrap'
 export * from './CustomSelectInput'
-export * from './iconos'
+export * from "./iconos"
 export * from './IntlMessages'
 export * from './tomar-foto'

package/src/main.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+export const App = React.lazy(
+	() => import(/* webpackChunkName: "App" */ './App')
+)
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)

package/src/tomar-foto/TomarFoto.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TomarFoto } from '.';
+
+const meta = {
+  title: 'Components/TomarFoto',
+  component: TomarFoto,
+    args: {
+        onFilesSelectedSelfie:() => { },
+        isMobile:false
+    },
+} satisfies Meta<typeof TomarFoto>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TomarFotoWebApplication: Story = {
+  args: {
+        isMobile: false
+    },
+};
+export const TomarFotoMobileApplication: Story = {
+  args: {
+    isMobile: true,
+        onFilesSelectedSelfie: () => {
+            console.log('Dispatch an action')
+        }
+  },
+};

package/src/tomar-foto/index.jsx

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react'
 import { Row } from 'reactstrap'
 import { DropzoneUploader, Colxx } from '../'
 import { TAKE_PHOTO } from '../constants'

package/tsconfig.json

@@ -11,7 +11,7 @@
         "skipLibCheck": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
-        "module": "ESNext",
+        "module": "commonjs",
         "moduleResolution": "node",
         "noImplicitReturns": true,
         "resolveJsonModule": true,
@@ -21,6 +21,7 @@
     },
     "include": [
         "src",
-        "index.d.ts"
+        "index.d.ts",
+        "eslint.config.js"
     ]
 }