dhre-ui-kit 0.0.3 → 0.0.4

package/src/components/{notification/Notification.test.tsx → swipableList/SwipableList.test.tsx}

@@ -1,7 +1,8 @@
 import React from 'react';
 import {fireEvent, render} from '@testing-library/react-native';
-import Notification from './Notification';
+import SwipableList from './SwipableList';
 import {CalenderDots} from '../../assets';
+import {Text} from 'react-native';
 
 jest.mock('react-native-gesture-handler', () => {
   const mockGestureHandler = {
@@ -51,7 +52,6 @@ describe('Notification Component', () => {
   const mockLeftPrimaryActionHandler = jest.fn();
   const mockRightPrimaryActionHandler = jest.fn();
   const mockLeftSecondaryActionHandler = jest.fn();
-  const mockRightSecondaryActionHandler = jest.fn();
 
   const commonProps = {
     leftPrimaryActionIcon: <CalenderDots />,
@@ -63,54 +63,53 @@ describe('Notification Component', () => {
     rightPrimaryActionIcon: <CalenderDots />,
     rightPrimaryActionHandler: mockRightPrimaryActionHandler,
     rightPrimaryActionStyle: {backgroundColor: 'green'},
-    rightSecondaryActionIcon: <CalenderDots />,
-    rightSecondaryActionHandler: mockRightSecondaryActionHandler,
-    rightSecondaryActionStyle: {backgroundColor: 'yellow'},
     itemStyle: customStyle,
     titleStyle: customStyle,
   };
 
   const props = {
     ...commonProps,
-    notifications,
+    data: notifications,
     leftPrimaryActionTitle: 'Pin',
     leftSecondaryActionTitle: 'Read',
     rightPrimaryActionTitle: 'Delete',
-    rightSecondaryActionTitle: 'Archive',
   };
   const propsUnPinned = {
     ...commonProps,
-    notifications: notificationsUnPinned,
+    data: notificationsUnPinned,
     leftPrimaryActionTitle: 'Pin',
     leftSecondaryActionTitle: 'Read',
     rightPrimaryActionTitle: 'Delete',
-    rightSecondaryActionTitle: 'Archive',
   };
 
   const propsPinned = {
     ...commonProps,
-    notifications: notificationsPinned,
+    data: 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'));
+    const {getByTestId} = render(
+      <SwipableList {...props} renderItem={() => <Text>Title</Text>} />,
+    );
+    expect(getByTestId('SWIPABLE-LIST')).toBeTruthy();
+    fireEvent.press(getByTestId('SWIPABLE-LIST-LEFT-PRIMARY-1'));
+    fireEvent.press(getByTestId('SWIPABLE-LIST-LEFT-SECONDARY-1'));
+    fireEvent.press(getByTestId('SWIPABLE-LIST-RIGHT-PRIMARY-1'));
   });
 
   it('renders Notification component when pinned', () => {
-    const {getByTestId} = render(<Notification {...propsPinned} />);
-    expect(getByTestId('NOTIFICATION')).toBeTruthy();
+    const {getByTestId} = render(
+      <SwipableList {...propsPinned} renderItem={() => <Text>Title</Text>} />,
+    );
+    expect(getByTestId('SWIPABLE-LIST')).toBeTruthy();
   });
   it('renders Notification component when pinned', () => {
-    const {getByTestId} = render(<Notification {...propsUnPinned} />);
-    expect(getByTestId('NOTIFICATION')).toBeTruthy();
+    const {getByTestId} = render(
+      <SwipableList {...propsUnPinned} renderItem={() => <Text>Title</Text>} />,
+    );
+    expect(getByTestId('SWIPABLE-LIST')).toBeTruthy();
   });
 });

package/src/components/swipableList/SwipableList.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {FlatList, View, Pressable} from 'react-native';
+import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
+import {
+  ActionButtonProps,
+  ListItem,
+  SwipableListProps,
+} from './SwipableList.interface';
+import {styles} from './SwipableList.styles';
+import CustomTypography from '../customTypography/CustomTypography';
+
+const SwipableList = (props: SwipableListProps) => {
+  const {
+    data,
+    testId = 'SWIPABLE-LIST',
+    leftPrimaryActionIcon,
+    leftPrimaryActionTitle,
+    leftPrimaryActionHandler,
+    leftPrimaryActionStyle,
+    leftSecondaryActionIcon,
+    leftSecondaryActionTitle,
+    leftSecondaryActionHandler,
+    leftSecondaryActionStyle,
+    rightPrimaryActionIcon,
+    rightPrimaryActionTitle,
+    rightPrimaryActionHandler,
+    rightPrimaryActionStyle,
+    titleStyle,
+  } = props;
+
+  const ActionButton = ({
+    icon,
+    title,
+    onPress,
+    style,
+    testID,
+  }: ActionButtonProps) => (
+    <Pressable
+      testID={testID}
+      onPress={onPress}
+      style={[styles.actionButton, style]}>
+      {icon}
+      <CustomTypography variant="L1_REGULAR" style={titleStyle} text={title} />
+    </Pressable>
+  );
+
+  const leftActionHandle = item => (
+    <View style={[styles.leftActions, leftPrimaryActionStyle]}>
+      {leftPrimaryActionIcon && (
+        <ActionButton
+          icon={leftPrimaryActionIcon}
+          title={leftPrimaryActionTitle || ''}
+          onPress={() => leftPrimaryActionHandler?.(item.id)}
+          style={leftPrimaryActionStyle}
+          testID={`${testId}-LEFT-PRIMARY-${item.id}`}
+        />
+      )}
+      {leftSecondaryActionIcon && (
+        <ActionButton
+          icon={leftSecondaryActionIcon}
+          title={leftSecondaryActionTitle || ''}
+          onPress={() => leftSecondaryActionHandler?.(item.id)}
+          style={leftSecondaryActionStyle}
+          testID={`${testId}-LEFT-SECONDARY-${item.id}`}
+        />
+      )}
+    </View>
+  );
+
+  const rightActionHandle = item => (
+    <View style={[styles.rightActions, rightPrimaryActionStyle]}>
+      {rightPrimaryActionIcon && (
+        <ActionButton
+          icon={rightPrimaryActionIcon}
+          title={rightPrimaryActionTitle || ''}
+          onPress={() => rightPrimaryActionHandler?.(item.id)}
+          style={rightPrimaryActionStyle}
+          testID={`${testId}-RIGHT-PRIMARY-${item.id}`}
+        />
+      )}
+    </View>
+  );
+
+  const renderItem = ({item}: {item: ListItem}) => (
+    <GestureHandlerRootView testID={`${testId}-LIST`} style={styles.container}>
+      <Swipeable
+        renderLeftActions={() => leftActionHandle(item)}
+        renderRightActions={() => rightActionHandle(item)}>
+        {props?.renderItem(item)}
+      </Swipeable>
+    </GestureHandlerRootView>
+  );
+
+  return (
+    <View testID={testId}>
+      <FlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={item => item.id}
+        ItemSeparatorComponent={() => <View style={styles.seprator} />}
+      />
+    </View>
+  );
+};
+
+export default SwipableList;

package/src/components/swipableList/index.ts

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

package/src/components/toast/Toast.interface.ts

@@ -0,0 +1,8 @@
+export interface ToastProps {
+  message: string;
+  testId?: string;
+  isSuccess?: boolean;
+  btnText?: string;
+  onBtnPress?: () => void;
+  setToast: (val: boolean) => void;
+}

package/src/components/toast/Toast.styles.ts

@@ -0,0 +1,40 @@
+import {StyleSheet} from 'react-native';
+import {
+  horizontalScale,
+  moderateScale,
+  verticalScale,
+  width,
+} from '../../utils/stylehelper';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    height: verticalScale(72),
+    width: width - horizontalScale(48),
+    top: 56,
+    borderRadius: moderateScale(8),
+    overflow: 'hidden',
+  },
+  toastContainer: {flex: 1, justifyContent: 'center'},
+  innerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: horizontalScale(12),
+  },
+  icon: {
+    marginRight: 9,
+  },
+  messageText: {
+    flex: 1,
+    color: '#fff',
+  },
+  button: {
+    marginLeft: 9,
+  },
+  buttonText: {
+    textDecorationLine: 'underline',
+    color: '#fff',
+  },
+});
+
+export default styles;

package/src/components/toast/Toast.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import Toast from './Toast';
+
+jest.mock('react-native-progress', () => ({
+  Bar: props => <div {...props} />,
+}));
+
+describe('Toast Component', () => {
+  it('Component  renders correctly', () => {
+    const {getByTestId} = render(
+      <Toast
+        message="Test message"
+        setToast={jest.fn()}
+        btnText="Undo"
+        onBtnPress={jest.fn()}
+      />,
+    );
+    expect(getByTestId('TOAST')).toBeTruthy();
+  });
+});

package/src/components/toast/Toast.tsx

@@ -0,0 +1,89 @@
+import React, {useEffect, useState} from 'react';
+import {View, Animated, Pressable} from 'react-native';
+import * as Progress from 'react-native-progress';
+import {CrossIcon, CircleTick} from '../../assets';
+import CustomTypography from '../customTypography/CustomTypography';
+import {horizontalScale, moderateScale, width} from '../../utils/stylehelper';
+import {ToastProps} from './Toast.interface';
+import styles from './Toast.styles';
+
+const Toast = ({
+  message,
+  testId = 'TOAST',
+  isSuccess = true,
+  btnText,
+  onBtnPress,
+  setToast,
+}: ToastProps) => {
+  const [progress, setProgress] = useState(0);
+  const bottom = React.useRef(new Animated.Value(-80)).current;
+
+  function animate() {
+    Animated.timing(bottom, {
+      toValue: 20,
+      duration: 2000,
+      useNativeDriver: false,
+    }).start(() => {
+      setToast(false);
+    });
+  }
+
+  useEffect(() => {
+    animate();
+  }, []);
+
+  const simulateProgress = () => {
+    setProgress(prev => (prev + 0.1 > 1 ? 1 : prev + 0.1));
+  };
+
+  useEffect(() => {
+    const interval = setInterval(simulateProgress, 180);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {bottom},
+        {backgroundColor: isSuccess ? '#04743F' : '#DB3056'},
+      ]}
+      testID={testId}>
+      <View style={styles.toastContainer}>
+        <View style={styles.innerContainer}>
+          {React.cloneElement(isSuccess ? <CircleTick /> : <CrossIcon />, {
+            width: moderateScale(20),
+            height: moderateScale(20),
+            style: styles.icon,
+          })}
+          <CustomTypography
+            variant={'L2_REGULAR'}
+            text={message}
+            style={styles.messageText}
+          />
+          {btnText ? (
+            <Pressable
+              style={styles.button}
+              onPress={onBtnPress}
+              testID={`${testId}-BTN`}>
+              <CustomTypography
+                variant={'L2_BOLD'}
+                text={btnText}
+                style={styles.buttonText}
+              />
+            </Pressable>
+          ) : null}
+        </View>
+      </View>
+      <Progress.Bar
+        progress={progress}
+        width={width - horizontalScale(48)}
+        height={3}
+        color={isSuccess ? '#024324' : '#851D41'}
+        borderColor="transparent"
+      />
+    </Animated.View>
+  );
+};
+
+export default Toast;

package/src/components/toast/index.ts

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

package/src/index.ts

@@ -17,3 +17,8 @@ export {default as StarRating} from './components/rating';
 export {default as Tabs} from './components/tabs';
 export {default as Tags} from './components/tags';
 export {default as ToggleButton} from './components/toggleButton';
+export {default as Accordion} from './components/accordion';
+export {default as Toast} from './components/toast';
+export {default as CustomSearchBar} from './components/customSearchBar';
+export {default as CustomHeader} from './components/customHeader';
+export {default as SwipableList} from './components/swipableList';

package/src/theme/fonts.ts

@@ -16,12 +16,12 @@ const createFontStyle = (
 });
 
 export const meraasActivFontfamily: TextStyle = {
-  fontFamily: 'MeraasAktiv_Rg'
-}
+  fontFamily: 'MeraasAktiv_Rg',
+};
 
 export const serifActivFontfamily: TextStyle = {
-  fontFamily: 'PT Serif'
-}
+  fontFamily: 'PT Serif',
+};
 
 export const FONT_STYLES: FontStyles = {
   // Bold headding styles

package/src/utils/stylehelper.ts

@@ -10,4 +10,4 @@ const verticalScale = (size: number) => (height / guidelineBaseHeight) * size;
 const moderateScale = (size: number, factor = 0.5) =>
   size + (horizontalScale(size) - size) * factor;
 
-export {horizontalScale, verticalScale, moderateScale};
+export {horizontalScale, verticalScale, moderateScale, width, height};

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

@@ -1,61 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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.tsx

@@ -1,156 +0,0 @@
-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;