dhre-ui-kit 0.0.3 → 0.0.4

package/package.json

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

package/src/assets/images/arrowLeft.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6006 4.1864C15.9252 4.46466 15.9628 4.9534 15.6846 5.27804L9.92289 12L15.6846 18.722C15.9628 19.0466 15.9252 19.5353 15.6006 19.8136C15.276 20.0919 14.7872 20.0543 14.5089 19.7296L8.31541 12.5038C8.0669 12.2139 8.0669 11.7861 8.31541 11.4962L14.5089 4.27037C14.7872 3.94573 15.276 3.90813 15.6006 4.1864Z" fill="white"/>
+</svg>

package/src/assets/images/caretDown.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 8L10 14.25L3.75 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/caretLeft.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 19.5L7.5 12L15 4.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/caretUp.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 13L10 6.75L16.25 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/circleTick.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0306 7.21937C14.1004 7.28903 14.1557 7.37175 14.1934 7.46279C14.2312 7.55384 14.2506 7.65144 14.2506 7.75C14.2506 7.84856 14.2312 7.94616 14.1934 8.03721C14.1557 8.12825 14.1004 8.21097 14.0306 8.28063L8.78063 13.5306C8.71097 13.6004 8.62826 13.6557 8.53721 13.6934C8.44616 13.7312 8.34857 13.7506 8.25 13.7506C8.15144 13.7506 8.05385 13.7312 7.9628 13.6934C7.87175 13.6557 7.78903 13.6004 7.71938 13.5306L5.46938 11.2806C5.32865 11.1399 5.24959 10.949 5.24959 10.75C5.24959 10.551 5.32865 10.3601 5.46938 10.2194C5.61011 10.0786 5.80098 9.99958 6 9.99958C6.19903 9.99958 6.3899 10.0786 6.53063 10.2194L8.25 11.9397L12.9694 7.21937C13.039 7.14964 13.1218 7.09432 13.2128 7.05658C13.3038 7.01884 13.4014 6.99941 13.5 6.99941C13.5986 6.99941 13.6962 7.01884 13.7872 7.05658C13.8783 7.09432 13.961 7.14964 14.0306 7.21937ZM19.5 10C19.5 11.9284 18.9282 13.8134 17.8568 15.4168C16.7855 17.0202 15.2627 18.2699 13.4812 19.0078C11.6996 19.7458 9.73919 19.9389 7.84787 19.5627C5.95656 19.1865 4.21927 18.2579 2.85571 16.8943C1.49215 15.5307 0.563554 13.7934 0.187348 11.9021C-0.188858 10.0108 0.00422448 8.05042 0.742179 6.26884C1.48013 4.48726 2.72982 2.96452 4.33319 1.89317C5.93657 0.821828 7.82164 0.25 9.75 0.25C12.335 0.25273 14.8134 1.28084 16.6413 3.10872C18.4692 4.93661 19.4973 7.41498 19.5 10ZM18 10C18 8.3683 17.5161 6.77325 16.6096 5.41655C15.7031 4.05984 14.4146 3.00242 12.9071 2.37799C11.3997 1.75357 9.74085 1.59019 8.14051 1.90852C6.54017 2.22685 5.07016 3.01259 3.91637 4.16637C2.76259 5.32015 1.97685 6.79016 1.65853 8.3905C1.3402 9.99085 1.50358 11.6496 2.128 13.1571C2.75242 14.6646 3.80984 15.9531 5.16655 16.8596C6.52326 17.7661 8.11831 18.25 9.75 18.25C11.9373 18.2475 14.0343 17.3775 15.5809 15.8309C17.1275 14.2843 17.9975 12.1873 18 10Z" fill="white"/>
+</svg>

package/src/assets/images/crossIcon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6569 8.03174C17.9247 7.76395 17.9247 7.32978 17.6569 7.06199C17.3892 6.7942 16.955 6.79419 16.6872 7.06197L12 11.749L7.31294 7.06187C7.04516 6.79407 6.61099 6.79407 6.34319 7.06185C6.0754 7.32963 6.0754 7.76381 6.34318 8.0316L11.0302 12.7188L6.34307 17.4058C6.07528 17.6736 6.07527 18.1077 6.34305 18.3755C6.61084 18.6433 7.04501 18.6433 7.3128 18.3755L11.9999 13.6885L16.687 18.3757C16.9548 18.6435 17.3889 18.6435 17.6567 18.3757C17.9245 18.108 17.9245 17.6738 17.6567 17.406L12.9697 12.7188L17.6569 8.03174Z" fill="white"/>
+</svg>

package/src/assets/images/dotsThreeVertical.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4375 6C13.4375 6.79391 12.7939 7.4375 12 7.4375C11.2061 7.4375 10.5625 6.79391 10.5625 6C10.5625 5.20609 11.2061 4.5625 12 4.5625C12.7939 4.5625 13.4375 5.20609 13.4375 6Z" fill="white" stroke="white" stroke-width="0.125"/>
+<path d="M13.4375 12C13.4375 12.7939 12.7939 13.4375 12 13.4375C11.2061 13.4375 10.5625 12.7939 10.5625 12C10.5625 11.2061 11.2061 10.5625 12 10.5625C12.7939 10.5625 13.4375 11.2061 13.4375 12Z" fill="white" stroke="white" stroke-width="0.125"/>
+<path d="M12 19.5C12.8284 19.5 13.5 18.8284 13.5 18C13.5 17.1716 12.8284 16.5 12 16.5C11.1716 16.5 10.5 17.1716 10.5 18C10.5 18.8284 11.1716 19.5 12 19.5Z" fill="white"/>
+</svg>

package/src/assets/images/searchIcon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.875 19.4688C15.2242 19.4688 18.75 15.943 18.75 11.5938C18.75 7.24451 15.2242 3.71875 10.875 3.71875C6.52576 3.71875 3 7.24451 3 11.5938C3 15.943 6.52576 19.4688 10.875 19.4688Z" stroke="#A7A7A7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4438 17.1625L21 21.7188" stroke="#A7A7A7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/index.ts

@@ -1,2 +1,21 @@
 import CalenderDots from './images/calenderDots.svg';
-export {CalenderDots};
+import SearchIcon from './images/searchIcon.svg';
+import CrossIcon from './images/crossIcon.svg';
+import CaretUp from './images/caretUp.svg';
+import CaretDown from './images/caretDown.svg';
+import CaretLeft from './images/caretLeft.svg';
+import HeaderIcon from './images/dotsThreeVertical.svg';
+import CircleTick from './images/circleTick.svg';
+import ArrowLeft from './images/arrowLeft.svg';
+
+export {
+  CalenderDots,
+  SearchIcon,
+  CrossIcon,
+  CaretUp,
+  CaretDown,
+  CaretLeft,
+  HeaderIcon,
+  CircleTick,
+  ArrowLeft,
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface AccordionProps {
+  title: string;
+  children: React.ReactNode;
+  testId?: string;
+}

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

@@ -0,0 +1,28 @@
+import {StyleSheet} from 'react-native';
+import {
+  horizontalScale,
+  moderateScale,
+  verticalScale,
+} from '../../utils/stylehelper';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: verticalScale(16),
+    borderBottomWidth: moderateScale(1),
+    borderBottomColor: '#282828',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {flex: 1, color: '#FFFFFF'},
+  iconStyle: {marginLeft: horizontalScale(20)},
+  content: {
+    overflow: 'scroll',
+    marginTop: verticalScale(16),
+    marginHorizontal: horizontalScale(16),
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import {render, fireEvent, waitFor} from '@testing-library/react-native';
+import Accordion from './Accordion';
+import CustomTypography from '../customTypography/CustomTypography';
+
+describe('Accordion Component', () => {
+  test('Component renders correctly', async () => {
+    const {getByTestId, getByText} = render(
+      <Accordion title="Test Title">
+        <CustomTypography variant="B4_REGULAR" text="Test Content" />
+      </Accordion>,
+    );
+
+    expect(getByTestId('ACCORDION')).toBeTruthy();
+    expect(getByText('Test Title')).toBeTruthy();
+    fireEvent.press(getByText('Test Title'));
+    await waitFor(() => {
+      expect(getByText('Test Content')).toBeTruthy();
+    });
+  });
+});

package/src/components/accordion/Accordion.tsx

@@ -0,0 +1,64 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {View, Animated, LayoutChangeEvent, Pressable} from 'react-native';
+import CustomTypography from '../customTypography/CustomTypography';
+import {CaretDown, CaretUp} from '../../assets';
+import {moderateScale} from '../../utils/stylehelper';
+import {AccordionProps} from './Accordion.interface';
+import styles from './Accordion.styles';
+
+const Accordion = ({title, testId = 'ACCORDION', children}: AccordionProps) => {
+  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) {
+      contentRef.current.measure((x, y, width, height) => {
+        setContentHeight(height);
+      });
+    }
+  }, [expanded]);
+
+  const toggleAccordion = () => {
+    Animated.timing(animation, {
+      toValue: expanded ? 0 : 1,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+    setExpanded(!expanded);
+  };
+
+  const cardHeight = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, contentHeight],
+  });
+
+  return (
+    <View style={styles.container} testID={testId}>
+      <Pressable style={styles.header} onPress={toggleAccordion}>
+        <CustomTypography
+          variant={'B4_REGULAR'}
+          text={title}
+          style={styles.title}
+        />
+        {React.cloneElement(expanded ? <CaretUp /> : <CaretDown />, {
+          width: moderateScale(20),
+          height: moderateScale(20),
+          style: styles.iconStyle,
+        })}
+      </Pressable>
+      <Animated.View style={[styles.content, {height: cardHeight}]}>
+        <View
+          ref={contentRef}
+          onLayout={(event: LayoutChangeEvent) => {
+            setContentHeight(event.nativeEvent.layout.height);
+          }}>
+          {children}
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default Accordion;

package/src/components/accordion/index.ts

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

package/src/components/bottomDrawer/BottomDrawer.interface.ts

@@ -9,4 +9,9 @@ export interface BottomDrawerProps {
   testID?: string;
   style?: ViewStyle;
   modalContainerStyle?: ViewStyle;
+  leftIcon?: React.ReactElement;
+  rightIcon?: React.ReactElement;
+  showLeftIcon?: boolean;
+  showRightIcon?: boolean;
+  onLeftIconPress?: () => void;
 }

package/src/components/bottomDrawer/BottomDrawer.styles.ts

@@ -1,4 +1,3 @@
-import {DHRE_COLORS_TEXT, DHRE_COLORS_BG} from '../../theme/colors';
 import {
   horizontalScale,
   moderateScale,
@@ -9,23 +8,32 @@ import {StyleSheet} from 'react-native';
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
-    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
     justifyContent: 'flex-end',
   },
-  modalContainer: {padding: moderateScale(16)},
+  modalContainer: {
+    flex: 0.5,
+    backgroundColor: '#000',
+    paddingTop: moderateScale(8),
+    paddingHorizontal: moderateScale(16),
+    borderTopLeftRadius: moderateScale(22),
+    borderTopRightRadius: moderateScale(22),
+  },
   separator: {
-    height: verticalScale(2),
-    width: horizontalScale(40),
+    height: verticalScale(3),
+    width: horizontalScale(32),
     alignSelf: 'center',
-    backgroundColor: DHRE_COLORS_BG.DH_GREY1,
-    marginBottom: verticalScale(16),
+    backgroundColor: '#A7A7A7',
     borderRadius: moderateScale(25),
   },
-  headderContainer: {
+  headerContainer: {
     flexDirection: 'row',
-    justifyContent: 'center',
-    marginVertical: verticalScale(4),
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: verticalScale(24),
   },
+  title: {flex: 1, color: '#fff'},
+  leftIconStyle: {marginRight: 8},
+  rightIconStyle: {marginLeft: 8},
 });
 
 export default styles;

package/src/components/bottomDrawer/BottomDrawer.tsx

@@ -3,16 +3,22 @@ import {View, Modal} from 'react-native';
 import {BottomDrawerProps} from './BottomDrawer.interface';
 import styles from './BottomDrawer.styles';
 import CustomTypography from '../customTypography/CustomTypography';
+import {ArrowLeft, CrossIcon} from '../../assets';
+import {moderateScale} from '../../utils/stylehelper';
 
 const BottomDrawer: React.FC<BottomDrawerProps> = ({
   isModalVisible,
   toggleModal,
-  isFullScreen = true,
   children,
   title,
   testID = 'BOTTOM-DRAWER',
   style,
   modalContainerStyle,
+  showLeftIcon = false,
+  showRightIcon = true,
+  leftIcon = <ArrowLeft />,
+  rightIcon = <CrossIcon />,
+  onLeftIconPress,
 }) => {
   return (
     <Modal
@@ -21,19 +27,30 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
       visible={isModalVisible}
       onRequestClose={toggleModal}>
       <View style={[styles.mainContainer, style]} testID={testID}>
-        <View
-          style={[
-            {
-              flex: isFullScreen ? 1 : 0.5,
-            },
-            styles.modalContainer,
-            modalContainerStyle,
-          ]}>
+        <View style={[styles.modalContainer, modalContainerStyle]}>
           <View style={styles.separator} />
-          <View style={styles.headderContainer}>
-            <CustomTypography variant="H7bold" text={title} />
+          <View style={styles.headerContainer}>
+            {showLeftIcon &&
+              React.cloneElement(leftIcon, {
+                width: moderateScale(24),
+                height: moderateScale(24),
+                style: styles.leftIconStyle,
+                onPress: onLeftIconPress,
+              })}
+            <CustomTypography
+              variant="B2_REGULAR"
+              text={title}
+              style={styles.title}
+            />
+            {showRightIcon &&
+              React.cloneElement(rightIcon, {
+                width: moderateScale(24),
+                height: moderateScale(24),
+                style: styles.rightIconStyle,
+                onPress: toggleModal,
+              })}
           </View>
-          <View>{children}</View>
+          {children}
         </View>
       </View>
     </Modal>

package/src/components/customHeader/CustomHeader.interface.tsx

@@ -0,0 +1,10 @@
+export interface CustomHeaderProps {
+  title: string;
+  testId?: string;
+  leftIcon?: React.ReactElement;
+  rightIcon?: React.ReactElement;
+  showLeftIcon?: boolean;
+  showRightIcon?: boolean;
+  onLeftPress?: () => void;
+  onRightPress?: () => void;
+}

package/src/components/customHeader/CustomHeader.styles.ts

@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: horizontalScale(16),
+    paddingTop: verticalScale(74),
+    paddingBottom: verticalScale(16),
+    backgroundColor: '#000',
+  },
+  headderContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerTitle: {
+    color: '#FFFFFF',
+  },
+  leftIconStyle: {marginRight: horizontalScale(9)},
+  rightIconStyle: {marginLeft: horizontalScale(8)},
+});
+
+export default styles;

package/src/components/customHeader/CustomHeader.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import CustomHeader from './CustomHeader';
+
+describe('Custom Header Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId, getByText} = render(
+      <CustomHeader title="Header Title" />,
+    );
+
+    expect(getByTestId('CUSTOM-HEADER')).toBeTruthy();
+    expect(getByText('Header Title')).toBeTruthy();
+  });
+});

package/src/components/customHeader/CustomHeader.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {View} from 'react-native';
+import {CaretLeft, HeaderIcon} from '../../assets';
+import CustomTypography from '../customTypography/CustomTypography';
+import {moderateScale} from '../../utils/stylehelper';
+import styles from './CustomHeader.styles';
+import {CustomHeaderProps} from './CustomHeader.interface';
+
+const CustomHeader = ({
+  title,
+  testId = 'CUSTOM-HEADER',
+  leftIcon = <CaretLeft />,
+  rightIcon = <HeaderIcon />,
+  showLeftIcon = true,
+  showRightIcon = true,
+  onLeftPress,
+  onRightPress,
+}: CustomHeaderProps) => {
+  return (
+    <View style={styles.container} testID={testId}>
+      <View style={styles.headderContainer}>
+        {showLeftIcon &&
+          React.cloneElement(leftIcon, {
+            width: moderateScale(24),
+            height: moderateScale(24),
+            onPress: onLeftPress,
+            style: styles.leftIconStyle,
+          })}
+        <CustomTypography
+          variant={'B2_REGULAR'}
+          text={title}
+          style={styles.headerTitle}
+        />
+      </View>
+      {showRightIcon &&
+        React.cloneElement(rightIcon, {
+          width: moderateScale(24),
+          height: moderateScale(24),
+          onPress: onRightPress,
+          style: styles.rightIconStyle,
+        })}
+    </View>
+  );
+};
+
+export default CustomHeader;

package/src/components/customHeader/index.ts

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

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

@@ -0,0 +1,9 @@
+import {TextInputProps, ViewStyle} from 'react-native';
+
+export interface CustomSearchBarProps extends TextInputProps {
+  height?: number;
+  testID?: string;
+  disabled?: boolean;
+  inputContainerStyle?: ViewStyle;
+  handleOnChangeText?: (text: string) => void;
+}

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

@@ -0,0 +1,23 @@
+import {StyleSheet} from 'react-native';
+import {FONT_STYLES} from '../../theme/fonts';
+import {horizontalScale, moderateScale} from '../../utils/stylehelper';
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: horizontalScale(16),
+    borderRadius: moderateScale(8),
+    borderWidth: moderateScale(1),
+  },
+  input: {
+    flex: 1,
+    ...FONT_STYLES.B3_REGULAR,
+    color: '#fff',
+  },
+  crossIconStyle: {marginLeft: horizontalScale(8)},
+  searchIconStyle: {marginRight: horizontalScale(8)},
+});
+
+export default styles;

package/src/components/customSearchBar/CustomSearchBar.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {it} from '@jest/globals';
+import {fireEvent, render} from '@testing-library/react-native';
+import CustomSearchBar from './CustomSearchBar';
+
+const mockProps = {
+  testID: 'CUSTOM-SEARCH-BAR',
+  disabled: false,
+  handelOnChangeText: jest.fn(),
+};
+
+describe('Custom search bar component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(<CustomSearchBar {...mockProps} />);
+    expect(getByTestId(mockProps.testID)).toBeTruthy();
+    const textInput = getByTestId('CUSTOM-SEARCH-BAR-INPUT');
+    fireEvent.changeText(textInput, 'test@example.com');
+  });
+});

package/src/components/customSearchBar/CustomSearchBar.tsx

@@ -0,0 +1,55 @@
+import React, {useState} from 'react';
+import {TextInput, View} from 'react-native';
+import {CrossIcon, SearchIcon} from '../../assets';
+import {moderateScale, verticalScale} from '../../utils/stylehelper';
+import {CustomSearchBarProps} from './CustomSearchBar.interface';
+import styles from './CustomSearchBar.styles';
+
+const CustomSearchBar = ({
+  height = 40,
+  disabled = false,
+  testID = 'CUSTOM-SEARCH-BAR',
+  inputContainerStyle,
+  handleOnChangeText,
+  ...props
+}: CustomSearchBarProps) => {
+  const [value, setValue] = useState('');
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.inputContainer,
+        {
+          height: verticalScale(height),
+          borderColor: disabled ? '#4F4F4F' : value ? '#fff' : '#A7A7A7',
+        },
+        inputContainerStyle,
+      ]}>
+      {React.cloneElement(<SearchIcon />, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: styles.searchIconStyle,
+      })}
+      <TextInput
+        {...props}
+        testID={`${testID}-INPUT`}
+        style={styles.input}
+        editable={!disabled}
+        value={value}
+        placeholderTextColor={disabled ? '#686868' : '#A7A7A7'}
+        onChangeText={val => {
+          setValue(val);
+          handleOnChangeText?.(val);
+        }}
+      />
+      {value &&
+        React.cloneElement(<CrossIcon onPress={() => setValue('')} />, {
+          width: moderateScale(24),
+          height: moderateScale(24),
+          style: styles.crossIconStyle,
+        })}
+    </View>
+  );
+};
+
+export default CustomSearchBar;

package/src/components/customSearchBar/index.ts

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

package/src/components/customTypography/CustomTypography.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import CustomTypography from './CustomTypography';
+
+describe('CustomTypography Component', () => {
+  it('renders text correctly', () => {
+    const {getByTestId} = render(
+      <CustomTypography variant={'H1_BOLD'} text={'TESTING TEXT'} />,
+    );
+    expect(getByTestId('CUSTOM_TYPOGRAPHY')).toBeTruthy();
+  });
+});

package/src/components/customTypography/CustomTypography.tsx

@@ -1,22 +1,24 @@
 import React from 'react';
-import {FONT_STYLES} from '../../theme/fonts';
 import {Text, TextProps} from 'react-native';
+import {FONT_STYLES} from '../../theme/fonts';
 
 interface TypoTextProps extends TextProps {
-  variant: keyof typeof FONT_STYLES | string;
+  variant: keyof typeof FONT_STYLES;
   text?: string;
+  testID?: string;
 }
 
 const CustomTypography: React.FC<TypoTextProps> = ({
   variant,
   style,
   text,
+  testID = 'CUSTOM_TYPOGRAPHY',
   ...props
 }) => {
   const textStyle = FONT_STYLES[variant];
 
   return (
-    <Text testID="Typo-Text" style={[textStyle, style]} {...props}>
+    <Text testID={testID} style={[textStyle, style]} {...props}>
       {text}
     </Text>
   );

package/src/components/swipableList/SwipableList.interface.ts

@@ -0,0 +1,37 @@
+import {ReactNode} from 'react';
+import {ViewStyle} from 'react-native';
+
+export interface ListItem {
+  id: string;
+  title: string;
+  isPinned: boolean;
+  isRead: boolean;
+}
+
+export interface ActionButtonProps {
+  icon: ReactNode;
+  title: string;
+  onPress: () => void;
+  style?: object;
+  testID: string;
+}
+
+export interface SwipableListProps {
+  data: ListItem[];
+  testId?: string;
+  renderItem: (item: ListItem) => ReactNode;
+  leftPrimaryActionIcon?: ReactNode;
+  leftPrimaryActionTitle?: string;
+  leftPrimaryActionHandler?: (id: string) => void;
+  leftPrimaryActionStyle?: ViewStyle;
+  leftSecondaryActionIcon?: ReactNode;
+  leftSecondaryActionTitle?: string;
+  leftSecondaryActionHandler?: (id: string) => void;
+  leftSecondaryActionStyle?: ViewStyle;
+  rightPrimaryActionIcon?: ReactNode;
+  rightPrimaryActionTitle?: string;
+  rightPrimaryActionHandler?: (id: string) => void;
+  rightPrimaryActionStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  titleStyle?: ViewStyle;
+}

package/src/components/swipableList/SwipableList.styles.ts

@@ -0,0 +1,24 @@
+import {moderateScale, verticalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  actionButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: moderateScale(24),
+  },
+  leftActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  rightActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  seprator: {
+    height: verticalScale(16),
+  },
+});