@widergy/mobile-ui 0.40.1 → 1.1.0

package/lib/components/UTTextInput/components/BaseInput/index.js

@@ -1,13 +1,5 @@
 import { bool, elementType, func, oneOf, shape, string } from 'prop-types';
-import React, {
-  Fragment,
-  useState,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-  useMemo
-} from 'react';
+import React, { useState, forwardRef, useImperativeHandle, useRef, useEffect, useMemo } from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { TextInput } from 'react-native';
 import _ from 'lodash';
@@ -76,7 +68,7 @@ const BaseInput = forwardRef(
       : {};
 
     return (
-      <Fragment>
+      <>
         <TextInput
           autoCorrect={false}
           ref={textInputRef}
@@ -88,7 +80,11 @@ const BaseInput = forwardRef(
           editable={!select && !disabled}
           {...props}
           secureTextEntry={!showInput}
-          style={[...variantStyle.text, select && { color: theme.fonts?.fontColor }, select && disabled && { color: theme.fonts?.fontDisabledColor}]}
+          style={[
+            ...variantStyle.text,
+            select && { color: theme.fonts?.fontColor },
+            select && disabled && { color: theme.fonts?.fontDisabledColor }
+          ]}
         />
         {(RightIcon || hiddenInput) && (
           <Touchable
@@ -109,11 +105,13 @@ const BaseInput = forwardRef(
             )}
           </Touchable>
         )}
-      </Fragment>
+      </>
     );
   }
 );
 
+BaseInput.displayName = 'BaseInput';
+
 BaseInput.propTypes = {
   onBlur: func.isRequired,
   onFocus: func.isRequired,

package/lib/components/UTTextInput/proptypes.js

@@ -1,5 +1,6 @@
 import { string, func, bool, any, shape, elementType, oneOfType } from 'prop-types';
 
+// eslint-disable-next-line react/forbid-prop-types
 const refPropType = oneOfType([func, shape({ current: any })]);
 
 export default {

package/lib/components/UTTopbar/index.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View } from 'react-native';
+import { number } from 'prop-types';
+
+import IconButton from '../IconButton';
+import Label from '../Label';
+import UTStepper from '../UTStepper';
+import UTProgressBar from '../UTProgressBar';
+import { StagesPropTypes } from '../UTStepper/types';
+
+import ownStyles, { BAR_HEIGHT } from './styles';
+import { TopbarPropTypes } from './types';
+
+const UTTopbar = ({
+  currentStage,
+  currentStep,
+  stages,
+  stepsCount,
+  theme,
+  topbar: { colorTheme = 'light', goBack, title, variant = 'secondary', icon } = {}
+}) => {
+  const size = { big: variant === 'primary' };
+
+  const ownTheme = theme.UTWorkflowContainer?.topbar?.[colorTheme];
+
+  return (
+    <View>
+      <View style={[ownStyles.container, ownTheme?.container]}>
+        <IconButton
+          color={ownTheme?.icon || 'black'}
+          name={icon?.name || 'arrow-left'}
+          size={24}
+          style={ownStyles.child}
+          type={icon?.type || 'material-community'}
+          onPress={goBack}
+        />
+        <Label color={ownTheme?.text || 'black'} {...size} bold style={ownStyles.child}>
+          {title}
+        </Label>
+        {stages && <UTStepper {...{ currentStage, stages }} />}
+      </View>
+      {currentStep && stepsCount && (
+        <UTProgressBar
+          value={currentStep / stepsCount}
+          styles={{
+            barContainer: {
+              height: BAR_HEIGHT
+            }
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+UTTopbar.propTypes = {
+  currentStage: number,
+  currentStep: number,
+  stages: StagesPropTypes,
+  stepsCount: number,
+  topbar: TopbarPropTypes
+};
+
+export default UTTopbar;

package/lib/components/UTTopbar/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const BAR_HEIGHT = 8;
+
+export default StyleSheet.create({
+  child: {
+    marginRight: 16
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    padding: 16
+  }
+});

package/lib/components/UTTopbar/types.js

@@ -0,0 +1,8 @@
+import { func, oneOf, shape, string } from 'prop-types';
+
+export const TopbarPropTypes = shape({
+  colorTheme: oneOf(['light', 'dark']),
+  goBack: func,
+  title: string,
+  variant: oneOf(['primary', 'secondary'])
+});

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;