@widergy/mobile-ui 1.13.1 → 1.13.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.13.3](https://github.com/widergy/mobile-ui/compare/v1.13.2...v1.13.3) (2024-07-17)
+
+
+### Bug Fixes
+
+* some fixes in icon ([#311](https://github.com/widergy/mobile-ui/issues/311)) ([9d57432](https://github.com/widergy/mobile-ui/commit/9d57432197c15b3200a6b1dafe982dc37c54cb5c))
+
+## [1.13.2](https://github.com/widergy/mobile-ui/compare/v1.13.1...v1.13.2) (2024-07-15)
+
+
+### Bug Fixes
+
+* utworkflow spacing and utroundview shadows ([#310](https://github.com/widergy/mobile-ui/issues/310)) ([73fdfc2](https://github.com/widergy/mobile-ui/commit/73fdfc25f02f8caeb7ea04c5fe80d6b073d22a66))
+
 ## [1.13.1](https://github.com/widergy/mobile-ui/compare/v1.13.0...v1.13.1) (2024-07-12)
 
 

package/lib/components/Icon/{assets → components/CustomIcon/assets}/eye-off.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="eye-off">
-<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.91078 1.91058C2.23622 1.58514 2.76386 1.58514 3.0893 1.91058L14.9861 13.8074C15.0321 13.8444 15.0748 13.8867 15.113 13.9343L18.0893 16.9106C18.4147 17.236 18.4147 17.7637 18.0893 18.0891C17.7639 18.4145 17.2362 18.4145 16.9108 18.0891L14.3384 15.5167C13.0039 16.2804 11.5544 16.6665 10 16.6665C6.2667 16.6665 3.25604 14.4606 0.943181 10.4133C0.796755 10.1571 0.796773 9.8425 0.943227 9.58629C1.92481 7.86906 3.03083 6.48078 4.27262 5.45092L1.91078 3.08909C1.58535 2.76366 1.58535 2.23602 1.91078 1.91058ZM5.45722 6.63553C4.45474 7.43811 3.5102 8.55088 2.63331 9.99993C4.71491 13.442 7.17738 14.9998 10 14.9998C11.1045 14.9998 12.1366 14.763 13.1068 14.2851L11.0783 12.2566C10.744 12.4166 10.3751 12.502 9.99748 12.5018C9.33435 12.5016 8.69848 12.2379 8.22974 11.7689C7.761 11.2998 7.4978 10.6637 7.49803 10.0006C7.49816 9.62354 7.58346 9.25529 7.74327 8.92157L5.45722 6.63553ZM9.3635 10.5418C9.37784 10.5587 9.39291 10.575 9.40867 10.5908C9.42457 10.6067 9.44104 10.6219 9.45805 10.6364L9.3635 10.5418ZM9.99709 4.99983C9.33243 4.99748 8.67077 5.08906 8.03173 5.27186C7.58925 5.39845 7.12792 5.14235 7.00134 4.69986C6.87476 4.25738 7.13086 3.79605 7.57335 3.66947C8.36287 3.44362 9.18033 3.3304 10.0015 3.33317C13.7342 3.33375 16.7443 5.53961 19.0569 9.58637C19.2033 9.84261 19.2033 10.1572 19.0568 10.4134C18.3832 11.5918 17.6523 12.6144 16.8595 13.4721C16.5471 13.8101 16.0199 13.8309 15.6819 13.5185C15.3439 13.2061 15.3232 12.6789 15.6356 12.3409C16.2384 11.6886 16.8161 10.9099 17.3668 9.99975C15.2852 6.55771 12.8227 4.99984 10 4.99984L9.99709 4.99983Z" fill="#677489"/>
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.91078 1.91058C2.23622 1.58514 2.76386 1.58514 3.0893 1.91058L14.9861 13.8074C15.0321 13.8444 15.0748 13.8867 15.113 13.9343L18.0893 16.9106C18.4147 17.236 18.4147 17.7637 18.0893 18.0891C17.7639 18.4145 17.2362 18.4145 16.9108 18.0891L14.3384 15.5167C13.0039 16.2804 11.5544 16.6665 10 16.6665C6.2667 16.6665 3.25604 14.4606 0.943181 10.4133C0.796755 10.1571 0.796773 9.8425 0.943227 9.58629C1.92481 7.86906 3.03083 6.48078 4.27262 5.45092L1.91078 3.08909C1.58535 2.76366 1.58535 2.23602 1.91078 1.91058ZM5.45722 6.63553C4.45474 7.43811 3.5102 8.55088 2.63331 9.99993C4.71491 13.442 7.17738 14.9998 10 14.9998C11.1045 14.9998 12.1366 14.763 13.1068 14.2851L11.0783 12.2566C10.744 12.4166 10.3751 12.502 9.99748 12.5018C9.33435 12.5016 8.69848 12.2379 8.22974 11.7689C7.761 11.2998 7.4978 10.6637 7.49803 10.0006C7.49816 9.62354 7.58346 9.25529 7.74327 8.92157L5.45722 6.63553ZM9.3635 10.5418C9.37784 10.5587 9.39291 10.575 9.40867 10.5908C9.42457 10.6067 9.44104 10.6219 9.45805 10.6364L9.3635 10.5418ZM9.99709 4.99983C9.33243 4.99748 8.67077 5.08906 8.03173 5.27186C7.58925 5.39845 7.12792 5.14235 7.00134 4.69986C6.87476 4.25738 7.13086 3.79605 7.57335 3.66947C8.36287 3.44362 9.18033 3.3304 10.0015 3.33317C13.7342 3.33375 16.7443 5.53961 19.0569 9.58637C19.2033 9.84261 19.2033 10.1572 19.0568 10.4134C18.3832 11.5918 17.6523 12.6144 16.8595 13.4721C16.5471 13.8101 16.0199 13.8309 15.6819 13.5185C15.3439 13.2061 15.3232 12.6789 15.6356 12.3409C16.2384 11.6886 16.8161 10.9099 17.3668 9.99975C15.2852 6.55771 12.8227 4.99984 10 4.99984L9.99709 4.99983Z" />
 </g>
 </svg>

package/lib/components/Icon/{assets → components/CustomIcon/assets}/eye.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.15986 12C5.65779 16.1305 8.61278 18 12 18C15.3872 18 18.3422 16.1305 20.8401 12C18.3422 7.86948 15.3872 6 12 6C8.61278 6 5.65779 7.86948 3.15986 12ZM1.13177 11.5038C3.9072 6.64709 7.51999 4 12 4C16.48 4 20.0928 6.64709 22.8682 11.5038C23.0439 11.8113 23.0439 12.1887 22.8682 12.4962C20.0928 17.3529 16.48 20 12 20C7.51999 20 3.9072 17.3529 1.13177 12.4962C0.956077 12.1887 0.956077 11.8113 1.13177 11.5038ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11ZM9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z" fill="#677489"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.15986 12C5.65779 16.1305 8.61278 18 12 18C15.3872 18 18.3422 16.1305 20.8401 12C18.3422 7.86948 15.3872 6 12 6C8.61278 6 5.65779 7.86948 3.15986 12ZM1.13177 11.5038C3.9072 6.64709 7.51999 4 12 4C16.48 4 20.0928 6.64709 22.8682 11.5038C23.0439 11.8113 23.0439 12.1887 22.8682 12.4962C20.0928 17.3529 16.48 20 12 20C7.51999 20 3.9072 17.3529 1.13177 12.4962C0.956077 12.1887 0.956077 11.8113 1.13177 11.5038ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11ZM9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z" />
 </svg>

package/lib/components/Icon/components/CustomIcon/constants.js

@@ -0,0 +1,9 @@
+import VisibilityOff from './assets/eye-off.svg';
+import Visibility from './assets/eye.svg';
+
+export const DEFAULT_ICON_SIZE = 20;
+
+export const CUSTOM_ICONS = {
+  visibility: Visibility,
+  'visibility-off': VisibilityOff
+};

package/lib/components/Icon/components/CustomIcon/index.js

@@ -0,0 +1,25 @@
+import { string, number } from 'prop-types';
+import React from 'react';
+
+import { CUSTOM_ICONS, DEFAULT_ICON_SIZE } from './constants';
+
+const CustomIcon = ({ height, name, size, width, fill = '#677489' }) => {
+  const CustomIconComponent = CUSTOM_ICONS[name];
+  return (
+    <CustomIconComponent
+      height={size || height || DEFAULT_ICON_SIZE}
+      width={size || width || DEFAULT_ICON_SIZE}
+      fill={fill}
+    />
+  );
+};
+
+CustomIcon.propTypes = {
+  height: number,
+  name: string,
+  size: number,
+  width: number,
+  fill: string
+};
+
+export default CustomIcon;

package/lib/components/Icon/constants.js

@@ -11,8 +11,7 @@ import SimpleLineIcon from 'react-native-vector-icons/SimpleLineIcons';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import AntIcon from 'react-native-vector-icons/AntDesign';
 
-import VisibilityOff from './assets/eye-off.svg';
-import Visibility from './assets/eye.svg';
+import CustomIcon from './components/CustomIcon';
 
 const DEFAULT_ICON_COMPONENT = MaterialIcon;
 export const DEFAULT_ICON_TYPE = 'material';
@@ -29,9 +28,8 @@ const ICON_TYPES = {
   'material-community': MaterialCommunityIcon,
   octicon: OcticonIcon,
   'simple-line-icon': SimpleLineIcon,
-  visibility: Visibility,
-  'visibility-off': VisibilityOff,
-  zocial: ZocialIcon
+  zocial: ZocialIcon,
+  custom: CustomIcon
 };
 
 export const getIconComponent = type => ICON_TYPES[type] || DEFAULT_ICON_COMPONENT;

package/lib/components/Icon/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import propTypes from './propTypes';
 import { getIconComponent, DEFAULT_ICON_TYPE, DEFAULT_ICON_SIZE } from './constants';
 
-const Icon = ({ color, height, name, size, style, type, width }) => {
+const Icon = ({ color, height, name, size, style, type, width, fill }) => {
   const IconComponent = getIconComponent(type);
   return (
     <IconComponent
@@ -14,6 +14,7 @@ const Icon = ({ color, height, name, size, style, type, width }) => {
       style={style}
       type={type}
       width={size || width || DEFAULT_ICON_SIZE}
+      fill={fill}
     />
   );
 };

package/lib/components/UTRoundView/index.js

@@ -3,17 +3,22 @@ import { View, Animated } from 'react-native';
 import _ from 'lodash';
 
 import { useTheme } from '../../theming';
+import Surface from '../Surface';
 
 import propTypes from './propTypes';
 import ownStyles from './styles';
 
-const UTRoundView = ({ children, styles }) => {
+const UTRoundView = ({ children, styles, withShadow = false }) => {
   const theme = useTheme();
   const themedStyles = _.merge({}, theme?.roundView, styles);
 
+  const ChildrenContainer = withShadow ? Surface : View;
+
   return (
     <Animated.View style={[ownStyles.container, themedStyles?.outerContainer]}>
-      <View style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>{children}</View>
+      <ChildrenContainer position="top" style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>
+        {children}
+      </ChildrenContainer>
     </Animated.View>
   );
 };

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

@@ -9,7 +9,7 @@ import Icon from '../../../../../Icon';
 import Touchable from '../../../../../Touchable';
 
 import { DEBOUNCE_DELAY, DEBOUNCE_CONFIG, VISIBILITY, VISIBILITY_OFF } from './constants';
-import styles from './styles';
+import styles, { ICON_SIZE } from './styles';
 
 const BaseInput = forwardRef(
   (
@@ -62,7 +62,9 @@ const BaseInput = forwardRef(
 
     const hiddenInputProps = hiddenInput
       ? {
-          type: showInput ? VISIBILITY : VISIBILITY_OFF,
+          name: showInput ? VISIBILITY : VISIBILITY_OFF,
+          size: ICON_SIZE,
+          color: theme.UTTextInput?.passwordEyeColor || theme.colors.primary,
           ...(RightIcon || {})
         }
       : {};
@@ -85,8 +87,9 @@ const BaseInput = forwardRef(
             select && { color: theme.fonts?.fontColor },
             select && disabled && { color: theme.fonts?.fontDisabledColor }
           ]}
+          id={props?.id ? `${props.id}` : undefined}
         />
-        {RightIcon && (
+        {(RightIcon || hiddenInput) && (
           <Touchable
             borderless
             onPress={hiddenInput ? toggleShowInput : onRightIconPress}
@@ -118,6 +121,7 @@ BaseInput.propTypes = {
   onChange: func.isRequired,
   disabled: bool,
   value: string,
+  id: string,
   RightIcon: oneOf([shape({ name: string, type: string, color: string }), elementType]),
   hiddenInput: bool,
   onRightIconPress: func,

package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js

@@ -28,6 +28,7 @@ const TextInputField = forwardRef(
       alwaysShowPlaceholder,
       disabled,
       error,
+      id,
       inputSize,
       LeftIcon,
       maxCount,
@@ -145,6 +146,7 @@ const TextInputField = forwardRef(
             autoCapitalize={autoCapitalize}
             autoCorrect={false}
             editable={!disabled && !readOnly}
+            id={id ? `${id}` : undefined}
             keyboardType={keyboardType}
             maxLength={maxCount}
             multiline={multiline}
@@ -206,6 +208,7 @@ TextInputField.propTypes = {
   alwaysShowPlaceholder: bool,
   disabled: bool,
   error: string,
+  id: string,
   inputSize: string,
   LeftIcon: elementType,
   maxCount: number,

package/lib/components/UTTopbar/index.js

@@ -3,7 +3,7 @@ import { BackHandler, View } from 'react-native';
 import { number } from 'prop-types';
 import { useFocusEffect } from '@react-navigation/native';
 
-import IconButton from '../IconButton';
+import UTButton from '../UTButton';
 import Label from '../Label';
 import UTStepper from '../UTStepper';
 import UTProgressBar from '../UTProgressBar';
@@ -18,7 +18,7 @@ const UTTopbar = ({
   stages,
   stepsCount,
   theme,
-  topbar: { colorTheme = 'light', goBack, title, variant = 'secondary', icon } = {}
+  topbar: { colorTheme = 'light', goBack, title, variant = 'secondary', Icon } = {}
 }) => {
   const size = { big: variant === 'primary' };
 
@@ -42,12 +42,12 @@ const UTTopbar = ({
   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'}
+        <UTButton
+          Icon={Icon || 'IconArrowLeft'}
+          variant="text"
+          style={{
+            root: ownStyles.goBack
+          }}
           onPress={goBack}
         />
         <Label color={ownTheme?.text || 'black'} {...size} bold style={ownStyles.child}>

package/lib/components/UTTopbar/styles.js

@@ -12,5 +12,10 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     padding: 16
+  },
+  goBack: {
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    marginRight: 16
   }
 });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import merge from 'lodash/merge';
+import { number } from 'prop-types';
 
 import Label from '../../../../../Label';
 import Surface from '../../../../../Surface';
@@ -14,7 +15,7 @@ import ActionButtonPropTypes from './components/ActionButton/types';
 import ownStyles from './styles';
 import { NEXT, RETURN } from './constants';
 
-const BottomActions = ({ nextButton, returnButton, summary, message, style }) => {
+const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summary, style }) => {
   const messageIcon = message?.icon;
   const MESSAGE_ICON_SIZE = 16;
   const checkboxProps = summary?.checkbox;
@@ -24,7 +25,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
   const returnButtonEnabled = returnButton && !returnButton.hidden;
 
   return (
-    <Surface position="top" style={themedStyles.bottomNav}>
+    <Surface position="top" style={[themedStyles.bottomNav, themedStyles.bottomSafeArea(bottomSafeArea)]}>
       {summary && (
         <View style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}>
           {checkboxProps ? (
@@ -114,6 +115,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
 };
 
 BottomActions.propTypes = {
+  bottomSafeArea: number,
   message: MessagePropTypes,
   nextButton: ActionButtonPropTypes,
   returnButton: ActionButtonPropTypes,

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

@@ -12,6 +12,9 @@ export default StyleSheet.create({
     padding: 16,
     width: '100%'
   },
+  bottomSafeArea: safeArea => ({
+    paddingBottom: safeArea + 16
+  }),
   bottomNav: {
     backgroundColor: 'white'
   },

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

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { SafeAreaView, ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { number, func, shape, bool, string, element } from 'prop-types';
 import { merge } from 'lodash';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../../../theming';
 import UTHeader from '../../../UTHeader';
@@ -36,12 +37,14 @@ const UTWorkflowContainer = ({
   topbar,
   useMarkdown
 }) => {
+  const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => () => onExit?.(), []);
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer, style);
 
   return (
-    <SafeAreaView style={themedStyles.container}>
+    <View style={[themedStyles.container, themedStyles.topSafeArea(topSafeArea)]}>
       {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
       <ScrollView
         contentContainerStyle={themedStyles.content}
@@ -71,11 +74,12 @@ const UTWorkflowContainer = ({
             nextButton,
             returnButton,
             style: themedStyles,
+            bottomSafeArea,
             summary
           }}
         />
       )}
-    </SafeAreaView>
+    </View>
   );
 };
 UTWorkflowContainer.propTypes = {

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

@@ -10,5 +10,8 @@ export default StyleSheet.create({
   content: {
     paddingBottom: 16,
     paddingHorizontal: 16
-  }
+  },
+  topSafeArea: safeArea => ({
+    paddingTop: safeArea
+  })
 });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.13.1",
+  "version": "1.13.3",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -45,6 +45,7 @@
     "react-native-collapsible": "^1.6.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
+    "react-native-safe-area-context": "^4.5.0",
     "react-native-pager-view": "^6.2.1"
   },
   "devDependencies": {