dhre-ui-kit 0.0.95 → 0.0.96

package/src/components/otp/index.tsx

@@ -1,166 +0,0 @@
-import React, {useEffect, useState, useRef} from 'react';
-import {
-  View,
-  TextInput,
-  Pressable,
-  NativeSyntheticEvent,
-  TextInputKeyPressEventData,
-} from 'react-native';
-import {FontStyle} from '../../utils/appEnum';
-import {styles} from './styles';
-import {IProps, OTPInputHandle} from './otp.interface';
-import CustomTypography from '../customTypography';
-import {useTheme} from '../../theme/ThemeContext';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-
-const OTPInput = React.forwardRef<OTPInputHandle, IProps>(
-  (
-    {
-      length = 4,
-      onComplete,
-      resendOTP,
-      errorMessage,
-      testId = '',
-      otpContainerStyle,
-    },
-    ref,
-  ) => {
-    const [otp, setOTP] = useState('');
-    const [isResendOtpEnable, setIsResendOtpEnable] = useState(false);
-    const [activeInput, setActiveInput] = useState<number | null>(null);
-    const {theme} = useTheme();
-    const refs = useRef<(TextInput | null)[]>([]);
-    refs.current = Array(length)
-      .fill(0)
-      .map((_, index) => refs.current[index] || null);
-
-    useEffect(() => {
-      enableResendOtp();
-    }, []);
-
-    const onClickResendOTP = () => {
-      setIsResendOtpEnable(false);
-      enableResendOtp();
-      resendOTP?.();
-    };
-
-    const enableResendOtp = () => {
-      setTimeout(() => {
-        setIsResendOtpEnable(true);
-      }, 5000);
-    };
-
-    React.useImperativeHandle(ref, () => ({
-      reset() {
-        setOTP('');
-      },
-    }));
-
-    const handleChange = (index: number, value: string) => {
-      const regex = /^\d+$/;
-      if (
-        value.length === 1 &&
-        regex.test(value) &&
-        index >= 0 &&
-        index < length
-      ) {
-        const newOTP = `${otp}${value}`;
-        setOTP(newOTP);
-        refs.current[index + 1]?.focus();
-      } else if (value.length === 0 && index > 0) {
-        const newOTP = otp.slice(0, -1);
-        setOTP(newOTP);
-        refs.current[index - 1]?.focus();
-      } else {
-        const newOTP = otp.slice(0, -1);
-        setOTP(newOTP);
-        refs.current[index]?.focus();
-      }
-    };
-
-    const handleKeyPress = (
-      e: NativeSyntheticEvent<TextInputKeyPressEventData>,
-      index: number,
-    ) => {
-      if (e.nativeEvent.key === 'Backspace' && index > 0) {
-        refs.current[index - 1]?.focus();
-      }
-    };
-
-    useEffect(() => {
-      if (otp.length === length) {
-        onComplete?.(otp);
-      }
-    }, [otp]);
-
-    return (
-      <View style={{...otpContainerStyle}} data-testid={testId}>
-        <CustomTypography
-          text={'OTP'}
-          variant={FontStyle.B4_REGULAR}
-          style={{
-            color: otp?.length ? theme.CONTENT_PRIMARY : theme.CONTENT_SECONDRY,
-            textAlign: 'left',
-          }}
-        />
-        <View style={{...styles.textInputContainer}}>
-          {Array.from({length}).map((_, index) => (
-            <TextInput
-              key={index?.toString()}
-              style={{
-                ...styles.textInputStyle,
-                color: theme.CONTENT_PRIMARY,
-                borderColor: errorMessage
-                  ? theme.ERROR
-                  : otp.length === length
-                  ? theme.SUCCESS
-                  : activeInput === index
-                  ? theme.BORDER_INVERTED
-                  : theme.BORDER_PRIMARY,
-              }}
-              onFocus={() => setActiveInput(index)}
-              onBlur={() => setActiveInput(null)}
-              onKeyPress={e => handleKeyPress(e, index)}
-              onChangeText={text => handleChange(index, text)}
-              value={otp[index] ? '●' : ''}
-              placeholder=""
-              keyboardType="numeric"
-              ref={el => (refs.current[index] = el)}
-              returnKeyType={otp.length === length ? 'done' : 'next'}
-              selectionColor={theme.CONTENT_PRIMARY}
-            />
-          ))}
-        </View>
-
-        <View style={styles.resendOtpContainer}>
-          {errorMessage ? (
-            <CustomTypography
-              text={errorMessage}
-              variant={FontStyle.L2_REGULAR}
-              style={{
-                color: theme.ERROR,
-              }}
-            />
-          ) : (
-            <View />
-          )}
-          <Pressable onPress={onClickResendOTP} disabled={!isResendOtpEnable}>
-            <CustomTypography
-              text={'Resend OTP'}
-              variant={FontStyle.L2_REGULAR}
-              style={{
-                textDecorationLine: 'underline',
-                color: isResendOtpEnable
-                  ? theme.CONTENT_PRIMARY
-                  : theme.CONTENT_DISABLE,
-              }}
-            />
-          </Pressable>
-        </View>
-      </View>
-    );
-  },
-);
-
-export default withThemeProvider(OTPInput);
-OTPInput.displayName = 'OTPInput';

package/src/components/otp/otp.interface.ts

@@ -1,14 +0,0 @@
-import {ViewStyle} from 'react-native';
-
-export interface IProps {
-  length?: number;
-  onComplete?: (otp?: string) => void;
-  errorMessage?: string;
-  testId?: string;
-  otpContainerStyle?: ViewStyle;
-  resendOTP?: () => void;
-}
-
-export type OTPInputHandle = {
-  reset: () => void;
-};

package/src/components/otp/styles.ts

@@ -1,29 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {verticalScale, moderateScale} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  textInputContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: verticalScale(8),
-  },
-  textInputStyle: {
-    height: verticalScale(48),
-    width: moderateScale(72),
-    borderRadius: moderateScale(8),
-    borderWidth: 1,
-    textAlign: 'center',
-    fontSize: moderateScale(12),
-  },
-  resendOtpContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginTop: verticalScale(12),
-  },
-  resendOtpTextEnable: {
-    textDecorationLine: 'underline',
-  },
-});
-
-export {styles};

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

@@ -1,12 +0,0 @@
-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 source={{uri: `data:application/pdf;base64,${pdfResponse}`}} />,
-    );
-  });
-});

package/src/components/pdfView/PdfView.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import Pdf, {PdfProps} from 'react-native-pdf';
-
-const PdfView: React.FC<PdfProps> = props => {
-  return <Pdf {...props} />;
-};
-
-export default PdfView;

package/src/components/pdfView/index.ts

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

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

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

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

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

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

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

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

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

@@ -1,78 +0,0 @@
-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();
-  });
-});

package/src/components/progressBar/ProgressBar.tsx

@@ -1,120 +0,0 @@
-import React, {useEffect} from 'react';
-import {StyleSheet, TextStyle, View} from 'react-native';
-import * as Progress from 'react-native-progress';
-import {ShapeType} from '../../utils/appEnum';
-import CustomText from '../customText';
-
-interface CustomProgressBarProps {
-  value: number; // Current progress value (0 to 100)
-  type: ShapeType.LINE | ShapeType.CIRCLE; // Type of progress bar
-  width: number; // Width of the progress bar
-  height?: number; // Optional height (default behavior depends on library)
-  fillColor: string; // Color of the progress fill
-  unfilledColor: string; // Color of the unfilled area
-  borderWidth?: number; // Optional border width
-  borderRadius?: number; // Optional border radius
-  circleSize?: number; // Size of the circle progress bar (if type is CIRCLE)
-  thickness?: number; // Thickness of the circle progress bar (if type is CIRCLE)
-  progress: number; // filled area
-  setProgress: React.Dispatch<React.SetStateAction<number>>;
-  increment?: number; // Optional increment value for progress update
-  interval?: number; // Optional interval time (ms) for progress update
-  percentageText?: string;
-  valueTextStyle?: TextStyle;
-}
-
-const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
-  value,
-  type,
-  width,
-  height,
-  fillColor,
-  unfilledColor,
-  borderWidth,
-  borderRadius,
-  circleSize,
-  thickness,
-  progress,
-  setProgress,
-  increment = 1, // Default increment to 1
-  interval = 100, // Default interval to 100ms
-  percentageText,
-  valueTextStyle,
-}) => {
-  useEffect(() => {
-    const progressInterval = setInterval(() => {
-      if (progress < value) {
-        setProgress((prevProgress: number) => prevProgress + increment);
-      } else {
-        clearInterval(progressInterval);
-      }
-    }, interval);
-
-    return () => clearInterval(progressInterval);
-  }, [progress, value, increment, interval]);
-
-  const showPercentage = () => {
-    return (
-      <View style={styles.flexDirection}>
-        <CustomText
-          text={`${value}%`}
-          variant="B1_REGULAR"
-          textColor="CONTENT_PRIMARY"
-          style={valueTextStyle}
-        />
-        {percentageText ? (
-          <CustomText
-            text={percentageText}
-            variant="L3_REGULAR"
-            textColor="CONTENT_PRIMARY"
-          />
-        ) : null}
-      </View>
-    );
-  };
-  const renderProgressBar = () => {
-    switch (type) {
-      case ShapeType.LINE:
-        return (
-          <Progress.Bar
-            progress={progress / 100}
-            width={width}
-            height={height}
-            color={fillColor}
-            unfilledColor={unfilledColor}
-            borderWidth={borderWidth}
-            borderRadius={borderRadius}
-            testID="custom-progress-bar-line"
-          />
-        );
-      case ShapeType.CIRCLE:
-        return (
-          <Progress.Circle
-            progress={progress / 100}
-            size={circleSize}
-            thickness={thickness}
-            color={fillColor}
-            unfilledColor={unfilledColor}
-            borderWidth={borderWidth}
-            showsText={true}
-            formatText={showPercentage}
-            testID="custom-progress-bar-circle"
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
-  return <View testID="custom-progress-bar">{renderProgressBar()}</View>;
-};
-
-const styles = StyleSheet.create({
-  flexDirection: {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default CustomProgressBar;

package/src/components/progressBar/index.ts

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

package/src/components/property360View/Property360View.test.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
-import Property360View from './Property360View';
-import WebView from 'react-native-webview';
-
-describe('Property360View Component', () => {
-  it('should render the WebView with the correct URI', () => {
-    const imageURI = 'https://example.com/360image.jpg';
-    const {getByTestId} = render(<Property360View imageURI={imageURI} />);
-    const propertyView = getByTestId('PROPERTY_360_VIEW');
-    expect(propertyView).toBeTruthy();
-    expect(WebView).toHaveBeenCalledWith(
-      expect.objectContaining({
-        source: {uri: imageURI},
-      }),
-      {},
-    );
-  });
-  it('should apply the commonStyles.flexOne style to the View and WebView components', () => {
-    const imageURI = 'https://example.com/360image.jpg';
-    const {getByTestId} = render(<Property360View imageURI={imageURI} />);
-    expect(getByTestId('PROPERTY_360_VIEW')).toBeTruthy();
-  });
-});

package/src/components/property360View/Property360View.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import WebView from 'react-native-webview';
-import commonStyles from '../../utils/commonStyles';
-
-const Property360View = ({imageURI}: {imageURI: string}) => {
-  return (
-    <View style={commonStyles.flexOne} testID="PROPERTY_360_VIEW">
-      <WebView
-        source={{
-          uri: imageURI,
-        }}
-        style={commonStyles.flexOne}
-      />
-    </View>
-  );
-};
-
-export default Property360View;

package/src/components/property360View/index.ts

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

package/src/components/rating/index.ts

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

package/src/components/rating/rating.styles.ts

@@ -1,13 +0,0 @@
-import {horizontalScale} from '../../utils/stylehelper';
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  star: {
-    marginHorizontal: horizontalScale(2),
-  },
-});
-export default styles;