dhre-ui-kit 0.0.86 → 0.0.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.86",
+  "version": "0.0.88",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -34,6 +34,7 @@
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-document-picker": "^9.3.1",
     "react-native-element-dropdown": "^2.12.1",
+    "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.17.0",
     "react-native-otp-verify": "^1.1.8",
     "react-native-paper": "^5.12.5",

package/src/assets/images/fileIcon.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 12V3.75C4.5 3.55109 4.57902 3.36032 4.71967 3.21967C4.86032 3.07902 5.05109 3 5.25 3H14.25L19.5 8.25V12" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.25 3V8.25H19.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 18.75H6C6.39782 18.75 6.77936 18.592 7.06066 18.3107C7.34196 18.0294 7.5 17.6478 7.5 17.25C7.5 16.8522 7.34196 16.4706 7.06066 16.1893C6.77936 15.908 6.39782 15.75 6 15.75H4.5V20.25" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.25 15.75H17.625V20.25" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.875 18.375H17.625" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 20.25C12.5967 20.25 13.169 20.0129 13.591 19.591C14.0129 19.169 14.25 18.5967 14.25 18C14.25 17.4033 14.0129 16.831 13.591 16.409C13.169 15.9871 12.5967 15.75 12 15.75H10.6875V20.25H12Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/trash.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.25 5.25H3.75" stroke="#EB0542" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 9.75V15.75" stroke="#EB0542" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.25 9.75V15.75" stroke="#EB0542" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.75 5.25V19.5C18.75 19.6989 18.671 19.8897 18.5303 20.0303C18.3897 20.171 18.1989 20.25 18 20.25H6C5.80109 20.25 5.61032 20.171 5.46967 20.0303C5.32902 19.8897 5.25 19.6989 5.25 19.5V5.25" stroke="#EB0542" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 5.25V3.75C15.75 3.35218 15.592 2.97064 15.3107 2.68934C15.0294 2.40804 14.6478 2.25 14.25 2.25H9.75C9.35218 2.25 8.97064 2.40804 8.68934 2.68934C8.40804 2.97064 8.25 3.35218 8.25 3.75V5.25" stroke="#EB0542" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/index.ts

@@ -11,6 +11,8 @@ import BellSimple from './images/bellSimple.svg';
 import UploadFile from './images/uploadFileIcon.svg';
 import CaretRight from './images/caretRight.svg';
 import CheckWhite from './images/checkWhite.svg';
+import FileIcon from './images/fileIcon.svg';
+import Trash from './images/trash.svg';
 
 export {
   CalenderDots,
@@ -26,4 +28,6 @@ export {
   UploadFile,
   CaretRight,
   CheckWhite,
+  FileIcon,
+  Trash,
 };

package/src/components/customDocumentPicker/CustomDocumentPicker.interface.ts

@@ -2,7 +2,7 @@ import {TextStyle, ViewStyle} from 'react-native';
 import {DocumentPickerResponse} from 'react-native-document-picker';
 
 export interface CustomDocumentPickerProps {
-  onDocumentUpload: (document: DocumentPickerResponse) => void;
+  onDocumentUpload: (base64: string, document?: DocumentPickerResponse) => void;
   title?: string;
   hint?: string;
   maxFileSize?: number;

package/src/components/customDocumentPicker/CustomDocumentPicker.styles.ts

@@ -9,14 +9,24 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
     paddingVertical: verticalScale(16),
     paddingHorizontal: horizontalScale(24),
     borderWidth: 1,
     borderStyle: 'dashed',
     borderRadius: moderateScale(8),
-    gap: moderateScale(24),
     marginBottom: verticalScale(8),
   },
+  fileUploadContainerStyle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: verticalScale(16),
+    paddingHorizontal: horizontalScale(24),
+    borderRadius: moderateScale(8),
+    marginBottom: verticalScale(8),
+  },
+  innerContainer: {flexDirection: 'row', columnGap: horizontalScale(24)},
   titleContainer: {gap: verticalScale(4)},
 });
 

package/src/components/customDocumentPicker/CustomDocumentPicker.tsx

@@ -1,7 +1,10 @@
-import React, {useState} from 'react';
+import React, {useState, useCallback, memo} from 'react';
 import {View, Pressable, Alert} from 'react-native';
-import DocumentPicker from 'react-native-document-picker';
-import {UploadFile} from '../../assets';
+import DocumentPicker, {
+  DocumentPickerResponse,
+} from 'react-native-document-picker';
+import RNFS from 'react-native-fs';
+import {FileIcon, Trash, UploadFile} from '../../assets';
 import {FontStyle} from '../../utils/appEnum';
 import CustomTypography from '../customTypography';
 import {useTheme} from '../../theme/ThemeContext';
@@ -20,20 +23,26 @@ const CustomDocumentPicker = ({
   hintStyle,
 }: CustomDocumentPickerProps) => {
   const [error, setError] = useState('');
+  const [docDetails, setDocDetails] = useState<DocumentPickerResponse>();
+  const {theme} = useTheme();
 
-  const pickDocument = async () => {
+  const pickDocument = useCallback(async () => {
     try {
       const res = await DocumentPicker.pickSingle({
         type: fileTypes,
       });
 
-      if (res?.size && res?.size > maxFileSize * 1024 * 1024) {
+      if (res?.size && res.size > maxFileSize * 1024 * 1024) {
         setError(
           `File size higher than ${maxFileSize}MB. Please upload a smaller file.`,
         );
         return;
       }
-      onDocumentUpload(res);
+
+      setError(''); // Clear error on successful upload
+      setDocDetails(res);
+      const base64Data = await RNFS.readFile(res.uri, 'base64');
+      onDocumentUpload(base64Data, res); // Pass base64 data to onDocumentUpload
     } catch (err) {
       if (DocumentPicker.isCancel(err)) {
         Alert.alert('User canceled the picker');
@@ -43,32 +52,40 @@ const CustomDocumentPicker = ({
         Alert.alert('Unknown Error: ' + JSON.stringify(err));
       }
     }
-  };
+  }, [fileTypes, maxFileSize, onDocumentUpload]);
+
+  const removeDocument = useCallback(() => {
+    setDocDetails(undefined);
+  }, []);
 
-  const {theme} = useTheme();
   return (
     <>
-      <Pressable
+      <View
         style={[
-          styles.container,
+          docDetails ? styles.fileUploadContainerStyle : styles.container,
           {borderColor: error ? theme.ERROR : theme.BORDER_SECONDRY},
+          docDetails ? {backgroundColor: theme.SURFACE_SECONDARY} : {},
           containerStyle,
-        ]}
-        onPress={pickDocument}>
-        <UploadFile />
-        <View style={styles.titleContainer}>
-          <CustomTypography
-            variant={FontStyle.L2_REGULAR}
-            text={title}
-            style={[{color: theme.CONTENT_PRIMARY}, titleStyle]}
-          />
-          <CustomTypography
-            variant={FontStyle.L3_REGULAR}
-            text={hint}
-            style={[{color: theme.CONTENT_SECONDRY}, hintStyle]}
-          />
-        </View>
-      </Pressable>
+        ]}>
+        <Pressable style={styles.innerContainer} onPress={pickDocument}>
+          {docDetails ? <FileIcon /> : <UploadFile />}
+          <View style={styles.titleContainer}>
+            <CustomTypography
+              variant={FontStyle.L2_REGULAR}
+              text={docDetails?.name ?? title}
+              style={[{color: theme.CONTENT_PRIMARY}, titleStyle]}
+            />
+            {!docDetails && (
+              <CustomTypography
+                variant={FontStyle.L3_REGULAR}
+                text={hint}
+                style={[{color: theme.CONTENT_SECONDRY}, hintStyle]}
+              />
+            )}
+          </View>
+        </Pressable>
+        {docDetails && <Trash onPress={removeDocument} />}
+      </View>
       {error && (
         <CustomTypography
           variant={FontStyle.L2_REGULAR}
@@ -80,4 +97,4 @@ const CustomDocumentPicker = ({
   );
 };
 
-export default withThemeProvider(CustomDocumentPicker);
+export default withThemeProvider(memo(CustomDocumentPicker));

package/src/components/customSlideButton/index.tsx

@@ -4,6 +4,8 @@ import {CaretRight} from '../../assets/index';
 import {CustomTypography, FontStyle} from '../../index';
 import styles from './styles';
 import {CustomSlideButtonProps} from './custom-slide-button.interface';
+import {useTheme} from '../../theme/ThemeContext';
+import {withThemeProvider} from '../../theme/withThemeProvider';
 
 const {width} = Dimensions.get('window');
 const BUTTON_WIDTH = 40; // Width of the button
@@ -41,15 +43,31 @@ const CustomSlideButton = ({label, onComplete}: CustomSlideButtonProps) => {
     }),
   ).current;
 
+  const {theme} = useTheme();
   return (
-    <View style={styles.sliderContainer}>
+    <View
+      style={{
+        ...styles.sliderContainer,
+        backgroundColor: theme.SURFACE_PRIMARY,
+      }}>
       <View style={styles.buttonTextCOntainer}>
-        <CustomTypography text={label} variant={FontStyle.L1_REGULAR} />
+        <CustomTypography
+          text={label}
+          variant={FontStyle.L1_REGULAR}
+          style={{
+            color: theme.CONTENT_PRIMARY,
+          }}
+        />
       </View>
       <Animated.View
         style={[styles.slider, {transform: [{translateX: pan}]}]}
         {...panResponder.panHandlers}>
-        <View style={{...styles.button, width: BUTTON_WIDTH}}>
+        <View
+          style={{
+            ...styles.button,
+            backgroundColor: theme.SURFACE_INVERTED,
+            width: BUTTON_WIDTH,
+          }}>
           <CaretRight />
         </View>
       </Animated.View>
@@ -57,4 +75,4 @@ const CustomSlideButton = ({label, onComplete}: CustomSlideButtonProps) => {
   );
 };
 
-export default CustomSlideButton;
+export default withThemeProvider(CustomSlideButton);

package/src/components/customSlideButton/styles.ts

@@ -1,17 +1,15 @@
 import {StyleSheet} from 'react-native';
+import {moderateScale, verticalScale} from '../../utils/stylehelper';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#f8f8f8',
   },
   sliderContainer: {
-    width: '100%',
-    height: 48,
-    backgroundColor: '#e0e0e0',
-    borderRadius: 25,
+    height: verticalScale(48),
+    borderRadius: moderateScale(25),
     overflow: 'hidden',
     justifyContent: 'center',
   },
@@ -21,12 +19,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
   button: {
-    height: 40,
-    backgroundColor: '#000',
+    height: verticalScale(40),
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: 20,
-    margin: 4,
+    borderRadius: moderateScale(20),
+    margin: moderateScale(4),
   },
   buttonTextCOntainer: {
     position: 'absolute',