@widergy/mobile-ui 0.40.1 → 1.1.0

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;

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

@@ -0,0 +1,75 @@
+import { StyleSheet } from 'react-native';
+
+export const ICON_SIZE = 24;
+
+export default StyleSheet.create({
+  actionsChild: {
+    marginRight: 16
+  },
+  actionsContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    justifyContent: 'space-between',
+    padding: 16,
+    width: '100%'
+  },
+  bottomNav: {
+    backgroundColor: 'white',
+    elevation: 10
+  },
+  message: {
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 4
+  },
+  messageChild: {
+    marginRight: 8
+  },
+  messageError: {
+    backgroundColor: 'red'
+  },
+  messageSuccess: {
+    backgroundColor: 'green'
+  },
+  messageWarning: {
+    backgroundColor: 'darkorange'
+  },
+  summary: {
+    alignItems: 'center',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    display: 'flex',
+    elevation: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16
+  },
+  summaryActionButton: {
+    marginHorizontal: 8
+  },
+  summaryActionContainer: {
+    minWidth: 0
+  },
+  summaryActions: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  summaryActionsChild: {
+    marginRight: 16
+  },
+  summaryCheckbox: {
+    flexDirection: 'column'
+  },
+  summaryTitles: {
+    display: 'flex'
+  },
+  summaryTitlesChild: {
+    marginBottom: 8
+  }
+});

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

@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react';
+import { View, ScrollView } from 'react-native';
+import { number, func, shape, bool, string, element } from 'prop-types';
+
+import { useTheme } from '../../../../theming';
+import UTHeader from '../../../UTHeader';
+import UTTopbar from '../../../UTTopbar';
+import { StagesPropTypes } from '../../../UTStepper/types';
+import { TopbarPropTypes } from '../../../UTTopbar/types';
+
+import ownStyles from './styles';
+import BottomActions from './components/BottomActions';
+import ActionButtonPropTypes from './components/BottomActions/components/ActionButton/types';
+import { MessagePropTypes, SummaryPropTypes } from './types';
+
+const UTWorkflowContainer = ({
+  banner,
+  children,
+  currentStage,
+  currentStep,
+  helpText,
+  message,
+  nextButton,
+  onExit,
+  requiredFieldInfo,
+  returnButton,
+  stages,
+  stepsCount,
+  subtitle,
+  summary,
+  tagline,
+  title,
+  topbar,
+  useMarkdown
+}) => {
+  useEffect(() => () => onExit?.(), []);
+  const theme = useTheme();
+
+  return (
+    <View style={ownStyles.container}>
+      {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
+      <ScrollView contentContainerStyle={ownStyles.content}>
+        {title && (
+          <UTHeader
+            {...{
+              banner,
+              helpText,
+              requiredFieldInfo,
+              subtitle,
+              tagline,
+              title,
+              useMarkdown
+            }}
+          />
+        )}
+        {children}
+      </ScrollView>
+      {((nextButton && !nextButton?.hidden) || (returnButton && !returnButton?.hidden)) && (
+        <BottomActions
+          {...{
+            message,
+            nextButton,
+            returnButton,
+            summary,
+            theme
+          }}
+        />
+      )}
+    </View>
+  );
+};
+UTWorkflowContainer.propTypes = {
+  banner: shape({
+    Icon: element,
+    text: string
+  }),
+  currentStage: number,
+  currentStep: number.isRequired,
+  helpText: string,
+  message: MessagePropTypes,
+  nextButton: ActionButtonPropTypes,
+  onExit: func,
+  requiredFieldInfo: string,
+  returnButton: ActionButtonPropTypes,
+  stages: StagesPropTypes,
+  stepsCount: number.isRequired,
+  subtitle: string,
+  summary: SummaryPropTypes,
+  tagline: string,
+  title: string,
+  topbar: TopbarPropTypes,
+  useMarkdown: bool
+};
+export default UTWorkflowContainer;

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

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    flex: 1,
+    flexDirection: 'column',
+    width: '100%'
+  },
+  content: {
+    paddingBottom: 16,
+    paddingHorizontal: 16
+  }
+});

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

@@ -0,0 +1,24 @@
+import { arrayOf, func, shape, string } from 'prop-types';
+
+export const SummaryPropTypes = shape({
+  actions: arrayOf(
+    shape({
+      icon: shape({
+        name: string,
+        type: string
+      }),
+      onPress: func,
+      title: string
+    })
+  ),
+  mainInfo: string,
+  title: string
+});
+
+export const MessagePropTypes = shape({
+  icon: shape({
+    name: string,
+    type: string
+  }),
+  title: string
+});

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.1",
+  "version": "1.1.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"
-        ]
-      ]
-    }
   }
 }