@widergy/mobile-ui 1.14.0 → 1.14.1

package/lib/components/UTCheckBox/index.js

@@ -1,44 +1,70 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import { View, Pressable } from 'react-native';
 
 import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
-import UTLabel from '../UTLabel';
+import UTFieldLabel from '../UTFieldLabel';
 
 import { CHECKED_ICON, INDETERMINATE_ICON } from './constants';
 import { retrieveStyle } from './theme';
-import propTypes from './proptypes';
+import propTypes, { DEFAULT_PROPS } from './proptypes';
 
-const UTCheckBox = ({ checked, disabled, indeterminate, label, onPress, reversed, style }) => {
+const UTCheckBox = ({
+  checked,
+  disabled,
+  indeterminate,
+  label,
+  onPress,
+  required,
+  reversed,
+  spacing,
+  style
+}) => {
   const theme = useTheme();
-  const { containerStyles, iconContainerStyles, touchableStyles } = retrieveStyle({
-    checked,
-    disabled,
-    indeterminate,
-    reversed,
-    style,
-    theme
-  });
+  const [pressed, setPressed] = useState(false);
 
-  const combinedTouchableStyles = ({ pressed }) => [touchableStyles.root, pressed && touchableStyles.pressed];
+  const { containerStyles, iconContainerStyles, touchableStyles } = useMemo(
+    () =>
+      retrieveStyle({
+        checked,
+        disabled,
+        indeterminate,
+        reversed,
+        spacing,
+        style,
+        theme
+      }),
+    [checked, disabled, indeterminate, reversed, spacing, style, theme]
+  );
+
+  const combinedTouchableStyles = useMemo(
+    () => [touchableStyles.root, pressed && touchableStyles.pressed],
+    [pressed, touchableStyles]
+  );
 
-  const iconName = indeterminate ? INDETERMINATE_ICON : checked ? CHECKED_ICON : '';
+  const iconName = useMemo(
+    () => (indeterminate ? INDETERMINATE_ICON : checked ? CHECKED_ICON : ''),
+    [indeterminate, checked]
+  );
+
+  const handlePressIn = () => setPressed(true);
+  const handlePressOut = () => setPressed(false);
 
   return (
-    <View style={containerStyles}>
-      <Pressable disabled={disabled} onPress={onPress} style={combinedTouchableStyles}>
-        <View style={iconContainerStyles}>
-          <UTIcon color="light" name={iconName} size={16} />
+    <Pressable disabled={disabled} onPress={onPress} onPressIn={handlePressIn} onPressOut={handlePressOut}>
+      <View style={containerStyles}>
+        <View style={combinedTouchableStyles}>
+          <View style={iconContainerStyles}>
+            <UTIcon colorTheme="light" name={iconName} size={16} />
+          </View>
         </View>
-      </Pressable>
-      <UTLabel>{label}</UTLabel>
-    </View>
+        <UTFieldLabel required={required}>{label}</UTFieldLabel>
+      </View>
+    </Pressable>
   );
 };
 
-UTCheckBox.defaultProps = {
-  style: {}
-};
+UTCheckBox.defaultProps = DEFAULT_PROPS;
 
 UTCheckBox.propTypes = propTypes;
 

package/lib/components/UTCheckBox/proptypes.js

@@ -1,14 +1,9 @@
-import { bool, func, shape, string } from 'prop-types';
+import { bool, func, string } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-export const styleProptypes = shape({
-  root: ViewPropTypes.style,
-  icon: ViewPropTypes.style,
-  touchable: shape({
-    root: ViewPropTypes.style,
-    pressed: ViewPropTypes.style
-  })
-});
+export const DEFAULT_PROPS = {
+  style: {}
+};
 
 export default {
   checked: bool,
@@ -16,6 +11,8 @@ export default {
   indeterminate: bool,
   label: string,
   onPress: func,
+  required: bool,
   reversed: bool,
-  style: styleProptypes
+  spacing: string,
+  style: ViewPropTypes.style
 };

package/lib/components/UTCheckBox/theme.js

@@ -1,9 +1,12 @@
+import { SMALL } from './constants';
+
+const NORMAL_SPACING = 16;
+const SMALL_SPACING = 8;
+
 const baseCheckBoxTheme = theme => ({
   container: {
     alignItems: 'center',
-    columnGap: 16,
-    flexDirection: 'row',
-    justifyContent: 'flex-start'
+    flexDirection: 'row'
   },
   iconContainer: {
     borderColor: theme.Palette.gray['04'],
@@ -26,9 +29,10 @@ const baseCheckBoxTheme = theme => ({
   }
 });
 
-const conditionalContainerStyle = (reversed, disabled) => ({
+const conditionalContainerStyle = (disabled, reversed) => ({
   ...(reversed && {
-    flexDirection: 'row-reverse'
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between'
   }),
   ...(disabled && {
     opacity: 0.5
@@ -42,29 +46,36 @@ const conditionalIconContainerStyle = (checked, indeterminate, theme) => ({
   })
 });
 
-export const retrieveStyle = ({ checked, disabled, indeterminate, reversed, style = {}, theme }) => {
+const conditionalTouchableStyle = (reversed, spacing) => {
+  const spacingValue = spacing === SMALL ? SMALL_SPACING : NORMAL_SPACING;
+  return {
+    marginRight: spacingValue,
+    ...(reversed && {
+      marginLeft: spacingValue,
+      marginRight: 0
+    })
+  };
+};
+
+export const retrieveStyle = ({ checked, disabled, indeterminate, reversed, spacing, style, theme }) => {
   const baseTheme = baseCheckBoxTheme(theme);
 
   const containerStyles = {
     ...baseTheme.container,
-    ...conditionalContainerStyle(reversed, disabled),
-    ...style.root
+    ...conditionalContainerStyle(disabled, reversed),
+    ...style
   };
 
   const iconContainerStyles = {
     ...baseTheme.iconContainer,
-    ...conditionalIconContainerStyle(checked, indeterminate, theme),
-    ...style.icon
+    ...conditionalIconContainerStyle(checked, indeterminate, theme)
   };
 
   const touchableStyles = {
+    pressed: baseTheme.touchable.pressed,
     root: {
       ...baseTheme.touchable.root,
-      ...style.touchable?.root
-    },
-    pressed: {
-      ...baseTheme.touchable.pressed,
-      ...style.touchable?.pressed
+      ...conditionalTouchableStyle(reversed, spacing)
     }
   };
 

package/lib/components/UTCheckList/constants.js

@@ -0,0 +1 @@
+export const SMALL = 'small';

package/lib/components/UTCheckList/index.js

@@ -1,20 +1,21 @@
-import React, { useEffect, useCallback, useMemo, Fragment } from 'react';
+import React, { useEffect, useCallback, useMemo } from 'react';
 import { arrayOf, bool, func, shape, string } from 'prop-types';
 import { isEmpty } from '@widergy/web-utils/lib/array';
-import { isString } from 'lodash';
 import { View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import { styleProptypes as checboxStyleProptypes } from '../UTCheckBox/proptypes';
+import { formatErrorToValidation } from '../UTValidation/utils';
 import UTCheckBox from '../UTCheckBox';
-import UTLabel from '../UTLabel';
-import UTRequiredLabel from '../UTRequiredLabel';
+import UTFieldLabel from '../UTFieldLabel';
+import UTValidation from '../UTValidation';
 
-import { keyExtractor, isChecked } from './utils';
+import { keyExtractor, isChecked, convertIfIsString } from './utils';
 import styles from './styles';
+import { SMALL } from './constants';
 
 const UTCheckList = ({
   error,
+  horizontalSpacing,
   input,
   label,
   options,
@@ -22,17 +23,19 @@ const UTCheckList = ({
   reversed,
   selectAllLabel,
   showSelectAll,
-  style
+  style,
+  verticalSpacing
 }) => {
-  const convertIfIsString = value =>
-    isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;
+  const validationData = useMemo(() => error && formatErrorToValidation(error, { withIcon: false }), [error]);
 
   useEffect(() => {
-    const convertedValue = convertIfIsString(input.value);
-    if (JSON.stringify(convertedValue) !== JSON.stringify(input.value)) {
-      input.onChange(convertedValue);
+    if (input && input.value) {
+      const convertedValue = convertIfIsString(input.value);
+      if (JSON.stringify(convertedValue) !== JSON.stringify(input.value)) {
+        input.onChange(convertedValue);
+      }
     }
-  }, [input.value, input]);
+  }, [input]);
 
   const enabledOptions = useMemo(() => options.filter(option => !option.disabled), [options]);
 
@@ -49,36 +52,32 @@ const UTCheckList = ({
   const handleChange = useCallback(
     receivedValue => () => {
       const { onChange, value } = input;
-      const newValues = !value?.find?.(elem => elem === receivedValue)
+      const newValues = !value?.includes(receivedValue)
         ? [...(value || []), receivedValue]
-        : value?.filter(elem => elem !== receivedValue);
-      if (onChange) onChange(isEmpty(newValues) ? [] : newValues);
+        : value.filter(elem => elem !== receivedValue);
+      onChange(isEmpty(newValues) ? [] : newValues);
     },
     [input]
   );
 
-  const handleCheckAll = () => {
+  const handleCheckAll = useCallback(() => {
     if (!areAllSelected && options) {
       input.onChange(enabledOptions.map(item => item.value));
     } else {
       input.onChange([]);
     }
-  };
+  }, [areAllSelected, enabledOptions, input, options]);
 
   return (
-    <View style={[styles.container, style.root]}>
+    <View style={[styles.container, verticalSpacing === SMALL && styles.smallVerticalSpacing, style.root]}>
       <View style={[styles.headerContainer, style.header]}>
-        {label && <UTRequiredLabel required={required}>{label}</UTRequiredLabel>}
-        {error && (
-          <UTLabel colorTheme="error" variant="small">
-            {error}
-          </UTLabel>
-        )}
+        {label && <UTFieldLabel required={required}>{label}</UTFieldLabel>}
+        {validationData && <UTValidation validationData={validationData} />}
       </View>
       <View
         style={[
           styles.checkboxesContainer,
-          reversed && styles.reversedCheckBoxesContainer,
+          verticalSpacing === SMALL && styles.smallVerticalSpacing,
           style.checkboxesContainer
         ]}
       >
@@ -89,26 +88,22 @@ const UTCheckList = ({
             label={selectAllLabel}
             onPress={handleCheckAll}
             reversed={reversed}
+            spacing={horizontalSpacing}
             style={style.selectAll}
           />
         )}
-        {!!options?.length &&
-          options.map((item, index) => {
-            const { label: itemLabel, disabled, value } = item;
-
-            return (
-              <Fragment key={keyExtractor(item, index)}>
-                <UTCheckBox
-                  checked={isChecked(item, input.value)}
-                  disabled={disabled}
-                  label={itemLabel}
-                  onPress={handleChange(value)}
-                  reversed={reversed}
-                  style={style.item}
-                />
-              </Fragment>
-            );
-          })}
+        {options?.map((item, index) => (
+          <UTCheckBox
+            checked={isChecked(item, input.value)}
+            disabled={item.disabled}
+            key={keyExtractor(item, index)}
+            label={item.label}
+            onPress={handleChange(item.value)}
+            reversed={reversed}
+            spacing={horizontalSpacing}
+            style={style.item}
+          />
+        ))}
       </View>
     </View>
   );
@@ -121,11 +116,12 @@ UTCheckList.defaultProps = {
 
 UTCheckList.propTypes = {
   error: string,
-  label: string,
+  horizontalSpacing: string,
   input: shape({
     value: arrayOf(string),
     onChange: func
   }),
+  label: string,
   options: arrayOf(
     shape({
       checked: bool,
@@ -141,10 +137,11 @@ UTCheckList.propTypes = {
   style: shape({
     checkboxesContainer: ViewPropTypes.style,
     header: ViewPropTypes.style,
-    item: checboxStyleProptypes,
+    item: ViewPropTypes.style,
     root: ViewPropTypes.style,
     selectAll: ViewPropTypes.style
-  })
+  }),
+  verticalSpacing: string
 };
 
 export default UTCheckList;

package/lib/components/UTCheckList/styles.js

@@ -1,23 +1,20 @@
 import { StyleSheet } from 'react-native';
 
+const NORMAL_SPACING = 16;
+const SMALL_SPACING = 8;
+
 export default StyleSheet.create({
   checkboxesContainer: {
-    rowGap: 16
+    alignSelf: 'flex-start',
+    rowGap: NORMAL_SPACING
   },
   container: {
-    rowGap: 16,
-    flexGrow: 1
+    rowGap: NORMAL_SPACING
   },
   headerContainer: {
     rowGap: 8
   },
-  itemSeparator: {
-    height: 16
-  },
-  label: {
-    flexDirection: 'row'
-  },
-  reversedCheckBoxesContainer: {
-    alignItems: 'flex-end'
+  smallVerticalSpacing: {
+    rowGap: SMALL_SPACING
   }
 });

package/lib/components/UTCheckList/utils.js

@@ -1,4 +1,9 @@
+import { isString } from 'lodash';
+
 export const keyExtractor = (_, index) => `CB-${index}`;
 
 export const isChecked = (item, inputValue) =>
   !!inputValue?.find(elem => elem === item.value) || (item.disabled && item.checked);
+
+export const convertIfIsString = value =>
+  isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;

package/lib/components/{UTRequiredLabel → UTFieldLabel}/index.js

@@ -7,7 +7,7 @@ import UTLabel from '../UTLabel';
 import { REQUIRED_LABEL } from './constants';
 import styles from './styles';
 
-const UTRequiredLabel = ({ children, colorTheme, required, variant }) => {
+const UTFieldLabel = ({ children, colorTheme, required, variant }) => {
   return (
     <View style={styles.label}>
       <UTLabel colorTheme={colorTheme} variant={variant}>
@@ -22,10 +22,10 @@ const UTRequiredLabel = ({ children, colorTheme, required, variant }) => {
   );
 };
 
-UTRequiredLabel.propTypes = {
+UTFieldLabel.propTypes = {
   colorTheme: string,
   required: bool,
   variant: string
 };
 
-export default UTRequiredLabel;
+export default UTFieldLabel;

package/lib/components/UTIcon/README.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-`UTIcon` is an icon component that uses the Tabler Icons library. It allows for easy integration of vector icons in your application, providing various customization options such as color, size, and style.
+`UTIcon` is an icon component that uses the Tabler Icons library.
 
 ## UX/UI Icon Lists
 
@@ -13,13 +13,13 @@ For a comprehensive list of available icons and their design specifications, ref
 
 ## Props
 
-| Name  | Type   | Default | Description                                         |
-| ----- | ------ | ------- | --------------------------------------------------- |
-| color | string | 'dark'  | The icon color, must be from the theme palette.     |
-| name  | string |         | The name of the icon from the Tabler Icons library. |
-| shade | string |         | The shade of the color theme to use.                |
-| size  | number |         | The size of the icon.                               |
-| style | object |         | Custom styles to apply to the icon.                 |
+| Name       | Type   | Default | Description                                         |
+| ---------- | ------ | ------- | --------------------------------------------------- |
+| colorTheme | string | 'dark'  | The icon color, must be from the theme palette.     |
+| name       | string |         | The name of the icon from the Tabler Icons library. |
+| shade      | string |         | The shade of the color theme to use.                |
+| size       | number |         | The size of the icon.                               |
+| style      | object |         | Custom styles to apply to the icon.                 |
 
 ## Icon Names
 
@@ -41,7 +41,7 @@ Exceptions to these rules may exist.
 
 ## Color Themes
 
-The `color` prop must be one of these values:
+The `colorTheme` prop must be one of these values:
 
 - `accent`
 - `dark`
@@ -75,5 +75,5 @@ For all others: `shade05`
 ## Usage
 
 ```javascript
-<UTIcon color="primary" name="IconTruckDelivery" size={48} />
+<UTIcon colorTheme="primary" name="IconTruckDelivery" size={48} />
 ```

package/lib/components/UTIcon/index.js

@@ -5,25 +5,23 @@ import * as TablerIcons from '@tabler/icons-react-native';
 
 import { useTheme } from '../../theming';
 
-import { retrieveStyle } from './theme';
+import { retrieveColor } from './theme';
 
-const UTIcon = ({ color = 'dark', name, shade, size, style }) => {
+const UTIcon = ({ colorTheme = 'dark', name, shade, size, style }) => {
   const theme = useTheme();
 
   const IconComponent = TablerIcons[name];
   if (!IconComponent) return null;
 
-  const themeStyles = retrieveStyle({ color, theme, shade });
+  const themeColor = retrieveColor({ colorTheme, theme, shade });
   const filled = name.endsWith('Filled');
-  const iconColor = filled ? 'transparent' : themeStyles.color;
+  const iconColor = filled ? 'transparent' : themeColor;
 
-  return (
-    <IconComponent color={iconColor} size={size} style={[filled && { color: themeStyles.color }, style]} />
-  );
+  return <IconComponent color={iconColor} size={size} style={[filled && { color: themeColor }, style]} />;
 };
 
 UTIcon.propTypes = {
-  color: string,
+  colorTheme: string,
   name: string,
   shade: string,
   size: number,

package/lib/components/UTIcon/theme.js

@@ -7,12 +7,8 @@ const getDefaultColorShade = colorTheme =>
       ? SHADES.shade01
       : SHADES.shade05;
 
-const variantsColorTheme = (colorTheme, shade, theme) => {
+export const retrieveColor = ({ colorTheme, shade, theme }) => {
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.color];
   const colorShade = shade || getDefaultColorShade(colorTheme);
   return colorThemeDefinition[colorShade] || '#000';
 };
-
-export const retrieveStyle = ({ color: colorTheme, shade, theme }) => ({
-  color: variantsColorTheme(colorTheme, shade, theme)
-});

package/lib/components/UTSelect/index.js

@@ -1,14 +1,14 @@
 import React, { useState, useMemo } from 'react';
-import { View } from 'react-native';
 import { isEmpty } from '@widergy/web-utils/lib/array';
+import { View } from 'react-native';
 
-import UTTextInput from '../UTTextInput';
-import UTMenu from '../UTMenu';
 import Label from '../Label';
+import UTMenu from '../UTMenu';
+import UTTextInput from '../UTTextInput';
 
+import MultipleItem from './componentes/MultipleItem';
 import styles from './styles';
 import UTSelectTypes from './proptypes';
-import MultipleItem from './componentes/MultipleItem';
 
 const UTSelect = ({
   options = [],
@@ -89,6 +89,7 @@ const UTSelect = ({
           select
           controlledFocus={focused}
           disabled={disabled}
+          version="V0"
           RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
           {...UTTextInputProps}
         />

package/lib/components/UTTextArea/constants.js

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

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