@widergy/mobile-ui 1.0.0 → 1.2.0

package/lib/components/UTWorkflowContainer/index.js

@@ -1,108 +1,16 @@
-import React, { useEffect } from 'react';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { View } from 'react-native';
-import { number, func, shape, bool, string, oneOf } from 'prop-types';
-import _ from 'lodash';
+import React from 'react';
+import { string } from 'prop-types';
 
-import Label from '../Label';
-import { useTheme } from '../../theming';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
 
-import ownStyles from './styles';
-import Header from './components/Header';
-import ActionButtonPropTypes from './components/StepsHandler/components/ActionButton/types';
-import BottomStepHandler from './components/BottomStepHandler';
-
-const UTWorkflowContainer = ({
-  stepsCount,
-  currentStep,
-  nextButton,
-  returnButton,
-  onExit,
-  hideStepCounter,
-  children,
-  styles = {},
-  title,
-  subtitle,
-  stepCounter,
-  bottomHandler,
-  hideHeader = false,
-  useMarkdown
-}) => {
-  useEffect(() => () => onExit?.(), []);
-  const theme = useTheme();
-
-  const themedStyles = _.merge({}, ownStyles, theme?.UTWorkflowContainer, styles);
-
-  const { titleProps, subtitleProps } = themedStyles?.labelProps || {};
-
-  const Title = React.isValidElement(title) ? (
-    title
-  ) : (
-    <Label big bold {...titleProps} style={themedStyles.title}>
-      {title}
-    </Label>
-  );
-
-  const Subtitle = React.isValidElement(subtitle) ? (
-    subtitle
-  ) : (
-    <Label
-      medium
-      {...subtitleProps}
-      style={themedStyles.subtitle}
-      markdownStyles={themedStyles.markdown}
-      useMarkdown={useMarkdown}
-    >
-      {subtitle}
-    </Label>
-  );
-
-  return (
-    <View style={themedStyles.container}>
-      {!hideHeader && (
-        <Header
-          stepsCount={stepsCount}
-          currentStep={currentStep}
-          nextButton={nextButton}
-          returnButton={returnButton}
-          hideStepCounter={hideStepCounter}
-          themedStyles={themedStyles}
-          styles={styles}
-          stepCounter={stepCounter}
-          bottomHandler={bottomHandler}
-        />
-      )}
-      {!!title && Title}
-      {!!subtitle && Subtitle}
-      {children}
-      {bottomHandler && (
-        <BottomStepHandler
-          stepsCount={stepsCount}
-          currentStep={currentStep}
-          styles={styles}
-          nextButton={nextButton}
-          themedStyles={themedStyles}
-          returnButton={returnButton}
-          hideStepCounter={hideStepCounter}
-          stepCounter={stepCounter}
-        />
-      )}
-    </View>
-  );
+const UTWorkflowContainer = ({ version = 'V0', ...props }) => {
+  const Component = { V0, V1 }[version];
+  return <Component {...props} />;
 };
+
 UTWorkflowContainer.propTypes = {
-  stepsCount: number.isRequired,
-  currentStep: number.isRequired,
-  nextButton: ActionButtonPropTypes.isRequired,
-  returnButton: ActionButtonPropTypes.isRequired,
-  onExit: func,
-  hideStepCounter: bool,
-  styles: shape(ViewPropTypes?.style),
-  title: string,
-  subtitle: string,
-  stepCounter: oneOf([func, string]),
-  bottomHandler: bool,
-  hideHeader: bool,
-  useMarkdown: bool
+  version: string
 };
+
 export default UTWorkflowContainer;

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/BottomStepHandler/index.js

@@ -28,7 +28,7 @@ const BottomStepHandler = ({
         nextButton={nextButton}
         returnButton={returnButton}
         hideStepCounter={hideStepCounter}
-        styles={{ stepsHandler: styles?.bottomStepHandler, stepCounter: styles?.bottomStepCounter }}
+        styles={{ stepCounter: styles?.bottomStepCounter, stepsHandler: styles?.bottomStepHandler }}
         themedStyles={mergedStyles}
         stepCounter={stepCounter}
       />
@@ -37,13 +37,13 @@ const BottomStepHandler = ({
 };
 
 BottomStepHandler.propTypes = {
-  stepsCount: number.isRequired,
   currentStep: number.isRequired,
+  hideStepCounter: bool,
   nextButton: ActionButtonPropTypes.isRequired,
   returnButton: ActionButtonPropTypes.isRequired,
-  hideStepCounter: bool,
-  styles: shape(ViewPropTypes?.style),
   stepCounter: oneOf([func, string]),
+  stepsCount: number.isRequired,
+  styles: shape(ViewPropTypes?.style),
   // eslint-disable-next-line react/forbid-prop-types
   themedStyles: any
 };

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/BottomStepHandler/styles.js

@@ -1,14 +1,14 @@
 import { StyleSheet } from 'react-native';
 
-import { verticalScale } from '../../../../utils/scaleUtils';
+import { verticalScale } from '../../../../../../utils/scaleUtils';
 
 export const BAR_HEIGHT = verticalScale(10);
 
 export default StyleSheet.create({
   bottomStepContainer: {
     alignItems: 'center',
+    marginTop: 'auto',
     overflow: 'hidden',
-    width: '100%',
-    marginTop: 'auto'
+    width: '100%'
   }
 });

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/Header/index.js

@@ -3,7 +3,7 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
 import { number, bool, shape, oneOf, func, string } from 'prop-types';
 
-import UTProgressBar from '../../../UTProgressBar';
+import UTProgressBar from '../../../../../UTProgressBar';
 import StepsHandler from '../StepsHandler';
 import ActionButtonPropTypes from '../StepsHandler/components/ActionButton/types';
 
@@ -26,13 +26,13 @@ const Header = ({
       value={getProgressValue(currentStep, stepsCount)}
       styles={{
         barContainer: {
-          marginTop: -BAR_HEIGHT / 2,
-          marginBottom: -BAR_HEIGHT / 2 + 25,
           height: BAR_HEIGHT,
+          marginBottom: -BAR_HEIGHT / 2 + 25,
+          marginTop: -BAR_HEIGHT / 2,
           ...styles?.barContainer
         },
-        progressBar: styles?.progressBar,
-        borderStyle: styles?.borderStyle || UTProgressBar.BorderStyles.SLOPE
+        borderStyle: styles?.borderStyle || UTProgressBar.BorderStyles.SLOPE,
+        progressBar: styles?.progressBar
       }}
     />
     {!bottomHandler && (
@@ -51,14 +51,14 @@ const Header = ({
 );
 
 Header.propTypes = {
-  stepsCount: number.isRequired,
+  bottomHandler: bool,
   currentStep: number.isRequired,
+  hideStepCounter: bool,
   nextButton: ActionButtonPropTypes.isRequired,
   returnButton: ActionButtonPropTypes.isRequired,
-  hideStepCounter: bool,
-  styles: shape(ViewPropTypes?.style),
   stepCounter: oneOf([func, string]),
-  bottomHandler: bool,
+  stepsCount: number.isRequired,
+  styles: shape(ViewPropTypes?.style),
   themedStyles: shape(ViewPropTypes?.style)
 };
 

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/Header/styles.js

@@ -1,14 +1,14 @@
 import { StyleSheet } from 'react-native';
 
-import { verticalScale } from '../../../../utils/scaleUtils';
+import { verticalScale } from '../../../../../../utils/scaleUtils';
 
 export const BAR_HEIGHT = verticalScale(10);
 
 export default StyleSheet.create({
   container: {
     alignItems: 'center',
+    marginBottom: verticalScale(30),
     overflow: 'hidden',
-    width: '100%',
-    marginBottom: verticalScale(30)
+    width: '100%'
   }
 });

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/StepsHandler/components/ActionButton/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Icon from 'react-native-vector-icons/AntDesign';
 
-import Touchable from '../../../../../Touchable';
-import { withTheme } from '../../../../../../theming';
+import Touchable from '../../../../../../../Touchable';
+import { withTheme } from '../../../../../../../../theming';
 
 import createStyles, { DEFAULT_ICON_SIZE } from './styles';
 import ActionButtonProptypes from './types';

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/StepsHandler/components/ActionButton/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import { horizontalScale } from '../../../../../../utils/scaleUtils';
+import { horizontalScale } from '../../../../../../../../utils/scaleUtils';
 
 const BUTTON_SIZE = horizontalScale(45);
 const BORDER_WIDTH = 1.5;
@@ -8,29 +8,29 @@ export const DEFAULT_ICON_SIZE = horizontalScale(20);
 
 export default theme =>
   StyleSheet.create({
-    disabled: {
-      opacity: 0.5
-    },
-    shown: {
-      opacity: 1
-    },
     borderless: {
       borderWidth: 0
     },
     container: {
       alignItems: 'center',
-      justifyContent: 'center',
-      padding: 10,
-      borderRadius: 100,
       borderColor: theme.colors.primary,
+      borderRadius: 100,
       borderWidth: BORDER_WIDTH,
       height: BUTTON_SIZE,
+      justifyContent: 'center',
+      padding: 10,
       width: BUTTON_SIZE
     },
-    icon: {
-      marginTop: BORDER_WIDTH
+    disabled: {
+      opacity: 0.5
     },
     hidden: {
       opacity: 0
+    },
+    icon: {
+      marginTop: BORDER_WIDTH
+    },
+    shown: {
+      opacity: 1
     }
   });

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/StepsHandler/components/ActionButton/types.js

@@ -2,19 +2,19 @@ import { string, bool, func, number, shape } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { Text } from 'react-native';
 
-import TouchablePropTypes from '../../../../../Touchable/propTypes';
-import { themeType } from '../../../../../../theming';
+import TouchablePropTypes from '../../../../../../../Touchable/propTypes';
+import { themeType } from '../../../../../../../../theming';
 
 export default shape({
-  name: string,
-  disabled: bool,
-  onPress: func,
   borderless: bool,
-  size: number,
   color: string,
+  disabled: bool,
+  IconProps: shape(Text?.propTypes),
   IconStyle: ViewPropTypes?.style,
-  TouchableStyle: ViewPropTypes?.style,
+  name: string,
+  onPress: func,
+  size: number,
+  theme: themeType,
   TouchableProps: shape(TouchablePropTypes),
-  IconProps: shape(Text?.propTypes),
-  theme: themeType
+  TouchableStyle: ViewPropTypes?.style
 });

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/StepsHandler/index.js

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { number, bool, shape, oneOf, func, string, any, elementType } from 'prop-types';
 import _ from 'lodash';
 
-import Label from '../../../Label';
+import Label from '../../../../../Label';
 
 import ownStyles from './styles';
 import { defaultStepCounter } from './utils';
@@ -65,16 +65,16 @@ const StepsHandler = ({
 };
 
 StepsHandler.propTypes = {
+  currentStep: number.isRequired,
+  hideStepCounter: bool,
   nextButton: ActionButtonPropTypes.isRequired,
   returnButton: ActionButtonPropTypes.isRequired,
+  stepCounter: oneOf([string, func]),
+  StepCounterComponent: elementType,
   stepsCount: number.isRequired,
-  currentStep: number.isRequired,
-  hideStepCounter: bool,
   styles: shape(ViewPropTypes?.style),
-  stepCounter: oneOf([string, func]),
   // eslint-disable-next-line react/forbid-prop-types
-  themedStyles: any,
-  StepCounterComponent: elementType
+  themedStyles: any
 };
 
 export default StepsHandler;

package/lib/components/UTWorkflowContainer/{components → versions/V0/components}/StepsHandler/styles.js

@@ -2,9 +2,9 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   stepsHandler: {
-    width: '100%',
-    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between'
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
   }
 });

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

@@ -0,0 +1,108 @@
+import React, { useEffect } from 'react';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { View } from 'react-native';
+import { number, func, shape, bool, string, oneOf } from 'prop-types';
+import _ from 'lodash';
+
+import Label from '../../../Label';
+import { useTheme } from '../../../../theming';
+
+import ownStyles from './styles';
+import Header from './components/Header';
+import ActionButtonPropTypes from './components/StepsHandler/components/ActionButton/types';
+import BottomStepHandler from './components/BottomStepHandler';
+
+const UTWorkflowContainer = ({
+  stepsCount,
+  currentStep,
+  nextButton,
+  returnButton,
+  onExit,
+  hideStepCounter,
+  children,
+  styles = {},
+  title,
+  subtitle,
+  stepCounter,
+  bottomHandler,
+  hideHeader = false,
+  useMarkdown
+}) => {
+  useEffect(() => () => onExit?.(), []);
+  const theme = useTheme();
+
+  const themedStyles = _.merge({}, ownStyles, theme?.UTWorkflowContainer, styles);
+
+  const { titleProps, subtitleProps } = themedStyles?.labelProps || {};
+
+  const Title = React.isValidElement(title) ? (
+    title
+  ) : (
+    <Label big bold {...titleProps} style={themedStyles.title}>
+      {title}
+    </Label>
+  );
+
+  const Subtitle = React.isValidElement(subtitle) ? (
+    subtitle
+  ) : (
+    <Label
+      medium
+      {...subtitleProps}
+      style={themedStyles.subtitle}
+      markdownStyles={themedStyles.markdown}
+      useMarkdown={useMarkdown}
+    >
+      {subtitle}
+    </Label>
+  );
+
+  return (
+    <View style={themedStyles.container}>
+      {!hideHeader && (
+        <Header
+          stepsCount={stepsCount}
+          currentStep={currentStep}
+          nextButton={nextButton}
+          returnButton={returnButton}
+          hideStepCounter={hideStepCounter}
+          themedStyles={themedStyles}
+          styles={styles}
+          stepCounter={stepCounter}
+          bottomHandler={bottomHandler}
+        />
+      )}
+      {!!title && Title}
+      {!!subtitle && Subtitle}
+      {children}
+      {bottomHandler && (
+        <BottomStepHandler
+          stepsCount={stepsCount}
+          currentStep={currentStep}
+          styles={styles}
+          nextButton={nextButton}
+          themedStyles={themedStyles}
+          returnButton={returnButton}
+          hideStepCounter={hideStepCounter}
+          stepCounter={stepCounter}
+        />
+      )}
+    </View>
+  );
+};
+UTWorkflowContainer.propTypes = {
+  bottomHandler: bool,
+  currentStep: number.isRequired,
+  hideHeader: bool,
+  hideStepCounter: bool,
+  nextButton: ActionButtonPropTypes.isRequired,
+  onExit: func,
+  returnButton: ActionButtonPropTypes.isRequired,
+  stepCounter: oneOf([func, string]),
+  stepsCount: number.isRequired,
+  styles: shape(ViewPropTypes?.style),
+  subtitle: string,
+  title: string,
+  useMarkdown: bool
+};
+export default UTWorkflowContainer;

package/lib/components/UTWorkflowContainer/{styles.js → versions/V0/styles.js}

@@ -4,12 +4,12 @@ const BORDER_RADIUS_SIZE = 20;
 
 export default StyleSheet.create({
   container: {
-    flex: 1,
     alignItems: 'center',
     backgroundColor: 'white',
-    borderRadius: BORDER_RADIUS_SIZE,
-    paddingHorizontal: BORDER_RADIUS_SIZE / 1.25,
     borderColor: '#e2e2e2',
-    borderWidth: 1
+    borderRadius: BORDER_RADIUS_SIZE,
+    borderWidth: 1,
+    flex: 1,
+    paddingHorizontal: BORDER_RADIUS_SIZE / 1.25
   }
 });

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { string, func, bool } from 'prop-types';
+import { View } from 'react-native';
+import _ from 'lodash';
+
+import Button from '../../../../../../../Button';
+
+import ownStyles from './styles';
+
+const ActionButton = ({ hidden, disabled, onPress, label, mode, style }) => {
+  const themedStyles = _.merge({}, ownStyles, style);
+
+  return (
+    <View style={themedStyles.actionButton}>
+      <Button
+        disabled={disabled || hidden}
+        mode={mode}
+        lowerCase
+        title={label}
+        onPress={onPress}
+        containerStyle={themedStyles.buttonContainer}
+      />
+    </View>
+  );
+};
+
+ActionButton.propTypes = {
+  disabled: bool,
+  hidden: bool,
+  label: string,
+  mode: string,
+  onPress: func
+};
+
+export default ActionButton;

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

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  actionButton: {
+    flexGrow: 1
+  },
+  button: {
+    width: '100%'
+  },
+  buttonContainer: {
+    width: '100%'
+  }
+});

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

@@ -0,0 +1,9 @@
+import { string, bool, func, shape, oneOf } from 'prop-types';
+
+export default shape({
+  disabled: bool,
+  hidden: bool,
+  label: string,
+  mode: oneOf(['contained', 'outlined', 'text']),
+  onPress: func
+});

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

@@ -0,0 +1,2 @@
+export const NEXT = 'Siguiente';
+export const RETURN = 'Anterior';

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import { View } from 'react-native';
+import _ from 'lodash';
+
+import Label from '../../../../../Label';
+import Button from '../../../../../Button';
+import Icon from '../../../../../Icon';
+import Checkbox from '../../../../../Checkbox';
+import { MessagePropTypes, SummaryPropTypes } from '../../types';
+
+import ActionButton from './components/ActionButton';
+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 messageIcon = message?.icon;
+  const MESSAGE_ICON_SIZE = 16;
+  const checkboxProps = summary?.checkbox;
+
+  const themedStyles = _.merge({}, ownStyles, theme?.UTWorkflowContainer);
+  const nextButtonEnabled = nextButton && !nextButton.hidden;
+  const returnButtonEnabled = returnButton && !returnButton.hidden;
+
+  return (
+    <View style={ownStyles.bottomNav}>
+      {summary && (
+        <View style={[ownStyles.summary, checkboxProps && ownStyles.summaryCheckbox]}>
+          {checkboxProps ? (
+            <Checkbox {...checkboxProps} />
+          ) : (
+            <View style={ownStyles.summaryTitles}>
+              <Label disabled medium style={ownStyles.summaryTitlesChild}>
+                {summary.title}
+              </Label>
+              <Label>{summary.mainInfo}</Label>
+            </View>
+          )}
+          {summary.actions && !checkboxProps && (
+            <View style={ownStyles.summaryActions}>
+              {summary.actions.map((action, index) => (
+                <Button
+                  key={action.name}
+                  secondary
+                  icon={
+                    action.icon && {
+                      height: action.icon.height || ICON_SIZE,
+                      name: action.icon.name,
+                      size: action.icon.size || ICON_SIZE,
+                      type: action.icon.type,
+                      width: action.icon.width || ICON_SIZE
+                    }
+                  }
+                  title={action.title}
+                  labelColor={themedStyles.summaryActions?.labelColor || 'blue'}
+                  containerStyle={ownStyles.summaryActionContainer}
+                  contentStyle={!action.title && ownStyles.summaryActionButton}
+                  onPress={action.onPress}
+                  outerContainerStyles={index !== summary.actions.length - 1 && ownStyles.summaryActionsChild}
+                />
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+      {message && (
+        <View
+          style={[
+            themedStyles.message,
+            themedStyles[`message${message.variant?.charAt(0).toUpperCase()}${message.variant?.slice(1)}`]
+          ]}
+        >
+          <Label white style={ownStyles.messageChild}>
+            {message.title}
+          </Label>
+          {messageIcon && (
+            <Icon
+              name={messageIcon.name}
+              type={messageIcon.type}
+              size={MESSAGE_ICON_SIZE}
+              width={MESSAGE_ICON_SIZE}
+              height={MESSAGE_ICON_SIZE}
+              color="white"
+            />
+          )}
+        </View>
+      )}
+      <View style={ownStyles.actionsContainer}>
+        {returnButtonEnabled && (
+          <ActionButton
+            mode="text"
+            label={returnButton.label || RETURN}
+            style={nextButtonEnabled && { actionButton: ownStyles.actionsChild }}
+            {...returnButton}
+          />
+        )}
+        {nextButtonEnabled && <ActionButton label={nextButton.label || NEXT} {...nextButton} />}
+      </View>
+    </View>
+  );
+};
+
+BottomActions.propTypes = {
+  message: MessagePropTypes,
+  nextButton: ActionButtonPropTypes,
+  returnButton: ActionButtonPropTypes,
+  summary: SummaryPropTypes
+};
+
+export default BottomActions;