dhre-ui-kit 0.0.71 → 0.0.73

package/package.json

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

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/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.tsx

@@ -7,6 +7,7 @@ import CustomTypography from '../customTypography';
 import {useTheme} from '../../theme/ThemeContext';
 import styles from './CustomDocumentPicker.styles';
 import {CustomDocumentPickerProps} from './CustomDocumentPicker.interface';
+import {withThemeProvider} from '../../theme/withThemeProvider';
 
 const CustomDocumentPicker = ({
   onDocumentUpload,
@@ -75,4 +76,4 @@ const CustomDocumentPicker = ({
   );
 };
 
-export default CustomDocumentPicker;
+export default withThemeProvider(CustomDocumentPicker);

package/src/components/scrollList/category.tsx

@@ -1,9 +1,11 @@
 import React, {useState} from 'react';
 import {ScrollView, Pressable, View, StyleSheet} from 'react-native';
 import CustomText from '../customText/CustomText';
+import {useTheme} from '../../theme/ThemeContext';
+import {withThemeProvider} from '../../theme/withThemeProvider';
 
 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 +28,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 +62,16 @@ const ScrollableList = ({
                   : defaultItemTextColor
               }
             />
+            {item?.isError && (
+              <View
+                style={[
+                  styles.errorViewStyle,
+                  {
+                    backgroundColor: theme.SURFACE_BRAND_STATIC,
+                  },
+                ]}
+              />
+            )}
           </Pressable>
         ))}
       </ScrollView>
@@ -76,6 +88,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
     padding: 12,
     borderBottomWidth: 2,
     borderBottomColor: 'transparent',
@@ -83,6 +98,11 @@ const styles = StyleSheet.create({
   selectedItem: {
     borderBottomColor: 'white',
   },
+  errorViewStyle: {
+    width: 6,
+    height: 6,
+    borderRadius: 100,
+  },
 });
 
-export default ScrollableList;
+export default withThemeProvider(ScrollableList);

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

package/src/theme/themes.ts

@@ -9,6 +9,10 @@ const theme = {
     light: '#F5F5F5',
     dark: '#212121',
   },
+  [Theme.SURFACE_TERTIARY]: {
+    light: '#0000001A',
+    dark: '#373737',
+  },
   [Theme.SURFACE_STATIC]: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
@@ -25,10 +29,22 @@ const theme = {
     light: '#E1E1E1',
     dark: '#A7A7A7',
   },
+  [Theme.SURFACE_INVERTED]: {
+    light: '#000000',
+    dark: '#FFFFFF',
+  },
   [Theme.SURFACE_INVERTED_TRANSPARENT]: {
     light: '#686868',
     dark: '#FFFFFF',
   },
+  [Theme.SURFACE_DROP_SHADOW]: {
+    light: '#CECECE',
+    dark: '#373737',
+  },
+  [Theme.SURFACE_BLUR]: {
+    light: '#000000B2',
+    dark: '#FFFFFFB2',
+  },
 
   [Theme.CONTENT_PRIMARY]: {
     light: '#000000',
@@ -50,6 +66,10 @@ const theme = {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
+  [Theme.CONTENT_PRIMARY_STATIC]: {
+    light: '#0000001A',
+    dark: '#686868',
+  },
   [Theme.CONTENT_SECONDRY_STATIC]: {
     light: '#CECECE',
     dark: '#CECECE',
@@ -83,10 +103,18 @@ const theme = {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
+  [Theme.BORDER_TEXT_FIELD]: {
+    light: '#0000001A',
+    dark: '#404040',
+  },
   [Theme.BORDER_SEPRATOR]: {
     light: '#282828',
     dark: '#FFFFFF',
   },
+  [Theme.BORDER_SEPERATOR_HEADER]: {
+    light: '#E1E1E1',
+    dark: '#404040',
+  },
 
   [Theme.WARNING]: {
     light: '#B65E01',

package/src/utils/appEnum.ts

@@ -74,17 +74,22 @@ export enum FontStyle {
 export enum Theme {
   SURFACE_PRIMARY = 'SURFACE_PRIMARY',
   SURFACE_SECONDARY = 'SURFACE_SECONDARY',
+  SURFACE_TERTIARY = 'SURFACE_TERTIARY',
   SURFACE_STATIC = 'SURFACE_STATIC',
   SURFACE_BRAND_STATIC = 'SURFACE_BRAND_STATIC',
   SURFACE_BRAND_TRANSPARENT_STATIC = 'SURFACE_BRAND_TRANSPARENT_STATIC',
   SURFACE_DISABLE = 'SURFACE_DISABLE',
+  SURFACE_INVERTED = 'SURFACE_INVERTED',
   SURFACE_INVERTED_TRANSPARENT = 'SURFACE_INVERTED_TRANSPARENT',
+  SURFACE_DROP_SHADOW = 'SURFACE_DROP_SHADOW',
+  SURFACE_BLUR = 'SURFACE_BLUR',
 
   CONTENT_PRIMARY = 'CONTENT_PRIMARY',
   CONTENT_SECONDRY = 'CONTENT_SECONDRY',
   CONTENT_DISABLE = 'CONTENT_DISABLE',
   CONTENT_INVERTED = 'CONTENT_INVERTED',
   CONTENT_STATIC = 'CONTENT_STATIC',
+  CONTENT_PRIMARY_STATIC = 'CONTENT_PRIMARY_STATIC',
   CONTENT_SECONDRY_STATIC = 'CONTENT_SECONDRY_STATIC',
 
   BORDER_PRIMARY = 'BORDER_PRIMARY',
@@ -93,6 +98,8 @@ export enum Theme {
   BORDER_INVERTED = 'BORDER_INVERTED',
   BORDER_BRAND_STATIC = 'BORDER_BRAND_STATIC',
   BORDER_BRAND_TRANSPARENT_STATIC = 'BORDER_BRAND_TRANSPARENT_STATIC',
+  BORDER_TEXT_FIELD = 'BORDER_TEXT_FIELD',
+  BORDER_SEPERATOR_HEADER = 'BORDER_SEPERATOR_HEADER',
   BORDER_STATIC = 'BORDER_STATIC',
   BORDER_SEPRATOR = 'BORDER_SEPRATOR',
   WARNING = 'WARNING',