@widergy/mobile-ui 1.24.1 → 1.25.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.25.1](https://github.com/widergy/mobile-ui/compare/v1.25.0...v1.25.1) (2024-09-23)
+
+
+### Bug Fixes
+
+* type prop name changed ([#359](https://github.com/widergy/mobile-ui/issues/359)) ([f1644bd](https://github.com/widergy/mobile-ui/commit/f1644bdf762dafc5e5e6831693f7e6fdb8c83ab1))
+
+# [1.25.0](https://github.com/widergy/mobile-ui/compare/v1.24.1...v1.25.0) (2024-09-19)
+
+
+### Features
+
+* utbutton implementation ([#349](https://github.com/widergy/mobile-ui/issues/349)) ([e34fe42](https://github.com/widergy/mobile-ui/commit/e34fe428360eb36fde8654d44b9e6640e7c70895))
+
 ## [1.24.1](https://github.com/widergy/mobile-ui/compare/v1.24.0...v1.24.1) (2024-09-17)
 
 

package/lib/components/ActionButton/index.js

@@ -63,11 +63,16 @@ ActionButton.defaultProps = {
   icon: propTypes.string,
   color: 'white',
   size: ACTION_BUTTON_DEFAULT_SIZE,
-  moreIconProps: {},
+  moreIconProps: propTypes.object,
   iconMargin: ACTION_BUTTON_DEFAULT_MARGIN
 };
 
 ActionButton.propTypes = propTypes;
 ActionButton.displayName = 'ActionButton';
 
+/**
+ * @deprecated The ActionButton component is deprecated and will be removed in a future release.
+ * Please use the UTButton component instead.
+ */
+
 export default withTheme(ActionButton);

package/lib/components/ActionButton/propTypes.js

@@ -1,11 +1,11 @@
-import { string, number, func, bool } from 'prop-types';
+import { string, number, func, bool, shape } from 'prop-types';
 
 import { themeType } from '../../theming';
 import IconPropTypes from '../Icon/propTypes';
 
 export default {
   color: string,
-  moreIconProps: IconPropTypes,
+  moreIconProps: shape(IconPropTypes),
   effectColor: string,
   title: string,
   size: number,

package/lib/components/Capture/index.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 import PhotoAlbum from '../PhotoAlbum';
 
 import styles from './styles';
@@ -29,9 +29,9 @@ const Capture = ({
   return (
     <Fragment>
       {!!label && (
-        <Label semiBold big style={styles.paddingText}>
+        <UTLabel weight="semibold" variant="subtitle1" style={styles.paddingText}>
           {label}
-        </Label>
+        </UTLabel>
       )}
       <PhotoAlbum
         images={images}
@@ -50,7 +50,7 @@ const Capture = ({
         selectionMessage={selectionMessage}
         onError={onError}
       />
-      {!!helpText && <Label style={styles.paddingText}>{helpText}</Label>}
+      {!!helpText && <UTLabel style={styles.paddingText}>{helpText}</UTLabel>}
     </Fragment>
   );
 };

package/lib/components/CheckList/index.js

@@ -6,7 +6,7 @@ import { isEmpty } from '@widergy/web-utils/lib/array';
 import { isString } from 'lodash';
 
 import Checkbox from '../Checkbox/index';
-import Label from '../Label/index';
+import UTLabel from '../UTLabel';
 import CaptionLabel from '../CaptionLabel';
 import SeparatorBar from '../SeparatorBar/index';
 
@@ -102,7 +102,7 @@ class CheckList extends PureComponent {
       disabledStyleEnabled && disabledSelectAll ? disabledStyle || styles.disabled : {};
     return (
       <View style={[styles.container, style]}>
-        {!!title && <Label style={styles.title}>{title}</Label>}
+        {!!title && <UTLabel style={styles.title}>{title}</UTLabel>}
         {!hideSelectAll && (
           <Checkbox
             label={selectAllLabel}

package/lib/components/Icon/propTypes.js

@@ -4,7 +4,7 @@ import { number, string } from 'prop-types';
 export default {
   color: string,
   height: number,
-  name: string.isRequired,
+  name: string,
   size: number,
   style: ViewPropTypes.style,
   type: string,

package/lib/components/IconBadge/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 import { withTheme } from '../../theming';
 
 import propTypes from './propTypes';
@@ -23,9 +23,9 @@ const IconBadge = ({
         pointerEvents="none"
         style={[styles.iconBadge, { backgroundColor: theme.badge.backgroundColor }, iconBadgeStyle]}
       >
-        <Label xsmall white style={[styles.badgeLabel, badgeLabelStyle]}>
+        <UTLabel colorTheme="light" variant="xsmall" style={[styles.badgeLabel, badgeLabelStyle]}>
           {badgeLabel}
-        </Label>
+        </UTLabel>
       </View>
     )}
   </View>

package/lib/components/ImagePicker/ModalSelectionOption/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { Colors } from 'react-native/Libraries/NewAppScreen';
+import { View } from 'react-native';
 
 import Modal from '../../Modal';
-import Label from '../../Label';
+import UTLabel from '../../UTLabel';
+import UTButton from '../../UTButton';
 import imagePickerPropTypes from '../propTypes';
 
 import styles from './styles';
@@ -24,34 +24,27 @@ const ModalSelectionOption = ({
   const { title, takePhotoButtonTitle, chooseFromLibraryButtonTitle, cancelButtonTitle } =
     optionsModal ?? optionsModalDefault;
   return (
-    <Modal
-      visible={openModalSelection}
-      dismissable
-      onDismiss={closeModalSelection}
-      style={styles.displayImageModal}
-      elevation={0}
-    >
-      <Label bold style={styles.title}>
+    <Modal visible={openModalSelection} dismissable onDismiss={closeModalSelection} elevation={0}>
+      <UTLabel weight="bold" style={styles.title}>
         {title}
-      </Label>
+      </UTLabel>
       <View style={styles.container}>
-        <TouchableOpacity onPress={() => openOptionSelected(true)} style={styles.button}>
-          <Label medium bold>
-            {takePhotoButtonTitle}
-          </Label>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => openOptionSelected(false)} style={styles.button}>
-          <Label medium bold>
-            {chooseFromLibraryButtonTitle}
-          </Label>
-        </TouchableOpacity>
+        <UTButton onPress={() => openOptionSelected(true)} style={{ root: styles.button }} variant="text">
+          {takePhotoButtonTitle}
+        </UTButton>
+        <UTButton onPress={() => openOptionSelected(false)} style={{ root: styles.button }} variant="text">
+          {chooseFromLibraryButtonTitle}
+        </UTButton>
       </View>
       <View style={styles.cancelButtonContent}>
-        <TouchableOpacity onPress={closeModalSelection} style={[styles.button, styles.cancelButton]}>
-          <Label medium bold color={Colors.primary}>
-            {cancelButtonTitle}
-          </Label>
-        </TouchableOpacity>
+        <UTButton
+          colorTheme="primary"
+          onPress={closeModalSelection}
+          style={{ root: { ...styles.button, ...styles.cancelButton } }}
+          variant="text"
+        >
+          {cancelButtonTitle}
+        </UTButton>
       </View>
     </Modal>
   );

package/lib/components/ImagePicker/ModalSelectionOption/styles.js

@@ -1,11 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import {
-  horizontalScale,
-  moderateHorizontalScale,
-  moderateVerticalScale,
-  WINDOW_HEIGHT
-} from '../../../utils/scaleUtils';
+import { horizontalScale, moderateVerticalScale } from '../../../utils/scaleUtils';
 
 const styles = StyleSheet.create({
   title: {
@@ -14,16 +9,12 @@ const styles = StyleSheet.create({
   container: {
     marginLeft: horizontalScale(5)
   },
-  displayImageModal: {
-    height: WINDOW_HEIGHT * 0.275
-  },
   button: {
     marginTop: moderateVerticalScale(2),
-    paddingTop: moderateVerticalScale(20),
     borderRadius: 5
   },
   cancelButton: {
-    paddingLeft: moderateHorizontalScale(10)
+    alignSelf: 'flex-end'
   },
   cancelButtonContent: {
     width: '100%',

package/lib/components/ImagePicker/layout.js

@@ -7,7 +7,7 @@ import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import { IS_IOS } from '../../utils/platformUtils/constants';
 import Picker from '../Picker';
 import Modal from '../Modal';
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 
 import styles from './styles';
 import { ADD_ICON } from './constants';
@@ -91,7 +91,7 @@ const ImagePicker = ({
         acceptButton={acceptButton}
         cancelButton={cancelButton}
       >
-        <Label>{deleteImageModalText}</Label>
+        <UTLabel>{deleteImageModalText}</UTLabel>
       </Modal>
       <Modal
         visible={imageModalOpen}
@@ -100,9 +100,11 @@ const ImagePicker = ({
         style={styles.displayImageModal}
         elevation={0}
       >
-        <TouchableWithoutFeedback onPress={onCloseImageModal}>
-          <Image source={image && { uri: image.source }} style={styles.displayImage} resizeMode="contain" />
-        </TouchableWithoutFeedback>
+        {image && (
+          <TouchableWithoutFeedback onPress={onCloseImageModal}>
+            <Image source={image && { uri: image.source }} style={styles.displayImage} resizeMode="contain" />
+          </TouchableWithoutFeedback>
+        )}
       </Modal>
       <ModalSelectionOption
         openModalSelection={openModalSelection}

package/lib/components/ImageRadio/index.js

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { string, arrayOf, shape, func, number, any } from 'prop-types';
 import _ from 'lodash';
 
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 import ImageIcon from '../ImageIcon';
 import Touchable from '../Touchable';
 
@@ -20,7 +20,7 @@ const ImageRadio = ({ options, title, onChange, value, style, variant = {} }) =>
 
   return (
     <View style={styles.container}>
-      <Label>{title}</Label>
+      <UTLabel>{title}</UTLabel>
       <View style={[styles.innerContainer, vertical && styles.verticalInnerContainer]}>
         {options.map(option => (
           <Touchable
@@ -55,20 +55,20 @@ const ImageRadio = ({ options, title, onChange, value, style, variant = {} }) =>
                 />
               )}
               <View style={!vertical ? styles.labels : styles.verticalLabels}>
-                <Label
-                  white={!transparentBackground && isSelected(option)}
+                <UTLabel
+                  colorTheme={!transparentBackground && isSelected(option) ? 'light' : 'dark'}
                   style={!vertical ? styles.label : styles.verticalLabel}
-                  h4
+                  variant="subtitle1"
                 >
                   {option.name}
-                </Label>
-                <Label
+                </UTLabel>
+                <UTLabel
                   style={!vertical ? styles.label : styles.verticalLabel}
-                  white={!transparentBackground && isSelected(option)}
-                  h5
+                  colorTheme={!transparentBackground && isSelected(option) ? 'light' : 'dark'}
+                  variant="subtitle2"
                 >
                   {option.description}
-                </Label>
+                </UTLabel>
               </View>
             </View>
           </Touchable>

package/lib/components/Input/components/ShowPassword/index.js

@@ -1,22 +1,14 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import IconButton from '../../../IconButton';
+import UTButton from '../../../UTButton';
 
 import propTypes from './propTypes';
 import styles from './styles';
-import { VISIBILITY, VISIBILITY_OFF } from './constants';
 
-const ShowPassword = ({ color, onShowPassword, passwordVisible, size }) => (
+const ShowPassword = ({ onShowPassword, passwordVisible }) => (
   <View style={styles.container}>
-    <IconButton
-      color={color}
-      name={passwordVisible ? VISIBILITY : VISIBILITY_OFF}
-      onPress={onShowPassword}
-      size={size}
-      style={styles.icon}
-      type="feather"
-    />
+    <UTButton Icon={passwordVisible ? 'IconEye' : 'IconEyeOff'} onPress={onShowPassword} variant="text" />
   </View>
 );
 

package/lib/components/Input/components/ShowPassword/styles.js

@@ -7,9 +7,5 @@ export default StyleSheet.create({
     alignItems: 'flex-end',
     flexDirection: 'row',
     marginLeft: INPUT_ICON_MARGIN
-  },
-  icon: {
-    marginBottom: 1 / INPUT_ICON_MARGIN,
-    marginLeft: INPUT_ICON_MARGIN
   }
 });

package/lib/components/Loading/index.js

@@ -3,7 +3,7 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { Animated, Easing, View } from 'react-native';
 import { string, number } from 'prop-types';
 
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 import { withTheme, themeType } from '../../theming';
 
 import styles, { getAnimatedContainerStyle, getMessageStyle } from './styles';
@@ -94,7 +94,7 @@ class Loading extends Component {
         <Animated.View style={getAnimatedContainerStyle(size, fade)}>
           {layers.map(this.renderLayers)}
         </Animated.View>
-        {!!message && <Label style={[getMessageStyle(size), messageStyle]}>{message}</Label>}
+        {!!message && <UTLabel style={[getMessageStyle(size), messageStyle]}>{message}</UTLabel>}
       </View>
     );
   }

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/index.js

@@ -1,22 +1,14 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import IconButton from '../../../../../IconButton';
+import UTButton from '../../../../../UTButton';
 
 import propTypes from './propTypes';
 import styles from './styles';
-import { VISIBILITY, VISIBILITY_OFF } from './constants';
 
-const ShowPassword = ({ color, onShowPassword, passwordVisible, size }) => (
+const ShowPassword = ({ onShowPassword, passwordVisible }) => (
   <View style={styles.container}>
-    <IconButton
-      color={color}
-      name={passwordVisible ? VISIBILITY : VISIBILITY_OFF}
-      onPress={onShowPassword}
-      size={size}
-      style={styles.icon}
-      type="feather"
-    />
+    <UTButton Icon={passwordVisible ? 'IconEye' : 'IconEyeOff'} onPress={onShowPassword} variant="text" />
   </View>
 );
 

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/styles.js

@@ -7,9 +7,5 @@ export default StyleSheet.create({
     alignItems: 'flex-end',
     flexDirection: 'row',
     marginLeft: INPUT_ICON_MARGIN
-  },
-  icon: {
-    marginBottom: 1 / INPUT_ICON_MARGIN,
-    marginLeft: INPUT_ICON_MARGIN
   }
 });

package/lib/components/PhotoAlbum/index.js

@@ -4,7 +4,7 @@ import { View, TouchableOpacity, PermissionsAndroid } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { launchCamera } from 'react-native-image-picker';
 
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 import Portal from '../Portal';
 import { IS_ANDROID } from '../../utils/platformUtils/constants';
 
@@ -110,14 +110,14 @@ const PhotoAlbum = ({
   return (
     <Fragment>
       {title && (
-        <Label big semiBold color="#666666" style={styles.title}>
+        <UTLabel variant="subtitle1" weight="semibold" colorTheme="gray" style={styles.title}>
           {title}
-        </Label>
+        </UTLabel>
       )}
       {subTitle && (
-        <Label color="#3A3A3A" style={styles.subTitle}>
+        <UTLabel colorTheme="gray" style={styles.subTitle}>
           {subTitle}
-        </Label>
+        </UTLabel>
       )}
       <View style={styles.container}>
         {images.length !== 0 &&
@@ -144,7 +144,7 @@ const PhotoAlbum = ({
           <Portal>
             <View style={styles.selectedModeContainer}>
               <View style={styles.selectionLabelContainer}>
-                <Label color="white">{selectionMessage}</Label>
+                <UTLabel colorTheme="light">{selectionMessage}</UTLabel>
               </View>
               <View style={styles.buttonsContainer}>
                 {isOnlyOnePicture && (

package/lib/components/Portal/README.md

@@ -8,31 +8,29 @@ They can either be `global` portals (they always attach themselves to the node t
 ### Props
 
 | NAME   | TYPE | REQUIRED | DESCRIPTION                                                                                            |
-| ---    | ---  | ---      | ---                                                                                                    |
+| ------ | ---- | -------- | ------------------------------------------------------------------------------------------------------ |
 | global | bool | No       | Should this portal render content in the same level as the `ThemeProvider` component from `mobile-ui`? |
 
-
 #### Example
 
 ```js
-import { Label, Portal } from '@widergy/mobile-ui';
+import { UTLabel, Portal } from '@widergy/mobile-ui';
 import { View } from 'react-native';
 
 const Example = () => (
   <View>
-    <Label>Text test</Label>
-    <Label>This will be rendered behind the portal</Label>
+    <UTLabel>Text test</UTLabel>
+    <UTLabel>This will be rendered behind the portal</UTLabel>
     <Portal>
       <View>
-        <Label>This will be rendered on top of the other content!</Label>
+        <UTLabel>This will be rendered on top of the other content!</UTLabel>
       </View>
     </Portal>
     <Portal global>
       <View>
-        <Label>This will be rendered on top of everything!</Label>
+        <UTLabel>This will be rendered on top of everything!</UTLabel>
       </View>
     </Portal>
-  
   </View>
 );
 ```
@@ -45,7 +43,7 @@ The component `ThemeProvider` already has a Portal.Host.
 #### Example
 
 ```js
-import { Label, Portal } from '@widergy/mobile-ui';
+import { UTLabel, Portal } from '@widergy/mobile-ui';
 import { View } from 'react-native';
 
 const { Host } = Portal;
@@ -54,12 +52,12 @@ const Example1 = () => (
   <View>
     <Portal>
       <View>
-        <Label>This will be rendered on Example2 in the same level as the Label</Label>
+        <UTLabel>This will be rendered on Example2 in the same level as the UTLabel</UTLabel>
       </View>
     </Portal>
     <Portal global>
       <View>
-        <Label>This will be rendered on top of everything!</Label>
+        <UTLabel>This will be rendered on top of everything!</UTLabel>
       </View>
     </Portal>
   </View>
@@ -68,10 +66,9 @@ const Example1 = () => (
 const Example2 = () => (
   <View>
     <Host>
-      <Label>This will Host any local portals!</Label>
+      <UTLabel>This will Host any local portals!</UTLabel>
     </Host>
     <Example2 />
   </View>
 );
-
 ```

package/lib/components/RadioGroup/components/RadioButton/index.js

@@ -3,11 +3,11 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
 
+import { withTheme, themeType } from '../../../../theming';
+import Icon from '../../../Icon';
 import SeparatorBar from '../../../SeparatorBar';
 import Touchable from '../../../Touchable';
-import Icon from '../../../Icon';
-import Label from '../../../Label';
-import { withTheme, themeType } from '../../../../theming';
+import UTLabel from '../../../UTLabel';
 
 import styles from './styles';
 import { RADIO_CHECKED_ICON, RADIO_UNCHECKED_ICON } from './constants';
@@ -56,22 +56,30 @@ class RadioButton extends Component {
                 <View style={styles.labelsContainer}>
                   <View>
                     <View style={[styles.label, labelComponent && styles.labelComponent]}>
-                      <Label small bold={status} primary={status}>
+                      <UTLabel
+                        colorTheme={status ? 'accent' : 'dark'}
+                        variant="small"
+                        weight={status ? 'bold' : 'regular'}
+                      >
                         {label}
-                      </Label>
+                      </UTLabel>
                       {labelComponent}
                     </View>
                     {(sublabel || sublabel === 0) && (
-                      <Label disabled xsmall bold={status}>
+                      <UTLabel colorTheme="gray" variant="xsmall" weight={status ? 'bold' : 'regular'}>
                         {sublabel}
-                      </Label>
+                      </UTLabel>
                     )}
                   </View>
                 </View>
                 {labelValue && (
-                  <Label bold={status} primary={status} small>
+                  <UTLabel
+                    colorTheme={status ? 'accent' : 'dark'}
+                    variant="small"
+                    weight={status ? 'bold' : 'regular'}
+                  >
                     {labelValue}
-                  </Label>
+                  </UTLabel>
                 )}
               </Fragment>
             )}

package/lib/components/RateChart/components/CategoryButton/index.js

@@ -1,27 +1,24 @@
 import React from 'react';
-import { any, arrayOf, bool, shape, string } from 'prop-types';
-import { Linking } from 'react-native';
+import { arrayOf, bool, object, string } from 'prop-types';
+import { Linking, View } from 'react-native';
 
-import Label from '../../../Label';
-import Touchable from '../../../Touchable';
-
-import styles from './styles';
+import UTButton from '../../../UTButton';
 
 const CategoryButton = ({ category, texts, showCategory, categoryButtonUrl = '' }) => {
   const handleOpenUrl = () => Linking.openURL(categoryButtonUrl);
 
   return (
-    <Touchable onPress={() => handleOpenUrl(categoryButtonUrl)} style={styles.category}>
-      <Label bold center primary>
+    <View>
+      <UTButton onPress={() => handleOpenUrl(categoryButtonUrl)} size="large" variant="semitransparent">
         {texts?.category}
         {showCategory && ` ${category}`}
-      </Label>
-    </Touchable>
+      </UTButton>
+    </View>
   );
 };
 CategoryButton.propTypes = {
   category: string,
-  texts: arrayOf(shape(any)),
+  texts: arrayOf(object),
   showCategory: bool,
   categoryButtonUrl: string
 };

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/components/Stage/index.js

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import _ from 'lodash';
 
 import { stageType } from '../../../../../../propTypes';
-import Label from '../../../../../../../Label';
+import UTLabel from '../../../../../../../UTLabel';
 
 import SubStage from './components/SubStage';
 import styles, { MIN_STAGE_WIDTH } from './styles';
@@ -54,9 +54,9 @@ const Stage = ({ stage, rateStages, totalSubStages, withoutStages, getStageColor
       {totalStages !== 1 && !withoutStages && (
         <View style={styles.label}>
           <View style={styles.rateLabelContainer}>
-            <Label small white>
+            <UTLabel variant="small" colorTheme="light">
               {stage.group}
-            </Label>
+            </UTLabel>
           </View>
         </View>
       )}