@widergy/mobile-ui 1.14.0 → 1.14.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.14.2](https://github.com/widergy/mobile-ui/compare/v1.14.1...v1.14.2) (2024-07-22)
+
+
+### Bug Fixes
+
+* update prop ([#316](https://github.com/widergy/mobile-ui/issues/316)) ([4128c3b](https://github.com/widergy/mobile-ui/commit/4128c3b884df4292edae4b6f9229dc36d2fb85d6))
+
+## [1.14.1](https://github.com/widergy/mobile-ui/compare/v1.14.0...v1.14.1) (2024-07-19)
+
+
+### Bug Fixes
+
+* components fixes and utbaseinputfield ([#314](https://github.com/widergy/mobile-ui/issues/314)) ([02378b1](https://github.com/widergy/mobile-ui/commit/02378b1e71edecb4f6dddcad2872d65dab95fe31))
+
 # [1.14.0](https://github.com/widergy/mobile-ui/compare/v1.13.5...v1.14.0) (2024-07-17)
 
 

package/lib/components/Surface/propTypes.js

@@ -1,7 +1,8 @@
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { number } from 'prop-types';
+import { number, string } from 'prop-types';
 
 export default {
-  elevation: number.isRequired,
+  elevation: number,
+  position: string,
   style: ViewPropTypes.style
 };

package/lib/components/UTBaseInputField/README.md

@@ -0,0 +1,179 @@
+# UTBaseInputField
+
+## Description
+
+`UTBaseInputField` is a flexible and customizable input field component that supports various input types, adornments, and styles. It can be used to create text inputs with additional functionality such as icons, prefixes, suffixes, and action buttons.
+
+## Props
+
+| Name                  | Type   | Default | Description                                               |
+| --------------------- | ------ | ------- | --------------------------------------------------------- |
+| alwaysShowPlaceholder | bool   |         | Whether to always show the placeholder text.              |
+| disabled              | bool   |         | Whether the input field is disabled.                      |
+| error                 | string |         | Error message to display.                                 |
+| inputSize             | string |         | Size of the input field.                                  |
+| leftAdornments        | array  |         | 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.                   |
+| onChange              | func   |         | Callback function to handle change 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       | array  |         | Elements to display on the right side of the input field. |
+| style                 | object |         | Custom styles to apply to the component.                  |
+| type                  | string |         | Type of the input field (e.g., email, numeric, password). |
+| value                 | string |         | Value of the input field.                                 |
+
+## Input Types
+
+The `type` prop can be one of these values:
+
+- `email`
+- `numeric`
+- `password`
+
+## Adornments
+
+The `leftAdornments` and `rightAdornments` props are arrays of objects representing elements to be displayed on the left and right sides of the input field, respectively. Each object must have a `name` and `props` to be passed to the component.
+
+### Example
+
+```javascript
+const leftAdornments = [
+  {
+    name: 'Prefix',
+    props: { text: 'Prefix Text' }
+  }
+];
+
+const rightAdornments = [
+  {
+    name: 'Suffix',
+    props: { text: 'Suffix Text' }
+  },
+  {
+    name: 'Icon',
+    props: { Icon: 'IconName', changeOnError: true }
+  }
+];
+
+const inputProps = {
+  leftAdornments,
+  placeholder: 'Enter text',
+  rightAdornments
+};
+
+<UTBaseInputField {...inputProps} />;
+```
+
+### Adornment Components
+
+`UTBaseInputField` supports several adornments that can be placed on the left or right side of the input field. These adornments enhance the input field with additional functionality and visual elements. Below are the details of each adornment, including the props they expect.
+
+#### PrefixAdornment
+
+Displays a prefix text before the input field.
+
+- **Props passed to PrefixAdornment:**
+  - `text` (string): The text to display as a prefix.
+
+**Example Usage:**
+
+```javascript
+<UTBaseInputField leftAdornments={[{ name: 'Prefix', props: { text: 'https://' } }]} />
+```
+
+#### SuffixAdornment
+
+Displays a suffix text after the input field.
+
+- **Props passed to PrefixAdornment:**
+  - `text` (string): The text to display as a suffix.
+
+**Example Usage:**
+
+```javascript
+<UTBaseInputField rightAdornments={[{ name: 'Suffix', props: { text: '.com' } }]} />
+```
+
+#### IconAdornment
+
+Displays an icon, with an optional change on error.
+
+- **Props passed to IconAdornment:**
+  - `Icon` (elementType): The icon to display.
+  - `error` (string): The error message (received from UTBaseInputField if an error occurs).
+  - `inputStyle` (object): The style of the input field (received from UTBaseInputField).
+  - `changeOnError` (bool): Whether to change the icon on error (default is false).
+
+**Example Usage:**
+
+```javascript
+<UTBaseInputField rightAdornments={[{ name: 'Icon', props: { Icon: 'search', changeOnError: true } }]} />
+```
+
+#### ActionAdornment
+
+Displays an action button.
+
+- **Props passed to ActionAdornment:**
+  - `action` (object): The action object containing:
+    - `colorTheme` (string): The color theme of the button.
+    - `icon` (func): The icon to display in the button.
+    - `onPress` (func): The function to call when the button is pressed.
+    - `text` (string): The text to display in the button.
+  - `disabled` (bool): Whether the action button is disabled (received from `UTBaseInputField`).
+  - `actionStyle` (object): The style of the action button (received from `UTBaseInputField`).
+
+**Example Usage:**
+
+```javascript
+<UTBaseInputField
+  rightAdornments={[{ name: 'Action', props: { action: { text: 'Go', onPress: handlePress } } }]}
+/>
+```
+
+#### TooltipAdornment
+
+Displays a tooltip with an icon.
+
+- **Props passed to TooltipAdornment:**
+  - `tooltip` (string): The text to display in the tooltip.
+
+**Example Usage:**
+
+```javascript
+<UTBaseInputField rightAdornments={[{ name: 'Tooltip', props: { tooltip: 'Tooltip Text' } }]} />
+```
+
+### Example Usages:
+
+```javascript
+// Example of PrefixAdornment usage
+<UTBaseInputField
+  leftAdornments={[{ name: 'Prefix', props: { text: 'Prefix Text' } }]}
+/>
+
+// Example of SuffixAdornment usage
+<UTBaseInputField
+  rightAdornments={[{ name: 'Suffix', props: { text: 'Suffix Text' } }]}
+/>
+
+// Example of IconAdornment usage
+<UTBaseInputField
+  rightAdornments={[{ name: 'Icon', props: { Icon: 'IconActivity', changeOnError: true } }]}
+/>
+
+// Example of ActionAdornment usage
+<UTBaseInputField
+  rightAdornments={[{ name: 'Action', props: { action: { text: 'Go', onPress: handlePress } } }]}
+/>
+
+// Example of TooltipAdornment usage
+<UTBaseInputField
+  rightAdornments={[{ name: 'Tooltip', props: { tooltip: 'Tooltip Text' } }]}
+/>
+```

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { string, bool, shape, func } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import UTButton from '../../../UTButton';
+
+const ActionAdornment = ({ action, disabled, actionStyle }) => {
+  if (!action) return null;
+
+  return (
+    <UTButton
+      colorTheme={action.colorTheme}
+      disabled={disabled}
+      Icon={action.icon}
+      onPress={action.onPress}
+      style={actionStyle}
+      variant="text"
+    >
+      {action.text}
+    </UTButton>
+  );
+};
+
+ActionAdornment.propTypes = {
+  action: shape({
+    colorTheme: string,
+    icon: func,
+    onPress: func,
+    text: string
+  }),
+  actionStyle: ViewPropTypes.style,
+  disabled: bool
+};
+
+ActionAdornment.defaultProps = {
+  action: null,
+  actionStyle: {},
+  disabled: false
+};
+
+export default ActionAdornment;

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

@@ -0,0 +1 @@
+export const ERROR_ICON = 'IconInfoCircle';

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { shape, string, elementType, bool } from 'prop-types';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
+
+import { isUTIcon } from '../../../UTIcon/utils';
+import UTIcon from '../../../UTIcon';
+
+import { ERROR_ICON } from './constants';
+import { getIconColorProps } from './utils';
+
+const IconAdornment = ({ Icon, error, inputStyle, changeOnError = false }) => {
+  const IconToRender = error && changeOnError ? ERROR_ICON : Icon;
+
+  if (!IconToRender) return null;
+
+  return isUTIcon(IconToRender) ? (
+    <UTIcon name={IconToRender} {...getIconColorProps(error, changeOnError)} />
+  ) : (
+    <IconToRender fill={inputStyle.root.color} />
+  );
+};
+
+IconAdornment.propTypes = {
+  error: string,
+  Icon: elementType,
+  inputStyle: shape({
+    root: TextPropTypes.style
+  }),
+  changeOnError: bool
+};
+
+export default IconAdornment;

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

@@ -0,0 +1,2 @@
+export const getIconColorProps = (error, changeOnError) =>
+  changeOnError && error ? { colorTheme: 'error', shade: '04' } : { colorTheme: 'gray' };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { string } from 'prop-types';
+
+import UTLabel from '../../../UTLabel';
+
+const PrefixAdornment = ({ text }) => (
+  <UTLabel colorTheme="gray" variant="small" weight="medium">
+    {text}
+  </UTLabel>
+);
+
+PrefixAdornment.propTypes = {
+  text: string
+};
+
+export default PrefixAdornment;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { string } from 'prop-types';
+
+import UTLabel from '../../../UTLabel';
+
+const SuffixAdornment = ({ text }) => <UTLabel colorTheme="gray">{text}</UTLabel>;
+
+SuffixAdornment.propTypes = {
+  text: string
+};
+
+export default SuffixAdornment;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+
+import UTTooltip from '../../../UTTooltip';
+import UTIcon from '../../../UTIcon';
+import UTLabel from '../../../UTLabel';
+
+const TooltipAdornment = ({ tooltip }) =>
+  tooltip ? (
+    <UTTooltip content={<UTLabel>{tooltip}</UTLabel>}>
+      <UTIcon name="IconInfoCircle" colorTheme="gray" />
+    </UTTooltip>
+  ) : undefined;
+
+TooltipAdornment.propTypes = {
+  tooltip: string
+};
+
+export default TooltipAdornment;

package/lib/components/UTBaseInputField/constants.js

@@ -0,0 +1,34 @@
+import ActionAdornment from './components/ActionAdornment';
+import IconAdornment from './components/IconAdornment';
+import PrefixAdornment from './components/PrefixAdornment';
+import SuffixAdornment from './components/SuffixAdornment';
+import TooltipAdornment from './components/TooltipAdornment';
+
+export const TYPES = {
+  EMAIL: 'email',
+  NUMERIC: 'numeric',
+  PASSWORD: 'password'
+};
+
+export const KEYBOARD_BY_TYPE = {
+  [TYPES.EMAIL]: 'email-address',
+  [TYPES.NUMERIC]: 'numeric'
+};
+
+export const COMPONENT_KEYS = {
+  ACTION: 'Action',
+  ICON: 'Icon',
+  PREFIX: 'Prefix',
+  SUFFIX: 'Suffix',
+  TOOLTIP: 'Tooltip'
+};
+
+export const SMALL = 'small';
+
+export const COMPONENTS_MAPPER = {
+  [COMPONENT_KEYS.ACTION]: ActionAdornment,
+  [COMPONENT_KEYS.ICON]: IconAdornment,
+  [COMPONENT_KEYS.PREFIX]: PrefixAdornment,
+  [COMPONENT_KEYS.SUFFIX]: SuffixAdornment,
+  [COMPONENT_KEYS.TOOLTIP]: TooltipAdornment
+};

package/lib/components/UTBaseInputField/index.js

@@ -0,0 +1,191 @@
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { bool, func, number, string, arrayOf, shape } from 'prop-types';
+import { View, TextInput } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { useTheme } from '../../theming';
+import UTLabel from '../UTLabel';
+
+import { KEYBOARD_BY_TYPE, TYPES, COMPONENTS_MAPPER } from './constants';
+import { retrieveStyle } from './theme';
+
+const UTBaseInputField = forwardRef(
+  (
+    {
+      alwaysShowPlaceholder,
+      disabled,
+      error,
+      inputSize,
+      leftAdornments,
+      maxCount,
+      maxRows,
+      onBlur,
+      onChange,
+      onFocus,
+      onSubmitEditing,
+      placeholder,
+      readOnly,
+      returnKeyType,
+      rightAdornments,
+      style,
+      type,
+      value
+    },
+    ref
+  ) => {
+    const [displayValue, setDisplayValue] = useState(value);
+    const [focused, setFocused] = useState(false);
+    const [inputWidth, setInputWidth] = useState(null);
+
+    const theme = useTheme();
+    const multiline = maxRows > 1;
+
+    const handleFocus = useCallback(
+      event => {
+        setFocused(true);
+        if (!multiline) setDisplayValue(value);
+        onFocus?.(event);
+      },
+      [onFocus, value, multiline]
+    );
+
+    const truncateText = useCallback(
+      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;
+      },
+      [inputWidth]
+    );
+
+    const handleBlur = useCallback(
+      event => {
+        setFocused(false);
+        if (!multiline) setDisplayValue(truncateText(value));
+        onBlur?.(event);
+      },
+      [truncateText, value, multiline, onBlur]
+    );
+
+    const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = retrieveStyle({
+      disabled,
+      error,
+      focused,
+      inputSize,
+      maxRows,
+      multiline,
+      readOnly,
+      style,
+      theme
+    });
+
+    useEffect(() => {
+      setDisplayValue(value);
+    }, [value]);
+
+    useLayoutEffect(() => {
+      if (ref?.current) {
+        ref.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 renderElement = useCallback(element => {
+      const Component = COMPONENTS_MAPPER[element.name];
+      return Component ? (
+        <Component
+          actionStyle={actionStyle}
+          disabled={disabled}
+          error={error}
+          inputStyle={inputStyle}
+          key={element.name}
+          {...element.props}
+        />
+      ) : null;
+    }, []);
+
+    return (
+      <View style={containerStyle}>
+        <View style={inputRowStyle}>
+          {leftAdornments.map(renderElement)}
+          <TextInput
+            autoCapitalize={autoCapitalize}
+            autoCorrect={false}
+            editable={!disabled && !readOnly}
+            keyboardType={keyboardType}
+            maxLength={maxCount}
+            multiline={multiline}
+            numberOfLines={maxRows}
+            onChangeText={onChange}
+            onEndEditing={handleBlur}
+            onFocus={handleFocus}
+            onSubmitEditing={onSubmitEditing}
+            placeholder={!focused && !alwaysShowPlaceholder ? '' : placeholder}
+            placeholderTextColor={inputStyle.placeholderTextColor}
+            ref={ref}
+            returnKeyType={returnKeyType}
+            secureTextEntry={secureTextEntry}
+            selectionColor={inputStyle.selectionColor}
+            style={inputStyle.root}
+            type={type}
+            value={focused || multiline ? value : displayValue}
+          />
+          {rightAdornments.map(renderElement)}
+        </View>
+        {maxCount && (
+          <View style={textLengthRowStyle}>
+            <UTLabel colorTheme="gray" variant="small">
+              {value?.length || 0}/{maxCount}
+            </UTLabel>
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+UTBaseInputField.displayName = 'UTBaseInputField';
+
+UTBaseInputField.propTypes = {
+  alwaysShowPlaceholder: bool,
+  disabled: bool,
+  error: string,
+  inputSize: string,
+  leftAdornments: arrayOf(
+    shape({
+      name: string.isRequired,
+      props: shape({})
+    })
+  ),
+  maxCount: number,
+  maxRows: number,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  onSubmitEditing: func,
+  placeholder: string,
+  readOnly: bool,
+  returnKeyType: string,
+  rightAdornments: arrayOf(
+    shape({
+      name: string.isRequired,
+      props: shape({})
+    })
+  ),
+  style: shape({
+    container: ViewPropTypes.style,
+    input: ViewPropTypes.style,
+    root: ViewPropTypes.style
+  }),
+  type: string,
+  value: string
+};
+
+export default UTBaseInputField;

package/lib/components/{UTTextInput/versions/V1/components/TextInputField → UTBaseInputField}/theme.js

@@ -1,5 +1,6 @@
-import { getFontStyles } from '../../../../../UTLabel/theme';
-import { SMALL } from '../../constants';
+import { getFontStyles } from '../UTLabel/theme';
+
+import { SMALL } from './constants';
 
 const LINE_HEIGHT = 22;
 const CONTAINER_PADDING = {

package/lib/components/UTButton/README.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-`UTButton` is a versatile button component that can be customized with various themes, sizes, icons, and loading states. It is designed to be used in different scenarios, providing a consistent look and feel across your application.
+`UTButton` is a versatile button component that can be customized with various themes, sizes, icons, and loading states.
 
 ## Props
 

package/lib/components/UTButton/index.js

@@ -3,13 +3,13 @@ import { bool, func, elementType, string, shape } from 'prop-types';
 import { Pressable, View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
+import { isUTIcon } from '../UTIcon/utils';
 import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
 
 import { DEFAULT_PROPS, ICON_PLACEMENTS } from './constants';
-import { isUTIcon } from './utils';
 import { retrieveStyle } from './theme';
 
 const UTButton = ({
@@ -54,8 +54,14 @@ const UTButton = ({
     (isUTIcon(Icon) ? (
       (() => {
         const { fontSize, color, ...remainingIconStyles } = iconStyles;
+
         return (
-          <UTIcon color={textStyles.colorTheme} style={remainingIconStyles} size={fontSize} name={Icon} />
+          <UTIcon
+            colorTheme={textStyles.colorTheme}
+            name={Icon}
+            size={fontSize}
+            style={remainingIconStyles}
+          />
         );
       })()
     ) : (

package/lib/components/UTCheckBox/README.md

@@ -6,15 +6,17 @@
 
 ## Props
 
-| Name          | Type         | Default | Description                                             |
-| ------------- | ------------ | ------- | ------------------------------------------------------- |
-| checked       | bool         | false   | Indicates if the checkbox is checked.                   |
-| disabled      | bool         | false   | Disables the checkbox, making it unclickable.           |
-| indeterminate | bool         | false   | Indicates if the checkbox is in an indeterminate state. |
-| label         | string       |         | Label to display next to the checkbox.                  |
-| onPress       | func         |         | Function to call when the checkbox is pressed.          |
-| reversed      | bool         | false   | If true, reverses the order of label and checkbox.      |
-| style         | shape        | {}      | Custom styles to apply to the checkbox. Can contain `root`, `icon`, `touchable`. |
+| Name          | Type   | Default | Description                                             |
+| ------------- | ------ | ------- | ------------------------------------------------------- |
+| checked       | bool   | false   | Indicates if the checkbox is checked.                   |
+| disabled      | bool   | false   | Disables the checkbox, making it unclickable.           |
+| indeterminate | bool   | false   | Indicates if the checkbox is in an indeterminate state. |
+| label         | string |         | Label to display next to the checkbox.                  |
+| onPress       | func   |         | Function to call when the checkbox is pressed.          |
+| required      | bool   | false   | Indicates if the checkbox is required.                  |
+| reversed      | bool   | false   | If true, reverses the order of label and checkbox.      |
+| spacing       | string |         | If "small", reduces the column gap from 16 to 8.        |
+| style         | shape  | {}      | Custom styles to apply to the checkbox container.       |
 
 ## Usage
 
@@ -31,7 +33,7 @@ const Example = () => {
 };
 
 export default Example;
-
+```
 
 ### Custom Styles Example
 
@@ -40,12 +42,8 @@ import React from 'react';
 import UTCheckBox from './UTCheckBox';
 
 const customStyles = {
-  root: { padding: 10 },
-  icon: { backgroundColor: 'lightgrey' },
-  touchable: {
-    root: { margin: 5 },
-    pressed: { opacity: 0.5 }
-  }
+  padding: 10,
+  backgroundColor: 'lightgrey'
 };
 
 const Example = () => {
@@ -57,10 +55,10 @@ const Example = () => {
       label="Check me"
       onPress={() => setChecked(!checked)}
       style={customStyles}
+      spacing="small"
     />
   );
 };
 
 export default Example;
-
 ```

package/lib/components/UTCheckBox/constants.js

@@ -1,2 +1,4 @@
 export const CHECKED_ICON = 'IconCheck';
 export const INDETERMINATE_ICON = 'IconMinus';
+
+export const SMALL = 'small';