@widergy/mobile-ui 2.1.0 → 3.4.1

package/lib/components/FileDownloadManager/index.js

@@ -0,0 +1,373 @@
+/* eslint-disable import/no-unresolved */
+// FileDownloadManager - Core file operations module
+// Handles file generation, storage, notifications, and opening across platforms
+
+import { File, Paths } from 'expo-file-system';
+import * as FileSystemLegacy from 'expo-file-system/legacy';
+import * as Notifications from 'expo-notifications';
+import * as Sharing from 'expo-sharing';
+import { Platform, InteractionManager } from 'react-native';
+import { decode as atob, encode as btoa } from 'base-64';
+import XLSX from 'xlsx';
+import dayjs from 'dayjs';
+import * as FileViewer from 'react-native-file-viewer';
+
+import { FILE_TYPES, FILE_MIME_TYPES, VIEWER_SUPPORT, DEFAULT_TRANSLATIONS, replaceParams } from './types';
+
+const DOWNLOAD_NOTIFICATION_CHANNEL_ID = 'file-downloads';
+
+let notificationResponseListenerRegistered = false;
+let androidNotificationChannelConfigured = false;
+let cachedNotificationsPermission = null;
+
+// ==================== Utilities ====================
+
+const slugify = name =>
+  (name || 'document')
+    .toString()
+    .trim()
+    .replace(/[\s]+/g, '_')
+    .replace(/[^\w.-]+/g, '');
+
+const buildTimestampSuffix = () => dayjs().format('DD_MM_YYYY_HH_mm_ss');
+
+const appendTimestampToName = fileName => {
+  const lastDot = fileName.lastIndexOf('.');
+  const suffix = buildTimestampSuffix();
+
+  if (lastDot === -1) {
+    return `${fileName}_${suffix}`;
+  }
+
+  const base = fileName.substring(0, lastDot);
+  const extension = fileName.substring(lastDot);
+  return `${base}_${suffix}${extension}`;
+};
+
+const base64ToUint8Array = base64 => {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+};
+
+const uint8ArrayToBase64 = bytes => {
+  if (!bytes) return '';
+  let binary = '';
+  const chunk = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    const slice = bytes.subarray(i, i + chunk);
+    binary += String.fromCharCode.apply(null, Array.from(slice));
+  }
+  return btoa(binary);
+};
+
+const ensureContentUri = async uri => {
+  if (!uri) return null;
+  if (uri.startsWith('content://')) return uri;
+
+  const getContentUriAsync =
+    Platform.OS === 'android' && typeof FileSystemLegacy.getContentUriAsync === 'function'
+      ? FileSystemLegacy.getContentUriAsync
+      : null;
+
+  if (!getContentUriAsync) {
+    throw new Error('Expo FileSystem legacy no disponible para obtener un content:// URI.');
+  }
+  return getContentUriAsync(uri);
+};
+
+// ==================== File Generation ====================
+
+const generateExcelFile = data => {
+  const ws = XLSX.utils.json_to_sheet(data);
+  const wb = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(wb, ws, 'Datos');
+  return XLSX.write(wb, { type: 'base64', bookType: 'xlsx' });
+};
+
+const generateJsonFile = data => {
+  const jsonString = JSON.stringify(data, null, 2);
+  return btoa(jsonString);
+};
+
+const generateFileContent = (type, data) => {
+  switch (type) {
+    case FILE_TYPES.XLS:
+      return generateExcelFile(data);
+    case FILE_TYPES.JSON:
+      return generateJsonFile(data);
+    case FILE_TYPES.PDF:
+      // Para PDF esperamos que data ya sea base64
+      return data;
+    default:
+      throw new Error(`Unsupported file type: ${type}`);
+  }
+};
+
+// ==================== File Storage ====================
+
+const saveToInternalDocuments = async (base64Data, fullFileName) => {
+  if (Platform.OS === 'ios') {
+    const base64Payload = typeof base64Data === 'string' ? base64Data : uint8ArrayToBase64(base64Data);
+
+    let targetName = fullFileName;
+    let targetUri = `${FileSystemLegacy.documentDirectory}${targetName}`;
+    const existingInfo = await FileSystemLegacy.getInfoAsync(targetUri);
+
+    if (existingInfo.exists) {
+      targetName = appendTimestampToName(fullFileName);
+      targetUri = `${FileSystemLegacy.documentDirectory}${targetName}`;
+    }
+
+    await FileSystemLegacy.writeAsStringAsync(targetUri, base64Payload, {
+      encoding: FileSystemLegacy.EncodingType.Base64
+    });
+
+    const info = await FileSystemLegacy.getInfoAsync(targetUri);
+    if (!info?.exists || !info.uri) throw new Error('write failed');
+
+    return { fileName: targetName, fileUri: info.uri };
+  }
+
+  let targetName = fullFileName;
+  let file = new File(Paths.document, targetName);
+  const existingInfo = await file.info();
+
+  if (existingInfo.exists) {
+    targetName = appendTimestampToName(fullFileName);
+    file = new File(Paths.document, targetName);
+  }
+
+  await file.parentDirectory.create({ intermediates: true, idempotent: true });
+  await file.create({ overwrite: true });
+  const bytes = base64Data instanceof Uint8Array ? base64Data : base64ToUint8Array(base64Data);
+  await file.write(bytes);
+
+  const info = await file.info();
+  if (!info?.exists || !info.uri) throw new Error('write failed');
+
+  return { fileName: targetName, fileUri: info.uri };
+};
+
+// ==================== File Opening ====================
+
+const openFileWithNativeViewer = async uri => {
+  const viewerTarget = uri.startsWith('file://') ? uri.replace('file://', '') : uri;
+
+  try {
+    await FileViewer.open(viewerTarget, {
+      showOpenWithDialog: Platform.OS === 'android'
+    });
+    return true;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log('Native viewer error:', error);
+    return false;
+  }
+};
+
+const shareFile = async (uri, fileName, fileType, translations) => {
+  try {
+    const isAvailable = await Sharing.isAvailableAsync();
+    if (!isAvailable) {
+      throw new Error('Sharing is not available on this device');
+    }
+
+    // En Android necesitamos content URI
+    const shareUri = Platform.OS === 'android' ? await ensureContentUri(uri) : uri;
+
+    await Sharing.shareAsync(shareUri, {
+      mimeType: FILE_MIME_TYPES[fileType],
+      dialogTitle: replaceParams(translations.shareFileTitle, { fileName }),
+      UTI: FILE_MIME_TYPES[fileType]
+    });
+    return true;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log('Share error:', error);
+    throw new Error(translations.shareError);
+  }
+};
+
+const openOrShareFile = async (uri, fileName, fileType, translations) => {
+  if (!uri) throw new Error('No se pudo obtener la ubicación del archivo');
+
+  const supportsNativeViewer = VIEWER_SUPPORT[fileType];
+
+  // Intentar abrir con visor nativo si está soportado
+  if (supportsNativeViewer) {
+    const opened = await openFileWithNativeViewer(uri, fileType);
+    if (opened) return;
+  }
+
+  // Si no se pudo abrir nativamente o no está soportado, compartir
+  await shareFile(uri, fileName, fileType, translations);
+};
+
+// ==================== Notifications ====================
+
+const ensureNotificationsPermissionAsync = async () => {
+  if (cachedNotificationsPermission === true) return true;
+  if (cachedNotificationsPermission === false) return false;
+
+  try {
+    let permissions = await Notifications.getPermissionsAsync();
+    if (!permissions.granted) {
+      permissions = await Notifications.requestPermissionsAsync();
+    }
+    cachedNotificationsPermission = Boolean(permissions.granted);
+    return cachedNotificationsPermission;
+  } catch (permissionError) {
+    // eslint-disable-next-line no-console
+    console.log('notifications permission error:', permissionError);
+    cachedNotificationsPermission = false;
+    return false;
+  }
+};
+
+const ensureAndroidNotificationChannelAsync = async () => {
+  if (Platform.OS !== 'android' || androidNotificationChannelConfigured) return;
+
+  try {
+    await Notifications.setNotificationChannelAsync(DOWNLOAD_NOTIFICATION_CHANNEL_ID, {
+      name: 'File Downloads',
+      importance: Notifications.AndroidImportance.DEFAULT
+    });
+    androidNotificationChannelConfigured = true;
+  } catch (channelError) {
+    // eslint-disable-next-line no-console
+    console.log('notification channel error:', channelError);
+  }
+};
+
+const ensureNotificationListener = translations => {
+  if (notificationResponseListenerRegistered) return;
+
+  Notifications.addNotificationResponseReceivedListener(response => {
+    const { fileUri, fileName, fileType } = response.notification.request.content.data || {};
+    if (!fileUri) return;
+
+    InteractionManager.runAfterInteractions(() => {
+      openOrShareFile(fileUri, fileName, fileType, translations).catch(openError => {
+        // eslint-disable-next-line no-console
+        console.log('notification response open error:', openError);
+      });
+    });
+  });
+
+  notificationResponseListenerRegistered = true;
+};
+
+const notifyDownloadSuccess = async (fileName, fileUri, fileType, translations) => {
+  if (!fileUri) return;
+
+  try {
+    ensureNotificationListener(translations);
+    const hasPermission = await ensureNotificationsPermissionAsync();
+    if (!hasPermission) return;
+
+    if (Platform.OS === 'android') {
+      await ensureAndroidNotificationChannelAsync();
+    }
+
+    await Notifications.scheduleNotificationAsync({
+      content: {
+        title: translations.downloadReadyTitle,
+        body: replaceParams(translations.downloadReadyBody, { fileName }),
+        data: { fileUri, fileName, fileType },
+        ...(Platform.OS === 'android' ? { channelId: DOWNLOAD_NOTIFICATION_CHANNEL_ID } : {})
+      },
+      trigger: null
+    });
+  } catch (notificationError) {
+    // eslint-disable-next-line no-console
+    console.log('notifyDownloadSuccess error:', notificationError);
+  }
+};
+
+// ==================== Public API ====================
+
+/**
+ * Main function to handle file download workflow
+ * @param {FileGenerationConfig} config - File generation configuration
+ * @returns {Promise<{success: boolean, fileUri: string, fileName: string}>}
+ */
+export const downloadFile = async config => {
+  const { type, fileName, data, dispatch, translations: customTranslations, options = {} } = config;
+
+  // Merge custom translations with defaults
+  const translations = { ...DEFAULT_TRANSLATIONS, ...customTranslations };
+
+  try {
+    // 1. Generate file content
+    const base64Content = generateFileContent(type, data);
+
+    // 2. Save to internal storage
+    const safeName = `${slugify(fileName)}.${type}`;
+    const { fileUri, fileName: storedFileName } = await saveToInternalDocuments(base64Content, safeName);
+
+    // 3. Show success notification via dispatch (if provided)
+    if (dispatch && !options.hideNotification && options.showSnackbar) {
+      options.showSnackbar(dispatch, 'success');
+    }
+
+    // 4. Send notification
+    if (!options.hideNotification) {
+      await notifyDownloadSuccess(storedFileName, fileUri, type, translations);
+    }
+
+    // 5. Auto-open if requested
+    if (!options.preventAutoOpen) {
+      await openOrShareFile(fileUri, storedFileName, type, translations);
+    }
+
+    // 6. Success callback
+    if (options.successCallback) {
+      options.successCallback({ fileUri, fileName: storedFileName });
+    }
+
+    return {
+      success: true,
+      fileUri,
+      fileName: storedFileName
+    };
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log('downloadFile error:', error);
+
+    // Error callback
+    if (options.failureCallback) {
+      options.failureCallback(error);
+    }
+
+    // Show error via dispatch
+    if (dispatch && options.showSnackbar) {
+      options.showSnackbar(dispatch, 'error', error);
+    }
+
+    throw error;
+  }
+};
+
+/**
+ * Open a previously saved file
+ * @param {string} fileUri - File URI
+ * @param {string} fileName - File name
+ * @param {string} fileType - File type
+ * @param {Translations} customTranslations - Custom translations (optional)
+ */
+export const openFile = async (fileUri, fileName, fileType, customTranslations = {}) => {
+  const translations = { ...DEFAULT_TRANSLATIONS, ...customTranslations };
+  await openOrShareFile(fileUri, fileName, fileType, translations);
+};
+
+export default {
+  downloadFile,
+  openFile,
+  FILE_TYPES,
+  FILE_MIME_TYPES,
+  VIEWER_SUPPORT
+};

package/lib/components/FileDownloadManager/types.js

@@ -0,0 +1,81 @@
+// FileDownloadManager types and constants
+
+export const FILE_TYPES = {
+  PDF: 'pdf',
+  XLS: 'xlsx',
+  JSON: 'json'
+};
+
+export const FILE_MIME_TYPES = {
+  [FILE_TYPES.PDF]: 'application/pdf',
+  [FILE_TYPES.XLS]: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  [FILE_TYPES.JSON]: 'application/json'
+};
+
+export const VIEWER_SUPPORT = {
+  [FILE_TYPES.PDF]: true, // Native PDF viewer
+  [FILE_TYPES.XLS]: false, // Share only
+  [FILE_TYPES.JSON]: false // Share only
+};
+
+/**
+ * @typedef {Object} Translations
+ * @property {string} downloadReadyTitle - Título de la notificación cuando el archivo está listo
+ *                                         Ejemplo: "Archivo listo" o "File ready"
+ *
+ * @property {string} downloadReadyBody - Cuerpo de la notificación con el nombre del archivo
+ *                                        Parámetros: {fileName}
+ *                                        Ejemplo: "{fileName} está disponible" o "{fileName} is available"
+ *
+ * @property {string} shareFileTitle - Título del diálogo de compartir archivo
+ *                                     Parámetros: {fileName}
+ *                                     Ejemplo: "Compartir {fileName}" o "Share {fileName}"
+ *
+ * @property {string} shareError - Mensaje de error cuando falla el compartir
+ *                                 Ejemplo: "No se pudo compartir el archivo" o "Could not share file"
+ *
+ * @property {string} successDownload - Mensaje de éxito para snackbar/toast
+ *                                      Ejemplo: "Archivo descargado correctamente" o "File downloaded successfully"
+ *
+ * @property {string} errorDownload - Mensaje de error para snackbar/toast
+ *                                    Ejemplo: "Error al descargar el archivo" o "Error downloading file"
+ *//**
+ * Traducciones por defecto en español
+ */
+export const DEFAULT_TRANSLATIONS = {
+  downloadReadyTitle: 'Archivo listo',
+  downloadReadyBody: '{fileName} está disponible',
+  shareFileTitle: 'Compartir {fileName}',
+  shareError: 'No se pudo compartir el archivo',
+  successDownload: 'Archivo descargado correctamente',
+  errorDownload: 'Error al descargar el archivo'
+};
+
+/**
+ * Reemplaza parámetros en un string de traducción
+ * @param {string} template - Template con parámetros entre llaves
+ * @param {Object} params - Objeto con los valores a reemplazar
+ * @returns {string} String con parámetros reemplazados
+ */
+export const replaceParams = (template, params = {}) => {
+  if (!template) return '';
+  return Object.keys(params).reduce(
+    (result, key) => result.replace(new RegExp(`\\{${key}\\}`, 'g'), params[key]),
+    template
+  );
+};
+
+/**
+ * @typedef {Object} FileGenerationConfig
+ * @property {string} type - File type: 'pdf', 'xlsx', 'json'
+ * @property {string} fileName - Base name without extension
+ * @property {any} data - File data (Excel data array, JSON object, or base64 for PDF)
+ * @property {Function} [dispatch] - Redux dispatch function for notifications
+ * @property {Translations} [translations] - Custom translations (falls back to DEFAULT_TRANSLATIONS)
+ * @property {Object} [options] - Additional options
+ * @property {boolean} [options.hideNotification] - Skip notification
+ * @property {boolean} [options.preventAutoOpen] - Don't auto-open after save
+ * @property {Function} [options.successCallback] - Called after successful save
+ * @property {Function} [options.failureCallback] - Called on error
+ * @property {Function} [options.showSnackbar] - Custom snackbar function
+ */

package/lib/components/FilePicker/index.js

@@ -31,6 +31,13 @@ class FilePicker extends Component {
       allowedPDFUploadSizes,
       pdfFormatError
     } = this.props;
+
+    const getRealFileType = mimeType => {
+      if (!mimeType || typeof mimeType !== 'string') return null;
+      const parts = mimeType.split('/');
+      return parts[1]?.toLowerCase() || null;
+    };
+
     try {
       const normalizeTypes = types => {
         if (!types || types.length === 0) return DEFAULT_ALLOWED_TYPES;
@@ -71,7 +78,8 @@ class FilePicker extends Component {
         onMaxSizeError(document.size, maxFileByteSize);
         return;
       }
-      const file = !avoidRetrieveFile && (await retrieveFile(document.uri, document.type));
+      const realFileType = getRealFileType(document.type);
+      const file = !avoidRetrieveFile && (await retrieveFile(document.uri, realFileType));
 
       if (file && isPDF && !isEmpty(allowedPDFUploadSizes)) {
         const isWrongFormat = await pdfAspectRatioValidation(file, allowedPDFUploadSizes);
@@ -85,7 +93,7 @@ class FilePicker extends Component {
         }
       }
       if (onChange) {
-        onChange(avoidRetrieveFile ? { document } : { file: blobToFile(file, document.type) });
+        onChange(avoidRetrieveFile ? { document } : { file: blobToFile(file, realFileType) });
       }
       this.setState({ fileName: document.name });
     } catch (err) {

package/lib/components/ImagePicker/index.js

@@ -57,7 +57,14 @@ const ImagePickerComponent = ({
         onError('No se pudo obtener el archivo');
         return;
       }
-      const file = !avoidRetrieveFile && (await retrieveFile(item.uri, item.type));
+      const getRealFileType = mimeType => {
+        if (!mimeType || typeof mimeType !== 'string') return null;
+        const parts = mimeType.split('/');
+        return parts[1]?.toLowerCase() || null;
+      };
+      const realFileType = getRealFileType(item.type);
+
+      const file = !avoidRetrieveFile && (await retrieveFile(item.uri, realFileType));
       if (!avoidRetrieveFile && !file) {
         onError(response.errorCode);
         return;

package/lib/components/MultipleFilePicker/index.js

@@ -79,6 +79,12 @@ const MultipleFilePicker = ({
 
   const remainingSlots = () => Math.max((maxFiles || 0) - uploadedFiles.length, 0);
 
+  const getRealFileType = mimeType => {
+    if (!mimeType || typeof mimeType !== 'string') return null;
+    const parts = mimeType.split('/');
+    return parts[1]?.toLowerCase() || null;
+  };
+
   const handleAssets = async response => {
     if (!response || response.didCancel) {
       return;
@@ -89,7 +95,8 @@ const MultipleFilePicker = ({
     }
     closeDrawer();
     response.assets.forEach(async asset => {
-      const file = await retrieveFile(asset.uri, asset.type);
+      const realFileType = getRealFileType(asset.mimeType);
+      const file = await retrieveFile(asset.uri, realFileType);
       if (!file) {
         onError(response.errorCode || 'No se pudo obtener el archivo');
         return;
@@ -98,7 +105,7 @@ const MultipleFilePicker = ({
       if (isFileSizeInvaid({ size: file.size }, maxFileByteSize, onMaxSizeError)) return;
       setNewFile({
         uploadFile: { name: file.data.name, size: file.data.size },
-        rawFile: blobToFile(file, asset.type)
+        rawFile: blobToFile(file, realFileType)
       });
     });
   };

package/lib/components/UTTopbar/index.js

@@ -20,7 +20,7 @@ const UTTopbar = ({
   stages,
   stepsCount,
   theme,
-  topbar: { colorTheme = 'light', goBack, title, Icon, withBackButton = true } = {}
+  topbar: { colorTheme = 'light', goBack, title, Icon } = {}
 }) => {
   const ownTheme = theme.UTWorkflowContainer?.topbar?.[colorTheme];
 
@@ -41,17 +41,15 @@ const UTTopbar = ({
   return (
     <View>
       <View style={[ownStyles.container, ownTheme?.container]}>
-        {withBackButton && (
-          <UTButton
-            dataTestId={goBackTestId}
-            Icon={Icon || 'IconArrowLeft'}
-            onPress={goBack}
-            style={{
-              root: ownStyles.goBack
-            }}
-            variant="text"
-          />
-        )}
+        <UTButton
+          dataTestId={goBackTestId}
+          Icon={Icon || 'IconArrowLeft'}
+          onPress={goBack}
+          style={{
+            root: ownStyles.goBack
+          }}
+          variant="text"
+        />
         <UTLabel
           colorTheme={ownTheme?.text || 'dark'}
           dataTestId={titleTestId}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "2.1.0",
+  "version": "3.4.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -37,23 +37,30 @@
     "@react-navigation/native": "^6.1.9",
     "@tabler/icons-react-native": "^3.34.1",
     "@widergy/web-utils": "^2.0.0",
+    "base-64": "^1.0.0",
     "core-js": "3",
+    "dayjs": "^1.11.18",
     "deprecated-react-native-prop-types": "^5.0.0",
     "expo-document-picker": "^13.1.6",
+    "expo-file-system": "^19.0.17",
     "expo-image-manipulator": "^13.1.7",
     "expo-image-picker": "^16.1.4",
+    "expo-notifications": "^0.32.12",
+    "expo-sharing": "^14.0.7",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "pdf-lib": "^1.17.1",
     "react-native-collapsible": "^1.6.1",
+    "react-native-file-viewer": "^2.1.5",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.2",
     "react-native-pager-view": "^6.8.0",
     "react-native-safe-area-context": "^5.2.0",
     "react-native-svg": "^15.11.2",
-    "react-native-uuid": "^2.0.3"
+    "react-native-uuid": "^2.0.3",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",