@widergy/mobile-ui 1.37.0 → 1.38.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.38.0](https://github.com/widergy/mobile-ui/compare/v1.37.0...v1.38.0) (2025-03-26)
+
+
+### Features
+
+* [EVENSA-155] data item & data category ([#415](https://github.com/widergy/mobile-ui/issues/415)) ([7c76dee](https://github.com/widergy/mobile-ui/commit/7c76dee1b60c2d730da91064382b0dbcde144543))
+
 # [1.37.0](https://github.com/widergy/mobile-ui/compare/v1.36.8...v1.37.0) (2025-03-19)
 
 

package/lib/components/UTActionCard/components/BottomActions/index.js

@@ -18,7 +18,7 @@ const BottomActions = ({ actions = [], bottomActionsVariant }) => {
 
   return (
     <View style={[themedStyles.actionsContainer, themedStyles.redirectionActionsContainer]}>
-      {actions.map(({ colorTheme = 'primary', disabled, Icon, label, loading, onClick }, i) => (
+      {actions.map(({ colorTheme = 'primary', disabled, Icon, label, loading, onPress }, i) => (
         <Fragment key={label}>
           {!isRedirection && i > 0 && <View style={[themedStyles.horizontalSeparator]} />}
           <UTButton
@@ -31,7 +31,7 @@ const BottomActions = ({ actions = [], bottomActionsVariant }) => {
             Icon={isRedirection ? Icon || DEFAULT_REDIRECTION_ICON : Icon}
             iconPlacement={isRedirection ? 'right' : 'left'}
             loading={loading}
-            onClick={onClick}
+            onPress={onPress}
             size="large"
             variant="text"
           >
@@ -54,7 +54,7 @@ BottomActions.propTypes = {
       Icon: oneOfType([elementType, string]),
       label: string,
       loading: bool,
-      onClick: func
+      onPress: func
     })
   ),
   bottomActionsVariant: string

package/lib/components/UTDataCategory/README.md

@@ -0,0 +1,22 @@
+# UTDataCategory
+
+Tabs component.
+
+## Props
+
+
+| Name        | Type      | Default | Description                                              |
+|------------|----------|---------|----------------------------------------------------------|
+| area       | bool     | `false`  | Specifies whether the component has an area.      |
+| collapsable      | bool  | `true`        | Specifies if the data list is collapsable                           |
+|  elements | array |  | Array of items to be rendered as UTDataElement |
+| style      | object   |         | Custom style for the component container.                         |
+| title      | string   |         | Title text displayed in the component.                   |
+| titleProps | object   |         | Additional props for customizing the title.              |
+
+
+
+### colapsable
+
+The component is only collapsable if it has a title
+

package/lib/components/UTDataCategory/index.js

@@ -0,0 +1,67 @@
+/* eslint-disable no-underscore-dangle */
+import { Animated, View } from 'react-native';
+import { array, bool, object, string } from 'prop-types';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { withTheme } from '../../theming';
+import UTDataElement from '../UTDataElement';
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+
+import styleSheet from './styles';
+
+const UTDataCategory = ({ area, collapsable = true, elements, style, theme, title, titleProps }) => {
+  const styles = styleSheet(theme);
+
+  const collapsed = useRef(new Animated.Value(1)).current;
+  const [childrenHeight, setChildrenHeight] = useState(0);
+
+  const onLayout = useCallback(event => {
+    const { height } = event.nativeEvent.layout;
+    setChildrenHeight(height + (title ? 16 : 0));
+  }, []);
+
+  const toggleCollapsed = () => {
+    Animated.timing(collapsed, {
+      toValue: collapsed.__getValue() === 1 ? 0 : 1,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  };
+
+  return (
+    <View style={[styles.container(area), style]}>
+      {title && (
+        <View style={[styles.title]}>
+          <UTLabel colorTheme="gray" weight="medium" {...titleProps}>
+            {title}
+          </UTLabel>
+          {collapsable && (
+            <Animated.View style={styles.collapseButton(collapsed)}>
+              <UTButton Icon="IconChevronDown" variant="text" onPress={toggleCollapsed} />
+            </Animated.View>
+          )}
+        </View>
+      )}
+      <Animated.View style={[styles.childrenAnimation(collapsed, childrenHeight)]}>
+        <View style={styles.childrenContainer} onLayout={onLayout}>
+          {elements.map(element => (
+            <UTDataElement {...element} key={element.key} />
+          ))}
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+UTDataCategory.propTypes = {
+  area: bool,
+  collapsable: bool,
+  elements: array,
+  style: object,
+  theme: object,
+  title: string,
+  titleProps: object
+};
+
+export default withTheme(UTDataCategory);

package/lib/components/UTDataCategory/styles.js

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create(({ Palette: { light } }) => ({
+  childrenAnimation: (collapsed, childrenHeight) => ({
+    position: 'relative',
+    overflow: 'hidden',
+    height: collapsed.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, childrenHeight]
+    }),
+    width: 'auto'
+  }),
+  childrenContainer: {
+    bottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+    width: '100%'
+  },
+  collapseButton: collapsed => ({
+    borderRadius: collapsed.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0, 100, 0]
+    }),
+    overflow: 'hidden',
+    transform: [
+      {
+        rotate: collapsed.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['0deg', '180deg']
+        })
+      }
+    ]
+  }),
+  container: area => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    ...(area
+      ? {
+          backgroundColor: light['03'],
+          padding: 16,
+          borderRadius: 8
+        }
+      : {})
+  }),
+  title: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 8,
+    width: '100%'
+  }
+}));

package/lib/components/UTDataElement/README.md

@@ -0,0 +1,46 @@
+# UTDataElement
+
+Is a versatile data component that can be customized with various themes, sizes, icons, data elements and actions.
+
+## Props
+
+
+| Name        | Type      | Default | Description                                              |
+|------------|----------|---------|----------------------------------------------------------|
+| action     | object   |         | Props passed to the UTButton    action .        |
+| area       | bool     | `false`  | Specifies whether the component has an area.      |
+| badge      | string   |         | Displays a badge with text.                              |
+| badgeProps | object   |         | Additional props for customizing the badge.              |
+| Data       | element  |         | React element representing a data component (overrides data).             |
+| data       | string   |         | Data string associated with the component.                |
+| dataProps  | object   |         | Additional props for configuring data element.         |
+| Icon       | element  |         | Custom React element (overrides icon).                    |
+| icon       | string   |         | Name of the icon used in the component.                  |
+| iconProps  | object   |         | Additional props for the icon element.                 |
+| orientation | string  | `horizontal` | Defines the layout orientation. |
+| padding    | string   | `medium`        | Padding applied to the component.                        |
+| prefix     | string   |         | Text or symbol displayed before the title.        |
+| prefixProps| object   |         | Additional props for customizing `prefix`.               |
+| spacing    | string   |   `medium`      | Defines the spacing between elements.                    |
+| style      | object   |         | Custom style for the component container.                         |
+| title      | string   |         | Title text displayed in the component.                   |
+| titleProps | object   |         | Additional props for customizing the title.              |
+
+
+### colapsable
+
+If the component has any `children` it will always be collapsable
+
+### orientation
+
+The value of `orientation` must be one of the following:
+
+- `horizontal`
+- `vertical`
+
+### padding & spacing
+
+The value of `padding` and `spacing` must be one of the following:
+
+- `small`
+- `medium`

package/lib/components/UTDataElement/constants.js

@@ -0,0 +1,14 @@
+export const ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+
+export const PADDING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+
+export const SPACING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};

package/lib/components/UTDataElement/index.js

@@ -0,0 +1,133 @@
+/* eslint-disable no-underscore-dangle */
+import { Animated, View } from 'react-native';
+import { bool, element, object, string } from 'prop-types';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { withTheme } from '../../theming';
+import UTBadge from '../UTBadge';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+
+import styleSheet from './styles';
+import { ORIENTATION, PADDING, SPACING } from './constants';
+
+const UTDataElement = ({
+  action,
+  area,
+  badge,
+  badgeProps,
+  children,
+  data,
+  Data,
+  dataProps,
+  icon,
+  Icon,
+  iconProps = {},
+  orientation = ORIENTATION.HORIZONTAL,
+  padding = PADDING.MEDIUM,
+  prefix,
+  prefixProps,
+  spacing = SPACING.MEDIUM,
+  style,
+  theme,
+  title,
+  titleProps
+}) => {
+  const styles = styleSheet(theme);
+
+  const collapsed = useRef(new Animated.Value(1)).current;
+  const [childrenHeight, setChildrenHeight] = useState(0);
+
+  const onLayout = useCallback(
+    event => {
+      const { height } = event.nativeEvent.layout;
+      setChildrenHeight(
+        height +
+          {
+            [PADDING.SMALL]: 8,
+            [PADDING.MEDIUM]: 16
+          }[padding]
+      );
+    },
+    [padding]
+  );
+
+  const toggleCollapsed = () => {
+    Animated.timing(collapsed, {
+      toValue: collapsed.__getValue() === 1 ? 0 : 1,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  };
+
+  const IconComponent = Icon || (icon ? UTIcon : null);
+  const DataComponent = Data || (data ? UTLabel : null);
+
+  return (
+    <View style={[styles.container(area, padding), style]}>
+      <View style={styles.content(spacing)}>
+        {IconComponent && <IconComponent name={icon} size={24} colorTheme="gray" {...iconProps} />}
+        <View style={styles.info(orientation)}>
+          {(prefix || title || badge) && (
+            <View style={styles.topInfo}>
+              {prefix && (
+                <UTLabel colorTheme="gray" {...prefixProps}>
+                  {prefix}
+                </UTLabel>
+              )}
+              {title && (
+                <UTLabel colorTheme="gray" {...titleProps}>
+                  {title}
+                </UTLabel>
+              )}
+              {badge && (
+                <UTBadge colorTheme="accent" {...badgeProps}>
+                  {badge}
+                </UTBadge>
+              )}
+            </View>
+          )}
+          {DataComponent && <DataComponent {...dataProps}>{data}</DataComponent>}
+        </View>
+        {action && <UTButton variant="text" {...action} />}
+        {children && (
+          <Animated.View style={styles.collapseButton(collapsed)}>
+            <UTButton Icon="IconChevronDown" variant="text" onPress={toggleCollapsed} />
+          </Animated.View>
+        )}
+      </View>
+      {children && (
+        <Animated.View style={styles.childrenAnimation(collapsed, childrenHeight)}>
+          <View style={styles.childrenContainer} onLayout={onLayout}>
+            {children}
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+UTDataElement.propTypes = {
+  action: object,
+  area: bool,
+  badge: string,
+  badgeProps: object,
+  data: string,
+  Data: element,
+  dataProps: object,
+  icon: string,
+  Icon: element,
+  iconProps: object,
+  orientation: string,
+  padding: string,
+  prefix: string,
+  prefixProps: object,
+  spacing: string,
+  style: object,
+  theme: object,
+  title: string,
+  titleProps: object
+};
+
+export default withTheme(UTDataElement);

package/lib/components/UTDataElement/styles.js

@@ -0,0 +1,71 @@
+import { StyleSheet } from 'react-native';
+
+import { ORIENTATION, PADDING, SPACING } from './constants';
+
+export default StyleSheet.create(({ Palette: { light } }) => ({
+  childrenAnimation: (collapsed, childrenHeight) => ({
+    height: collapsed.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, childrenHeight]
+    }),
+    overflow: 'hidden',
+    position: 'relative'
+  }),
+  childrenContainer: { position: 'absolute', bottom: 0 },
+  collapseButton: collapsed => ({
+    borderRadius: collapsed.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0, 100, 0]
+    }),
+    overflow: 'hidden',
+    transform: [
+      {
+        rotate: collapsed.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['0deg', '180deg']
+        })
+      }
+    ]
+  }),
+  container: (area, padding) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    paddingVertical: {
+      [PADDING.SMALL]: 8,
+      [PADDING.MEDIUM]: 16
+    }[padding],
+    ...(area
+      ? {
+          backgroundColor: light['03'],
+          paddingLeft: 16,
+          paddingRight: 24,
+          borderRadius: 8
+        }
+      : {})
+  }),
+  content: spacing => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: {
+      [SPACING.SMALL]: 8,
+      [SPACING.MEDIUM]: 16
+    }[spacing],
+    width: '100%'
+  }),
+  info: orientation => ({
+    flexDirection: {
+      [ORIENTATION.HORIZONTAL]: 'row',
+      [ORIENTATION.VERTICAL]: 'column'
+    }[orientation],
+    gap: 8,
+    justifyContent: 'space-between',
+    flex: 1
+  }),
+  topInfo: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 8
+  }
+}));

package/lib/components/UTLabel/constants.js

@@ -1,14 +1,21 @@
 export const VARIANTS_SIZES = {
-  title1: 24,
-  title2: 22,
-  title3: 18,
-  subtitle1: 16,
-  subtitle2: 14,
   body: 16,
+  number1: 30,
+  number2: 24,
+  number3: 22,
+  number4: 18,
+  number5: 16,
+  number6: 14,
+  number7: 13,
   small: 14,
-  xsmall: 11,
+  subtitle1: 16,
+  subtitle2: 14,
+  td: 16,
   th: 16,
-  td: 16
+  title1: 24,
+  title2: 22,
+  title3: 18,
+  xsmall: 11
 };
 
 export const LINE_HEIGHTS = {

package/lib/components/UTStatusMessage/styles.js

@@ -64,5 +64,8 @@ export default StyleSheet.create({
     justifyContent: 'center',
     padding: 12,
     width: '100%'
-  })
+  }),
+  label: {
+    textAlign: 'center'
+  }
 });

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js

@@ -8,7 +8,7 @@ import { useTheme } from '../../../../../../../../theming';
 
 import ownStyles from './styles';
 
-const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, variant }) => {
+const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, variant, icon }) => {
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
 
@@ -21,6 +21,7 @@ const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, var
         size="large"
         style={{ root: themedStyles.buttonContainer, childrenContainer: themedStyles.buttonContent }}
         variant={variant}
+        Icon={icon}
       >
         {label}
       </UTButton>
@@ -32,6 +33,7 @@ ActionButton.propTypes = {
   colorTheme: string,
   disabled: bool,
   hidden: bool,
+  icon: string,
   label: string,
   onPress: func,
   variant: string

package/lib/index.js

@@ -45,6 +45,8 @@ export { default as UTButtonGroup } from './components/UTButtonGroup';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTCheckBox } from './components/UTCheckBox';
 export { default as UTCheckList } from './components/UTCheckList';
+export { default as UTDataCategory } from './components/UTDataCategory';
+export { default as UTDataElement } from './components/UTDataElement';
 export { default as UTDetailDrawer } from './components/UTDetailDrawer';
 export { default as UTIcon } from './components/UTIcon';
 export { default as UTImage } from './components/UTImage';

package/package.json

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