@widergy/mobile-ui 1.24.1 → 1.25.1

package/lib/components/UTLabel/README.md

@@ -6,17 +6,19 @@
 
 ## Props
 
-| Name              | Type   | Default   | Description                                                                                                                                                                                                           |
-| ----------------- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| colorTheme        | string | 'dark'    | Color theme to style the `UTLabel`. It must be defined in the project theme. [Example](#colortheme).                                                                                                                  |
-| field             | any    | {}        | Field configuration for advanced customization.                                                                                                                                                                       |
-| markdownRenderers | object |           | ⚠️ Requires `withMarkdown` to be set to `true`. Object mapping tag names to React components. The keys in components are HTML equivalents for the things you write with markdown [List of tags](#markdown-renderers). |
-| numberOfLines     | number |           | Limits the number of lines displayed in the label. When set, `ellipsizeMode` is automatically set to 'tail'.                                                                                                          |
-| shade             | string |           | The color theme shade.                                                                                                                                                                                                |
-| style             | object | {}        | Additional style.                                                                                                                                                                                                     |
-| variant           | string | 'body'    | Defines the font size and component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire project) through the project's theme.                         |
-| weight            | string | 'regular' | Defines the font weight to be used. For a list of available options, check [here](#weights).                                                                                                                          |
-| withMarkdown      | bool   | false     | Indicates whether or not to render text inside as markdown.                                                                                                                                                           |
+| Name           | Type   | Default   | Description                                                                                                                                                                                   |
+| -------------- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| colorTheme     | string | 'dark'    | Color theme to style the `UTLabel`. It must be defined in the project theme. [Example](#colortheme).                                                                                          |
+| field          | any    | {}        | Field configuration for advanced customization.                                                                                                                                               |
+| markdownStyles | object | {}        | Custom styles for rendering markdown content. This allows overriding default markdown styles like lists, links, etc.                                                                          |
+| numberOfLines  | number |           | Limits the number of lines displayed in the label. When set, `ellipsizeMode` is automatically set to 'tail'.                                                                                  |
+| onLinkPress    | func   |           | Callback function to handle link presses in markdown content. It is only used when `withMarkdown` is true.                                                                                    |
+| onTextLayout   | func   |           | Callback function that is triggered when the text layout changes. Useful for getting information about the text rendering (like the number of lines).                                         |
+| shade          | string |           | The color theme shade.                                                                                                                                                                        |
+| style          | object | {}        | Additional style.                                                                                                                                                                             |
+| variant        | string | 'body'    | Defines the font size and component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire project) through the project's theme. |
+| weight         | string | 'regular' | Defines the font weight to be used. For a list of available options, check [here](#weights).                                                                                                  |
+| withMarkdown   | bool   | false     | Indicates whether or not to render text inside as markdown.                                                                                                                                   |
 
 ## Color Themes
 

package/lib/components/UTLabel/constants.js

@@ -1,5 +1,3 @@
-import { COLOR_THEMES } from '../../constants/Palette';
-
 export const VARIANTS_SIZES = {
   title1: 30,
   title2: 24,
@@ -30,12 +28,3 @@ export const WEIGHTS = {
   extrabold: 800,
   black: 900
 };
-
-export const DEFAULT_PROPS = {
-  colorTheme: COLOR_THEMES.dark,
-  field: {},
-  style: {},
-  variant: 'body',
-  weight: 'regular',
-  withMarkdown: false
-};

package/lib/components/UTLabel/index.js

@@ -6,14 +6,16 @@ import { useTheme } from '../../theming';
 
 import { markdownFormat } from './utils';
 import { retrieveStyle } from './theme';
-import { defaultProps, propTypes } from './proptypes';
+import { DEFAULT_PROPS, propTypes } from './proptypes';
 
 const UTLabel = ({
   children,
   colorTheme,
   field,
-  markdownRenderers,
+  markdownStyles,
   numberOfLines,
+  onLinkPress,
+  onTextLayout,
   shade,
   style,
   variant,
@@ -34,15 +36,20 @@ const UTLabel = ({
   return (
     <LabelRenderer
       {...additionalProps}
-      rules={markdownRenderers}
-      style={withMarkdown ? { body: labelStyles, paragraph: { marginTop: 0, marginBottom: 0 } } : labelStyles}
+      onLinkPress={onLinkPress}
+      onTextLayout={onTextLayout}
+      style={
+        withMarkdown
+          ? { ...markdownStyles, body: labelStyles, paragraph: { marginTop: 0, marginBottom: 0 } }
+          : labelStyles
+      }
     >
       {withMarkdown ? markdownFormat(children) : children}
     </LabelRenderer>
   );
 };
 
-UTLabel.defaultProps = defaultProps;
+UTLabel.defaultProps = DEFAULT_PROPS;
 UTLabel.propTypes = propTypes;
 
 export default UTLabel;

package/lib/components/UTLabel/proptypes.js

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

package/lib/components/UTLabel/theme.js

@@ -2,7 +2,8 @@ import { COLOR_SHADES } from '../../constants/Palette';
 import { getDefaultColorShade } from '../../utils/styleUtils';
 import { IS_IOS } from '../../utils/platformUtils/constants';
 
-import { DEFAULT_PROPS, LINE_HEIGHTS, VARIANTS_SIZES, WEIGHTS } from './constants';
+import { LINE_HEIGHTS, VARIANTS_SIZES, WEIGHTS } from './constants';
+import { DEFAULT_PROPS } from './proptypes';
 
 const variantsColorTheme = (colorTheme, shade, theme) => {
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.colorTheme];

package/lib/components/UTLoading/README.md

@@ -23,7 +23,7 @@ Wraps a component within a screen and displays a loading indicator until it's do
 import { Loading } from "@widergy/mobile-ui";
 
   return (
-    <Label>This component does not depend on the loader</Label>
+    <UTLabel>This component does not depend on the loader</UTLabel>
     <UTLoading
       loading={this.props.loading}
       color="blue"

package/lib/components/UTModal/index.js

@@ -3,16 +3,13 @@ import { View, TouchableWithoutFeedback, Keyboard, Modal, ImageBackground } from
 import _ from 'lodash';
 
 import UTLabel from '../UTLabel';
-import Button from '../Button';
-import Touchable from '../Touchable';
-import Icon from '../Icon';
 import { useTheme } from '../../theming';
 import UTLoading from '../UTLoading';
 import SeparatorBar from '../SeparatorBar';
+import UTButton from '../UTButton';
 
 import ModalTypes from './proptypes';
 import ownStyles from './styles';
-import { CLOSE_ICON } from './constants';
 
 const UTModal = ({
   acceptButton,
@@ -20,13 +17,12 @@ const UTModal = ({
   backgroundStyles,
   cancelButton,
   children,
-  color,
+  closeButtonColorTheme,
   disableTouchable,
   hideCloseButton,
   hideSeparatorBar,
   imageComponent,
   imageStyles,
-  labelProps,
   loading,
   loadingText,
   modalBackgroundColor,
@@ -70,22 +66,26 @@ const UTModal = ({
                 {!!imageComponent && (
                   <View style={[styles.content, imageStyles]}>
                     {!hideCloseButton && (
-                      <Touchable
-                        borderless
-                        style={styles.closeIcon}
+                      <UTButton
+                        colorTheme={closeButtonColorTheme}
+                        Icon="IconX"
                         onPress={onRequestClose || cancelButton.onPress}
-                      >
-                        <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
-                      </Touchable>
+                        style={{ root: styles.closeButton }}
+                        variant="text"
+                      />
                     )}
                     <View style={styles.imageContainer}>{imageComponent}</View>
                   </View>
                 )}
                 <View style={styles.content}>
                   {!backgroundImg && !imageComponent && !hideCloseButton && (
-                    <Touchable borderless style={styles.closeIcon} onPress={onRequestClose}>
-                      <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
-                    </Touchable>
+                    <UTButton
+                      colorTheme={closeButtonColorTheme}
+                      Icon="IconX"
+                      onPress={onRequestClose}
+                      style={{ root: styles.closeButton }}
+                      variant="text"
+                    />
                   )}
 
                   {!!title && (
@@ -104,42 +104,23 @@ const UTModal = ({
                 {!hideSeparatorBar && <SeparatorBar />}
                 <View style={styles.buttonsContainer}>
                   {!!cancelButton && (
-                    <Button
-                      borderless
-                      lowerCase
-                      mode="text"
-                      elevation={0}
-                      containerStyle={[
-                        styles.containerStyle,
-                        { backgroundColor: cancelButton.backgroundColor }
-                      ]}
-                      title={cancelButton.text || 'Cancelar'}
-                      onPress={cancelButton.onPress}
+                    <UTButton
+                      colorTheme={cancelButton.colorTheme || 'secondary'}
                       disabled={cancelButton.disabled || loading}
-                      labelColor={cancelButton.textColor || theme.button.defaultButtonColor}
-                      titleStyle={styles.buttonText}
-                    />
+                      onPress={cancelButton.onPress}
+                      variant="text"
+                    >
+                      {cancelButton.text || 'Cancelar'}
+                    </UTButton>
                   )}
                   {!!acceptButton && (
-                    <Button
-                      borderless
-                      lowerCase
-                      mode="text"
-                      elevation={0}
-                      outerContainerStyles={styles.outerContainerStyles}
-                      containerStyle={[
-                        styles.containerStyle,
-                        { backgroundColor: acceptButton.backgroundColor ?? theme.button.defaultButtonColor },
-                        // eslint-disable-next-line react-native/no-inline-styles
-                        acceptButton.disabled && { opacity: 0.5 }
-                      ]}
-                      title={acceptButton.text || 'Aceptar'}
-                      onPress={acceptButton.onPress}
+                    <UTButton
+                      colorTheme={acceptButton.colorTheme || 'primary'}
                       disabled={acceptButton.disabled || loading}
-                      labelColor={acceptButton.textColor || theme.colors.buttonLabelColor}
-                      titleStyle={styles.buttonText}
-                      labelProps={labelProps}
-                    />
+                      onPress={acceptButton.onPress}
+                    >
+                      {acceptButton.text || 'Aceptar'}
+                    </UTButton>
                   )}
                 </View>
               </View>

package/lib/components/UTModal/proptypes.js

@@ -18,12 +18,12 @@ export default {
   backgroundImg: number,
   backgroundStyles: ViewPropTypes.style,
   cancelButton: buttonPropType,
+  closeButtonColorTheme: string,
   disableTouchable: bool,
   fill: string,
   hideCloseButton: bool,
   image: element,
   imageStyles: ViewPropTypes.style,
-  labelProps: shape(bool),
   loading: bool,
   loadingText: string,
   modalBackgroundColor: string,

package/lib/components/UTModal/styles.js

@@ -1,16 +1,8 @@
 import { StyleSheet } from 'react-native';
 
-import { verticalScale, moderateHorizontalScale, WINDOW_HEIGHT } from '../../utils/scaleUtils';
-import { DEFAULT_ICON_SIZE } from '../Icon/constants';
-import { ICON_MARGIN } from '../IconButton/styles';
+import { verticalScale, WINDOW_HEIGHT } from '../../utils/scaleUtils';
 
 export default StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: verticalScale(4),
-    width: '100%'
-  },
   modalBackground: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)',
     flex: 1,
@@ -21,25 +13,26 @@ export default StyleSheet.create({
     flex: 1
   },
   innerContainer: {
-    backgroundColor: 'white',
-    borderRadius: 15,
     alignItems: 'stretch',
     alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 15,
     width: '100%'
   },
   buttonsContainer: {
+    alignItems: 'center',
+    columnGap: 12,
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    alignItems: 'center',
     padding: 16
   },
   viewContainer: {
     flex: 1
   },
   loading: {
+    alignItems: 'center',
     height: WINDOW_HEIGHT * 0.3,
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: 'center'
   },
   title: {
     marginBottom: 12
@@ -47,36 +40,17 @@ export default StyleSheet.create({
   subtitle: {
     marginBottom: 12
   },
-  buttonText: {
-    fontWeight: 'normal',
-    padding: 0,
-    margin: 0
-  },
   content: {
     padding: 16,
     paddingBottom: 5
   },
-  closeIcon: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: (DEFAULT_ICON_SIZE + ICON_MARGIN) / 2,
-    height: DEFAULT_ICON_SIZE + ICON_MARGIN,
-    width: DEFAULT_ICON_SIZE + ICON_MARGIN,
+  closeButton: {
     alignSelf: 'flex-end'
   },
   imageContainer: {
     alignItems: 'center',
+    height: verticalScale(35),
     justifyContent: 'center',
-    marginBottom: verticalScale(25),
-    height: verticalScale(35)
-  },
-  iconSpacing: {
-    marginRight: moderateHorizontalScale(10)
-  },
-  containerStyle: {
-    borderRadius: 25,
-    justifyContent: 'center',
-    marginHorizontal: moderateHorizontalScale(5)
-  },
-  disabledContainer: { opacity: 0.5 }
+    marginBottom: verticalScale(25)
+  }
 });

package/lib/components/UTOnBoarding/components/CardContent/index.js

@@ -2,8 +2,8 @@
 import React, { Fragment } from 'react';
 import { Animated } from 'react-native';
 
-import Label from '../../../Label';
-import Button from '../../../Button';
+import UTLabel from '../../../UTLabel';
+import UTButton from '../../../UTButton';
 
 import propTypes from './propTypes';
 import ownStyles from './styles';
@@ -11,21 +11,20 @@ import ownStyles from './styles';
 const CardContent = ({ onPress, currentPage, opacity, styles, buttonTitle = '', disabled }) => (
   <Fragment>
     <Animated.View style={[styles?.textContainer, { opacity }]}>
-      <Label big bold style={styles?.title}>
+      <UTLabel variant="subtitle1" weight="bold" style={styles?.title}>
         {currentPage?.title || ''}
-      </Label>
-      <Label medium style={styles?.description}>
-        {currentPage?.description || ''}
-      </Label>
+      </UTLabel>
+      <UTLabel style={styles?.description}>{currentPage?.description || ''}</UTLabel>
     </Animated.View>
-    <Button
-      outerContainerStyles={ownStyles.buttonContainer}
-      mode="text"
-      title={buttonTitle || ''}
+    <UTButton
+      variant="text"
       onPress={onPress}
-      {...styles?.buttonProps}
       disabled={disabled}
-    />
+      size="large"
+      style={{ root: ownStyles.buttonContainer }}
+    >
+      {buttonTitle || ''}
+    </UTButton>
   </Fragment>
 );
 

package/lib/components/UTProgressBar/index.js

@@ -7,7 +7,7 @@ import _ from 'lodash';
 import { Svg, Defs, Pattern, Path, Rect } from 'react-native-svg';
 
 import { useTheme } from '../../theming';
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 
 import createStyles, { BorderStyles } from './styles';
 import { formatPercentage } from './utils';
@@ -86,7 +86,7 @@ const UTProgressBar = ({ value = 0, styles, showPercentage }) => {
         <View />
       </View>
       {showPercentage && (
-        <Label style={[ownStyles.label, themedStyles?.label]}>{formatPercentage(value)}</Label>
+        <UTLabel style={[ownStyles.label, themedStyles?.label]}>{formatPercentage(value)}</UTLabel>
       )}
     </View>
   );

package/lib/components/UTStepFeedback/index.js

@@ -3,13 +3,12 @@ import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { Animated, TouchableOpacity, View } from 'react-native';
 import _ from 'lodash';
 
-import IconButton from '../IconButton';
 import Label from '../Label';
 import { useTheme } from '../../theming';
+import UTButton from '../UTButton';
 
 import CircleNumber from './components/CircleNumber';
 import ownStyles, {
-  DEFAULT_ICON_SIZE,
   getStepVariantStyle,
   COMMON_CONTAINER_PADDING,
   DEFAULT_VARIANTS_STEP_SIZE
@@ -33,7 +32,6 @@ const StepFeedback = ({
   currentStep,
   disableTriangle,
   hideStepNumber,
-  iconSize,
   labelsCentered,
   onClose,
   onStepPress,
@@ -140,12 +138,12 @@ const StepFeedback = ({
   return (
     <View onLayout={handleContainerLayout} style={styles.bigContainer}>
       {!!onClose && (
-        <IconButton
-          style={styles.closeButton}
-          name="close"
-          size={iconSize || DEFAULT_ICON_SIZE}
-          color="black"
+        <UTButton
+          Icon="IconX"
           onPress={onClose}
+          size="small"
+          style={{ root: styles.closeButton, icon: styles.icon }}
+          variant="text"
         />
       )}
       <View style={titleBottom && styles.containerReverse}>

package/lib/components/UTStepFeedback/proptypes.js

@@ -10,7 +10,6 @@ export default {
   currentStep: string.isRequired,
   disableTriangle: bool,
   hideStepNumber: bool,
-  iconSize: number,
   onClose: func,
   onStepPress: func,
   steps: arrayOf(stepPropType).isRequired,

package/lib/components/UTStepFeedback/styles.js

@@ -8,7 +8,6 @@ const STEP_SIZE_BIG = verticalScale(40);
 const STEP_BORDER = verticalScale(2 - StyleSheet.hairlineWidth);
 
 export const CHECK_ICON_SIZE = verticalScale(19);
-export const DEFAULT_ICON_SIZE = verticalScale(20);
 export const COMMON_CONTAINER_PADDING = verticalScale(20);
 
 export const DEFAULT_VARIANTS_STEP_SIZE = {
@@ -129,9 +128,16 @@ export default StyleSheet.create({
     justifyContent: 'flex-end'
   },
   closeButton: {
+    alignItems: 'center',
     alignSelf: 'flex-end',
+    borderRadius: 40,
+    marginBottom: 10,
     marginRight: 20,
-    marginBottom: 10
+    paddingHorizontal: 4
+  },
+  icon: {
+    minHeight: 30,
+    minWidth: 30
   },
   title: {
     alignSelf: 'flex-start',

package/lib/components/UTTextInput/versions/V0/flavors/OutlinedInput/index.js

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { withTheme } from '../../../../../../theming';
 import CaptionLabel from '../../../../../CaptionLabel';
 import InputTypes from '../../proptypes';
-import Label from '../../../../../Label';
+import UTLabel from '../../../../../UTLabel';
 import UTTooltip from '../../../../../UTTooltip';
 import BaseInput from '../../components/BaseInput';
 import InputLabel from '../../components/InputLabel';
@@ -150,7 +150,7 @@ const OutlinedInput = ({
         </View>
         {!!tooltip && (
           <View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>
-            <UTTooltip content={<Label>{tooltip}</Label>} position="left" {...tooltipProps}>
+            <UTTooltip content={<UTLabel>{tooltip}</UTLabel>} position="left" {...tooltipProps}>
               <Icon
                 name="questioncircleo"
                 type="antdesign"

package/lib/theming/README.md

@@ -31,7 +31,7 @@ This HOC lets you access to the `theme` object as a prop.
 #### Example
 
 ```js
-const MyComponent = ({ size, theme }) => <Label color={theme.colors.primary}>Hello World!</Label>;
+const MyComponent = ({ size, theme }) => <UTLabel colorTheme="accent">Hello World!</UTLabel>;
 
 export default withTheme(MyComponent);
 ```

package/lib/utils/styleUtils/index.js

@@ -30,7 +30,7 @@ const shadowLevels = {
   }
 };
 
-export const getShadow = ({ level, theme, position }) => {
+export const getShadow = ({ color, level, theme, position }) => {
   if (!level) {
     return {};
   }
@@ -52,7 +52,7 @@ export const getShadow = ({ level, theme, position }) => {
 
   return {
     elevation,
-    shadowColor: theme.Palette.dark['05'],
+    shadowColor: color || theme.Palette.dark['05'],
     shadowOffset: {
       height: adjustedHeight,
       width: 0

package/package.json

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

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

@@ -1,16 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const retrieveStyles = theme => ({ ...theme?.RateAndCategory });
-
-export default StyleSheet.create({
-  category: {
-    justifyContent: 'center',
-    alignContent: 'center',
-    alignSelf: 'flex-end',
-    borderRadius: 5,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    marginTop: 6,
-    backgroundColor: '#EDF4FE'
-  }
-});