dhre-ui-kit 0.0.77 → 0.0.78

package/package.json

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

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/textInput/Textinput.tsx

@@ -22,19 +22,20 @@ interface CommonTextInputProps {
   editable?: boolean;
 }
 
-const CommonTextInput: React.FC<CommonTextInputProps> = props => {
-  const {
-    value,
-    isSecureTextEntry = false,
-    keyboardType = 'default',
-    placeholderText,
-    activeBorderColor = theme.CONTENT_PRIMARY['light'],
-    inactiveBorderColor = theme.BORDER_PRIMARY['light'],
-    inputStyle,
-    maxLength,
-    errorMessage,
-    editable = true,
-  } = props;
+const CommonTextInput: React.FC<CommonTextInputProps> = ({
+  label,
+  value,
+  onChangeText,
+  isSecureTextEntry = false,
+  keyboardType = 'default',
+  placeholderText,
+  activeBorderColor = theme.CONTENT_PRIMARY['light'],
+  inactiveBorderColor = theme.BORDER_PRIMARY['light'],
+  inputStyle,
+  maxLength,
+  errorMessage,
+  editable = true,
+}) => {
   return (
     <>
       <TextInput
@@ -43,7 +44,9 @@ const CommonTextInput: React.FC<CommonTextInputProps> = props => {
           ...styles.outlineStyle,
           borderColor: value?.length ? activeBorderColor : inactiveBorderColor,
         }}
+        label={label}
         value={value}
+        onChangeText={onChangeText}
         secureTextEntry={isSecureTextEntry}
         keyboardType={keyboardType}
         theme={{colors: {primary: DHRE_COLORS_TEXT.DH_BLACK}}}
@@ -51,7 +54,6 @@ const CommonTextInput: React.FC<CommonTextInputProps> = props => {
         maxLength={maxLength}
         placeholder={placeholderText}
         editable={editable}
-        {...props}
       />
       {errorMessage ? (
         <CustomTypography