dhre-ui-kit 0.0.70 → 0.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "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/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {ThemeProvider} from './theme/ThemeContext';
-import {Badge, Line} from './index';
+import {Badge, DateRangePicker, Line} from './index';
 import {ArrowLeft, CalenderDots} from './assets';
 import {View} from 'react-native';
 import CustomButton from './components/button/Button';
@@ -8,34 +8,7 @@ import CustomButton from './components/button/Button';
 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>
+      <DateRangePicker onButtonPress={() => {}} />
     </ThemeProvider>
   );
 };

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/accordion/Accordion.interface.ts

@@ -11,4 +11,5 @@ export interface AccordionProps {
   isOpen: boolean;
   onToggle: () => void;
   optionalElement?: () => React.ReactNode; // Update this line
+  headerComponent?: () => React.ReactNode;
 }

package/src/components/accordion/Accordion.styles.ts

@@ -7,7 +7,7 @@ import {
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: verticalScale(16),
+    paddingVertical: verticalScale(24),
     borderBottomWidth: moderateScale(1),
     borderBottomColor: '#282828',
   },
@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: horizontalScale(16),
+    paddingHorizontal: horizontalScale(24),
   },
   title: {flex: 1, color: '#FFFFFF'},
   iconStyle: {marginLeft: horizontalScale(20)},

package/src/components/accordion/Accordion.tsx

@@ -15,7 +15,8 @@ const Accordion = ({
   children,
   isOpen,
   onToggle,
-  optionalElement, // Destructure the new prop
+  optionalElement, // Destructure the new prop,
+  headerComponent,
 }: AccordionProps) => {
   const contentRef = useRef<View>(null);
   const [animation] = useState(new Animated.Value(0));
@@ -45,11 +46,15 @@ const Accordion = ({
   return (
     <View style={[styles.container, containerStyle]} testID={testId}>
       <Pressable style={[styles.header, headerStyle]} onPress={onToggle}>
-        <CustomTypography
-          variant={'B4_REGULAR'}
-          text={title}
-          style={[styles.title, titleStyle]}
-        />
+        {headerComponent ? (
+          headerComponent()
+        ) : (
+          <CustomTypography
+            variant={'B4_REGULAR'}
+            text={title}
+            style={[styles.title, titleStyle]}
+          />
+        )}
         {React.cloneElement(isOpen ? <CaretUp /> : <CaretDown />, {
           width: moderateScale(20),
           height: moderateScale(20),
@@ -59,15 +64,17 @@ const Accordion = ({
 
       {optionalElement ? optionalElement() : null}
 
-      <Animated.View style={[styles.content, {height: cardHeight}]}>
-        <View
-          ref={contentRef}
-          onLayout={(event: LayoutChangeEvent) => {
-            setContentHeight(event.nativeEvent.layout.height);
-          }}>
-          {children}
-        </View>
-      </Animated.View>
+      {isOpen && (
+        <Animated.View style={[styles.content, {height: cardHeight}]}>
+          <View
+            ref={contentRef}
+            onLayout={(event: LayoutChangeEvent) => {
+              setContentHeight(event.nativeEvent.layout.height);
+            }}>
+            {children}
+          </View>
+        </Animated.View>
+      )}
     </View>
   );
 };

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/components/dateRangePicker/DateRangePicker.tsx

@@ -68,9 +68,12 @@ const DateRangePicker = (props: DateRangePickerProps) => {
   return (
     <View>
       <Calendar
-        markedDates={getMarkedDates()}
-        mode="date"
-        markingType={'period'}
+      // markedDates={{
+      //   [selectedDate]: { selected: true, marked: true, selectedColor: 'blue' },
+      // }}
+        // markedDates={getMarkedDates()}
+        // mode="date"
+        // markingType={'period'}
         theme={{
           calendarBackground: 'transparent',
           arrowColor: '#fff',

package/src/components/scrollList/category.tsx

@@ -1,9 +1,10 @@
 import React, {useState} from 'react';
 import {ScrollView, Pressable, View, StyleSheet} from 'react-native';
 import CustomText from '../customText/CustomText';
+import {useTheme} from '../../theme/ThemeContext';
 
 interface ScrollableListProps {
-  data: {name: string; value: string}[] | undefined;
+  data: {name: string; value: string; isError?: boolean}[] | undefined;
   handleSelectCategory: (value: string) => void;
   containerStyle?: object;
   scrollViewContentStyle?: object;
@@ -26,7 +27,7 @@ const ScrollableList = ({
   const [selectedItem, setSelectedItem] = useState<string | null>(
     data && data.length > 0 ? data[0].name : null,
   );
-
+  const {theme} = useTheme();
   return (
     <View style={[styles.container, containerStyle]}>
       <ScrollView
@@ -60,6 +61,16 @@ const ScrollableList = ({
                   : defaultItemTextColor
               }
             />
+            {item?.isError && (
+              <View
+                style={[
+                  styles.errorViewStyle,
+                  {
+                    backgroundColor: theme.SURFACE_BRAND_STATIC,
+                  },
+                ]}
+              />
+            )}
           </Pressable>
         ))}
       </ScrollView>
@@ -76,6 +87,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
     padding: 12,
     borderBottomWidth: 2,
     borderBottomColor: 'transparent',
@@ -83,6 +97,11 @@ const styles = StyleSheet.create({
   selectedItem: {
     borderBottomColor: 'white',
   },
+  errorViewStyle: {
+    width: 6,
+    height: 6,
+    borderRadius: 100,
+  },
 });
 
 export default ScrollableList;

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';
 

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];