@widergy/mobile-ui 1.46.1 → 1.48.0

package/lib/components/UTModal/index.js

@@ -15,10 +15,20 @@ import UTLoading from '../UTLoading';
 import SeparatorBar from '../SeparatorBar';
 import UTButton from '../UTButton';
 import { IS_IOS } from '../../utils/platformUtils/constants';
+import { TEST_IDS, TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import ModalTypes from './proptypes';
 import ownStyles from './styles';
 
+const { modal } = TEST_IDS;
+const {
+  closeButton,
+  title: titleTestId,
+  subtitle: subtitleTestId,
+  cancelButton: cancelButtonTestId,
+  acceptButton: acceptButtonTestId
+} = TEST_ID_CONSTANTS;
+
 const UTModal = ({
   acceptButton,
   backgroundImg,
@@ -26,6 +36,7 @@ const UTModal = ({
   cancelButton,
   children,
   closeButtonColorTheme,
+  dataTestId = modal,
   disableTouchable,
   hideCloseButton,
   hideSeparatorBar,
@@ -53,6 +64,7 @@ const UTModal = ({
       transparent
       visible={visible}
       onRequestClose={loading ? () => {} : onRequestClose}
+      testID={dataTestId}
     >
       <KeyboardAvoidingView behavior={IS_IOS ? 'padding' : 'height'} style={styles.keyboardAvoidingView}>
         <ParentView onPress={() => Keyboard.dismiss()} style={[disableTouchable && styles.viewContainer]}>
@@ -81,6 +93,7 @@ const UTModal = ({
                           onPress={onRequestClose || cancelButton.onPress}
                           style={{ root: styles.closeButton }}
                           variant="text"
+                          dataTestId={`${dataTestId}.${closeButton}`}
                         />
                       )}
                       <View style={styles.imageContainer}>{imageComponent}</View>
@@ -89,7 +102,7 @@ const UTModal = ({
                   <View style={styles.content}>
                     <View style={[styles.headerContainer, !!title && styles.closeButtonContainer]}>
                       {!!title && (
-                        <UTLabel variant="title3" weight="medium">
+                        <UTLabel variant="title3" weight="medium" dataTestId={`${dataTestId}.${titleTestId}`}>
                           {title}
                         </UTLabel>
                       )}
@@ -100,11 +113,16 @@ const UTModal = ({
                           onPress={onRequestClose}
                           style={{ root: styles.closeButton }}
                           variant="text"
+                          dataTestId={`${dataTestId}.${closeButton}`}
                         />
                       )}
                     </View>
                     {!!subtitle && (
-                      <UTLabel colorTheme="gray" {...subtitleProps}>
+                      <UTLabel
+                        colorTheme="gray"
+                        {...subtitleProps}
+                        dataTestId={`${dataTestId}.${subtitleTestId}`}
+                      >
                         {subtitle}
                       </UTLabel>
                     )}
@@ -119,6 +137,7 @@ const UTModal = ({
                         disabled={cancelButton.disabled || loading}
                         onPress={cancelButton.onPress}
                         variant="text"
+                        dataTestId={`${dataTestId}.${cancelButtonTestId}`}
                       >
                         {cancelButton.text || 'Cancelar'}
                       </UTButton>
@@ -128,6 +147,7 @@ const UTModal = ({
                         colorTheme={acceptButton.colorTheme || 'primary'}
                         disabled={acceptButton.disabled || loading}
                         onPress={acceptButton.onPress}
+                        dataTestId={`${dataTestId}.${acceptButtonTestId}`}
                       >
                         {acceptButton.text || 'Aceptar'}
                       </UTButton>

package/lib/components/UTModal/proptypes.js

@@ -19,6 +19,7 @@ export default {
   backgroundStyles: ViewPropTypes.style,
   cancelButton: buttonPropType,
   closeButtonColorTheme: string,
+  dataTestId: string,
   disableTouchable: bool,
   fill: string,
   hideCloseButton: bool,

package/lib/components/UTPhoneInput/index.js

@@ -9,10 +9,19 @@ import UTBaseInputField from '../UTBaseInputField';
 import UTFieldLabel from '../UTFieldLabel';
 import UTLabel from '../UTLabel';
 import UTValidation, { validationDataProptypes } from '../UTValidation';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { AREA_CODES } from './constants';
 import styles from './styles';
 
+const {
+  title: titleTestId,
+  areaCode: areaCodeTestId,
+  phoneNumber: phoneNumberTestId,
+  helpText: helpTextTestId,
+  validation: validationTestId
+} = TEST_ID_CONSTANTS;
+
 class UTPhoneInput extends PureComponent {
   constructor(props) {
     super(props);
@@ -156,6 +165,7 @@ class UTPhoneInput extends PureComponent {
     const {
       areaCodePlaceholder,
       countryCode,
+      dataTestId,
       disabled,
       error,
       helpText,
@@ -189,6 +199,7 @@ class UTPhoneInput extends PureComponent {
             colorTheme={titleColorTheme}
             required={required}
             variant={TITLE_VARIANTS[titleVariant]}
+            dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
           >
             {title}
           </UTFieldLabel>
@@ -215,6 +226,7 @@ class UTPhoneInput extends PureComponent {
               style={{ container: styles.areaCode }}
               type="number"
               value={areaCode}
+              dataTestId={dataTestId ? `${dataTestId}.${areaCodeTestId}` : undefined}
             />
           ) : null}
           <View style={styles.phoneNumber}>
@@ -240,15 +252,25 @@ class UTPhoneInput extends PureComponent {
               ]}
               type="number"
               value={phoneNumber}
+              dataTestId={dataTestId ? `${dataTestId}.${phoneNumberTestId}` : undefined}
             />
           </View>
         </View>
         {helpText && (
-          <UTLabel colorTheme="gray" variant="small">
+          <UTLabel
+            colorTheme="gray"
+            variant="small"
+            dataTestId={dataTestId ? `${dataTestId}.${helpTextTestId}` : undefined}
+          >
             {helpText}
           </UTLabel>
         )}
-        {validationData && <UTValidation validationData={validationData} />}
+        {validationData && (
+          <UTValidation
+            validationData={validationData}
+            dataTestId={dataTestId ? `${dataTestId}.${validationTestId}` : undefined}
+          />
+        )}
       </View>
     );
   }
@@ -267,6 +289,7 @@ UTPhoneInput.defaultProps = {
 UTPhoneInput.propTypes = {
   areaCodePlaceholder: string,
   countryCode: string,
+  dataTestId: string,
   disabled: bool,
   error: string,
   helpText: string,

package/lib/components/UTRoundView/README.md

@@ -0,0 +1,158 @@
+# UTRoundView
+
+## Description
+
+> ⚠️ **AI-GENERATED DOCUMENTATION**
+> This documentation was entirely generated by an AI assistant and has NOT been reviewed by human developers. The test ID implementation details, patterns, examples, and usage instructions should be thoroughly verified before use in production. Please validate all functionality and testing approaches with your development team.
+
+`UTRoundView` is a container component that provides a rounded view with optional gradient background and shadow effects. It's designed to wrap content in a visually appealing rounded container with customizable styling options.
+
+## Props
+
+| Name       | Type   | Default     | Description                                                           |
+| ---------- | ------ | ----------- | --------------------------------------------------------------------- |
+| children   | node   |             | Content to display inside the rounded view.                           |
+| dataTestId | string | 'roundView' | Test ID for automated testing.                                        |
+| styles     | object |             | Custom styles object with `outerContainer` and `innerContainer` keys. |
+| withShadow | bool   | false       | If true, applies shadow effects to the container.                     |
+| startColor | string |             | Starting color for gradient background (requires endColor).           |
+| endColor   | string |             | Ending color for gradient background (requires startColor).           |
+
+## Test IDs
+
+When `dataTestId` is provided (defaults to 'roundView'), the component applies the test ID to its element:
+
+| Element   | Test ID         | Condition                        |
+| --------- | --------------- | -------------------------------- |
+| Container | `${dataTestId}` | Always (defaults to 'roundView') |
+
+### Test ID Details
+
+- **Container**: The main outer Animated.View container that provides the rounded styling and background
+
+Children components are responsible for their own test ID implementation. The UTRoundView only provides a test ID for its main container element.
+
+**Default Test ID**: Since only one UTRoundView should be used per view, the `dataTestId` prop defaults to 'roundView'. This ensures that every UTRoundView instance has a consistent, predictable test ID available, while still allowing for custom test IDs when multiple round view types need to be distinguished.
+
+### Styles Object
+
+The `styles` prop accepts an object with the following keys:
+
+| Key            | Type   | Description                           |
+| -------------- | ------ | ------------------------------------- |
+| outerContainer | object | Styles applied to the outer container |
+| innerContainer | object | Styles applied to the inner container |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import { UTRoundView, UTLabel } from '@widergy/mobile-ui';
+
+const Example = () => {
+  return (
+    <UTRoundView>
+      <UTLabel>Content inside the rounded view</UTLabel>
+    </UTRoundView>
+  );
+};
+
+export default Example;
+```
+
+### With Custom Styles
+
+```jsx
+import React from 'react';
+import { UTRoundView, UTLabel } from '@widergy/mobile-ui';
+
+const StyledExample = () => {
+  return (
+    <UTRoundView
+      styles={{
+        outerContainer: { margin: 20 },
+        innerContainer: { padding: 16, backgroundColor: '#f0f0f0' }
+      }}
+    >
+      <UTLabel>Styled rounded view content</UTLabel>
+    </UTRoundView>
+  );
+};
+
+export default StyledExample;
+```
+
+### With Gradient Background
+
+```jsx
+import React from 'react';
+import { UTRoundView, UTLabel } from '@widergy/mobile-ui';
+
+const GradientExample = () => {
+  return (
+    <UTRoundView
+      startColor="#ff6b6b"
+      endColor="#4ecdc4"
+      styles={{
+        innerContainer: { padding: 20 }
+      }}
+    >
+      <UTLabel colorTheme="light">Gradient background content</UTLabel>
+    </UTRoundView>
+  );
+};
+
+export default GradientExample;
+```
+
+### With Shadow and Test IDs
+
+```jsx
+import React from 'react';
+import { UTRoundView, UTLabel } from '@widergy/mobile-ui';
+
+const TestableExample = () => {
+  return (
+    <UTRoundView
+      dataTestId="profileCard"
+      withShadow
+      styles={{
+        outerContainer: { margin: 16 },
+        innerContainer: { padding: 20 }
+      }}
+    >
+      <UTLabel>Profile information card</UTLabel>
+    </UTRoundView>
+  );
+};
+
+// Generated test IDs:
+// profileCard (main container)
+
+export default TestableExample;
+```
+
+### With Test IDs
+
+```jsx
+import React from 'react';
+import { UTRoundView, UTLabel } from '@widergy/mobile-ui';
+
+const TestableExample = () => {
+  return (
+    <UTRoundView dataTestId="infoCard" startColor="#667eea" endColor="#764ba2" withShadow>
+      <UTLabel dataTestId="infoCard.message" colorTheme="light">
+        Important information
+      </UTLabel>
+    </UTRoundView>
+  );
+};
+
+// Generated test IDs:
+// infoCard (main container)
+// infoCard.message (child UTLabel - handled by UTLabel component)
+
+export default TestableExample;
+```

package/lib/components/UTRoundView/index.js

@@ -4,12 +4,22 @@ import merge from 'lodash/merge';
 
 import { useTheme } from '../../theming';
 import Surface from '../Surface';
+import { TEST_IDS } from '../../constants/testIds';
 
 import propTypes from './propTypes';
 import ownStyles from './styles';
 import { generateBackgroundGradient } from './utils';
 
-const UTRoundView = ({ children, styles, withShadow = false, startColor, endColor }) => {
+const { roundView } = TEST_IDS;
+
+const UTRoundView = ({
+  children,
+  dataTestId = roundView,
+  styles,
+  withShadow = false,
+  startColor,
+  endColor
+}) => {
   const theme = useTheme();
   const themedStyles = merge({}, theme?.roundView, styles);
   const withBackgroundGradient = !!startColor && !!endColor;
@@ -27,6 +37,7 @@ const UTRoundView = ({ children, styles, withShadow = false, startColor, endColo
           themedStyles?.outerContainer,
           withBackgroundGradient && ownStyles?.outerWithBackground
         ]}
+        testID={dataTestId}
       >
         <ChildrenContainer position="top" style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>
           {children}

package/lib/components/UTRoundView/propTypes.js

@@ -1,11 +1,13 @@
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { shape, string } from 'prop-types';
+import { shape, string, bool } from 'prop-types';
 
 export default {
+  dataTestId: string,
   styles: shape({
     outerContainer: ViewPropTypes.style,
     innerContainer: ViewPropTypes.style
   }),
   startColor: string,
-  endColor: string
+  endColor: string,
+  withShadow: bool
 };

package/lib/components/UTSearchField/README.md

@@ -6,23 +6,44 @@
 
 ## Props
 
-| Name            | Type   | Default | Description                                                  |
-| --------------- | ------ | ------- | ------------------------------------------------------------ |
-| inputRef        | func   |         | Reference to the input field.                                |
-| onBlur          | func   |         | Function to call when the input field loses focus.           |
-| onChange        | func   |         | Function to call when the input field value changes.         |
-| onFocus         | func   |         | Function to call when the input field gains focus.           |
-| onSubmitEditing | func   |         | Function to call when the input field is submitted.          |
-| placeholder     | string |         | Placeholder text for the input field.                        |
-| returnKeyType   | string |         | Determines the return key type on the keyboard.              |
-| size            | string | medium  | Size of the input field. One of: `small`, `medium`, `large`. |
-| style           | object |         | Style object to customize the input field.                   |
-| type            | string |         | Type of input (e.g., 'text', 'password', 'email').           |
-| value           | string | ''      | The value of the input field.                                |
-| variant         | string | white   | Variant of the input field. One of: `white`, `gray`.         |
+| Name              | Type   | Default | Description                                                            |
+| ----------------- | ------ | ------- | ---------------------------------------------------------------------- |
+| `dataTestId`      | string |         | Test ID for automated testing. Enables hierarchical test ID structure. |
+| `inputRef`        | func   |         | Reference to the input field.                                          |
+| `onBlur`          | func   |         | Function to call when the input field loses focus.                     |
+| `onChange`        | func   |         | Function to call when the input field value changes.                   |
+| `onFocus`         | func   |         | Function to call when the input field gains focus.                     |
+| `onSubmitEditing` | func   |         | Function to call when the input field is submitted.                    |
+| `placeholder`     | string |         | Placeholder text for the input field.                                  |
+| `returnKeyType`   | string |         | Determines the return key type on the keyboard.                        |
+| `size`            | string | medium  | Size of the input field. One of: `small`, `medium`, `large`.           |
+| `style`           | object |         | Style object to customize the input field.                             |
+| `type`            | string |         | Type of input (e.g., 'text', 'password', 'email').                     |
+| `value`           | string | ''      | The value of the input field.                                          |
+| `variant`         | string | white   | Variant of the input field. One of: `white`, `gray`.                   |
+
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element      | Test ID               | Condition                         |
+| ------------ | --------------------- | --------------------------------- |
+| Text input   | `${dataTestId}`       | Always when `dataTestId` provided |
+| Search icon  | `${dataTestId}.left`  | Always when `dataTestId` provided |
+| Clear button | `${dataTestId}.right` | When `value` is not empty         |
+
+### Test ID Structure Details
+
+UTSearchField uses `UTBaseInputField` internally with predefined adornments:
+
+- **Search Icon**: Always present on the left side as an `IconAdornment`
+- **Clear Button**: Appears on the right side as an `ActionAdornment` when text is entered
+- **Input Field**: The main TextInput element gets the base `dataTestId`
 
 ## Example
 
+### Basic Usage
+
 ```jsx
 import React, { useState } from 'react';
 import { View, Text } from 'react-native';
@@ -41,3 +62,32 @@ const UTSearchFieldExample = () => {
 
 export default UTSearchFieldExample;
 ```
+
+### With Test IDs
+
+```jsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import UTSearchField from './UTSearchField';
+
+const TestableSearchExample = () => {
+  const [searchValue, setSearchValue] = useState('');
+
+  return (
+    <View style={{ padding: 20 }}>
+      <UTSearchField
+        dataTestId="productSearch"
+        placeholder="Search products..."
+        value={searchValue}
+        onChange={setSearchValue}
+      />
+      <Text>Search Value: {searchValue}</Text>
+    </View>
+  );
+};
+
+// Generated test IDs:
+// productSearch (input field)
+// productSearch.left (search icon)
+// productSearch.right (clear button, when value is not empty)
+```

package/lib/components/UTSearchField/index.js

@@ -20,7 +20,8 @@ const UTSearchField = ({
   style,
   type,
   value,
-  variant
+  variant,
+  dataTestId
 }) => {
   const theme = useTheme();
   const { input } = useMemo(() => retrieveStyle({ theme }), [theme]);
@@ -54,6 +55,7 @@ const UTSearchField = ({
       type={type}
       value={value}
       variant={variant}
+      dataTestId={dataTestId}
     />
   );
 };

package/lib/components/UTSearchField/proptypes.js

@@ -20,5 +20,6 @@ export const propTypes = {
   style: object,
   type: string,
   value: string,
-  variant: oneOf(Object.values(VARIANT))
+  variant: oneOf(Object.values(VARIANT)),
+  dataTestId: string
 };