@widergy/mobile-ui 0.40.1 → 1.1.0

package/lib/components/UTBanner/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import { shape, string } from 'prop-types';
+import _ from 'lodash';
+
+import Icon from '../Icon';
+import Label from '../Label';
+import { useTheme } from '../../theming';
+
+import ownStyles from './styles';
+
+const UTBanner = ({ text, icon, style }) => {
+  const theme = useTheme();
+
+  const ICON_SIZE = 24;
+
+  const themedStyles = _.merge({}, ownStyles, theme?.UTBanner, style);
+
+  return (
+    <View style={themedStyles.banner}>
+      {icon && (
+        <Icon
+          name={icon.name}
+          type={icon.type}
+          size={ICON_SIZE}
+          height={ICON_SIZE}
+          width={ICON_SIZE}
+          color={theme.UTBanner?.iconColor}
+          style={ownStyles.icon}
+        />
+      )}
+      <Label>{text}</Label>
+    </View>
+  );
+};
+
+UTBanner.propTypes = {
+  icon: shape({ name: string, type: string }),
+  text: string
+};
+
+export default UTBanner;

package/lib/components/UTBanner/styles.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  banner: {
+    backgroundColor: '#F4F5F7',
+    borderRadius: 8,
+    display: 'flex',
+    flexDirection: 'row',
+    padding: 16
+  },
+  icon: {
+    marginRight: 16
+  }
+});

package/lib/components/UTCBUInput/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import React from 'react';
-import { shape, func, any, elementType } from 'prop-types';
+import { shape, func, any, elementType, oneOfType, number, string } from 'prop-types';
 
 import UTTextInput from '../UTTextInput';
 
@@ -38,7 +38,7 @@ const UTCBUInput = ({ input, configuration, ...props }) => {
 };
 
 UTCBUInput.propTypes = {
-  input: shape({ onChange: func.isRequired, value: any }),
+  input: shape({ onChange: func.isRequired, value: oneOfType([number, string]) }),
   InputComponent: elementType,
   // eslint-disable-next-line react/forbid-prop-types
   configuration: any

package/lib/components/UTHeader/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View } from 'react-native';
+import { string, bool, shape, element } from 'prop-types';
+
+import Label from '../Label';
+import UTBanner from '../UTBanner';
+
+import ownStyles from './styles';
+
+const Header = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner }) => {
+  return (
+    <View style={ownStyles.header}>
+      {tagline && (
+        <Label disabled bold useMarkdown={useMarkdown} style={ownStyles.child}>
+          {tagline.toUpperCase()}
+        </Label>
+      )}
+      <View>
+        <Label big bold style={ownStyles.title} useMarkdown={useMarkdown}>
+          {title}
+        </Label>
+        {subtitle && (
+          <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+            {subtitle}
+          </Label>
+        )}
+      </View>
+      {requiredFieldInfo && (
+        <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+          {requiredFieldInfo}
+        </Label>
+      )}
+      {helpText && (
+        <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+          {helpText}
+        </Label>
+      )}
+      {banner?.text && <UTBanner text={banner.text} icon={banner.icon} style={{ banner: ownStyles.child }} />}
+    </View>
+  );
+};
+
+Header.propTypes = {
+  banner: shape({
+    Icon: element,
+    text: string
+  }),
+  helpText: string,
+  requiredFieldInfo: string,
+  subtitle: string,
+  tagline: string,
+  title: string,
+  useMarkdown: bool
+};
+
+export default Header;

package/lib/components/UTHeader/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  child: {
+    marginBottom: 16
+  },
+  header: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: 16,
+    paddingTop: 24
+  },
+  title: {
+    marginBottom: 12
+  }
+});

package/lib/components/UTMenu/components/ListView/index.js

@@ -1,9 +1,13 @@
+/* eslint-disable react/sort-comp */
+/* eslint-disable class-methods-use-this */
 import React, { PureComponent } from 'react';
 import { FlatList } from 'react-native';
 
 import propTypes from './proptypes';
 
 class ListView extends PureComponent {
+  keyExtractor = (option, index) => option.id?.toString() || index.toString();
+
   constructor(props) {
     super(props);
     this.state = {
@@ -41,8 +45,6 @@ class ListView extends PureComponent {
     );
   };
 
-  keyExtractor = (option, index) => option.id?.toString() || index.toString();
-
   render() {
     const { filteredOptions, ItemSeparatorComponent } = this.props;
     const { style } = this.state;

package/lib/components/UTMenu/components/MenuOption/index.js

@@ -24,6 +24,7 @@ MenuOption.propTypes = {
   label: string,
   selected: bool,
   styles: ViewPropTypes.style,
+  // eslint-disable-next-line react/forbid-prop-types
   item: shape(any)
 };
 

package/lib/components/UTMenu/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Dimensions, Keyboard, KeyboardAvoidingView, Modal, TouchableOpacity, View } from 'react-native';
 
 import useKeyboardHeight from '../../hooks/useKeyboardHeight';
@@ -98,7 +98,7 @@ const UTMenu = ({
   const focusSearchInput = () => withAutocomplete && searchTextInputRef.current?.focus();
 
   return (
-    <Fragment>
+    <>
       <TouchableOpacity
         disabled={disabled}
         onPress={isOpen ? closeMenu : openMenu}
@@ -156,7 +156,7 @@ const UTMenu = ({
           </KeyboardAvoidingView>
         </View>
       </Modal>
-    </Fragment>
+    </>
   );
 };
 

package/lib/components/UTMenu/proptypes.js

@@ -1,10 +1,10 @@
-import { any, arrayOf, bool, func, number, shape, string } from 'prop-types';
+import { arrayOf, bool, func, number, oneOfType, shape, string } from 'prop-types';
 
 const optionType = shape({
   label: string.isRequired,
   id: string.isRequired,
   action: func,
-  value: any.isRequired
+  value: oneOfType([number, string])
 });
 
 export default {

package/lib/components/UTOnBoarding/components/CardContent/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Animated } from 'react-native';
 
 import Label from '../../../Label';
@@ -9,7 +9,7 @@ import propTypes from './propTypes';
 import ownStyles from './styles';
 
 const CardContent = ({ onPress, currentPage, opacity, styles, buttonTitle = '', disabled }) => (
-  <Fragment>
+  <>
     <Animated.View style={[styles?.textContainer, { opacity }]}>
       <Label big bold style={styles?.title}>
         {currentPage?.title || ''}
@@ -26,7 +26,7 @@ const CardContent = ({ onPress, currentPage, opacity, styles, buttonTitle = '',
       {...styles?.buttonProps}
       disabled={disabled}
     />
-  </Fragment>
+  </>
 );
 
 CardContent.propTypes = propTypes;

package/lib/components/UTOnBoarding/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { View, ImageBackground, Animated } from 'react-native';
-// eslint-disable-next-line import/no-unresolved
-import ViewPager from '@react-native-community/viewpager';
+// // eslint-disable-next-line import/no-unresolved
+import PagerView from 'react-native-pager-view';
 
 import UTRoundView from '../UTRoundView';
 import useEffectOnlyOnUpdates from '../../hooks/useEffectOnlyOnUpdates';
@@ -89,7 +89,7 @@ const UTOnBoarding = ({
 
   return (
     <View style={ownStyles.expand}>
-      <ViewPager style={ownStyles.expand} ref={viewPagerRef} scrollEnabled={false}>
+      <PagerView style={ownStyles.expand} ref={viewPagerRef} scrollEnabled={false}>
         {pages.map(page => (
           <ImageBackground
             key={`${page?.title} - ${page?.description}`}
@@ -97,7 +97,7 @@ const UTOnBoarding = ({
             source={page.image?.source}
           />
         ))}
-      </ViewPager>
+      </PagerView>
       <UTRoundView
         styles={{
           outerContainer: [

package/lib/components/UTPasswordField/components/PasswordValidations/index.js

@@ -21,12 +21,8 @@ const PasswordValidations = ({ passwordValidations, value, style, shouldShowErro
 
   const validations = validatedRegExps.filter(({ requirement }) => requirement);
   const errors = validatedRegExps.filter(({ requirement }) => !requirement);
-  const {
-    ValidationFailedIcon,
-    ValidationPassedIcon,
-    ErrorIcon,
-    NoValueIcon
-  } = theme.UTPasswordField.passwordIcons;
+  const { ValidationFailedIcon, ValidationPassedIcon, ErrorIcon, NoValueIcon } =
+    theme.UTPasswordField.passwordIcons;
   const showErrors = errors.some(({ assertion }) => !assertion);
 
   return (

package/lib/components/UTSelect/componentes/MultipleItem/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/forbid-prop-types */
 import { any, bool, func, shape, string } from 'prop-types';
 import React, { memo } from 'react';
 

package/lib/components/UTSelect/proptypes.js

@@ -4,6 +4,7 @@ const optionType = shape({
   label: string.isRequired,
   id: string.isRequired,
   action: func,
+  // eslint-disable-next-line react/forbid-prop-types
   value: any.isRequired
 });
 

package/lib/components/UTStepFeedback/components/CircleNumber/index.js

@@ -16,16 +16,18 @@ const CircleNumber = ({ index, step, themedStyles, status, hideStepNumber }) =>
 
   return (
     <View style={{ ...themedStyles.step, ...complementaryStyle }}>
-      {!hideStepNumber && <Label
-        color={
-          (status.isComplete && themedStyles.stepLabel.complete) ||
-          (status.isActive && themedStyles.stepLabel.active) ||
-          (status.isFuture && themedStyles.stepLabel.future)
-        }
-        bold
-      >
-        {step.stepShortLabel || index + 1}
-      </Label>}
+      {!hideStepNumber && (
+        <Label
+          color={
+            (status.isComplete && themedStyles.stepLabel.complete) ||
+            (status.isActive && themedStyles.stepLabel.active) ||
+            (status.isFuture && themedStyles.stepLabel.future)
+          }
+          bold
+        >
+          {step.stepShortLabel || index + 1}
+        </Label>
+      )}
       {status.isComplete && (
         <View style={themedStyles.checkContainer}>
           <Icon name="check" color={themedStyles.checkIcon.color} size={CHECK_ICON_SIZE} />

package/lib/components/UTStepFeedback/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Animated, TouchableOpacity, View } from 'react-native';
 import _ from 'lodash';
 
@@ -16,6 +16,19 @@ import ownStyles, {
 } from './styles';
 import stepFeedbackProptypes from './proptypes';
 
+const Wrapper = ({ children, onStepPress, status, step }) =>
+  onStepPress ? (
+    <TouchableOpacity
+      onPress={() => {
+        if (!status.isActive && !status.isFuture) onStepPress(step.step);
+      }}
+    >
+      {children}
+    </TouchableOpacity>
+  ) : (
+    children
+  );
+
 const StepFeedback = ({
   currentStep,
   disableTriangle,
@@ -72,27 +85,25 @@ const StepFeedback = ({
     const isFirst = index === 0;
     const centerLabel = isLast || isFirst;
     return (
-      <Fragment>
-        <View style={styles.centerLabelContainer}>
-          <Label
-            center={labelsCentered || !centerLabel}
-            small
-            style={[
-              styles.title,
-              isFirst && !labelsCentered && styles.textAlignFirst,
-              isLast && !labelsCentered && styles.textAlingLast
-            ]}
-            textProps={{ numberOfLines: 2 }}
-            color={
-              (status.isComplete && styles.titleLabel.complete) ||
-              (status.isActive && styles.titleLabel.active) ||
-              (status.isFuture && styles.titleLabel.future)
-            }
-          >
-            {step.stepDescription}
-          </Label>
-        </View>
-      </Fragment>
+      <View style={styles.centerLabelContainer}>
+        <Label
+          center={labelsCentered || !centerLabel}
+          small
+          style={[
+            styles.title,
+            isFirst && !labelsCentered && styles.textAlignFirst,
+            isLast && !labelsCentered && styles.textAlingLast
+          ]}
+          textProps={{ numberOfLines: 2 }}
+          color={
+            (status.isComplete && styles.titleLabel.complete) ||
+            (status.isActive && styles.titleLabel.active) ||
+            (status.isFuture && styles.titleLabel.future)
+          }
+        >
+          {step.stepDescription}
+        </Label>
+      </View>
     );
   };
 
@@ -102,23 +113,11 @@ const StepFeedback = ({
       isComplete: index < currentIndex,
       isFuture: index > currentIndex
     };
-    const Wrapper = ({ children }) =>
-      onStepPress ? (
-        <TouchableOpacity
-          onPress={() => {
-            if (!status.isActive && !status.isFuture) onStepPress(step.step);
-          }}
-        >
-          {children}
-        </TouchableOpacity>
-      ) : (
-        children
-      );
 
     return (
-      <Fragment>
+      <>
         <View style={styles.stepContainer}>
-          <Wrapper>
+          <Wrapper onStepPress={onStepPress} status={status} step={step}>
             <View style={styles.centerStepContainer}>
               <CircleNumber
                 hideStepNumber={hideStepNumber}
@@ -134,7 +133,7 @@ const StepFeedback = ({
         {index < steps.length - 1 && (
           <View style={[styles.stepSeparator, status.isComplete && styles.stepSeparatorComplete]} />
         )}
-      </Fragment>
+      </>
     );
   };
 

package/lib/components/UTStepper/components/Connectors/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+import { func, number } from 'prop-types';
+
+import ownStyles from './styles';
+
+const Connectors = ({ isCompleted, numberOfStages, theme = {} }) => {
+  const connectors = Array.from(Array(numberOfStages - 1), (_, index) => ({ key: index })).map(
+    ({ key }, index) => (
+      <View
+        key={key}
+        style={[
+          ownStyles.connector,
+          theme.connector,
+          isCompleted(index + 1) && [ownStyles.coloredProgress, theme.coloredProgress]
+        ]}
+      />
+    )
+  );
+
+  return (
+    <View style={ownStyles.wrapper}>
+      <View style={ownStyles.container}>{connectors}</View>
+    </View>
+  );
+};
+
+Connectors.propTypes = {
+  isCompleted: func,
+  numberOfStages: number
+};
+
+export default Connectors;

package/lib/components/UTStepper/components/Connectors/styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+
+export default StyleSheet.create({
+  coloredProgress: {
+    backgroundColor: 'blue'
+  },
+  connector: {
+    backgroundColor: 'gray',
+    flexGrow: 1,
+    height: 2
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  wrapper: {
+    left: 0,
+    paddingHorizontal: OVAL_SIZE,
+    paddingTop: OVAL_SIZE,
+    position: 'absolute',
+    width: '100%'
+  }
+});

package/lib/components/UTStepper/components/Step/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { func, number, shape } from 'prop-types';
+import { View } from 'react-native';
+
+import Icon from '../../../Icon';
+import { OVAL_SIZE } from '../../styles';
+
+import ownStyles, { ICON_OFFSET } from './styles';
+
+const Step = ({ isCompleted, isActive, stage, theme = {} }) => {
+  const stageCompleted = isCompleted(stage.id);
+  const stageActive = isActive(stage.id);
+
+  return (
+    <View
+      style={[
+        [ownStyles.stepContainer, theme.stepContainer],
+        stageCompleted && [ownStyles.completedContainer, theme.completeStepContainer],
+        stageActive && [ownStyles.activeContainer, theme.activeStepContainer]
+      ]}
+    >
+      <View style={ownStyles.checkContainer}>
+        <View
+          style={[
+            [ownStyles.stepInnerContainer, theme.stepInnerContainer],
+            stageCompleted && [ownStyles.completedInnerContainer, theme.completeStepInnerContainer],
+            stageActive && [ownStyles.activeInnerContainer, theme.activeStepInnerContainer]
+          ]}
+        />
+        {stageCompleted && (
+          <Icon
+            name="check"
+            type="feather"
+            size={OVAL_SIZE - ICON_OFFSET}
+            color="white"
+            style={ownStyles.checkIcon}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+Step.propTypes = {
+  isActive: func,
+  isCompleted: func,
+  stage: shape({ id: number })
+};
+
+export default Step;

package/lib/components/UTStepper/components/Step/styles.js

@@ -0,0 +1,47 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+
+export const ICON_OFFSET = OVAL_SIZE / 4;
+
+export default StyleSheet.create({
+  checkContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  checkIcon: {
+    left: ICON_OFFSET / 2,
+    position: 'absolute',
+    top: ICON_OFFSET / 2
+  },
+
+  activeContainer: {
+    backgroundColor: 'blue'
+  },
+  completedContainer: {
+    backgroundColor: 'blue'
+  },
+  stepContainer: {
+    backgroundColor: 'white',
+    borderRadius: OVAL_SIZE / 2,
+    height: OVAL_SIZE,
+    margin: OVAL_SIZE / 2,
+    width: OVAL_SIZE
+  },
+
+  activeInnerContainer: {
+    backgroundColor: 'white'
+  },
+  completedInnerContainer: {
+    backgroundColor: 'blue'
+  },
+  stepInnerContainer: {
+    backgroundColor: 'gray',
+    borderRadius: OVAL_SIZE / 2,
+    height: OVAL_SIZE / 2,
+    position: 'absolute',
+    top: OVAL_SIZE / 4,
+    width: OVAL_SIZE / 2
+  }
+});

package/lib/components/UTStepper/index.js

@@ -0,0 +1,34 @@
+import { number } from 'prop-types';
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../../theming';
+
+import ownStyles from './styles';
+import Step from './components/Step';
+import Connectors from './components/Connectors';
+import { StagesPropTypes } from './types';
+
+const UTStepper = ({ currentStage, stages }) => {
+  const isCompleted = stageNumber => stageNumber < currentStage;
+  const isActive = stageNumber => stageNumber === currentStage;
+  const numberOfStages = stages.length;
+
+  const theme = useTheme().UTStepper;
+
+  return (
+    <View style={ownStyles.container}>
+      <Connectors {...{ isCompleted, numberOfStages, theme }} />
+      {stages.map(stage => (
+        <Step key={stage.id} {...{ isActive, isCompleted, stage, theme }} />
+      ))}
+    </View>
+  );
+};
+
+UTStepper.propTypes = {
+  currentStage: number,
+  stages: StagesPropTypes
+};
+
+export default UTStepper;

package/lib/components/UTStepper/styles.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export const OVAL_SIZE = 16;
+
+export default StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexGrow: 1,
+    justifyContent: 'space-between'
+  }
+});

package/lib/components/UTStepper/types.js

@@ -0,0 +1,3 @@
+import { arrayOf, number, shape } from 'prop-types';
+
+export const StagesPropTypes = arrayOf(shape({ id: number }));

package/lib/components/UTSwitch/proptypes.js

@@ -13,6 +13,7 @@ export default {
   trackSize: number,
   thumbSize: number,
   theme: number,
+  // eslint-disable-next-line react/forbid-prop-types
   input: shape({ onChange: func.isRequired, value: any }),
   hitSlop: shape({
     bottom: number,