@widergy/mobile-ui 1.13.3 → 1.13.5

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.13.5](https://github.com/widergy/mobile-ui/compare/v1.13.4...v1.13.5) (2024-07-17)
+
+
+### Bug Fixes
+
+* next button color ([7934791](https://github.com/widergy/mobile-ui/commit/79347911efb36f70c4a7055e85237d3c0a7ca2a5))
+
+## [1.13.4](https://github.com/widergy/mobile-ui/compare/v1.13.3...v1.13.4) (2024-07-17)
+
+
+### Bug Fixes
+
+* add UTCheckBox and UTCheckList ([#304](https://github.com/widergy/mobile-ui/issues/304)) ([edf9c95](https://github.com/widergy/mobile-ui/commit/edf9c95122a765b41e3b8f1031f6c8a34b8e8085))
+
 ## [1.13.3](https://github.com/widergy/mobile-ui/compare/v1.13.2...v1.13.3) (2024-07-17)
 
 

package/lib/components/Button/index.js

@@ -105,4 +105,8 @@ Button.displayName = 'Button';
 
 Button.propTypes = propTypes;
 
+/**
+ * @deprecated The Button component is deprecated and will be removed in a future release.
+ * Please use the UTButton component instead.
+ */
 export default withTheme(Button);

package/lib/components/Icon/index.js

@@ -25,4 +25,8 @@ Icon.defaultProps = {
   type: DEFAULT_ICON_TYPE
 };
 
+/**
+ * @deprecated The Icon component is deprecated and will be removed in a future release.
+ * Please use the UTIcon component instead.
+ */
 export default Icon;

package/lib/components/IconButton/index.js

@@ -39,4 +39,8 @@ IconButton.defaultProps = {
   size: DEFAULT_ICON_SIZE
 };
 
+/**
+ * @deprecated The IconButton component is deprecated and will be removed in a future release.
+ * Please use the UTButton component instead.
+ */
 export default IconButton;

package/lib/components/Label/index.js

@@ -60,4 +60,8 @@ Label.defaultProps = {
   allowFontScaling: false
 };
 
+/**
+ * @deprecated The Label component is deprecated and will be removed in a future release.
+ * Please use the UTLabel component instead.
+ */
 export default withTheme(Label);

package/lib/components/UTCheckBox/README.md

@@ -0,0 +1,66 @@
+# UTCheckBox
+
+## Description
+
+`UTCheckBox` is a checkbox component used within the `UTCheckList` component. It supports various states such as checked, indeterminate, and disabled, and can be customized with labels and styles.
+
+## 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`. |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckBox from './UTCheckBox';
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return <UTCheckBox checked={checked} label="Check me" onPress={() => setChecked(!checked)} />;
+};
+
+export default Example;
+
+
+### Custom Styles Example
+
+```jsx
+import React from 'react';
+import UTCheckBox from './UTCheckBox';
+
+const customStyles = {
+  root: { padding: 10 },
+  icon: { backgroundColor: 'lightgrey' },
+  touchable: {
+    root: { margin: 5 },
+    pressed: { opacity: 0.5 }
+  }
+};
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <UTCheckBox
+      checked={checked}
+      label="Check me"
+      onPress={() => setChecked(!checked)}
+      style={customStyles}
+    />
+  );
+};
+
+export default Example;
+
+```

package/lib/components/UTCheckBox/constants.js

@@ -0,0 +1,2 @@
+export const CHECKED_ICON = 'IconCheck';
+export const INDETERMINATE_ICON = 'IconMinus';

package/lib/components/UTCheckBox/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+
+import { useTheme } from '../../theming';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+
+import { CHECKED_ICON, INDETERMINATE_ICON } from './constants';
+import { retrieveStyle } from './theme';
+import propTypes from './proptypes';
+
+const UTCheckBox = ({ checked, disabled, indeterminate, label, onPress, reversed, style }) => {
+  const theme = useTheme();
+  const { containerStyles, iconContainerStyles, touchableStyles } = retrieveStyle({
+    checked,
+    disabled,
+    indeterminate,
+    reversed,
+    style,
+    theme
+  });
+
+  const combinedTouchableStyles = ({ pressed }) => [touchableStyles.root, pressed && touchableStyles.pressed];
+
+  const iconName = indeterminate ? INDETERMINATE_ICON : checked ? CHECKED_ICON : '';
+
+  return (
+    <View style={containerStyles}>
+      <Pressable disabled={disabled} onPress={onPress} style={combinedTouchableStyles}>
+        <View style={iconContainerStyles}>
+          <UTIcon color="light" name={iconName} size={16} />
+        </View>
+      </Pressable>
+      <UTLabel>{label}</UTLabel>
+    </View>
+  );
+};
+
+UTCheckBox.defaultProps = {
+  style: {}
+};
+
+UTCheckBox.propTypes = propTypes;
+
+export default UTCheckBox;

package/lib/components/UTCheckBox/proptypes.js

@@ -0,0 +1,21 @@
+import { bool, func, shape, 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 default {
+  checked: bool,
+  disabled: bool,
+  indeterminate: bool,
+  label: string,
+  onPress: func,
+  reversed: bool,
+  style: styleProptypes
+};

package/lib/components/UTCheckBox/theme.js

@@ -0,0 +1,72 @@
+const baseCheckBoxTheme = theme => ({
+  container: {
+    alignItems: 'center',
+    columnGap: 16,
+    flexDirection: 'row',
+    justifyContent: 'flex-start'
+  },
+  iconContainer: {
+    borderColor: theme.Palette.gray['04'],
+    borderRadius: 5,
+    borderWidth: 2,
+    height: 20,
+    width: 20
+  },
+  touchable: {
+    root: {
+      borderRadius: 25,
+      padding: 6
+    },
+    pressed: {
+      backgroundColor: theme.Palette.accent['02'],
+      borderColor: theme.Palette.accent['03'],
+      borderWidth: 1,
+      padding: 5
+    }
+  }
+});
+
+const conditionalContainerStyle = (reversed, disabled) => ({
+  ...(reversed && {
+    flexDirection: 'row-reverse'
+  }),
+  ...(disabled && {
+    opacity: 0.5
+  })
+});
+
+const conditionalIconContainerStyle = (checked, indeterminate, theme) => ({
+  ...((checked || indeterminate) && {
+    backgroundColor: theme.Palette.accent['04'],
+    borderColor: theme.Palette.accent['04']
+  })
+});
+
+export const retrieveStyle = ({ checked, disabled, indeterminate, reversed, style = {}, theme }) => {
+  const baseTheme = baseCheckBoxTheme(theme);
+
+  const containerStyles = {
+    ...baseTheme.container,
+    ...conditionalContainerStyle(reversed, disabled),
+    ...style.root
+  };
+
+  const iconContainerStyles = {
+    ...baseTheme.iconContainer,
+    ...conditionalIconContainerStyle(checked, indeterminate, theme),
+    ...style.icon
+  };
+
+  const touchableStyles = {
+    root: {
+      ...baseTheme.touchable.root,
+      ...style.touchable?.root
+    },
+    pressed: {
+      ...baseTheme.touchable.pressed,
+      ...style.touchable?.pressed
+    }
+  };
+
+  return { containerStyles, iconContainerStyles, touchableStyles };
+};

package/lib/components/UTCheckList/README.MD

@@ -0,0 +1,101 @@
+# UTCheckList
+
+## Description
+
+`UTCheckList` is a customizable component that renders a list of checkboxes, allowing users to select multiple options from a provided list. It supports features like select all, indeterminate state, error display, and dynamic options. The "Select All" checkbox only affects options that are not disabled.
+
+## Props
+
+| Name           | Type   | Default | Description                                                                                                            |
+| -------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------- |
+| error          | string |         | Error message to display.                                                                                              |
+| input          | shape  |         | Input configuration object containing `value` and `onChange`.                                                          |
+| label          | string |         | Label for the checklist.                                                                                               |
+| options        | array  |         | Array of options to be displayed as checkboxes. Each option is an object with `label` and `value`.                     |
+| required       | bool   | false   | Indicates if the checklist is required.                                                                                |
+| reversed       | bool   | false   | If true, reverses the order of label and checkbox.                                                                     |
+| selectAllLabel | string |         | Label for the "Select All" checkbox.                                                                                   |
+| style          | shape  | {}      | Custom styles to apply to the checklist. Can contain `root`, `header`, `checkboxesContainer`, `item`, and `selectAll`. |
+
+### Input Object
+
+The `input` prop is an object that should contain the following keys:
+
+| Name     | Type            | Description                                  |
+| -------- | --------------- | -------------------------------------------- |
+| value    | arrayOf(string) | 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                          |
+| -------- | ------ | ------------------------------------ |
+| checked  | bool   | Indicates if the option is checked.  |
+| disabled | bool   | Indicates if the option is disabled. |
+| label    | string | Label to display for the option.     |
+| value    | string | Value of the option.                 |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3', disabled: true, checked: true }
+];
+
+const Example = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      label="Select Options"
+      options={options}
+      input={{
+        value: selectedOptions,
+        onChange: setSelectedOptions
+      }}
+      selectAllLabel="Select All"
+      required
+      error="Please select at least one option"
+    />
+  );
+};
+
+export default Example;
+```
+
+### Custom Styles Example
+
+```jsx
+import React from 'react';
+import UTCheckBox from './UTCheckBox';
+
+const customStyles = {
+  root: { padding: 10 },
+  iconContainer: { backgroundColor: 'lightgrey' },
+  label: { color: 'blue' }
+};
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <UTCheckBox
+      checked={checked}
+      label="Check me"
+      onPress={() => setChecked(!checked)}
+      style={customStyles}
+    />
+  );
+};
+
+export default Example;
+```

package/lib/components/UTCheckList/index.js

@@ -0,0 +1,150 @@
+import React, { useEffect, useCallback, useMemo, Fragment } 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 UTCheckBox from '../UTCheckBox';
+import UTLabel from '../UTLabel';
+import UTRequiredLabel from '../UTRequiredLabel';
+
+import { keyExtractor, isChecked } from './utils';
+import styles from './styles';
+
+const UTCheckList = ({
+  error,
+  input,
+  label,
+  options,
+  required,
+  reversed,
+  selectAllLabel,
+  showSelectAll,
+  style
+}) => {
+  const convertIfIsString = value =>
+    isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;
+
+  useEffect(() => {
+    const convertedValue = convertIfIsString(input.value);
+    if (JSON.stringify(convertedValue) !== JSON.stringify(input.value)) {
+      input.onChange(convertedValue);
+    }
+  }, [input.value, input]);
+
+  const enabledOptions = useMemo(() => options.filter(option => !option.disabled), [options]);
+
+  const areAllSelected = useMemo(
+    () => enabledOptions.every(option => input.value?.includes(option.value)),
+    [enabledOptions, input.value]
+  );
+
+  const isIndeterminate = useMemo(
+    () => enabledOptions.some(option => input.value?.includes(option.value)) && !areAllSelected,
+    [enabledOptions, input.value, areAllSelected]
+  );
+
+  const handleChange = useCallback(
+    receivedValue => () => {
+      const { onChange, value } = input;
+      const newValues = !value?.find?.(elem => elem === receivedValue)
+        ? [...(value || []), receivedValue]
+        : value?.filter(elem => elem !== receivedValue);
+      if (onChange) onChange(isEmpty(newValues) ? [] : newValues);
+    },
+    [input]
+  );
+
+  const handleCheckAll = () => {
+    if (!areAllSelected && options) {
+      input.onChange(enabledOptions.map(item => item.value));
+    } else {
+      input.onChange([]);
+    }
+  };
+
+  return (
+    <View style={[styles.container, style.root]}>
+      <View style={[styles.headerContainer, style.header]}>
+        {label && <UTRequiredLabel required={required}>{label}</UTRequiredLabel>}
+        {error && (
+          <UTLabel colorTheme="error" variant="small">
+            {error}
+          </UTLabel>
+        )}
+      </View>
+      <View
+        style={[
+          styles.checkboxesContainer,
+          reversed && styles.reversedCheckBoxesContainer,
+          style.checkboxesContainer
+        ]}
+      >
+        {showSelectAll && (
+          <UTCheckBox
+            checked={areAllSelected}
+            indeterminate={isIndeterminate}
+            label={selectAllLabel}
+            onPress={handleCheckAll}
+            reversed={reversed}
+            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>
+            );
+          })}
+      </View>
+    </View>
+  );
+};
+
+UTCheckList.defaultProps = {
+  showSelectAll: true,
+  style: {}
+};
+
+UTCheckList.propTypes = {
+  error: string,
+  label: string,
+  input: shape({
+    value: arrayOf(string),
+    onChange: func
+  }),
+  options: arrayOf(
+    shape({
+      checked: bool,
+      disabled: bool,
+      label: string,
+      value: string
+    })
+  ),
+  required: bool,
+  reversed: bool,
+  selectAllLabel: string,
+  showSelectAll: bool,
+  style: shape({
+    checkboxesContainer: ViewPropTypes.style,
+    header: ViewPropTypes.style,
+    item: checboxStyleProptypes,
+    root: ViewPropTypes.style,
+    selectAll: ViewPropTypes.style
+  })
+};
+
+export default UTCheckList;

package/lib/components/UTCheckList/styles.js

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

package/lib/components/UTCheckList/utils.js

@@ -0,0 +1,4 @@
+export const keyExtractor = (_, index) => `CB-${index}`;
+
+export const isChecked = (item, inputValue) =>
+  !!inputValue?.find(elem => elem === item.value) || (item.disabled && item.checked);

package/lib/components/UTLoading/components/Spinner/styles.js

@@ -4,5 +4,8 @@ export default StyleSheet.create({
   spinner: {
     alignSelf: 'center',
     justifyContent: 'center'
+  },
+  displayNone: {
+    display: 'none'
   }
 });

package/lib/components/UTRequiredLabel/constants.js

@@ -0,0 +1 @@
+export const REQUIRED_LABEL = ' *';

package/lib/components/UTRequiredLabel/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { bool, string } from 'prop-types';
+import { View } from 'react-native';
+
+import UTLabel from '../UTLabel';
+
+import { REQUIRED_LABEL } from './constants';
+import styles from './styles';
+
+const UTRequiredLabel = ({ children, colorTheme, required, variant }) => {
+  return (
+    <View style={styles.label}>
+      <UTLabel colorTheme={colorTheme} variant={variant}>
+        {children}
+      </UTLabel>
+      {required && (
+        <UTLabel colorTheme="error" shade="04" variant={variant}>
+          {REQUIRED_LABEL}
+        </UTLabel>
+      )}
+    </View>
+  );
+};
+
+UTRequiredLabel.propTypes = {
+  colorTheme: string,
+  required: bool,
+  variant: string
+};
+
+export default UTRequiredLabel;

package/lib/components/UTRequiredLabel/styles.js

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

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

@@ -1,8 +1,16 @@
+import React, {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+  useMemo,
+  Fragment
+} from 'react';
+import _ from 'lodash';
 import { bool, elementType, func, oneOf, shape, string } from 'prop-types';
-import React, { useState, forwardRef, useImperativeHandle, useRef, useEffect, useMemo } from 'react';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { TextInput } from 'react-native';
-import _ from 'lodash';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { withTheme } from '../../../../../../theming';
 import Icon from '../../../../../Icon';
@@ -70,7 +78,7 @@ const BaseInput = forwardRef(
       : {};
 
     return (
-      <>
+      <Fragment>
         <TextInput
           autoCorrect={false}
           ref={textInputRef}
@@ -108,7 +116,7 @@ const BaseInput = forwardRef(
             )}
           </Touchable>
         )}
-      </>
+      </Fragment>
     );
   }
 );

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

@@ -3,6 +3,4 @@ export const DEFAULT_PROPS = {
   style: {}
 };
 
-export const REQUIRED_LABEL = ' *';
-
 export const SMALL = 's';

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

@@ -2,9 +2,10 @@ import React from 'react';
 import { View } from 'react-native';
 
 import UTLabel from '../../../UTLabel';
+import UTRequiredLabel from '../../../UTRequiredLabel';
 import UTValidation from '../../../UTValidation';
 
-import { DEFAULT_PROPS, REQUIRED_LABEL, SMALL } from './constants';
+import { DEFAULT_PROPS, SMALL } from './constants';
 import { formatErrorToValidation } from './utils';
 import propTypes from './proptypes';
 import styles from './styles';
@@ -47,16 +48,9 @@ const UTTextInput = ({
   return (
     <View style={[styles.container, style.root]}>
       {label && (
-        <View style={styles.label}>
-          <UTLabel colorTheme={labelColorTheme} variant={labelComponentVariant}>
-            {label}
-          </UTLabel>
-          {required && (
-            <UTLabel colorTheme="error" shade="04" variant={labelComponentVariant}>
-              {REQUIRED_LABEL}
-            </UTLabel>
-          )}
-        </View>
+        <UTRequiredLabel colorTheme={labelColorTheme} required={required} variant={labelComponentVariant}>
+          {label}
+        </UTRequiredLabel>
       )}
       <TextInputField
         action={action}

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

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

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js

@@ -8,13 +8,14 @@ import { useTheme } from '../../../../../../../../theming';
 
 import ownStyles from './styles';
 
-const ActionButton = ({ hidden, disabled, onPress, label, variant, style }) => {
+const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, variant }) => {
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
 
   return (
     <View style={themedStyles.actionButton}>
       <UTButton
+        colorTheme={colorTheme}
         disabled={disabled || hidden}
         onPress={onPress}
         size="large"
@@ -28,11 +29,12 @@ const ActionButton = ({ hidden, disabled, onPress, label, variant, style }) => {
 };
 
 ActionButton.propTypes = {
+  colorTheme: string,
   disabled: bool,
   hidden: bool,
   label: string,
-  variant: string,
-  onPress: func
+  onPress: func,
+  variant: string
 };
 
 export default ActionButton;

package/lib/index.js

@@ -27,6 +27,8 @@ export { default as ImageLabel } from './components/ImageLabel';
 export { default as CheckList } from './components/CheckList';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTPasswordField } from './components/UTPasswordField';
+export { default as UTCheckList } from './components/UTCheckList';
+export { default as UTCheckBox } from './components/UTCheckBox';
 
 // Icons
 export { default as Icon } from './components/Icon';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.13.3",
+  "version": "1.13.5",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [