@widergy/mobile-ui 1.46.1 → 1.48.0

package/lib/components/UTSelectableCard/index.js

@@ -10,17 +10,31 @@ import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import { mergeMultipleStyles } from '../../utils/styleUtils';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { getColorTheme, ownStyles, ICON_SIZE, getAppearanceStyles, ownSizeStyles } from './styles';
 
+const {
+  icon,
+  titleText: titleTextTestId,
+  tooltip: tooltipTestId,
+  content,
+  description: descriptionTestId,
+  additionalInfo: additionalInfoTestId,
+  title: titleTestId,
+  checkIcon: checkIconTestId
+} = TEST_ID_CONSTANTS;
+
 const UTSelectableCard = ({
   additionalInfo = {},
   appearance = 'white',
   checkIcon = true,
   children,
+  dataTestId,
   description,
   disabled = false,
   Icon,
+  iconDataTestId,
   numberOfLines,
   onPress,
   selected = false,
@@ -43,6 +57,7 @@ const UTSelectableCard = ({
   return (
     <Surface style={themedStyles.outerContainer}>
       <Touchable
+        dataTestId={dataTestId}
         disabled={disabled}
         onPress={() => onPress?.()}
         style={[
@@ -56,6 +71,7 @@ const UTSelectableCard = ({
           {hasIcon &&
             (Icon.url ? (
               <Image
+                testID={dataTestId ? `${dataTestId}.${icon}` : undefined}
                 source={{ uri: Icon.url }}
                 width={Icon.size || ICON_SIZE}
                 height={Icon.size || ICON_SIZE}
@@ -63,6 +79,7 @@ const UTSelectableCard = ({
               />
             ) : Icon.name ? (
               <UTIcon
+                dataTestId={dataTestId ? `${dataTestId}.${icon}` : undefined}
                 name={Icon.name}
                 colorTheme={colorTheme}
                 shade={Icon.shade}
@@ -70,12 +87,16 @@ const UTSelectableCard = ({
                 style={themedStyles.icon}
               />
             ) : (
-              <Icon.Component style={themedStyles.icon} />
+              <Icon.Component
+                testID={iconDataTestId || (dataTestId ? `${dataTestId}.${icon}` : undefined)}
+                style={themedStyles.icon}
+              />
             ))}
           <View style={themedStyles.textContainer}>
             <View style={[themedStyles.column, themedStyles.leftColumn]}>
               <View style={[themedStyles.titleAndTooltip, selected && themedStyles.selectedTitleAndTooltip]}>
                 <UTLabel
+                  dataTestId={dataTestId ? `${dataTestId}.${titleTextTestId}` : undefined}
                   colorTheme={colorTheme}
                   numberOfLines={numberOfLines}
                   style={tooltip && themedStyles.titleMargin}
@@ -85,13 +106,24 @@ const UTSelectableCard = ({
                   {titleText}
                 </UTLabel>
                 {tooltip && (
-                  <UTTooltip content={<UTLabel>{tooltip}</UTLabel>} position="top">
+                  <UTTooltip
+                    dataTestId={dataTestId ? `${dataTestId}.${tooltipTestId}` : undefined}
+                    content={
+                      <UTLabel
+                        dataTestId={dataTestId ? `${dataTestId}.${tooltipTestId}.${content}` : undefined}
+                      >
+                        {tooltip}
+                      </UTLabel>
+                    }
+                    position="top"
+                  >
                     <UTIcon colorTheme={colorTheme} name="IconHelp" />
                   </UTTooltip>
                 )}
               </View>
               {description && (
                 <UTLabel
+                  dataTestId={dataTestId ? `${dataTestId}.${descriptionTestId}` : undefined}
                   numberOfLines={numberOfLines}
                   colorTheme={selected ? 'accent' : 'gray'}
                   style={themedStyles.description}
@@ -103,12 +135,21 @@ const UTSelectableCard = ({
             {!isEmpty(additionalInfo) && (
               <View style={themedStyles.column}>
                 {!!additionalInfo.title && (
-                  <UTLabel colorTheme={colorTheme} style={themedStyles.additionalInfo}>
+                  <UTLabel
+                    dataTestId={
+                      dataTestId ? `${dataTestId}.${additionalInfoTestId}.${titleTestId}` : undefined
+                    }
+                    colorTheme={colorTheme}
+                    style={themedStyles.additionalInfo}
+                  >
                     {additionalInfo.title}
                   </UTLabel>
                 )}
                 {!!additionalInfo.description && (
                   <UTLabel
+                    dataTestId={
+                      dataTestId ? `${dataTestId}.${additionalInfoTestId}.${descriptionTestId}` : undefined
+                    }
                     colorTheme={colorTheme}
                     style={[themedStyles.description, themedStyles.additionalInfo]}
                   >
@@ -120,7 +161,12 @@ const UTSelectableCard = ({
           </View>
           {children}
           {checkIcon && selected && (
-            <UTIcon colorTheme="accent" name="IconCheck" style={themedStyles.checkIcon} />
+            <UTIcon
+              dataTestId={dataTestId ? `${dataTestId}.${checkIconTestId}` : undefined}
+              colorTheme="accent"
+              name="IconCheck"
+              style={themedStyles.checkIcon}
+            />
           )}
         </View>
       </Touchable>
@@ -132,9 +178,11 @@ UTSelectableCard.propTypes = {
   additionalInfo: shape({ description: string, title: string }),
   appearance: string,
   checkIcon: bool,
+  dataTestId: string,
   description: string,
   disabled: bool,
   Icon: shape({ name: string, shade: string, size: number }),
+  iconDataTestId: string,
   numberOfLines: number,
   onPress: func,
   selected: bool,

package/lib/components/UTTabs/README.md

@@ -1,18 +1,21 @@
 # UTTabs
 
-Tabs component.
+Tabs component with two display modes: 
+1. Fixed width (default): Tabs width are adjusted evenly to fill the container width
+2. Scrollable: Each tab has width based on its content and if all tabs don't fit in the container width, the component becomes horizontally scrollable
 
 ## Props
-Here's a new table for the additional props:
+Here's a table for the component props:
 
-| Name       | Type     | Default   | Description                                               |
-|------------|---------|------------|-----------------------------------------------------------|
-| colorTheme | string  | `accent`   | Defines the color theme for the component.                |
-| hierarchy  | string  | `primary`  | Determines the hierarchy or importance of the tabs.       |
-| onChange   | func    |            | Callback function triggered when the selected tab changes.|
-| style      | object  |            | Custom styles for component.                              |
-| tabs       | array   |            | Array of tab items to be displayed within the component.  |
-| withTabSliding | bool | `true`    | Defines if tabs can be changed with gesture.              |
+| Name          | Type     | Default   | Description                                                |
+|---------------|----------|-----------|------------------------------------------------------------|
+| colorTheme    | string   | `accent`  | Defines the color theme for the component.                 |
+| hierarchy     | string   | `primary` | Determines the hierarchy or importance of the tabs.        |
+| onChange      | func     |           | Callback function triggered when the selected tab changes. |
+| style         | object   |           | Custom styles for component.                               |
+| tabs          | array    |           | Array of tab items to be displayed within the component.   |
+| withTabSliding| bool     | `true`    | Defines if tabs can be changed with gesture.               |
+| scrollableTabs| bool     | `false`   | Enables scrollable mode with content-based tab widths.     |
 
 
 ### colorTheme
@@ -38,4 +41,17 @@ The value of `hierarchy` must be one of the following:
 - `icon`: name of `UTIcon` to render
 - `badge`: not affected by `colorTheme`
 
-Besides those, any other prop can be added to a tab to be accessed with the `onChange` callback
+Besides those, any other prop can be added to a tab to be accessed with the `onChange` callback
+
+## Behavior
+
+### Fixed Width Mode (scrollableTabs=false, default)
+- Each tab has equal width to fill the container space
+- If there are 2 tabs, each takes up 50% of the width
+- The indicator takes the same width as the tab
+
+### Scrollable Mode (scrollableTabs=true)
+- Each tab's width is determined by its content (label, icon, badge)
+- When the combined width of all tabs exceeds the container width, the component becomes horizontally scrollable
+- Selected tab is automatically scrolled into view when changed
+- The indicator follows the width of the selected tab

package/lib/components/UTTabs/index.js

@@ -1,4 +1,5 @@
-import { Animated, View, Pressable, PanResponder } from 'react-native';
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Animated, View, Pressable, PanResponder, ScrollView } from 'react-native';
 import { array, bool, func, object, string } from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 
@@ -18,24 +19,67 @@ const UTTabs = ({
   style,
   tabs,
   theme,
-  withTabSliding = true
+  withTabSliding = true,
+  scrollableTabs = false
 }) => {
   const styles = styleSheet(theme);
   const [selectedTab, setSelectedTab] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
   const position = useRef(new Animated.Value(0)).current;
+  const indicatorPos = useRef(new Animated.Value(0)).current;
+  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const scrollViewRef = useRef(null);
+  const tabRefs = useRef([]);
 
   useEffect(() => {
     onChange?.(tabs[selectedTab]);
   }, []);
 
+  useEffect(() => {
+    if (scrollableTabs) {
+      tabRefs.current = Array(tabs.length)
+        .fill()
+        .map((_, i) => tabRefs.current[i] || React.createRef());
+    }
+  }, [tabs, scrollableTabs]);
+
   useEffect(() => {
     Animated.timing(position, {
       toValue: selectedTab,
-      duration: 300
+      duration: 300,
+      useNativeDriver: false
     }).start();
+
+    if (scrollableTabs && scrollViewRef.current && tabRefs.current[selectedTab]) {
+      tabRefs.current[selectedTab].measureLayout(
+        scrollViewRef.current,
+        (x, y, width) => {
+          scrollViewRef.current?.scrollTo({ x: Math.max(0, x - 50), animated: true });
+
+          Animated.parallel([
+            Animated.timing(indicatorPos, {
+              toValue: x,
+              duration: 300,
+              useNativeDriver: false
+            }),
+            Animated.timing(indicatorWidth, {
+              toValue: width,
+              duration: 300,
+              useNativeDriver: false
+            })
+          ]).start();
+        },
+        () => {}
+      );
+    }
+
     onChange?.(tabs[selectedTab]);
   }, [selectedTab]);
 
+  const handleScroll = event => {
+    setScrollOffset(event.nativeEvent.contentOffset.x);
+  };
+
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dx),
@@ -48,27 +92,97 @@ const UTTabs = ({
     })
   ).current;
 
-  return (
-    <View style={[styles.container, style]} {...(withTabSliding ? panResponder.panHandlers : {})}>
-      {tabs.map(({ badge, label, icon }, index) => {
-        const selected = selectedTab === index;
-        const colorThemeToUse = selected ? colorTheme : 'gray';
-        return (
-          <Pressable
-            disabled={selected}
-            key={`tab-${label || icon}`}
-            onPress={() => setSelectedTab(index)}
-            style={styles.tab(tabs.length)}
-          >
-            <UTIcon colorTheme={colorThemeToUse} name={icon} />
-            <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium" {...labelProps}>
-              {label}
-            </UTLabel>
-            {badge && <UTBadge colorTheme="accent" />}
-          </Pressable>
+  if (scrollableTabs && tabRefs.current.length !== tabs.length) {
+    tabRefs.current = Array(tabs.length)
+      .fill()
+      .map((_, i) => tabRefs.current[i] || React.createRef());
+  }
+
+  const calculatedIndicatorLeft = Animated.subtract(indicatorPos, scrollOffset);
+
+  const indicatorStyle = scrollableTabs
+    ? [
+        styles.indicator(position, tabs.length, hierarchy, colorTheme, true),
+        { width: indicatorWidth, left: calculatedIndicatorLeft }
+      ]
+    : styles.indicator(position, tabs.length, hierarchy, colorTheme, false);
+
+  useEffect(() => {
+    if (scrollableTabs && tabRefs.current[selectedTab]) {
+      setTimeout(() => {
+        tabRefs.current[selectedTab]?.measureLayout(
+          scrollViewRef.current,
+          (x, y, width) => {
+            indicatorPos.setValue(x);
+            indicatorWidth.setValue(width);
+          },
+          () => {}
         );
-      })}
-      <Animated.View style={styles.indicator(position, tabs.length, hierarchy, colorTheme)} />
+      }, 100);
+    }
+  }, [scrollableTabs]);
+
+  const fixedLabelProps = scrollableTabs
+    ? labelProps
+    : { ...labelProps, numberOfLines: 1, ellipsizeMode: 'tail' };
+
+  return (
+    <View style={[styles.containerWrapper, style]} {...(withTabSliding ? panResponder.panHandlers : {})}>
+      <Animated.View style={indicatorStyle} />
+
+      {scrollableTabs ? (
+        <ScrollView
+          ref={scrollViewRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollViewContent}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+        >
+          {tabs.map(({ badge, label, icon }, index) => {
+            const selected = selectedTab === index;
+            const colorThemeToUse = selected ? colorTheme : 'gray';
+            return (
+              <Pressable
+                ref={ref => (tabRefs.current[index] = ref)}
+                disabled={selected}
+                key={`tab-${label || icon}`}
+                onPress={() => setSelectedTab(index)}
+                style={styles.scrollableTab}
+              >
+                {icon && <UTIcon colorTheme={colorThemeToUse} name={icon} />}
+                <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium" {...labelProps}>
+                  {label}
+                </UTLabel>
+                {badge && <UTBadge colorTheme="accent" />}
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      ) : (
+        <View style={styles.container}>
+          {tabs.map(({ badge, label, icon }, index) => {
+            const selected = selectedTab === index;
+            const colorThemeToUse = selected ? colorTheme : 'gray';
+            return (
+              <Pressable
+                disabled={selected}
+                key={`tab-${label || icon}`}
+                onPress={() => setSelectedTab(index)}
+                style={styles.tab(tabs.length)}
+              >
+                {icon && <UTIcon colorTheme={colorThemeToUse} name={icon} />}
+                <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium" {...fixedLabelProps}>
+                  {label}
+                </UTLabel>
+                {badge && <UTBadge colorTheme="accent" />}
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+
       <View style={styles.border} />
     </View>
   );
@@ -82,7 +196,8 @@ UTTabs.propTypes = {
   style: object,
   tabs: array,
   theme: object,
-  withTabSliding: bool
+  withTabSliding: bool,
+  scrollableTabs: bool
 };
 
 export default withTheme(UTTabs);

package/lib/components/UTTabs/styles.js

@@ -9,74 +9,120 @@ export default StyleSheet.create(({ Palette: { accent, neutral, negative, light
     width: '100%',
     height: 1,
     backgroundColor: light['04'],
-    zIndex: 1
+    zIndex: 0
   },
-  container: { display: 'flex', flexDirection: 'row', width: '100%' },
-  indicator: (position, length, hierarchy, colorTheme) =>
-    ({
-      [HIERARCHIES.PRIMARY]: {
-        position: 'absolute',
-        bottom: 0,
-        width: `${100 / length}%`,
-        height: '100%',
-        borderRightWidth: position.interpolate({
-          inputRange: [0, length - 1],
-          outputRange: [1, 0]
-        }),
-        borderTopRightRadius: position.interpolate({
-          inputRange: [0, length - 1],
-          outputRange: [4, 0]
-        }),
-        borderLeftWidth: position.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-          extrapolate: 'clamp'
-        }),
-        borderTopLeftRadius: position.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 4],
-          extrapolate: 'clamp'
-        }),
-        backgroundColor: light['01'],
-        borderTopWidth: 1,
-        borderTopColor: light['04'],
-        borderLeftColor: light['04'],
-        borderRightColor: light['04'],
-        borderBottomWidth: 1,
-        borderBottomColor: light['01'],
-        left: position.interpolate({
-          inputRange: [0, length],
-          outputRange: ['0%', '100%']
-        }),
-        zIndex: 2
-      },
-      [HIERARCHIES.SECONDARY]: {
-        position: 'absolute',
-        bottom: 0,
-        width: `${100 / length}%`,
-        height: 4,
-        backgroundColor: {
-          [COLOR_THEMES.ACCENT]: accent['04'],
-          [COLOR_THEMES.NEUTRAL]: neutral['04'],
-          [COLOR_THEMES.NEGATIVE]: negative['04']
-        }[colorTheme],
-        left: position.interpolate({
-          inputRange: [0, length],
-          outputRange: ['0%', '100%']
-        })
-      }
-    })[hierarchy],
+  containerWrapper: {
+    position: 'relative',
+    width: '100%'
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    zIndex: 3
+  },
+  scrollView: {
+    flexDirection: 'row',
+    width: '100%',
+    zIndex: 3
+  },
+  scrollViewContent: {
+    flexDirection: 'row',
+    flexGrow: 1
+  },
+  indicator: (position, length, hierarchy, colorTheme, isScrollable = false) => {
+    const baseStyle = {
+      position: 'absolute',
+      bottom: 0,
+      zIndex: 1
+    };
+
+    const heightStyle = hierarchy === HIERARCHIES.PRIMARY ? { height: '100%' } : { height: 4 };
+
+    const backgroundColorStyle = {
+      backgroundColor:
+        hierarchy === HIERARCHIES.PRIMARY
+          ? light['01']
+          : {
+              [COLOR_THEMES.ACCENT]: accent['04'],
+              [COLOR_THEMES.NEUTRAL]: neutral['04'],
+              [COLOR_THEMES.NEGATIVE]: negative['04']
+            }[colorTheme]
+    };
+
+    const primaryBorderStyles =
+      hierarchy === HIERARCHIES.PRIMARY
+        ? {
+            borderTopWidth: 1,
+            borderTopColor: light['04'],
+            borderLeftColor: light['04'],
+            borderRightColor: light['04'],
+            borderBottomWidth: 1,
+            borderBottomColor: light['01'],
+            borderRightWidth: position.interpolate({
+              inputRange: [0, length - 1],
+              outputRange: [1, 0]
+            }),
+            borderTopRightRadius: position.interpolate({
+              inputRange: [0, length - 1],
+              outputRange: [4, 0]
+            }),
+            borderLeftWidth: position.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 1],
+              extrapolate: 'clamp'
+            }),
+            borderTopLeftRadius: position.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 4],
+              extrapolate: 'clamp'
+            })
+          }
+        : {};
+
+    const positioningStyles = isScrollable
+      ? {}
+      : {
+          width: `${100 / length}%`,
+          left: position.interpolate({
+            inputRange: [0, length],
+            outputRange: ['0%', '100%']
+          })
+        };
+
+    return {
+      ...baseStyle,
+      ...heightStyle,
+      ...backgroundColorStyle,
+      ...primaryBorderStyles,
+      ...positioningStyles
+    };
+  },
+  // Original fixed-width tab style (for scrollableTabs=false)
   tab:
     tabs =>
     ({ pressed }) => ({
       alignItems: 'center',
       display: 'flex',
-      flexBasis: `${100 / tabs}%`,
       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)
+  scrollableTab: ({ pressed }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    gap: 8,
+    height: 48,
+    justifyContent: 'center',
+    zIndex: 3,
+    backgroundColor: pressed ? accent['01'] : null
+  })
 }));

package/lib/components/UTTextInput/versions/V0/components/BaseInput/index.js

@@ -23,6 +23,7 @@ const BaseInput = forwardRef(
   (
     {
       onBlur,
+      dataTestId,
       onFocus,
       onLayout,
       label,
@@ -80,6 +81,7 @@ const BaseInput = forwardRef(
     return (
       <Fragment>
         <TextInput
+          testID={dataTestId}
           autoCorrect={false}
           ref={textInputRef}
           onLayout={onLayout}
@@ -100,6 +102,7 @@ const BaseInput = forwardRef(
         {(RightIcon || hiddenInput) && (
           <Touchable
             borderless
+            dataTestId={dataTestId ? `${dataTestId}.icon` : undefined}
             onPress={hiddenInput ? toggleShowInput : onRightIconPress}
             style={[
               styles.iconContainer,
@@ -141,7 +144,8 @@ BaseInput.propTypes = {
   outlined: bool,
   InputRef: func,
   variantStyle: ViewPropTypes.style,
-  standard: bool
+  standard: bool,
+  dataTestId: string
 };
 
 export default withTheme(BaseInput);

package/lib/components/UTTextInput/versions/V0/components/InputLabel/index.js

@@ -10,6 +10,7 @@ const AnimatedView = Animated.View;
 const AnimatedText = Animated.Text;
 
 const InputLabel = ({
+  dataTestId,
   focused,
   error,
   value,
@@ -109,6 +110,7 @@ const InputLabel = ({
       ]}
     >
       <AnimatedText
+        testID={dataTestId}
         onLayout={handleLayout}
         ellipsizeMode={overflowControl?.ellipsizeMode}
         numberOfLines={overflowControl?.numberOfLines}
@@ -167,7 +169,8 @@ InputLabel.propTypes = {
     initX: number,
     initY: number
   }),
-  labelBackgroundColor: string
+  labelBackgroundColor: string,
+  dataTestId: string
 };
 
 export default withTheme(InputLabel);

package/lib/components/UTTextInput/versions/V0/flavors/FilledInput/index.js

@@ -97,6 +97,7 @@ const FilledInput = ({
             />
             {!!label && (
               <InputLabel
+                dataTestId={props.dataTestId ? `${props.dataTestId}.inputLabel` : undefined}
                 focused={focused}
                 error={error}
                 value={value}
@@ -127,8 +128,14 @@ const FilledInput = ({
         </View>
         {!!tooltip && (
           <View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>
-            <UTTooltip content={tooltip} position="left" {...tooltipProps}>
+            <UTTooltip
+              dataTestId={props.dataTestId ? `${props.dataTestId}.tooltip` : undefined}
+              content={tooltip}
+              position="left"
+              {...tooltipProps}
+            >
               <Icon
+                testID={props.dataTestId ? `${props.dataTestId}.tooltip.icon` : undefined}
                 name="questioncircleo"
                 type="antdesign"
                 color={themeStyles?.tooltip?.color}
@@ -140,6 +147,7 @@ const FilledInput = ({
         )}
       </View>
       <CaptionLabel
+        dataTestId={props.dataTestId ? `${props.dataTestId}.captionLabel` : undefined}
         error={error}
         color={theme.colors.primary}
         errorColor={theme.colors.error}