@widergy/mobile-ui 1.3.3 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.4.0](https://github.com/widergy/mobile-ui/compare/v1.3.4...v1.4.0) (2024-03-26)
+
+
+### Features
+
+* added UTProductItem ([#268](https://github.com/widergy/mobile-ui/issues/268)) ([c28b3e8](https://github.com/widergy/mobile-ui/commit/c28b3e83e9f3aea060857778dc15d5537aca7702))
+
+## [1.3.4](https://github.com/widergy/mobile-ui/compare/v1.3.3...v1.3.4) (2024-03-19)
+
+
+### Bug Fixes
+
+* themed styles and tagline fix ([#270](https://github.com/widergy/mobile-ui/issues/270)) ([6b5b325](https://github.com/widergy/mobile-ui/commit/6b5b32599b39dc1ee07f5af3dc2020fbab9219cf))
+
 ## [1.3.3](https://github.com/widergy/mobile-ui/compare/v1.3.2...v1.3.3) (2024-03-15)
 
 

package/lib/components/IconButton/index.js

@@ -10,14 +10,16 @@ import propTypes from './propTypes';
 const IconButton = ({
   color,
   disabled,
+  effectColor,
+  height,
+  iconMargin,
+  iconStyle,
   name,
   onPress,
-  effectColor,
   size,
   style,
-  iconStyle,
   type,
-  iconMargin
+  width
 }) => (
   <Touchable
     borderless
@@ -26,15 +28,15 @@ const IconButton = ({
     effectColor={effectColor}
     style={[styles.container, getContainerSize(size, iconMargin), style]}
   >
-    <Icon style={iconStyle} color={color} name={name} size={size} type={type} />
+    <Icon style={iconStyle} {...{ color, height, name, size, type, width }} />
   </Touchable>
 );
 
 IconButton.propTypes = propTypes;
 
 IconButton.defaultProps = {
-  size: DEFAULT_ICON_SIZE,
-  iconMargin: ICON_MARGIN
+  iconMargin: ICON_MARGIN,
+  size: DEFAULT_ICON_SIZE
 };
 
 export default IconButton;

package/lib/components/UTHeader/index.js

@@ -1,53 +1,58 @@
 import React from 'react';
 import { View } from 'react-native';
 import { string, bool, shape } from 'prop-types';
+import merge from 'lodash/merge';
 
 import Label from '../Label';
 import UTBanner from '../UTBanner';
+import { useTheme } from '../../theming';
 
 import ownStyles from './styles';
 
-const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner }) => {
+const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner, style }) => {
+  const theme = useTheme();
+  const themedStyles = merge({}, ownStyles, theme?.UTHeader, style);
+
   const renderComponent = (prop, standardComponent) =>
     React.isValidElement(prop) ? prop : standardComponent;
 
   const Tagline = renderComponent(
     tagline,
-    <Label disabled bold useMarkdown={useMarkdown} style={ownStyles.child}>
-      {tagline.toUpperCase()}
+    <Label disabled bold useMarkdown={useMarkdown} style={themedStyles.child}>
+      {tagline?.toUpperCase?.()}
     </Label>
   );
 
   const Title = renderComponent(
     title,
-    <Label big bold style={ownStyles.title} useMarkdown={useMarkdown}>
+    <Label big bold style={themedStyles.title} useMarkdown={useMarkdown}>
       {title}
     </Label>
   );
 
   const Subtitle = renderComponent(
     subtitle,
-    <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+    <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
       {subtitle}
     </Label>
   );
 
   const RequiredFieldInfo = renderComponent(
     requiredFieldInfo,
-    <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+    <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
       {requiredFieldInfo}
     </Label>
   );
 
   const HelpText = renderComponent(
     helpText,
-    <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+    <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
       {helpText}
     </Label>
   );
 
   return (
-    <View style={ownStyles.header}>
+    <View style={themedStyles.header}>
       {!!tagline && Tagline}
       <View>
         {Title}
@@ -55,7 +60,9 @@ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMa
       </View>
       {!!requiredFieldInfo && RequiredFieldInfo}
       {!!helpText && HelpText}
-      {banner?.text && <UTBanner text={banner.text} icon={banner.icon} style={{ banner: ownStyles.child }} />}
+      {banner?.text && (
+        <UTBanner text={banner.text} icon={banner.icon} style={{ banner: themedStyles.child }} />
+      )}
     </View>
   );
 };

package/lib/components/UTProductItem/README.md

@@ -0,0 +1,28 @@
+# UTProductItem
+
+### Description
+
+This component displays a product with its corresponding image, price and/or discounts. It also provides handlers for adding/removing the amount of products selected.
+
+## Props
+
+| Name             | Type           | Default | Description                                                                     |
+| ---------------- | -------------- | ------- | ------------------------------------------------------------------------------- |
+| action           | actionType     |         | Renders a button on the rightSection of the component                           |
+| additionalInfo   | string         |         | Renders a smaller text under the title                                          |
+| amount           | number         |         | Specifies the number to be displayed as a price                                 |
+| counter          | counterType    |         | Renders a chip on the top right corner with a current number and a limit number |
+| discount         | number         |         | Renders a chip above the amount with the given discount as a percentage         |
+| imageProps       | imagePropsType |         | Renders an image at the leftmost part of the component                          |
+| previousAmount   | number         |         | Renders a text with strikethrough alongside the discount chip                   |
+| secondaryAction  | actionType     |         | Renders a button alongside the main action                                      |
+| selectedQuantity | number         |         | Renders a number between the action and the secondary action                    |
+| title            | string         |         | Renders the main text on the left section of the component                      |
+
+### Custom Types
+
+| Type           | Shape                                                                        |
+| -------------- | ---------------------------------------------------------------------------- |
+| actionType     | `{ color: string, name: string, onPress: func, size: number, type: string }` |
+| counterType    | `{ current: number, limit: number }`                                         |
+| imagePropsType | `{ image: element \| string, withUri: bool  }`                               |

package/lib/components/UTProductItem/components/AdditionalInfo/index.js

@@ -0,0 +1,19 @@
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, string } from 'prop-types';
+import React from 'react';
+
+import Label from '../../../Label';
+
+const AdditionalInfo = ({ additionalInfo, shouldUseGap, themedStyles }) => (
+  <Label small style={[themedStyles.additionalInfo, shouldUseGap ? themedStyles.gap : '']}>
+    {additionalInfo}
+  </Label>
+);
+
+AdditionalInfo.propTypes = {
+  additionalInfo: string,
+  shouldUseGap: bool,
+  themedStyles: ViewPropTypes.style
+};
+
+export default AdditionalInfo;

package/lib/components/UTProductItem/components/Amount/index.js

@@ -0,0 +1,17 @@
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, number } from 'prop-types';
+import React from 'react';
+
+import Label from '../../../Label';
+
+const Amount = ({ amount, shouldUseGap, themedStyles }) => (
+  <Label style={[themedStyles.amount, shouldUseGap ? themedStyles.gap : '']}>{`$ ${amount}`}</Label>
+);
+
+Amount.propTypes = {
+  amount: number,
+  shouldUseGap: bool,
+  themedStyles: ViewPropTypes.style
+};
+
+export default Amount;

package/lib/components/UTProductItem/components/Discount/index.js

@@ -0,0 +1,28 @@
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, number } from 'prop-types';
+import React from 'react';
+import { View } from 'react-native';
+
+import Label from '../../../Label';
+
+const Discount = ({ previousAmount, shouldUseGap, discount, themedStyles }) => (
+  <View style={[themedStyles.amountContainer, shouldUseGap ? themedStyles.gap : '']}>
+    <View style={themedStyles.discountChip}>
+      <Label small style={themedStyles.discount}>
+        {discount}
+      </Label>
+    </View>
+    {previousAmount && (
+      <Label small color="gray" style={themedStyles.previousAmount}>{`$ ${previousAmount}`}</Label>
+    )}
+  </View>
+);
+
+Discount.propTypes = {
+  discount: number,
+  previousAmount: number,
+  shouldUseGap: bool,
+  themedStyles: ViewPropTypes.style
+};
+
+export default Discount;

package/lib/components/UTProductItem/components/QuantitySelector/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { number } from 'prop-types';
+import { View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+
+import IconButton from '../../../IconButton';
+import Label from '../../../Label';
+import { ActionPropTypes } from '../../propTypes';
+import ImageButton from '../../../ImageButton';
+import { useTheme } from '../../../../theming';
+
+const QuantitySelector = ({ action, secondaryAction, selectedQuantity, themedStyles }) => {
+  const { UTProductItem } = useTheme();
+  const ICON_SIZE = 24;
+
+  const renderAction = ({ color, image, name, size, type, styles, onPress }) =>
+    image ? (
+      <ImageButton image={image} size={size || ICON_SIZE} containerStyle={styles.image} onPress={onPress} />
+    ) : (
+      <IconButton
+        color={color || UTProductItem?.actionIconColor || '#091E42'}
+        height={size || ICON_SIZE}
+        iconMargin={8}
+        name={name}
+        onPress={onPress}
+        size={size || ICON_SIZE}
+        style={styles.icon}
+        type={type}
+        width={size || ICON_SIZE}
+      />
+    );
+
+  return (
+    <View style={themedStyles.actionsContainer}>
+      {!isEmpty(secondaryAction) &&
+        renderAction({
+          ...secondaryAction,
+          styles: { icon: themedStyles.secondaryActionIcon, image: themedStyles.secondaryActionImage }
+        })}
+      {!isNil(selectedQuantity) && <Label style={themedStyles.selectedQuantity}>{selectedQuantity}</Label>}
+      {!isEmpty(action) &&
+        renderAction({
+          ...action,
+          styles: { icon: themedStyles.actionIcon, image: themedStyles.actionImage }
+        })}
+    </View>
+  );
+};
+
+QuantitySelector.propTypes = {
+  action: ActionPropTypes,
+  secondaryAction: ActionPropTypes,
+  selectedQuantity: number,
+  themedStyles: ViewPropTypes.style
+};
+
+export default QuantitySelector;

package/lib/components/UTProductItem/components/Title/index.js

@@ -0,0 +1,19 @@
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, string } from 'prop-types';
+import React from 'react';
+
+import Label from '../../../Label';
+
+const Title = ({ shouldUseGap, themedStyles, title }) => (
+  <Label medium style={[themedStyles.title, shouldUseGap ? themedStyles.gap : '']}>
+    {title}
+  </Label>
+);
+
+Title.propTypes = {
+  shouldUseGap: bool,
+  themedStyles: ViewPropTypes.style,
+  title: string
+};
+
+export default Title;

package/lib/components/UTProductItem/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View } from 'react-native';
+import merge from 'lodash/merge';
+import { bool, element, number, oneOf, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+
+import ImageIcon from '../ImageIcon';
+import { useTheme } from '../../theming';
+import Label from '../Label';
+
+import { leftSectionComponents } from './utils';
+import QuantitySelector from './components/QuantitySelector';
+import { ActionPropTypes } from './propTypes';
+import { getUTProductItemStyles } from './styles';
+
+const UTProductItem = ({
+  action,
+  additionalInfo,
+  amount,
+  counter,
+  discount,
+  imageProps,
+  previousAmount,
+  secondaryAction,
+  selectedQuantity,
+  style,
+  title
+}) => {
+  const theme = useTheme();
+  const themedStyles = merge({}, getUTProductItemStyles(theme?.UTProductItem), theme?.UTProductItem, style);
+
+  const IMAGE_SIZE = 70;
+
+  return (
+    <View style={themedStyles.container}>
+      <View style={themedStyles.leftSection}>
+        {!isEmpty(imageProps) && <ImageIcon style={themedStyles.image} size={IMAGE_SIZE} {...imageProps} />}
+        <View style={themedStyles.mainInfo}>
+          {leftSectionComponents({
+            additionalInfo,
+            amount,
+            discount,
+            previousAmount,
+            themedStyles,
+            title
+          }).map(({ Component, props }, index, array) => (
+            <Component key={Math.random} {...props} shouldUseGap={index !== array.length - 1} />
+          ))}
+        </View>
+      </View>
+      <View style={[themedStyles.rightSection, !isEmpty(counter) && themedStyles.spaceBetween]}>
+        {!isEmpty(counter) && (
+          <Label small style={themedStyles.counter}>{`${counter.current}/${counter.limit}`}</Label>
+        )}
+        <QuantitySelector {...{ action, secondaryAction, selectedQuantity, themedStyles }} />
+      </View>
+    </View>
+  );
+};
+
+UTProductItem.propTypes = {
+  action: ActionPropTypes,
+  additionalInfo: string,
+  amount: number,
+  counter: shape({ current: number, limit: number }),
+  discount: number,
+  imageProps: shape({ image: oneOf([string, element]), withUri: bool }),
+  previousAmount: number,
+  secondaryAction: ActionPropTypes,
+  selectedQuantity: number,
+  title: string
+};
+
+export default UTProductItem;

package/lib/components/UTProductItem/propTypes.js

@@ -0,0 +1,9 @@
+import { func, number, shape, string } from 'prop-types';
+
+export const ActionPropTypes = shape({
+  color: string,
+  name: string,
+  onPress: func,
+  size: number,
+  type: string
+});

package/lib/components/UTProductItem/styles.js

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+export const getUTProductItemStyles = (theme = {}) =>
+  StyleSheet.create({
+    actionsContainer: {
+      alignItems: 'center',
+      backgroundColor: theme.actionsBackground || '#E4E6EA',
+      borderRadius: 8,
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    additionalInfo: {
+      color: theme.additionalInfoColor || 'gray'
+    },
+    amountContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    container: {
+      borderBottomColor: theme.separatorColor || 'gray',
+      borderBottomWidth: 1,
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingVertical: 24
+    },
+    counter: {
+      backgroundColor: theme.counterBackground || '#EBF8FD',
+      borderRadius: 4,
+      color: theme.counterColor || '#035B83',
+      paddingHorizontal: 8,
+      paddingVertical: 4
+    },
+    discount: {
+      color: theme.discountColor || 'white'
+    },
+    discountChip: {
+      backgroundColor: theme.discountBackground || '#285AFF',
+      borderRadius: 4,
+      marginRight: 8,
+      paddingHorizontal: 8,
+      paddingVertical: 4
+    },
+    gap: {
+      marginBottom: 4
+    },
+    image: {
+      borderRadius: 14,
+      marginRight: 16
+    },
+    leftSection: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    mainInfo: {
+      display: 'flex',
+      minWidth: 160
+    },
+    previousAmount: {
+      color: theme.previousAmountColor || 'gray',
+      textDecorationLine: 'line-through',
+      textDecorationStyle: 'solid'
+    },
+    rightSection: {
+      alignItems: 'flex-end',
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    secondaryActionImage: {
+      marginHorizontal: 4
+    },
+    selectedQuantity: {
+      paddingHorizontal: 8
+    },
+    spaceBetween: {
+      justifyContent: 'space-between'
+    }
+  });

package/lib/components/UTProductItem/utils.js

@@ -0,0 +1,29 @@
+import Title from './components/Title';
+import AdditionalInfo from './components/AdditionalInfo';
+import Discount from './components/Discount';
+import Amount from './components/Amount';
+
+export const leftSectionComponents = ({
+  additionalInfo,
+  amount,
+  discount,
+  previousAmount,
+  themedStyles,
+  title
+}) =>
+  [
+    { Component: Title, key: 'title', props: { themedStyles, title }, show: !!title },
+    {
+      Component: AdditionalInfo,
+      key: 'additionalInfo',
+      props: { additionalInfo, themedStyles },
+      show: !!additionalInfo
+    },
+    {
+      Component: Discount,
+      key: 'discount',
+      props: { discount, previousAmount, themedStyles },
+      show: !!discount
+    },
+    { Component: Amount, key: 'amount', props: { amount, themedStyles }, show: !!amount }
+  ].filter(elem => elem.show);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { string, func, bool } from 'prop-types';
 import { View } from 'react-native';
-import _ from 'lodash';
+import merge from 'lodash/merge';
 
 import Button from '../../../../../../../Button';
 import { useTheme } from '../../../../../../../../theming';
@@ -10,7 +10,7 @@ import ownStyles from './styles';
 
 const ActionButton = ({ hidden, disabled, onPress, label, mode, style }) => {
   const theme = useTheme();
-  const themedStyles = _.merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
+  const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
 
   return (
     <View style={themedStyles.actionButton}>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import _ from 'lodash';
+import merge from 'lodash/merge';
 
 import Label from '../../../../../Label';
 import Button from '../../../../../Button';
@@ -13,31 +13,31 @@ import ActionButtonPropTypes from './components/ActionButton/types';
 import ownStyles, { ICON_SIZE } from './styles';
 import { NEXT, RETURN } from './constants';
 
-const BottomActions = ({ nextButton, returnButton, summary, message, theme }) => {
+const BottomActions = ({ nextButton, returnButton, summary, message, style }) => {
   const messageIcon = message?.icon;
   const MESSAGE_ICON_SIZE = 16;
   const checkboxProps = summary?.checkbox;
 
-  const themedStyles = _.merge({}, ownStyles, theme?.UTWorkflowContainer);
+  const themedStyles = merge({}, ownStyles, style);
   const nextButtonEnabled = nextButton && !nextButton.hidden;
   const returnButtonEnabled = returnButton && !returnButton.hidden;
 
   return (
-    <View style={ownStyles.bottomNav}>
+    <View style={themedStyles.bottomNav}>
       {summary && (
-        <View style={[ownStyles.summary, checkboxProps && ownStyles.summaryCheckbox]}>
+        <View style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}>
           {checkboxProps ? (
             <Checkbox {...checkboxProps} />
           ) : (
-            <View style={ownStyles.summaryTitles}>
-              <Label disabled medium style={ownStyles.summaryTitlesChild}>
+            <View style={themedStyles.summaryTitles}>
+              <Label disabled medium style={themedStyles.summaryTitlesChild}>
                 {summary.title}
               </Label>
               <Label>{summary.mainInfo}</Label>
             </View>
           )}
           {summary.actions && !checkboxProps && (
-            <View style={ownStyles.summaryActions}>
+            <View style={themedStyles.summaryActions}>
               {summary.actions.map((action, index) => (
                 <Button
                   key={action.name}
@@ -53,10 +53,12 @@ const BottomActions = ({ nextButton, returnButton, summary, message, theme }) =>
                   }
                   title={action.title}
                   labelColor={themedStyles.summaryActions?.labelColor || 'blue'}
-                  containerStyle={ownStyles.summaryActionContainer}
-                  contentStyle={!action.title && ownStyles.summaryActionButton}
+                  containerStyle={themedStyles.summaryActionContainer}
+                  contentStyle={!action.title && themedStyles.summaryActionButton}
                   onPress={action.onPress}
-                  outerContainerStyles={index !== summary.actions.length - 1 && ownStyles.summaryActionsChild}
+                  outerContainerStyles={
+                    index !== summary.actions.length - 1 && themedStyles.summaryActionsChild
+                  }
                 />
               ))}
             </View>
@@ -70,7 +72,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, theme }) =>
             themedStyles[`message${message.variant?.charAt(0).toUpperCase()}${message.variant?.slice(1)}`]
           ]}
         >
-          <Label white style={ownStyles.messageChild}>
+          <Label white style={themedStyles.messageChild}>
             {message.title}
           </Label>
           {messageIcon && (
@@ -85,16 +87,31 @@ const BottomActions = ({ nextButton, returnButton, summary, message, theme }) =>
           )}
         </View>
       )}
-      <View style={ownStyles.actionsContainer}>
+      <View style={themedStyles.actionsContainer}>
         {returnButtonEnabled && (
           <ActionButton
             mode="text"
             label={returnButton.label || RETURN}
-            style={nextButtonEnabled && { actionButton: ownStyles.actionsChild }}
+            style={{
+              actionButton: {
+                ...themedStyles.returnActionButton,
+                ...(nextButtonEnabled ? themedStyles.actionsChild : {})
+              },
+              buttonContainer: themedStyles.returnButtonContainer
+            }}
             {...returnButton}
           />
         )}
-        {nextButtonEnabled && <ActionButton label={nextButton.label || NEXT} {...nextButton} />}
+        {nextButtonEnabled && (
+          <ActionButton
+            label={nextButton.label || NEXT}
+            style={{
+              actionButton: themedStyles.nextActionButton,
+              buttonContainer: themedStyles.nextButtonContainer
+            }}
+            {...nextButton}
+          />
+        )}
       </View>
     </View>
   );

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

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { View, ScrollView } from 'react-native';
 import { number, func, shape, bool, string, element } from 'prop-types';
+import { merge } from 'lodash';
 
 import { useTheme } from '../../../../theming';
 import UTHeader from '../../../UTHeader';
@@ -26,6 +27,7 @@ const UTWorkflowContainer = ({
   returnButton,
   stages,
   stepsCount,
+  style,
   subtitle,
   summary,
   tagline,
@@ -35,17 +37,19 @@ const UTWorkflowContainer = ({
 }) => {
   useEffect(() => () => onExit?.(), []);
   const theme = useTheme();
+  const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer, style);
 
   return (
-    <View style={ownStyles.container}>
+    <View style={themedStyles.container}>
       {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
-      <ScrollView contentContainerStyle={ownStyles.content}>
+      <ScrollView contentContainerStyle={themedStyles.content}>
         {title && (
           <UTHeader
             {...{
               banner,
               helpText,
               requiredFieldInfo,
+              style: themedStyles,
               subtitle,
               tagline,
               title,
@@ -61,8 +65,8 @@ const UTWorkflowContainer = ({
             message,
             nextButton,
             returnButton,
-            summary,
-            theme
+            style: themedStyles,
+            summary
           }}
         />
       )}

package/lib/index.js

@@ -40,6 +40,7 @@ export { default as UTDetailDrawer } from './components/UTDetailDrawer';
 export { default as UTImage } from './components/UTImage';
 export { default as UTWorkflowContainer } from './components/UTWorkflowContainer';
 export { default as UTSelectableCard } from './components/UTSelectableCard';
+export { default as UTProductItem } from './components/UTProductItem';
 export { default as UTProgressBar } from './components/UTProgressBar';
 export { default as UTOnBoarding } from './components/UTOnBoarding';
 export { default as UTRoundView } from './components/UTRoundView';

package/package.json

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