dhre-ui-kit 0.0.1

package/src/components/customDropdown/CustomDropdown.tsx

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

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

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

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

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

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

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

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

package/src/components/customText/CustomText.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {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';
+
+interface CustomTextProps extends TextProps {
+  text: string;
+  variant: keyof typeof FONT_STYLES | string;
+  style?: TextStyle;
+}
+
+const CustomText: React.FC<CustomTextProps> = ({
+  text,
+  style,
+  variant,
+  ...props
+}) => {
+  const {theme} = useTheme();
+  return (
+    <CustomTypography
+      variant={variant}
+      text={text || ''}
+      style={[{color: theme.colors.text}, style]}
+      {...props}
+    />
+  );
+};
+
+export default withThemeProvider(CustomText);

package/src/components/customText/index.ts

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

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

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

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

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

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

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

package/src/components/customTypography/CustomTypography.tsx

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

package/src/components/fileUpload/FileUpload.styles.ts

@@ -0,0 +1,41 @@
+import {DHRE_COLORS_PRIMARY, DHRE_COLORS_TEXT} from '../../theme/colors';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    paddingHorizontal: horizontalScale(16),
+    paddingVertical: verticalScale(24),
+    width: verticalScale(327),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    alignItems: 'center',
+  },
+  title: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
+    marginTop: verticalScale(16),
+  },
+  description: {
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
+    textAlign: 'center',
+    marginTop: verticalScale(16),
+  },
+  browse: {
+    color: DHRE_COLORS_PRIMARY.DH_RED_100,
+    textDecorationLine: 'underline',
+  },
+  button: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    padding: verticalScale(12),
+    borderRadius: 20,
+    width: '40%',
+    marginTop: verticalScale(16),
+  },
+  buttonText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+    textAlign: 'center',
+  },
+});

package/src/components/fileUpload/FileUpload.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react-native';
+import FileUpload from './FileUpload';
+
+describe('FileUpload component', () => {
+  it('renders correctly', () => {
+    const onUploadMock = jest.fn();
+    const {getByTestId} = render(
+      <FileUpload
+        onUpload={onUploadMock}
+        containerStyle={{}}
+        btnText={'upload'}
+        uploadImageStyling={{}}
+        title="Upload Image"
+      />,
+    );
+
+    expect(getByTestId('file-upload-container')).toBeTruthy();
+    expect(getByTestId('file-upload-image')).toBeTruthy();
+    expect(getByTestId('file-upload-button')).toBeTruthy();
+  });
+
+  it('calls onUpload when button is pressed', () => {
+    const onUploadMock = jest.fn();
+    const {getByTestId} = render(
+      <FileUpload
+        onUpload={onUploadMock}
+        containerStyle={{}}
+        btnText={'upload'}
+        uploadImageStyling={{}}
+        title="Upload Image"
+      />,
+    );
+
+    const button = getByTestId('file-upload-button');
+    fireEvent.press(button);
+    expect(onUploadMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/fileUpload/FileUpload.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {View, Pressable, ViewStyle, ImageStyle} from 'react-native';
+import CustomTypography from '../customTypography/CustomTypography';
+import {styles} from './FileUpload.styles';
+
+interface FileUploadProps {
+  onUpload: () => void;
+  title: string;
+  containerStyle?: ViewStyle;
+  btnText: string;
+  uploadImageStyling: ImageStyle;
+  icon?: React.ReactElement;
+  iconStyle?: ViewStyle;
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({
+  onUpload,
+  title,
+  containerStyle,
+  btnText,
+  uploadImageStyling,
+  icon,
+  iconStyle,
+}) => {
+  return (
+    <View
+      style={[styles.container, containerStyle]}
+      testID="file-upload-container">
+      <View style={styles.content}>
+        <View style={[uploadImageStyling]} testID="file-upload-image">
+          {icon && React.cloneElement(icon, {style: [iconStyle]})}
+        </View>
+        <CustomTypography variant="H8bold" style={styles.title} text={title} />
+        <CustomTypography
+          variant="P4regular"
+          style={styles.description}
+          text={`Drop files directly here or `}
+        />
+        <CustomTypography
+          variant="P4regular"
+          style={styles.browse}
+          text={btnText}
+        />
+        <CustomTypography
+          testID="file-upload-description"
+          variant="P4regular"
+          style={styles.description}
+          text={` from your device`}
+        />
+      </View>
+      <Pressable
+        style={styles.button}
+        onPress={onUpload}
+        testID="file-upload-button">
+        <CustomTypography
+          variant="B2semiBold"
+          style={styles.buttonText}
+          text={btnText}
+        />
+      </Pressable>
+    </View>
+  );
+};
+
+export default FileUpload;

package/src/components/fileUpload/index.ts

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