dhre-ui-kit 0.0.2 → 0.0.4

package/src/components/customText/CustomText.tsx

@@ -9,17 +9,17 @@ interface CustomTextProps extends TextProps {
   text: string;
   variant: keyof typeof FONT_STYLES | string;
   style?: TextStyle;
-  textColor?:string
+  textColor?: string;
 }
 
 const CustomText: React.FC<CustomTextProps> = ({
   text,
   style,
   variant,
-  textColor='SURFACE_STATIC',
+  textColor = 'SURFACE_STATIC',
   ...props
 }) => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
   return (
     <CustomTypography
       variant={variant}

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),
+  },
+});

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/ThemeContext.tsx

@@ -1,5 +1,4 @@
 import React, {createContext, useContext, ReactNode} from 'react';
-
 import {useSelector} from 'react-redux';
 import theme from './themes';
 
@@ -13,9 +12,10 @@ interface ThemeProviderProps {
   children: ReactNode;
 }
 
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-    // const mode = useSelector((state: any) => state.theme.theme);
-    const mode = 'light'
+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'
   // Filter the theme based on the mode (light or dark)
   const filteredTheme = Object.keys(theme).reduce((acc, key) => {
     acc[key] = theme[key][mode];
@@ -23,12 +23,12 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   }, {} as Record<string, string>);
 
   return (
-    <ThemeContext.Provider value={{ theme: filteredTheme }}>
+    <ThemeContext.Provider value={{theme: filteredTheme}}>
       {children}
     </ThemeContext.Provider>
   );
 };
- 
+
 export const useTheme = (): ThemeContextType => {
   const context = useContext(ThemeContext);
   if (context === undefined) {

package/src/theme/fonts.ts

@@ -15,6 +15,14 @@ const createFontStyle = (
   fontFamily,
 });
 
+export const meraasActivFontfamily: TextStyle = {
+  fontFamily: 'MeraasAktiv_Rg',
+};
+
+export const serifActivFontfamily: TextStyle = {
+  fontFamily: 'PT Serif',
+};
+
 export const FONT_STYLES: FontStyles = {
   // Bold headding styles
   H1_BOLD: createFontStyle('MeraasAktiv_Bd', 40, 56),

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',
-  },
-});