@widergy/mobile-ui 1.34.0 → 1.36.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.36.0](https://github.com/widergy/mobile-ui/compare/v1.35.0...v1.36.0) (2025-02-03)
+
+
+### Features
+
+* [EVENSA-67] uttabs ([#409](https://github.com/widergy/mobile-ui/issues/409)) ([e82a497](https://github.com/widergy/mobile-ui/commit/e82a49721c179c63fef5cbfe7d61eaed172476d0))
+
+# [1.35.0](https://github.com/widergy/mobile-ui/compare/v1.34.0...v1.35.0) (2025-01-31)
+
+
+### Features
+
+* added util for generating Flow Id's ([5db21ef](https://github.com/widergy/mobile-ui/commit/5db21ef0002558c272641928ea80e94c6ee85ce0))
+
 # [1.34.0](https://github.com/widergy/mobile-ui/compare/v1.33.4...v1.34.0) (2025-01-27)
 
 

package/lib/components/UTStatusMessage/styles.js

@@ -41,7 +41,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     display: 'flex',
     gap: 24,
-    width: '100%'
+    width: 'auto'
   },
   section: {
     alignItems: 'center',

package/lib/components/UTTabs/README.md

@@ -0,0 +1,41 @@
+# UTTabs
+
+Tabs component.
+
+## Props
+Here's a new table for the additional props:
+
+| Name       | Type     | Default   | Description                                               |
+|------------|---------|------------|-----------------------------------------------------------|
+| colorTheme | string  | `accent`   | Defines the color theme for the component.                |
+| hierarchy  | string  | `primary`  | Determines the hierarchy or importance of the tabs.       |
+| onChange   | func    |            | Callback function triggered when the selected tab changes.|
+| style      | object  |            | Custom styles for component.                              |
+| tabs       | array   |            | Array of tab items to be displayed within the component.  |
+| withTabSliding | bool | `true`    | Defines if tabs can be changed with gesture.              |
+
+
+### colorTheme
+
+The value of `colorTheme` must be one of the following:
+
+- `accent`
+- `negative`
+- `neutral`
+
+### hierarchy
+
+The value of `hierarchy` must be one of the following:
+
+- `primary`
+- `secondary`
+
+### tabs
+
+`tabs` is an array of object with the following optional props:
+
+- `label`: text to render
+- `icon`: name of `UTIcon` to render
+- `badge`: not affected by `colorTheme`
+
+Besides those, any other prop can be added to a tab to be accessed with the `onChange` callback

package/lib/components/UTTabs/constants.js

@@ -0,0 +1,10 @@
+export const HIERARCHIES = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary'
+};
+
+export const COLOR_THEMES = {
+  ACCENT: 'accent',
+  NEGATIVE: 'negative',
+  NEUTRAL: 'neutral'
+};

package/lib/components/UTTabs/index.js

@@ -0,0 +1,86 @@
+import { Animated, View, Pressable, PanResponder } from 'react-native';
+import { array, bool, func, object, string } from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { withTheme } from '../../theming';
+import UTBadge from '../UTBadge';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+
+import styleSheet from './styles';
+import { COLOR_THEMES, HIERARCHIES } from './constants';
+
+const UTTabs = ({
+  colorTheme = COLOR_THEMES.ACCENT,
+  hierarchy = HIERARCHIES.SECONDARY,
+  onChange,
+  style,
+  tabs,
+  theme,
+  withTabSliding = true
+}) => {
+  const styles = styleSheet(theme);
+  const [selectedTab, setSelectedTab] = useState(0);
+  const position = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    onChange?.(tabs[selectedTab]);
+  }, []);
+
+  useEffect(() => {
+    Animated.timing(position, {
+      toValue: selectedTab,
+      duration: 300
+    }).start();
+    onChange?.(tabs[selectedTab]);
+  }, [selectedTab]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dx),
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dx > 1) setSelectedTab(prev => Math.max(0, prev - 1));
+        else if (gestureState.dx < -1) {
+          setSelectedTab(prev => Math.min(tabs.length - 1, prev + 1));
+        }
+      }
+    })
+  ).current;
+
+  return (
+    <View style={[styles.container, style]} {...(withTabSliding ? panResponder.panHandlers : {})}>
+      {tabs.map(({ badge, label, icon }, index) => {
+        const selected = selectedTab === index;
+        const colorThemeToUse = selected ? colorTheme : 'gray';
+        return (
+          <Pressable
+            disabled={selected}
+            key={`tab-${label || icon}`}
+            onPress={() => setSelectedTab(index)}
+            style={styles.tab(tabs.length)}
+          >
+            <UTIcon colorTheme={colorThemeToUse} name={icon} />
+            <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium">
+              {label}
+            </UTLabel>
+            {badge && <UTBadge colorTheme="accent" />}
+          </Pressable>
+        );
+      })}
+      <Animated.View style={styles.indicator(position, tabs.length, hierarchy, colorTheme)} />
+      <View style={styles.border} />
+    </View>
+  );
+};
+
+UTTabs.propTypes = {
+  colorTheme: string,
+  hierarchy: string,
+  onChange: func,
+  style: object,
+  tabs: array,
+  theme: object,
+  withTabSliding: bool
+};
+
+export default withTheme(UTTabs);

package/lib/components/UTTabs/styles.js

@@ -0,0 +1,82 @@
+import { StyleSheet } from 'react-native';
+
+import { COLOR_THEMES, HIERARCHIES } from './constants';
+
+export default StyleSheet.create(({ Palette: { accent, neutral, negative, light } }) => ({
+  border: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    height: 1,
+    backgroundColor: light['04'],
+    zIndex: 1
+  },
+  container: { display: 'flex', flexDirection: 'row', width: '100%' },
+  indicator: (position, length, hierarchy, colorTheme) =>
+    ({
+      [HIERARCHIES.PRIMARY]: {
+        position: 'absolute',
+        bottom: 0,
+        width: `${100 / length}%`,
+        height: '100%',
+        borderRightWidth: position.interpolate({
+          inputRange: [0, length - 1],
+          outputRange: [1, 0]
+        }),
+        borderTopRightRadius: position.interpolate({
+          inputRange: [0, length - 1],
+          outputRange: [4, 0]
+        }),
+        borderLeftWidth: position.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, 1],
+          extrapolate: 'clamp'
+        }),
+        borderTopLeftRadius: position.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, 4],
+          extrapolate: 'clamp'
+        }),
+        backgroundColor: light['01'],
+        borderTopWidth: 1,
+        borderTopColor: light['04'],
+        borderLeftColor: light['04'],
+        borderRightColor: light['04'],
+        borderBottomWidth: 1,
+        borderBottomColor: light['01'],
+        left: position.interpolate({
+          inputRange: [0, length],
+          outputRange: ['0%', '100%']
+        }),
+        zIndex: 2
+      },
+      [HIERARCHIES.SECONDARY]: {
+        position: 'absolute',
+        bottom: 0,
+        width: `${100 / length}%`,
+        height: 4,
+        backgroundColor: {
+          [COLOR_THEMES.ACCENT]: accent['04'],
+          [COLOR_THEMES.NEUTRAL]: neutral['04'],
+          [COLOR_THEMES.NEGATIVE]: negative['04']
+        }[colorTheme],
+        left: position.interpolate({
+          inputRange: [0, length],
+          outputRange: ['0%', '100%']
+        })
+      }
+    })[hierarchy],
+  tab:
+    tabs =>
+    ({ pressed }) => ({
+      alignItems: 'center',
+      display: 'flex',
+      flexBasis: `${100 / tabs}%`,
+      flexDirection: 'row',
+      gap: 8,
+      height: 48,
+      justifyContent: 'center',
+      zIndex: 3,
+      backgroundColor: pressed ? accent['01'] : null
+    })
+}));

package/lib/index.js

@@ -65,6 +65,7 @@ export { default as UTSelectableCard } from './components/UTSelectableCard';
 export { default as UTStatusMessage } from './components/UTStatusMessage';
 export { default as UTStepFeedback } from './components/UTStepFeedback';
 export { default as UTSwitch } from './components/UTSwitch';
+export { default as UTTabs } from './components/UTTabs';
 export { default as UTTextArea } from './components/UTTextArea';
 export { default as UTTextInput } from './components/UTTextInput';
 export { default as UTTooltip } from './components/UTTooltip';

package/lib/utils/analyticsUtils/README.md

@@ -59,6 +59,27 @@ export const store = createStore(
 );
 ```
 
+## `analyticsUtils.generateFlowId`
+
+Generates a `flowId` that can be used to track a user's flow through the app (To either identify the session or the user's device). 
+
+### Type: `:string()`
+
+### Params
+
+No params required.
+
+#### Example
+
+```js
+import { generateFlowId } from '@widergy/mobile-ui';
+
+const handleSessionTimeout = () => {
+  const flowId = generateFlowId();
+  dispatch({ type: 'SET_SESSION_FLOW_ID', payload: { flowId } });
+}
+```
+
 ## `analyticsUtils.tracker`
 
 Implemented inside the `middleware` returned by `analyticsUtils.createAnalyticsMiddleware`. Can be used individually to track events outside of redux.

package/lib/utils/analyticsUtils/index.js

@@ -5,6 +5,7 @@
  * */
 
 import { isEmpty, merge } from 'lodash';
+import uuid from 'react-native-uuid';
 
 const LOG_EVENT = 'LOG_EVENT';
 const SET_CURRENT_SCREEN = 'SET_CURRENT_SCREEN';
@@ -146,8 +147,13 @@ export const intercomUpdateUser = intercomInstance => userProperties => {
   if (intercomInstance) intercomInstance.updateUser(userProperties);
 };
 
+export const generateFlowId = () => {
+  return uuid.v4();
+};
+
 export default {
   createAnalyticsMiddleware,
+  generateFlowId,
   intercomSingleEvent,
   intercomUpdateUser,
   mixpanelEventsFlush,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.34.0",
+  "version": "1.36.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -48,9 +48,10 @@
     "react-native-linear-gradient": "^2.8.3",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
-    "react-native-pager-view": "^6.2.1",
+    "react-native-pager-view": "^6.2.0",
     "react-native-safe-area-context": "^4.5.0",
-    "react-native-svg": "^13.13.0"
+    "react-native-svg": "^13.0.0",
+    "react-native-uuid": "^2.0.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",