dhre-ui-kit 0.0.94 → 0.0.96

package/src/components/autoOtpReader/AutoOtpReader.test.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
-import AutoOtpReader from './AutoOtpReader';
-import RNOtpVerify from 'react-native-otp-verify';
-import {isAndroid} from '../../utils/deviceUtils';
-
-jest.mock('../../utils/deviceUtils', () => ({
-  isAndroid: jest.fn(),
-}));
-
-const mockOnOtpDetected = jest.fn();
-const mockOnHashGenerated = jest.fn();
-
-describe('AutoOtpReader', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    (isAndroid as jest.Mock).mockReturnValue(true);
-  });
-
-  it('should start listening for OTP on mount and generate hash', async () => {
-    const otpMessage = 'Your OTP is 123456. Hash: xyz123';
-    const generatedHash = 'hash123';
-
-    (RNOtpVerify.getOtp as jest.Mock).mockResolvedValueOnce(undefined);
-    (RNOtpVerify.getHash as jest.Mock).mockResolvedValueOnce(generatedHash);
-    (RNOtpVerify.addListener as jest.Mock).mockImplementation(callback => {
-      callback(otpMessage);
-    });
-    render(
-      <AutoOtpReader
-        onOtpDetected={mockOnOtpDetected}
-        onHashGenerated={mockOnHashGenerated}
-      />,
-    );
-    await new Promise(r => setTimeout(r, 0));
-    expect(RNOtpVerify.getOtp).toHaveBeenCalled();
-    expect(RNOtpVerify.addListener).toHaveBeenCalled();
-    expect(mockOnOtpDetected).toHaveBeenCalledWith('123456');
-  });
-
-  it('should not call onHashGenerated if hash generation fails', async () => {
-    (RNOtpVerify.getOtp as jest.Mock).mockResolvedValueOnce(undefined);
-    (RNOtpVerify.getHash as jest.Mock).mockRejectedValueOnce(
-      new Error('Hash generation error'),
-    );
-
-    render(
-      <AutoOtpReader
-        onOtpDetected={mockOnOtpDetected}
-        onHashGenerated={mockOnHashGenerated}
-      />,
-    );
-    await new Promise(r => setTimeout(r, 0));
-    expect(mockOnHashGenerated).not.toHaveBeenCalled();
-  });
-});

package/src/components/autoOtpReader/AutoOtpReader.tsx

@@ -1,79 +0,0 @@
-import React, {useCallback, useEffect} from 'react';
-import {Keyboard} from 'react-native';
-import RNOtpVerify from 'react-native-otp-verify';
-import {isAndroid} from '../../utils/deviceUtils';
-import {stringLengthRegex} from '../../utils/regex';
-
-/**
- * Interface for the props of the AutoOtpReader component.
- */
-interface AutoOtpReaderProps {
-  onOtpDetected: (otp: string) => void;
-  onHashGenerated?: (hash: string) => void;
-}
-
-/**
- * AutoOtpReader component to automatically fetch OTP from the message for Android devices.
- *
- * - Generates a Hash using RNOtpVerify.getHash().
- * - Shares this Hash using an API request with OTP API.
- * - Appends this hash to the OTP message.
- * - Once the OTP message is received on the device, based on the matching hash, contents of the message will be copied to the OTP boxes.
- *
- * In iOS, use textContentType="oneTimeCode" for OTP autofill.
- *
- * @param props The props for the component.
- * @returns A null component as it only handles side effects.
- */
-const AutoOtpReader: React.FC<AutoOtpReaderProps> = ({
-  onOtpDetected,
-  onHashGenerated,
-}) => {
-  const otpHandler = useCallback(
-    (message: string) => {
-      if (message) {
-        try {
-          const code = message.match(stringLengthRegex);
-          if (code) {
-            onOtpDetected(code[0]);
-          }
-        } catch (error) {
-          console.log('ERROR::', error);
-        } finally {
-          RNOtpVerify.removeListener();
-          Keyboard.dismiss();
-        }
-      }
-    },
-    [onOtpDetected],
-  );
-
-  const startListeningForOtp = useCallback(() => {
-    RNOtpVerify.getOtp()
-      .then(() => RNOtpVerify.addListener(otpHandler))
-      .catch(error => console.log(error));
-  }, [otpHandler]);
-
-  useEffect(() => {
-    if (isAndroid()) {
-      startListeningForOtp();
-    }
-    return () => RNOtpVerify.removeListener();
-  }, [startListeningForOtp]);
-
-  useEffect(() => {
-    if (isAndroid()) {
-      RNOtpVerify.getHash()
-        .then(hash => {
-          if (hash && hash.length > 0 && onHashGenerated) {
-            onHashGenerated(hash[0]);
-          }
-        })
-        .catch(error => console.log(error));
-    }
-  }, [onHashGenerated]);
-
-  return null;
-};
-
-export default AutoOtpReader;

package/src/components/autoOtpReader/index.ts

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

package/src/components/badge/Badge.styles.ts

@@ -1,20 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
-import {DHRE_COLORS_ALERT, DHRE_COLORS_TEXT} from '../../theme/colors';
-const styles = StyleSheet.create({
-  badge: {
-    backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
-    borderRadius: 15,
-    padding: verticalScale(4),
-  },
-  icon: {
-    marginHorizontal: horizontalScale(4),
-    height: verticalScale(16),
-    width: horizontalScale(16),
-  },
-  text: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-});
-
-export default styles;

package/src/components/badge/Badge.test.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react-native';
-import Badge from './Badge';
-import {useSelector} from 'react-redux';
-
-// Mock the useSelector hook
-
-describe('Badge component', () => {
-  beforeEach(() => {
-    (useSelector as unknown as jest.Mock).mockImplementation(() => {
-      return 'light';
-    });
-  });
-
-  it('renders text correctly', () => {
-    const text = 'Test Badge';
-    render(
-      <Badge
-        text={text}
-        handleIconPress={function (): void {
-          throw new Error('Function not implemented.');
-        }}
-      />,
-    );
-
-    const badgeText = screen.getByText(text);
-    expect(badgeText).toBeDefined();
-  });
-
-  it('renders icon correctly', () => {
-    render(
-      <Badge
-        handleIconPress={function (): void {
-          throw new Error('Function not implemented.');
-        }}
-      />,
-    );
-    // Your assertions here
-  });
-
-  it('renders with custom style', () => {
-    const customStyle = {backgroundColor: 'red'};
-    render(
-      <Badge
-        style={customStyle}
-        handleIconPress={function (): void {
-          throw new Error('Function not implemented.');
-        }}
-      />,
-    );
-
-    const badge = screen.getByTestId('BADGE');
-    expect(badge).toBeDefined();
-    // You can also check if the custom style is applied correctly
-    expect(badge.props.style).toContainEqual(customStyle);
-  });
-});

package/src/components/badge/Badge.tsx

@@ -1,48 +0,0 @@
-import React, {ReactElement} from 'react';
-import {View, ViewStyle, TextStyle, Pressable} from 'react-native';
-import commonStyles from '../../utils/commonStyles';
-import styles from './Badge.styles';
-import {SvgProps} from 'react-native-svg';
-import CustomTypography from '../customTypography/CustomTypography';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-
-interface BadgeProps {
-  text?: string;
-  style?: ViewStyle;
-  iconName?: ReactElement<SvgProps>;
-  textStyle?: TextStyle;
-  iconStyle?: ViewStyle;
-  handleIconPress: () => void;
-}
-
-const Badge: React.FC<BadgeProps> = ({
-  text,
-  style,
-  iconName,
-  textStyle,
-  iconStyle,
-  handleIconPress,
-}) => {
-  return (
-    <Pressable
-      style={[styles.badge, commonStyles.centerRow, style]}
-      testID="BADGE"
-      onPress={handleIconPress}>
-      {iconName && (
-        <View style={[styles.icon, iconStyle]}>
-          {React.cloneElement(iconName)}
-        </View>
-      )}
-
-      {text && (
-        <CustomTypography
-          variant="B3semiBold"
-          style={[styles.text, textStyle]}
-          text={text}
-        />
-      )}
-    </Pressable>
-  );
-};
-
-export default withThemeProvider(Badge);

package/src/components/badge/index.ts

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

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

@@ -1,23 +0,0 @@
-import {TextStyle, ViewStyle} from 'react-native';
-
-export interface BottomDrawerProps {
-  isModalVisible: boolean;
-  toggleModal: () => void;
-  isFullScreen?: boolean;
-  children: React.ReactNode;
-  title: string;
-  testID?: string;
-  style?: ViewStyle;
-  modalContainerStyle?: ViewStyle;
-  blurAmount?: number;
-  blurViewStyle?: ViewStyle;
-  showBlurView?: boolean;
-  leftIcon?: React.ReactElement;
-  rightIcon?: React.ReactElement;
-  showLeftIcon?: boolean;
-  showRightIcon?: boolean;
-  onLeftIconPress?: () => void;
-  titleStyle?: TextStyle;
-  titleVariant?: string;
-  showHeader?: boolean;
-}

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

@@ -1,47 +0,0 @@
-import {
-  horizontalScale,
-  moderateScale,
-  verticalScale,
-} from '../../utils/stylehelper';
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-  blurView: {
-    ...StyleSheet.absoluteFillObject,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-  },
-  modalContainer: {
-    flex: 0.5,
-    backgroundColor: '#000',
-    paddingTop: moderateScale(8),
-    paddingHorizontal: moderateScale(16),
-    borderTopLeftRadius: moderateScale(22),
-    borderTopRightRadius: moderateScale(22),
-  },
-  separator: {
-    height: verticalScale(3),
-    width: horizontalScale(32),
-    alignSelf: 'center',
-    backgroundColor: '#A7A7A7',
-    borderRadius: moderateScale(25),
-  },
-  headerContainer: {
-    flexDirection: 'row',
-    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.test.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import {Text} from 'react-native';
-import {it} from '@jest/globals';
-import {render} from '@testing-library/react-native';
-import BottomDrawer from './BottomDrawer';
-
-const mockProps = {
-  isModalVisible: true,
-  toggleModal: jest.fn(),
-  children: <Text>Mock Child</Text>,
-  title: 'Test Title',
-};
-
-describe('Bottom Drawer Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(<BottomDrawer {...mockProps} />);
-    expect(getByTestId('BOTTOM-DRAWER')).toBeTruthy();
-  });
-});

package/src/components/bottomDrawer/BottomDrawer.tsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import {View, Modal, KeyboardAvoidingView, Platform} from 'react-native';
-import {PanGestureHandler} from 'react-native-gesture-handler';
-import {BlurView} from '@react-native-community/blur';
-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,
-  children,
-  title,
-  testID = 'BOTTOM-DRAWER',
-  style,
-  modalContainerStyle,
-  blurAmount = 10,
-  blurViewStyle,
-  showBlurView = true,
-  showLeftIcon = false,
-  showRightIcon = true,
-  leftIcon = <ArrowLeft />,
-  rightIcon = <CrossIcon />,
-  onLeftIconPress,
-  titleStyle,
-  titleVariant = 'B2_REGULAR',
-  showHeader = true,
-}) => {
-  const onSwipDown = (event: {nativeEvent: {translationY: number}}) => {
-    const {translationY} = event.nativeEvent;
-    if (translationY > 50) {
-      toggleModal();
-    }
-  };
-
-  return (
-    <Modal
-      animationType="slide"
-      transparent={true}
-      visible={isModalVisible}
-      onRequestClose={toggleModal}>
-      <PanGestureHandler onGestureEvent={onSwipDown}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          style={{flex: 1}}>
-          <View style={[styles.mainContainer, style]} testID={testID}>
-            {showBlurView ? (
-              <BlurView
-                style={[styles.blurView, blurViewStyle]}
-                blurType="light"
-                blurAmount={blurAmount}
-              />
-            ) : null}
-            <View style={[styles.modalContainer, modalContainerStyle]}>
-              {showHeader && (
-                <>
-                  <View style={styles.separator} />
-                  <View style={styles.headerContainer}>
-                    {showLeftIcon &&
-                      React.cloneElement(leftIcon, {
-                        width: moderateScale(24),
-                        height: moderateScale(24),
-                        style: styles.leftIconStyle,
-                        onPress: onLeftIconPress,
-                      })}
-                    <CustomTypography
-                      variant={titleVariant}
-                      text={title}
-                      style={{...styles.title, ...titleStyle}}
-                    />
-                    {showRightIcon &&
-                      React.cloneElement(rightIcon, {
-                        width: moderateScale(24),
-                        height: moderateScale(24),
-                        style: styles.rightIconStyle,
-                        onPress: toggleModal,
-                      })}
-                  </View>
-                </>
-              )}
-              {children}
-            </View>
-          </View>
-        </KeyboardAvoidingView>
-      </PanGestureHandler>
-    </Modal>
-  );
-};
-
-export default BottomDrawer;

package/src/components/bottomDrawer/index.ts

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

package/src/components/button/Button.interface.ts

@@ -1,19 +0,0 @@
-import {ReactElement} from 'react';
-import {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {SvgProps} from 'react-native-svg';
-export interface CustomButtonProps {
-  title: string;
-  onPress: () => void;
-  containerStyle?: StyleProp<ViewStyle>;
-  textStyle?: TextStyle;
-  leftIcon?: ReactElement<SvgProps>;
-  rightIcon?: ReactElement<SvgProps>;
-  iconStyle?: ViewStyle;
-  titleColor?: string;
-  titleVariant?: string;
-  imagePosition?: 'left' | 'right';
-  testID?: string;
-  disabled?: boolean;
-  disabledColor?: string;
-  disableButtonTitleColor?: string;
-}

package/src/components/button/Button.styles.ts

@@ -1,78 +0,0 @@
-import {
-  DHRE_COLORS_TEXT,
-  DHRE_COLORS_BG,
-  DHRE_COLORS_ALERT,
-  DHRE_COLORS_PRIMARY,
-} from '../../theme/colors';
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    marginHorizontal: horizontalScale(16),
-  },
-  button: {
-    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
-    borderRadius: 50,
-    paddingVertical: verticalScale(4),
-    width: '100%',
-    paddingHorizontal: horizontalScale(8),
-    alignItems: 'center',
-  },
-  directionStyle: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconStyle: {
-    height: verticalScale(24),
-    width: horizontalScale(24),
-  },
-  primary: {
-    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-  secondary: {
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-    borderColor: DHRE_COLORS_BG.DH_GREY1,
-    borderWidth: 1,
-  },
-  disable: {
-    backgroundColor: DHRE_COLORS_BG.DH_LINE_GREY_0,
-  },
-  tertiary: {
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-  functionPrimary: {
-    backgroundColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE,
-  },
-  functionSecondary: {
-    backgroundColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE_0,
-    borderColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE,
-    borderWidth: 1,
-  },
-  functionNotice: {
-    backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_900,
-  },
-  primaryText: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-  secondaryText: {
-    color: DHRE_COLORS_TEXT.DH_BLACK,
-  },
-  disableText: {
-    color: DHRE_COLORS_TEXT.DH_TEXTDISABLED,
-  },
-  tertiaryText: {
-    color: DHRE_COLORS_PRIMARY.DH_RED_100,
-  },
-  functionPrimaryText: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-  functionSecondaryText: {
-    color: DHRE_COLORS_ALERT.DH_ALERT_ORANGE,
-  },
-  functionNoticeText: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-});
-export default styles;

package/src/components/button/Button.test.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import {it} from '@jest/globals';
-import {render} from '@testing-library/react-native';
-import Button from './Button';
-
-const customStyle = {backgroundColor: 'red', padding: 20};
-
-const mockProps = {
-  onPress: jest.fn(),
-  title: 'Title',
-  buttonType: 'Primary',
-  buttonStyle: customStyle,
-  titleStyle: customStyle,
-  iconShown: true,
-  iconStyles: customStyle,
-  testID: 'CUSTOM-BUTTONS',
-  titleShown: true,
-  variant: 'H1bold',
-};
-
-const mockPropsDisable = {
-  onPress: jest.fn(),
-  title: 'Title',
-  buttonType: 'Primary',
-  buttonStyle: customStyle,
-  titleStyle: customStyle,
-  iconShown: false,
-  iconStyles: customStyle,
-  testID: 'CUSTOM-BUTTONS',
-  titleShown: false,
-  variant: 'H1bold',
-};
-
-describe('Button Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(<Button {...mockProps} />);
-    expect(getByTestId('CUSTOM-BUTTONS')).toBeTruthy();
-  });
-  it('Component renders correctly When title shown false', () => {
-    const {getByTestId} = render(<Button {...mockPropsDisable} />);
-    expect(getByTestId('CUSTOM-BUTTONS')).toBeTruthy();
-  });
-});

package/src/components/button/Button.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import {StyleSheet, View, Pressable} from 'react-native';
-import CustomText from '../customText';
-import {useTheme} from '../../theme/ThemeContext';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-import {CustomButtonProps} from './Button.interface';
-
-const CustomButton = ({
-  title,
-  testID,
-  onPress,
-  containerStyle,
-  textStyle,
-  leftIcon,
-  rightIcon,
-  iconStyle,
-  titleColor,
-  titleVariant = 'L2_REGULAR',
-  imagePosition = 'right',
-  disabled = false,
-  disabledColor,
-  disableButtonTitleColor,
-}: CustomButtonProps) => {
-  const {theme} = useTheme();
-  return (
-    <Pressable
-      testID={testID}
-      style={[
-        styles.buttonContainer,
-        containerStyle,
-        disabled
-          ? {
-              backgroundColor: disabledColor
-                ? disabledColor
-                : theme.SURFACE_DISABLE,
-            }
-          : {},
-      ]}
-      onPress={onPress}
-      disabled={disabled}>
-      {imagePosition === 'left' && leftIcon && (
-        <View style={iconStyle}>
-          {React.cloneElement(leftIcon, {width: 20, height: 20})}
-        </View>
-      )}
-      <CustomText
-        text={title}
-        variant={titleVariant}
-        style={[
-          textStyle,
-          disabled
-            ? {
-                color: disableButtonTitleColor
-                  ? disableButtonTitleColor
-                  : theme.CONTENT_DISABLE,
-              }
-            : {},
-        ]}
-        textColor={titleColor}
-      />
-
-      {imagePosition === 'right' && rightIcon && (
-        <View style={iconStyle}>
-          {React.cloneElement(rightIcon, {width: 20, height: 20})}
-        </View>
-      )}
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  buttonContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-    backgroundColor: '#000000',
-    borderRadius: 8,
-    justifyContent: 'center',
-  },
-});
-
-export default withThemeProvider(CustomButton);

package/src/components/button/index.ts

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