dhre-ui-kit 0.0.1

package/src/components/notification/Notification.interface.ts

@@ -0,0 +1,61 @@
+import {ReactNode} from 'react';
+import {ViewStyle} from 'react-native';
+
+export interface NotificationItem {
+  id: string;
+  title: string;
+  isPinned: boolean;
+  isRead: boolean;
+}
+
+export interface ActionButtonProps {
+  icon: ReactNode;
+  title: string;
+  onPress: () => void;
+  style?: object;
+  testID: string;
+}
+
+export interface ListItemProps {
+  item: NotificationItem;
+  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;
+  rightSecondaryActionIcon?: ReactNode;
+  rightSecondaryActionTitle?: string;
+  rightSecondaryActionHandler?: (id: string) => void;
+  rightSecondaryActionStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  titleStyle?: ViewStyle;
+}
+
+export interface NotificationProps {
+  notifications: NotificationItem[];
+  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;
+  rightSecondaryActionIcon?: ReactNode;
+  rightSecondaryActionTitle?: string;
+  rightSecondaryActionHandler?: (id: string) => void;
+  rightSecondaryActionStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  titleStyle?: ViewStyle;
+}

package/src/components/notification/Notification.styles.ts

@@ -0,0 +1,33 @@
+import {DHRE_COLORS_ALERT} from '../../theme/colors';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  item: {
+    backgroundColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE_0,
+    padding: horizontalScale(20),
+    marginHorizontal: horizontalScale(8),
+  },
+  actionButton: {
+    justifyContent: 'center',
+    padding: horizontalScale(12),
+    marginVertical: verticalScale(8),
+  },
+  leftActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  rightActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  sepratorView: {
+    marginVertical: verticalScale(8),
+  },
+  itemIconAlign: {
+    alignItems: 'center',
+  },
+});

package/src/components/notification/Notification.test.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {fireEvent, render} from '@testing-library/react-native';
+import Notification from './Notification';
+import {CalenderDots} from '../../assets';
+
+jest.mock('react-native-gesture-handler', () => {
+  const mockGestureHandler = {
+    swipeable: jest.fn(),
+    gestureHandlerRootHOC: jest.fn(),
+  };
+  return {
+    PanGestureHandler: mockGestureHandler,
+    TapGestureHandler: mockGestureHandler,
+    LongPressGestureHandler: mockGestureHandler,
+    State: {},
+    Directions: {},
+    Swipeable: jest
+      .fn()
+      .mockImplementation(
+        ({children, renderLeftActions, renderRightActions}) => (
+          <div>
+            {renderLeftActions && renderLeftActions()}
+            {children}
+            {renderRightActions && renderRightActions()}
+          </div>
+        ),
+      ),
+    GestureHandlerRootView: jest
+      .fn()
+      .mockImplementation(({children}) => <div>{children}</div>),
+  };
+});
+const customStyle = {backgroundColor: 'red', padding: 20};
+
+describe('Notification Component', () => {
+  const notifications = [
+    {id: '1', title: 'Notification 1', isPinned: false, isRead: true},
+    {id: '2', title: 'Notification 2', isPinned: true, isRead: false},
+  ];
+
+  const notificationsPinned = [
+    {id: '1', title: 'Notification 1', isPinned: true, isRead: true},
+    {id: '2', title: 'Notification 2', isPinned: false, isRead: false},
+  ];
+
+  const notificationsUnPinned = [
+    {id: '1', title: 'Notification 1', isPinned: false, isRead: false},
+    {id: '2', title: 'Notification 2', isPinned: false, isRead: false},
+  ];
+
+  const mockLeftPrimaryActionHandler = jest.fn();
+  const mockRightPrimaryActionHandler = jest.fn();
+  const mockLeftSecondaryActionHandler = jest.fn();
+  const mockRightSecondaryActionHandler = jest.fn();
+
+  const commonProps = {
+    leftPrimaryActionIcon: <CalenderDots />,
+    leftPrimaryActionHandler: mockLeftPrimaryActionHandler,
+    leftPrimaryActionStyle: {backgroundColor: 'red'},
+    leftSecondaryActionIcon: <CalenderDots />,
+    leftSecondaryActionHandler: mockLeftSecondaryActionHandler,
+    leftSecondaryActionStyle: {backgroundColor: 'blue'},
+    rightPrimaryActionIcon: <CalenderDots />,
+    rightPrimaryActionHandler: mockRightPrimaryActionHandler,
+    rightPrimaryActionStyle: {backgroundColor: 'green'},
+    rightSecondaryActionIcon: <CalenderDots />,
+    rightSecondaryActionHandler: mockRightSecondaryActionHandler,
+    rightSecondaryActionStyle: {backgroundColor: 'yellow'},
+    itemStyle: customStyle,
+    titleStyle: customStyle,
+  };
+
+  const props = {
+    ...commonProps,
+    notifications,
+    leftPrimaryActionTitle: 'Pin',
+    leftSecondaryActionTitle: 'Read',
+    rightPrimaryActionTitle: 'Delete',
+    rightSecondaryActionTitle: 'Archive',
+  };
+  const propsUnPinned = {
+    ...commonProps,
+    notifications: notificationsUnPinned,
+    leftPrimaryActionTitle: 'Pin',
+    leftSecondaryActionTitle: 'Read',
+    rightPrimaryActionTitle: 'Delete',
+    rightSecondaryActionTitle: 'Archive',
+  };
+
+  const propsPinned = {
+    ...commonProps,
+    notifications: notificationsPinned,
+    leftPrimaryActionTitle: '',
+    leftSecondaryActionTitle: '',
+    rightPrimaryActionTitle: '',
+    rightSecondaryActionTitle: '',
+  };
+
+  it('renders Notification component correctly', () => {
+    const {getByTestId} = render(<Notification {...props} />);
+    expect(getByTestId('NOTIFICATION')).toBeTruthy();
+    fireEvent.press(getByTestId('leftPrimary-1'));
+    fireEvent.press(getByTestId('leftSecondary-1'));
+    fireEvent.press(getByTestId('rightPrimary-1'));
+    fireEvent.press(getByTestId('rightSecondary-1'));
+  });
+
+  it('renders Notification component when pinned', () => {
+    const {getByTestId} = render(<Notification {...propsPinned} />);
+    expect(getByTestId('NOTIFICATION')).toBeTruthy();
+  });
+  it('renders Notification component when pinned', () => {
+    const {getByTestId} = render(<Notification {...propsUnPinned} />);
+    expect(getByTestId('NOTIFICATION')).toBeTruthy();
+  });
+});

package/src/components/notification/Notification.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import {FlatList, View, Pressable} from 'react-native';
+import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
+import {
+  ActionButtonProps,
+  ListItemProps,
+  NotificationItem,
+  NotificationProps,
+} from './Notification.interface';
+import {styles} from './Notification.styles';
+import CustomTypography from '../customTypography/CustomTypography';
+
+const Notification = ({
+  notifications,
+  leftPrimaryActionIcon,
+  leftPrimaryActionTitle,
+  leftPrimaryActionHandler,
+  leftPrimaryActionStyle,
+  leftSecondaryActionIcon,
+  leftSecondaryActionTitle,
+  leftSecondaryActionHandler,
+  leftSecondaryActionStyle,
+  rightPrimaryActionIcon,
+  rightPrimaryActionTitle,
+  rightPrimaryActionHandler,
+  rightPrimaryActionStyle,
+  rightSecondaryActionIcon,
+  rightSecondaryActionTitle,
+  rightSecondaryActionHandler,
+  rightSecondaryActionStyle,
+  itemStyle,
+  titleStyle,
+}: NotificationProps) => {
+  const ActionButton = ({
+    icon,
+    title,
+    onPress,
+    style,
+    testID,
+  }: ActionButtonProps) => (
+    <Pressable
+      testID={testID}
+      onPress={onPress}
+      style={[styles.actionButton, style, styles.itemIconAlign]}>
+      {icon}
+      <CustomTypography variant="H9medium" style={titleStyle} text={title} />
+    </Pressable>
+  );
+
+  const leftActionHandle = item => (
+    <View style={[styles.leftActions, leftPrimaryActionStyle]}>
+      {leftPrimaryActionIcon && leftPrimaryActionHandler && (
+        <ActionButton
+          icon={leftPrimaryActionIcon}
+          title={leftPrimaryActionTitle || ''}
+          onPress={() => leftPrimaryActionHandler(item.id)}
+          style={leftPrimaryActionStyle}
+          testID={`leftPrimary-${item.id}`}
+        />
+      )}
+      {leftSecondaryActionIcon && leftSecondaryActionHandler && (
+        <ActionButton
+          icon={leftSecondaryActionIcon}
+          title={leftSecondaryActionTitle || ''}
+          onPress={() => leftSecondaryActionHandler(item.id)}
+          style={leftSecondaryActionStyle}
+          testID={`leftSecondary-${item.id}`}
+        />
+      )}
+    </View>
+  );
+
+  const rightActionHandle = item => (
+    <View style={[styles.rightActions, rightPrimaryActionStyle]}>
+      {rightPrimaryActionIcon && rightPrimaryActionHandler && (
+        <ActionButton
+          icon={rightPrimaryActionIcon}
+          title={rightPrimaryActionTitle || ''}
+          onPress={() => rightPrimaryActionHandler(item.id)}
+          style={rightPrimaryActionStyle}
+          testID={`rightPrimary-${item.id}`}
+        />
+      )}
+      {rightSecondaryActionIcon && rightSecondaryActionHandler && (
+        <ActionButton
+          icon={rightSecondaryActionIcon}
+          title={rightSecondaryActionTitle || ''}
+          onPress={() => rightSecondaryActionHandler(item.id)}
+          style={rightSecondaryActionStyle}
+          testID={`rightSecondary-${item.id}`}
+        />
+      )}
+    </View>
+  );
+
+  const ListItem = ({item, itemStyle, titleStyle}: ListItemProps) => (
+    <GestureHandlerRootView testID="LIST" style={styles.container}>
+      <Swipeable
+        renderLeftActions={() => leftActionHandle(item)}
+        renderRightActions={() => rightActionHandle(item)}>
+        <View style={[styles.item, itemStyle]}>
+          <CustomTypography
+            variant="H7medium"
+            style={titleStyle}
+            text={item?.title}
+          />
+        </View>
+      </Swipeable>
+    </GestureHandlerRootView>
+  );
+
+  const sortData = (data: NotificationItem[]) => {
+    return data?.sort((a, b) => {
+      if (a.isPinned && !b.isPinned) return -1;
+      if (!a.isPinned && b.isPinned) return 1;
+      return 0;
+    });
+  };
+
+  const renderItem = ({item}: {item: NotificationItem}) => (
+    <ListItem
+      item={item}
+      leftPrimaryActionIcon={leftPrimaryActionIcon}
+      leftPrimaryActionTitle={leftPrimaryActionTitle}
+      leftPrimaryActionHandler={leftPrimaryActionHandler}
+      leftPrimaryActionStyle={leftPrimaryActionStyle}
+      leftSecondaryActionIcon={leftSecondaryActionIcon}
+      leftSecondaryActionTitle={leftSecondaryActionTitle}
+      leftSecondaryActionHandler={leftSecondaryActionHandler}
+      leftSecondaryActionStyle={leftSecondaryActionStyle}
+      rightPrimaryActionIcon={rightPrimaryActionIcon}
+      rightPrimaryActionTitle={rightPrimaryActionTitle}
+      rightPrimaryActionHandler={rightPrimaryActionHandler}
+      rightPrimaryActionStyle={rightPrimaryActionStyle}
+      rightSecondaryActionIcon={rightSecondaryActionIcon}
+      rightSecondaryActionTitle={rightSecondaryActionTitle}
+      rightSecondaryActionHandler={rightSecondaryActionHandler}
+      rightSecondaryActionStyle={rightSecondaryActionStyle}
+      itemStyle={itemStyle}
+      titleStyle={titleStyle}
+    />
+  );
+
+  return (
+    <View testID="NOTIFICATION">
+      <FlatList
+        data={sortData(notifications)}
+        renderItem={renderItem}
+        keyExtractor={item => item.id}
+        ItemSeparatorComponent={() => <View style={styles.sepratorView} />}
+      />
+    </View>
+  );
+};
+
+export default Notification;

package/src/components/pdfView/PdfView.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import PdfView from './PdfView';
+
+describe('PdfView', () => {
+  it('renders the Pdf component with the correct source URI', () => {
+    const pdfResponse = 'base64encodedstring';
+    render(<PdfView pdfResponse={pdfResponse} />);
+  });
+});

package/src/components/pdfView/PdfView.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Pdf from 'react-native-pdf';
+import commonStyles from '../../utils/commonStyles';
+
+interface PDFViewProps {
+  pdfResponse: string;
+}
+
+const PdfView: React.FC<PDFViewProps> = ({pdfResponse}) => {
+  return (
+    <Pdf
+      source={{uri: `data:application/pdf;base64,${pdfResponse}`}}
+      style={commonStyles.flexOne}
+    />
+  );
+};
+
+export default PdfView;

package/src/components/pdfView/index.ts

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

package/src/components/popup/PopUp.interface.ts

@@ -0,0 +1,9 @@
+export interface PopUpProps {
+  subtitle?: string;
+  buttonText?: string;
+  title?: string;
+  leftButtonShown: boolean;
+  rightButtonShown: boolean;
+  testID?: string;
+  onButtonPress?: () => void;
+}

package/src/components/popup/PopUp.styles.ts

@@ -0,0 +1,52 @@
+import {DHRE_COLORS_BG, DHRE_COLORS_TEXT} from '../../theme/colors';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: horizontalScale(20),
+    marginHorizontal: horizontalScale(16),
+    justifyContent: 'space-between',
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  subTitleBelow: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
+  },
+  subtitle: {
+    letterSpacing: 0.5,
+    marginTop: verticalScale(8),
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
+    marginBottom: verticalScale(24),
+  },
+  button: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    paddingVertical: verticalScale(14),
+    paddingHorizontal: horizontalScale(34),
+    borderRadius: 50,
+    flex: 1,
+  },
+  buttonText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+    textAlign: 'center',
+  },
+  buttonLeft: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingVertical: verticalScale(14),
+    paddingHorizontal: horizontalScale(34),
+    borderRadius: 50,
+    borderWidth: 1,
+    flex: 1,
+    borderColor: DHRE_COLORS_BG.DH_GREY1,
+  },
+  buttonLeftText: {
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    gap: horizontalScale(16),
+    justifyContent: 'space-between',
+  },
+});
+
+export default styles;

package/src/components/popup/PopUp.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {it} from '@jest/globals';
+import {fireEvent, render} from '@testing-library/react-native';
+import PopUp from './PopUp';
+
+const mockProps = {
+  subtitle: 'SubTitle',
+  buttonText: 'Button',
+  title: 'Title',
+  leftButtonShown: true,
+  rightButtonShown: true,
+  testID: 'POPUP-COMPONENT',
+  onButtonPress: jest.fn(),
+};
+const mockWithoutDataProps = {
+  subtitle: undefined,
+  buttonText: undefined,
+  title: undefined,
+  leftButtonShown: false,
+  rightButtonShown: false,
+  testID: 'POPUP-COMPONENT',
+  onButtonPress: jest.fn(),
+};
+
+describe('PopUp Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(<PopUp {...mockProps} />);
+    expect(getByTestId('POPUP-COMPONENT')).toBeTruthy();
+    fireEvent.press(getByTestId('Left-Button-Press'));
+  });
+  it('Component renders correctly when props data is not passed', () => {
+    const {getByTestId} = render(<PopUp {...mockWithoutDataProps} />);
+    expect(getByTestId('POPUP-COMPONENT')).toBeTruthy();
+  });
+});

package/src/components/popup/PopUp.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {View, Pressable} from 'react-native';
+import styles from './PopUp.styles';
+import {PopUpProps} from './PopUp.interface';
+import CustomTypography from '../customTypography/CustomTypography';
+
+const PopUp: React.FC<PopUpProps> = ({
+  subtitle,
+  title,
+  buttonText,
+  onButtonPress,
+  testID,
+  leftButtonShown = false,
+  rightButtonShown = false,
+}: PopUpProps) => {
+  return (
+    <View testID={testID} style={styles.container}>
+      {title ? (
+        <CustomTypography
+          style={styles.subTitleBelow}
+          variant="H6semiBold"
+          text={title}
+        />
+      ) : null}
+      {subtitle ? (
+        <CustomTypography
+          style={styles.subtitle}
+          variant="P3regular"
+          text={subtitle}
+        />
+      ) : null}
+
+      <View style={styles.buttonContainer}>
+        {leftButtonShown ? (
+          <Pressable
+            testID="Left-Button-Press"
+            style={styles.buttonLeft}
+            onPress={onButtonPress}>
+            <CustomTypography
+              style={styles.buttonLeftText}
+              variant="B2semiBold"
+              text={buttonText}
+            />
+          </Pressable>
+        ) : null}
+        {rightButtonShown ? (
+          <Pressable style={styles.button} onPress={onButtonPress}>
+            <CustomTypography
+              style={styles.buttonText}
+              variant="B2semiBold"
+              text={buttonText}
+            />
+          </Pressable>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+export default PopUp;

package/src/components/popup/index.ts

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

package/src/components/progressBar/ProgressBar.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {render, act} from '@testing-library/react-native';
+import CustomProgressBar from './ProgressBar';
+import {ShapeType} from '../../utils/appEnum';
+
+jest.mock('react-native-progress', () => ({
+  Bar: jest.fn(),
+  Circle: jest.fn(),
+}));
+
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+describe('CustomProgressBar', () => {
+  it('updates progress correctly', () => {
+    jest.useFakeTimers();
+
+    const {getByTestId} = render(
+      <CustomProgressBar
+        value={50}
+        type={ShapeType.LINE}
+        width={0}
+        fillColor={''}
+        unfilledColor={''}
+        progress={0}
+        setProgress={function (): void {}}
+      />,
+    );
+    const lineProgressBar = getByTestId('custom-progress-bar');
+    for (let i = 0; i < 5; i++) {
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+    }
+
+    expect(lineProgressBar.props.progress).toBeUndefined();
+    while (lineProgressBar.props.progress < 1) {
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+    }
+    if (typeof lineProgressBar.props.progress === 'number') {
+      expect(lineProgressBar.props.progress).toBeCloseTo(1);
+    }
+    jest.useRealTimers();
+  });
+});
+describe('CustomProgressBar', () => {
+  it('renders a line progress bar with initial progress and color', () => {
+    const {getByTestId} = render(
+      <CustomProgressBar
+        value={50}
+        type={ShapeType.LINE}
+        width={0}
+        fillColor={''}
+        unfilledColor={''}
+        progress={0}
+        setProgress={function (): void {}}
+      />,
+    );
+    const lineProgressBar = getByTestId('custom-progress-bar');
+    expect(lineProgressBar).toBeTruthy();
+  });
+  it('renders a line progress bar with initial progress and color', () => {
+    const {getByTestId} = render(
+      <CustomProgressBar
+        value={50}
+        type={ShapeType.CIRCLE}
+        width={0}
+        fillColor={''}
+        unfilledColor={''}
+        progress={0}
+        setProgress={function (): void {}}
+      />,
+    );
+    const lineProgressBar = getByTestId('custom-progress-bar');
+    expect(lineProgressBar).toBeTruthy();
+  });
+});