dhre-ui-kit 0.0.30 → 0.0.32

package/package.json

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

package/src/App.tsx

@@ -1,38 +1,43 @@
 import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
-import BottomDrawer from './components/bottomDrawer';
+import {ThemeProvider} from './theme/ThemeContext';
+import {Badge, Line} from './index';
+import {ArrowLeft, CalenderDots} from './assets';
+import {View} from 'react-native';
+import CustomButton from './components/button/Button';
 
 const App = () => {
   return (
-    <View style={styles.container}>
-      <Text>SSS</Text>
-      <BottomDrawer isModalVisible={true} toggleModal={() => {}} title={''}>
-        <Text style={styles.text}>Hello, World!</Text>
-      </BottomDrawer>
-    </View>
+    <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>
+    </ThemeProvider>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor:"#000"
-  },
-  image: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  absolute: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    color: 'red',
-    fontSize: 24,
-  },
-});
-
 export default App;

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

@@ -7,4 +7,5 @@ export interface AccordionProps {
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
   children: React.ReactNode;
+  headerStyle?: ViewStyle;
 }

package/src/components/accordion/Accordion.test.tsx

@@ -6,7 +6,7 @@ import CustomTypography from '../customTypography/CustomTypography';
 describe('Accordion Component', () => {
   test('Component renders correctly', async () => {
     const {getByTestId, getByText} = render(
-      <Accordion title="Test Title">
+      <Accordion title="Test Title" isOpen={false} onToggle={() => {}}>
         <CustomTypography variant="B4_REGULAR" text="Test Content" />
       </Accordion>,
     );

package/src/components/accordion/Accordion.tsx

@@ -11,12 +11,14 @@ const Accordion = ({
   testId = 'ACCORDION',
   containerStyle,
   titleStyle,
+  headerStyle,
   children,
-}: AccordionProps) => {
+  isOpen,
+  onToggle,
+}: AccordionProps & {isOpen: boolean; onToggle: () => void}) => {
   const contentRef = useRef<View>(null);
   const [animation] = useState(new Animated.Value(0));
   const [contentHeight, setContentHeight] = useState(0);
-  const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
     if (contentRef.current) {
@@ -24,16 +26,15 @@ const Accordion = ({
         setContentHeight(height);
       });
     }
-  }, [expanded]);
+  }, [isOpen]);
 
-  const toggleAccordion = () => {
+  useEffect(() => {
     Animated.timing(animation, {
-      toValue: expanded ? 0 : 1,
+      toValue: isOpen ? 1 : 0,
       duration: 300,
       useNativeDriver: false,
     }).start();
-    setExpanded(!expanded);
-  };
+  }, [isOpen]);
 
   const cardHeight = animation.interpolate({
     inputRange: [0, 1],
@@ -42,13 +43,13 @@ const Accordion = ({
 
   return (
     <View style={[styles.container, containerStyle]} testID={testId}>
-      <Pressable style={styles.header} onPress={toggleAccordion}>
+      <Pressable style={[styles.header, headerStyle]} onPress={onToggle}>
         <CustomTypography
           variant={'B4_REGULAR'}
           text={title}
           style={[styles.title, titleStyle]}
         />
-        {React.cloneElement(expanded ? <CaretUp /> : <CaretDown />, {
+        {React.cloneElement(isOpen ? <CaretUp /> : <CaretDown />, {
           width: moderateScale(20),
           height: moderateScale(20),
           style: styles.iconStyle,

package/src/components/customSearchBar/CustomSearchBar.interface.ts

@@ -11,4 +11,5 @@ export interface CustomSearchBarProps extends TextInputProps {
   onSearchIconPress?: () => void;
   onCrossIconPress?: () => void;
   handleOnChangeText?: (text: string) => void;
+  rightIcon?: React.ReactElement;
 }

package/src/components/customSearchBar/CustomSearchBar.tsx

@@ -16,6 +16,7 @@ const CustomSearchBar = ({
   onSearchIconPress,
   onCrossIconPress,
   handleOnChangeText,
+  rightIcon = <CrossIcon />,
   ...props
 }: CustomSearchBarProps) => {
   const [value, setValue] = useState('');
@@ -62,7 +63,7 @@ const CustomSearchBar = ({
             onCrossIconPress?.(); // Call custom handler if provided
           }}
           style={crossIconStyle}>
-          {React.cloneElement(<CrossIcon />, {
+          {React.cloneElement(rightIcon, {
             width: moderateScale(24),
             height: moderateScale(24),
             style: [styles.crossIconStyle, crossIconStyle],

package/src/components/feedback/feedback.style.ts

@@ -0,0 +1,48 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+    padding: 20,
+    justifyContent: 'center',
+  },
+  headerText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  textInput: {
+    backgroundColor: 'white',
+    borderRadius: 10,
+    padding: 15,
+    color: 'black',
+    fontSize: 16,
+    textAlignVertical: 'top',
+    minHeight: 100,
+  },
+  charCounter: {
+    textAlign: 'left',
+    marginTop: 10,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    //justifyContent: "space-between",
+    marginTop: 20,
+  },
+  feedbackButton: {
+    backgroundColor: 'transparent',
+    borderColor: 'white',
+    borderWidth: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 30,
+  },
+  cancelButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 40,
+  },
+});
+
+export default styles;

package/src/components/feedback/feedback.tsx

@@ -0,0 +1,59 @@
+import React, {useState} from 'react';
+import {View, Text, TextInput, Pressable} from 'react-native';
+import CustomText from '../customText/CustomText';
+
+import styles from './feedback.style';
+const FeedbackForm = ({
+  title,
+  clearAllData,
+  handleSendFeedback,
+}: {
+  title: string;
+  clearAllData?: () => void;
+  handleSendFeedback?: () => void;
+}) => {
+  const [feedback, setFeedback] = useState('');
+
+  const maxChars = 200;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.headerText}>{title}</Text>
+
+      <TextInput
+        style={[styles.textInput, {height: Math.max(100)}]}
+        placeholder="Would you like to tell us more..."
+        placeholderTextColor="gray"
+        multiline
+        maxLength={maxChars}
+        value={feedback}
+        onChangeText={text => setFeedback(text)}
+      />
+      <CustomText
+        text={`${feedback.length}/${maxChars} characters`}
+        variant="L2_REGULAR"
+        textColor="CONTENT_SECONDRY"
+        style={styles.charCounter}
+      />
+      <View style={styles.buttonContainer}>
+        <Pressable style={styles.feedbackButton} onPress={handleSendFeedback}>
+          <CustomText
+            text="Send feedback"
+            variant="L1_REGULAR"
+            textColor="CONTENT_PRIMARY"
+          />
+        </Pressable>
+
+        <Pressable style={styles.cancelButton} onPress={clearAllData}>
+          <CustomText
+            text="Cancel"
+            variant="L1_REGULAR"
+            textColor="CONTENT_PRIMARY"
+          />
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+export default FeedbackForm;

package/src/components/feedback/index.ts

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

package/src/components/scrollList/category.tsx

@@ -0,0 +1,83 @@
+import React, {useState} from 'react';
+import {ScrollView, Pressable, View, StyleSheet} from 'react-native';
+import CustomText from '../customText/CustomText';
+
+interface ScrollableListProps {
+  data: string[];
+  handleSelectCategory: (item: string) => void;
+  containerStyle?: object;
+  scrollViewContentStyle?: object;
+  itemStyle?: object;
+  selectedItemStyle?: object;
+  selectedItemTextColor?: string;
+  defaultItemTextColor?: string;
+}
+
+const ScrollableList = ({
+  data,
+  handleSelectCategory,
+  containerStyle,
+  scrollViewContentStyle,
+  itemStyle,
+  selectedItemStyle,
+  selectedItemTextColor = 'CONTENT_PRIMARY',
+  defaultItemTextColor = 'CONTENT_SECONDRY',
+}: ScrollableListProps) => {
+  const [selectedItem, setSelectedItem] = useState<string | null>(data[0]);
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[
+          styles.scrollViewContent,
+          scrollViewContentStyle,
+        ]}>
+        {data?.map(item => (
+          <Pressable
+            key={item}
+            style={[
+              styles.item,
+              itemStyle,
+              selectedItem === item && [styles.selectedItem, selectedItemStyle],
+            ]}
+            onPress={() => {
+              setSelectedItem(item);
+              handleSelectCategory(item);
+            }}>
+            <CustomText
+              text={item}
+              variant="L1_REGULAR"
+              textColor={
+                selectedItem === item
+                  ? selectedItemTextColor
+                  : defaultItemTextColor
+              }
+            />
+          </Pressable>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 10,
+  },
+  scrollViewContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  item: {
+    padding: 12,
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent',
+  },
+  selectedItem: {
+    borderBottomColor: 'white',
+  },
+});
+
+export default ScrollableList;

package/src/components/scrollList/index.ts

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

package/src/index.ts

@@ -31,6 +31,8 @@ export {default as ContactModel} from './components/ContactModel';
 export {default as DateRangePicker} from './components/dateRangePicker';
 export {default as OurOfficesButton} from './components/OutOfOffice';
 export {default as NotificationBandge} from './components/notificationBandge';
+export {default as category} from './components/scrollList';
+export {default as FeedbackForm} from './components/feedback';
 
 export {FONT_STYLES} from './theme/fonts';
 export {DHRE_DEFAULT, DHRE_COLORS_TEXT} from './theme/colors';

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