@widergy/mobile-ui 1.15.0 → 1.15.1

package/lib/components/UTLabel/constants.js

@@ -32,20 +32,20 @@ export const WEIGHTS = {
 };
 
 export const COLOR_THEMES = {
-  accent: 'accent',
-  dark: 'dark',
-  error: 'error',
-  gray: 'gray',
-  information: 'information',
-  light: 'light',
-  negative: 'negative',
-  neutral: 'neutral',
-  success: 'success',
-  warning: 'warning'
+  ACCENT: 'accent',
+  DARK: 'dark',
+  ERROR: 'error',
+  GRAY: 'gray',
+  INFORMATION: 'information',
+  LIGHT: 'light',
+  NEGATIVE: 'negative',
+  NEUTRAL: 'neutral',
+  SUCCESS: 'success',
+  WARNING: 'warning'
 };
 
 export const DEFAULT_PROPS = {
-  colorTheme: 'dark',
+  colorTheme: COLOR_THEMES.DARK,
   field: {},
   style: {},
   variant: 'body',

package/lib/components/UTLabel/index.js

@@ -1,14 +1,12 @@
 import React from 'react';
-import { any, bool, func, number, objectOf, string } from 'prop-types';
 import { Text } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import Markdown from 'react-native-markdown-display';
 
 import { useTheme } from '../../theming';
 
-import { DEFAULT_PROPS } from './constants';
 import { markdownFormat } from './utils';
 import { retrieveStyle } from './theme';
+import { defaultProps, propTypes } from './proptypes';
 
 const UTLabel = ({
   children,
@@ -44,19 +42,7 @@ const UTLabel = ({
   );
 };
 
-UTLabel.defaultProps = DEFAULT_PROPS;
-
-UTLabel.propTypes = {
-  colorTheme: string,
-  // eslint-disable-next-line react/forbid-prop-types
-  field: any,
-  markdownRenderers: objectOf(func),
-  numberOfLines: number,
-  shade: string,
-  style: ViewPropTypes.style,
-  variant: string,
-  weight: string,
-  withMarkdown: bool
-};
+UTLabel.defaultProps = defaultProps;
+UTLabel.propTypes = propTypes;
 
 export default UTLabel;

package/lib/components/UTLabel/proptypes.js

@@ -0,0 +1,19 @@
+import { any, bool, func, number, objectOf, string } from 'prop-types';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
+
+import { DEFAULT_PROPS } from './constants';
+
+export const propTypes = {
+  colorTheme: string,
+  // eslint-disable-next-line react/forbid-prop-types
+  field: any,
+  markdownRenderers: objectOf(func),
+  numberOfLines: number,
+  shade: string,
+  style: TextPropTypes.style,
+  variant: string,
+  weight: string,
+  withMarkdown: bool
+};
+
+export const defaultProps = DEFAULT_PROPS;

package/lib/components/UTLabel/theme.js

@@ -3,9 +3,9 @@ import { IS_IOS } from '../../utils/platformUtils/constants';
 import { COLOR_THEMES, DEFAULT_PROPS, SHADES, VARIANTS_SIZES, WEIGHTS } from './constants';
 
 const getDefaultColorShade = colorTheme =>
-  colorTheme === COLOR_THEMES.gray
+  colorTheme === COLOR_THEMES.GRAY
     ? SHADES.shade04
-    : colorTheme === COLOR_THEMES.light
+    : colorTheme === COLOR_THEMES.LIGHT
       ? SHADES.shade01
       : SHADES.shade05;
 

package/lib/components/UTMenu/index.js

@@ -162,7 +162,7 @@ const UTMenu = ({
             {withAutocomplete && (
               <View style={[styles.searchContainer, propStyles?.searchContainer]}>
                 <UTTextInput
-                  InputRef={searchTextInputRef}
+                  inputRef={searchTextInputRef}
                   onChange={handleQueryChange}
                   onSubmitEditing={
                     query && filteredOptions[0]

package/lib/components/UTPasswordField/versions/V0/components/PasswordValidations/styles.js

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

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import propTypes from '../../../UTTextInput/versions/V1/proptypes';
+import { propTypes, defaultProps } from '../../../UTTextInput/versions/V1/proptypes';
 import UTTextInput from '../../../UTTextInput';
 
 import { ICON_EYE, ICON_EYE_OFF, INPUT_TYPE } from './constants';
@@ -13,7 +13,7 @@ const UTPasswordField = props => {
   };
 
   const action = {
-    icon: isPasswordVisible ? ICON_EYE : ICON_EYE_OFF,
+    Icon: isPasswordVisible ? ICON_EYE : ICON_EYE_OFF,
     onPress: toggleVisibility
   };
 
@@ -27,6 +27,7 @@ const UTPasswordField = props => {
   );
 };
 
+UTPasswordField.defaultProps = defaultProps;
 UTPasswordField.propTypes = propTypes;
 
 export default UTPasswordField;

package/lib/components/UTSearchField/README.md

@@ -0,0 +1,42 @@
+# UTSearchField
+
+## Description
+
+`UTSearchField` is a customizable search field component that includes a search icon on the left and an optional clear button on the right.
+
+## Props
+
+| Name            | Type                                                           | Default                           | Description                                                  |
+| --------------- | -------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------ |
+| inputRef        | func                                                           |                                   | Reference to the input field.                                |
+| input           | shape({ value: string.isRequired, onChange: func.isRequired }) | { value: '', onChange: () => {} } | Input object containing the value and onChange handler.      |
+| onBlur          | func                                                           |                                   | Function to call when the input field loses focus.           |
+| 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.                        |
+| returnKeyType   | string                                                         |                                   | Determines the return key type on the keyboard.              |
+| size            | string                                                         | medium                            | Size of the input field. One of: `small`, `medium`, `large`. |
+| style           | object                                                         |                                   | Style object to customize the input field.                   |
+| type            | string                                                         |                                   | Type of input (e.g., 'text', 'password', 'email').           |
+| variant         | string                                                         | white                             | Variant of the input field. One of: `white`, `gray`.         |
+
+## Example
+
+```jsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import UTSearchField from './UTSearchField';
+
+const UTSearchFieldExample = () => {
+  const [searchValue, setSearchValue] = useState('');
+
+  return (
+    <View style={{ padding: 20 }}>
+      <UTSearchField placeholder="Search..." value={searchValue} onChange={setSearchValue} />
+      <Text>Search Value: {searchValue}</Text>
+    </View>
+  );
+};
+
+export default UTSearchFieldExample;
+```

package/lib/components/UTSearchField/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
+import UTBaseInputField from '../UTBaseInputField';
+
+import { defaultProps, propTypes } from './proptypes';
+
+const UTSearchField = ({
+  disabled,
+  input,
+  inputRef,
+  onBlur,
+  onFocus,
+  onSubmitEditing,
+  placeholder,
+  returnKeyType,
+  size,
+  style,
+  type,
+  variant
+}) => {
+  const clearText = () => {
+    input.onChange('');
+  };
+
+  const action = { Icon: 'IconX', onPress: clearText, size: 'small' };
+
+  const leftAdornments = [
+    { name: COMPONENT_KEYS.ICON, props: { Icon: 'IconSearch', changeOnFocus: true, shade: '02' } }
+  ];
+
+  const rightAdornments = input.value ? [{ name: COMPONENT_KEYS.ACTION, props: { action } }] : [];
+
+  return (
+    <UTBaseInputField
+      alwaysShowPlaceholder
+      disabled={disabled}
+      input={input}
+      inputSize={size}
+      leftAdornments={leftAdornments}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      onSubmitEditing={onSubmitEditing}
+      placeholder={placeholder}
+      ref={inputRef}
+      returnKeyType={returnKeyType}
+      rightAdornments={rightAdornments}
+      style={{ container: style }}
+      type={type}
+      variant={variant}
+    />
+  );
+};
+
+UTSearchField.defaultProps = defaultProps;
+
+UTSearchField.propTypes = propTypes;
+
+export default UTSearchField;

package/lib/components/UTSearchField/proptypes.js

@@ -0,0 +1,28 @@
+import { func, oneOf, string, object, shape, instanceOf, oneOfType } from 'prop-types';
+
+import { SIZES, VARIANT } from '../UTBaseInputField/constants';
+
+export const defaultProps = {
+  input: {
+    value: [],
+    onChange: () => {}
+  },
+  variant: VARIANT.WHITE
+};
+
+export const propTypes = {
+  input: shape({
+    value: string,
+    onChange: func
+  }),
+  inputRef: oneOfType([func, instanceOf(Object)]),
+  onBlur: func,
+  onFocus: func,
+  onSubmitEditing: func,
+  placeholder: string,
+  returnKeyType: string,
+  size: oneOf(Object.values(SIZES)),
+  style: object,
+  type: string,
+  variant: oneOf(Object.values(VARIANT))
+};

package/lib/components/UTSelect/index.js

@@ -1,103 +1,16 @@
-import React, { useState, useMemo } from 'react';
-import { isEmpty } from '@widergy/web-utils/lib/array';
-import { View } from 'react-native';
+import React from 'react';
+import { string } from 'prop-types';
 
-import Label from '../Label';
-import UTMenu from '../UTMenu';
-import UTTextInput from '../UTTextInput';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
 
-import MultipleItem from './componentes/MultipleItem';
-import styles from './styles';
-import UTSelectTypes from './proptypes';
-
-const UTSelect = ({
-  options = [],
-  value,
-  onChange,
-  error,
-  UTMenuProps,
-  label,
-  styles: propStyles,
-  variant,
-  disabled,
-  UTTextInputProps,
-  isMultiple,
-  verticalOffset = 5,
-  title,
-  titleProps,
-  changeOnClose
-}) => {
-  const [focused, setFocused] = useState(false);
-
-  const selectedOption = useMemo(
-    () => (!isMultiple ? options.find(option => option.value === value) : value || []),
-    [isMultiple, options, value]
-  );
-
-  const handleChange = option => {
-    if (!changeOnClose) onChange(option.value);
-  };
-
-  const handleChangeMultiple = newValue => {
-    const newValues = !selectedOption?.find?.(elem => elem === newValue.value)
-      ? [...(selectedOption || []), newValue.value]
-      : selectedOption?.filter(elem => elem !== newValue.value);
-
-    const finalValue = isEmpty(newValues) ? null : newValues;
-    if (!changeOnClose) {
-      onChange(finalValue);
-    }
-  };
-
-  const handleOpen = () => setFocused(true);
-  // eslint-disable-next-line consistent-return
-  const handleClose = () => {
-    setFocused(false);
-    if (changeOnClose) {
-      return isMultiple
-        ? onChange(selectedOption)
-        : onChange(options.find(_option => _option.id === selectedOption.id).value);
-    }
-  };
-
-  return (
-    <View style={[styles.container, propStyles]}>
-      {title && (
-        <Label medium primary {...titleProps}>
-          {title}
-        </Label>
-      )}
-      <UTMenu
-        options={options}
-        selectedOption={isMultiple ? selectedOption : selectedOption?.id}
-        fullWidth
-        verticalOffset={verticalOffset}
-        disabled={disabled}
-        onPress={isMultiple ? handleChangeMultiple : handleChange}
-        onOpen={handleOpen}
-        onClose={handleClose}
-        withoutOpacity
-        MenuOptionComponent={isMultiple && MultipleItem}
-        isMultiple={isMultiple}
-        {...UTMenuProps}
-      >
-        <UTTextInput
-          variant={variant}
-          value={isMultiple ? value?.join(', ') || '' : selectedOption?.label || selectedOption?.value || ''}
-          error={error}
-          label={label}
-          select
-          controlledFocus={focused}
-          disabled={disabled}
-          version="V0"
-          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
-          {...UTTextInputProps}
-        />
-      </UTMenu>
-    </View>
-  );
+const UTSelect = ({ version = 'V0', ...props }) => {
+  const Component = { V0, V1 }[version];
+  return <Component {...props} />;
 };
 
-UTSelect.propTypes = UTSelectTypes;
+UTSelect.propTypes = {
+  version: string
+};
 
 export default UTSelect;

package/lib/components/UTSelect/{componentes → versions/V0/componentes}/MultipleItem/index.js

@@ -2,7 +2,7 @@
 import { any, bool, func, shape, string } from 'prop-types';
 import React, { memo } from 'react';
 
-import Checkbox from '../../../Checkbox';
+import Checkbox from '../../../../../Checkbox';
 
 import styles from './styles';
 

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

@@ -0,0 +1,103 @@
+import React, { useState, useMemo } from 'react';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { View } from 'react-native';
+
+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';
+
+const UTSelect = ({
+  options = [],
+  value,
+  onChange,
+  error,
+  UTMenuProps,
+  label,
+  styles: propStyles,
+  variant,
+  disabled,
+  UTTextInputProps,
+  isMultiple,
+  verticalOffset = 5,
+  title,
+  titleProps,
+  changeOnClose
+}) => {
+  const [focused, setFocused] = useState(false);
+
+  const selectedOption = useMemo(
+    () => (!isMultiple ? options.find(option => option.value === value) : value || []),
+    [isMultiple, options, value]
+  );
+
+  const handleChange = option => {
+    if (!changeOnClose) onChange(option.value);
+  };
+
+  const handleChangeMultiple = newValue => {
+    const newValues = !selectedOption?.find?.(elem => elem === newValue.value)
+      ? [...(selectedOption || []), newValue.value]
+      : selectedOption?.filter(elem => elem !== newValue.value);
+
+    const finalValue = isEmpty(newValues) ? null : newValues;
+    if (!changeOnClose) {
+      onChange(finalValue);
+    }
+  };
+
+  const handleOpen = () => setFocused(true);
+  // eslint-disable-next-line consistent-return
+  const handleClose = () => {
+    setFocused(false);
+    if (changeOnClose) {
+      return isMultiple
+        ? onChange(selectedOption)
+        : onChange(options.find(_option => _option.id === selectedOption.id).value);
+    }
+  };
+
+  return (
+    <View style={[styles.container, propStyles]}>
+      {title && (
+        <Label medium primary {...titleProps}>
+          {title}
+        </Label>
+      )}
+      <UTMenu
+        options={options}
+        selectedOption={isMultiple ? selectedOption : selectedOption?.id}
+        fullWidth
+        verticalOffset={verticalOffset}
+        disabled={disabled}
+        onPress={isMultiple ? handleChangeMultiple : handleChange}
+        onOpen={handleOpen}
+        onClose={handleClose}
+        withoutOpacity
+        MenuOptionComponent={isMultiple && MultipleItem}
+        isMultiple={isMultiple}
+        {...UTMenuProps}
+      >
+        <UTTextInput
+          variant={variant}
+          value={isMultiple ? value?.join(', ') || '' : selectedOption?.label || selectedOption?.value || ''}
+          error={error}
+          label={label}
+          select
+          controlledFocus={focused}
+          disabled={disabled}
+          version="V0"
+          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
+          {...UTTextInputProps}
+        />
+      </UTMenu>
+    </View>
+  );
+};
+
+UTSelect.propTypes = UTSelectTypes;
+
+export default UTSelect;

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

@@ -0,0 +1,82 @@
+# UTSelect
+
+## Description
+
+`UTSelect` is a customizable dropdown select component that allows users to select single or multiple options from a provided list. It includes features like search, select all, and dynamic option filtering.
+
+## Props
+
+| Name                  | Type   | Default | Description                                                                                          |
+| --------------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------- |
+| action                | shape  |         | Action object containing `Icon`, `onPress`, and `size` for the action button.                        |
+| alwaysShowPlaceholder | bool   | true    | Determines if the placeholder should always be shown.                                                |
+| helpText              | string |         | Help text displayed below the input field.                                                           |
+| noMatchesText         | string |         | Text to display when no matches are found in the search.                                             |
+| input                 | shape  |         | Input configuration object containing `value` and `onChange`.                                        |
+| isMultiple            | bool   | false   | Allows multiple selection if true.                                                                   |
+| label                 | string |         | Label for the select field.                                                                          |
+| options               | array  |         | Array of options to be displayed in the dropdown. Each option is an object with `label` and `value`. |
+| placeholder           | string |         | Placeholder text for the select field.                                                               |
+| prefix                | string |         | Text to display as a prefix inside the input field.                                                  |
+| required              | bool   | false   | Indicates if the select field is required.                                                           |
+| searchPlaceholder     | string |         | Placeholder text for the search field.                                                               |
+| selectAllLabel        | string |         | Label for the "Select All" checkbox.                                                                 |
+| showSelectAll         | bool   | false   | Determines whether to show the "Select All" checkbox.                                                |
+| style                 | shape  | {}      | Custom styles to apply to the select field. Can contain `root`, `noMatchesText`, `scrollview`.       |
+| suffix                | string |         | Text to display as a suffix inside the input field.                                                  |
+
+### Input Object
+
+The `input` prop is an object that should contain the following keys:
+
+| Name     | Type                    | Description                                  |
+| -------- | ----------------------- | -------------------------------------------- |
+| value    | arrayOf(string, number) | Array of selected values.                    |
+| onChange | func                    | Function to call when the selection changes. |
+
+### Option Object
+
+The `options` prop is an array of objects, each representing an option:
+
+| Name  | Type           | Description                      |
+| ----- | -------------- | -------------------------------- |
+| label | string         | Label to display for the option. |
+| value | string, number | Value of the option.             |
+
+## Usage
+
+```jsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import UTSelect from './UTSelect';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' }
+];
+
+const UTSelectExample = () => {
+  const [selectedOptions, setSelectedOptions] = useState([]);
+
+  return (
+    <View style={{ padding: 20 }}>
+      <UTSelect
+        label="Select Options"
+        options={options}
+        input={{
+          value: selectedOptions,
+          onChange: setSelectedOptions
+        }}
+        placeholder="Select an option"
+        searchPlaceholder="Search options"
+        selectAllLabel="Select All"
+        noMatchesText="No matches found"
+      />
+      <Text>Selected Options: {selectedOptions.join(', ')}</Text>
+    </View>
+  );
+};
+
+export default UTSelectExample;
+```