dhre-ui-kit 0.0.72 → 0.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "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, DateRangePicker, Line} from './index';
+import {Badge, Line} from './index';
 import {ArrowLeft, CalenderDots} from './assets';
 import {View} from 'react-native';
 import CustomButton from './components/button/Button';
@@ -8,7 +8,34 @@ import CustomButton from './components/button/Button';
 const App = () => {
   return (
     <ThemeProvider>
-      <DateRangePicker onButtonPress={() => {}} />
+      <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>
     </ThemeProvider>
   );
 };

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

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

package/src/components/scrollList/category.tsx

@@ -2,16 +2,18 @@ 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; isError?: boolean}[] | undefined;
-  handleSelectCategory: (value: string) => void;
+  handleSelectCategory: (name: string, value: string) => void;
   containerStyle?: object;
   scrollViewContentStyle?: object;
   itemStyle?: object;
   selectedItemStyle?: object;
   selectedItemTextColor?: string;
   defaultItemTextColor?: string;
+  activeTab?: string;
 }
 
 const ScrollableList = ({
@@ -23,6 +25,7 @@ const ScrollableList = ({
   selectedItemStyle,
   selectedItemTextColor = 'CONTENT_PRIMARY',
   defaultItemTextColor = 'CONTENT_SECONDRY',
+  activeTab,
 }: ScrollableListProps) => {
   const [selectedItem, setSelectedItem] = useState<string | null>(
     data && data.length > 0 ? data[0].name : null,
@@ -43,20 +46,20 @@ const ScrollableList = ({
             style={[
               styles.item,
               itemStyle,
-              selectedItem === item.name && [
+              (activeTab ?? selectedItem) === item.name && [
                 styles.selectedItem,
                 selectedItemStyle,
               ],
             ]}
             onPress={() => {
               setSelectedItem(item.name);
-              handleSelectCategory(item.name);
+              handleSelectCategory(item.name, item.value);
             }}>
             <CustomText
               text={item.name}
               variant="L1_REGULAR"
               textColor={
-                selectedItem === item.name
+                (activeTab ?? selectedItem) === item.name
                   ? selectedItemTextColor
                   : defaultItemTextColor
               }
@@ -104,4 +107,4 @@ const styles = StyleSheet.create({
   },
 });
 
-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',