dhre-ui-kit 0.0.84 → 0.0.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.84",
+  "version": "0.0.87",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/App.tsx

@@ -1,40 +1,13 @@
 import React from 'react';
 import {ThemeProvider} from './theme/ThemeContext';
-import {Badge, Line} from './index';
-import {ArrowLeft, CalenderDots} from './assets';
-import {View} from 'react-native';
-import CustomButton from './components/button/Button';
+import {CustomDocumentPicker} from './index';
+import { View } from 'react-native';
 
 const App = () => {
   return (
     <ThemeProvider>
-      <View style={{marginTop: 50}}>
-        <Badge
-          handleIconPress={function (): void {}}
-          text="gggsdfghjhgf"
-          style={{margin: 20}}
-          iconName={<CalenderDots width={20} height={20} />}
-          textStyle={{color: 'black'}}
-          iconStyle={{}}
-        />
-        <Line />
-        <CustomButton
-          title="Yes"
-          onPress={() => console.log('Yes Button Pressed')}
-          leftIcon={<ArrowLeft />}
-          // titleColor={color.CONTENT_SECONDRY[currentTheme]}
-          titleVariant="L2_REGULAR"
-          containerStyle={[
-            {
-              borderWidth: 1,
-              borderRadius: 20,
-
-              height: 40,
-            },
-          ]}
-          // iconStyle={styles.iconStyle}
-          imagePosition="left"
-        />
+      <View style={{flex:1,justifyContent:'center'}}>
+      <CustomDocumentPicker onDocumentUpload={() => {}} />
       </View>
     </ThemeProvider>
   );

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.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,9 @@
-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 {FileIcon, Trash, UploadFile} from '../../assets';
 import {FontStyle} from '../../utils/appEnum';
 import CustomTypography from '../customTypography';
 import {useTheme} from '../../theme/ThemeContext';
@@ -20,19 +22,24 @@ 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;
       }
+
+      setError(''); // Clear error on successful upload
+      setDocDetails(res);
       onDocumentUpload(res);
     } catch (err) {
       if (DocumentPicker.isCancel(err)) {
@@ -43,32 +50,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 +95,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',

package/src/components/stepper/index.tsx

@@ -3,9 +3,10 @@ import React from 'react';
 import {CheckWhite} from '../../assets';
 import {styles} from './styles';
 import {IData, IProps, Status} from './stepper.interface';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
 import {FontStyle} from '../../utils/appEnum';
 import CustomTypography from '../customTypography';
+import {useTheme} from '../../theme/ThemeContext';
+import {withThemeProvider} from '../../theme/withThemeProvider';
 
 const Stepper = ({
   containerStyle,
@@ -13,38 +14,46 @@ const Stepper = ({
   showStatus = false,
   data,
 }: IProps) => {
+  const {theme} = useTheme();
+
   const renderCircleStyle = (status?: string) => {
     if (status === Status.Active) {
-      return styles.activeStepCircle;
+      return {...styles.activeStepCircle, borderColor: theme.CONTENT_PRIMARY};
     } else if (status === Status.Inactive) {
-      return styles.inactiveStepCircle;
+      return {
+        ...styles.inactiveStepCircle,
+        borderColor: theme.CONTENT_SECONDRY,
+      };
     } else if (status === Status.Completed) {
-      return styles.completeStepCircle;
+      return {...styles.completeStepCircle, backgroundColor: theme.SUCCESS};
     } else {
-      return styles.stepCountCircle;
+      return {...styles.stepCountCircle, borderColor: theme.BORDER_PRIMARY};
     }
   };
   const renderLableStyle = (status?: string) => {
     if (status === Status.Active) {
-      return styles.activeStepLabel;
+      return {...styles.activeStepLabel, color: theme.CONTENT_PRIMARY};
     } else if (status === Status.Inactive) {
-      return styles.inactiveStepLabel;
+      return {...styles.inactiveStepLabel, color: theme.CONTENT_SECONDRY};
     } else if (status === Status.Completed) {
-      return styles.completeStepLabel;
+      return {...styles.completeStepLabel, color: theme.CONTENT_PRIMARY};
     } else {
-      return styles.countStepLabel;
+      return {...styles.countStepLabel, color: theme.CONTENT_PRIMARY};
     }
   };
 
   const renderDividerStyle = (status?: string) => {
     if (status === Status.Active) {
-      return styles.activeStepDivider;
+      return {borderColor: theme.BORDER_PRIMARY};
     } else if (status === Status.Inactive) {
-      return styles.inactiveStepDivider;
+      return {borderColor: theme.BORDER_PRIMARY};
     } else if (status === Status.Completed) {
-      return styles.completeStepDivider;
+      return {
+        ...styles.completeStepDivider,
+        borderColor: theme.CONTENT_PRIMARY,
+      };
     } else {
-      return styles.countStepDivider;
+      return {borderColor: theme.CONTENT_SECONDRY};
     }
   };
 
@@ -67,7 +76,7 @@ const Stepper = ({
                     text={item?.step}
                     variant={FontStyle.L2_REGULAR}
                     style={{
-                      color: DHRE_COLORS_TEXT.DH_WHITE,
+                      color: theme.CONTENT_PRIMARY,
                     }}
                   />
                 )}
@@ -93,4 +102,4 @@ const Stepper = ({
   );
 };
 
-export default Stepper;
+export default withThemeProvider(Stepper);

package/src/components/stepper/styles.ts

@@ -1,5 +1,4 @@
 import {StyleSheet} from 'react-native';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
 
 const styles = StyleSheet.create({
   stepperContainer: {
@@ -23,46 +22,33 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     alignItems: 'center',
     borderWidth: 2,
-    borderColor: '#000000',
     justifyContent: 'center',
   },
   activeStepLabel: {
-    color: DHRE_COLORS_TEXT.DH_BLACK,
     marginTop: 11,
   },
-  activeStepDivider: {
-    borderColor: '#686868',
-  },
   inactiveStepCircle: {
     height: 24,
     width: 24,
     borderRadius: 12,
     alignItems: 'center',
     borderWidth: 2,
-    borderColor: '#A7A7A7',
     justifyContent: 'center',
   },
   inactiveStepLabel: {
-    color: '#686868',
     marginTop: 11,
   },
-  inactiveStepDivider: {
-    borderColor: '#686868',
-  },
   completeStepCircle: {
     height: 24,
     width: 24,
-    backgroundColor: '#00B578',
     borderRadius: 12,
     alignItems: 'center',
     justifyContent: 'center',
   },
   completeStepLabel: {
-    color: DHRE_COLORS_TEXT.DH_BLACK,
     marginTop: 11,
   },
   completeStepDivider: {
-    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
     borderStyle: 'solid',
   },
   stepCountCircle: {
@@ -71,16 +57,12 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     alignItems: 'center',
     borderWidth: 1,
-    borderColor: '#A7A7A7',
     justifyContent: 'center',
   },
   countStepLabel: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
+   
     marginTop: 11,
   },
-  countStepDivider: {
-    borderColor: '#686868',
-  },
   separator: {
     borderWidth: 1,
     borderStyle: 'dashed',

package/src/theme/ThemeContext.tsx

@@ -14,8 +14,8 @@ interface ThemeProviderProps {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const mode = useSelector((state: any) => state.theme.currentTheme);
-  // const mode = 'light'
+  // const mode = useSelector((state: any) => state.theme.currentTheme);
+  const mode = 'light'
   // Filter the theme based on the mode (light or dark)
   const filteredTheme = Object.keys(theme).reduce((acc, key) => {
     acc[key] = theme[key][mode];