@widergy/mobile-ui 1.35.0 → 1.36.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.36.1](https://github.com/widergy/mobile-ui/compare/v1.36.0...v1.36.1) (2025-02-12)
+
+
+### Bug Fixes
+
+* fixes field label markdown ([#410](https://github.com/widergy/mobile-ui/issues/410)) ([df400b2](https://github.com/widergy/mobile-ui/commit/df400b2449a696ba4358f87f89296772f357d5ab))
+
+# [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)
 
 

package/lib/components/UTRating/index.js

@@ -47,7 +47,7 @@ const UTRating = ({
   return (
     <View style={[styles.container, classNames.container]} data-testid={dataTestId}>
       {title && (
-        <UTFieldLabel colorTheme="dark" required={required}>
+        <UTFieldLabel colorTheme="dark" required={required} withMarkdown>
           {title}
         </UTFieldLabel>
       )}

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/package.json

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