@widergy/mobile-ui 1.13.5 → 1.14.1

package/lib/components/UTTextArea/index.js

@@ -3,11 +3,11 @@ import React from 'react';
 import UTTextInput from '../UTTextInput';
 import propTypes from '../UTTextInput/versions/V1/proptypes';
 
-import { DEFAULT_MAX_ROWS } from './constants';
+import { DEFAULT_PROPS } from './constants';
 
-const UTTextArea = ({ maxRows = DEFAULT_MAX_ROWS, ...props }) => (
-  <UTTextInput maxRows={maxRows} version="V1" {...props} />
-);
+const UTTextArea = ({ maxRows, ...props }) => <UTTextInput maxRows={maxRows} version="V1" {...props} />;
+
+UTTextArea.defaultProps = DEFAULT_PROPS;
 
 UTTextArea.propTypes = propTypes;
 

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

@@ -97,7 +97,7 @@ const BaseInput = forwardRef(
           ]}
           id={props?.id ? `${props.id}` : undefined}
         />
-        {(RightIcon || hiddenInput) && (
+        {RightIcon && (
           <Touchable
             borderless
             onPress={hiddenInput ? toggleShowInput : onRightIconPress}

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

@@ -50,15 +50,15 @@ Configuration object for the action button.
 
 It must be one of these:
 
-- "s": small
-- "l": large
+- "small": small
+- "large": large
 
 ### inputSize
 
 It must be one of these:
 
-- "s": small
-- "l": large
+- "small": small
+- "large": large
 
 ### type
 
@@ -147,11 +147,7 @@ If both `error` and `validations` are provided, `validations` will take preceden
 #### Example usage with `error`:
 
 ```jsx
-<UTTextInput
-  label="Username"
-  placeholder="Enter your username"
-  error="This username is already taken"
-/>
+<UTTextInput label="Username" placeholder="Enter your username" error="This username is already taken" />
 ```
 
 #### Example usage with validations:
@@ -192,12 +188,7 @@ const validations = [
   }
 ];
 
-<UTTextInput
-  label="Email"
-  placeholder="Enter your email"
-  validations={validations}
-/>
-
+<UTTextInput label="Email" placeholder="Enter your email" validations={validations} />;
 ```
 
 ## Usage

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

@@ -1,205 +1,71 @@
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-  useLayoutEffect,
-  useImperativeHandle,
-  forwardRef
-} from 'react';
-import { bool, elementType, func, number, string, shape } from 'prop-types';
-import { View, TextInput } from 'react-native';
+import React from 'react';
+import { bool, elementType, func, number, shape, string } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import { useTheme } from '../../../../../../theming';
-import UTButton from '../../../../../UTButton';
-import UTIcon from '../../../../../UTIcon';
-import UTLabel from '../../../../../UTLabel';
-import UTTooltip from '../../../../../UTTooltip';
-
-import { ERROR_ICON, KEYBOARD_BY_TYPE, TYPES } from './constants';
-import { renderLeftIcon, renderRightIcon } from './utils';
-import { retrieveStyle } from './theme';
-
-const TextInputField = forwardRef(
-  (
-    {
-      action,
-      alwaysShowPlaceholder,
-      disabled,
-      error,
-      id,
-      inputSize,
-      LeftIcon,
-      maxCount,
-      maxRows,
-      onBlur,
-      onChange,
-      onFocus,
-      onSubmitEditing,
-      placeholder,
-      prefix,
-      readOnly,
-      returnKeyType,
-      RightIcon,
-      style,
-      suffix,
-      tooltip,
-      type,
-      value
-    },
-    ref
-  ) => {
-    const [displayValue, setDisplayValue] = useState(value);
-    const [focused, setFocused] = useState(false);
-    const [inputWidth, setInputWidth] = useState(null);
-    const [internalValue, setInternalValue] = useState(value);
-    const textInputRef = useRef(null);
-
-    const theme = useTheme();
-    const multiline = maxRows > 1;
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        focus: () => textInputRef.current?.focus(),
-        blur: () => textInputRef.current?.blur(),
-        setValue: text => textInputRef.current?.setNativeProps({ text }),
-        clear: () => textInputRef.current?.setNativeProps({ text: '' })
-      }),
-      []
-    );
-
-    const handleTextChange = useCallback(
-      text => {
-        setInternalValue(text);
-        onChange?.(text);
-      },
-      [onChange]
-    );
-
-    const handleFocus = useCallback(
-      event => {
-        setFocused(true);
-        if (!multiline) setDisplayValue(internalValue);
-        onFocus?.(event);
-      },
-      [onFocus, internalValue, multiline]
-    );
-
-    const handleBlur = useCallback(
-      event => {
-        const truncateText = text => {
-          if (!inputWidth || !text) return text;
-
-          const charWidth = 8;
-          const maxCharsPerLine = Math.floor(inputWidth / charWidth);
-          const maxLength = maxCharsPerLine;
-
-          return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
-        };
-
-        setFocused(false);
-        if (!multiline) setDisplayValue(truncateText(internalValue));
-        onBlur?.(event);
-      },
-      [inputWidth, internalValue, multiline, onBlur]
-    );
-
-    const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = retrieveStyle({
-      disabled,
-      error,
-      focused,
-      inputSize,
-      maxRows,
-      multiline,
-      readOnly,
-      style,
-      theme
-    });
-
-    useEffect(() => {
-      setInternalValue(value);
-      setDisplayValue(value);
-    }, [value]);
-
-    useLayoutEffect(() => {
-      if (textInputRef.current) {
-        textInputRef.current.measure((_x, _y, width) => {
-          setInputWidth(width);
-        });
-      }
-    }, [focused]);
-
-    const secureTextEntry = type === TYPES.PASSWORD;
-    const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
-    const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
-
-    const rightIcon = error ? ERROR_ICON : RightIcon;
-
-    return (
-      <View style={containerStyle}>
-        <View style={inputRowStyle}>
-          {LeftIcon && renderLeftIcon(inputStyle.root.color, LeftIcon)}
-          {prefix && <UTLabel colorTheme="gray">{prefix}</UTLabel>}
-          <TextInput
-            autoCapitalize={autoCapitalize}
-            autoCorrect={false}
-            editable={!disabled && !readOnly}
-            id={id ? `${id}` : undefined}
-            keyboardType={keyboardType}
-            maxLength={maxCount}
-            multiline={multiline}
-            numberOfLines={maxRows}
-            onChangeText={handleTextChange}
-            onEndEditing={handleBlur}
-            onFocus={handleFocus}
-            onSubmitEditing={onSubmitEditing}
-            placeholder={!focused && !alwaysShowPlaceholder ? '' : placeholder}
-            placeholderTextColor={inputStyle.placeholderTextColor}
-            ref={textInputRef}
-            returnKeyType={returnKeyType}
-            secureTextEntry={secureTextEntry}
-            selectionColor={inputStyle.selectionColor}
-            style={inputStyle.root}
-            type={type}
-            value={focused || multiline ? internalValue : displayValue}
-          />
-          {suffix && (
-            <UTLabel colorTheme="gray" weight="medium" variant="small">
-              {suffix}
-            </UTLabel>
-          )}
-          {action && (
-            <UTButton
-              disabled={disabled}
-              style={actionStyle}
-              variant="text"
-              colorTheme={action.colorTheme}
-              Icon={action.icon}
-              onPress={action.onPress}
-            >
-              {action.text}
-            </UTButton>
-          )}
-          {rightIcon && renderRightIcon(error, inputStyle.root.color, rightIcon)}
-          {!!tooltip && (
-            <UTTooltip content={<UTLabel>{tooltip}</UTLabel>}>
-              <UTIcon name="IconInfoCircle" color="gray" />
-            </UTTooltip>
-          )}
-        </View>
-        {maxCount && (
-          <View style={textLengthRowStyle}>
-            <UTLabel colorTheme="gray" variant="small">
-              {internalValue?.length || 0}/{maxCount}
-            </UTLabel>
-          </View>
-        )}
-      </View>
-    );
-  }
-);
+import UTBaseInputField from '../../../../../UTBaseInputField';
+import { COMPONENT_KEYS } from '../../../../../UTBaseInputField/constants';
+
+const TextInputField = ({
+  action,
+  alwaysShowPlaceholder,
+  disabled,
+  error,
+  InputRef,
+  inputSize,
+  LeftIcon,
+  maxCount,
+  maxRows,
+  onBlur,
+  onChange,
+  onFocus,
+  onSubmitEditing,
+  placeholder,
+  prefix,
+  readOnly,
+  returnKeyType,
+  RightIcon,
+  style,
+  suffix,
+  tooltip,
+  type,
+  value
+}) => {
+  const leftAdornments = [
+    { name: COMPONENT_KEYS.ICON, props: { Icon: LeftIcon } },
+    { name: COMPONENT_KEYS.PREFIX, props: { text: prefix } }
+  ];
+
+  const rightAdornments = [
+    { name: COMPONENT_KEYS.SUFFIX, props: { text: suffix } },
+    { name: COMPONENT_KEYS.ICON, props: { Icon: RightIcon, changeOnError: true } },
+    { name: COMPONENT_KEYS.ACTION, props: { action } },
+    { name: COMPONENT_KEYS.TOOLTIP, props: { tooltip } }
+  ];
+
+  return (
+    <UTBaseInputField
+      alwaysShowPlaceholder={alwaysShowPlaceholder}
+      disabled={disabled}
+      error={error}
+      inputSize={inputSize}
+      leftAdornments={leftAdornments}
+      maxCount={maxCount}
+      maxRows={maxRows}
+      onBlur={onBlur}
+      onChange={onChange}
+      onFocus={onFocus}
+      onSubmitEditing={onSubmitEditing}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      ref={InputRef}
+      returnKeyType={returnKeyType}
+      rightAdornments={rightAdornments}
+      style={style}
+      type={type}
+      value={value}
+    />
+  );
+};
 
 TextInputField.displayName = 'TextInputField';
 
@@ -208,7 +74,7 @@ TextInputField.propTypes = {
   alwaysShowPlaceholder: bool,
   disabled: bool,
   error: string,
-  id: string,
+  InputRef: func,
   inputSize: string,
   LeftIcon: elementType,
   maxCount: number,

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

@@ -3,4 +3,4 @@ export const DEFAULT_PROPS = {
   style: {}
 };
 
-export const SMALL = 's';
+export const SMALL = 'small';

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { View } from 'react-native';
 
+import { formatErrorToValidation } from '../../../UTValidation/utils';
 import UTLabel from '../../../UTLabel';
-import UTRequiredLabel from '../../../UTRequiredLabel';
+import UTFieldLabel from '../../../UTFieldLabel';
 import UTValidation from '../../../UTValidation';
 
 import { DEFAULT_PROPS, SMALL } from './constants';
-import { formatErrorToValidation } from './utils';
 import propTypes from './proptypes';
 import styles from './styles';
 import TextInputField from './components/TextInputField';
@@ -48,15 +48,16 @@ const UTTextInput = ({
   return (
     <View style={[styles.container, style.root]}>
       {label && (
-        <UTRequiredLabel colorTheme={labelColorTheme} required={required} variant={labelComponentVariant}>
+        <UTFieldLabel colorTheme={labelColorTheme} required={required} variant={labelComponentVariant}>
           {label}
-        </UTRequiredLabel>
+        </UTFieldLabel>
       )}
       <TextInputField
         action={action}
         alwaysShowPlaceholder={alwaysShowPlaceholder}
         disabled={disabled}
         error={error}
+        InputRef={InputRef}
         inputSize={inputSize}
         LeftIcon={LeftIcon}
         maxCount={maxCount}
@@ -68,7 +69,6 @@ const UTTextInput = ({
         placeholder={placeholder}
         prefix={prefix}
         readOnly={readOnly}
-        ref={InputRef}
         returnKeyType={returnKeyType}
         RightIcon={RightIcon}
         style={style}

package/lib/components/UTValidation/README.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-`UTValidation` is a component designed to display input validation messages. The statuses of the messages can be information, error, or success, helping users understand the current state of their input.
+`UTValidation` is a component designed to display input validation messages. The statuses of the messages can be information, error, or success, helping users understand the current state of their input. The component also supports optional icons for each validation item.
 
 ## Props
 
@@ -13,7 +13,7 @@
 
 ## Validation Data
 
-The `validationData` prop is an array of objects, each representing a validation message or group of messages. Each object can optionally have a `title` and must have a `status` and an `items` array. The `items` array contains objects, each with `text` and `status` properties.
+The `validationData` prop is an array of objects, each representing a validation message or group of messages. Each object can optionally have a `title` and must have a `status` and an `items` array. The `items` array contains objects, each with `text`, `status`, and an optional `withIcon` property.
 
 ### Structure of validationData
 
@@ -22,6 +22,7 @@ The `validationData` prop is an array of objects, each representing a validation
 - **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`.
+  - **withIcon** (optional): A boolean indicating whether to display an icon next to the validation message. Defaults to `true`.
 
 ### Example
 
@@ -31,7 +32,8 @@ const validationData = [
     items: [
       {
         status: 'success',
-        text: 'Debe tener como mínimo 8 caracteres.'
+        text: 'Debe tener como mínimo 8 caracteres.',
+        withIcon: true // Optional, defaults to true
       }
     ]
   },
@@ -40,14 +42,15 @@ const validationData = [
     status: 'error',
     items: [
       {
-        text: 'Al menos 1 letra minúscula.' // Defaults to "default"
+        text: 'Al menos 1 letra minúscula.' // Defaults to "default" and "withIcon" to true
       },
       {
-        text: 'Al menos 1 letra mayúscula.' // Defaults to "default"
+        text: 'Al menos 1 letra mayúscula.' // Defaults to "default" and "withIcon" to true
       },
       {
         status: 'success',
-        text: 'Al menos 1 número.'
+        text: 'Al menos 1 número.',
+        withIcon: false // Will not display an icon
       }
     ]
   }

package/lib/components/UTValidation/index.js

@@ -39,16 +39,18 @@ const UTValidation = ({ style, validationData }) => {
             </UTLabel>
           )}
           <View style={styles.itemsContainer}>
-            {items.map(({ text, status: itemStatus = STATUSES.default }, itemIndex) => (
+            {items.map(({ text, status: itemStatus = STATUSES.default, withIcon = true }, itemIndex) => (
               <View
                 key={generateItemKey({ text, status: itemStatus }, itemIndex)}
                 style={styles.itemContainer}
               >
-                <View style={[styles.iconContainer, themeStyles.icon[itemStatus]]}>
-                  {showIcon(itemStatus) && (
-                    <UTIcon color={itemStatus} name={ICON_MAPPER[itemStatus]} size={ICON_SIZE} />
-                  )}
-                </View>
+                {withIcon && (
+                  <View style={[styles.iconContainer, themeStyles.icon[itemStatus]]}>
+                    {showIcon(itemStatus) && (
+                      <UTIcon colorTheme={itemStatus} name={ICON_MAPPER[itemStatus]} size={ICON_SIZE} />
+                    )}
+                  </View>
+                )}
                 <UTLabel colorTheme={STATUS_COLOR_MAPPER[itemStatus]} variant="small">
                   {text}
                 </UTLabel>

package/lib/components/UTValidation/utils.js

@@ -6,3 +6,7 @@ export const generateKey = (data, index) => {
 };
 
 export const generateItemKey = (item, index) => `${index}-${item.status}-${item.text}`;
+
+export const formatErrorToValidation = (error, options) => [
+  { items: [{ text: error, status: 'error', withIcon: options?.withIcon }] }
+];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.13.5",
+  "version": "1.14.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -45,8 +45,9 @@
     "react-native-collapsible": "^1.6.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
-    "react-native-safe-area-context": "^4.5.0",
-    "react-native-pager-view": "^6.2.1"
+    "react-native-pager-view": "^6.2.1",
+    "react-native-svg": "^13.13.0",
+    "react-native-safe-area-context": "^4.5.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",

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

@@ -1,12 +0,0 @@
-export const TYPES = {
-  EMAIL: 'email',
-  NUMERIC: 'numeric',
-  PASSWORD: 'password'
-};
-
-export const KEYBOARD_BY_TYPE = {
-  [TYPES.EMAIL]: 'email-address',
-  [TYPES.NUMERIC]: 'numeric'
-};
-
-export const ERROR_ICON = 'IconInfoCircle';

package/lib/components/UTTextInput/versions/V1/components/TextInputField/utils.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-import UTIcon from '../../../../../UTIcon';
-
-const isUTIcon = icon => typeof icon === 'string';
-
-const getIconColorProps = error => (error ? { color: 'error', shade: '04' } : { color: 'gray' });
-
-export const renderLeftIcon = (themeColor, Icon) =>
-  isUTIcon(Icon) ? <UTIcon name={Icon} color="gray" /> : <Icon fill={themeColor} />;
-
-export const renderRightIcon = (error, themeColor, Icon) =>
-  isUTIcon(Icon) ? <UTIcon name={Icon} {...getIconColorProps(error)} /> : <Icon fill={themeColor} />;

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

@@ -1 +0,0 @@
-export const formatErrorToValidation = error => [{ items: [{ text: error, status: 'error' }] }];