siam-ui-utils 2.0.24 → 2.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/.prettierrc +7 -0
  2. package/eslint.config.js +41 -0
  3. package/index.html +12 -0
  4. package/package.json +68 -59
  5. package/src/App.css +42 -0
  6. package/src/App.jsx +79 -0
  7. package/src/archivos-adjuntos/dropzone-uploader-dni-digital/index.jsx +142 -143
  8. package/src/archivos-adjuntos/index.jsx +135 -133
  9. package/src/archivos-adjuntos/simple-line-icons.css +778 -0
  10. package/src/assets/css/vendor/bootstrap.min.css +6 -0
  11. package/src/assets/css/vendor/bootstrap.rtl.only.min.css +1428 -0
  12. package/src/index.css +74 -0
  13. package/src/index.js +7 -7
  14. package/src/main.jsx +7 -0
  15. package/src/react-notifications/Notification.jsx +89 -0
  16. package/src/react-notifications/NotificationContainer.jsx +53 -0
  17. package/src/react-notifications/NotificationManager.js +135 -0
  18. package/src/react-notifications/Notifications.jsx +66 -0
  19. package/src/react-notifications/index.js +5 -0
  20. package/vite.config.ts +9 -5
  21. package/.eslintrc.json +0 -25
  22. package/src/IntlMessages.tsx +0 -11
package/.prettierrc ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "singleQuote": true,
3
+ "endOfLine": "auto",
4
+ "tabWidth": 2,
5
+ "semi": true,
6
+ "printWidth": 80
7
+ }
package/eslint.config.js ADDED
@@ -0,0 +1,41 @@
1
+ import js from '@eslint/js'
2
+ import globals from 'globals'
3
+ import react from 'eslint-plugin-react'
4
+ import reactHooks from 'eslint-plugin-react-hooks'
5
+ import reactRefresh from 'eslint-plugin-react-refresh'
6
+
7
+ export default [
8
+ { ignores: ['build'] },
9
+ {
10
+ files: ['**/*.{js,jsx,ts,tsx}'],
11
+ languageOptions: {
12
+ ecmaVersion: 2020,
13
+ globals: globals.browser,
14
+ parserOptions: {
15
+ ecmaVersion: 'latest',
16
+ ecmaFeatures: { jsx: true },
17
+ sourceType: 'module',
18
+ },
19
+ },
20
+ settings: { react: { version: '18.3' } },
21
+ plugins: {
22
+ react,
23
+ 'react-hooks': reactHooks,
24
+ 'react-refresh': reactRefresh,
25
+ },
26
+ rules: {
27
+ ...js.configs.recommended.rules,
28
+ ...react.configs.recommended.rules,
29
+ ...react.configs['jsx-runtime'].rules,
30
+ ...reactHooks.configs.recommended.rules,
31
+ 'react/jsx-no-target-blank': 'off',
32
+ 'react-refresh/only-export-components': [
33
+ 'off',
34
+ { allowConstantExport: true },
35
+ ],
36
+ 'react/prop-types': 'off',
37
+ '@/no-default-export': 'off',
38
+ 'no-unused-vars': 'warn',
39
+ },
40
+ },
41
+ ]
package/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!doctype html><html lang="en">
2
+ <head>
3
+ <meta charset="UTF-8" />
4
+ <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Siam - UI - utils</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <script type="module" src="/src/main.jsx"></script>
11
+ </body>
12
+ </html>
package/package.json CHANGED
@@ -1,60 +1,69 @@
1
- { "name": "siam-ui-utils",
2
- "version": "2.0.24",
3
- "keywords": [
4
- "ampf-react",
5
- "ampf-utils",
6
- "siam-ui-utils"
7
- ],
8
- "author": "Ampf Development Team",
9
- "license": "MIT",
10
- "description": "Conjunto de librerias de componentes utiles para AMPF",
11
- "main": "src/index.js",
12
- "browser": "src/index.js",
13
- "types": "index",
14
- "homepage": "https://github.com/ampfgit/siam-ui-utils#readme",
15
- "repository": {
16
- "type": "git",
17
- "url": "https://github.com/ampfgit/siam-ui-utils"
18
- },
19
- "moduleResolution": "nodenext",
20
- "scripts": {
21
- "publish-npm": "npm publish"
22
- },
23
- "dependencies": {
24
- "@types/react-intl": "^3.0.0",
25
- "html5-file-selector": "^2.1.0",
26
- "prop-types": "^15.8.1",
27
- "react": "^18.3.1",
28
- "react-dropzone-uploader": "^2.11.0",
29
- "react-intl": "^6.4.2",
30
- "react-notifications": "^1.7.4",
31
- "react-router": "^6.26.2",
32
- "react-router-dom": "^6.26.2",
33
- "react-select": "^5.8.0",
34
- "reactstrap": "^9.2.2",
35
- "siam-utils": "^1.1.4",
36
- "source-map-loader": "^5.0.0",
37
- "styled-components": "^6.1.12",
38
- "typescript": "^5.5.4"
39
- },
40
- "devDependencies": {
41
- "@testing-library/dom": "^10.4.0",
42
- "@testing-library/jest-dom": "^6.4.8",
43
- "@testing-library/react": "^16.0.0",
44
- "@types/react-router-dom": "^5.3.3",
45
- "@typescript-eslint/parser": "^8.2.0",
46
- "@vitejs/plugin-react": "^4.3.1",
47
- "copyfiles": "^2.4.1",
48
- "eslint": "^8.57.0",
49
- "eslint-config-airbnb": "^19.0.4",
50
- "eslint-config-prettier": "^8.8.0",
51
- "eslint-config-react-app": "^7.0.1",
52
- "eslint-plugin-import": "^2.27.5",
53
- "eslint-plugin-jsx-a11y": "^6.7.1",
54
- "eslint-plugin-prettier": "^4.2.1",
55
- "eslint-plugin-react": "^7.33.0",
56
- "vite": "^5.3.4",
57
- "vite-plugin-eslint": "^1.8.1",
58
- "vitest": "^2.0.5"
59
- }
1
+ {
2
+ "name": "siam-ui-utils",
3
+ "version": "2.0.26",
4
+ "keywords": [
5
+ "ampf-react",
6
+ "ampf-utils",
7
+ "siam-ui-utils"
8
+ ],
9
+ "author": "Ampf Development Team",
10
+ "license": "MIT",
11
+ "description": "Conjunto de librerias de componentes utiles para AMPF",
12
+ "main": "src/index.js",
13
+ "browser": "src/index.js",
14
+ "types": "index",
15
+ "homepage": "https://github.com/ampfgit/siam-ui-utils#readme",
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "https://github.com/ampfgit/siam-ui-utils"
19
+ },
20
+ "moduleResolution": "nodenext",
21
+ "scripts": {
22
+ "start": "vite",
23
+ "publish-npm": "npm publish"
24
+ },
25
+ "dependencies": {
26
+ "@types/react-intl": "^3.0.0",
27
+ "events": "^3.3.0",
28
+ "html5-file-selector": "^2.1.0",
29
+ "prop-types": "^15.8.1",
30
+ "react": "^18.3.1",
31
+ "react-dropzone-uploader": "^2.11.0",
32
+ "react-intl": "^6.4.2",
33
+ "react-notifications": "^1.7.4",
34
+ "react-router": "^6.26.2",
35
+ "react-router-dom": "^6.26.2",
36
+ "react-select": "^5.8.0",
37
+ "reactstrap": "^9.2.2",
38
+ "siam-utils": "^1.1.4",
39
+ "source-map-loader": "^5.0.0",
40
+ "styled-components": "^6.1.12",
41
+ "typescript": "^5.5.4",
42
+ "vite-plugin-commonjs": "^0.10.3"
43
+ },
44
+ "devDependencies": {
45
+ "@testing-library/dom": "^10.4.0",
46
+ "@testing-library/jest-dom": "^6.4.8",
47
+ "@testing-library/react": "^16.0.0",
48
+ "@types/react-router-dom": "^5.3.3",
49
+ "@typescript-eslint/parser": "^8.2.0",
50
+ "copyfiles": "^2.4.1",
51
+ "@eslint/js": "^9.9.0",
52
+ "@types/react": "^18.3.3",
53
+ "@types/react-dom": "^18.3.0",
54
+ "@vitejs/plugin-react": "^4.3.1",
55
+ "eslint": "^9.9.0",
56
+ "eslint-plugin-react-hooks": "^5.1.0-rc.0",
57
+ "eslint-plugin-react-refresh": "^0.4.9",
58
+ "eslint-config-airbnb": "^19.0.4",
59
+ "eslint-config-prettier": "^8.8.0",
60
+ "eslint-config-react-app": "^7.0.1",
61
+ "eslint-plugin-import": "^2.27.5",
62
+ "eslint-plugin-jsx-a11y": "^6.7.1",
63
+ "eslint-plugin-prettier": "^4.2.1",
64
+ "eslint-plugin-react": "^7.33.0",
65
+ "vite": "^5.3.4",
66
+ "vite-plugin-eslint": "^1.8.1",
67
+ "vitest": "^2.0.5"
68
+ }
60
69
  }
package/src/App.css ADDED
@@ -0,0 +1,42 @@
1
+ #root {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ text-align: center;
6
+ }
7
+
8
+ .logo {
9
+ height: 6em;
10
+ padding: 1.5em;
11
+ will-change: filter;
12
+ transition: filter 300ms;
13
+ }
14
+ .logo:hover {
15
+ filter: drop-shadow(0 0 2em #646cffaa);
16
+ }
17
+ .logo.react:hover {
18
+ filter: drop-shadow(0 0 2em #61dafbaa);
19
+ }
20
+
21
+ @keyframes logo-spin {
22
+ from {
23
+ transform: rotate(0deg);
24
+ }
25
+ to {
26
+ transform: rotate(360deg);
27
+ }
28
+ }
29
+
30
+ @media (prefers-reduced-motion: no-preference) {
31
+ a:nth-of-type(2) .logo {
32
+ animation: logo-spin infinite 20s linear;
33
+ }
34
+ }
35
+
36
+ .card {
37
+ padding: 2em;
38
+ }
39
+
40
+ .read-the-docs {
41
+ color: #888;
42
+ }
package/src/App.jsx ADDED
@@ -0,0 +1,79 @@
1
+ import React, { useState } from 'react';
2
+ import {
3
+ Accordion,
4
+ AccordionBody,
5
+ AccordionHeader,
6
+ AccordionItem,
7
+ } from 'reactstrap';
8
+ import {
9
+ TomarFoto,
10
+ DropzoneUploader,
11
+ DropzoneUploaderDniDigital,
12
+ NotificationContainer,
13
+ } from './';
14
+ import './index.css';
15
+ import './App.css';
16
+ import './assets/css/vendor/bootstrap.min.css';
17
+
18
+ const App = () => {
19
+ const [open, setOpen] = useState('0');
20
+ const toggle = (id) => {
21
+ if (open === id) {
22
+ setOpen();
23
+ } else {
24
+ setOpen(id);
25
+ }
26
+ };
27
+
28
+ return (
29
+ <div>
30
+ <NotificationContainer />
31
+ <Accordion open={open} toggle={toggle}>
32
+ <AccordionItem>
33
+ <AccordionHeader targetId="1">Tomar Foto</AccordionHeader>
34
+ <AccordionBody accordionId="1">
35
+ <TomarFoto isMobile={true} />
36
+ <DropzoneUploader
37
+ totalFiles={4}
38
+ onChangeFiles={() => alert('onChange')}
39
+ maxFiles={3}
40
+ nameFileLabel="file"
41
+ />
42
+ </AccordionBody>
43
+ </AccordionItem>
44
+ <AccordionItem>
45
+ <AccordionHeader targetId="2">
46
+ DropzoneUploader Firma Digital
47
+ </AccordionHeader>
48
+ <AccordionBody accordionId="2">
49
+ <DropzoneUploader
50
+ totalFiles={0}
51
+ onChangeFiles={() => {
52
+ console.log('onChange');
53
+ }}
54
+ maxFiles={7}
55
+ nameFileLabel="Subir archivos"
56
+ capture="environment"
57
+ />
58
+ </AccordionBody>
59
+ </AccordionItem>
60
+ <AccordionItem>
61
+ <AccordionHeader targetId="3">
62
+ DropzoneUploader DNI Digital
63
+ </AccordionHeader>
64
+ <AccordionBody accordionId="3">
65
+ <DropzoneUploaderDniDigital
66
+ totalFiles={0}
67
+ maxFiles={2}
68
+ onChangeFiles={() => {
69
+ console.log('onChange');
70
+ }}
71
+ />
72
+ </AccordionBody>
73
+ </AccordionItem>
74
+ </Accordion>
75
+ </div>
76
+ );
77
+ };
78
+
79
+ export default App;
package/src/archivos-adjuntos/dropzone-uploader-dni-digital/index.jsx CHANGED
@@ -1,153 +1,152 @@
1
1
  /* eslint-disable react/prop-types */
2
- import { useState } from 'react'
3
-
4
- import { Button } from 'reactstrap'
5
-
6
- import { getDroppedOrSelectedFiles } from 'html5-file-selector'
7
- import Dropzone from 'react-dropzone-uploader'
8
- import 'react-dropzone-uploader/dist/styles.css'
9
- import { NotificationManager } from 'react-notifications'
10
- import { pdfImage, IconButtonSvg } from '../../iconos'
11
- import '../dropzone-uploader.css'
2
+ import { useState } from 'react';
3
+ import { Button } from 'reactstrap';
4
+ import { getDroppedOrSelectedFiles } from 'html5-file-selector';
5
+ import Dropzone from 'react-dropzone-uploader';
6
+ import 'react-dropzone-uploader/dist/styles.css';
7
+ import { NotificationManager } from '../../react-notifications';
8
+ import { pdfImage, IconButtonSvg } from '../../iconos';
9
+ import '../dropzone-uploader.css';
12
10
 
13
11
  export const DropzoneUploaderDniDigital = ({
14
- accept = 'image/*, application/pdf',
15
- classNames = '',
16
- onChangeFiles,
17
- totalFiles,
18
- label = 'Cargar Dni',
19
- maxSize = 2,
12
+ accept = 'image/*, application/pdf',
13
+ classNames = '',
14
+ onChangeFiles,
15
+ totalFiles,
16
+ label = 'Cargar Dni',
17
+ maxSize = 2,
20
18
  }) => {
21
- const [files, setFiles] = useState([])
19
+ const [files, setFiles] = useState([]);
22
20
 
23
- const handleChangeStatus = ({ file }, status) => {
24
- if (status === 'done') {
25
- const filesTemp = [...files]
26
- filesTemp.push(file)
27
- setFiles(filesTemp)
28
- onChangeFiles(filesTemp)
29
- } else if (status === 'removed') {
30
- const filesTemp = [...files]
31
- const index = filesTemp.indexOf(file)
32
- if (index > -1) {
33
- filesTemp.splice(index, 1)
34
- }
35
- setFiles(filesTemp)
36
- onChangeFiles(filesTemp)
37
- }
38
- }
21
+ const handleChangeStatus = ({ file }, status) => {
22
+ if (status === 'done') {
23
+ const filesTemp = [...files];
24
+ filesTemp.push(file);
25
+ setFiles(filesTemp);
26
+ onChangeFiles(filesTemp);
27
+ } else if (status === 'removed') {
28
+ const filesTemp = [...files];
29
+ const index = filesTemp.indexOf(file);
30
+ if (index > -1) {
31
+ filesTemp.splice(index, 1);
32
+ }
33
+ setFiles(filesTemp);
34
+ onChangeFiles(filesTemp);
35
+ }
36
+ };
39
37
 
40
- const getFilesFromEvent = (e) => {
41
- return new Promise((resolve) => {
42
- getDroppedOrSelectedFiles(e).then((chosenFiles) => {
43
- resolve(chosenFiles.map((f) => f.fileObject))
44
- })
45
- })
46
- }
38
+ const getFilesFromEvent = (e) => {
39
+ return new Promise((resolve) => {
40
+ getDroppedOrSelectedFiles(e).then((chosenFiles) => {
41
+ resolve(chosenFiles.map((f) => f.fileObject));
42
+ });
43
+ });
44
+ };
47
45
 
48
- const CustomPreview = ({ fileWithMeta }) => {
49
- const { meta, remove } = fileWithMeta
50
- if (meta.size / (1024 * 1024) > maxSize) {
51
- NotificationManager.error(
52
- 'El archivo supera el tamaño máximo',
53
- 'Advertencia'
54
- )
55
- remove()
56
- }
57
- return (
58
- <div
59
- className='dropzone-upload-previewContainer'
60
- style={{ width: '100%', display: 'flex', alignItems: 'center' }}
61
- >
62
- {meta.type === 'application/pdf' ? (
63
- <>
64
- <IconButtonSvg
65
- className='form-control flex'
66
- svg={pdfImage}
67
- svgOver={pdfImage}
68
- height='1.6rem'
69
- width='1.6rem'
70
- title={meta.name}
71
- />
72
- <p style={{ paddingRight: '1rem' }}>
73
- {meta.name.length > 17
74
- ? meta.name.substring(0, 17) + '...'
75
- : meta.name}
76
- </p>
77
- </>
78
- ) : (
79
- <>
80
- <img
81
- className='dropzone-upload-previewImage mt-1'
82
- src={meta.previewUrl}
83
- alt={meta.name}
84
- style={{
85
- width: '110px',
86
- height: '110px',
87
- objectFit: 'cover',
88
- marginRight: '0.5rem',
89
- }}
90
- />
91
- <div className='dropzone-upload-file-name-container'>
92
- <p className='dropzone-upload-file-name' title={meta.name}>
93
- {meta.name}
94
- </p>
95
- </div>
96
- </>
97
- )}
98
- <button
99
- style={{ marginTop: '0rem' }}
100
- onClick={remove}
101
- className='dropzone-upload-delete-btn simple-icon-trash'
102
- ></button>
103
- </div>
104
- )
105
- }
46
+ const CustomPreview = ({ fileWithMeta }) => {
47
+ const { meta, remove } = fileWithMeta;
48
+ console.log('meta.size :>> ', meta.size);
49
+ if (meta.size / (1024 * 1024) > maxSize) {
50
+ NotificationManager.error(
51
+ 'El archivo supera el tamaño máximo',
52
+ 'Advertencia',
53
+ );
54
+ remove();
55
+ }
56
+ return (
57
+ <div
58
+ className="dropzone-upload-previewContainer"
59
+ style={{ width: '100%', display: 'flex', alignItems: 'center' }}
60
+ >
61
+ {meta.type === 'application/pdf' ? (
62
+ <>
63
+ <IconButtonSvg
64
+ className="form-control flex"
65
+ svg={pdfImage}
66
+ svgOver={pdfImage}
67
+ height="1.6rem"
68
+ width="1.6rem"
69
+ title={meta.name}
70
+ />
71
+ <p style={{ paddingRight: '1rem' }}>
72
+ {meta.name.length > 17
73
+ ? meta.name.substring(0, 17) + '...'
74
+ : meta.name}
75
+ </p>
76
+ </>
77
+ ) : (
78
+ <>
79
+ <img
80
+ className="dropzone-upload-previewImage mt-1"
81
+ src={meta.previewUrl}
82
+ alt={meta.name}
83
+ style={{
84
+ width: '110px',
85
+ height: '110px',
86
+ objectFit: 'cover',
87
+ marginRight: '0.5rem',
88
+ }}
89
+ />
90
+ <div className="dropzone-upload-file-name-container">
91
+ <p className="dropzone-upload-file-name" title={meta.name}>
92
+ {meta.name}
93
+ </p>
94
+ </div>
95
+ </>
96
+ )}
97
+ <button
98
+ style={{ marginTop: '0rem' }}
99
+ onClick={remove}
100
+ className="dropzone-upload-delete-btn simple-icon-trash"
101
+ ></button>
102
+ </div>
103
+ );
104
+ };
106
105
 
107
- const Input = ({ accept, onFiles, getFilesFromEvent }) => {
108
- const text = totalFiles > 0 ? `${2 - totalFiles} archivos más` : `${label}`
109
- return (
110
- <>
111
- <Button
112
- outline
113
- block
114
- size='xs'
115
- className='mt-5 ml-5'
116
- onClick={() => document.getElementById('fileInput').click()}
117
- >
118
- {text}
119
- <input
120
- id='fileInput'
121
- style={{ display: 'none' }}
122
- type='file'
123
- accept={accept}
124
- multiple
125
- onChange={(e) => {
126
- getFilesFromEvent(e).then((chosenFiles) => {
127
- onFiles(chosenFiles)
128
- })
129
- }}
130
- />
131
- </Button>
132
- </>
133
- )
134
- }
106
+ const Input = ({ accept, onFiles, getFilesFromEvent }) => {
107
+ const text = totalFiles > 0 ? `${2 - totalFiles} archivos más` : `${label}`;
108
+ return (
109
+ <>
110
+ <Button
111
+ outline
112
+ block
113
+ size="xs"
114
+ className="mt-5 ml-5"
115
+ onClick={() => document.getElementById('fileInput').click()}
116
+ >
117
+ {text}
118
+ <input
119
+ id="fileInput"
120
+ style={{ display: 'none' }}
121
+ type="file"
122
+ accept={accept}
123
+ multiple
124
+ onChange={(e) => {
125
+ getFilesFromEvent(e).then((chosenFiles) => {
126
+ onFiles(chosenFiles);
127
+ });
128
+ }}
129
+ />
130
+ </Button>
131
+ </>
132
+ );
133
+ };
135
134
 
136
- return (
137
- <div className={classNames}>
138
- <Dropzone
139
- disableUpload={false}
140
- maxFiles={totalFiles < 2 ? 2 : 0}
141
- maxSize={maxSize} // en megas
142
- InputComponent={Input}
143
- PreviewComponent={CustomPreview}
144
- classNames={{ dropzone: 'dropzone-upload-frame' }}
145
- onChangeStatus={handleChangeStatus}
146
- getFilesFromEvent={getFilesFromEvent}
147
- accept={accept}
148
- />
149
- </div>
150
- )
151
- }
135
+ return (
136
+ <div className={classNames}>
137
+ <Dropzone
138
+ disableUpload={false}
139
+ maxFiles={totalFiles < 2 ? 2 : 0}
140
+ maxSize={maxSize} // en megas
141
+ InputComponent={Input}
142
+ PreviewComponent={CustomPreview}
143
+ classNames={{ dropzone: 'dropzone-upload-frame' }}
144
+ onChangeStatus={handleChangeStatus}
145
+ getFilesFromEvent={getFilesFromEvent}
146
+ accept={accept}
147
+ />
148
+ </div>
149
+ );
150
+ };
152
151
 
153
- export default DropzoneUploaderDniDigital
152
+ export default DropzoneUploaderDniDigital;