dhre-ui-kit 0.0.68 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.68",
+  "version": "0.0.71",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -32,6 +32,7 @@
     "react-native-blob-util": "^0.19.11",
     "react-native-calendars": "^1.1306.0",
     "react-native-country-picker-modal": "^2.0.0",
+    "react-native-document-picker": "^9.3.1",
     "react-native-element-dropdown": "^2.12.1",
     "react-native-gesture-handler": "2.17.0",
     "react-native-otp-verify": "^1.1.8",

package/src/assets/images/uploadFileIcon.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_489_41808)">
+<path d="M12 14V3.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.25 14V20H3.75V14" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.25 7.25L12 3.5L15.75 7.25" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_489_41808">
+<rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/index.ts

@@ -8,6 +8,7 @@ import HeaderIcon from './images/dotsThreeVertical.svg';
 import CircleTick from './images/circleTick.svg';
 import ArrowLeft from './images/arrowLeft.svg';
 import BellSimple from './images/bellSimple.svg';
+import UploadFile from './images/uploadFileIcon.svg';
 
 export {
   CalenderDots,
@@ -20,4 +21,5 @@ export {
   CircleTick,
   ArrowLeft,
   BellSimple,
+  UploadFile,
 };

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

@@ -0,0 +1,9 @@
+import {DocumentPickerResponse} from 'react-native-document-picker';
+
+export interface CustomDocumentPickerProps {
+  onDocumentUpload: (document: DocumentPickerResponse) => void;
+  title?: string;
+  hint?: string;
+  maxFileSize?: number;
+  fileTypes?: string[];
+}

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

@@ -0,0 +1,23 @@
+import {StyleSheet} from 'react-native';
+import {
+  verticalScale,
+  horizontalScale,
+  moderateScale,
+} from '../../utils/stylehelper';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: verticalScale(16),
+    paddingHorizontal: horizontalScale(24),
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderRadius: moderateScale(8),
+    gap: moderateScale(24),
+    marginBottom: verticalScale(8),
+  },
+  titleContainer: {gap: verticalScale(4)},
+});
+
+export default styles;

package/src/components/customDocumentPicker/CustomDocumentPicker.tsx

@@ -0,0 +1,78 @@
+import React, {useState} from 'react';
+import {View, Pressable, Alert} from 'react-native';
+import DocumentPicker from 'react-native-document-picker';
+import {UploadFile} from '../../assets';
+import {FontStyle} from '../../utils/appEnum';
+import CustomTypography from '../customTypography';
+import {useTheme} from '../../theme/ThemeContext';
+import styles from './CustomDocumentPicker.styles';
+import {CustomDocumentPickerProps} from './CustomDocumentPicker.interface';
+
+const CustomDocumentPicker = ({
+  onDocumentUpload,
+  title = 'Upload Images/Videos',
+  hint = 'PNG, JPEG (max size. 4MB)',
+  maxFileSize = 4,
+  fileTypes = [DocumentPicker.types.images, DocumentPicker.types.pdf],
+}: CustomDocumentPickerProps) => {
+  const [error, setError] = useState('');
+
+  const pickDocument = async () => {
+    try {
+      const res = await DocumentPicker.pickSingle({
+        type: fileTypes,
+      });
+
+      if (res?.size && res?.size > maxFileSize * 1024 * 1024) {
+        setError(
+          `File size higher than ${maxFileSize}MB. Please upload a smaller file.`,
+        );
+        return;
+      }
+      onDocumentUpload(res);
+    } catch (err) {
+      if (DocumentPicker.isCancel(err)) {
+        Alert.alert('User canceled the picker');
+      } else if (err instanceof Error) {
+        Alert.alert('Unknown Error: ' + err.message);
+      } else {
+        Alert.alert('Unknown Error: ' + JSON.stringify(err));
+      }
+    }
+  };
+
+  const {theme} = useTheme();
+  return (
+    <>
+      <Pressable
+        style={[
+          styles.container,
+          {borderColor: error ? theme.ERROR : theme.BORDER_SECONDRY},
+        ]}
+        onPress={pickDocument}>
+        <UploadFile />
+        <View style={styles.titleContainer}>
+          <CustomTypography
+            variant={FontStyle.L2_REGULAR}
+            text={title}
+            style={{color: theme.CONTENT_PRIMARY}}
+          />
+          <CustomTypography
+            variant={FontStyle.L3_REGULAR}
+            text={hint}
+            style={{color: theme.CONTENT_SECONDRY}}
+          />
+        </View>
+      </Pressable>
+      {error && (
+        <CustomTypography
+          variant={FontStyle.L2_REGULAR}
+          text={error}
+          style={{color: theme.ERROR}}
+        />
+      )}
+    </>
+  );
+};
+
+export default CustomDocumentPicker;

package/src/components/customDocumentPicker/index.ts

@@ -0,0 +1 @@
+export {default} from './CustomDocumentPicker';

package/src/index.ts

@@ -39,6 +39,7 @@ export {default as DropDown} from './components/dropDown';
 export {default as CustomSwitchBtn} from './components/customSwitchBtn';
 export {default as toastService} from './components/toast/ToastService';
 export {default as SingleSelectionTags} from './components/singleSelectionTag';
+export {default as CustomDocumentPicker} from './components/customDocumentPicker';
 export {FONT_STYLES} from './theme/fonts';
 export {FontStyle, Theme} from './utils/appEnum';
 
@@ -52,6 +53,4 @@ export {
 export {copyToClipboard} from './utils/deviceUtils';
 
 export {default} from './theme/themes';
-export {useToast} from './components/toast/ToastProvider';
-export {default as ToastProvider} from './components/toast/ToastProvider';
 export {default as CustomTextTest} from '../__mocks__/custom-text.mock';

package/src/theme/themes.ts

@@ -3,7 +3,7 @@ import {Theme} from '../utils/appEnum';
 const theme = {
   [Theme.SURFACE_PRIMARY]: {
     light: '#FFFFFF',
-    dark: '#404040',
+    dark: '#000000',
   },
   [Theme.SURFACE_SECONDARY]: {
     light: '#F5F5F5',
@@ -87,6 +87,23 @@ const theme = {
     light: '#282828',
     dark: '#FFFFFF',
   },
+
+  [Theme.WARNING]: {
+    light: '#B65E01',
+    dark: '#EB8425',
+  },
+  [Theme.SUCCESS]: {
+    light: '#008256',
+    dark: '#00B578',
+  },
+  [Theme.INFO]: {
+    light: '#0569C2',
+    dark: '#339ECF',
+  },
+  [Theme.ERROR]: {
+    light: '#EB0542',
+    dark: '#EB0542',
+  },
 };
 
 export default theme;

package/src/utils/appEnum.ts

@@ -95,4 +95,8 @@ export enum Theme {
   BORDER_BRAND_TRANSPARENT_STATIC = 'BORDER_BRAND_TRANSPARENT_STATIC',
   BORDER_STATIC = 'BORDER_STATIC',
   BORDER_SEPRATOR = 'BORDER_SEPRATOR',
+  WARNING = 'WARNING',
+  SUCCESS = 'SUCCESS',
+  INFO = 'INFO',
+  ERROR = 'ERROR',
 }

package/src/components/toast/ToastProvider.tsx

@@ -1,61 +0,0 @@
-import React, {
-  createContext,
-  useRef,
-  useImperativeHandle,
-  useContext,
-  forwardRef,
-} from 'react';
-import Toast from './Toast';
-import {ShowToast, ToastRef} from './Toast.interface';
-
-const ToastContext = createContext<{showToast: ShowToast} | undefined>(
-  undefined,
-);
-
-const ToastProvider = forwardRef<ToastRef, React.PropsWithChildren<object>>(
-  (props, ref) => {
-    const toastRef = useRef<ToastRef>(null);
-
-    useImperativeHandle(ref, () => ({
-      showToast: (message, duration, isSuccess, btnText, onBtnPress) => {
-        toastRef.current?.showToast(
-          message,
-          duration,
-          isSuccess,
-          btnText,
-          onBtnPress,
-        );
-      },
-    }));
-
-    return (
-      <ToastContext.Provider
-        value={{
-          showToast: (message, duration, isSuccess, btnText, onBtnPress) => {
-            toastRef.current?.showToast(
-              message,
-              duration,
-              isSuccess,
-              btnText,
-              onBtnPress,
-            );
-          },
-        }}>
-        {props.children}
-        <Toast ref={toastRef} />
-      </ToastContext.Provider>
-    );
-  },
-);
-
-ToastProvider.displayName = 'ToastProvider';
-
-export const useToast = () => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error('useToast must be used within a ToastProvider');
-  }
-  return context;
-};
-
-export default ToastProvider;

package/src/components/toast/typings.ts

@@ -1,17 +0,0 @@
-import type React from 'react';
-
-export type ShowToast = (text: string, duration?: number) => void;
-
-export type Provider = React.FunctionComponent & {
-  ref: ToastRef | null;
-};
-
-export type RegisterRef = (ref: ToastRef) => void;
-
-export interface ToastRef {
-  showToast: ShowToast;
-}
-
-export interface ToastProps {
-  ref: (ref: ToastRef) => void;
-}