@widergy/mobile-ui 0.40.0 → 1.0.0

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/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,

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';
@@ -78,7 +70,7 @@ const BaseInput = forwardRef(
       : {};
 
     return (
-      <Fragment>
+      <>
         <TextInput
           autoCorrect={false}
           ref={textInputRef}
@@ -90,7 +82,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
@@ -111,11 +107,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/theming/DefaultTheme.js

@@ -151,6 +151,7 @@ export const themeType = shape({
       xbig: number
     }),
     fontColor: string,
+    // eslint-disable-next-line react/forbid-prop-types
     customVariants: object,
     fontFamily: string
   }),

package/lib/utils/fileUtils.js/index.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-unresolved
-import ImageResizer from 'react-native-image-resizer';
+import ImageResizer from '@bam.tech/react-native-image-resizer';
 
 import { IS_IOS } from '../platformUtils/constants';
 
@@ -14,6 +14,23 @@ export const isImageByUri = uri => {
 
 export const blobToFile = (blob, type) => new File([blob], blob.data.name, { type });
 
+// We use the XMLHttpRequest API since the fetch API does not behave correctly under new sdks on Android
+export const uriToBlob = uri => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.onload = () => {
+      resolve(xhr.response);
+    };
+    xhr.onerror = () => {
+      reject(new Error('uriToBlob failed'));
+    };
+    xhr.responseType = 'blob';
+    xhr.open('GET', uri, true);
+
+    xhr.send(null);
+  });
+};
+
 export const retrieveFile = async (uri, type) => {
   const uriToUse = IS_IOS ? uri.replace('file://', '') : uri;
   let blob;
@@ -26,11 +43,9 @@ export const retrieveFile = async (uri, type) => {
       'JPEG',
       IMG_QUALITY
     );
-    const imageResponse = await fetch(resizedImage.uri);
-    blob = await imageResponse.blob();
+    blob = await uriToBlob(resizedImage.uri);
   } else {
-    const res = await fetch(uriToUse);
-    blob = await res.blob();
+    blob = await uriToBlob(uriToUse);
   }
 
   return blob;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "0.40.0",
+  "version": "1.0.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -18,90 +18,66 @@
     "prepublish": "npm run build",
     "android": "cd example && yarn android",
     "ios": "cd example && yarn ios",
-    "start": "cd example && yarn start"
+    "start": "cd example && yarn start",
+    "prepare": "husky install"
   },
   "peerDependencies": {
-    "@react-native-community/viewpager": "^4.1.6",
     "prop-types": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-document-picker": "^3.4.0",
-    "react-native-image-picker": "4.x.x",
-    "react-native-image-resizer": "^1.2.2",
-    "react-native-svg": "*",
-    "react-native-vector-icons": "*"
+    "react-native-document-picker": "^9.0.1",
+    "react-native-image-picker": "^5.0.0",
+    "react-native-pager-view": "^6.2.0",
+    "@bam.tech/react-native-image-resizer": "^3.0.7",
+    "react-native-svg": "^13.0.0",
+    "react-native-vector-icons": "^10.0.0"
   },
   "dependencies": {
-    "@widergy/web-utils": "^1.22.0",
-    "deprecated-react-native-prop-types": "^2.3.0",
-    "lodash": "^4.17.15",
+    "@widergy/web-utils": "^2.0.0",
+    "core-js": "3",
+    "deprecated-react-native-prop-types": "^4.2.1",
+    "lodash": "^4.17.21",
     "numeral": "^2.0.6",
-    "pdf-lib": "^1.14.1",
-    "react-native-markdown-display": ">=6.1.6",
-    "react-native-modal": "^11.5.6"
+    "pdf-lib": "^1.17.1",
+    "react-native-markdown-display": "^7.0.0-alpha.2",
+    "react-native-modal": "^13.0.1",
+    "react-native-pager-view": "^6.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-proposal-class-properties": "^7.4.0",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.6.2",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.10",
+    "@babel/eslint-parser": "^7.22.10",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/runtime": "^7.22.10",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "@widergy/semantic-release-package-config": "^1.0.0",
-    "babel-eslint": "^10.0.2",
-    "babel-jest": "^24.9.0",
-    "babel-preset-minify": "^0.5.0",
-    "eslint": "^6.5.1",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-plugin-flowtype": "^3.2.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "^7.11.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-react-native": "^3.7.0",
-    "husky": "4.0.0-beta.5",
-    "jest": "^24.8.0",
-    "prettier": "^1.15.2",
-    "prettier-eslint": "^8.8.2",
-    "prop-types": "^15.7.2",
-    "react": "16.11.0",
-    "react-native": "0.62.2",
-    "react-native-vector-icons": "^6.4.2",
-    "react-native-version": "^3.1.0",
+    "babel-jest": "^29.6.2",
+    "babel-preset-minify": "^0.5.2",
+    "eslint": "^8.47.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native": "^4.0.0",
+    "husky": "^8.0.0",
+    "jest": "^29.6.2",
+    "prettier": "^3.0.1",
+    "prettier-eslint": "^15.0.1",
+    "prop-types": "^15.8.1",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "react-native-vector-icons": "^10.0.0",
+    "react-native-version": "^4.0.0",
     "semantic-release": "^15.13.31"
   },
-  "jest": {
-    "preset": "react-native",
-    "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
-    }
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint-diff && node branch-name-hook",
-      "commit-msg": "commitlint -E  HUSKY_GIT_PARAMS"
-    }
-  },
   "release": {
     "extends": "@widergy/semantic-release-package-config"
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ],
-    "rules": {
-      "subject-case": [
-        2,
-        "never",
-        [
-          "start-case",
-          "pascal-case"
-        ]
-      ]
-    }
   }
 }