@widergy/mobile-ui 1.51.0 → 2.0.0

package/lib/components/MultipleFilePicker/utils.js

@@ -1,7 +1,5 @@
 import { isEmpty } from 'lodash';
 import { PDFDocument } from 'pdf-lib';
-// eslint-disable-next-line import/no-unresolved
-import DocumentPicker from 'react-native-document-picker';
 
 const mimeTypes = {
   allFiles: '*/*',
@@ -57,11 +55,11 @@ const pageMatches = (pageSize, allowedPDFUploadSizes) =>
 const blobToBase64 = blob =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.onload = function () {
+    reader.onload = function onload() {
       const result = reader.result.replace(/^data:.+;base64,/, '');
       resolve(result);
     };
-    reader.onerror = function () {
+    reader.onerror = function onerror() {
       reject(new Error('No es posible leer el archivo.'));
     };
     reader.readAsDataURL(blob);
@@ -78,19 +76,52 @@ const pdfAspectRatioValidation = async (file, allowedPDFUploadSizes) => {
   });
 };
 
-export const getFileType = extension =>
-  Object.entries(extensions).find(([, value]) => value.includes(extension))[0];
-
-export const getMimeType = extension => {
-  const fileType = getFileType(extension);
-  const mimeType = mimeTypes[fileType];
-  return mimeType.replace('*', extension.replace(/\./g, ''));
+export const getFileType = extensionOrCategory => {
+  const input = extensionOrCategory;
+  if (!input) return undefined;
+  if (extensions[input]) return input;
+  if (input === 'image') return 'images';
+  if (input === 'video') return 'video';
+  if (input === 'audio') return 'audio';
+  if (typeof input === 'string' && input.startsWith('.')) {
+    const entry = Object.entries(extensions).find(([, value]) => value.includes(input));
+    return entry ? entry[0] : undefined;
+  }
+  return undefined;
 };
 
-export const getDocumentPickerType = extension => DocumentPicker.types[getFileType(extension)];
+export const getMimeType = value => {
+  const input = value;
+  if (!input) return mimeTypes.allFiles;
+  if (typeof input === 'string' && input.includes('/')) return input;
+  const key = getFileType(input);
+  if (key && mimeTypes[key]) return mimeTypes[key];
+  if (input === 'image') return 'image/*';
+  if (input === 'video') return 'video/*';
+  if (input === 'audio') return 'audio/*';
+  return mimeTypes.allFiles;
+};
 
 export const isFileTypeInvalid = (document, allowedTypes, fileTypeError, onError) => {
-  const isInvalid = !allowedTypes.map(getMimeType).includes(document.type);
+  const normalizedAllowed = (
+    Array.isArray(allowedTypes) && allowedTypes.length > 0 ? allowedTypes : ['allFiles']
+  )
+    .map(getMimeType)
+    .filter(Boolean);
+
+  const docTypeRaw = document?.type || '';
+  const docType = docTypeRaw.includes('/') ? docTypeRaw : `${docTypeRaw}/*`;
+
+  const matches = (allowed, actual) => {
+    if (allowed === mimeTypes.allFiles) return true;
+    if (allowed.endsWith('/*')) {
+      const prefix = `${allowed.split('/')[0]}/`;
+      return actual.startsWith(prefix) || actual === allowed;
+    }
+    return allowed === actual;
+  };
+
+  const isInvalid = !normalizedAllowed.some(a => matches(a, docType));
   if (isInvalid) onError(fileTypeError || 'Tipo de archivo inválido.');
   return isInvalid;
 };

package/lib/components/Overlay/index.js

@@ -19,7 +19,8 @@ class Overlay extends Component {
 
     this.state = {
       opacity: new Value(0),
-      backgroundOpacity: new Value(props.transparentBackground ? 0 : 1)
+      backgroundOpacity: new Value(props.transparentBackground ? 0 : 1),
+      backSubscription: null
     };
   }
 
@@ -58,7 +59,10 @@ class Overlay extends Component {
   }
 
   setBack() {
-    BackHandler.addEventListener('hardwareBackPress', this.dismiss);
+    this.setState(prevState => ({
+      ...prevState,
+      backSubscription: BackHandler.addEventListener('hardwareBackPress', this.dismiss)
+    }));
   }
 
   dismiss = () => {
@@ -94,7 +98,8 @@ class Overlay extends Component {
   };
 
   removeBack() {
-    BackHandler.removeEventListener('hardwareBackPress', this.dismiss);
+    const { backSubscription } = this.state;
+    backSubscription?.remove?.();
   }
 
   render() {

package/lib/components/PhotoAlbum/index.js

@@ -3,6 +3,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { View, TouchableOpacity, PermissionsAndroid } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { launchCamera } from 'react-native-image-picker';
+import * as ExpoImagePicker from 'expo-image-picker';
 
 import UTLabel from '../UTLabel';
 import Portal from '../Portal';
@@ -59,20 +60,43 @@ const PhotoAlbum = ({
   };
 
   const openCamera = async () => {
+    if (!ExpoImagePicker || typeof ExpoImagePicker.launchCameraAsync !== 'function') {
+      // eslint-disable-next-line no-console
+      console.error('No se encontró un ExpoImagePicker válido. instala "expo-image-picker".');
+      return;
+    }
     // eslint-disable-next-line no-useless-catch
     try {
-      if (IS_ANDROID) await requestPermission();
+      if (ExpoImagePicker?.launchCameraAsync) {
+        const perm = await ExpoImagePicker.requestCameraPermissionsAsync?.();
+        if (!perm || perm.status !== 'granted') {
+          throw messageErrorPermissionCamera;
+        }
+        const mediaTypes = ExpoImagePicker.MediaType ? [ExpoImagePicker.MediaType.image] : undefined;
+        const result = await ExpoImagePicker.launchCameraAsync({
+          mediaTypes,
+          allowsMultipleSelection: false,
+          quality: 1
+        });
+        if (result?.canceled) return;
+        const asset = Array.isArray(result?.assets) && result.assets[0];
+        if (asset?.uri) {
+          onPressAddAnotherPhoto({ newImage: { uri: asset.uri }, numberOfPhotosInTheAlbumHasExceeded });
+        }
+        return;
+      }
 
+      if (IS_ANDROID) await requestPermission();
       const response = await launchCamera({});
       const { didCancel, errorCode, errorMessage, assets } = response;
       if (didCancel || errorCode) {
         if (errorCode) {
           onUnknownCameraError(`[${errorCode}] : ${errorMessage}`);
         }
-      } else {
-        const { uri } = assets[0];
-        onPressAddAnotherPhoto({ newImage: { uri }, numberOfPhotosInTheAlbumHasExceeded });
+        return;
       }
+      const { uri } = assets[0];
+      onPressAddAnotherPhoto({ newImage: { uri }, numberOfPhotosInTheAlbumHasExceeded });
     } catch (error) {
       throw error;
     }

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/index.js

@@ -10,14 +10,15 @@ import SubStage from './components/Stage/components/SubStage';
 import styles from './styles';
 
 const Bars = ({ rateStages, withoutStages }) => {
-  const totalSubStages = rateStages.reduce(
+  const rateStagesToUse = [...(rateStages || [])];
+  const totalSubStages = rateStagesToUse.reduce(
     (previous, current) => previous + current.sub_rate_stages.length,
     0
   );
 
-  const totalRange = getTotalRange(rateStages);
+  const totalRange = getTotalRange(rateStagesToUse);
   // eslint-disable-next-line camelcase
-  const subStages = rateStages.flatMap(rate => rate?.sub_rate_stages);
+  const subStages = rateStagesToUse.flatMap(rate => rate?.sub_rate_stages);
 
   return (
     <View style={styles.container}>
@@ -35,7 +36,7 @@ const Bars = ({ rateStages, withoutStages }) => {
               isLast={index === subStages.length - 1}
             />
           ))
-        : rateStages.map((stage, index) => (
+        : rateStagesToUse.map((stage, index) => (
             <Stage
               key={stage.group}
               stage={stage}

package/lib/components/UTCheckBox/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { View, Pressable } from 'react-native';
 
 import { useTheme } from '../../theming';
@@ -33,7 +33,6 @@ const UTCheckBox = ({
   dataTestId
 }) => {
   const theme = useTheme();
-  const [pressed, setPressed] = useState(false);
 
   const { containerStyles, iconContainerStyles, boxStyles, pressableStyles, titleStyles } = useMemo(
     () =>
@@ -42,14 +41,13 @@ const UTCheckBox = ({
         disabled,
         error,
         indeterminate,
-        pressed,
         reversed,
         spacing,
         style,
         theme,
         variant
       }),
-    [value, disabled, error, indeterminate, reversed, spacing, style, theme, variant, pressed]
+    [value, disabled, error, indeterminate, reversed, spacing, style, theme, variant]
   );
 
   const iconName = useMemo(
@@ -57,9 +55,6 @@ const UTCheckBox = ({
     [indeterminate, value]
   );
 
-  const handlePressIn = useCallback(() => setPressed(true), []);
-  const handlePressOut = useCallback(() => setPressed(false), []);
-
   const handlePress = useCallback(() => {
     if (!disabled && onChange) {
       onChange(!value);
@@ -71,14 +66,7 @@ const UTCheckBox = ({
   const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
 
   return (
-    <Pressable
-      style={pressableStyles}
-      disabled={disabled}
-      onPress={handlePress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      testID={dataTestId}
-    >
+    <Pressable style={pressableStyles} disabled={disabled} onPress={handlePress} testID={dataTestId}>
       <View style={styles.container}>
         <View style={containerStyles}>
           {isSimple ? (

package/lib/components/UTCheckBox/theme.js

@@ -33,7 +33,6 @@ const conditionalStyles = ({
   reversed,
   spacing,
   variant,
-  pressed,
   theme
 }) => {
   const spacingValue = spacing === SPACING.SMALL ? SMALL_SPACING : MEDIUM_SPACING;
@@ -63,24 +62,13 @@ const conditionalStyles = ({
             marginLeft: spacingValue,
             marginRight: 0
           }
-        : { marginRight: spacingValue }),
-      ...(pressed &&
-        variant !== BUTTON_VARIANT && {
-          backgroundColor: theme.Palette.accent['02'],
-          borderColor: theme.Palette.accent['03'],
-          borderWidth: 1,
-          overflow: 'hidden',
-          padding: 5
-        })
+        : { marginRight: spacingValue })
     },
     pressable: {
       ...(variant === BUTTON_VARIANT && {
         borderRadius: 8,
         paddingHorizontal: 16,
         paddingVertical: 12,
-        ...(pressed && {
-          backgroundColor: theme.Palette.light['04']
-        }),
         ...(error && {
           backgroundColor: theme.Palette.error['02']
         })
@@ -99,8 +87,7 @@ export const retrieveStyle = ({
   spacing,
   style,
   theme,
-  variant,
-  pressed
+  variant
 }) => {
   const baseThemeStyles = baseCheckBoxTheme(theme);
 
@@ -112,7 +99,6 @@ export const retrieveStyle = ({
     reversed,
     spacing,
     variant,
-    pressed,
     theme
   });
 
@@ -124,7 +110,7 @@ export const retrieveStyle = ({
     containerStyles: {
       ...baseThemeStyles.container,
       ...container,
-      ...style.root
+      ...style?.root
     },
     iconContainerStyles: {
       ...baseThemeStyles.iconContainer,
@@ -132,7 +118,7 @@ export const retrieveStyle = ({
     },
     titleStyles: {
       ...baseThemeStyles.title,
-      ...style.title
+      ...style?.title
     },
     pressableStyles: pressable
   };

package/lib/components/UTCheckList/index.js

@@ -51,7 +51,7 @@ const UTCheckList = ({
     }
   }, [value, onChange]);
 
-  const enabledOptions = useMemo(() => options.filter(option => !option.disabled), [options]);
+  const enabledOptions = useMemo(() => [...options].filter(option => !option.disabled), [options]);
 
   const areAllSelected = useMemo(
     () => enabledOptions.every(option => value?.includes(option.value)),
@@ -83,9 +83,13 @@ const UTCheckList = ({
 
   return (
     <View
-      style={[styles.container, verticalSpacing === SPACING.SMALL && styles.smallVerticalSpacing, style.root]}
+      style={[
+        styles.container,
+        verticalSpacing === SPACING.SMALL && styles.smallVerticalSpacing,
+        style?.root
+      ]}
     >
-      <View style={[styles.headerContainer, style.header]}>
+      <View style={[styles.headerContainer, style?.header]}>
         {title && (
           <UTFieldLabel
             required={required}
@@ -106,7 +110,7 @@ const UTCheckList = ({
           styles.checkboxesContainer,
           verticalSpacingBasedOnVariant === SPACING.SMALL && styles.smallVerticalSpacing,
           variant === BUTTON_VARIANT && styles.buttonVariant,
-          style.checkboxesContainer
+          style?.checkboxesContainer
         ]}
       >
         {showSelectAll && !isSimple && (
@@ -117,12 +121,12 @@ const UTCheckList = ({
             onChange={handleCheckAll}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
-            style={style.selectAll}
+            style={style?.selectAll}
             variant={variant}
             dataTestId={dataTestId ? `${dataTestId}.${selectAllTestId}` : undefined}
           />
         )}
-        {options?.map((item, index) => (
+        {[...options]?.map((item, index) => (
           <UTCheckBox
             isSimple={isSimple}
             value={isChecked(item, value)}
@@ -132,7 +136,7 @@ const UTCheckList = ({
             onChange={() => handleChange(item.value)}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
-            style={style.item}
+            style={style?.item}
             variant={variant}
             dataTestId={dataTestId ? `${dataTestId}.${optionTestId}.${index}` : undefined}
           />

package/lib/components/UTDetailDrawer/index.js

@@ -76,16 +76,16 @@ const UTDetailDrawer = ({
                   dataTestId={dataTestId ? `${dataTestId}.${close}` : undefined}
                   onPress={onClose}
                   Icon="IconX"
-                  variant={CloseButtonProps.variant || 'text'}
-                  colorTheme={CloseButtonProps.colorTheme || null}
+                  variant={CloseButtonProps?.variant || 'text'}
+                  colorTheme={CloseButtonProps?.colorTheme || null}
                   style={{
                     root: {
                       ...mergedStyles.closeButton,
-                      ...(CloseButtonProps.root ? CloseButtonProps.root : null)
+                      ...(CloseButtonProps?.root ? CloseButtonProps.root : null)
                     },
                     icon: {
                       ...mergedStyles.icon,
-                      ...(CloseButtonProps.icon ? CloseButtonProps.icon : null)
+                      ...(CloseButtonProps?.icon ? CloseButtonProps.icon : null)
                     }
                   }}
                 />

package/lib/components/UTIcon/index.js

@@ -24,7 +24,6 @@ const UTIcon = ({
   variant = 'default'
 }) => {
   const theme = useTheme();
-
   const IconComponent = ENERGY_ICONS[name] || TablerIcons[name];
   if (!IconComponent) return null;
 

package/lib/components/UTIcon/utils.js

@@ -29,9 +29,9 @@ export const getIconProps = ({
   };
 
   return {
-    style: [filled && { color: themeColor }, iconStyles],
-    ...(internalFill && { fill: internalFill }),
-    ...(isEnergyIcon || isBrandIcon ? customIconProps : defaultIconProps)
+    ...(isEnergyIcon || isBrandIcon ? customIconProps : defaultIconProps),
+    ...(filled ? { color: themeColor, ...iconStyles } : {}),
+    ...(internalFill && { fill: internalFill })
   };
 };
 

package/lib/components/UTModal/index.js

@@ -69,6 +69,8 @@ const UTModal = ({
     Keyboard.dismiss();
   };
 
+  if (!visible) return null;
+
   return (
     <Modal
       animationType="fade"

package/lib/components/UTRating/index.js

@@ -32,8 +32,9 @@ const UTRating = ({
     () => validations || (error && formatErrorToValidation(error)),
     [error, validations]
   );
+  const optionsToUse = [...options];
 
-  const valueIndex = options.map(({ value: optionValue }) => optionValue).indexOf(value);
+  const valueIndex = optionsToUse.map(({ value: optionValue }) => optionValue).indexOf(value);
   const isSelected = index =>
     valueIndex !== -1 && variant === RATING_VARIANTS.STAR ? index <= valueIndex : index === valueIndex;
 
@@ -52,7 +53,7 @@ const UTRating = ({
         </UTFieldLabel>
       )}
       <View style={styles.optionsContainer} onLayout={onLayout}>
-        {options.map((option, index) => (
+        {optionsToUse.map((option, index) => (
           <Option
             {...option}
             disabled={disabled}
@@ -61,7 +62,7 @@ const UTRating = ({
             key={option.value}
             onChange={onChange}
             variant={variant}
-            wrapperStyle={styles.option(containerWidth, error, options, theme)}
+            wrapperStyle={styles.option(containerWidth, error, optionsToUse, theme)}
           />
         ))}
       </View>

package/lib/components/UTRating/styles.js

@@ -23,6 +23,7 @@ export default StyleSheet.create({
   option: (containerWidth, error, options, theme) => {
     const topItems = Math.ceil(options.length / 2);
     const breakOptions = options.length > 5;
+
     return {
       alignContent: 'center',
       display: 'flex',
@@ -30,7 +31,8 @@ export default StyleSheet.create({
       flexDirection: 'row',
       flexGrow: breakOptions ? 0 : 1,
       flexShrink: 0,
-      height: 48,
+      minHeight: 48,
+      minWidth: 48,
       justifyContent: 'center',
       ...(error ? { borderColor: theme.Palette.error['05'], borderWidth: 2 } : {})
     };

package/lib/components/UTTabs/index.js

@@ -170,13 +170,21 @@ const UTTabs = ({
                 disabled={selected}
                 key={`tab-${label || icon}`}
                 onPress={() => setSelectedTab(index)}
-                style={styles.tab(tabs.length)}
+                style={styles.tabContainer(tabs.length, index)}
               >
-                {icon && <UTIcon colorTheme={colorThemeToUse} name={icon} />}
-                <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium" {...fixedLabelProps}>
-                  {label}
-                </UTLabel>
-                {badge && <UTBadge colorTheme="accent" />}
+                <View style={styles.tabContent(selected)}>
+                  {icon && <UTIcon colorTheme={colorThemeToUse} name={icon} />}
+                  <UTLabel
+                    colorTheme={colorThemeToUse}
+                    shade="04"
+                    weight="medium"
+                    style={styles.tabLabel}
+                    {...fixedLabelProps}
+                  >
+                    {label}
+                  </UTLabel>
+                  {badge && <UTBadge colorTheme="accent" />}
+                </View>
               </Pressable>
             );
           })}

package/lib/components/UTTabs/styles.js

@@ -2,6 +2,16 @@ import { StyleSheet } from 'react-native';
 
 import { COLOR_THEMES, HIERARCHIES } from './constants';
 
+const getTabDistribution = length => {
+  const equalWidth = `${100 / length}%`;
+  return {
+    widths: Array(length).fill(equalWidth),
+    positions: Array(length)
+      .fill(0)
+      .map((_, i) => `${(100 / length) * i}%`)
+  };
+};
+
 export default StyleSheet.create(({ Palette: { accent, neutral, negative, light } }) => ({
   border: {
     position: 'absolute',
@@ -80,13 +90,24 @@ export default StyleSheet.create(({ Palette: { accent, neutral, negative, light
           }
         : {};
 
+    const distribution = getTabDistribution(length);
+    const inputRange =
+      length === 3
+        ? [0, 1, 2]
+        : Array(length)
+            .fill(0)
+            .map((_, i) => i);
+
     const positioningStyles = isScrollable
       ? {}
       : {
-          width: `${100 / length}%`,
+          width: position.interpolate({
+            inputRange,
+            outputRange: distribution.widths
+          }),
           left: position.interpolate({
-            inputRange: [0, length],
-            outputRange: ['0%', '100%']
+            inputRange,
+            outputRange: distribution.positions
           })
         };
 
@@ -98,22 +119,33 @@ export default StyleSheet.create(({ Palette: { accent, neutral, negative, light
       ...positioningStyles
     };
   },
-  // Original fixed-width tab style (for scrollableTabs=false)
-  tab:
-    tabs =>
-    ({ pressed }) => ({
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row',
-      flexBasis: tabs ? `${100 / tabs}%` : 'auto',
-      paddingHorizontal: 16,
-      gap: 8,
-      height: 48,
-      justifyContent: 'center',
-      zIndex: 3,
-      backgroundColor: pressed ? accent['01'] : null
-    }),
-  // Scrollable tab style (for scrollableTabs=true)
+  tabContainer: (tabs, index) => () => {
+    const distribution = getTabDistribution(tabs);
+    const width = distribution.widths[index] || 'auto';
+    return {
+      width,
+      zIndex: 3
+    };
+  },
+  tabContent: selected => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    gap: 8,
+    height: 48,
+    justifyContent: 'center',
+    backgroundColor: selected ? 'white' : 'transparent',
+    borderRadius: 4,
+    width: '100%',
+    minWidth: '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  }),
+  tabLabel: {
+    flex: 1,
+    textAlign: 'center'
+  },
   scrollableTab: ({ pressed }) => ({
     alignItems: 'center',
     display: 'flex',

package/lib/components/UTTopbar/index.js

@@ -1,7 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { BackHandler, View } from 'react-native';
 import { number } from 'prop-types';
-import { useFocusEffect } from '@react-navigation/native';
 
 import { TEST_IDS } from '../../constants/testIds';
 import UTButton from '../UTButton';
@@ -25,8 +24,8 @@ const UTTopbar = ({
 }) => {
   const ownTheme = theme.UTWorkflowContainer?.topbar?.[colorTheme];
 
-  // If you are trying to render this in the example of mobile-ui, comment this useFocusEffect block or it will crash
-  useFocusEffect(
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(
     useCallback(() => {
       const onBackPress = () => {
         goBack();
@@ -38,7 +37,6 @@ const UTTopbar = ({
       return () => subscription.remove();
     }, [goBack])
   );
-  // up to here
 
   return (
     <View>

package/lib/components/UTTracker/components/Step/styles.js

@@ -10,13 +10,15 @@ export const getVariantStyles = theme => ({
       borderColor: theme.Palette.error['04']
     },
     activeInnerContainer: {
-      backgroundColor: theme.Palette.error['04']
+      backgroundColor: theme.Palette.error['04'],
+      borderRadius: OVAL_SIZE / 4
     },
     completedContainer: {
       borderColor: theme.Palette.error['04']
     },
     completedInnerContainer: {
-      backgroundColor: theme.Palette.error['04']
+      backgroundColor: theme.Palette.error['04'],
+      borderRadius: OVAL_SIZE / 4
     }
   },
   [STANDARD]: {
@@ -24,13 +26,15 @@ export const getVariantStyles = theme => ({
       borderColor: theme.Palette.accent['04']
     },
     activeInnerContainer: {
-      backgroundColor: theme.Palette.accent['04']
+      backgroundColor: theme.Palette.accent['04'],
+      borderRadius: OVAL_SIZE / 4
     },
     completedContainer: {
       borderColor: theme.Palette.accent['04']
     },
     completedInnerContainer: {
-      backgroundColor: theme.Palette.accent['04']
+      backgroundColor: theme.Palette.accent['04'],
+      borderRadius: OVAL_SIZE / 4
     }
   }
 });