@widergy/mobile-ui 1.11.4 → 1.11.6

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

@@ -0,0 +1,202 @@
+import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { bool, elementType, func, number, string, shape } from 'prop-types';
+import { View, TextInput } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { themeType, withTheme } 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 { iconRenderer } from './utils';
+import { retrieveStyle } from './theme';
+
+const TextInputField = ({
+  action,
+  alwaysShowPlaceholder,
+  disabled,
+  error,
+  inputSize,
+  LeftIcon,
+  maxCount,
+  maxRows,
+  onBlur,
+  onChange,
+  onFocus,
+  placeholder,
+  prefix,
+  readOnly,
+  RightIcon,
+  style,
+  suffix,
+  theme,
+  tooltip,
+  type,
+  value
+}) => {
+  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 multiline = maxRows > 1;
+
+  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, placeholderColor } =
+    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 renderIcon = iconRenderer(error, inputStyle.color);
+
+  return (
+    <View style={containerStyle}>
+      <View style={inputRowStyle}>
+        {LeftIcon && renderIcon(LeftIcon)}
+        {prefix && <UTLabel colorTheme="gray">{prefix}</UTLabel>}
+        <TextInput
+          autoCapitalize={autoCapitalize}
+          autoCorrect={false}
+          editable={!disabled && !readOnly}
+          keyboardType={keyboardType}
+          maxLength={maxCount}
+          multiline={multiline}
+          numberOfLines={maxRows}
+          onChangeText={handleTextChange}
+          onEndEditing={handleBlur}
+          onFocus={handleFocus}
+          placeholder={!focused && !alwaysShowPlaceholder ? '' : placeholder}
+          placeholderTextColor={placeholderColor}
+          ref={textInputRef}
+          secureTextEntry={secureTextEntry}
+          style={inputStyle}
+          type={type}
+          value={focused || multiline ? internalValue : displayValue}
+        />
+        {suffix && (
+          <UTLabel colorTheme="gray" variant="small">
+            {suffix}
+          </UTLabel>
+        )}
+        {action && (
+          <UTButton
+            disabled={disabled}
+            style={actionStyle}
+            variant="text"
+            colorTheme={action.colorTheme}
+            Icon={action.icon}
+            onPress={action.onPress}
+          >
+            {action.text}
+          </UTButton>
+        )}
+        {error ? renderIcon(ERROR_ICON) : RightIcon && renderIcon(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>
+  );
+};
+
+TextInputField.propTypes = {
+  action: shape({ icon: elementType, action: func, colorTheme: string, text: string }),
+  alwaysShowPlaceholder: bool,
+  disabled: bool,
+  error: string,
+  inputSize: string,
+  LeftIcon: elementType,
+  maxCount: number,
+  maxRows: number,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  placeholder: string,
+  prefix: string,
+  readOnly: bool,
+  RightIcon: elementType,
+  style: shape({
+    container: ViewPropTypes.style,
+    input: ViewPropTypes.style,
+    root: ViewPropTypes.style
+  }),
+  suffix: string,
+  theme: themeType,
+  tooltip: string,
+  type: string,
+  value: string
+};
+
+export default withTheme(TextInputField);

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

@@ -0,0 +1,124 @@
+import { Platform } from 'react-native';
+
+import { SMALL } from '../../constants';
+
+const LINE_HEIGHT = 22;
+
+const baseTextInputTheme = theme => ({
+  action: {
+    root: {
+      paddingHorizontal: 0,
+      paddingVertical: 0
+    }
+  },
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    borderColor: theme.Palette.light['05'],
+    borderRadius: 4,
+    borderWidth: 1,
+    flex: 1,
+    flexDirection: 'column',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    rowGap: 16,
+    width: '100%'
+  },
+  input: {
+    color: theme.Palette.dark['05'],
+    flex: 1,
+    fontFamily: theme.fonts.fontFamily, // TODO! Change when integration of font sizes
+    fontSize: 16,
+    lineHeight: LINE_HEIGHT,
+    padding: 0,
+    zIndex: 4,
+    ...Platform.select({
+      ios: {
+        height: '100%',
+        lineHeight: LINE_HEIGHT + 4
+      }
+    })
+  },
+  inputRow: {
+    alignItems: 'center',
+    columnGap: 16,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  },
+  textLengthRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    width: '100%'
+  },
+  placeholder: {
+    color: theme.Palette.gray['02']
+  }
+});
+
+const conditionalContainerStyle = (focused, error, theme, readOnly, disabled, inputSize) => ({
+  ...(focused && {
+    borderColor: theme.Palette.accent['04'],
+    borderWidth: 2,
+    padding: -1
+  }),
+  ...(error && {
+    borderColor: theme.Palette.error['04']
+  }),
+  ...(readOnly && {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    paddingHorizontal: 0
+  }),
+  ...(disabled && {
+    backgroundColor: theme.Palette.light['03'],
+    borderColor: 'transparent'
+  }),
+  ...(inputSize === SMALL && {
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  })
+});
+
+const conditionalInputStyle = (maxRows, multiline) => ({
+  ...(multiline && {
+    height: maxRows * LINE_HEIGHT,
+    textAlignVertical: 'top'
+  })
+});
+
+export const retrieveStyle = ({
+  disabled,
+  error,
+  focused,
+  inputSize,
+  maxRows,
+  multiline,
+  readOnly,
+  style = {},
+  theme
+}) => {
+  const baseTheme = baseTextInputTheme(theme);
+
+  const containerStyle = {
+    ...baseTheme.container,
+    ...conditionalContainerStyle(focused, error, theme, readOnly, disabled, inputSize),
+    ...style.container
+  };
+
+  const inputStyle = {
+    ...baseTheme.input,
+    ...conditionalInputStyle(maxRows, multiline),
+    ...style.input
+  };
+
+  return {
+    actionStyle: { ...baseTheme.action, ...style.action },
+    inputStyle,
+    containerStyle,
+    inputRowStyle: baseTheme.inputRow,
+    textLengthRowStyle: baseTheme.textLengthRow,
+    placeholderColor: baseTheme.placeholder.color
+  };
+};

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

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

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

@@ -0,0 +1,8 @@
+export const DEFAULT_PROPS = {
+  maxRows: 1,
+  style: {}
+};
+
+export const REQUIRED_LABEL = ' *';
+
+export const SMALL = 's';

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import UTLabel from '../../../UTLabel';
+import UTValidation from '../../../UTValidation';
+
+import { DEFAULT_PROPS, REQUIRED_LABEL, SMALL } from './constants';
+import { formatErrorToValidation } from './utils';
+import propTypes from './proptypes';
+import styles from './styles';
+import TextInputField from './components/TextInputField';
+
+const UTTextInput = ({
+  action,
+  alwaysShowPlaceholder,
+  disabled,
+  error,
+  helpText,
+  inputSize,
+  label,
+  labelVariant,
+  LeftIcon,
+  maxCount,
+  maxRows,
+  onBlur,
+  onChange,
+  onFocus,
+  placeholder,
+  prefix,
+  readOnly,
+  required,
+  RightIcon,
+  style,
+  suffix,
+  tooltip,
+  type,
+  validations,
+  value
+}) => {
+  const labelColorTheme = error ? 'error' : readOnly ? 'gray' : 'dark';
+  const labelComponentVariant = labelVariant === SMALL ? 'small' : 'body';
+  const validationData = validations || formatErrorToValidation(error);
+
+  return (
+    <View style={[styles.container, style.root]}>
+      {label && (
+        <View style={styles.label}>
+          <UTLabel colorTheme={labelColorTheme} shade={error && '04'} variant={labelComponentVariant}>
+            {label}
+          </UTLabel>
+          {required && (
+            <UTLabel colorTheme="error" shade="04" variant={labelComponentVariant}>
+              {REQUIRED_LABEL}
+            </UTLabel>
+          )}
+        </View>
+      )}
+      <TextInputField
+        action={action}
+        alwaysShowPlaceholder={alwaysShowPlaceholder}
+        disabled={disabled}
+        error={error}
+        inputSize={inputSize}
+        LeftIcon={LeftIcon}
+        maxCount={maxCount}
+        maxRows={maxRows}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        placeholder={placeholder}
+        prefix={prefix}
+        readOnly={readOnly}
+        RightIcon={RightIcon}
+        style={style}
+        suffix={suffix}
+        tooltip={tooltip}
+        type={type}
+        value={value}
+      />
+      {helpText && (
+        <UTLabel colorTheme="gray" variant="small">
+          {helpText}
+        </UTLabel>
+      )}
+      {error && <UTValidation validationData={validationData} />}
+    </View>
+  );
+};
+
+UTTextInput.defaultProps = DEFAULT_PROPS;
+
+UTTextInput.propTypes = propTypes;
+
+export default UTTextInput;

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

@@ -0,0 +1,36 @@
+import { bool, elementType, func, number, shape, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { validationDataProptypes } from '../../../UTValidation/constants';
+
+export default {
+  action: shape({ icon: elementType, action: func, colorTheme: string, text: string }),
+  alwaysShowPlaceholder: bool,
+  disabled: bool,
+  error: string,
+  helpText: string,
+  inputSize: string,
+  label: string,
+  labelVariant: string,
+  LeftIcon: elementType,
+  maxCount: number,
+  maxRows: number,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  placeholder: string,
+  prefix: string,
+  readOnly: bool,
+  required: bool,
+  RightIcon: elementType,
+  style: shape({
+    container: ViewPropTypes.style,
+    input: ViewPropTypes.style,
+    root: ViewPropTypes.style
+  }),
+  suffix: string,
+  tooltip: string,
+  type: string,
+  validations: validationDataProptypes,
+  value: string
+};

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

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    rowGap: 8
+  },
+  label: {
+    flexDirection: 'row'
+  }
+});

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

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

package/lib/components/UTValidation/README.md

@@ -0,0 +1,56 @@
+# UTValidation
+
+### 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.
+
+### 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.
+
+#### 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.
+- 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.
+
+Here's an example of `validationData`:
+
+```javascript
+const validationData = [
+  {
+    items: [
+      {
+        status: 'success',
+        text: 'Debe tener como mínimo 8 caracteres.'
+      }
+    ]
+  },
+  {
+    title: 'Debe cumplir con al menos 1 de las siguientes condiciones:',
+    status: 'error',
+    items: [
+      {
+        status: 'default',
+        text: 'Al menos 1 letra minúscula.'
+      },
+      {
+        status: 'default',
+        text: 'Al menos 1 letra mayúscula.'
+      },
+      {
+        status: 'success',
+        text: 'Al menos 1 número.'
+      }
+    ]
+  }
+];
+```
+
+### Props
+
+| Name           | Description         | Default |
+| -------------- | ------------------- | ------- |
+| validationData | The data to display | {}      |

package/lib/components/UTValidation/constants.js

@@ -0,0 +1,39 @@
+import { arrayOf, shape, string } from 'prop-types';
+
+export const STATUSES = {
+  success: 'success',
+  error: 'error',
+  default: 'default'
+};
+
+export const STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'gray'
+};
+
+export const ICON_MAPPER = {
+  [STATUSES.success]: 'IconCheck',
+  [STATUSES.error]: 'IconX'
+};
+
+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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+import { View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { themeType, withTheme } from '../../theming';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+
+import {
+  DEFAULT_PROPS,
+  ICON_MAPPER,
+  ICON_SIZE,
+  STATUS_COLOR_MAPPER,
+  STATUSES_WITH_ICON,
+  validationDataProptypes
+} from './constants';
+import { retrieveStyle } from './theme';
+import styles from './styles';
+import { generateItemKey, generateKey } from './utils';
+
+const UTValidation = ({ theme, validationData, style }) => {
+  if (isEmpty(validationData)) return null;
+
+  const themeStyles = retrieveStyle({ theme });
+
+  const showIcon = status => STATUSES_WITH_ICON.includes(status);
+
+  return (
+    <View style={[style, styles.container]}>
+      {validationData.map(({ items, status, title }, index) => (
+        <View key={generateKey({ items, status, title }, index)} style={styles.validationContainer}>
+          {title && (
+            <UTLabel colorTheme={STATUS_COLOR_MAPPER[status]} variant="small">
+              {title}
+            </UTLabel>
+          )}
+          <View style={styles.itemsContainer}>
+            {items.map(({ text, status: itemStatus }, 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>
+                <UTLabel colorTheme={STATUS_COLOR_MAPPER[itemStatus]} variant="small">
+                  {text}
+                </UTLabel>
+              </View>
+            ))}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+UTValidation.defaultProps = DEFAULT_PROPS;
+
+UTValidation.propTypes = {
+  style: ViewPropTypes.style,
+  theme: themeType,
+  validationData: validationDataProptypes
+};
+
+export default withTheme(UTValidation);

package/lib/components/UTValidation/styles.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    rowGap: 16
+  },
+  iconContainer: {
+    alignItems: 'center',
+    borderRadius: 100,
+    height: 20,
+    justifyContent: 'center',
+    marginRight: 8,
+    width: 20
+  },
+  itemContainer: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  itemsContainer: {
+    rowGap: 8
+  },
+  validationContainer: {
+    rowGap: 12
+  }
+});

package/lib/components/UTValidation/theme.js

@@ -0,0 +1,17 @@
+import { STATUSES, STATUS_COLOR_MAPPER } from './constants';
+
+const variantsColorTheme = (colorTheme, theme) => theme.Palette[colorTheme];
+
+export const retrieveStyle = ({ theme }) => ({
+  icon: {
+    [STATUSES.success]: {
+      backgroundColor: variantsColorTheme(STATUS_COLOR_MAPPER[STATUSES.success], theme)['01']
+    },
+    [STATUSES.error]: {
+      backgroundColor: variantsColorTheme(STATUS_COLOR_MAPPER[STATUSES.error], theme)['01']
+    },
+    [STATUSES.default]: {
+      backgroundColor: variantsColorTheme(STATUS_COLOR_MAPPER[STATUSES.default], theme)['01']
+    }
+  }
+});