dhre-ui-kit 0.0.95 → 0.0.96

package/src/components/textInput/Textinput.tsx

@@ -1,120 +0,0 @@
-import React from 'react';
-import {Pressable, StyleSheet, ViewStyle} from 'react-native';
-import {TextInput} from 'react-native-paper';
-import {DHRE_COLORS_TEXT, DHRE_DEFAULT} from '../../theme/colors';
-import {verticalScale, moderateScale} from '../../utils/stylehelper';
-import CustomTypography from '../customTypography';
-import theme from '../../theme/themes';
-
-interface CommonTextInputProps {
-  label: string;
-  value?: string;
-  onChangeText: (text: string) => void;
-  placeholderText?: string;
-  isSecureTextEntry?: boolean;
-  activeBorderColor?: string;
-  inactiveBorderColor?: string;
-  borderRadius?: number;
-  inputStyle?: ViewStyle;
-  keyboardType?: 'default' | 'numeric' | 'email-address' | 'phone-pad';
-  maxLength?: number;
-  errorMessage?: string;
-  editable?: boolean;
-  textColor?: string;
-  labelColor?: string;
-  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
-  handlePress?: () => void;
-}
-
-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,
-  textColor = theme.CONTENT_PRIMARY['light'],
-  labelColor,
-  handlePress,
-  pointerEvents,
-}) => {
-  return (
-      <Pressable onPress={handlePress} style={styles.container}> 
-        <TextInput
-          mode="outlined"
-          outlineStyle={{
-            ...styles.outlineStyle,
-            borderColor: value?.length
-              ? activeBorderColor
-              : inactiveBorderColor,
-          }}
-          label={label}
-          value={value}
-          onChangeText={onChangeText}
-          secureTextEntry={isSecureTextEntry}
-          keyboardType={keyboardType}
-          theme={{
-            colors: {
-              primary: labelColor ? labelColor : DHRE_COLORS_TEXT.DH_BLACK,
-            },
-          }}
-          style={[errorMessage ? styles.errorInput : styles.input, inputStyle]}
-          maxLength={maxLength}
-          textColor={textColor}
-          placeholder={placeholderText}
-          editable={editable}
-          pointerEvents={pointerEvents}
-        />
-        {errorMessage ? (
-          <CustomTypography
-            variant={'L2_REGULAR'}
-            text={errorMessage ?? ''}
-            style={{
-              ...styles.errorStyle,
-              color: DHRE_DEFAULT.DH_SEMENTIC_ERROR,
-            }}
-          />
-        ) : null}
-      </Pressable> 
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-  },
-  touchable: {
-    width: '100%',
-  },
-
-  input: {
-    marginVertical: verticalScale(8),
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-    paddingVertical: 0,
-    height: verticalScale(48),
-    justifyContent: 'center',
-  },
-  errorInput: {
-    marginTop: verticalScale(12),
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-    paddingVertical: 0,
-    height: verticalScale(48),
-    justifyContent: 'center',
-  },
-  outlineStyle: {
-    borderWidth: 1,
-    height: verticalScale(48),
-    borderRadius: moderateScale(8),
-  },
-  errorStyle: {
-    marginTop: verticalScale(4),
-  },
-});
-
-export default CommonTextInput;

package/src/components/textInput/index.ts

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

package/src/components/toast/Toast.interface.ts

@@ -1,39 +0,0 @@
-export interface ToastRef {
-  showToast: (
-    message: string,
-    duration?: number,
-    isSuccess?: boolean,
-    buttonText?: string | null,
-    buttonAction?: (() => void) | null,
-  ) => void;
-}
-
-export type ShowToast = (
-  message: string,
-  duration?: number,
-  isSuccess?: boolean,
-  buttonText?: string | null,
-  buttonAction?: (() => void) | null,
-) => void;
-export interface ToastProps {}
-// ToastService.interface.ts
-export interface ToastRef {
-  showToast: (
-    message: string,
-    duration?: number,
-    isSuccess?: boolean,
-    buttonText?: string | null,
-    buttonAction?: (() => void) | null,
-  ) => void;
-}
-
-export interface ToastServiceInterface {
-  setRef: (ref: ToastRef | null) => void;
-  showToast: (
-    message: string,
-    duration?: number,
-    isSuccess?: boolean,
-    buttonText?: string | null,
-    buttonAction?: (() => void) | null,
-  ) => void;
-}

package/src/components/toast/Toast.styles.ts

@@ -1,41 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {
-  horizontalScale,
-  moderateScale,
-  verticalScale,
-  width,
-} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    alignSelf: 'center',
-    height: verticalScale(72),
-    width: width - horizontalScale(32),
-    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

@@ -1,13 +0,0 @@
-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', () => {
-    render(<Toast />);
-  });
-});

package/src/components/toast/Toast.tsx

@@ -1,115 +0,0 @@
-import React, {useEffect, useState, useRef} 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, width} from '../../utils/stylehelper';
-import {ToastRef, ShowToast, ToastProps} from './Toast.interface'; // Import the interfaces
-import styles from './Toast.styles';
-
-const Toast = React.forwardRef<ToastRef, ToastProps>((_props, ref) => {
-  const [visible, setVisible] = useState(false);
-  const [message, setMessage] = useState('');
-  const [isSuccess, setIsSuccess] = useState(true);
-  const [btnText, setBtnText] = useState<string | null>(null);
-  const [onBtnPress, setOnBtnPress] = useState<(() => void) | null>(null);
-  const [progress, setProgress] = useState(0);
-
-  const bottom = useRef(new Animated.Value(-80)).current;
-
-  const showToast: ShowToast = (
-    toastMessage,
-    duration = 3000,
-    success = true,
-    buttonText = null,
-    buttonAction = null,
-  ) => {
-    setMessage(toastMessage);
-    setIsSuccess(success);
-    setBtnText(buttonText);
-    setOnBtnPress(() => buttonAction);
-    setVisible(true);
-
-    Animated.timing(bottom, {
-      toValue: 20,
-      duration: 500,
-      useNativeDriver: false,
-    }).start();
-
-    setTimeout(() => {
-      hideToast();
-    }, duration);
-  };
-
-  const hideToast = () => {
-    Animated.timing(bottom, {
-      toValue: -80,
-      duration: 500,
-      useNativeDriver: false,
-    }).start(() => {
-      setVisible(false);
-      setMessage('');
-    });
-  };
-
-  const simulateProgress = () => {
-    setProgress(prev => (prev + 0.1 > 1 ? 1 : prev + 0.1));
-  };
-
-  useEffect(() => {
-    if (visible) {
-      setProgress(0);
-      const interval = setInterval(simulateProgress, 180);
-      return () => clearInterval(interval);
-    }
-  }, [visible]);
-
-  React.useImperativeHandle(ref, () => ({
-    showToast,
-  }));
-
-  return visible ? (
-    <Animated.View
-      style={[
-        styles.container,
-        {bottom},
-        {backgroundColor: isSuccess ? '#04743F' : '#DB3056'},
-      ]}
-      testID="TOAST">
-      <View style={styles.toastContainer}>
-        <View style={styles.innerContainer}>
-          {isSuccess ? <CircleTick /> : <CrossIcon />}
-          <CustomTypography
-            variant="L2_REGULAR"
-            text={message}
-            style={styles.messageText}
-          />
-          {btnText && (
-            <Pressable
-              style={styles.button}
-              onPress={onBtnPress || undefined}
-              testID="TOAST-BTN">
-              <CustomTypography
-                variant="L2_BOLD"
-                text={btnText}
-                style={styles.buttonText}
-              />
-            </Pressable>
-          )}
-        </View>
-      </View>
-      <Progress.Bar
-        progress={progress}
-        width={width - horizontalScale(48)}
-        height={3}
-        color={isSuccess ? '#024324' : '#851D41'}
-        borderColor="transparent"
-      />
-    </Animated.View>
-  ) : null;
-});
-
-// Set the display name for debugging purposes
-Toast.displayName = 'Toast';
-
-export default Toast;

package/src/components/toast/ToastService.ts

@@ -1,30 +0,0 @@
-import {ToastRef, ToastServiceInterface} from './Toast.interface';
-
-class ToastService implements ToastServiceInterface {
-  private toastRef: ToastRef | null = null;
-
-  setRef(ref: ToastRef | null) {
-    this.toastRef = ref;
-  }
-
-  showToast(
-    message: string,
-    duration: number = 3000,
-    isSuccess: boolean = true,
-    buttonText: string | null = null,
-    buttonAction: (() => void) | null = null,
-  ) {
-    if (this.toastRef) {
-      this.toastRef.showToast(
-        message,
-        duration,
-        isSuccess,
-        buttonText,
-        buttonAction,
-      );
-    }
-  }
-}
-
-const toastService = new ToastService();
-export default toastService;

package/src/components/toast/index.ts

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

package/src/components/toggleButton/ToggleButton.styles.ts

@@ -1,40 +0,0 @@
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    width: horizontalScale(70),
-    height: verticalScale(25),
-    borderRadius: 15,
-    justifyContent: 'center',
-  },
-  track: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    borderRadius: 15,
-  },
-  thumb: {
-    position: 'absolute',
-    width: horizontalScale(20),
-    height: verticalScale(20),
-    borderRadius: 16,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-    left: horizontalScale(2),
-  },
-  text: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-    textAlign: 'left',
-    marginHorizontal: horizontalScale(10),
-  },
-  textRight: {
-    textAlign: 'right',
-  },
-});
-export default styles;

package/src/components/toggleButton/ToggleButton.test.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import {render, screen, fireEvent} from '@testing-library/react-native';
-import CustomSwitch from './ToggleButton';
-
-describe('CustomSwitch', () => {
-  it('renders correctly with default type', () => {
-    const onValueChangeMock = jest.fn();
-    render(<CustomSwitch onValueChange={onValueChangeMock} value={false} />);
-
-    const switchElement = screen.getByTestId('custom-switch');
-    expect(switchElement).toBeTruthy();
-  });
-
-  it('renders correctly with custom type', () => {
-    const onValueChangeMock = jest.fn();
-    render(<CustomSwitch onValueChange={onValueChangeMock} value={true} />);
-
-    const switchElement = screen.getByTestId('custom-switch');
-    expect(switchElement).toBeTruthy();
-  });
-
-  it('toggles switch on press', () => {
-    const onValueChangeMock = jest.fn();
-    const {getByTestId} = render(
-      <CustomSwitch onValueChange={onValueChangeMock} value={false} />,
-    );
-
-    const switchElement = getByTestId('custom-switch');
-    fireEvent.press(switchElement);
-
-    expect(onValueChangeMock).toHaveBeenCalledWith(true);
-  });
-});

package/src/components/toggleButton/ToggleButton.tsx

@@ -1,78 +0,0 @@
-import React, {useState, useRef, useEffect} from 'react';
-import {View, Animated, Pressable} from 'react-native';
-import {DHRE_COLORS_ALERT, DHRE_COLORS_TEXT} from '../../theme/colors';
-import styles from './ToggleButton.styles';
-import CustomTypography from '../../components/customTypography/CustomTypography';
-import {
-  ToggleButtonType,
-  TextDirectType,
-  ToggleTextType,
-} from '../../utils/appEnum';
-interface CustomSwitchProps {
-  onValueChange: (value: boolean) => void;
-  value: boolean;
-  type?: ToggleButtonType;
-  trackWidth?: number;
-  width?: number;
-}
-
-const CustomSwitch: React.FC<CustomSwitchProps> = ({
-  onValueChange,
-  value,
-  type = ToggleButtonType.LARGE,
-  trackWidth = type !== ToggleButtonType.SMALL ? 35 : 15,
-  width = type !== ToggleButtonType.SMALL ? 60 : 40,
-}) => {
-  const [isOn, setIsOn] = useState(value);
-  const animatedValue = useRef(
-    new Animated.Value(value ? trackWidth : 0),
-  ).current;
-
-  useEffect(() => {
-    Animated.timing(animatedValue, {
-      toValue: isOn ? trackWidth : 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-  }, [isOn, animatedValue, trackWidth]);
-
-  const toggleSwitch = () => {
-    setIsOn(!isOn);
-    onValueChange(!isOn);
-  };
-
-  const animatedStyle = {
-    transform: [{translateX: animatedValue}],
-  };
-
-  return (
-    <Pressable
-      onPress={toggleSwitch}
-      style={[styles.container, {width}]}
-      testID="custom-switch">
-      <View
-        style={[
-          styles.track,
-          {
-            backgroundColor: isOn
-              ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_ACCENT
-              : DHRE_COLORS_TEXT.DH_TEXTDISABLED,
-          },
-        ]}>
-        <Animated.View style={[styles.thumb, animatedStyle]} />
-        {type !== ToggleButtonType.SMALL && (
-          <CustomTypography
-            variant="B3semiBold"
-            style={[
-              styles.text,
-              {textAlign: isOn ? TextDirectType.left : TextDirectType.right},
-            ]}
-            text={isOn ? ToggleTextType.ON : ToggleTextType.OFF}
-          />
-        )}
-      </View>
-    </Pressable>
-  );
-};
-
-export default CustomSwitch;

package/src/components/toggleButton/index.ts

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

package/src/components/topic/Topic.tsx

@@ -1,85 +0,0 @@
-import React, {ReactElement} from 'react';
-import {TouchableOpacity, View, StyleSheet, ViewStyle} from 'react-native';
-import {SvgProps} from 'react-native-svg';
-import {useTheme} from '../../theme/ThemeContext';
-import CustomText from '../customText';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-
-interface OurOfficesButtonProps {
-  rightIcon?: ReactElement<SvgProps>;
-  onPress: () => void;
-  title: string;
-  subTitle?: string;
-  containterStyle?: ViewStyle;
-}
-const Topic = ({
-  rightIcon,
-  onPress,
-  title,
-  subTitle,
-  containterStyle,
-}: OurOfficesButtonProps) => {
-  const {theme} = useTheme();
-  return (
-    <TouchableOpacity
-      style={[
-        styles.button,
-        {backgroundColor: theme['SURFACE_SECONDARY']},
-        containterStyle,
-      ]}
-      onPress={onPress}>
-      {rightIcon && (
-        <View style={styles.rightIconContainer}>
-          {React.cloneElement(rightIcon)}
-        </View>
-      )}
-      <View style={styles.textContainer}>
-        {subTitle && (
-          <CustomText
-            text={subTitle}
-            variant="L3_REGULAR"
-            textColor="CONTENT_PRIMARY"
-          />
-        )}
-        <CustomText
-          text={title}
-          variant="L1_REGULAR"
-          textColor="CONTENT_PRIMARY"
-        />
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: 75,
-    width: 158,
-    borderRadius: 10,
-    marginLeft: 12,
-    marginVertical: 14,
-  },
-  iconContainer: {
-    marginHorizontal: 16,
-  },
-  textContainer: {
-    flex: 1,
-    position: 'absolute',
-    padding: 10,
-    bottom: 0,
-    marginHorizontal: 8,
-    marginTop: 20,
-  },
-  titleText: {
-    marginBottom: 4,
-  },
-  rightIconContainer: {
-    position: 'absolute',
-    left: 16,
-    top: 10,
-  },
-});
-
-export default withThemeProvider(Topic);

package/src/components/topic/index.ts

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

package/src/index.ts

@@ -1,59 +0,0 @@
-export {default as CustomText} from './components/customText';
-// export {default as AutoOtpReader} from './components/autoOtpReader'; //TODO: warn
-export {default as Badge} from './components/badge';
-export {default as BottomDrawer} from './components/bottomDrawer';
-export {default as Button} from './components/button';
-export {default as Cards} from './components/cards';
-export {default as CheckBox} from './components/checkBox';
-export {default as CustomDropdown} from './components/customDropdown';
-export {default as CustomTextInput} from './components/customInputText';
-export {default as CustomTooltip} from './components/customTooltip';
-export {default as FileUpload} from './components/fileUpload';
-export {default as PdfView} from './components/pdfView';
-export {default as PopUp} from './components/popup';
-export {default as CustomProgressBar} from './components/progressBar';
-// export {default as Property360View} from './components/property360View';
-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';
-export {default as CustomTypography} from './components/customTypography';
-export {default as CustomIcon} from './components/customIcon';
-export {default as CustomLoader} from './components/customLoader';
-export {default as Line} from './components/horizontalLine';
-export {default as Topic} from './components/topic';
-export {default as ContactModel} from './components/ContactModel';
-export {default as DateRangePicker} from './components/dateRangePicker';
-export {default as OurOfficesButton} from './components/OutOfOffice';
-export {default as NotificationBandge} from './components/notificationBandge';
-export {default as Category} from './components/scrollList';
-export {default as FeedbackForm} from './components/feedback';
-export {default as CountryPicker} from './components/countryPicker';
-export {default as TextInput} from './components/textInput';
-export {default as DropDown} from './components/dropDown';
-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 OTPInput} from './components/otp';
-export {default as Stepper} from './components/stepper';
-export {FONT_STYLES} from './theme/fonts';
-export {FontStyle, Theme} from './utils/appEnum';
-export {default as CustomSlideButton} from './components/customSlideButton';
-
-export {DHRE_DEFAULT, DHRE_COLORS_TEXT} from './theme/colors';
-
-export {
-  verticalScale,
-  horizontalScale,
-  moderateScale,
-} from './utils/stylehelper';
-export {copyToClipboard} from './utils/deviceUtils';
-
-export {default} from './theme/themes';
-export {default as CustomTextTest} from '../__mocks__/custom-text.mock';