@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTAttachmentList/UTAttachmentList.stories.js

@@ -0,0 +1,327 @@
+import { joinArgTypes } from 'stories/utils';
+import UTAttachmentList from '.';
+export default {
+  args: {
+    acceptedFileTypes: 'image/*,.pdf',
+    disabled: false,
+    fieldTypes: ['image'],
+    input: {
+      value: null,
+      onChange: () => {}
+    },
+    maxFileSize: 5242880
+  },
+  argTypes: {
+    acceptedFileTypes: {
+      description: 'Tipos de archivo aceptados (MIME types).',
+      table: {
+        defaultValue: {
+          summary: 'image/*,.pdf'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    actions: {
+      description: 'Array de acciones personalizadas (botones) para agregar al componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    allowedPDFUploadSizes: {
+      description: 'Array con las dimensiones permitidas para archivos PDF.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: joinArgTypes(['{ name: string, heightInPt: number, widthInPt: number, tolerance: number }'])
+        }
+      }
+    },
+    classes: {
+      description: 'Clases personalizadas para los elementos del componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: joinArgTypes(['container', 'previewContainer', 'filesIcon', 'errorContainer'])
+        }
+      }
+    },
+    containerClassname: {
+      description: 'Clase personalizada para el contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    customValidation: {
+      description: 'Función de validación personalizada para los archivos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    dataTestId: {
+      description: 'ID de prueba para el input de archivo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    deleteDataTestId: {
+      description: 'ID de prueba para el botón de eliminar archivo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si el componente está deshabilitado.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Modo solo lectura. Oculta el área de carga y el ícono de eliminar. Muestra los archivos con preview y botón de descarga.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    disableResize: {
+      control: 'boolean',
+      description: 'Deshabilita el redimensionamiento automático de imágenes.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    errorClassname: {
+      description: 'Clase personalizada para los mensajes de error.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    field: {
+      description: 'Configuración del campo con propiedades como help_text, max_file_size, accepted_file_types y max_files.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    fieldTypes: {
+      description: 'Array con los tipos de campo permitidos.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    hideLabels: {
+      description: 'Oculta las etiquetas del componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    icon: {
+      description: 'Ícono personalizado para el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'ReactNode'
+        }
+      }
+    },
+    input: {
+      description: 'Objeto con value (archivos) y onChange (callback).',
+      table: {
+        defaultValue: {
+          summary: '{ value: null, onChange: () => {} }'
+        },
+        type: {
+          summary: '{ value: File | string | array, onChange: function }'
+        }
+      }
+    },
+    loadingTextClassname: {
+      description: 'Clase personalizada para el texto de carga.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    maxFileSize: {
+      control: 'number',
+      description: 'Tamaño máximo de archivo en bytes.',
+      table: {
+        defaultValue: {
+          summary: '99999999'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    onLoaded: {
+      description: 'Callback que se ejecuta cuando los archivos se han cargado. Recibe como primer argumento el array de File objects resultante.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    notifyOnInitialLoad: {
+      control: 'boolean',
+      description: 'Cuando es false, suprime el input.onChange que ocurre al terminar de cargar URLs como initialValues, evitando que el formulario se marque como dirty. onLoaded(files) sigue disponible para que el consumidor actualice el form state si lo necesita. Default: true (comportamiento existente).',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    previewDataTestId: {
+      description: 'ID de prueba para el contenedor de vista previa.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    resizeConfig: {
+      description: 'Configuración para el redimensionamiento de imágenes.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ type: string, maxWidth: number, maxHeight: number }'
+        }
+      }
+    },
+    sanitize: {
+      description: 'Función para sanitizar archivos antes de procesarlos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    titleVariant: {
+      description: 'Variante de estilo para el título del componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  component: UTAttachmentList,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'customValidation', 'field', 'icon', 'input', 'onLoaded', 'resizeConfig', 'sanitize']
+    },
+    docs: {
+      description: {
+        component: 'Componente para la carga y gestión de archivos adjuntos. Soporta validación de formato, tamaño, y vista previa de imágenes, videos, audio y PDFs.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTAttachmentList'
+};
+export const Playground = {
+  name: 'Playground'
+};
+export const ReadOnly = {
+  args: {
+    readOnly: true,
+    input: {
+      value: [{
+        url: 'https://picsum.photos/seed/energy/200/200',
+        name: 'imagen-ejemplo.jpg'
+      }, {
+        url: 'https://invalid-url-to-test-error.example/doc.pdf',
+        name: 'documento-error.pdf'
+      }],
+      onChange: () => {}
+    }
+  },
+  name: 'ReadOnly'
+};

package/dist/esm/components/UTAttachmentList/components/Preview/index.js

@@ -1 +1,44 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React,{memo}from"react";import{string,shape,func,objectOf}from"prop-types";import UTTouchableWithoutFeedback from"../../../UTTouchableWithoutFeedback";import{isAudio,isImage,isPDF,isVideo}from"../../utils";import{ICON_SIZE,previewPropType}from"../../constants";import UTIcon from"../../../UTIcon";import styles from"./styles.module.scss";const Preview=_ref=>{let{openPreviewModal:openPreviewModal,preview:preview,previewProps:previewProps={}}=_ref;return isPDF(preview)?React.createElement(UTIcon,{name:"IconFiles",colorTheme:"accent",size:ICON_SIZE}):React.createElement(UTTouchableWithoutFeedback,{onClick:()=>openPreviewModal(preview)},isImage(preview)&&React.createElement("img",_extends({src:preview.src,className:styles.previewImage,alt:""},null==previewProps?void 0:previewProps.image)),isAudio(preview)&&React.createElement(UTIcon,{name:"IconVolume",colorTheme:"accent",size:ICON_SIZE}),isVideo(preview)&&React.createElement(UTIcon,{name:"IconVideo",colorTheme:"accent",size:ICON_SIZE}))};Preview.propTypes={classes:objectOf(string),openPreviewModal:func,previewProps:previewPropType,preview:shape({src:string,type:string})};export default memo(Preview);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo } from 'react';
+import { string, shape, func, objectOf } from 'prop-types';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import { isAudio, isImage, isPDF, isVideo } from '../../utils';
+import { ICON_SIZE, previewPropType } from '../../constants';
+import UTIcon from '../../../UTIcon';
+import styles from './styles.module.scss';
+const Preview = _ref => {
+  let {
+    openPreviewModal,
+    preview,
+    previewProps = {}
+  } = _ref;
+  return isPDF(preview) ? /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconFiles",
+    colorTheme: "accent",
+    size: ICON_SIZE
+  }) : /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    onClick: () => openPreviewModal(preview)
+  }, isImage(preview) && /*#__PURE__*/React.createElement("img", _extends({
+    src: preview.src,
+    className: styles.previewImage,
+    alt: ""
+  }, previewProps === null || previewProps === void 0 ? void 0 : previewProps.image)), isAudio(preview) && /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconVolume",
+    colorTheme: "accent",
+    size: ICON_SIZE
+  }), isVideo(preview) && /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconVideo",
+    colorTheme: "accent",
+    size: ICON_SIZE
+  }));
+};
+Preview.propTypes = {
+  classes: objectOf(string),
+  openPreviewModal: func,
+  previewProps: previewPropType,
+  preview: shape({
+    src: string,
+    type: string
+  })
+};
+export default /*#__PURE__*/memo(Preview);

package/dist/esm/components/UTAttachmentList/components/PreviewModal/index.js

@@ -1 +1,52 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React from"react";import{string,shape,func,bool}from"prop-types";import UTDialog from"../../../../deprecated/UTDialog";import{isAudio,isImage,isVideo}from"../../utils";import{previewPropType}from"../../constants";import styles from"./styles.module.scss";const PreviewModal=_ref=>{let{closePreviewModal:closePreviewModal,preview:preview,previewModalIsOpen:previewModalIsOpen,previewProps:previewProps={}}=_ref;return React.createElement(UTDialog,{classNames:{container:styles.container,content:styles.content},isOpen:previewModalIsOpen,onRequestClose:()=>closePreviewModal()},isImage(preview)&&React.createElement("img",_extends({src:preview.src,className:styles.previewImage,alt:""},null==previewProps?void 0:previewProps.image)),isAudio(preview)&&React.createElement("audio",_extends({controls:!0,controlsList:"nodownload",className:styles.previewAudio},null==previewProps?void 0:previewProps.audio),React.createElement("source",{src:preview.src,type:preview.type})),isVideo(preview)&&React.createElement("video",_extends({controls:!0,disablePictureInPicture:!0,controlsList:"nodownload",className:styles.previewVideo},null==previewProps?void 0:previewProps.video),React.createElement("source",{src:preview.src,type:preview.type})))};PreviewModal.propTypes={closePreviewModal:func,preview:shape({src:string,type:string}),previewModalIsOpen:bool,previewProps:previewPropType};export default PreviewModal;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { string, shape, func, bool } from 'prop-types';
+import UTDialog from '../../../../deprecated/UTDialog';
+import { isAudio, isImage, isVideo } from '../../utils';
+import { previewPropType } from '../../constants';
+import styles from './styles.module.scss';
+const PreviewModal = _ref => {
+  let {
+    closePreviewModal,
+    preview,
+    previewModalIsOpen,
+    previewProps = {}
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTDialog, {
+    classNames: {
+      container: styles.container,
+      content: styles.content
+    },
+    isOpen: previewModalIsOpen,
+    onRequestClose: () => closePreviewModal()
+  }, isImage(preview) && /*#__PURE__*/React.createElement("img", _extends({
+    src: preview.src,
+    className: styles.previewImage,
+    alt: ""
+  }, previewProps === null || previewProps === void 0 ? void 0 : previewProps.image)), isAudio(preview) && /*#__PURE__*/React.createElement("audio", _extends({
+    controls: true,
+    controlsList: "nodownload",
+    className: styles.previewAudio
+  }, previewProps === null || previewProps === void 0 ? void 0 : previewProps.audio), /*#__PURE__*/React.createElement("source", {
+    src: preview.src,
+    type: preview.type
+  })), isVideo(preview) && /*#__PURE__*/React.createElement("video", _extends({
+    controls: true,
+    disablePictureInPicture: true,
+    controlsList: "nodownload",
+    className: styles.previewVideo
+  }, previewProps === null || previewProps === void 0 ? void 0 : previewProps.video), /*#__PURE__*/React.createElement("source", {
+    src: preview.src,
+    type: preview.type
+  })));
+};
+PreviewModal.propTypes = {
+  closePreviewModal: func,
+  preview: shape({
+    src: string,
+    type: string
+  }),
+  previewModalIsOpen: bool,
+  previewProps: previewPropType
+};
+export default PreviewModal;

package/dist/esm/components/UTAttachmentList/constants.js

@@ -1 +1,24 @@
-import{object,shape}from"prop-types";export const FORMAT_ERROR_TEXT="El formato no es compatible";export const SIZE_ERROR_TEXT="El archivo supera los ";export const ASPECT_RATIO_ERROR_TEXT="El formato de archivo es inválido. (Válidos:";export const FILE_NOT_FOUND_ERROR_TEXT="Hubo un error al cargar el archivo";export const DEFAULT_UPLOADING_TEXT="Cargando...";export const DEFAULT_ATTACHMENT_NAME="Adjunto";export const FORMAT_FILE_LABEL="Debe tener formato: ";export const MAX_SIZE_FILE_LABEL="No debe superar los ";export const UPLOAD_FILE="Subir archivo";export const INDICATIONS="Arrastra y suelta o";export const MB_LABEL="MB";export const MAX_FILES_ERROR="Se ha excedido el límite máximo de archivos permitidos ";export const DEFAULT_MAX_FILES=1;export const ICON_SIZE=32;export const PREVIEW_TYPES={ERROR:"error",LOADING:"loading"};export const previewPropType=shape({audio:object,image:object,video:object});
+import { object, shape } from 'prop-types';
+export const FORMAT_ERROR_TEXT = 'El formato no es compatible';
+export const SIZE_ERROR_TEXT = 'El archivo supera los ';
+export const ASPECT_RATIO_ERROR_TEXT = 'El formato de archivo es inválido. (Válidos:';
+export const FILE_NOT_FOUND_ERROR_TEXT = 'Hubo un error al cargar el archivo';
+export const DEFAULT_UPLOADING_TEXT = 'Cargando...';
+export const DEFAULT_ATTACHMENT_NAME = 'Adjunto';
+export const FORMAT_FILE_LABEL = 'Debe tener formato: ';
+export const MAX_SIZE_FILE_LABEL = 'No debe superar los ';
+export const UPLOAD_FILE = 'Subir archivo';
+export const INDICATIONS = 'Arrastra y suelta o';
+export const MB_LABEL = 'MB';
+export const MAX_FILES_ERROR = 'Se ha excedido el límite máximo de archivos permitidos ';
+export const DEFAULT_MAX_FILES = 1;
+export const ICON_SIZE = 32;
+export const PREVIEW_TYPES = {
+  ERROR: 'error',
+  LOADING: 'loading'
+};
+export const previewPropType = shape({
+  audio: object,
+  image: object,
+  video: object
+});