@widergy/mobile-ui 1.10.2 → 1.10.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.10.3](https://github.com/widergy/mobile-ui/compare/v1.10.2...v1.10.3) (2024-05-24)
+
+
+### Bug Fixes
+
+* add button component ([#277](https://github.com/widergy/mobile-ui/issues/277)) ([14407ae](https://github.com/widergy/mobile-ui/commit/14407ae6d65e5cf949950c7e359fc16892756cf0))
+
 ## [1.10.2](https://github.com/widergy/mobile-ui/compare/v1.10.1...v1.10.2) (2024-05-22)
 
 

package/lib/components/Snackbar/index.js

@@ -7,7 +7,7 @@ import { withTheme, themeType } from '../../theming';
 import IconButton from '../IconButton';
 import Label from '../Label';
 import { IS_ANDROID } from '../../utils/platformUtils/constants';
-import { SHADOW_COLOR, SHADOW_OPACITY } from '../Surface/constants';
+import { SHADOW_COLOR, SHADOW_OPACITY } from '../../utils/styleUtils';
 
 import styles, { alertStyleMapper } from './styles';
 import { INFO, DURATION } from './constants';

package/lib/components/Surface/constants.js

@@ -1,31 +1 @@
 export const DEFAULT_ELEVATION = 2;
-
-export const SHADOW_COLOR = 'black';
-export const SHADOW_OPACITY = 0.24;
-
-export const calculateShadow = elevation => {
-  let height;
-  let radius;
-  switch (elevation) {
-    case 1:
-      height = 0.5;
-      radius = 0.75;
-      break;
-    case 2:
-      height = 0.75;
-      radius = 1.5;
-      break;
-    default:
-      height = elevation - 1;
-      radius = elevation;
-  }
-  return {
-    shadowColor: SHADOW_COLOR,
-    shadowOffset: {
-      width: 0,
-      height
-    },
-    shadowOpacity: SHADOW_OPACITY,
-    shadowRadius: radius
-  };
-};

package/lib/components/Surface/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
-import { IS_ANDROID } from '../../utils/platformUtils/constants';
+import { getShadow } from '../../utils/styleUtils';
 
+import { DEFAULT_ELEVATION } from './constants';
 import propTypes from './propTypes';
 import styles from './styles';
-import { DEFAULT_ELEVATION, calculateShadow } from './constants';
 
 const Surface = ({ children, elevation, style, ...props }) => {
-  const shadow = !IS_ANDROID ? calculateShadow(elevation) : { elevation };
+  const shadow = getShadow(elevation);
   const flatStyles = style ? StyleSheet.flatten(style) : {};
   return (
     <Animated.View style={[styles.container, flatStyles, shadow]} {...props}>

package/lib/components/UTButton/README.md

@@ -0,0 +1,34 @@
+# UTButton
+
+### Description
+Basic button component.
+
+### Variants
+These variants were defined by the UX team and are:
+
+- `filled`
+- `outlined`
+- `text`
+- `semitransparent`
+
+All these variants are defined in the component theme.
+
+### Color Themes
+The color themes are defined by the component consumer and will vary accordingly.They define a set of variables (colors and opacities) that then combined with the variant will change how the buttons looks. 
+The components supports an infinite amount of color themes but requieres the consumer to pass at least a `primary` one that works as a default.
+
+### Props
+
+| Name                 | Type                                                  | Default   | Description                                                                    |
+|----------------------|-------------------------------------------------------|-----------|--------------------------------------------------------------------------------|
+| children             | node                                                  |           | The component contents.                                                        |
+| classNames           | object                                                |           | Overrides the default button theme.                                            |
+| colorTheme           | string                                                | 'primary' | The color theme to use.                                                        |
+| disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
+| Icon                 | node                                                  |           | An Icon component that can be displayed within the button.                     |
+| iconPlacement        | 'left' \| 'right'                                     | 'left'    | Indicates where the icon is placed in relation with the contents of the button |
+| loading              | bool                                                  | false     | If `true` a spinner is shown over the component.                               |
+| onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
+| showTextOnResponsive | bool                                                  | false     | If `true` and Icon is not `null` the contents of the button are not displayed. |
+| size                 | 'small' \| 'medium' \| 'large'                        | 'medium'  | The size of the component.                                                     |
+| variant              | 'filled' \| 'outlined' \| 'text' \| 'semitransparent' | 'filled'  | The variant to use.                                                            |

package/lib/components/UTButton/constants.js

@@ -0,0 +1,30 @@
+export const ELEVATION = 3;
+export const PRESSED_ELEVATION = 6;
+
+export const SIZES = {
+  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'
+};
+
+export const COLORS_MAPPER = {
+  error: 'error',
+  negative: 'negative',
+  primary: 'accent',
+  secondary: 'neutral',
+  success: 'success'
+};

package/lib/components/UTButton/index.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { bool, func, elementType, objectOf, string } from 'prop-types';
+import { Pressable, Text, View } from 'react-native';
+
+import { withTheme } from '../../theming';
+import UTIcon from '../UTIcon';
+import UTLoading from '../UTLoading';
+
+import { DEFAULT_PROPS, ICON_PLACEMENTS } from './constants';
+import { retrieveStyle } from './theme';
+import { isReactComponent } from './utils';
+
+const UTButton = ({
+  children,
+  classNames,
+  colorTheme,
+  disabled,
+  Icon,
+  iconPlacement,
+  loading,
+  onPress,
+  size,
+  theme,
+  variant
+}) => {
+  const {
+    buttonStyles: themeButtonStyles,
+    childrenContainerStyles: themeChildrenContainerStyles,
+    disabled: disabledStyles,
+    iconStyles: themeIconStyles,
+    textStyles: themeTextStyles
+  } = retrieveStyle({
+    classNames,
+    colorTheme,
+    iconPlacement,
+    size,
+    theme,
+    variant
+  });
+
+  const iconClassname = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
+
+  const buttonClassname = ({ pressed }) => [
+    themeButtonStyles,
+    (disabled || loading) && disabledStyles,
+    pressed ? themeButtonStyles.pressed : themeButtonStyles.notPressed
+  ];
+
+  const textClassname = themeTextStyles;
+
+  const IconToShow =
+    Icon &&
+    (isReactComponent(Icon) ? (
+      <Icon style={iconClassname} fill={themeTextStyles.color} />
+    ) : (
+      <UTIcon color={themeTextStyles.color} style={iconClassname} size={iconClassname.fontSize} {...Icon} />
+    ));
+
+  const RenderedChildren = (
+    <View style={themeChildrenContainerStyles}>
+      {iconPlacement === ICON_PLACEMENTS.left && IconToShow}
+      {children && <Text style={textClassname}>{children}</Text>}
+      {iconPlacement !== ICON_PLACEMENTS.left && IconToShow}
+    </View>
+  );
+
+  return (
+    <Pressable disabled={disabled || loading} onPress={onPress} style={buttonClassname}>
+      <UTLoading color={themeTextStyles.color} loading={loading} size={24} thickness={2}>
+        {RenderedChildren}
+      </UTLoading>
+    </Pressable>
+  );
+};
+
+UTButton.defaultProps = DEFAULT_PROPS;
+
+UTButton.propTypes = {
+  classNames: objectOf(string),
+  colorTheme: string,
+  disabled: bool,
+  Icon: elementType,
+  iconPlacement: string,
+  loading: bool,
+  onPress: func,
+  size: string,
+  theme: objectOf(string),
+  variant: string
+};
+
+export default withTheme(UTButton);

package/lib/components/UTButton/theme.js

@@ -0,0 +1,227 @@
+import { getShadow } from '../../utils/styleUtils';
+
+import { COLORS_MAPPER, DEFAULT_PROPS, ELEVATION, PRESSED_ELEVATION } from './constants';
+
+const baseButtonTheme = theme => ({
+  text: {
+    fontFamily: theme.fonts.fontFamily,
+    fontSize: 16,
+    fontWeight: '500',
+    lineHeight: 22,
+    textTransform: 'none'
+  },
+  button: {
+    borderRadius: 4,
+    borderWidth: 0,
+    minWidth: 'auto',
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  icon: {
+    fontSize: 20
+  },
+  iconOnly: {
+    fontSize: 24,
+    height: 24,
+    marginHorizontal: -4,
+    marginLeft: 0,
+    marginRight: 0,
+    width: 24
+  },
+  childrenContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start'
+  }
+});
+
+const variantsColorTheme = (theme, colorTheme, variant) => {
+  const actionColorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
+  const actionTheme = theme.Palette.actions[actionColorName];
+  const negativeTheme = theme.Palette.actions[COLORS_MAPPER.negative];
+  const neutralTheme = theme.Palette.actions[COLORS_MAPPER.secondary];
+  const shadow = getShadow(ELEVATION);
+  const pressedShadow = getShadow(PRESSED_ELEVATION);
+
+  const definition = {
+    filled: {
+      button: {
+        backgroundColor: actionTheme['04'],
+        borderColor: 'transparent',
+        borderWidth: 1,
+        fill: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+        pressed: {
+          backgroundColor: actionTheme['05']
+        }
+      },
+      text: {
+        color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']
+      },
+      disabled: {
+        backgroundColor: actionTheme['04'],
+        color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+        opacity: 0.5
+      }
+    },
+    semitransparent: {
+      button: {
+        backgroundColor: actionTheme['01'],
+        borderWidth: 1,
+        borderColor: 'transparent',
+        fill: actionTheme['05'],
+        pressed: {
+          backgroundColor: actionTheme['03']
+        }
+      },
+      text: {
+        color: actionTheme['05']
+      },
+      disabled: {
+        backgroundColor: actionTheme['01'],
+        color: actionTheme['05'],
+        opacity: 0.5
+      }
+    },
+    outlined: {
+      button: {
+        borderWidth: 1,
+        borderColor: actionTheme['05'],
+        fill: actionTheme['05'],
+        pressed: {
+          backgroundColor: actionTheme['02']
+        }
+      },
+      text: {
+        color: actionTheme['05']
+      },
+      disabled: {
+        borderWidth: 1,
+        borderColor: actionTheme['05'],
+        color: actionTheme['05'],
+        opacity: 0.5
+      }
+    },
+    text: {
+      button: {
+        borderWidth: 1,
+        borderColor: 'transparent',
+        fill: actionTheme['05'],
+        pressed: {
+          backgroundColor: actionTheme['02']
+        }
+      },
+      text: {
+        color: actionTheme['05']
+      },
+      disabled: {
+        color: actionTheme['05'],
+        opacity: 0.5
+      }
+    },
+    shadow: {
+      button: {
+        backgroundColor: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+        borderWidth: 1,
+        borderColor: 'transparent',
+        fill: actionTheme['05'],
+        pressed: {
+          ...(colorTheme === COLORS_MAPPER.negative ? {} : pressedShadow),
+          backgroundColor: actionTheme['02']
+        },
+        notPressed: shadow
+      },
+      text: {
+        color: actionTheme['05']
+      },
+      disabled: {
+        color: actionTheme['05'],
+        opacity: 0.5
+      }
+    }
+  };
+
+  return definition[variant] || definition[DEFAULT_PROPS.variant];
+};
+
+const sizeButtonTheme = size => {
+  const definition = {
+    large: {
+      button: {
+        paddingHorizontal: 16,
+        paddingVertical: 12
+      },
+      text: {
+        fontSize: 16,
+        fontWeight: '500'
+      },
+      icon: {
+        fontSize: 20
+      },
+      iconOnly: {
+        fontSize: 24
+      }
+    },
+    small: {
+      button: {
+        paddingHorizontal: 8,
+        paddingVertical: 4
+      },
+      text: {
+        fontSize: 14,
+        fontWeight: '500'
+      },
+      icon: {
+        fontSize: 20
+      },
+      iconOnly: {
+        fontSize: 24
+      }
+    }
+  };
+
+  return definition[size] || {};
+};
+
+const iconButtonPlacementTheme = iconPlacement => {
+  const definition = {
+    left: {
+      marginRight: 8
+    },
+    right: {
+      marginLeft: 8
+    }
+  };
+  return definition[iconPlacement] || {};
+};
+
+export const retrieveStyle = ({ classNames = {}, colorTheme, variant, theme, size, iconPlacement }) => {
+  const baseTheme = baseButtonTheme(theme);
+  const variantTheme = variantsColorTheme(theme, colorTheme, variant);
+  const sizeTheme = sizeButtonTheme(size);
+  const iconPlacementTheme = iconButtonPlacementTheme(iconPlacement);
+
+  const buttonStyles = {
+    ...baseTheme.button,
+    ...variantTheme.button,
+    ...sizeTheme.button,
+    ...classNames.root
+  };
+
+  const textStyles = {
+    ...baseTheme.text,
+    ...variantTheme.text,
+    ...sizeTheme.text
+  };
+
+  const iconStyles = {
+    icon: { ...baseTheme.icon, ...sizeTheme.icon, ...iconPlacementTheme, ...classNames.icon },
+    iconOnly: { ...baseTheme.iconOnly, ...sizeTheme.iconOnly, ...classNames.icon }
+  };
+
+  const childrenContainerStyles = { ...baseTheme.childrenContainer, ...classNames.childrenContainer };
+
+  const { disabled } = variantTheme;
+
+  return { buttonStyles, textStyles, disabledStyles: disabled, iconStyles, childrenContainerStyles };
+};

package/lib/components/UTButton/utils.js

@@ -0,0 +1 @@
+export const isReactComponent = icon => typeof icon === 'function';

package/lib/index.js

@@ -1,5 +1,10 @@
+import ReactotronConfig from './reactotronConfig'; // Importa la configuración de Reactotron
+
+ReactotronConfig();
+
 // Buttons
 export { default as Button } from './components/Button';
+export { default as UTButton } from './components/UTButton';
 export { default as IconButton } from './components/IconButton';
 export { default as ImageButton } from './components/ImageButton';
 export { default as Touchable } from './components/Touchable';

package/lib/reactotronConfig.js

@@ -0,0 +1,7 @@
+import Reactotron from 'reactotron-react-native';
+
+const configureReactotron = () => {
+  Reactotron.configure().useReactNative().connect();
+};
+
+export default configureReactotron;

package/lib/theming/DefaultTheme.js

@@ -2,6 +2,76 @@ import { shape, string, number, object } from 'prop-types';
 
 import { moderateHorizontalScale, verticalScale } from '../utils/scaleUtils';
 
+const colors = {
+  actionAccent01: '#FCF1E5',
+  actionAccent02: '#F8DCBF',
+  actionAccent03: '#EB9540',
+  actionAccent04: '#E57200',
+  actionAccent05: '#8F3300',
+
+  actionNeutral01: '#E5ECF0',
+  actionNeutral02: '#BFD0DB',
+  actionNeutral03: '#407495',
+  actionNeutral04: '#004571',
+  actionNeutral05: '#00385C',
+
+  actionError01: '#FFEBEE',
+  actionError02: '#FECED5',
+  actionError03: '#FD6F85',
+  actionError04: '#E80C2C',
+  actionError05: '#A0041B',
+
+  actionNegative01: 'rgba(255, 255, 255, 0.1)',
+  actionNegative02: 'rgba(255, 255, 255, 0.25)',
+  actionNegative03: 'rgba(255, 255, 255, 0.5)',
+  actionNegative04: '#FFFFFF',
+  actionNegative05: '#FFFFFF',
+
+  semanticSuccess01: '#EEF9E6',
+  semanticSuccess02: '#D3F0C0',
+  semanticSuccess03: '#80D249',
+  semanticSuccess04: '#3F8411',
+  semanticSuccess05: '#245702'
+};
+
+const actions = {
+  accent: {
+    '01': colors.actionAccent01,
+    '02': colors.actionAccent02,
+    '03': colors.actionAccent03,
+    '04': colors.actionAccent04,
+    '05': colors.actionAccent05
+  },
+  neutral: {
+    '01': colors.actionNeutral01,
+    '02': colors.actionNeutral02,
+    '03': colors.actionNeutral03,
+    '04': colors.actionNeutral04,
+    '05': colors.actionNeutral05
+  },
+  error: {
+    '01': colors.actionError01,
+    '02': colors.actionError02,
+    '03': colors.actionError03,
+    '04': colors.actionError04,
+    '05': colors.actionError05
+  },
+  success: {
+    '01': colors.semanticSuccess01,
+    '02': colors.semanticSuccess02,
+    '03': colors.semanticSuccess03,
+    '04': colors.semanticSuccess04,
+    '05': colors.semanticSuccess05
+  },
+  negative: {
+    '01': colors.actionNegative01,
+    '02': colors.actionNegative02,
+    '03': colors.actionNegative03,
+    '04': colors.actionNegative04,
+    '05': colors.actionNegative05
+  }
+};
+
 const DefaultTheme = {
   alert: {
     info: '#0065A3',
@@ -164,43 +234,7 @@ const DefaultTheme = {
       '04': '#037C96',
       '05': '#025F73'
     },
-    actions: {
-      accent: {
-        '01': '#E7F0EE',
-        '02': '#C3D9D5',
-        '03': '#4A8D83',
-        '04': '#0D6759',
-        '05': '#0D6759'
-      },
-      neutral: {
-        '01': '#E8ECED',
-        '02': '#C6D0D3',
-        '03': '#54737B',
-        '04': '#1B444F',
-        '05': '#1B444F'
-      },
-      error: {
-        '01': '#FFEBEE',
-        '02': '#FECED5',
-        '03': '#FD6F85',
-        '04': '#E80C2C',
-        '05': '#A0041B'
-      },
-      success: {
-        '01': '#EEF9E6',
-        '02': '#D3F0C0',
-        '03': '#80D249',
-        '04': '#3F8411',
-        '05': '#245702'
-      },
-      negative: {
-        '01': 'rgba(255, 255, 255, 0.1)',
-        '02': 'rgba(255, 255, 255, 0.25)',
-        '03': 'rgba(255, 255, 255, 0.5)',
-        '04': '#FFFFFF',
-        '05': '#FFFFFF'
-      }
-    }
+    actions
   }
 };
 

package/lib/utils/styleUtils/index.js

@@ -1,3 +1,37 @@
+import { IS_ANDROID } from '../platformUtils/constants';
+
+export const SHADOW_COLOR = 'black';
+export const SHADOW_OPACITY = 0.24;
+
+export const calculateShadow = elevation => {
+  let height;
+  let radius;
+  switch (elevation) {
+    case 1:
+      height = 0.5;
+      radius = 0.75;
+      break;
+    case 2:
+      height = 0.75;
+      radius = 1.5;
+      break;
+    default:
+      height = elevation - 1;
+      radius = elevation;
+  }
+  return {
+    shadowColor: SHADOW_COLOR,
+    shadowOffset: {
+      width: 0,
+      height
+    },
+    shadowOpacity: SHADOW_OPACITY,
+    shadowRadius: radius
+  };
+};
+
+export const getShadow = elevation => (IS_ANDROID ? { elevation } : calculateShadow(elevation));
+
 // this is used to quickly build layout related objects in any measure callback or onLayout event
 export const generateLayoutMeasuresObject = (x, y, width, height) => ({
   left: x,
@@ -13,7 +47,21 @@ export const getCustomStyles = (variants, props, styles, stylePrefix = '') =>
     .map(variant => (props[variant] ? styles[`${variant}${stylePrefix}`] : null))
     .filter(style => style !== null);
 
+export const mergeClasses = (themeClasses, classNames) => {
+  if (!classNames) return themeClasses;
+  const classes = {};
+  const allClassNames = [...Object.keys(classNames), ...Object.keys(themeClasses)];
+
+  allClassNames.forEach(name => {
+    classes[name] = `${themeClasses[name] || ''} ${classNames[name] || ''}`.trim();
+  });
+
+  return classes;
+};
+
 export default {
+  calculateShadow,
+  generateLayoutMeasuresObject,
   getCustomStyles,
-  generateLayoutMeasuresObject
+  mergeClasses
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -79,6 +79,7 @@
     "react-native": "0.72.6",
     "react-native-vector-icons": "^10.0.0",
     "react-native-version": "^4.0.0",
+    "reactotron-react-native": "^5.1.7",
     "semantic-release": "^15.13.31"
   },
   "release": {