dhre-ui-kit 0.0.94 → 0.0.96

package/src/components/customSearchBar/CustomSearchBar.styles.ts

@@ -1,23 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {FONT_STYLES} from '../../theme/fonts';
-import {horizontalScale, moderateScale} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  inputContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: horizontalScale(16),
-    borderRadius: moderateScale(8),
-    borderWidth: moderateScale(1),
-  },
-  input: {
-    flex: 1,
-    ...FONT_STYLES.L1_REGULAR,
-    color: '#fff',
-  },
-  crossIconStyle: {marginLeft: horizontalScale(8)},
-  searchIconStyle: {marginRight: horizontalScale(8)},
-});
-
-export default styles;

package/src/components/customSearchBar/CustomSearchBar.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import {it} from '@jest/globals';
-import {fireEvent, render} from '@testing-library/react-native';
-import CustomSearchBar from './CustomSearchBar';
-
-const mockProps = {
-  testID: 'CUSTOM-SEARCH-BAR',
-  disabled: false,
-  handelOnChangeText: jest.fn(),
-};
-
-describe('Custom search bar component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(
-      <CustomSearchBar
-        setValue={(val: string) => {
-          return val;
-        }}
-        value={''}
-        {...mockProps}
-      />,
-    );
-    expect(getByTestId(mockProps.testID)).toBeTruthy();
-    const textInput = getByTestId('CUSTOM-SEARCH-BAR-INPUT');
-    fireEvent.changeText(textInput, 'test@example.com');
-  });
-});

package/src/components/customSearchBar/CustomSearchBar.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import {Pressable, TextInput, View} from 'react-native';
-import {CrossIcon, SearchIcon} from '../../assets';
-import {moderateScale, verticalScale} from '../../utils/stylehelper';
-import {CustomSearchBarProps} from './CustomSearchBar.interface';
-import styles from './CustomSearchBar.styles';
-
-const CustomSearchBar = ({
-  value,
-  height = 40,
-  disabled = false,
-  testID = 'CUSTOM-SEARCH-BAR',
-  inputContainerStyle,
-  searchIconStyle,
-  crossIconStyle,
-  inputStyle,
-  onSearchIconPress,
-  onCrossIconPress,
-  handleOnChangeText,
-  setValue,
-  rightIcon = <CrossIcon />,
-  disableBorderColor = '#4F4F4F',
-  borderColor = '#FFFFFF',
-  disablePlaceHolderStyle = '#686868',
-  enablePlaceHolderStyle = '#A7A7A7',
-  ...props
-}: CustomSearchBarProps) => {
-  return (
-    <View
-      testID={testID}
-      style={[
-        styles.inputContainer,
-        {
-          height: verticalScale(height),
-          borderColor: disabled
-            ? disableBorderColor
-            : value
-            ? borderColor
-            : '#A7A7A7',
-        },
-        inputContainerStyle,
-      ]}>
-      <Pressable
-        onPress={() => {
-          console.log('Search icon pressed'); // Default behavior
-          onSearchIconPress?.(); // Call custom handler if provided
-        }}
-        style={searchIconStyle}>
-        {React.cloneElement(<SearchIcon />, {
-          width: moderateScale(24),
-          height: moderateScale(24),
-          style: [styles.searchIconStyle, searchIconStyle],
-        })}
-      </Pressable>
-      <TextInput
-        {...props}
-        testID={`${testID}-INPUT`}
-        style={[styles.input, inputStyle]} // Apply custom input styles
-        editable={!disabled}
-        value={value}
-        placeholderTextColor={
-          disabled ? disablePlaceHolderStyle : enablePlaceHolderStyle
-        }
-        onChangeText={val => {
-          setValue(val);
-          handleOnChangeText?.(val);
-        }}
-      />
-      {value && (
-        <Pressable
-          onPress={() => {
-            setValue(''); // Clear the input field
-            onCrossIconPress?.(); // Call custom handler if provided
-          }}
-          style={crossIconStyle}>
-          {React.cloneElement(rightIcon, {
-            // width: moderateScale(24),
-            // height: moderateScale(24),
-            style: [styles.crossIconStyle, crossIconStyle],
-          })}
-        </Pressable>
-      )}
-    </View>
-  );
-};
-
-export default CustomSearchBar;

package/src/components/customSearchBar/index.ts

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

package/src/components/customSlideButton/custom-slide-button.interface.ts

@@ -1,4 +0,0 @@
-export interface CustomSlideButtonProps {
-  label?: string;
-  onComplete?: () => void;
-}

package/src/components/customSlideButton/index.tsx

@@ -1,78 +0,0 @@
-import React, {useRef} from 'react';
-import {View, PanResponder, Animated, Dimensions} from 'react-native';
-import {CaretRight} from '../../assets/index';
-import {CustomTypography, FontStyle} from '../../index';
-import styles from './styles';
-import {CustomSlideButtonProps} from './custom-slide-button.interface';
-import {useTheme} from '../../theme/ThemeContext';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-
-const {width} = Dimensions.get('window');
-const BUTTON_WIDTH = 40; // Width of the button
-
-const CustomSlideButton = ({label, onComplete}: CustomSlideButtonProps) => {
-  const pan = useRef(new Animated.Value(0)).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (evt, gestureState) => {
-        return gestureState.dx > 0; // Only set when moving right
-      },
-      onPanResponderGrant: () => {},
-      onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dx < width - BUTTON_WIDTH) {
-          pan.setValue(gestureState.dx);
-        }
-      },
-      onPanResponderRelease: (evt, gestureState) => {
-        if (gestureState.dx > width - BUTTON_WIDTH - 100) {
-          // If slid far enough, trigger payment action
-          onComplete && onComplete();
-          Animated.spring(pan, {
-            toValue: width - BUTTON_WIDTH - 10,
-            useNativeDriver: false,
-          }).start();
-        } else {
-          // Otherwise, reset position
-          Animated.spring(pan, {
-            toValue: 0,
-            useNativeDriver: false,
-          }).start();
-        }
-      },
-    }),
-  ).current;
-
-  const {theme} = useTheme();
-  return (
-    <View
-      style={{
-        ...styles.sliderContainer,
-        backgroundColor: theme.SURFACE_INVERTED,
-      }}>
-      <View style={styles.buttonTextCOntainer}>
-        <CustomTypography
-          text={label}
-          variant={FontStyle.L1_REGULAR}
-          style={{
-            color: theme.CONTENT_INVERTED,
-          }}
-        />
-      </View>
-      <Animated.View
-        style={[styles.slider, {transform: [{translateX: pan}]}]}
-        {...panResponder.panHandlers}>
-        <View
-          style={{
-            ...styles.button,
-            backgroundColor: theme.SURFACE_PRIMARY,
-            width: BUTTON_WIDTH,
-          }}>
-          <CaretRight />
-        </View>
-      </Animated.View>
-    </View>
-  );
-};
-
-export default withThemeProvider(CustomSlideButton);

package/src/components/customSlideButton/styles.ts

@@ -1,39 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {moderateScale, verticalScale} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  sliderContainer: {
-    height: verticalScale(48),
-    borderRadius: moderateScale(25),
-    overflow: 'hidden',
-    justifyContent: 'center',
-  },
-  slider: {
-    height: '100%',
-    width: '100%',
-    position: 'absolute',
-  },
-  button: {
-    height: verticalScale(40),
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: moderateScale(20),
-    margin: moderateScale(4),
-  },
-  buttonTextCOntainer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    top: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default styles;

package/src/components/customSwitchBtn/customSwitchBtn.interface.ts

@@ -1,15 +0,0 @@
-import {TextStyle, ViewStyle} from 'react-native';
-
-export interface CustomSwitchBtnProps {
-  value: boolean;
-  onValueChange: (value: boolean) => void;
-  activeText: string;
-  activeTextVariant?: string;
-  inActiveText: string;
-  inActiveTextVariant?: string;
-  containerStyle?: ViewStyle;
-  activeTextStyle?: TextStyle;
-  inActiveTextStyle?: TextStyle;
-  disabled?: boolean;
-  circleStyle?: ViewStyle;
-}

package/src/components/customSwitchBtn/customSwitchBtn.styles.ts

@@ -1,34 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {
-  horizontalScale,
-  moderateScale,
-  verticalScale,
-} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: horizontalScale(75),
-    height: verticalScale(32),
-    borderRadius: moderateScale(25),
-    padding: moderateScale(4),
-  },
-  circle: {
-    width: horizontalScale(38),
-    height: verticalScale(24),
-    borderRadius: moderateScale(25),
-  },
-  activeText: {
-    position: 'absolute',
-    left: horizontalScale(12),
-  },
-  inActiveText: {
-    position: 'absolute',
-    top: verticalScale(2),
-    right: horizontalScale(18),
-  },
-});
-
-export default styles;

package/src/components/customSwitchBtn/customSwitchBtn.tsx

@@ -1,63 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {Pressable, Animated} from 'react-native';
-import CustomTypography from '../customTypography';
-import {FontStyle} from '../../utils/appEnum';
-import {CustomSwitchBtnProps} from './customSwitchBtn.interface';
-import styles from './customSwitchBtn.styles';
-
-const CustomSwitchBtn = ({
-  value,
-  onValueChange,
-  disabled = false,
-  activeText,
-  activeTextVariant = FontStyle.L2_BOLD,
-  inActiveText,
-  inActiveTextVariant = FontStyle.B3_REGULAR,
-  containerStyle,
-  activeTextStyle,
-  inActiveTextStyle,
-  circleStyle,
-}: CustomSwitchBtnProps) => {
-  const [animatedValue] = useState(new Animated.Value(value ? 1 : 0));
-
-  const translateX = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 28],
-  });
-  useEffect(() => {
-    Animated.timing(animatedValue, {
-      toValue: value ? 1 : 0,
-      duration: 300,
-      useNativeDriver: false,
-    }).start();
-  }, [value]);
-
-  const toggleSwitch = () => {
-    onValueChange(!value);
-  };
-  return (
-    <Pressable
-      disabled={disabled}
-      onPress={toggleSwitch}
-      style={{...styles.mainContainer, ...containerStyle}}>
-      <Animated.View
-        style={[styles.circle, {transform: [{translateX}], ...circleStyle}]}
-      />
-      <CustomTypography
-        style={[styles.activeText, value ? inActiveTextStyle : activeTextStyle]}
-        text={activeText}
-        variant={activeTextVariant}
-      />
-      <CustomTypography
-        style={[
-          styles.inActiveText,
-          value ? activeTextStyle : inActiveTextStyle,
-        ]}
-        text={inActiveText}
-        variant={inActiveTextVariant}
-      />
-    </Pressable>
-  );
-};
-
-export default CustomSwitchBtn;

package/src/components/customSwitchBtn/index.ts

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

package/src/components/customText/CustomText.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import {StyleProp, TextProps, TextStyle} from 'react-native';
-import {useTheme} from '../../theme/ThemeContext';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-import {FONT_STYLES} from '../../theme/fonts';
-import CustomTypography from '../customTypography/CustomTypography';
-
-export interface CustomTextProps extends TextProps {
-  text: string;
-  variant: keyof typeof FONT_STYLES | string;
-  style?: StyleProp<TextStyle>;
-  textColor?: string;
-}
-
-const CustomText: React.FC<CustomTextProps> = ({
-  text,
-  style,
-  variant,
-  textColor = 'SURFACE_STATIC',
-  ...props
-}) => {
-  const {theme} = useTheme();
-  return (
-    <CustomTypography
-      variant={variant}
-      text={text || ''}
-      style={[{color: theme[textColor]}, style]}
-      {...props}
-    />
-  );
-};
-
-export default withThemeProvider(CustomText);

package/src/components/customText/index.ts

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

package/src/components/customTooltip/CustomTooltip.interface.ts

@@ -1,14 +0,0 @@
-import React, {ReactElement} from 'react';
-import {ViewStyle} from 'react-native';
-
-export interface CustomTooltipProps {
-  message: string;
-  children: React.ReactNode;
-  actionType?: 'press' | 'longPress';
-  testId?: string;
-  backgroundColor?: string;
-  popoverContent?: React.ReactElement;
-  icon?: ReactElement;
-  iconStyle?: ViewStyle;
-  iconColor?: string;
-}

package/src/components/customTooltip/CustomTooltip.styles.ts

@@ -1,23 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
-import {moderateScale} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  tooltipContainerStyle: {
-    flex: 1,
-    borderRadius: moderateScale(16),
-    padding: moderateScale(8),
-  },
-  mesageContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  messageStyle: {
-    flex: 1,
-    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
-  },
-});
-
-export default styles;

package/src/components/customTooltip/CustomTooltip.test.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import {Pressable, Text} from 'react-native';
-import {it} from '@jest/globals';
-import {fireEvent, render} from '@testing-library/react-native';
-import CustomTooltip from './CustomTooltip';
-
-describe('Custom Tooltip Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(
-      <CustomTooltip message="TEST">
-        <Pressable testID="BTN">
-          <Text>Press me</Text>
-        </Pressable>
-      </CustomTooltip>,
-    );
-    fireEvent.press(getByTestId('BTN'));
-  });
-});

package/src/components/customTooltip/CustomTooltip.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import Tooltip from 'rn-tooltip';
-import CustomTypography from '../customTypography/CustomTypography';
-import {CustomTooltipProps} from './CustomTooltip.interface';
-import styles from './CustomTooltip.styles';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
-
-const CustomTooltip: React.FC<CustomTooltipProps> = ({
-  message,
-  children,
-  actionType = 'press',
-  testId = 'CUSTOM-TOOLTIP',
-  backgroundColor = DHRE_COLORS_TEXT.DH_WHITE,
-  popoverContent,
-  icon,
-  iconStyle,
-  iconColor = DHRE_COLORS_TEXT.DH_BLACK,
-}) => {
-  const defaultPopoverContent = (
-    <View style={styles.mesageContainer} testID={testId}>
-      <CustomTypography
-        variant="P4regular"
-        style={styles.messageStyle}
-        text={message}
-      />
-      {icon && (
-        <View style={iconStyle}>
-          {React.cloneElement(icon, {fill: iconColor})}
-        </View>
-      )}
-    </View>
-  );
-
-  return (
-    <Tooltip
-      containerStyle={styles.tooltipContainerStyle}
-      backgroundColor={backgroundColor}
-      popover={popoverContent || defaultPopoverContent}
-      actionType={actionType}>
-      {children}
-    </Tooltip>
-  );
-};
-
-export default CustomTooltip;

package/src/components/customTooltip/index.ts

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

package/src/components/customTypography/CustomTypography.test.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
-import CustomTypography from './CustomTypography';
-
-describe('CustomTypography Component', () => {
-  it('renders text correctly', () => {
-    const {getByTestId} = render(
-      <CustomTypography variant={'H1_BOLD'} text={'TESTING TEXT'} />,
-    );
-    expect(getByTestId('CUSTOM_TYPOGRAPHY')).toBeTruthy();
-  });
-});

package/src/components/customTypography/CustomTypography.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import {Text, TextProps} from 'react-native';
-import {FONT_STYLES} from '../../theme/fonts';
-
-interface TypoTextProps extends TextProps {
-  variant: keyof typeof FONT_STYLES;
-  text?: string;
-  testID?: string;
-}
-
-const CustomTypography: React.FC<TypoTextProps> = ({
-  variant,
-  style,
-  text,
-  testID = 'CUSTOM_TYPOGRAPHY',
-  ...props
-}) => {
-  const textStyle = FONT_STYLES[variant];
-
-  return (
-    <Text testID={testID} style={[textStyle, style]} {...props}>
-      {text}
-    </Text>
-  );
-};
-
-export default CustomTypography;

package/src/components/customTypography/index.ts

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

package/src/components/dateRangePicker/DateRangePicker.interface.ts

@@ -1,19 +0,0 @@
-import {CalendarProps} from 'react-native-calendars';
-export interface DateRangePickerProps extends CalendarProps {
-  onButtonPress: (startDate: string, endDate: string) => void;
-}
-
-export interface DayType {
-  dateString: string;
-  day: number;
-  month: number;
-  year: number;
-  timestamp: number;
-}
-
-export interface MarkedDate {
-  startingDay?: boolean;
-  endingDay?: boolean;
-  color: string;
-  textColor: string;
-}

package/src/components/dateRangePicker/DateRangePicker.styles.ts

@@ -1,19 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {FONT_STYLES} from '../../theme/fonts';
-import {verticalScale, moderateScale} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  applyButton: {
-    marginTop: verticalScale(24),
-    height: verticalScale(48),
-    alignItems: 'center',
-    borderRadius: moderateScale(25),
-    backgroundColor: '#fff',
-  },
-  applyButtonText: {
-    color: '#000',
-    ...FONT_STYLES.L1_REGULAR,
-  },
-});
-
-export default styles;