@widergy/mobile-ui 1.15.0 → 1.16.0

package/lib/components/UTBaseInputField/theme.js

@@ -1,11 +1,46 @@
 import { getFontStyles } from '../UTLabel/theme';
 
-import { SMALL } from './constants';
+import { SIZES, VARIANT } from './constants';
 
-const LINE_HEIGHT = 22;
-const CONTAINER_PADDING = {
-  HORIZONTAL: 16,
-  VERTICAL: 12
+export const LINE_HEIGHT = 22;
+
+const CONTAINER = {
+  PADDING: {
+    HORIZONTAL: 16,
+    VERTICAL: 12
+  },
+  BORDER: {
+    RADIUS: 4,
+    WIDTH: 1,
+    WIDTH_FOCUSED: 2
+  },
+  ROW_GAP: 16
+};
+
+const SMALL_INPUT_PADDING = {
+  HORIZONTAL: 12,
+  VERTICAL: 8
+};
+
+const COLORS = {
+  BACKGROUND: {
+    DEFAULT: theme => theme.Palette.light['01'],
+    DISABLED: theme => theme.Palette.light['03'],
+    GRAY_VARIANT: theme => theme.Palette.light['04'],
+    READ_ONLY: 'transparent'
+  },
+  BORDER: {
+    DEFAULT: theme => theme.Palette.light['05'],
+    ERROR: theme => theme.Palette.error['04'],
+    FOCUSED: theme => theme.Palette.accent['04'],
+    GRAY_VARIANT: 'transparent',
+    READ_ONLY: 'transparent'
+  },
+  TEXT: {
+    INPUT: theme => theme.Palette.dark['05'],
+    PLACEHOLDER: theme => theme.Palette.gray['02'],
+    SELECTION: theme => theme.Palette.accent['04']
+  }
 };
 
 const baseTextInputTheme = theme => ({
@@ -17,21 +52,20 @@ const baseTextInputTheme = theme => ({
   },
   container: {
     alignItems: 'center',
-    backgroundColor: 'transparent',
-    borderColor: theme.Palette.light['05'],
-    borderRadius: 4,
-    borderWidth: 1,
-    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DEFAULT(theme),
+    borderColor: COLORS.BORDER.DEFAULT(theme),
+    borderRadius: CONTAINER.BORDER.RADIUS,
+    borderWidth: CONTAINER.BORDER.WIDTH,
     flexDirection: 'column',
-    paddingHorizontal: CONTAINER_PADDING.HORIZONTAL,
-    paddingVertical: CONTAINER_PADDING.VERTICAL,
-    rowGap: 16,
+    paddingHorizontal: CONTAINER.PADDING.HORIZONTAL,
+    paddingVertical: CONTAINER.PADDING.VERTICAL,
+    rowGap: CONTAINER.ROW_GAP,
     width: '100%'
   },
   input: {
     root: {
       ...getFontStyles({ theme, variant: 'body', weight: 'regular' }),
-      color: theme.Palette.dark['05'],
+      color: COLORS.TEXT.INPUT(theme),
       flex: 1,
       includeFontPadding: false,
       padding: 0,
@@ -39,12 +73,12 @@ const baseTextInputTheme = theme => ({
       textAlignVertical: 'center',
       zIndex: 4
     },
-    placeholderTextColor: theme.Palette.gray['02'],
-    selectionColor: theme.Palette.accent['04']
+    placeholderTextColor: COLORS.TEXT.PLACEHOLDER(theme),
+    selectionColor: COLORS.TEXT.SELECTION(theme)
   },
   inputRow: {
     alignItems: 'center',
-    columnGap: 16,
+    columnGap: CONTAINER.ROW_GAP,
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -57,28 +91,33 @@ const baseTextInputTheme = theme => ({
   }
 });
 
-const conditionalContainerStyle = (focused, error, theme, readOnly, disabled, inputSize) => ({
+const conditionalContainerStyle = (disabled, error, focused, inputSize, readOnly, theme, variant) => ({
+  ...(variant === VARIANT.GRAY && {
+    backgroundColor: COLORS.BACKGROUND.GRAY_VARIANT(theme),
+    borderColor: COLORS.BORDER.GRAY_VARIANT
+  }),
   ...(focused && {
-    borderColor: theme.Palette.accent['04'],
-    borderWidth: 2,
-    paddingHorizontal: CONTAINER_PADDING.HORIZONTAL - 1,
-    paddingVertical: CONTAINER_PADDING.VERTICAL - 1
+    backgroundColor: COLORS.BACKGROUND.DEFAULT(theme),
+    borderColor: COLORS.BORDER.FOCUSED(theme),
+    borderWidth: CONTAINER.BORDER.WIDTH_FOCUSED,
+    paddingHorizontal: CONTAINER.PADDING.HORIZONTAL - 1,
+    paddingVertical: CONTAINER.PADDING.VERTICAL - 1
   }),
   ...(error && {
-    borderColor: theme.Palette.error['04']
+    borderColor: COLORS.BORDER.ERROR(theme)
   }),
   ...(readOnly && {
-    backgroundColor: 'transparent',
-    borderColor: 'transparent',
+    backgroundColor: COLORS.BACKGROUND.READ_ONLY,
+    borderColor: COLORS.BORDER.READ_ONLY,
     paddingHorizontal: 0
   }),
   ...(disabled && {
-    backgroundColor: theme.Palette.light['03'],
-    borderColor: 'transparent'
+    backgroundColor: COLORS.BACKGROUND.DISABLED(theme),
+    borderColor: COLORS.BORDER.READ_ONLY
   }),
-  ...(inputSize === SMALL && {
-    paddingHorizontal: 12,
-    paddingVertical: 8
+  ...(inputSize === SIZES.SMALL && {
+    paddingHorizontal: SMALL_INPUT_PADDING.HORIZONTAL,
+    paddingVertical: SMALL_INPUT_PADDING.VERTICAL
   })
 });
 
@@ -98,13 +137,14 @@ export const retrieveStyle = ({
   multiline,
   readOnly,
   style = {},
-  theme
+  theme,
+  variant
 }) => {
   const baseTheme = baseTextInputTheme(theme);
 
   const containerStyle = {
     ...baseTheme.container,
-    ...conditionalContainerStyle(focused, error, theme, readOnly, disabled, inputSize),
+    ...conditionalContainerStyle(disabled, error, focused, inputSize, readOnly, theme, variant),
     ...style.container
   };
 

package/lib/components/UTBottomSheet/README.md

@@ -0,0 +1,53 @@
+# UTBottomSheet
+
+## Description
+
+`UTBottomSheet` is a bottom sheet component that can be customized with various button texts, descriptions, and content. It allows swipe to close and adjusts its height based on user interaction.
+
+## Props
+
+| Name        | Type   | Default | Description                                                             |
+| ----------- | ------ | ------- | ----------------------------------------------------------------------- |
+| buttonText  | string |         | Text for the button that appears in the top right corner of the header. |
+| description | string |         | Description that appears below the title in the header.                 |
+| onClose     | func   |         | Function called when the bottom sheet is closed.                        |
+| required    | bool   |         | Indicates if the field is required, showing an asterisk in the title.   |
+| title       | string |         | Title that appears in the bottom sheet header.                          |
+| visible     | bool   |         | Controls the visibility of the bottom sheet.                            |
+| scrolleable | bool   | false   | Determines if the content inside the bottom sheet should be scrollable. |
+
+## Example
+
+```jsx
+import React, { useState } from 'react';
+import { View, Button, Text } from 'react-native';
+import UTBottomSheet from './UTBottomSheet';
+
+const Example = () => {
+  const [visible, setVisible] = useState(false);
+
+  const toggleBottomSheet = () => {
+    setVisible(!visible);
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title="Show Bottom Sheet" onPress={toggleBottomSheet} />
+      <UTBottomSheet
+        buttonText="Close"
+        description="This is a description"
+        onClose={toggleBottomSheet}
+        required={true}
+        title="Bottom Sheet Title"
+        visible={visible}
+      >
+        <View>
+          <Text>Your content goes here</Text>
+        </View>
+      </UTBottomSheet>
+    </View>
+  );
+};
+
+export default Example;
+```

package/lib/components/UTBottomSheet/index.js

@@ -0,0 +1,139 @@
+import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { SafeAreaView, View, PanResponder, Animated, Dimensions, ScrollView, Keyboard } from 'react-native';
+import Modal from 'react-native-modal';
+import { bool, func, string } from 'prop-types';
+
+import { useTheme } from '../../theming';
+import UTButton from '../UTButton';
+import UTFieldLabel from '../UTFieldLabel';
+import UTLabel from '../UTLabel';
+
+import styles from './styles';
+
+const screenHeight = Dimensions.get('window').height;
+
+const UTBottomSheet = ({
+  buttonText,
+  children,
+  description,
+  onClose,
+  required,
+  scrolleable,
+  title,
+  visible
+}) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [modalHeight, setModalHeight] = useState('70%');
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const theme = useTheme();
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gestureState) => gestureState.dy > 0,
+        onPanResponderMove: (_, gestureState) => {
+          if (gestureState.dy > 0) {
+            pan.setValue({ x: 0, y: gestureState.dy });
+          }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+          if (gestureState.dy > 50) {
+            setIsFullScreen(true);
+            pan.flattenOffset();
+          } else {
+            Animated.spring(pan, {
+              toValue: { x: 0, y: 0 },
+              useNativeDriver: false
+            }).start();
+          }
+        }
+      }),
+    [pan]
+  );
+
+  const handleKeyboardDidShow = useCallback(e => {
+    setModalHeight(screenHeight - e.endCoordinates.height);
+  }, []);
+
+  const handleKeyboardDidHide = useCallback(() => {
+    setModalHeight(isFullScreen ? screenHeight : '70%');
+  }, [isFullScreen]);
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow);
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide);
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, [handleKeyboardDidShow, handleKeyboardDidHide]);
+
+  useEffect(() => {
+    setModalHeight(isFullScreen ? screenHeight : '70%');
+  }, [isFullScreen]);
+
+  const ChildrenContainer = scrolleable ? ScrollView : View;
+
+  return (
+    <Modal
+      animationIn="slideInUp"
+      animationInTiming={600}
+      animationOut="slideOutDown"
+      animationOutTiming={600}
+      isVisible={visible}
+      onBackdropPress={onClose}
+      onSwipeComplete={onClose}
+      propagateSwipe
+      style={styles.modal}
+      swipeDirection="down"
+    >
+      <Animated.View style={[styles.animatedContainer, { height: modalHeight }, pan.getLayout()]}>
+        <SafeAreaView style={styles.safeArea}>
+          <View style={styles.dragHandle} {...panResponder.panHandlers}>
+            <View style={styles.handleIndicator(theme)} />
+          </View>
+          <View style={styles.content}>
+            <View style={styles.header}>
+              <View style={styles.headerTopRow}>
+                <UTFieldLabel required={required} variant="subtitle1" weight="medium">
+                  {title}
+                </UTFieldLabel>
+                {buttonText && (
+                  <UTButton colorTheme="primary" onPress={onClose} variant="semitransparent">
+                    {buttonText}
+                  </UTButton>
+                )}
+              </View>
+              {description && (
+                <UTLabel colorTheme="gray" variant="small">
+                  {description}
+                </UTLabel>
+              )}
+            </View>
+            <ChildrenContainer keyboardShouldPersistTaps="handled" style={styles.childrenContainer}>
+              {children}
+            </ChildrenContainer>
+          </View>
+        </SafeAreaView>
+      </Animated.View>
+    </Modal>
+  );
+};
+
+UTBottomSheet.defaultProps = {
+  scrolleable: false
+};
+
+UTBottomSheet.propTypes = {
+  buttonText: string,
+  description: string,
+  onClose: func,
+  required: bool,
+  scrolleable: bool,
+  title: string,
+  visible: bool
+};
+
+export default UTBottomSheet;

package/lib/components/UTBottomSheet/styles.js

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  animatedContainer: {
+    backgroundColor: 'white', // When the component is standardized, should change to palette color
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    overflow: 'hidden'
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+    rowGap: 16
+  },
+  header: {
+    rowGap: 8
+  },
+  headerTopRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0
+  },
+  safeArea: {
+    flex: 1
+  },
+  dragHandle: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    padding: 16
+  },
+  handleIndicator: theme => ({
+    backgroundColor: theme.Palette.light['04'], // When the component is standardized, should change to palette color: light 04
+    borderRadius: 2.5,
+    height: 5,
+    width: 40
+  }),
+  childrenContainer: {
+    flexShrink: 1
+  }
+});
+
+export default styles;

package/lib/components/UTButton/constants.js

@@ -2,23 +2,14 @@ export const ELEVATION = 2;
 export const PRESSED_ELEVATION = 2;
 
 export const SIZES = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large'
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
 };
 
 export const ICON_PLACEMENTS = {
-  left: 'left',
-  right: 'right'
-};
-
-export const DEFAULT_PROPS = {
-  colorTheme: 'secondary',
-  disabled: false,
-  iconPlacement: ICON_PLACEMENTS.left,
-  loading: false,
-  size: SIZES.medium,
-  variant: 'filled'
+  LEFT: 'left',
+  RIGHT: 'right'
 };
 
 export const COLORS_MAPPER = {

package/lib/components/UTButton/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
-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';
@@ -9,7 +7,8 @@ import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
 
-import { DEFAULT_PROPS, ICON_PLACEMENTS } from './constants';
+import { defaultProps, propTypes } from './proptypes';
+import { ICON_PLACEMENTS } from './constants';
 import { retrieveStyle } from './theme';
 
 const UTButton = ({
@@ -70,13 +69,13 @@ const UTButton = ({
 
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
-      {iconPlacement === ICON_PLACEMENTS.left && IconToShow}
+      {iconPlacement === ICON_PLACEMENTS.LEFT && IconToShow}
       {children && (
         <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
           {children}
         </UTLabel>
       )}
-      {iconPlacement !== ICON_PLACEMENTS.left && IconToShow}
+      {iconPlacement !== ICON_PLACEMENTS.LEFT && IconToShow}
     </View>
   );
 
@@ -89,22 +88,7 @@ const UTButton = ({
   );
 };
 
-UTButton.defaultProps = DEFAULT_PROPS;
-
-UTButton.propTypes = {
-  colorTheme: string,
-  disabled: bool,
-  Icon: elementType,
-  iconPlacement: string,
-  loading: bool,
-  onPress: func,
-  size: string,
-  style: shape({
-    childrenContainer: ViewPropTypes.style,
-    icon: ViewPropTypes.style,
-    root: ViewPropTypes.style
-  }),
-  variant: string
-};
+UTButton.defaultProps = defaultProps;
+UTButton.propTypes = propTypes;
 
 export default UTButton;

package/lib/components/UTButton/proptypes.js

@@ -0,0 +1,29 @@
+import { bool, func, elementType, string, shape } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { ICON_PLACEMENTS, SIZES } from './constants';
+
+export const defaultProps = {
+  colorTheme: 'secondary',
+  disabled: false,
+  iconPlacement: ICON_PLACEMENTS.LEFT,
+  loading: false,
+  size: SIZES.MEDIUM,
+  variant: 'filled'
+};
+
+export const propTypes = {
+  colorTheme: string,
+  disabled: bool,
+  Icon: elementType,
+  iconPlacement: string,
+  loading: bool,
+  onPress: func,
+  size: string,
+  style: shape({
+    childrenContainer: ViewPropTypes.style,
+    icon: ViewPropTypes.style,
+    root: ViewPropTypes.style
+  }),
+  variant: string
+};

package/lib/components/UTButton/theme.js

@@ -1,7 +1,8 @@
 import { getShadow } from '../../utils/styleUtils';
 import { COLOR_THEMES } from '../UTLabel/constants';
 
-import { COLORS_MAPPER, DEFAULT_PROPS, ELEVATION, PRESSED_ELEVATION } from './constants';
+import { COLORS_MAPPER, ELEVATION, PRESSED_ELEVATION } from './constants';
+import { defaultProps } from './proptypes';
 
 const baseButtonTheme = () => ({
   text: {
@@ -35,7 +36,7 @@ const baseButtonTheme = () => ({
 });
 
 const variantsColorTheme = (theme, colorTheme, variant) => {
-  const colorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
+  const colorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[defaultProps.colorTheme];
   const actionTheme = theme.Palette[colorName];
   const negativeTheme = theme.Palette[COLORS_MAPPER.negative];
   const neutralTheme = theme.Palette[COLORS_MAPPER.secondary];
@@ -54,7 +55,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.neutral : COLOR_THEMES.negative
+        colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.NEUTRAL : COLOR_THEMES.NEGATIVE
       },
       icon: {
         color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']
@@ -130,7 +131,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
     }
   };
 
-  return definition[variant] || definition[DEFAULT_PROPS.variant];
+  return definition[variant] || definition[defaultProps.variant];
 };
 
 const sizeButtonTheme = size => {
@@ -164,7 +165,7 @@ const sizeButtonTheme = size => {
         fontSize: 20
       },
       iconOnly: {
-        fontSize: 24
+        fontSize: 20
       }
     }
   };

package/lib/components/UTCheckBox/README.md

@@ -2,7 +2,7 @@
 
 ## 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.
+`UTCheckBox` is a customizable checkbox component used within the `UTCheckList` component. It supports various states such as checked, indeterminate, and disabled.
 
 ## Props
 
@@ -11,12 +11,14 @@
 | 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. |
+| isSimple      | bool   | false   | **Deprecated**: Use standard checkboxes instead.        |
 | 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.        |
+| spacing       | string | large   | If "small", reduces the column gap from 16 to 8.        |
 | style         | shape  | {}      | Custom styles to apply to the checkbox container.       |
+| variant       | string |         | The variant to use for styling the checkbox.            |
 
 ## Usage
 
@@ -34,31 +36,3 @@ const Example = () => {
 
 export default Example;
 ```
-
-### Custom Styles Example
-
-```jsx
-import React from 'react';
-import UTCheckBox from './UTCheckBox';
-
-const customStyles = {
-  padding: 10,
-  backgroundColor: 'lightgrey'
-};
-
-const Example = () => {
-  const [checked, setChecked] = React.useState(false);
-
-  return (
-    <UTCheckBox
-      checked={checked}
-      label="Check me"
-      onPress={() => setChecked(!checked)}
-      style={customStyles}
-      spacing="small"
-    />
-  );
-};
-
-export default Example;
-```

package/lib/components/UTCheckBox/constants.js

@@ -1,4 +1,7 @@
 export const CHECKED_ICON = 'IconCheck';
 export const INDETERMINATE_ICON = 'IconMinus';
 
-export const SMALL = 'small';
+export const SPACING = {
+  SMALL: 'small',
+  LARGE: 'large'
+};