@widergy/mobile-ui 1.28.3 → 1.29.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.29.1](https://github.com/widergy/mobile-ui/compare/v1.29.0...v1.29.1) (2024-10-22)
+
+
+### Bug Fixes
+
+* update read mes and components to match the web ones ([#365](https://github.com/widergy/mobile-ui/issues/365)) ([ca5569a](https://github.com/widergy/mobile-ui/commit/ca5569a150fdb3ccab38517c33983c6309785d9a))
+
+# [1.29.0](https://github.com/widergy/mobile-ui/compare/v1.28.3...v1.29.0) (2024-10-21)
+
+
+### Features
+
+* [UG-2131] spacing and bottom actions updates ([#371](https://github.com/widergy/mobile-ui/issues/371)) ([93e5862](https://github.com/widergy/mobile-ui/commit/93e58629b1268cb6ccad4646e2ddb1be91de58a5))
+
 ## [1.28.3](https://github.com/widergy/mobile-ui/compare/v1.28.2...v1.28.3) (2024-10-18)
 
 

package/lib/components/UTActionCard/components/BottomActions/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_REDIRECTION_ICON = 'IconChevronRight';

package/lib/components/UTActionCard/components/BottomActions/index.js

@@ -7,6 +7,7 @@ import { ACTION_TYPES } from '../../constants';
 import { useTheme } from '../../../../theming';
 import { mergeMultipleStyles } from '../../../../utils/styleUtils';
 
+import { DEFAULT_REDIRECTION_ICON } from './constants';
 import styles, { getThemeStyles } from './styles';
 
 const BottomActions = ({ actions = [], bottomActionsVariant }) => {
@@ -27,7 +28,7 @@ const BottomActions = ({ actions = [], bottomActionsVariant }) => {
             }}
             colorTheme={colorTheme}
             disabled={disabled}
-            Icon={isRedirection ? 'IconChevronRight' : Icon}
+            Icon={isRedirection ? Icon || DEFAULT_REDIRECTION_ICON : Icon}
             iconPlacement={isRedirection ? 'right' : 'left'}
             loading={loading}
             onClick={onClick}

package/lib/components/UTActionCard/components/Header/index.js

@@ -43,17 +43,19 @@ const Header = ({
 
   return (
     <View style={[styles.header, styles[size], classNames.header]}>
-      {renderAdornment(adornment, 'left', size)}
+      {renderAdornment(adornment, 'left')}
       <View style={styles.headerTitles}>
-        {renderAdornment(adornment, 'top', size)}
-        <UTLabel variant="title3" weight="medium" {...titleProps}>
-          {title}
-        </UTLabel>
-        {description && (
-          <UTLabel colorTheme="gray" {...descriptionProps}>
-            {description}
+        {renderAdornment(adornment, 'top')}
+        <View style={styles.titleAndDescription}>
+          <UTLabel variant="title3" weight="medium" {...titleProps}>
+            {title}
           </UTLabel>
-        )}
+          {description && (
+            <UTLabel colorTheme="gray" {...descriptionProps}>
+              {description}
+            </UTLabel>
+          )}
+        </View>
       </View>
       {status ? (
         <Status

package/lib/components/UTActionCard/components/Header/styles.js

@@ -9,9 +9,14 @@ export default StyleSheet.create({
   headerTitles: {
     flex: 1,
     flexDirection: 'column',
-    gap: 8,
+    gap: 16,
     marginRight: 'auto'
   },
+  titleAndDescription: {
+    flex: 1,
+    flexDirection: 'column',
+    gap: 8
+  },
   medium: {
     padding: 24
   },
@@ -26,5 +31,8 @@ export default StyleSheet.create({
   },
   alignSelf_end: {
     alignSelf: 'flex-end'
+  },
+  adornment: {
+    maxWidth: '100%'
   }
 });

package/lib/components/UTActionCard/components/Header/utils.js

@@ -62,19 +62,23 @@ export const statusPropsMapper = (status, theme) => {
   return { backgroundColor: theme.Palette[variant]['01'] };
 };
 
-export const renderAdornment = (adornment, position, size) => {
+export const renderAdornment = (adornment, position) => {
   if (isEmpty(adornment) || adornment.position !== position) return null;
   const AdornmentComponent = ADORNMENT_COMPONENT_MAPPER[adornment.type];
   const defaultPlaceSelf = adornment.position === 'left' ? PLACE_SELF_TYPES.CENTER : PLACE_SELF_TYPES.START;
 
   return (
     <AdornmentComponent
+      {...(adornment.props || {})}
       style={[
+        styles.adornment,
         styles[`alignSelf_${adornment.alignment || defaultPlaceSelf}`],
-        position === 'top' && styles[`gap_${size}`],
-        adornment.type === 'image' && { width: adornment.props?.width, height: adornment.props?.height }
+        adornment.type === 'image' && {
+          ...(adornment.props?.width && { width: adornment.props.width }),
+          ...(adornment.props?.height && { height: adornment.props.height })
+        },
+        adornment.props?.style
       ]}
-      {...(adornment.props || {})}
     />
   );
 };

package/lib/components/UTBaseInputField/README.md

@@ -6,34 +6,37 @@
 
 ## Props
 
-| Name                  | Type                                                      | Default  | Description                                               |
-| --------------------- | --------------------------------------------------------- | -------- | --------------------------------------------------------- |
-| alwaysShowPlaceholder | bool                                                      | false    | Whether to always show the placeholder text.              |
-| disabled              | bool                                                      |          | Whether the input field is disabled.                      |
-| error                 | string                                                    |          | Error message to display.                                 |
-| id                    | oneOfType([number, string])                               |          | Unique identifier for the input field.                    |
-| value                 | string                                                    | ''       | The value of the input field.                             |
-| onChange              | func.isRequired                                           | () => {} | Callback function to handle change event.                 |
-| inputSize             | string                                                    | 'large'  | Size of the input field. One of: `small`, `large`.        |
-| leftAdornments        | arrayOf(shape({ name: string, props: object }))           |          | Elements to display on the left side of the input field.  |
-| maxCount              | number                                                    |          | Maximum number of characters allowed.                     |
-| maxRows               | number                                                    |          | Maximum number of rows for multiline input.               |
-| onBlur                | func                                                      |          | Callback function to handle blur event.                   |
-| onFocus               | func                                                      |          | Callback function to handle focus event.                  |
-| onSubmitEditing       | func                                                      |          | Callback function to handle submit editing event.         |
-| placeholder           | string                                                    |          | Placeholder text for the input field.                     |
-| readOnly              | bool                                                      |          | Whether the input field is read-only.                     |
-| returnKeyType         | string                                                    |          | Type of return key to display on the keyboard.            |
-| rightAdornments       | arrayOf(shape({ name: string, props: object }))           |          | Elements to display on the right side of the input field. |
-| style                 | shape({ container: object, input: object, root: object }) | {}       | Custom styles to apply to the component.                  |
-| type                  | string                                                    |          | Type of the input field (e.g., email, numeric, password). |
-| variant               | string                                                    | 'white'  | Variant of the input field. One of: `white`, `gray`.      |
-| editable              | bool                                                      | true     | Whether the input field is editable.                      |
+| Name                  | Type                                                      | Default  | Description                                                                                     |
+| --------------------- | --------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- |
+| alwaysShowPlaceholder | bool                                                      | false    | Whether to always show the placeholder text, even when the field is focused.                    |
+| blurOnSubmit          | bool                                                      |          | If true, the input will be blurred when the user submits the text.                              |
+| disabled              | bool                                                      |          | Whether the input field is disabled.                                                            |
+| editable              | bool                                                      | true     | Whether the input field is editable. If false, it behaves like a disabled field.                |
+| error                 | oneOfType([bool, string])                                 |          | Error message to display, or `true` to indicate an error state without a message.               |
+| id                    | oneOfType([number, string])                               |          | Unique identifier for the input field.                                                          |
+| value                 | oneOfType([string, number])                               | null     | The value of the input field.                                                                   |
+| onChange              | func                                                      | () => {} | Callback function to handle change events.                                                      |
+| inputSize             | string                                                    | 'large'  | Size of the input field. One of: `small`, `large`.                                              |
+| leftAdornments        | arrayOf(shape({ name: string, props: object }))           | []       | Elements to display on the left side of the input field (e.g., prefix, icons).                  |
+| maxLength             | number                                                    |          | Maximum number of characters allowed in the input.                                              |
+| maxRows               | number                                                    | 1        | Maximum number of rows for multiline input.                                                     |
+| onBlur                | func                                                      |          | Callback function to handle blur events.                                                        |
+| onFocus               | func                                                      |          | Callback function to handle focus events.                                                       |
+| onSubmitEditing       | func                                                      |          | Callback function to handle submit events.                                                      |
+| placeholder           | string                                                    |          | Placeholder text for the input field.                                                           |
+| readOnly              | bool                                                      |          | Whether the input field is read-only.                                                           |
+| returnKeyType         | string                                                    |          | Type of return key to display on the keyboard.                                                  |
+| rightAdornments       | arrayOf(shape({ name: string, props: object }))           | []       | Elements to display on the right side of the input field (e.g., suffix, icons, action buttons). |
+| showCharacterCount    | bool                                                      |          | Whether to display the character count.                                                         |
+| style                 | shape({ container: object, input: object, root: object }) | {}       | Custom styles to apply to the component.                                                        |
+| type                  | string                                                    |          | Type of the input field (e.g., text, email, numeric, password).                                 |
+| variant               | string                                                    | 'white'  | Variant of the input field. One of: `white`, `gray`.                                            |
 
 ## Input Types
 
 The `type` prop can be one of these values:
 
+- `text`
 - `email`
 - `numeric`
 - `password`
@@ -93,7 +96,7 @@ Displays a prefix text before the input field.
 
 Displays a suffix text after the input field.
 
-- **Props passed to PrefixAdornment:**
+- **Props passed to SuffixAdornment:**
   - `text` (string): The text to display as a suffix.
 
 **Example Usage:**

package/lib/components/UTBaseInputField/components/IconAdornment/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { shape, string, elementType, bool, oneOfType } from 'prop-types';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
 import { isUTIcon } from '../../../UTIcon/utils';
 import UTIcon from '../../../UTIcon';
 
 import { ERROR_ICON, ICON_SIZE } from './constants';
 import { getIconColorProps } from './utils';
-import { defaultProps, propTypes } from './proptypes';
 
 const IconAdornment = ({
   changeOnError,
@@ -31,7 +32,17 @@ const IconAdornment = ({
   );
 };
 
-IconAdornment.propTypes = propTypes;
-IconAdornment.defaultProps = defaultProps;
+IconAdornment.propTypes = {
+  changeOnError: bool,
+  changeOnFocus: bool,
+  colorTheme: string,
+  error: oneOfType([bool, string]),
+  focused: bool,
+  Icon: elementType,
+  inputStyle: shape({
+    root: TextPropTypes.style
+  }),
+  shade: string
+};
 
 export default IconAdornment;

package/lib/components/UTBaseInputField/constants.js

@@ -15,9 +15,10 @@ export const TYPES = {
   EMAIL: 'email',
   NUMBER: 'number',
   NUMERIC: 'numeric',
-  PASSWORD: 'password',
   PASSWORD_NUMERIC: 'password_numeric',
-  PHONE: 'phone'
+  PASSWORD: 'password',
+  PHONE: 'phone',
+  TEXT: 'text'
 };
 
 export const KEYBOARD_BY_TYPE = {

package/lib/components/UTBaseInputField/index.js

@@ -10,41 +10,41 @@ import React, {
 } from 'react';
 import { View, TextInput } from 'react-native';
 import debounce from 'lodash/debounce';
+import { arrayOf, bool, func, number, object, oneOfType, shape, string } from 'prop-types';
 
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
 
 import { COMPONENTS_MAPPER, DEBOUNCE_CONFIG, DEBOUNCE_DELAY } from './constants';
-import { defaultProps, propTypes } from './proptypes';
 import { getPropsByType } from './utils';
 import { CONTAINER, LINE_HEIGHT, retrieveStyle } from './theme';
 
 const UTBaseInputField = forwardRef(
   (
     {
-      alwaysShowPlaceholder,
+      alwaysShowPlaceholder = false,
       blurOnSubmit,
       disabled,
-      editable,
+      editable = true,
       error,
       id,
-      inputSize,
-      leftAdornments,
+      inputSize = 'large',
+      leftAdornments = [],
       maxLength,
-      maxRows,
+      maxRows = 1,
       onBlur,
-      onChange,
+      onChange = () => {},
       onFocus,
       onSubmitEditing,
       placeholder,
       readOnly,
       returnKeyType,
-      rightAdornments,
+      rightAdornments = [],
       showCharacterCount,
       style,
       type,
-      value,
-      variant
+      value = null,
+      variant = 'white'
     },
     ref
   ) => {
@@ -54,6 +54,7 @@ const UTBaseInputField = forwardRef(
 
     const theme = useTheme();
     const multiline = maxRows > 1;
+    const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
 
     const { secureTextEntry, autoCapitalize, keyboardType } = getPropsByType(type);
 
@@ -205,7 +206,7 @@ const UTBaseInputField = forwardRef(
           />
           {rightAdornments.map(renderElement)}
         </View>
-        {maxLength && showCharacterCount && (
+        {hasCharactersCount && (
           <View style={textLengthRowStyle}>
             <UTLabel colorTheme="gray" variant="small">
               {value?.length || 0}/{maxLength}
@@ -218,7 +219,40 @@ const UTBaseInputField = forwardRef(
 );
 
 UTBaseInputField.displayName = 'UTBaseInputField';
-UTBaseInputField.defaultProps = defaultProps;
-UTBaseInputField.propTypes = propTypes;
+
+UTBaseInputField.propTypes = {
+  alwaysShowPlaceholder: bool,
+  blurOnSubmit: bool,
+  disabled: bool,
+  editable: bool,
+  error: oneOfType([bool, string]),
+  id: oneOfType([number, string]),
+  value: oneOfType([string, number]),
+  onChange: func,
+  inputSize: string,
+  leftAdornments: arrayOf(shape({ name: string.isRequired, props: shape({}) })),
+  maxLength: number,
+  maxRows: number,
+  onBlur: func,
+  onFocus: func,
+  onSubmitEditing: func,
+  placeholder: string,
+  readOnly: bool,
+  returnKeyType: string,
+  rightAdornments: arrayOf(
+    shape({
+      name: string.isRequired,
+      props: shape({})
+    })
+  ),
+  showCharacterCount: bool,
+  style: shape({
+    container: object,
+    input: object,
+    root: object
+  }),
+  type: string,
+  variant: string
+};
 
 export default UTBaseInputField;

package/lib/components/UTBaseInputField/theme.js

@@ -39,6 +39,7 @@ const COLORS = {
   TEXT: {
     CURSOR: theme => theme.Palette.accent['04'],
     INPUT: theme => theme.Palette.dark['05'],
+    DISABLED_INPUT: theme => theme.Palette.gray['04'],
     PLACEHOLDER: theme => theme.Palette.gray['02'],
     SELECTION: theme => theme.Palette.accent['02']
   }
@@ -124,7 +125,10 @@ const conditionalContainerStyle = (disabled, error, focused, inputSize, readOnly
   })
 });
 
-const conditionalInputStyle = (maxRows, multiline) => ({
+const conditionalInputStyle = (disabled, maxRows, multiline, theme) => ({
+  ...(disabled && {
+    color: COLORS.TEXT.DISABLED_INPUT(theme)
+  }),
   ...(multiline && {
     height: maxRows * LINE_HEIGHT,
     textAlignVertical: 'top'
@@ -154,7 +158,7 @@ export const retrieveStyle = ({
   const inputStyle = {
     root: {
       ...baseTheme.input.root,
-      ...conditionalInputStyle(maxRows, multiline),
+      ...conditionalInputStyle(disabled, maxRows, multiline, theme),
       ...style.input
     },
     cursorColor: baseTheme.input.cursorColor,

package/lib/components/UTPasswordField/versions/V1/constants.js

@@ -1,11 +1,2 @@
-export const INPUT_TYPE = {
-  NUMERIC: 'numeric',
-  PASSWORD: 'password',
-  PASSWORD_NUMERIC: 'password_numeric',
-  TEXT: 'text'
-};
-
-export const KEYBOARD_TYPE_NUMERIC = 'numeric';
-
 export const ICON_EYE = 'IconEye';
 export const ICON_EYE_OFF = 'IconEyeOff';

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

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 
-import { propTypes, defaultProps } from '../../../UTTextInput/versions/V1/proptypes';
+import { propTypes as textInputPropTypes } from '../../../UTTextInput/versions/V1';
+import { TYPES } from '../../../UTBaseInputField/constants';
 import UTTextInput from '../../../UTTextInput';
 
-import { ICON_EYE, ICON_EYE_OFF, INPUT_TYPE, KEYBOARD_TYPE_NUMERIC } from './constants';
+import { ICON_EYE, ICON_EYE_OFF } from './constants';
 
-const UTPasswordField = ({ keyboardType, ...props }) => {
+const UTPasswordField = ({ type, ...props }) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
   const toggleVisibility = () => setIsPasswordVisible(!isPasswordVisible);
@@ -16,17 +17,14 @@ const UTPasswordField = ({ keyboardType, ...props }) => {
   };
 
   const textInputType = isPasswordVisible
-    ? keyboardType === KEYBOARD_TYPE_NUMERIC
-      ? INPUT_TYPE.NUMERIC
-      : INPUT_TYPE.TEXT
-    : keyboardType === KEYBOARD_TYPE_NUMERIC
-      ? INPUT_TYPE.PASSWORD_NUMERIC
-      : INPUT_TYPE.PASSWORD;
+    ? type
+    : type === TYPES.NUMERIC
+      ? TYPES.PASSWORD_NUMERIC
+      : TYPES.PASSWORD;
 
   return <UTTextInput {...props} action={action} type={textInputType} version="V1" />;
 };
 
-UTPasswordField.defaultProps = defaultProps;
-UTPasswordField.propTypes = propTypes;
+UTPasswordField.propTypes = textInputPropTypes;
 
 export default UTPasswordField;

package/lib/components/UTTextArea/README.md

@@ -2,16 +2,17 @@
 
 ## Description
 
-`UTTextArea` is a component that provides a multi-line text input field, building on the `UTTextInput` component with additional customization for handling multiple rows of text.
+`UTTextArea` is a multi-line text input component that extends `UTTextInput`. It is pre-configured to handle multiple rows of text and automatically displays the character count.
 
 ## Props
 
-`UTTextArea` inherits all the props from `UTTextInput` and adds an additional prop specific to the number of rows.
+`UTTextArea` inherits all the props from `UTTextInput` and predefines some of them for convenience.
 
-| Name    | Type   | Default | Description                                           |
-| ------- | ------ | ------- | ----------------------------------------------------- |
-| maxRows | number | 4       | The maximum number of rows the text area can display. |
-| ...     | ...    | ...     | Inherits all props from `UTTextInput`.                |
+| Name               | Type   | Default | Description                                                       |
+| ------------------ | ------ | ------- | ----------------------------------------------------------------- |
+| maxRows            | number | 4       | The number of rows the text area will display.                    |
+| showCharacterCount | bool   | true    | Whether to display the character count. Always `true` by default. |
+| ...                | ...    | ...     | Inherits all other props from `UTTextInput`.                      |
 
 ## Usage
 

package/lib/components/UTTextArea/index.js

@@ -1,16 +1,10 @@
 import React from 'react';
 
 import UTTextInput from '../UTTextInput';
-import { propTypes } from '../UTTextInput/versions/V1/proptypes';
+import { propTypes as TextInputPropTypes } from '../UTTextInput/versions/V1';
 
-import { DEFAULT_PROPS } from './constants';
+const UTTextArea = props => <UTTextInput showCharacterCount maxRows={4} version="V1" {...props} />;
 
-const UTTextArea = ({ maxRows, ...props }) => (
-  <UTTextInput showCharacterCount maxRows={maxRows} version="V1" {...props} />
-);
-
-UTTextArea.defaultProps = DEFAULT_PROPS;
-
-UTTextArea.propTypes = propTypes;
+UTTextArea.propTypes = TextInputPropTypes;
 
 export default UTTextArea;

package/lib/components/UTTextInput/versions/V1/README.md

@@ -9,63 +9,65 @@
 | Name                  | Type                                                      | Default   | Description                                                                                              |
 | --------------------- | --------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------- |
 | action                | object                                                    |           | Action button configuration object.                                                                      |
-| alwaysShowPlaceholder | bool                                                      | false     | Whether to always show the placeholder.                                                                  |
+| alwaysShowPlaceholder | bool                                                      | false     | Whether to always show the placeholder, even when the field is focused.                                  |
+| blurOnSubmit          | bool                                                      | false     | Whether the input should lose focus after submitting.                                                    |
 | disabled              | bool                                                      | false     | Disables the input field.                                                                                |
-| error                 | string                                                    |           | Error message to be displayed.                                                                           |
+| error                 | string                                                    |           | Error message to be displayed below the input field.                                                     |
 | helpText              | string                                                    |           | Help text to be displayed below the input field.                                                         |
 | id                    | oneOfType([number, string])                               |           | Unique identifier for the input field.                                                                   |
-| inputRef              | func                                                      |           | Reference to the input field.                                                                            |
+| inputRef              | oneOfType([func, instanceOf(Object)])                     |           | Reference to the input field to access methods like `focus`, `blur`, or `clear`.                         |
 | inputSize             | string                                                    | 'large'   | Size of the input field. One of: `small`, `large`.                                                       |
 | title                 | string                                                    |           | Title text for the input field.                                                                          |
-| titleVariant          | string                                                    | 'large'   | Variant of the title.                                                                                    |
+| titleVariant          | string                                                    | 'large'   | Variant of the title. Either `small` or `large`.                                                         |
 | LeftIcon              | elementType                                               |           | Icon to be displayed on the left side of the input field.                                                |
-| maxCount              | number                                                    |           | Maximum number of characters allowed in the input field.                                                 |
+| maxLength             | number                                                    |           | Maximum number of characters allowed in the input field.                                                 |
 | maxRows               | number                                                    | 1         | Maximum number of rows allowed in 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.                                                      |
+| onSubmitEditing       | func                                                      |           | Function to call when the input field is submitted (e.g., pressing Enter on a keyboard).                 |
 | placeholder           | string                                                    |           | Placeholder text for the input field.                                                                    |
-| prefix                | string                                                    |           | Prefix text to be displayed inside the input field.                                                      |
+| prefix                | string                                                    |           | Prefix text to be displayed inside the input field before the entered value.                             |
 | readOnly              | bool                                                      | false     | Makes the input field read-only.                                                                         |
-| required              | bool                                                      | false     | Whether the input field is required.                                                                     |
-| returnKeyType         | string                                                    | 'done'    | Determines the return key type on the keyboard.                                                          |
+| required              | bool                                                      | false     | Marks the input field as required.                                                                       |
+| returnKeyType         | string                                                    | 'done'    | Determines the return key type on the keyboard (e.g., `done`, `next`).                                   |
 | RightIcon             | elementType                                               |           | Icon to be displayed on the right side of the input field.                                               |
+| showCharacterCount    | bool                                                      | false     | Whether the character count should be displayed (if `maxLength` is defined).                             |
 | style                 | shape({ container: object, input: object, root: object }) |           | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
-| suffix                | string                                                    |           | Suffix text to be displayed inside the input field.                                                      |
-| tooltip               | string                                                    |           | Tooltip text to be displayed.                                                                            |
-| type                  | string                                                    | 'default' | Type of input (e.g., 'text', 'password', 'email').                                                       |
-| validations           | array                                                     |           | Array of validation rules to be applied to the input field.                                              |
-| value                 | string                                                    | ''        | The value of the input field.                                                                            |
+| suffix                | string                                                    |           | Suffix text to be displayed inside the input field after the entered value.                              |
+| tooltip               | string                                                    |           | Tooltip text to be displayed next to the input field.                                                    |
+| type                  | string                                                    | 'default' | Type of input field (e.g., 'text', 'password', 'email', 'numeric').                                      |
+| validations           | validationDataProptypes                                   |           | Array of validation rules to be applied to the input field.                                              |
+| value                 | string                                                    | ''        | The current value of the input field.                                                                    |
 
 ### action
 
-Configuration object for the action button.
+The `action` object allows configuring the action button that appears inside the input field, such as a clear or submit icon.
 
-| Name       | Type        | Description                                         |
-| ---------- | ----------- | --------------------------------------------------- |
-| icon       | elementType | Icon to be displayed in the action button.          |
-| onPress    | func        | Function to call when the action button is pressed. |
-| colorTheme | string      | Color theme of the action button.                   |
-| text       | string      | Text to be displayed in the action button.          |
+| Name       | Type        | Description                                            |
+| ---------- | ----------- | ------------------------------------------------------ |
+| icon       | elementType | Icon to be displayed in the action button.             |
+| onPress    | func        | Function called when the action button is pressed.     |
+| colorTheme | string      | Color theme of the action button.                      |
+| text       | string      | Text to be displayed inside the action button, if any. |
 
 ### titleVariant
 
-It must be one of these:
+The value of `titleVariant` must be one of the following:
 
-- "small": small
-- "large": large
+- "small"
+- "large"
 
 ### inputSize
 
-It must be one of these:
+The value of `inputSize` must be one of the following:
 
-- "small": small
-- "large": large
+- "small"
+- "large"
 
 ### type
 
-It must be one of these:
+The value of `type` must be one of the following:
 
 - "default"
 - "email"
@@ -96,134 +98,8 @@ If a RightIcon is provided and an error occurs, the RightIcon will be replaced b
 
 ### Structure of validations
 
-The validations prop expects an array of objects, where each object can have a title, status, and an items array. Each item in the items array represents a specific validation rule with a status and text. It is not necessary to indicate status value if it is "default".
-
-#### Example structure:
-
-```jsx
-const validationData = [
-  {
-    items: [
-      {
-        status: 'success',
-        text: 'Must be at least 8 characters long.'
-      }
-    ]
-  },
-  {
-    items: [
-      {
-        status: 'error',
-        text: 'Must be at most 16 characters long.'
-      }
-    ]
-  },
-  {
-    title: 'Must meet at least one of the following conditions:',
-    status: 'error',
-    items: [
-      {
-        text: 'At least one lowercase letter.'
-      },
-      {
-        text: 'At least one uppercase letter.'
-      },
-      {
-        status: 'success',
-        text: 'At least one number.'
-      }
-    ]
-  }
-];
-```
+For detailed information about the structure of validations, please refer to the UTValidation component documentation.
 
 ### Handling Errors
 
 Errors can be displayed below the input field using either the `error` prop or the `validations` prop.
-
-- **error**: A string that represents a general error message.
-- **validations**: An array of validation rules, where each rule is an object containing a `status` and a `text`.
-
-If both `error` and `validations` are provided, `validations` will take precedence, and its messages will be displayed.
-
-#### Example usage with `error`:
-
-```jsx
-<UTTextInput title="Username" placeholder="Enter your username" error="This username is already taken" />
-```
-
-#### Example usage with validations:
-
-```jsx
-const validations = [
-  {
-    items: [
-      {
-        status: 'success',
-        text: 'Must be at least 8 characters long.'
-      }
-    ]
-  },
-  {
-    items: [
-      {
-        status: 'error',
-        text: 'Must be at most 16 characters long.'
-      }
-    ]
-  },
-  {
-    title: 'Must meet at least one of the following conditions:',
-    status: 'error',
-    items: [
-      {
-        text: 'At least one lowercase letter.'
-      },
-      {
-        text: 'At least one uppercase letter.'
-      },
-      {
-        status: 'success',
-        text: 'At least one number.'
-      }
-    ]
-  }
-];
-
-<UTTextInput title="Email" placeholder="Enter your email" validations={validations} />;
-```
-
-## Usage
-
-```jsx
-<UTTextInput
-  title="Password"
-  placeholder="Enter your password"
-  type="password"
-  required
-  onChange={text => console.log(text)}
-  validations={[
-    {
-      title: 'Must meet at least two of the following conditions:',
-      items: [
-        {
-          text: 'At least one lowercase letter.'
-        },
-        {
-          text: 'At least one uppercase letter.'
-        },
-        {
-          status: 'success',
-          text: 'At least one number.'
-        }
-      ]
-    }
-  ]}
-  style={{
-    root: { padding: 5 },
-    container: { margin: 10 },
-    input: { borderColor: 'blue' },
-    action: { backgroundColor: 'green' }
-  }}
-/>
-```

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

@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
+import { bool, elementType, func, instanceOf, number, object, oneOfType, shape, string } from 'prop-types';
 import { View } from 'react-native';
 
 import { formatErrorToValidation } from '../../../UTValidation/utils';
+import { TITLE_VARIANTS } from '../../../../constants/inputs';
 import UTFieldLabel from '../../../UTFieldLabel';
 import UTLabel from '../../../UTLabel';
-import UTValidation from '../../../UTValidation';
+import UTValidation, { validationDataProptypes } from '../../../UTValidation';
 
-import { defaultProps, propTypes } from './proptypes';
-import { SIZES } from './constants';
 import styles from './styles';
 import TextInputField from './components/TextInputField';
 
@@ -20,14 +20,12 @@ const UTTextInput = ({
   helpText,
   id,
   inputRef,
-  inputSize,
-  title,
-  titleVariant,
+  inputSize = 'large',
   LeftIcon,
   maxLength,
-  maxRows,
+  maxRows = 1,
   onBlur,
-  onChange,
+  onChange = () => {},
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -37,15 +35,16 @@ const UTTextInput = ({
   returnKeyType,
   RightIcon,
   showCharacterCount,
-  style,
+  style = {},
   suffix,
+  title,
+  titleVariant = 'large',
   tooltip,
   type,
   validations,
-  value
+  value = null
 }) => {
   const titleColorTheme = readOnly ? 'gray' : 'dark';
-  const titleComponentVariant = titleVariant === SIZES.SMALL ? 'small' : 'body';
 
   const validationData = useMemo(
     () => validations || (error && formatErrorToValidation(error)),
@@ -55,7 +54,7 @@ const UTTextInput = ({
   return (
     <View style={[styles.container, style.root]}>
       {title && (
-        <UTFieldLabel colorTheme={titleColorTheme} required={required} variant={titleComponentVariant}>
+        <UTFieldLabel colorTheme={titleColorTheme} required={required} variant={TITLE_VARIANTS[titleVariant]}>
           {title}
         </UTFieldLabel>
       )}
@@ -97,7 +96,49 @@ const UTTextInput = ({
   );
 };
 
-UTTextInput.defaultProps = defaultProps;
+export const propTypes = {
+  action: shape({
+    action: func,
+    colorTheme: string,
+    icon: elementType,
+    text: string
+  }),
+  alwaysShowPlaceholder: bool,
+  blurOnSubmit: bool,
+  disabled: bool,
+  error: string,
+  helpText: string,
+  id: oneOfType([number, string]),
+  inputRef: oneOfType([func, instanceOf(Object)]),
+  inputSize: string,
+  LeftIcon: elementType,
+  maxLength: number,
+  maxRows: number,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  onSubmitEditing: func,
+  placeholder: string,
+  prefix: string,
+  readOnly: bool,
+  required: bool,
+  returnKeyType: string,
+  RightIcon: elementType,
+  showCharacterCount: bool,
+  style: shape({
+    container: object,
+    input: object,
+    root: object
+  }),
+  suffix: string,
+  title: string,
+  titleVariant: string,
+  tooltip: string,
+  type: string,
+  validations: validationDataProptypes,
+  value: string
+};
+
 UTTextInput.propTypes = propTypes;
 
 export default UTTextInput;

package/lib/components/UTValidation/README.md

@@ -18,10 +18,10 @@ The `validationData` prop is an array of objects, each representing a validation
 ### Structure of validationData
 
 - **title** (optional): A string that represents the title of the validation group.
-- **status** (required): A string indicating the status of the validation group. Possible values are `success`, `error`, and `default`.
+- **status** (optional): A string indicating the status of the validation group. Possible values are `success`, `error`, and `default`. If not provided, it defaults to `default`.
 - **items** (required): An array of objects, each representing an individual validation item.
   - **text** (required): A string containing the validation message.
-  - **status** (required): A string indicating the status of the validation item. Possible values are `success`, `error`, and `default`.
+  - **status** (optional): A string indicating the status of the validation item. Possible values are `success`, `error`, and `default`. If not provided, it defaults to `default`.
   - **withIcon** (optional): A boolean indicating whether to display an icon next to the validation message. Defaults to `true`.
 
 ### Example
@@ -32,24 +32,24 @@ const validationData = [
     items: [
       {
         status: 'success',
-        text: 'Debe tener como mínimo 8 caracteres.',
+        text: 'Must be at least 8 characters long.',
         withIcon: true // Optional, defaults to true
       }
     ]
   },
   {
-    title: 'Debe cumplir con al menos 2 de las siguientes condiciones:',
+    title: 'Must meet at least 2 of the following conditions:',
     status: 'error',
     items: [
       {
-        text: 'Al menos 1 letra minúscula.' // Defaults to "default" and "withIcon" to true
+        text: 'At least 1 lowercase letter.' // Defaults to "default" and "withIcon" to true
       },
       {
-        text: 'Al menos 1 letra mayúscula.' // Defaults to "default" and "withIcon" to true
+        text: 'At least 1 uppercase letter.' // Defaults to "default" and "withIcon" to true
       },
       {
         status: 'success',
-        text: 'Al menos 1 número.',
+        text: 'At least 1 number.',
         withIcon: false // Will not display an icon
       }
     ]
@@ -66,9 +66,3 @@ The `status` prop can be one of these values:
 - `default`
 
 If `status` is not provided, it defaults to `default`.
-
-## Usage
-
-```javascript
-<UTValidation validationData={validationData} />
-```

package/lib/components/UTValidation/constants.js

@@ -1,5 +1,3 @@
-import { arrayOf, shape, string } from 'prop-types';
-
 export const STATUSES = {
   success: 'success',
   error: 'error',
@@ -26,20 +24,3 @@ export const ICON_MAPPER = {
 export const STATUSES_WITH_ICON = [STATUSES.success, STATUSES.error];
 
 export const ICON_SIZE = 15;
-
-export const DEFAULT_PROPS = {
-  validationData: {}
-};
-
-export const validationDataProptypes = arrayOf(
-  shape({
-    items: arrayOf(
-      shape({
-        text: string,
-        status: string
-      })
-    ),
-    status: string,
-    title: string
-  })
-);

package/lib/components/UTValidation/index.js

@@ -1,26 +1,18 @@
 import React from 'react';
+import { arrayOf, bool, object, shape, string } from 'prop-types';
 import { isEmpty } from 'lodash';
 import { View } from 'react-native';
-import { object } from 'prop-types';
 
 import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 
-import {
-  DEFAULT_PROPS,
-  ICON_MAPPER,
-  ICON_SIZE,
-  STATUS_COLOR_MAPPER,
-  STATUSES_WITH_ICON,
-  STATUSES,
-  validationDataProptypes
-} from './constants';
+import { ICON_MAPPER, ICON_SIZE, STATUS_COLOR_MAPPER, STATUSES_WITH_ICON, STATUSES } from './constants';
 import { retrieveStyle } from './theme';
 import styles from './styles';
 import { generateItemKey, generateKey } from './utils';
 
-const UTValidation = ({ style, validationData }) => {
+const UTValidation = ({ style, validationData = [] }) => {
   const theme = useTheme();
 
   if (isEmpty(validationData)) return null;
@@ -63,7 +55,19 @@ const UTValidation = ({ style, validationData }) => {
   );
 };
 
-UTValidation.defaultProps = DEFAULT_PROPS;
+export const validationDataProptypes = arrayOf(
+  shape({
+    items: arrayOf(
+      shape({
+        text: string,
+        status: string,
+        withIcon: bool
+      })
+    ),
+    status: string,
+    title: string
+  })
+);
 
 UTValidation.propTypes = {
   style: object,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.28.3",
+  "version": "1.29.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [

package/lib/components/UTBaseInputField/components/IconAdornment/proptypes.js

@@ -1,20 +0,0 @@
-import { shape, string, elementType, bool, oneOfType } from 'prop-types';
-import { TextPropTypes } from 'deprecated-react-native-prop-types';
-
-export const propTypes = {
-  changeOnError: bool,
-  changeOnFocus: bool,
-  colorTheme: string,
-  error: oneOfType([bool, string]),
-  focused: bool,
-  Icon: elementType,
-  inputStyle: shape({
-    root: TextPropTypes.style
-  }),
-  shade: string
-};
-
-export const defaultProps = {
-  changeOnError: false,
-  changeOnFocus: false
-};

package/lib/components/UTBaseInputField/proptypes.js

@@ -1,50 +0,0 @@
-import { arrayOf, bool, func, number, object, oneOfType, shape, string } from 'prop-types';
-
-import { VARIANT, SIZES } from './constants';
-
-export const defaultProps = {
-  alwaysShowPlaceholder: false,
-  editable: true,
-  inputSize: SIZES.LARGE,
-  leftAdornments: [],
-  maxRows: 1,
-  onChange: () => {},
-  rightAdornments: [],
-  value: null,
-  variant: VARIANT.WHITE
-};
-
-export const propTypes = {
-  alwaysShowPlaceholder: bool,
-  blurOnSubmit: bool,
-  disabled: bool,
-  editable: bool,
-  error: oneOfType([bool, string]),
-  id: oneOfType([number, string]),
-  value: oneOfType([string, number]),
-  onChange: func,
-  inputSize: string,
-  leftAdornments: arrayOf(shape({ name: string.isRequired, props: shape({}) })),
-  maxLength: number,
-  maxRows: number,
-  onBlur: func,
-  onFocus: func,
-  onSubmitEditing: func,
-  placeholder: string,
-  readOnly: bool,
-  returnKeyType: string,
-  rightAdornments: arrayOf(
-    shape({
-      name: string.isRequired,
-      props: shape({})
-    })
-  ),
-  showCharacterCount: bool,
-  style: shape({
-    container: object,
-    input: object,
-    root: object
-  }),
-  type: string,
-  variant: string
-};

package/lib/components/UTTextArea/constants.js

@@ -1,3 +0,0 @@
-const DEFAULT_MAX_ROWS = 4;
-
-export const DEFAULT_PROPS = { maxRows: DEFAULT_MAX_ROWS };

package/lib/components/UTTextInput/versions/V1/constants.js

@@ -1,4 +0,0 @@
-export const SIZES = {
-  SMALL: 'small',
-  LARGE: 'large'
-};

package/lib/components/UTTextInput/versions/V1/proptypes.js

@@ -1,58 +0,0 @@
-import { bool, elementType, func, instanceOf, number, object, oneOfType, shape, string } from 'prop-types';
-
-import { validationDataProptypes } from '../../../UTValidation/constants';
-
-import { SIZES } from './constants';
-
-export const defaultProps = {
-  inputSize: SIZES.LARGE,
-  maxRows: 1,
-  onChange: () => {},
-  style: {},
-  titleVariant: SIZES.LARGE,
-  value: null
-};
-
-export const propTypes = {
-  action: shape({
-    action: func,
-    colorTheme: string,
-    icon: elementType,
-    text: string
-  }),
-  alwaysShowPlaceholder: bool,
-  blurOnSubmit: bool,
-  disabled: bool,
-  error: string,
-  helpText: string,
-  id: oneOfType([number, string]),
-  inputRef: oneOfType([func, instanceOf(Object)]),
-  inputSize: string,
-  keyboardType: string,
-  LeftIcon: elementType,
-  maxLength: number,
-  maxRows: number,
-  onBlur: func,
-  onChange: func,
-  onFocus: func,
-  onSubmitEditing: func,
-  placeholder: string,
-  prefix: string,
-  readOnly: bool,
-  required: bool,
-  returnKeyType: string,
-  RightIcon: elementType,
-  showCharacterCount: bool,
-  style: shape({
-    container: object,
-    input: object,
-    root: object
-  }),
-  suffix: string,
-  title: string,
-  titleVariant: string,
-  tooltip: string,
-  type: string,
-  validations: validationDataProptypes,
-  value: string
-};