@widergy/mobile-ui 1.50.1 → 2.0.0

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,8 +1,8 @@
-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';
 import UTStepper from '../UTStepper';
 import UTProgressBar from '../UTProgressBar';
@@ -12,6 +12,8 @@ import UTLabel from '../UTLabel';
 import ownStyles, { BAR_HEIGHT } from './styles';
 import { TopbarPropTypes } from './types';
 
+const { goBack: goBackTestId, title: titleTestId } = TEST_IDS.topbar;
+
 const UTTopbar = ({
   currentStage,
   currentStep,
@@ -22,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();
@@ -35,24 +37,25 @@ const UTTopbar = ({
       return () => subscription.remove();
     }, [goBack])
   );
-  // up to here
 
   return (
     <View>
       <View style={[ownStyles.container, ownTheme?.container]}>
         <UTButton
+          dataTestId={goBackTestId}
           Icon={Icon || 'IconArrowLeft'}
-          variant="text"
+          onPress={goBack}
           style={{
             root: ownStyles.goBack
           }}
-          onPress={goBack}
+          variant="text"
         />
         <UTLabel
           colorTheme={ownTheme?.text || 'dark'}
+          dataTestId={titleTestId}
+          style={ownStyles.child}
           variant="subtitle1"
           weight="medium"
-          style={ownStyles.child}
         >
           {title}
         </UTLabel>

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
     }
   }
 });

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js

@@ -8,7 +8,7 @@ import { useTheme } from '../../../../../../../../theming';
 
 import ownStyles from './styles';
 
-const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, variant, icon }) => {
+const ActionButton = ({ colorTheme, dataTestId, disabled, hidden, label, onPress, style, variant, icon }) => {
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
 
@@ -16,12 +16,13 @@ const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, var
     <View style={themedStyles.actionButton}>
       <UTButton
         colorTheme={colorTheme}
+        dataTestId={dataTestId}
         disabled={disabled || hidden}
+        Icon={icon}
         onPress={onPress}
         size="large"
         style={{ root: themedStyles.buttonContainer, childrenContainer: themedStyles.buttonContent }}
         variant={variant}
-        Icon={icon}
       >
         {label}
       </UTButton>
@@ -31,6 +32,7 @@ const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, var
 
 ActionButton.propTypes = {
   colorTheme: string,
+  dataTestId: string,
   disabled: bool,
   hidden: bool,
   icon: string,

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import merge from 'lodash/merge';
 import { number } from 'prop-types';
 
+import { TEST_IDS } from '../../../../../../constants/testIds';
 import UTLabel from '../../../../../UTLabel';
 import Surface from '../../../../../Surface';
 import UTIcon from '../../../../../UTIcon';
@@ -16,6 +17,8 @@ import ActionButtonPropTypes from './components/ActionButton/types';
 import ownStyles from './styles';
 import { NEXT, RETURN } from './constants';
 
+const { workflowContainer } = TEST_IDS;
+
 const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summary, style }) => {
   const messageIcon = message?.Icon;
   const MESSAGE_ICON_SIZE = 16;
@@ -28,7 +31,10 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
   return (
     <Surface position="top" style={[themedStyles.bottomNav, themedStyles.bottomSafeArea(bottomSafeArea)]}>
       {summary && (
-        <View style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}>
+        <View
+          testID={workflowContainer.bottomActions.summary}
+          style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}
+        >
           {checkboxProps ? (
             <Checkbox {...checkboxProps} />
           ) : (
@@ -75,7 +81,12 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
             themedStyles[`message${message.variant?.charAt(0).toUpperCase()}${message.variant?.slice(1)}`]
           ]}
         >
-          <UTLabel colorTheme="negative" weight="medium" style={themedStyles.messageChild}>
+          <UTLabel
+            colorTheme="negative"
+            dataTestId={workflowContainer.bottomActions.message}
+            style={themedStyles.messageChild}
+            weight="medium"
+          >
             {message.title}
           </UTLabel>
           {messageIcon && <UTIcon colorTheme="negative" name={messageIcon} size={MESSAGE_ICON_SIZE} />}
@@ -84,6 +95,7 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
       <View style={themedStyles.actionsContainer}>
         {returnButtonEnabled && (
           <ActionButton
+            dataTestId={workflowContainer.bottomActions.returnButton}
             label={returnButton.label || RETURN}
             variant="text"
             style={{
@@ -98,6 +110,7 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
         )}
         {nextButtonEnabled && (
           <ActionButton
+            dataTestId={workflowContainer.bottomActions.nextButton}
             label={nextButton.label || NEXT}
             style={{
               actionButton: themedStyles.nextActionButton,

package/lib/components/UTWorkflowContainer/versions/V1/index.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { ScrollView, View, KeyboardAvoidingView, Keyboard } from 'react-native';
 import { number, func, shape, bool, string, element, oneOfType, any, objectOf } from 'prop-types';
 import { merge } from 'lodash';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../../../theming';
 import UTHeader from '../../../UTHeader';
@@ -17,6 +16,15 @@ import BottomActions from './components/BottomActions';
 import ActionButtonPropTypes from './components/BottomActions/components/ActionButton/types';
 import { MessagePropTypes, SummaryPropTypes } from './types';
 
+let useSafeAreaInsets;
+try {
+  // eslint-disable-next-line no-eval, global-require
+  const safeArea = require('react-native-safe-area-context');
+  useSafeAreaInsets = safeArea?.useSafeAreaInsets;
+} catch (e) {
+  useSafeAreaInsets = undefined;
+}
+
 const UTWorkflowContainer = ({
   banner,
   children,
@@ -39,9 +47,10 @@ const UTWorkflowContainer = ({
   title,
   topbar,
   useMarkdown,
-  wizardConfig
+  wizardConfig,
+  topSafeAreaDisabled = false
 }) => {
-  const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets();
+  const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets?.() || {};
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => () => onExit?.(), []);
 
@@ -65,7 +74,12 @@ const UTWorkflowContainer = ({
 
   return (
     <KeyboardAvoidingView behavior={IS_IOS ? 'padding' : ''} style={themedStyles.layoutContainer}>
-      <View style={[themedStyles.container, topbar && themedStyles.topSafeArea(topSafeArea)]}>
+      <View
+        style={[
+          themedStyles.container,
+          topbar && !topSafeAreaDisabled && themedStyles.topSafeArea(topSafeArea)
+        ]}
+      >
         {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
         <ScrollView
           contentContainerStyle={themedStyles.content}
@@ -129,6 +143,7 @@ UTWorkflowContainer.propTypes = {
   tagline: string,
   title: oneOfType([string, element]),
   topbar: TopbarPropTypes,
+  topSafeAreaDisabled: bool,
   useMarkdown: bool,
   wizardConfig: shape({
     variant: string,

package/lib/constants/testIds.js

@@ -1,9 +1,3 @@
-export const TEST_IDS = {
-  modal: 'modal',
-  roundView: 'roundView',
-  skeletonLoader: 'skeletonLoader'
-};
-
 export const TEST_ID_CONSTANTS = {
   acceptButton: 'acceptButton',
   additionalInfo: 'additionalInfo',
@@ -11,6 +5,7 @@ export const TEST_ID_CONSTANTS = {
   areaCode: 'areaCode',
   attribution: 'attribution',
   badge: 'badge',
+  bottomActions: 'bottomActions',
   cancelButton: 'cancelButton',
   characterCount: 'characterCount',
   checkIcon: 'checkIcon',
@@ -31,15 +26,43 @@ export const TEST_ID_CONSTANTS = {
   primaryAction: 'primaryAction',
   required: 'required',
   right: 'right',
+  requiredFieldInfo: 'requiredFieldInfo',
   searchInput: 'searchInput',
   secondaryAction: 'secondaryAction',
   selectAll: 'selectAll',
   subLabel: 'subLabel',
   subtitle: 'subtitle',
+  tagline: 'tagline',
   tertiaryAction: 'tertiaryAction',
   text: 'text',
   title: 'title',
   titleText: 'titleText',
   tooltip: 'tooltip',
-  validation: 'validation'
+  validation: 'validation',
+  workflowContainer: 'workflowContainer'
+};
+
+export const TEST_IDS = {
+  modal: 'modal',
+  roundView: 'roundView',
+  skeletonLoader: 'skeletonLoader',
+  topbar: {
+    goBack: 'topbar.goBack',
+    title: 'topbar.title'
+  },
+  workflowContainer: {
+    bottomActions: {
+      message: `${TEST_ID_CONSTANTS.workflowContainer}.${TEST_ID_CONSTANTS.bottomActions}.message`,
+      nextButton: `${TEST_ID_CONSTANTS.workflowContainer}.${TEST_ID_CONSTANTS.bottomActions}.nextButton`,
+      returnButton: `${TEST_ID_CONSTANTS.workflowContainer}.${TEST_ID_CONSTANTS.bottomActions}.returnButton`,
+      summary: `${TEST_ID_CONSTANTS.workflowContainer}.${TEST_ID_CONSTANTS.bottomActions}.summary`
+    },
+    header: {
+      tagline: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.tagline}`,
+      title: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.title}`,
+      subtitle: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.subtitle}`,
+      requiredFieldInfo: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.requiredFieldInfo}`,
+      helpText: `${TEST_ID_CONSTANTS.workflowContainer}.header.${TEST_ID_CONSTANTS.helpText}`
+    }
+  }
 };

package/lib/reactotronConfig.js

@@ -1,7 +1,40 @@
-import Reactotron from 'reactotron-react-native';
+/* eslint-disable import/no-extraneous-dependencies */
+/*
+  Reactotron opcional: no importamos el paquete directamente para evitar fallos
+  cuando no está instalado en el consumidor. Si el consumidor quiere usarlo,
+  puede exponer una instancia en un global llamado REACTOTRON antes de cargar la lib.
+*/
 
-const configureReactotron = () => {
-  Reactotron.configure().useReactNative().connect();
+const configureReactotron = host => {
+  let g;
+  if (typeof global !== 'undefined') g = global;
+  else if (typeof window !== 'undefined') g = window;
+  const Reactotron = g && g.REACTOTRON ? g.REACTOTRON : null;
+
+  if (!Reactotron) {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log('[Reactotron] no disponible; se omite configuración');
+    }
+    return;
+  }
+  const config = host ? { host } : undefined;
+  Reactotron.configure(config).useReactNative().connect();
+  if (typeof __DEV__ !== 'undefined' && __DEV__) {
+    // Limpia la timeline y deja un rastro en consola/Reactotron
+    try {
+      Reactotron.clear?.();
+    } catch (err) {
+      // noop
+    }
+    // eslint-disable-next-line no-console
+    console.log(`[Reactotron] connect -> host=${host ?? 'default'}`);
+    try {
+      Reactotron.log?.(`Reactotron connected -> host=${host ?? 'default'}`);
+    } catch (err) {
+      // noop
+    }
+  }
 };
 
 export default configureReactotron;

package/lib/utils/fileUtils.js/index.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-unresolved
-import ImageResizer from '@bam.tech/react-native-image-resizer';
+import * as ExpoImageManipulator from 'expo-image-manipulator';
 
 import { IS_IOS } from '../platformUtils/constants';
 
@@ -36,14 +35,20 @@ export const retrieveFile = async (uri, type) => {
   let blob;
 
   if (type ? type.includes('image') : isImageByUri(uri)) {
-    const resizedImage = await ImageResizer.createResizedImage(
-      uriToUse,
-      IMG_SIZE,
-      IMG_SIZE,
-      'JPEG',
-      IMG_QUALITY
-    );
-    blob = await uriToBlob(resizedImage.uri);
+    if (ExpoImageManipulator?.manipulateAsync) {
+      try {
+        const actions = [{ resize: { width: IMG_SIZE, height: IMG_SIZE } }];
+        const options = {
+          compress: IMG_QUALITY / 100,
+          format: ExpoImageManipulator?.SaveFormat?.JPEG ?? 'jpeg',
+          base64: false
+        };
+        const result = await ExpoImageManipulator.manipulateAsync(uri, actions, options);
+        blob = await uriToBlob(result.uri);
+      } catch (err) {
+        blob = await uriToBlob(uriToUse);
+      }
+    }
   } else {
     blob = await uriToBlob(uriToUse);
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.50.1",
+  "version": "2.0.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -23,11 +23,9 @@
     "prepare": "husky install"
   },
   "peerDependencies": {
-    "@bam.tech/react-native-image-resizer": "^3.0.7",
     "prop-types": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-document-picker": "^9.0.1",
     "react-native-image-picker": "^5.0.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.2.0",
@@ -35,22 +33,26 @@
     "react-native-vector-icons": "^10.0.0"
   },
   "dependencies": {
-    "@react-native-masked-view/masked-view": "^0.3.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
     "@react-navigation/native": "^6.1.9",
-    "@tabler/icons-react-native": "^3.3.0",
+    "@tabler/icons-react-native": "^3.34.1",
     "@widergy/web-utils": "^2.0.0",
     "core-js": "3",
-    "deprecated-react-native-prop-types": "^4.2.1",
+    "deprecated-react-native-prop-types": "^5.0.0",
+    "expo-document-picker": "^13.1.6",
+    "expo-image-manipulator": "^13.1.7",
+    "expo-image-picker": "^16.1.4",
+    "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-linear-gradient": "^2.8.3",
     "react-native-markdown-display": "^7.0.0-alpha.2",
-    "react-native-modal": "^13.0.1",
-    "react-native-pager-view": "^6.2.0",
-    "react-native-safe-area-context": "^4.5.0",
-    "react-native-svg": "^13.0.0",
+    "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"
   },
   "devDependencies": {