dhre-ui-kit 0.0.76 → 0.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/components/otp/index.tsx

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

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

@@ -0,0 +1,29 @@
+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/progressBar/ProgressBar.tsx

@@ -1,8 +1,8 @@
-import commonStyles from '../../utils/commonStyles';
 import React, {useEffect} from 'react';
-import {View} from 'react-native';
+import {StyleSheet, 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)
@@ -19,6 +19,7 @@ interface CustomProgressBarProps {
   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;
 }
 
 const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
@@ -36,6 +37,7 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
   setProgress,
   increment = 1, // Default increment to 1
   interval = 100, // Default interval to 100ms
+  percentageText
 }) => {
   useEffect(() => {
     const progressInterval = setInterval(() => {
@@ -49,6 +51,23 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
     return () => clearInterval(progressInterval);
   }, [progress, value, increment, interval]);
 
+  const showPercentage = () => {
+    return (
+      <View style={styles.flexDirection}>
+        <CustomText
+          text={`${value}%`}
+          variant="B1_REGULAR"
+          textColor="CONTENT_PRIMARY"
+        />
+        {percentageText ?
+        <CustomText
+          text={percentageText}
+          variant="L3_REGULAR"
+          textColor="CONTENT_PRIMARY"
+        />: null}
+      </View>
+    );
+  };
   const renderProgressBar = () => {
     switch (type) {
       case ShapeType.LINE:
@@ -74,7 +93,7 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
             unfilledColor={unfilledColor}
             borderWidth={borderWidth}
             showsText={true}
-            formatText={() => `${value}%`}
+            formatText={showPercentage}
             testID="custom-progress-bar-circle"
           />
         );
@@ -83,11 +102,15 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
     }
   };
 
-  return (
-    <View style={commonStyles.centeredContainer} testID="custom-progress-bar">
-      {renderProgressBar()}
-    </View>
-  );
+  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/stepper/index.tsx

@@ -0,0 +1,96 @@
+import {View} from 'react-native';
+import React from 'react';
+import {CircleTick} from '../../assets';
+import {styles} from './styles';
+import {IData, IProps, Status} from './stepper.interface';
+import {DHRE_COLORS_TEXT} from 'src/theme/colors';
+import {FontStyle} from 'src/utils/appEnum';
+import CustomTypography from '../customTypography';
+
+const Stepper = ({
+  containerStyle,
+  showStepCount = false,
+  showStatus = false,
+  data,
+}: IProps) => {
+  const renderCircleStyle = (status?: string) => {
+    if (status === Status.Active) {
+      return styles.activeStepCircle;
+    } else if (status === Status.Inactive) {
+      return styles.inactiveStepCircle;
+    } else if (status === Status.Completed) {
+      return styles.completeStepCircle;
+    } else {
+      return styles.stepCountCircle;
+    }
+  };
+  const renderLableStyle = (status?: string) => {
+    if (status === Status.Active) {
+      return styles.activeStepLabel;
+    } else if (status === Status.Inactive) {
+      return styles.inactiveStepLabel;
+    } else if (status === Status.Completed) {
+      return styles.completeStepLabel;
+    } else {
+      return styles.countStepLabel;
+    }
+  };
+
+  const renderDividerStyle = (status?: string) => {
+    if (status === Status.Active) {
+      return styles.activeStepDivider;
+    } else if (status === Status.Inactive) {
+      return styles.inactiveStepDivider;
+    } else if (status === Status.Completed) {
+      return styles.completeStepDivider;
+    } else {
+      return styles.countStepDivider;
+    }
+  };
+
+  return (
+    <View style={{...styles.stepperContainer, ...containerStyle}}>
+      {data?.map((item: IData, index) => {
+        const stepCircleStyle = renderCircleStyle(item?.status);
+        const dividerStyle = renderDividerStyle(item?.status);
+        const labelStyle = renderLableStyle(item?.status);
+        const lastViewStyle =
+          index === data?.length - 1 ? styles.lastStepWrapper : null;
+        return (
+          <View
+            key={index?.toString()}
+            style={{...styles.stepperWrapper, ...lastViewStyle}}>
+            <View style={styles.stepperSeparatorContainer}>
+              <View style={{...stepCircleStyle}}>
+                {showStepCount && (
+                  <CustomTypography
+                    text={item?.step}
+                    variant={FontStyle.L2_REGULAR}
+                    style={{
+                      color: DHRE_COLORS_TEXT.DH_WHITE,
+                    }}
+                  />
+                )}
+                {showStatus && item?.status === Status.Completed && (
+                  <CircleTick />
+                )}
+              </View>
+              {index != data?.length - 1 && (
+                <View style={{...styles.separator, ...dividerStyle}} />
+              )}
+            </View>
+            <View style={styles.lableContainer}>
+              <CustomTypography
+                text={item?.label}
+                variant={FontStyle.L3_REGULAR}
+                style={labelStyle}
+              />
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+export default Stepper;

package/src/components/stepper/stepper.interface.ts

@@ -0,0 +1,24 @@
+import {ViewStyle} from 'react-native';
+
+type StatusType = 'Active' | 'Inactive' | 'Completed' | 'Rejected' | 'Count';
+
+export enum Status {
+  Active = 'Active',
+  Inactive = 'Inactive',
+  Completed = 'Completed',
+  Rejected = 'Rejected',
+  Count = 'Count',
+}
+
+export interface IData {
+  step: string;
+  label?: string;
+  status?: StatusType;
+}
+
+export interface IProps {
+  containerStyle?: ViewStyle;
+  showStepCount?: boolean;
+  showStatus?: boolean;
+  data: IData[];
+}

package/src/components/stepper/styles.ts

@@ -0,0 +1,93 @@
+import {StyleSheet} from 'react-native';
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+
+const styles = StyleSheet.create({
+  stepperContainer: {
+    flexDirection: 'row',
+    marginBottom: 24,
+    justifyContent: 'space-between',
+  },
+  stepperWrapper: {
+    flex: 1,
+    marginRight: 10,
+    overflow: 'hidden',
+  },
+  lastStepWrapper: {flex: 0.5},
+  stepperSeparatorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  activeStepCircle: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: '#000000',
+    justifyContent: 'center',
+  },
+  activeStepLabel: {
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+    marginTop: 11,
+  },
+  activeStepDivider: {
+    borderColor: '#686868',
+  },
+  inactiveStepCircle: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: '#A7A7A7',
+    justifyContent: 'center',
+  },
+  inactiveStepLabel: {
+    color: '#686868',
+    marginTop: 11,
+  },
+  inactiveStepDivider: {
+    borderColor: '#686868',
+  },
+  completeStepCircle: {
+    height: 24,
+    width: 24,
+    backgroundColor: '#00B578',
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  completeStepLabel: {
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+    marginTop: 11,
+  },
+  completeStepDivider: {
+    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
+    borderStyle: 'solid',
+  },
+  stepCountCircle: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#A7A7A7',
+    justifyContent: 'center',
+  },
+  countStepLabel: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+    marginTop: 11,
+  },
+  countStepDivider: {
+    borderColor: '#686868',
+  },
+  separator: {
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    width: '100%',
+    marginLeft: 10,
+  },
+  lableContainer: {width: 60},
+});
+
+export {styles};

package/src/index.ts

@@ -40,6 +40,8 @@ export {default as CustomSwitchBtn} from './components/customSwitchBtn';
 export {default as toastService} from './components/toast/ToastService';
 export {default as SingleSelectionTags} from './components/singleSelectionTag';
 export {default as CustomDocumentPicker} from './components/customDocumentPicker';
+export {default as OTP} from './components/otp';
+export {default as Stepper} from './components/stepper';
 export {FONT_STYLES} from './theme/fonts';
 export {FontStyle, Theme} from './utils/appEnum';