@widergy/mobile-ui 1.12.5 → 1.12.7

package/lib/components/UTLabel/theme.js

@@ -15,9 +15,21 @@ const variantsColorTheme = (colorTheme, shade, theme) => {
   return colorThemeDefinition[colorShade] || '#000';
 };
 
-const getFontFamily = (theme, weight) => {
-  if (weight === WEIGHTS[DEFAULT_PROPS.weight] || IS_IOS) return theme.fonts.fontFamily;
-  return theme.fonts?.customVariants?.[weight]?.fontFamily;
+export const getFontFamily = (theme, weight) =>
+  weight === WEIGHTS[DEFAULT_PROPS.weight] || IS_IOS
+    ? theme.fonts.fontFamily
+    : theme.fonts?.customVariants?.[weight]?.fontFamily;
+
+export const getFontSize = variant => VARIANTS_SIZES[variant] || VARIANTS_SIZES[DEFAULT_PROPS.variant];
+
+export const getFontWeight = weight => (IS_IOS ? WEIGHTS[weight] || WEIGHTS[DEFAULT_PROPS.weight] : null);
+
+export const getFontStyles = ({ theme, variant, weight }) => {
+  const fontFamily = getFontFamily(theme, weight);
+  const fontSize = getFontSize(variant);
+  const fontWeight = getFontWeight(weight);
+
+  return { fontFamily, fontSize, fontWeight };
 };
 
 export const retrieveStyle = ({ colorTheme, field, shade, theme, variant, weight }) => ({
@@ -26,10 +38,13 @@ export const retrieveStyle = ({ colorTheme, field, shade, theme, variant, weight
     field?.configuration?.shade ?? shade,
     theme
   ),
-  fontFamily: getFontFamily(theme, field?.configuration?.weight ?? weight),
-  fontSize: VARIANTS_SIZES[field?.configuration?.variant ?? variant] || VARIANTS_SIZES[DEFAULT_PROPS.variant],
-  fontWeight: IS_IOS
-    ? WEIGHTS[field?.configuration?.weight ?? weight] || WEIGHTS[DEFAULT_PROPS.weight]
-    : null,
-  margin: 0
+  ...getFontStyles({
+    theme,
+    variant: field?.configuration?.variant ?? variant,
+    weight: field?.configuration?.weight ?? weight
+  }),
+  includeFontPadding: false,
+  margin: 0,
+  paddingVertical: 0,
+  textAlignVertical: 'center'
 });

package/lib/components/UTMenu/components/ListView/index.js

@@ -28,7 +28,7 @@ class ListView extends PureComponent {
 
   handleOnPress = item => {
     const { handleOptionPress, onPress } = this.props;
-    return handleOptionPress(item.action || (() => onPress(item)));
+    return handleOptionPress(item.action || (() => onPress(item)), item?.value);
   };
 
   renderItem = ({ item }) => {

package/lib/components/UTMenu/index.js

@@ -3,6 +3,7 @@ import { Dimensions, Keyboard, KeyboardAvoidingView, Modal, TouchableOpacity, Vi
 
 import useKeyboardHeight from '../../hooks/useKeyboardHeight';
 import UTTextInput from '../UTTextInput';
+import Surface from '../Surface';
 
 import MenuOption from './components/MenuOption';
 import ListView from './components/ListView';
@@ -101,15 +102,15 @@ const UTMenu = ({
     setTimeout(() => setIsOpen(true), 20);
     if (onOpen) onOpen();
   };
-  const closeMenu = () => {
+  const closeMenu = value => {
     setIsOpen(false);
     setQuery('');
-    if (onClose) onClose();
+    if (onClose) onClose(value);
   };
 
-  const handleOptionPress = action => {
+  const handleOptionPress = (action, value) => {
     action();
-    if (!isMultiple) closeMenu();
+    if (!isMultiple) closeMenu(value);
   };
 
   const focusSearchInput = () => withAutocomplete && searchTextInputRef.current?.focus();
@@ -140,14 +141,14 @@ const UTMenu = ({
         <TouchableOpacity onPress={closeMenu} style={styles.overlayTouchable}>
           <View style={styles.overlay} />
         </TouchableOpacity>
-        <View
+        <Surface
           style={[styles.menu, position, fullWidth && { width: anchorMeasure?.width }, propStyles?.menu]}
           ref={menuRef}
           onLayout={handleMenuLayout}
         >
           <KeyboardAvoidingView behavior="height">
             {withAutocomplete && (
-              <View style={styles.searchContainer}>
+              <View style={[styles.searchContainer, propStyles?.searchContainer]}>
                 <UTTextInput
                   InputRef={searchTextInputRef}
                   value={query}
@@ -177,7 +178,7 @@ const UTMenu = ({
               isMultiple={isMultiple}
             />
           </KeyboardAvoidingView>
-        </View>
+        </Surface>
       </Modal>
     </Fragment>
   );

package/lib/components/UTMenu/styles.js

@@ -7,7 +7,6 @@ export default StyleSheet.create({
     left: 0,
     backgroundColor: 'white',
     borderRadius: 8,
-    elevation: 5,
     paddingVertical: 4
   },
   overlay: {

package/lib/components/UTPasswordField/index.js

@@ -1,49 +1,16 @@
 import React from 'react';
-import { View } from 'react-native';
+import { string } from 'prop-types';
 
-import UTTextInput from '../UTTextInput';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
 
-import PasswordValidations from './components/PasswordValidations';
-import passwordFieldProptypes from './proptypes';
-
-const UTPasswordField = ({
-  style,
-  disabled,
-  input,
-  error,
-  disableCaptionLabel,
-  passwordValidations,
-  showValidations,
-  shouldShowError,
-  errorTextProps,
-  ...props
-}) => {
-  const { value, onChange } = input;
-
-  return (
-    <View>
-      <UTTextInput
-        {...props}
-        value={value}
-        onChange={onChange}
-        error={showValidations ? !!error : error}
-        errorTextProps={errorTextProps}
-        hiddenInput
-      />
-      {!!showValidations && !!passwordValidations && (
-        <PasswordValidations
-          disabled={disabled}
-          value={value}
-          style={style}
-          error={error}
-          passwordValidations={passwordValidations}
-          shouldShowError={shouldShowError}
-        />
-      )}
-    </View>
-  );
+const UTPasswordField = ({ version = 'V0', ...props }) => {
+  const Component = { V0, V1 }[version];
+  return <Component {...props} />;
 };
 
-UTPasswordField.propTypes = passwordFieldProptypes;
+UTPasswordField.propTypes = {
+  version: string
+};
 
 export default UTPasswordField;

package/lib/components/UTPasswordField/{components → versions/V0/components}/PasswordValidations/components/ErrorMessage/index.js

@@ -3,9 +3,9 @@ import { bool, string, func } from 'prop-types';
 import { View } from 'react-native';
 import _ from 'lodash';
 
-import Label from '../../../../../Label';
-import Icon from '../../../../../Icon';
-import { useTheme } from '../../../../../../theming';
+import { useTheme } from '../../../../../../../../theming';
+import Icon from '../../../../../../../Icon';
+import Label from '../../../../../../../Label';
 
 import ownStyles from './styles';
 

package/lib/components/UTPasswordField/{components → versions/V0/components}/PasswordValidations/components/Validation/index.js

@@ -3,9 +3,9 @@ import { string, bool, element } from 'prop-types';
 import { View } from 'react-native';
 import _ from 'lodash';
 
-import Label from '../../../../../Label';
-import Icon from '../../../../../Icon';
-import { useTheme } from '../../../../../../theming';
+import { useTheme } from '../../../../../../../../theming';
+import Icon from '../../../../../../../Icon';
+import Label from '../../../../../../../Label';
 
 import ownStyles from './styles';
 

package/lib/components/UTPasswordField/{components → versions/V0/components}/PasswordValidations/index.js

@@ -4,7 +4,7 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
 import _ from 'lodash';
 
-import { useTheme } from '../../../../theming';
+import { useTheme } from '../../../../../../theming';
 
 import Validation from './components/Validation';
 import ErrorMessage from './components/ErrorMessage';

package/lib/components/UTPasswordField/{components → versions/V0/components}/PasswordValidations/styles.js

@@ -1,6 +1,5 @@
 import { StyleSheet } from 'react-native';
-
-import { moderateVerticalScale } from '../../../../utils/scaleUtils';
+import { moderateVerticalScale } from '../../../../../../utils/scaleUtils';
 
 export default StyleSheet.create({
   errorsContainer: {

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import UTTextInput from '../../../UTTextInput';
+
+import PasswordValidations from './components/PasswordValidations';
+import passwordFieldProptypes from './proptypes';
+
+const UTPasswordField = ({
+  style,
+  disabled,
+  input,
+  error,
+  disableCaptionLabel,
+  passwordValidations,
+  showValidations,
+  shouldShowError,
+  errorTextProps,
+  ...props
+}) => {
+  const { value, onChange } = input;
+
+  return (
+    <View>
+      <UTTextInput
+        {...props}
+        value={value}
+        onChange={onChange}
+        error={showValidations ? !!error : error}
+        errorTextProps={errorTextProps}
+        hiddenInput
+      />
+      {!!showValidations && !!passwordValidations && (
+        <PasswordValidations
+          disabled={disabled}
+          value={value}
+          style={style}
+          error={error}
+          passwordValidations={passwordValidations}
+          shouldShowError={shouldShowError}
+        />
+      )}
+    </View>
+  );
+};
+
+UTPasswordField.propTypes = passwordFieldProptypes;
+
+export default UTPasswordField;

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

@@ -0,0 +1,23 @@
+# UTPasswordField
+
+## Description
+
+`UTPasswordField` is a component that provides a password input field with an optional toggle to show or hide the password. It builds on the `UTTextInput` component and adds functionality specific to password inputs.
+
+## Props
+
+`UTPasswordField` inherits all the props from `UTTextInput` and adds custom behavior for handling password visibility.
+
+| Name | Type | Default | Description                            |
+| ---- | ---- | ------- | -------------------------------------- |
+| ...  | ...  | ...     | Inherits all props from `UTTextInput`. |
+
+## Usage
+
+```javascript
+<UTPasswordField placeholder="Enter your password" />
+```
+
+## Notes
+
+For more detailed information on inherited props, refer to the documentation for `UTTextInput`.

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

@@ -0,0 +1,7 @@
+export const INPUT_TYPE = {
+  PASSWORD: 'password',
+  TEXT: 'text'
+};
+
+export const ICON_EYE = 'IconEye';
+export const ICON_EYE_OFF = 'IconEyeOff';

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

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+import propTypes from '../../../UTTextInput/versions/V1/proptypes';
+import UTTextInput from '../../../UTTextInput';
+
+import { ICON_EYE, ICON_EYE_OFF, INPUT_TYPE } from './constants';
+
+const UTPasswordField = props => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  const action = {
+    icon: isPasswordVisible ? ICON_EYE : ICON_EYE_OFF,
+    onPress: toggleVisibility
+  };
+
+  return (
+    <UTTextInput
+      action={action}
+      type={isPasswordVisible ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD}
+      version="V1"
+      {...props}
+    />
+  );
+};
+
+UTPasswordField.propTypes = propTypes;
+
+export default UTPasswordField;

package/lib/components/UTTextArea/README.md

@@ -0,0 +1,32 @@
+# UTTextArea
+
+## 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.
+
+## Props
+
+`UTTextArea` inherits all the props from `UTTextInput` and adds an additional prop specific to the number of rows.
+
+| Name    | Type   | Default | Description                                           |
+| ------- | ------ | ------- | ----------------------------------------------------- |
+| maxRows | number | 4       | The maximum number of rows the text area can display. |
+| ...     | ...    | ...     | Inherits all props from `UTTextInput`.                |
+
+## Usage
+
+### Basic Example
+
+```javascript
+<UTTextArea placeholder="Enter your text here..." />
+```
+
+### Example with Custom Rows
+
+```javascript
+<UTTextArea maxRows={6} placeholder="Enter a longer text here..." />
+```
+
+## Notes
+
+For more detailed information on inherited props, refer to the documentation for `UTTextInput`.

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

@@ -86,7 +86,7 @@ const BaseInput = forwardRef(
             select && disabled && { color: theme.fonts?.fontDisabledColor }
           ]}
         />
-        {(RightIcon || hiddenInput) && (
+        {RightIcon && (
           <Touchable
             borderless
             onPress={hiddenInput ? toggleShowInput : onRightIconPress}

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

@@ -0,0 +1,236 @@
+# UTTextInput
+
+Component used for displaying a text input field with various customization options.
+
+## Props
+
+| Name                  | Type        | Default   | Description                                                                                              |
+| --------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------- |
+| action                | object      |           | Action button configuration object.                                                                      |
+| alwaysShowPlaceholder | bool        | false     | Whether to always show the placeholder.                                                                  |
+| disabled              | bool        | false     | Disables the input field.                                                                                |
+| error                 | string      |           | Error message to be displayed.                                                                           |
+| helpText              | string      |           | Help text to be displayed below the input field.                                                         |
+| InputRef              | ref         |           | Reference to the input field.                                                                            |
+| inputSize             | string      | 'l'       | Size of the input field.                                                                                 |
+| label                 | string      |           | Label text for the input field.                                                                          |
+| labelVariant          | string      | 'l'       | Variant of the label.                                                                                    |
+| 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.                                                 |
+| 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.                                                      |
+| placeholder           | string      |           | Placeholder text for the input field.                                                                    |
+| prefix                | string      |           | Prefix text to be displayed inside the input field.                                                      |
+| 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.                                                          |
+| RightIcon             | elementType |           | Icon to be displayed on the right side of the input field.                                               |
+| style                 | 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      | ''        | Value of the input field.                                                                                |
+
+### action
+
+Configuration object for the action button.
+
+| 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.          |
+
+### labelVariant
+
+It must be one of these:
+
+- "s": small
+- "l": large
+
+### inputSize
+
+It must be one of these:
+
+- "s": small
+- "l": large
+
+### type
+
+It must be one of these:
+
+- "default"
+- "email"
+- "password"
+- "numeric"
+
+### Methods via `InputRef`
+
+| Name     | Description                          |
+| -------- | ------------------------------------ |
+| focus    | Focuses the input field.             |
+| blur     | Blurs the input field.               |
+| setValue | Sets the value of the input field.   |
+| clear    | Clears the value of the input field. |
+
+### style
+
+The `style` prop is an object that can contain the following keys to customize the appearance of the input field:
+
+- `root`: Style for the root of the component.
+- `container`: Style for the container of the input field.
+- `input`: Style for the input field itself.
+- `action`: Style for the action button.
+
+### Right Icon
+
+If a RightIcon is provided and an error occurs, the RightIcon will be replaced by an error icon.
+
+### 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 no neccesary 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.'
+      }
+    ]
+  }
+];
+```
+
+### 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 `rule` and a `message`.
+
+If both `error` and `validations` are provided, `validations` will take precedence, and its messages will be displayed.
+
+#### Example usage with `error`:
+
+```jsx
+<UTTextInput
+  label="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
+  label="Email"
+  placeholder="Enter your email"
+  validations={validations}
+/>
+
+```
+
+## Usage
+
+```jsx
+<UTTextInput
+  label="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' }
+  }}
+/>
+```