siam-ui-utils 2.1.0 → 2.1.2

package/.storybook/main.ts

@@ -1,17 +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;
+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

@@ -1,16 +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;
+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/package.json

@@ -1,87 +1,87 @@
-{
-  "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"
-    ]
-  }
-}
+{
+  "name": "siam-ui-utils",
+  "version": "2.1.2",
+  "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.1.0",
+    "vitest": "^2.0.5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/bridges/index.jsx

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

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

@@ -2,31 +2,33 @@ 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 args = {
+  onChangeFiles: () => {
+    console.log('Accion despues de seleccionar un archivo');
+  },
+  totalFiles: 0,
+  maxFiles: 3,
+  accept: 'image/*, application/pdf',
+  capture: null,
+  nameFileLabel: 'Subir archivos',
+  maxFileSize: 2,
+};
 
 const meta = {
   title: 'Components/DropzoneUploader',
   component: DropzoneUploader,
-    args: {
-        ...args
-    },
+  args: {
+    ...args,
+  },
 } satisfies Meta<typeof DropzoneUploader>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const DropzoneUploaderBasic: Story = {
   args: {
     ...args,
-    maxFileSize: 7
-    },
+    maxFileSize: 5,
+  },
 };
-

package/src/dropzone-uploader/index.jsx

@@ -1,138 +1,150 @@
 /* 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  from '../iconos/icon-button-svg'
-import { pdfImage } from '../constants-svg'
-import "./dropzone-uploader.css"
+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 from '../iconos/icon-button-svg';
+import { pdfImage } from '../constants-svg';
+import './dropzone-uploader.css';
 
-const maxSize = 7 //en MB
+console.log('dropzone1 :>> ');
+
+const maxSize = 7; //en MB
 export const DropzoneUploader = ({
-	onChangeFiles,
-	totalFiles,
-    maxFiles = 3,
-	accept = 'image/*, application/pdf',
-	capture = null,
-    nameFileLabel = 'Subir archivos',
-    maxFileSize=maxSize
+  onChangeFiles,
+  totalFiles,
+  maxFiles = 3,
+  accept = 'image/*, application/pdf',
+  capture = null,
+  nameFileLabel = 'Subir archivos',
+  maxFileSize = maxSize,
 }) => {
-	const [files, setFiles] = useState([])
-	const [totalFilesDU, setTotalFilesDU] = useState(totalFiles)
-	const handleChangeStatus = ({ file }, status) => {
-		if (status == 'done') {
-			const filesTemp = files
-			filesTemp.push(file)
-			setFiles(filesTemp)
-			onChangeFiles(files)
-			setTotalFilesDU(files.length)
-		} else if (status == 'removed') {
-			const filesTemp = files
-			const index = files.indexOf(file)
-			if (index > -1) {
-				filesTemp.splice(index, 1)
-			}
-			setFiles(filesTemp)
-			onChangeFiles(files)
-			setTotalFilesDU(files.length)
-		}
-	}
-	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) > maxFileSize) {
-			NotificationManager.error(
-				'El archivo supera el tamaño máximo',
-				'Advertencia'
-			)
-			remove()
-		}
-		return (
-			<div className='dropzone-upload-previewContainer'>
-				{meta.type === 'application/pdf' ? (
-					<>
-						<IconButtonSvg
-							className='form-control flex'
-							svg={pdfImage}
-							svgOver={pdfImage}
-							height='1.6rem'
-							width='1.6rem'
-							title={meta.name}
-						/>
-						<p>
-							{meta.name.length > 17
-								? meta.name.substring(0, 17) + '...'
-								: meta.name}
-						</p>
-					</>
-				) : (
-					<>
-						<img
-							className='dropzone-upload-previewImage'
-							src={meta.previewUrl}
-							alt={meta.name}
-						/>
-						<p>
-							{meta.name.length > 17
-								? meta.name.substring(0, 17) + '...'
-								: meta.name}
-						</p>
-					</>
-				)}
-				<p>{(meta.size / 1024).toFixed(2)} .Kb</p>
-				<button
-					onClick={remove}
-					className='dropzone-upload-delete-btn simple-icon-trash'
-				></button>
-			</div>
-		)
-	}
+  console.log('dropzone2 :>> ');
+
+  const [files, setFiles] = useState([]);
+  const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);
+  const handleChangeStatus = ({ file }, status) => {
+    if (status == 'done') {
+      const filesTemp = files;
+      filesTemp.push(file);
+      setFiles(filesTemp);
+      onChangeFiles(files);
+      setTotalFilesDU(files.length);
+    } else if (status == 'removed') {
+      const filesTemp = files;
+      const index = files.indexOf(file);
+      if (index > -1) {
+        filesTemp.splice(index, 1);
+      }
+      setFiles(filesTemp);
+      onChangeFiles(files);
+      setTotalFilesDU(files.length);
+    }
+  };
+  const getFilesFromEvent = (e) => {
+    console.log('dropzone3 :>> ');
+
+    return new Promise((resolve) => {
+      getDroppedOrSelectedFiles(e).then((chosenFiles) => {
+        resolve(chosenFiles.map((f) => f.fileObject));
+      });
+    });
+  };
+  const CustomPreview = ({ fileWithMeta }) => {
+    console.log('dropzone4 :>> ');
+
+    const { meta, remove } = fileWithMeta;
+    if (meta.size / (1024 * 1024) > maxFileSize) {
+      NotificationManager.error(
+        'El archivo supera el tamaño máximo',
+        'Advertencia',
+      );
+      remove();
+    }
+    return (
+      <div className="dropzone-upload-previewContainer">
+        {meta.type === 'application/pdf' ? (
+          <>
+            <IconButtonSvg
+              className="form-control flex"
+              svg={pdfImage}
+              svgOver={pdfImage}
+              height="1.6rem"
+              width="1.6rem"
+              title={meta.name}
+            />
+            <p>
+              {meta.name.length > 17
+                ? meta.name.substring(0, 17) + '...'
+                : meta.name}
+            </p>
+          </>
+        ) : (
+          <>
+            <img
+              className="dropzone-upload-previewImage"
+              src={meta.previewUrl}
+              alt={meta.name}
+            />
+            <p>
+              {meta.name.length > 17
+                ? meta.name.substring(0, 17) + '...'
+                : meta.name}
+            </p>
+          </>
+        )}
+        <p>{(meta.size / 1024).toFixed(2)} .Kb</p>
+        <button
+          onClick={remove}
+          className="dropzone-upload-delete-btn simple-icon-trash"
+        ></button>
+      </div>
+    );
+  };
+
+  const Input = ({ accept, onFiles, getFilesFromEvent }) => {
+    console.log('dropzone4 :>> ');
+
+    const text =
+      totalFilesDU > 0
+        ? `${maxFiles - totalFilesDU} archivo/s más`
+        : nameFileLabel;
+    return (
+      <label className="dropzone-upload-button">
+        {text}
+        <input
+          style={{ display: 'none' }}
+          type="file"
+          accept={accept}
+          capture={capture}
+          multiple
+          onChange={(e) => {
+            getFilesFromEvent(e).then((chosenFiles) => {
+              onFiles(chosenFiles);
+            });
+          }}
+        />
+      </label>
+    );
+  };
+  useEffect(() => {
+    setTotalFilesDU(totalFiles);
+  }, [totalFiles]);
 
-	const Input = ({ accept, onFiles, getFilesFromEvent }) => {
-		const text =
-			totalFilesDU > 0
-				? `${maxFiles - totalFilesDU} archivo/s más`
-				: nameFileLabel
-		return (
-			<label className='dropzone-upload-button'>
-				{text}
-				<input
-					style={{ display: 'none' }}
-					type='file'
-					accept={accept}
-					capture={capture}
-					multiple
-					onChange={(e) => {
-						getFilesFromEvent(e).then((chosenFiles) => {
-							onFiles(chosenFiles)
-						})
-					}}
-				/>
-			</label>
-		)
-	}
-	useEffect(() => {
-		setTotalFilesDU(totalFiles)
-	}, [totalFiles])
+  console.log('dropzone5 :>> ');
 
-	return (
-		<Dropzone
-			disableUpload={false}
-			maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
-			maxSize={maxFileSize} // en megas
-			InputComponent={Input}
-			PreviewComponent={CustomPreview}
-			classNames={{ dropzone: 'dropzone-upload-frame' }}
-			onChangeStatus={handleChangeStatus}
-			getFilesFromEvent={getFilesFromEvent}
-			accept={accept}
-		/>
-	)
-}
+  return (
+    <Dropzone
+      disableUpload={false}
+      maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
+      maxSize={maxFileSize} // en megas
+      InputComponent={Input}
+      PreviewComponent={CustomPreview}
+      classNames={{ dropzone: 'dropzone-upload-frame' }}
+      onChangeStatus={handleChangeStatus}
+      getFilesFromEvent={getFilesFromEvent}
+      accept={accept}
+    />
+  );
+};

package/src/index.js

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

package/vite.config.ts

@@ -3,12 +3,8 @@ import { defineConfig } from "vitest/config";
 import eslint from 'vite-plugin-eslint';
 
 export default defineConfig({
-    plugins: [react(), eslint()],
+    plugins: [react()],
     test: {
         globals: true,
-    },
-    server: {
-        port: 3002,
-        open: true,
-    },
+    }
 });