dhre-ui-kit 0.0.71 → 0.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "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/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/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];