@widergy/mobile-ui 1.18.5 → 1.19.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.19.0](https://github.com/widergy/mobile-ui/compare/v1.18.6...v1.19.0) (2024-08-23)
+
+
+### Features
+
+* event multitracking ([#334](https://github.com/widergy/mobile-ui/issues/334)) ([5364c58](https://github.com/widergy/mobile-ui/commit/5364c58894d65a5b0662393c17d745e5eca40356))
+
+## [1.18.6](https://github.com/widergy/mobile-ui/compare/v1.18.5...v1.18.6) (2024-08-23)
+
+
+### Bug Fixes
+
+* utselectablecard border radius ([#331](https://github.com/widergy/mobile-ui/issues/331)) ([00f17a6](https://github.com/widergy/mobile-ui/commit/00f17a6ac99f764df6f82b61fd733a7fddae8e27))
+
 ## [1.18.5](https://github.com/widergy/mobile-ui/compare/v1.18.4...v1.18.5) (2024-08-23)
 
 

package/lib/components/UTSelectableCard/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { bool, func, number, shape, string } from 'prop-types';
 import { Image, View } from 'react-native';
-import merge from 'lodash/merge';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 
 import Touchable from '../Touchable';
 import Surface from '../Surface';
@@ -10,8 +9,9 @@ import UTTooltip from '../UTTooltip';
 import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
+import { mergeMultipleStyles } from '../../utils/styleUtils';
 
-import { getColorTheme, getUTSelectableCardStyles, ICON_SIZE } from './styles';
+import { getColorTheme, ownStyles, ICON_SIZE, getAppearanceStyles, ownSizeStyles } from './styles';
 
 const UTSelectableCard = ({
   additionalInfo = {},
@@ -28,9 +28,10 @@ const UTSelectableCard = ({
   tooltip
 }) => {
   const theme = useTheme();
-  const themedStyles = merge(
-    {},
-    getUTSelectableCardStyles(theme?.UTSelectableCard),
+  const themedStyles = mergeMultipleStyles(
+    ownStyles,
+    getAppearanceStyles(theme)[appearance],
+    ownSizeStyles[size],
     theme?.UTSelectableCard,
     style
   );
@@ -43,10 +44,10 @@ const UTSelectableCard = ({
         disabled={disabled}
         onPress={() => onPress?.()}
         style={[
-          themedStyles[`${appearance}Appearance`],
-          selected && themedStyles[`${appearance}SelectedContainer`],
-          disabled && themedStyles[`${appearance}DisabledContainer`],
-          themedStyles[`${size}Size`]
+          themedStyles.appearance,
+          selected && themedStyles.selectedContainer,
+          disabled && themedStyles.disabledContainer,
+          themedStyles.size
         ]}
       >
         <View style={themedStyles.container}>

package/lib/components/UTSelectableCard/styles.js

@@ -2,88 +2,102 @@ import { StyleSheet } from 'react-native';
 
 export const ICON_SIZE = 40;
 
-export const getUTSelectableCardStyles = (theme = {}) =>
-  StyleSheet.create({
-    additionalInfo: {
-      textAlign: 'right'
-    },
-    checkIcon: {
-      marginLeft: 16
-    },
-    column: {
-      alignSelf: 'center'
-    },
-    container: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    description: {
-      marginTop: 4
-    },
-    icon: {
-      marginRight: 16
-    },
-    outerContainer: {
-      borderRadius: 4
-    },
-    selectedTitleAndTooltip: {
-      maxWidth: 300
-    },
-    textContainer: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexGrow: 1,
-      justifyContent: 'space-between'
-    },
-    titleAndTooltip: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    titleMargin: {
-      marginRight: 8
-    },
-
-    // Sizes
-    mediumSize: {
-      padding: 24
-    },
-    smallSize: {
-      padding: 16
-    },
+const WHITE = 'white';
+const GRAY = 'gray';
 
-    // White
-    whiteAppearance: {
-      backgroundColor: theme.whiteBackground || 'white',
+export const getAppearanceStyles = (theme = {}) => ({
+  [WHITE]: {
+    appearance: {
+      backgroundColor: theme.Palette.light['01'],
       borderColor: 'transparent',
+      borderRadius: 4,
       borderWidth: 2
     },
-    whiteDisabledContainer: {
-      backgroundColor: theme.whiteDisabledBackground || 'lightgray',
+    disabledContainer: {
+      backgroundColor: theme.Palette.light['03'],
       borderColor: 'transparent',
       borderWidth: 2
     },
-    whiteSelectedContainer: {
-      borderColor: theme.whiteSelectedBorder || 'royalblue',
+    selectedContainer: {
+      borderColor: theme.Palette.accent['05'],
       borderWidth: 2
-    },
-
-    // Gray
-    grayAppearance: {
-      backgroundColor: theme.grayBackground || 'gainsboro',
-      borderColor: theme.grayBorder || 'gray',
+    }
+  },
+  [GRAY]: {
+    appearance: {
+      backgroundColor: theme.Palette.light['03'],
+      borderColor: theme.Palette.light['05'],
+      borderRadius: 4,
       borderWidth: 1
     },
-    grayDisabledContainer: {
-      borderColor: theme.grayDisabledBorder || 'gray',
-      borderWidth: 2
+    disabledContainer: {
+      borderWidth: 1
     },
-    graySelectedContainer: {
-      backgroundColor: theme.graySelectedBackground || 'aliceblue',
-      borderColor: theme.graySelectedBorder || 'royalblue',
-      borderWidth: 2
+    selectedContainer: {
+      backgroundColor: theme.Palette.accent['01'],
+      borderColor: theme.Palette.accent['03'],
+      borderWidth: 1
     }
-  });
+  }
+});
+
+const MEDIUM = 'medium';
+const SMALL = 'small';
+
+export const ownSizeStyles = {
+  [MEDIUM]: {
+    size: {
+      padding: 24
+    }
+  },
+  [SMALL]: {
+    size: {
+      padding: 16
+    }
+  }
+};
+
+export const ownStyles = StyleSheet.create({
+  additionalInfo: {
+    textAlign: 'right'
+  },
+  checkIcon: {
+    marginLeft: 16
+  },
+  column: {
+    alignSelf: 'center'
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  description: {
+    marginTop: 4
+  },
+  icon: {
+    marginRight: 16
+  },
+  outerContainer: {
+    borderRadius: 4
+  },
+  selectedTitleAndTooltip: {
+    maxWidth: 300
+  },
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexGrow: 1,
+    justifyContent: 'space-between'
+  },
+  titleAndTooltip: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  titleMargin: {
+    marginRight: 8
+  }
+});
 
 export const getColorTheme = (selected, disabled) => (selected ? 'accent' : disabled ? 'gray' : 'dark');

package/lib/utils/analyticsUtils/index.js

@@ -4,6 +4,8 @@
  * VERSION 5.X.X ONLY, version 6.x.x introduces breaking changes
  * */
 
+import { isEmpty, merge } from 'lodash';
+
 const LOG_EVENT = 'LOG_EVENT';
 const SET_CURRENT_SCREEN = 'SET_CURRENT_SCREEN';
 const SET_USER_ID = 'SET_USER_ID';
@@ -65,11 +67,64 @@ export const multiTracking = trackerArgumentsArray =>
     createAnalyticsMiddleware(trackerArguments.eventsMapper, trackerArguments.analytics)
   );
 
+export const mixpanelUserIdentify = mixpanelInstance => userProfileProperties => {
+  const { id } = userProfileProperties;
+  if (mixpanelInstance) {
+    mixpanelInstance.identify(`${id}`);
+    mixpanelInstance.getPeople().set({
+      $name: `${id}`,
+      $email: null,
+      ...userProfileProperties
+    });
+  }
+};
+
+export const mixpanelUserReset = mixpanelInstance => () => {
+  if (mixpanelInstance) mixpanelInstance.reset();
+};
+
+export const mixpanelEventsFlush = mixpanelInstance => () => {
+  if (mixpanelInstance) mixpanelInstance.flush();
+};
+
+export const singleMixpanelEvent = mixpanelInstance => eventData => {
+  const { name, ...yourProperties } = eventData;
+  if (mixpanelInstance) mixpanelInstance.track(name, yourProperties);
+};
+
+export const singleFirebaseEvent = analyticsIntance => eventData => {
+  const { action, category, currency, label, value } = eventData;
+  if (analyticsIntance) analyticsIntance.logEvent(category, { action, currency, label, value });
+};
+
+export const singleInhouseEvent = sendInhouseAnalytics => eventData => {
+  sendInhouseAnalytics(null, eventData);
+};
+
+export const singleEventMultitracking = (trackers, eventDefinitions) => (name, eventData) => {
+  const mergedData = merge(eventDefinitions[name] || {}, eventData || {});
+  const { sharedProps, ...trackerProps } = mergedData;
+  const trackersArray = Object.keys(mergedData);
+  if (!isEmpty(trackers))
+    trackersArray.forEach(trackerName => {
+      const eventTracker = trackers[trackerName];
+      const fullEventData = merge(trackerProps[trackerName], sharedProps);
+      eventTracker?.(fullEventData);
+    });
+};
+
 export default {
   createAnalyticsMiddleware,
+  mixpanelEventsFlush,
+  mixpanelUserIdentify,
+  mixpanelUserReset,
+  multiTracking,
+  setUserTracking,
+  singleEventMultitracking,
+  singleFirebaseEvent,
+  singleInhouseEvent,
+  singleMixpanelEvent,
   tracker,
   trackEvent,
-  trackScreen,
-  setUserTracking,
-  multiTracking
+  trackScreen
 };

package/lib/utils/styleUtils/index.js

@@ -1,3 +1,6 @@
+import isArray from 'lodash/isArray';
+import mergeWith from 'lodash/mergeWith';
+
 export const SHADOW_OPACITY = 0.1;
 
 const shadowLevels = {
@@ -65,6 +68,18 @@ export const getCustomStyles = (variants, props, styles, stylePrefix = '') =>
     .map(variant => (props[variant] ? styles[`${variant}${stylePrefix}`] : null))
     .filter(style => style !== null);
 
+const asArray = value => (isArray(value) ? value : [value]);
+
+export const mergeMultipleStyles = (...params) => {
+  return mergeWith({}, ...params, (valueA, valueB) => {
+    if (valueA && valueB && (isArray(valueA) || isArray(valueB))) {
+      return [...asArray(valueA), ...asArray(valueB)];
+    }
+    // By returning `undefined`, lodash will use its default merging behavior for objects
+    return undefined;
+  });
+};
+
 export default {
   generateLayoutMeasuresObject,
   getCustomStyles

package/package.json

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