dhre-ui-kit 0.0.94 → 0.0.96

package/src/components/cards/Cards.interface.ts

@@ -1,13 +0,0 @@
-import {ReactNode} from 'react';
-
-export interface CardsProps {
-  topLeftTitle?: string;
-  subtitle?: string;
-  iconTitle?: string;
-  iconSource?: ReactNode;
-  buttonText?: string;
-  title?: string;
-  buttonShown?: boolean;
-  testID?: string;
-  onButtonPress?: () => void;
-}

package/src/components/cards/Cards.styles.ts

@@ -1,59 +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: {
-    padding: horizontalScale(20),
-    marginHorizontal: horizontalScale(16),
-    justifyContent: 'space-between',
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-  topLeft: {
-    alignSelf: 'flex-start',
-    paddingVertical: verticalScale(4),
-    paddingHorizontal: horizontalScale(12),
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-    borderWidth: 1,
-    borderColor: DHRE_COLORS_TEXT.DH_LIGHTGREEN,
-    borderRadius: 50,
-  },
-  title: {
-    color: DHRE_COLORS_TEXT.DH_LIGHTGREEN,
-  },
-  subTitleBelow: {
-    marginTop: verticalScale(12),
-    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
-  },
-  subtitle: {
-    letterSpacing: 0.5,
-    marginTop: verticalScale(8),
-    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
-  },
-  leftBottomView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: verticalScale(8),
-  },
-  subTitleLeftBelow: {
-    letterSpacing: 0.5,
-    marginTop: verticalScale(4),
-    marginBottom: verticalScale(4),
-    marginLeft: horizontalScale(4),
-    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
-  },
-  button: {
-    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
-    paddingVertical: verticalScale(6),
-    paddingHorizontal: horizontalScale(34),
-    borderRadius: 50,
-    position: 'absolute',
-    bottom: verticalScale(20),
-    right: horizontalScale(20),
-  },
-  buttonText: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-});
-
-export default styles;

package/src/components/cards/Cards.test.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import {it} from '@jest/globals';
-import {fireEvent, render} from '@testing-library/react-native';
-import {CalenderDots} from '../../assets';
-import Cards from './Cards';
-
-const mockProps = {
-  topLeftTitle: 'LeftTitle',
-  subtitle: 'SubTitle',
-  iconTitle: 'IconTitle',
-  iconSource: <CalenderDots />,
-  buttonText: 'Button',
-  title: 'Title',
-  buttonShown: true,
-  testID: 'CARDS-COMPONENT',
-  onButtonPress: jest.fn(),
-};
-
-const mockDisableProps = {
-  topLeftTitle: undefined,
-  subtitle: undefined,
-  iconTitle: undefined,
-  iconSource: <CalenderDots />,
-  buttonText: 'Button',
-  title: undefined,
-  buttonShown: false,
-  testID: 'CARDS-COMPONENT',
-  onButtonPress: jest.fn(),
-};
-
-describe('Cards Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(<Cards {...mockProps} />);
-    expect(getByTestId('CARDS-COMPONENT')).toBeTruthy();
-    fireEvent.press(getByTestId('Button-Press'));
-  });
-  it('Component renders correctly when title, subTitle and other props are not passed', () => {
-    const {getByTestId} = render(<Cards {...mockDisableProps} />);
-    expect(getByTestId('CARDS-COMPONENT')).toBeTruthy();
-  });
-});

package/src/components/cards/Cards.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import {View, Pressable} from 'react-native';
-import {CardsProps} from './Cards.interface';
-import CustomTypography from '../customTypography/CustomTypography';
-import styles from './Cards.styles';
-
-const Cards: React.FC<CardsProps> = ({
-  topLeftTitle,
-  subtitle,
-  title,
-  iconSource,
-  buttonText,
-  iconTitle,
-  buttonShown,
-  testID,
-  onButtonPress,
-}) => {
-  return (
-    <View testID={testID} style={styles.container}>
-      {topLeftTitle ? (
-        <View style={styles.topLeft}>
-          <CustomTypography
-            variant="P2regular"
-            style={styles.title}
-            text={topLeftTitle}
-          />
-        </View>
-      ) : null}
-      {title ? (
-        <CustomTypography
-          variant="H6bold"
-          style={styles.subTitleBelow}
-          text={title}
-        />
-      ) : null}
-      {subtitle ? (
-        <CustomTypography
-          variant="P3regular"
-          style={styles.subtitle}
-          text={subtitle}
-        />
-      ) : null}
-      <View style={styles.leftBottomView}>
-        {iconSource ? iconSource : null}
-        {iconTitle ? (
-          <CustomTypography
-            variant="P3regular"
-            style={styles.subTitleLeftBelow}
-            text={iconTitle}
-          />
-        ) : null}
-      </View>
-      {buttonShown ? (
-        <Pressable
-          testID="Button-Press"
-          style={styles.button}
-          onPress={onButtonPress}>
-          <CustomTypography
-            variant="B2semiBold"
-            style={styles.buttonText}
-            text={buttonText}
-          />
-        </Pressable>
-      ) : null}
-    </View>
-  );
-};
-
-export default Cards;

package/src/components/cards/index.ts

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

package/src/components/checkBox/CheckBox.interface.ts

@@ -1,15 +0,0 @@
-import {TextStyle, ViewStyle} from 'react-native';
-
-export interface CheckBoxProps {
-  isChecked: boolean;
-  onCheck?: (checked: boolean) => void;
-  labelName: string;
-  disable?: boolean;
-  isCircle?: boolean;
-  testID?: string;
-  checkedIcon: React.ReactElement;
-  uncheckedIcon: React.ReactElement;
-  titleVariant?: string;
-  titleStyle?: TextStyle;
-  containerStyle?: ViewStyle;
-}

package/src/components/checkBox/CheckBox.styles.ts

@@ -1,35 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
-
-const styles = StyleSheet.create({
-  checkboxContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  checkboxImage: {
-    width: horizontalScale(18),
-    height: verticalScale(18),
-    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
-    resizeMode: 'contain',
-  },
-  uncheckedCheckbox: {
-    width: horizontalScale(18),
-    height: verticalScale(18),
-    overflow: 'hidden',
-    borderRadius: 1,
-    borderWidth: 1,
-    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
-  },
-  directionStyle: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: horizontalScale(8),
-  },
-  labelStyle: {
-    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
-  },
-});
-
-export default styles;

package/src/components/checkBox/CheckBox.test.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import {it} from '@jest/globals';
-import {fireEvent, render} from '@testing-library/react-native';
-import CheckBox from './CheckBox';
-import {CalenderDots} from '../../assets';
-
-const mockProps = {
-  isChecked: true,
-  onCheck: jest.fn(),
-  labelName: 'Label',
-  disable: false,
-  isCircle: false,
-  testID: 'CHECKBOX-COMPONENT',
-};
-const mockCircleProps = {
-  isChecked: false,
-  onCheck: jest.fn(),
-  labelName: 'Label',
-  disable: true,
-  isCircle: true,
-  testID: 'CHECKBOX-COMPONENT',
-};
-
-describe('CheckBox Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(
-      <CheckBox
-        checkedIcon={<CalenderDots />}
-        uncheckedIcon={<CalenderDots />}
-        {...mockProps}
-      />,
-    );
-    expect(getByTestId('CHECKBOX-COMPONENT')).toBeTruthy();
-    fireEvent.press(getByTestId('Checkbox-Press'));
-  });
-  it('Component renders correctly when checkbox type is circle', () => {
-    const {getByTestId} = render(
-      <CheckBox
-        checkedIcon={<CalenderDots />}
-        uncheckedIcon={<CalenderDots />}
-        {...mockCircleProps}
-      />,
-    );
-    expect(getByTestId('CHECKBOX-COMPONENT')).toBeTruthy();
-  });
-});

package/src/components/checkBox/CheckBox.tsx

@@ -1,50 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {View, Pressable} from 'react-native';
-import {CheckBoxProps} from './CheckBox.interface';
-import styles from './CheckBox.styles';
-import CustomTypography from '../customTypography/CustomTypography';
-
-const Checkbox: React.FC<CheckBoxProps> = ({
-  isChecked,
-  onCheck,
-  labelName,
-  disable,
-  testID,
-  checkedIcon,
-  uncheckedIcon,
-  titleVariant = 'L1_REGULAR',
-  titleStyle,
-  containerStyle,
-}) => {
-  const [checked, setChecked] = useState(isChecked || false);
-
-  useEffect(() => {
-    setChecked(isChecked);
-  }, [isChecked]);
-
-  const handlePress = () => {
-    setChecked(!checked);
-    onCheck && onCheck(!checked);
-  };
-
-  return (
-    <View testID={testID} style={containerStyle}>
-      <Pressable
-        testID={'Checkbox-Press'}
-        onPress={handlePress}
-        disabled={disable}
-        style={styles.directionStyle}>
-        <View style={styles.checkboxContainer}>
-          {React.cloneElement(checked ? checkedIcon : uncheckedIcon)}
-        </View>
-        <CustomTypography
-          variant={titleVariant}
-          text={labelName}
-          style={titleStyle}
-        />
-      </Pressable>
-    </View>
-  );
-};
-
-export default Checkbox;

package/src/components/checkBox/index.ts

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

package/src/components/countryPicker/CountryPicker.tsx

@@ -1,169 +0,0 @@
-import React, {useState} from 'react';
-import {
-  View,
-  TextInput,
-  StyleSheet,
-  Text,
-  ViewStyle,
-  TextStyle,
-} from 'react-native';
-import CountryPicker, {
-  Country,
-  CountryCode,
-} from 'react-native-country-picker-modal';
-import {DHRE_COLORS_TEXT, DHRE_DEFAULT} from '../../theme/colors';
-import {
-  moderateScale,
-  horizontalScale,
-  verticalScale,
-} from '../../utils/stylehelper';
-import CustomTypography from '../customTypography';
-import theme from '../../theme/themes';
-import {
-  DEFAULT_CALLING_CODE,
-  DEFAULT_COUNTRY_CODE,
-} from '../../utils/constants';
-
-interface MobileNumberInputProps {
-  defaultCountryCode?: CountryCode;
-  defaultCallingCode?: string;
-  placeholder: string;
-  onChangeText: (text: string) => void;
-  value?: string;
-  containerStyle?: ViewStyle;
-  inputStyle?: TextStyle;
-  countryPickerStyle?: ViewStyle;
-  callingCodeStyle?: TextStyle;
-  getCountryCode: (countryCode: string) => void;
-  maxLength: number;
-  errorMessage?: string;
-  label: string;
-}
-
-const CountryDropDown = ({
-  defaultCountryCode = DEFAULT_COUNTRY_CODE,
-  defaultCallingCode = DEFAULT_CALLING_CODE,
-  placeholder,
-  onChangeText,
-  value,
-  containerStyle,
-  inputStyle,
-  countryPickerStyle,
-  callingCodeStyle,
-  getCountryCode,
-  maxLength,
-  errorMessage,
-  label,
-}: MobileNumberInputProps) => {
-  const [countryCode, setCountryCode] =
-    useState<CountryCode>(defaultCountryCode);
-  const [callingCode, setCallingCode] = useState<string>(defaultCallingCode);
-  const [pickerVisible, setPickerVisible] = useState<boolean>(false);
-  const [isFocused, setIsFocused] = useState<boolean>(false);
-
-  const handleSelect = (country: Country) => {
-    setCountryCode(country.cca2);
-    setCallingCode(`+${country.callingCode[0]}`);
-    getCountryCode(`+${country.callingCode[0]}`);
-  };
-
-  return (
-    <>
-      <View style={[styles.container, containerStyle]}>
-        <View style={[styles.countryPickerContainer, countryPickerStyle]}>
-          <CountryPicker
-            withFilter
-            withFlag
-            countryCode={countryCode}
-            withCallingCode
-            onSelect={handleSelect}
-            visible={pickerVisible}
-          />
-          <Text
-            onPress={() => setPickerVisible(true)}
-            style={[styles.callingCode, callingCodeStyle]}>
-            {callingCode}
-          </Text>
-        </View>
-        <View style={styles.flex}>
-          {(isFocused || value) && (
-            <CustomTypography
-              variant={'L2_REGULAR'}
-              text={label ?? ''}
-              style={styles.floatingLabel}
-            />
-          )}
-          <TextInput
-            style={[styles.input, inputStyle]}
-            placeholder={!isFocused ? placeholder : ''}
-            keyboardType="phone-pad"
-            value={value}
-            onChangeText={onChangeText}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            maxLength={maxLength}
-            placeholderTextColor={theme.CONTENT_SECONDRY['light']}
-          />
-        </View>
-      </View>
-      {errorMessage ? (
-        <CustomTypography
-          variant={'L2_REGULAR'}
-          text={errorMessage ?? ''}
-          style={{
-            ...styles.errorStyle,
-            color: DHRE_DEFAULT.DH_SEMENTIC_ERROR,
-          }}
-        />
-      ) : null}
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
-    borderWidth: 1,
-    height: verticalScale(48),
-    borderRadius: moderateScale(8),
-    paddingHorizontal: horizontalScale(10),
-    paddingVertical: verticalScale(0),
-    marginTop: verticalScale(20),
-  },
-  countryPickerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: horizontalScale(10),
-  },
-  callingCode: {
-    fontSize: moderateScale(16),
-    color: DHRE_COLORS_TEXT.DH_BLACK,
-  },
-  input: {
-    flex: 1,
-    fontSize: moderateScale(16),
-    borderLeftWidth: 1,
-    borderLeftColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
-    paddingLeft: horizontalScale(8),
-  },
-  floatingLabel: {
-    position: 'absolute',
-    left: horizontalScale(-88),
-    top: verticalScale(-8),
-    fontSize: moderateScale(12),
-    color: DHRE_COLORS_TEXT.DH_BLACK,
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-    paddingHorizontal: horizontalScale(4),
-    zIndex: 1,
-  },
-  errorStyle: {
-    marginTop: verticalScale(4),
-  },
-});
-
-export default CountryDropDown;

package/src/components/countryPicker/index.ts

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

package/src/components/customDocumentPicker/CustomDocumentPicker.interface.ts

@@ -1,13 +0,0 @@
-import {TextStyle, ViewStyle} from 'react-native';
-import {DocumentPickerResponse} from 'react-native-document-picker';
-
-export interface CustomDocumentPickerProps {
-  onDocumentUpload: (base64: string, document?: DocumentPickerResponse) => void;
-  title?: string;
-  hint?: string;
-  maxFileSize?: number;
-  fileTypes?: string[];
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  hintStyle?: TextStyle;
-}

package/src/components/customDocumentPicker/CustomDocumentPicker.styles.ts

@@ -1,33 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {
-  verticalScale,
-  horizontalScale,
-  moderateScale,
-} from '../../utils/stylehelper';
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: verticalScale(16),
-    paddingHorizontal: horizontalScale(24),
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    borderRadius: moderateScale(8),
-    marginBottom: verticalScale(8),
-  },
-  fileUploadContainerStyle: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: verticalScale(16),
-    paddingHorizontal: horizontalScale(24),
-    borderRadius: moderateScale(8),
-    marginBottom: verticalScale(8),
-  },
-  innerContainer: {flexDirection: 'row', columnGap: horizontalScale(24)},
-  titleContainer: {gap: verticalScale(4)},
-});
-
-export default styles;

package/src/components/customDocumentPicker/CustomDocumentPicker.tsx

@@ -1,100 +0,0 @@
-import React, {useState, useCallback, memo} from 'react';
-import {View, Pressable, Alert} from 'react-native';
-import DocumentPicker, {
-  DocumentPickerResponse,
-} from 'react-native-document-picker';
-import RNFS from 'react-native-fs';
-import {FileIcon, Trash, UploadFile} from '../../assets';
-import {FontStyle} from '../../utils/appEnum';
-import CustomTypography from '../customTypography';
-import {useTheme} from '../../theme/ThemeContext';
-import styles from './CustomDocumentPicker.styles';
-import {CustomDocumentPickerProps} from './CustomDocumentPicker.interface';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-
-const CustomDocumentPicker = ({
-  onDocumentUpload,
-  title = 'Upload Images/Videos',
-  hint = 'PNG, JPEG (max size. 4MB)',
-  maxFileSize = 4,
-  fileTypes = [DocumentPicker.types.images, DocumentPicker.types.pdf],
-  containerStyle,
-  titleStyle,
-  hintStyle,
-}: CustomDocumentPickerProps) => {
-  const [error, setError] = useState('');
-  const [docDetails, setDocDetails] = useState<DocumentPickerResponse>();
-  const {theme} = useTheme();
-
-  const pickDocument = useCallback(async () => {
-    try {
-      const res = await DocumentPicker.pickSingle({
-        type: fileTypes,
-      });
-
-      if (res?.size && res.size > maxFileSize * 1024 * 1024) {
-        setError(
-          `File size higher than ${maxFileSize}MB. Please upload a smaller file.`,
-        );
-        return;
-      }
-
-      setError(''); // Clear error on successful upload
-      setDocDetails(res);
-      const base64Data = await RNFS.readFile(res.uri, 'base64');
-      onDocumentUpload(base64Data, res); // Pass base64 data to onDocumentUpload
-    } catch (err) {
-      if (DocumentPicker.isCancel(err)) {
-        Alert.alert('User canceled the picker');
-      } else if (err instanceof Error) {
-        Alert.alert('Unknown Error: ' + err.message);
-      } else {
-        Alert.alert('Unknown Error: ' + JSON.stringify(err));
-      }
-    }
-  }, [fileTypes, maxFileSize, onDocumentUpload]);
-
-  const removeDocument = useCallback(() => {
-    setDocDetails(undefined);
-  }, []);
-
-  return (
-    <>
-      <View
-        style={[
-          docDetails ? styles.fileUploadContainerStyle : styles.container,
-          {borderColor: error ? theme.ERROR : theme.BORDER_SECONDRY},
-          docDetails ? {backgroundColor: theme.SURFACE_SECONDARY} : {},
-          containerStyle,
-        ]}>
-        <Pressable style={styles.innerContainer} onPress={pickDocument}>
-          {docDetails ? <FileIcon /> : <UploadFile />}
-          <View style={styles.titleContainer}>
-            <CustomTypography
-              variant={FontStyle.L2_REGULAR}
-              text={docDetails?.name ?? title}
-              style={[{color: theme.CONTENT_PRIMARY}, titleStyle]}
-            />
-            {!docDetails && (
-              <CustomTypography
-                variant={FontStyle.L3_REGULAR}
-                text={hint}
-                style={[{color: theme.CONTENT_SECONDRY}, hintStyle]}
-              />
-            )}
-          </View>
-        </Pressable>
-        {docDetails && <Trash onPress={removeDocument} />}
-      </View>
-      {error && (
-        <CustomTypography
-          variant={FontStyle.L2_REGULAR}
-          text={error}
-          style={{color: theme.ERROR}}
-        />
-      )}
-    </>
-  );
-};
-
-export default withThemeProvider(memo(CustomDocumentPicker));

package/src/components/customDocumentPicker/index.ts

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

package/src/components/customDropdown/CustomDropdown.interface.ts

@@ -1,15 +0,0 @@
-import {ReactElement} from 'react';
-import {ViewStyle} from 'react-native';
-
-export interface CustomDropdownProps {
-  label: string;
-  placeholder?: string;
-  options: Array<{id: string; value: string; label: string}>;
-  selectedValue?: {id: string; value: string; label: string};
-  oneSelect: (option: {id: string; value: string; label: string}) => void;
-  testId?: string;
-  iconName?: ReactElement;
-  iconStyle?: ViewStyle;
-  upArrowIcon: ReactElement;
-  downArrowIcon: ReactElement;
-}