dhre-ui-kit 0.0.94 → 0.0.96

package/src/components/customDropdown/CustomDropdown.styles.tsx

@@ -1,46 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {DHRE_COLORS_TEXT, DHRE_COLORS_BG} from '../../theme/colors';
-import {
-  horizontalScale,
-  moderateScale,
-  verticalScale,
-} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  labelStyle: {
-    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
-  },
-  dropDownStyle: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: verticalScale(48),
-    marginTop: verticalScale(8),
-    paddingHorizontal: horizontalScale(20),
-    paddingVertical: verticalScale(12),
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-    borderWidth: 1,
-    borderColor: DHRE_COLORS_BG.DH_LINE_GREY_700,
-    borderRadius: moderateScale(24),
-  },
-  selectedValueStyle: {
-    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
-  },
-  optionContainer: {
-    marginTop: verticalScale(4),
-    borderRadius: moderateScale(24),
-    borderWidth: 1,
-    borderColor: DHRE_COLORS_BG.DH_GREY1,
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: verticalScale(12),
-    paddingHorizontal: horizontalScale(20),
-  },
-  iconStyle: {
-    marginRight: horizontalScale(12),
-  },
-});
-
-export default styles;

package/src/components/customDropdown/CustomDropdown.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import {it} from '@jest/globals';
-import {fireEvent, render} from '@testing-library/react-native';
-import CustomDropdown from './CustomDropdown';
-import {CalenderDots} from '../../assets';
-
-const mockProps = {
-  label: 'Dropdown',
-  options: [
-    {id: '1', value: 'option1', label: 'Option 1'},
-    {id: '2', value: 'option2', label: 'Option 2'},
-  ],
-  selectedValue: undefined,
-  oneSelect: jest.fn(),
-};
-
-describe('Custom Dropdown Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(
-      <CustomDropdown
-        upArrowIcon={<CalenderDots />}
-        downArrowIcon={<CalenderDots />}
-        {...mockProps}
-      />,
-    );
-    expect(getByTestId('CUSTOM-DROPDOWN')).toBeTruthy();
-    fireEvent.press(getByTestId('CUSTOM-DROPDOWN-BTN'));
-    fireEvent.press(getByTestId('CUSTOM-DROPDOWN-Option 1-BTN'));
-  });
-});

package/src/components/customDropdown/CustomDropdown.tsx

@@ -1,106 +0,0 @@
-import {Pressable, View} from 'react-native';
-import React, {useState} from 'react';
-import {DHRE_COLORS_BG, DHRE_COLORS_TEXT} from '../../theme/colors';
-import {CustomDropdownProps} from './CustomDropdown.interface';
-import styles from './CustomDropdown.styles';
-import {moderateScale} from '../../utils/stylehelper';
-import CustomTypography from '../customTypography/CustomTypography';
-
-const CustomDropdown: React.FC<CustomDropdownProps> = ({
-  label,
-  placeholder = 'Choose Option',
-  options,
-  selectedValue,
-  oneSelect,
-  testId = 'CUSTOM-DROPDOWN',
-  iconName,
-  iconStyle,
-  upArrowIcon,
-  downArrowIcon,
-}) => {
-  const [showOptions, setShowOptions] = useState(false);
-
-  return (
-    <View testID={testId}>
-      <CustomTypography
-        variant="P3regular"
-        style={styles.labelStyle}
-        text={label}
-      />
-      <Pressable
-        testID={`${testId}-BTN`}
-        style={styles.dropDownStyle}
-        onPress={() => setShowOptions(!showOptions)}>
-        {iconName && (
-          <View style={iconStyle}>
-            {React.cloneElement(iconName, {
-              width: moderateScale(24),
-              height: moderateScale(24),
-              style: styles.iconStyle,
-            })}
-          </View>
-        )}
-        <CustomTypography
-          variant="P3regular"
-          style={styles.selectedValueStyle}
-          text={selectedValue ? selectedValue.label : placeholder}
-        />
-        <View>
-          {showOptions
-            ? React.cloneElement(upArrowIcon, {
-                width: moderateScale(24),
-                height: moderateScale(24),
-              })
-            : React.cloneElement(downArrowIcon, {
-                width: moderateScale(24),
-                height: moderateScale(24),
-              })}
-        </View>
-      </Pressable>
-      {showOptions && (
-        <View style={styles.optionContainer}>
-          {options?.map(({id, value, label}) => (
-            <Pressable
-              key={id}
-              testID={`${testId}-${label}-BTN`}
-              onPress={() => {
-                setShowOptions(!showOptions);
-                oneSelect({id, value, label});
-              }}
-              style={[
-                styles.item,
-                {
-                  backgroundColor:
-                    id === selectedValue?.id
-                      ? DHRE_COLORS_BG.DH_GREY1
-                      : DHRE_COLORS_TEXT.DH_WHITE,
-                },
-              ]}>
-              {iconName && (
-                <View style={iconStyle}>
-                  {React.cloneElement(iconName, {
-                    width: moderateScale(24),
-                    height: moderateScale(24),
-                    style: styles.iconStyle,
-                  })}
-                </View>
-              )}
-              <CustomTypography
-                variant="P3regular"
-                style={{
-                  color:
-                    id === selectedValue?.id
-                      ? DHRE_COLORS_TEXT.DH_BLACK
-                      : DHRE_COLORS_TEXT.DH_TEXTDARK,
-                }}
-                text={label}
-              />
-            </Pressable>
-          ))}
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default CustomDropdown;

package/src/components/customDropdown/index.ts

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

package/src/components/customHeader/CustomHeader.interface.tsx

@@ -1,10 +0,0 @@
-export interface CustomHeaderProps {
-  title: string;
-  testId?: string;
-  leftIcon?: React.ReactElement;
-  rightIcon?: React.ReactElement;
-  showLeftIcon?: boolean;
-  showRightIcon?: boolean;
-  onLeftPress?: () => void;
-  onRightPress?: () => void;
-}

package/src/components/customHeader/CustomHeader.styles.ts

@@ -1,26 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: horizontalScale(16),
-    paddingTop: verticalScale(74),
-    paddingBottom: verticalScale(16),
-    backgroundColor: '#212121',
-    borderBottomWidth: 1,
-    borderBottomColor: '#282828',
-  },
-  headderContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  headerTitle: {
-    color: '#FFFFFF',
-  },
-  leftIconStyle: {marginRight: horizontalScale(9)},
-  rightIconStyle: {marginLeft: horizontalScale(8)},
-});
-
-export default styles;

package/src/components/customHeader/CustomHeader.test.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
-import CustomHeader from './CustomHeader';
-
-describe('Custom Header Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId, getByText} = render(
-      <CustomHeader title="Header Title" />,
-    );
-
-    expect(getByTestId('CUSTOM-HEADER')).toBeTruthy();
-    expect(getByText('Header Title')).toBeTruthy();
-  });
-});

package/src/components/customHeader/CustomHeader.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import {CaretLeft, HeaderIcon} from '../../assets';
-import CustomTypography from '../customTypography/CustomTypography';
-import {moderateScale} from '../../utils/stylehelper';
-import styles from './CustomHeader.styles';
-import {CustomHeaderProps} from './CustomHeader.interface';
-
-const CustomHeader = ({
-  title,
-  testId = 'CUSTOM-HEADER',
-  leftIcon = <CaretLeft />,
-  rightIcon = <HeaderIcon />,
-  showLeftIcon = true,
-  showRightIcon = true,
-  onLeftPress,
-  onRightPress,
-}: CustomHeaderProps) => {
-  return (
-    <View style={styles.container} testID={testId}>
-      <View style={styles.headderContainer}>
-        {showLeftIcon &&
-          React.cloneElement(leftIcon, {
-            width: moderateScale(24),
-            height: moderateScale(24),
-            onPress: onLeftPress,
-            style: styles.leftIconStyle,
-          })}
-        <CustomTypography
-          variant={'B2_REGULAR'}
-          text={title}
-          style={styles.headerTitle}
-        />
-      </View>
-      {showRightIcon &&
-        React.cloneElement(rightIcon, {
-          width: moderateScale(24),
-          height: moderateScale(24),
-          onPress: onRightPress,
-          style: styles.rightIconStyle,
-        })}
-    </View>
-  );
-};
-
-export default CustomHeader;

package/src/components/customHeader/index.ts

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

package/src/components/customIcon/CustomIcon.interface.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import {TextStyle, ViewStyle} from 'react-native';
-
-export interface CustomIconProps {
-  icon: React.ReactElement;
-  title?: string;
-  titleVariant?: string;
-  testId?: string;
-  onPress?: () => void;
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-}

package/src/components/customIcon/CustomIcon.styles.ts

@@ -1,13 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    color: '#000',
-  },
-});
-
-export default styles;

package/src/components/customIcon/CustomIcon.test.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import {render, fireEvent} from '@testing-library/react-native';
-import {CalenderDots} from '../../assets';
-import CustomIcon from './CustomIcon';
-
-describe('Custom Icon Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(
-      <CustomIcon icon={<CalenderDots />} title="Test Title" />,
-    );
-    expect(getByTestId('CUSTOM-ICON')).toBeTruthy();
-    fireEvent.press(getByTestId('CUSTOM-ICON'));
-  });
-});

package/src/components/customIcon/CustomIcon.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import {Pressable} from 'react-native';
-import CustomTypography from '../customTypography';
-import {CustomIconProps} from './CustomIcon.interface';
-import styles from './CustomIcon.styles';
-
-const CustomIcon = ({
-  icon,
-  title,
-  titleVariant = 'L1_REGULAR',
-  testId = 'CUSTOM-ICON',
-  onPress,
-  containerStyle,
-  titleStyle,
-}: CustomIconProps) => {
-  return (
-    <Pressable
-      style={[styles.container, containerStyle]}
-      onPress={onPress}
-      testID={testId}>
-      {icon}
-      {title && (
-        <CustomTypography
-          variant={titleVariant}
-          text={title}
-          style={[styles.title, titleStyle]}
-        />
-      )}
-    </Pressable>
-  );
-};
-
-export default CustomIcon;

package/src/components/customIcon/index.ts

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

package/src/components/customInputText/CustomInputText.interface.ts

@@ -1,20 +0,0 @@
-import {ReactElement} from 'react';
-import {TextInputProps} from 'react-native';
-
-export interface CustomTextInputProps extends TextInputProps {
-  label: string;
-  placeholder?: string;
-  disabled?: boolean;
-  errorMessage?: string;
-  successMessage?: string;
-  testID?: string;
-  handleFocus?: () => void;
-  handleBlur?: () => void;
-  handleOnChangeText?: (text: string) => void;
-  secureTextEntry?: boolean;
-  isSearchBar?: boolean;
-  multiline?: boolean;
-  rightIcon1?: ReactElement;
-  rightIcon2?: ReactElement;
-  searchIcon?: ReactElement;
-}

package/src/components/customInputText/CustomInputText.styles.ts

@@ -1,56 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {
-  DHRE_COLORS_TEXT,
-  DHRE_COLORS_BG,
-  DHRE_COLORS_ALERT,
-} from '../../theme/colors';
-import {FONT_STYLES} from '../../theme/fonts';
-import {
-  horizontalScale,
-  moderateScale,
-  verticalScale,
-} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  labelStyle: {
-    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginVertical: verticalScale(8),
-    paddingHorizontal: horizontalScale(20),
-    paddingVertical: verticalScale(12),
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-    borderWidth: 1,
-    borderColor: DHRE_COLORS_BG.DH_LINE_GREY_700,
-    borderRadius: moderateScale(24),
-  },
-  input: {
-    flex: 1,
-    ...FONT_STYLES.P2medium,
-    color: DHRE_COLORS_TEXT.DH_BLACK,
-  },
-  inputFocused: {
-    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
-  },
-  inputError: {
-    borderColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE,
-  },
-  inputSucess: {
-    borderColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
-  },
-  disableInputStyle: {
-    borderColor: DHRE_COLORS_BG.DH_GREY1,
-    backgroundColor: DHRE_COLORS_BG.DH_GREY1,
-    //need to check background and border color
-  },
-  disableTextStyle: {
-    color: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
-  },
-  crossIconStyle: {marginLeft: horizontalScale(12)},
-  eyeIconStyle: {marginLeft: horizontalScale(16)},
-  searchIconStyle: {marginRight: horizontalScale(12)},
-});
-
-export default styles;

package/src/components/customInputText/CustomInputText.test.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import {it} from '@jest/globals';
-import {fireEvent, render} from '@testing-library/react-native';
-import CustomTextInput from './CustomInputText';
-
-const mockProps = {
-  testID: 'CUSTOM-TEST-INPUT',
-  label: 'Email',
-  placeholder: 'Email',
-  disabled: false,
-  errorMessage: '',
-  successMessage: '',
-  handelFocus: jest.fn(),
-  handelBlur: jest.fn(),
-  handelOnChangeText: jest.fn(),
-};
-
-describe('Custom Text Input Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(<CustomTextInput {...mockProps} />);
-    expect(getByTestId('CUSTOM-TEST-INPUT')).toBeTruthy();
-    const textInput = getByTestId('CUSTOM-TEST-INPUT');
-    fireEvent.changeText(textInput, 'test@example.com');
-    expect(mockProps.handelOnChangeText).not.toHaveBeenCalledWith(
-      'test@example.com',
-    );
-    fireEvent(textInput, 'focus');
-    fireEvent(textInput, 'blur');
-  });
-
-  it('Check blur method when value is empty', () => {
-    const {getByTestId} = render(<CustomTextInput {...mockProps} />);
-    expect(getByTestId('CUSTOM-TEST-INPUT')).toBeTruthy();
-    const textInput = getByTestId('CUSTOM-TEST-INPUT');
-    fireEvent(textInput, 'blur');
-  });
-});

package/src/components/customInputText/CustomInputText.tsx

@@ -1,120 +0,0 @@
-import React, {useState} from 'react';
-import {TextInput, View} from 'react-native';
-import {DHRE_COLORS_ALERT, DHRE_COLORS_TEXT} from '../../theme/colors';
-import {moderateScale} from '../../utils/stylehelper';
-import {CustomTextInputProps} from './CustomInputText.interface';
-import styles from './CustomInputText.styles';
-import CustomTypography from '../customTypography/CustomTypography';
-
-const CustomTextInput: React.FC<CustomTextInputProps> = ({
-  label,
-  placeholder,
-  disabled = false,
-  errorMessage,
-  successMessage,
-  testID = 'CUSTOM-TEST-INPUT',
-  handleFocus,
-  handleBlur,
-  handleOnChangeText,
-  secureTextEntry = false,
-  isSearchBar = false,
-  multiline,
-  rightIcon1,
-  rightIcon2,
-  searchIcon,
-  ...props
-}) => {
-  const [value, setValue] = useState('');
-  const [isFocused, setIsFocused] = useState(false);
-  const [error, setError] = useState(!!errorMessage);
-  const [isSecureTextEntry, setIsSecureTextEntry] = useState(secureTextEntry);
-
-  const onFocus = () => {
-    handleFocus?.();
-    setIsFocused(true);
-    setError(false);
-  };
-
-  const onBlur = () => {
-    handleBlur?.();
-    if (!value) {
-      setError(true);
-    }
-    setIsFocused(false);
-  };
-
-  const handleIconPress1 = () => setValue('');
-  const handleIconPress2 = () => setIsSecureTextEntry(!isSecureTextEntry);
-
-  return (
-    <View testID={testID}>
-      <CustomTypography
-        variant="P3medium"
-        style={[styles.labelStyle, disabled && styles.disableTextStyle]}
-        text={label}
-      />
-      <View
-        style={[
-          styles.inputContainer,
-          isFocused && styles.inputFocused,
-          error && styles.inputError,
-          disabled && styles.disableInputStyle,
-          successMessage ? styles.inputSucess : {},
-          {
-            height: multiline ? 120 : 48,
-            alignItems: multiline ? 'flex-start' : 'center',
-          },
-        ]}>
-        {isSearchBar &&
-          searchIcon &&
-          React.cloneElement(searchIcon, {
-            width: moderateScale(24),
-            height: moderateScale(24),
-            style: styles.searchIconStyle,
-          })}
-        <TextInput
-          {...props}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          style={styles.input}
-          placeholderTextColor={DHRE_COLORS_TEXT.DH_TEXTLIGHTEST}
-          editable={!disabled}
-          value={value}
-          onChangeText={val => {
-            setValue(val);
-            handleOnChangeText?.(val);
-          }}
-          secureTextEntry={isSecureTextEntry}
-        />
-        {value &&
-          !multiline &&
-          rightIcon1 &&
-          React.cloneElement(rightIcon1, {
-            onPress: handleIconPress1,
-            testID: 'icon1',
-          })}
-        {secureTextEntry &&
-          rightIcon2 &&
-          React.cloneElement(rightIcon2, {
-            onPress: handleIconPress2,
-            testID: 'icon2',
-          })}
-      </View>
-      {(error || successMessage) && (
-        <CustomTypography
-          numberOfLines={2}
-          variant="P4regular"
-          style={{
-            color: successMessage
-              ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN
-              : DHRE_COLORS_ALERT.DH_ALERT_ORANGE,
-          }}
-          testID={`${testID}-message`}
-          text={successMessage || errorMessage || `Please Enter ${placeholder}`}
-        />
-      )}
-    </View>
-  );
-};
-
-export default CustomTextInput;

package/src/components/customInputText/index.ts

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

package/src/components/customLoader/CustomLoader.inteface.ts

@@ -1,3 +0,0 @@
-export interface CustomLoaderProps {
-  loading: boolean;
-}

package/src/components/customLoader/CustomLoader.styles.ts

@@ -1,16 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    zIndex: 1000,
-  },
-});
-
-export default styles;

package/src/components/customLoader/CustomLoader.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import {View, ActivityIndicator} from 'react-native';
-import {CustomLoaderProps} from './CustomLoader.inteface';
-import styles from './CustomLoader.styles';
-
-const CustomLoader = ({loading}: CustomLoaderProps) => {
-  if (!loading) return null;
-
-  return (
-    <View style={styles.container}>
-      <ActivityIndicator size="large" color="#686868" />
-    </View>
-  );
-};
-
-export default CustomLoader;

package/src/components/customLoader/index.ts

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

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

@@ -1,21 +0,0 @@
-import {TextInputProps, TextStyle, ViewStyle} from 'react-native';
-
-export interface CustomSearchBarProps extends TextInputProps {
-  height?: number;
-  disabled?: boolean;
-  testID?: string;
-  inputContainerStyle?: ViewStyle;
-  searchIconStyle?: TextStyle;
-  crossIconStyle?: TextStyle;
-  inputStyle?: TextStyle;
-  onSearchIconPress?: () => void;
-  onCrossIconPress?: () => void;
-  handleOnChangeText?: (text: string) => void;
-  rightIcon?: React.ReactElement;
-  disableBorderColor?: string;
-  disablePlaceHolderStyle?: string;
-  enablePlaceHolderStyle?: string;
-  borderColor?: string;
-  setValue: (val: string) => void;
-  value: string | undefined;
-}