dhre-ui-kit 0.0.94 → 0.0.96

package/src/components/dateRangePicker/DateRangePicker.tsx

@@ -1,108 +0,0 @@
-import React, {useState} from 'react';
-import {View} from 'react-native';
-import {Calendar} from 'react-native-calendars';
-import Button from '../button';
-import {
-  DateRangePickerProps,
-  DayType,
-  MarkedDate,
-} from './DateRangePicker.interface';
-import styles from './DateRangePicker.styles';
-
-const DateRangePicker = (props: DateRangePickerProps) => {
-  const {onButtonPress} = props;
-  const [selectedRange, setSelectedRange] = useState<{
-    startDate: string;
-    endDate: string;
-  }>({
-    startDate: '',
-    endDate: '',
-  });
-
-  const onDayPress = (day: DayType) => {
-    const {dateString} = day;
-    const {startDate, endDate} = selectedRange;
-
-    if (!startDate || (startDate && endDate)) {
-      setSelectedRange({startDate: dateString, endDate: ''});
-    } else if (startDate && !endDate) {
-      if (new Date(dateString) >= new Date(startDate)) {
-        setSelectedRange({startDate, endDate: dateString});
-      } else {
-        setSelectedRange({startDate: dateString, endDate: ''});
-      }
-    }
-  };
-
-  const getMarkedDates = () => {
-    const {startDate, endDate} = selectedRange;
-
-    const markedDates: {[key: string]: MarkedDate} = {};
-
-    if (startDate) {
-      markedDates[startDate] = {
-        startingDay: true,
-        color: '#2DE3A6',
-        textColor: '#000000',
-      };
-    }
-    if (endDate) {
-      markedDates[endDate] = {
-        endingDay: true,
-        color: '#2DE3A6',
-        textColor: '#000000',
-      };
-    }
-
-    if (startDate && endDate) {
-      const start = new Date(startDate);
-      const end = new Date(endDate);
-
-      while (start < end) {
-        start.setDate(start.getDate() + 1);
-        markedDates[start.toISOString().split('T')[0]] = {
-          color: '#2DE3A6',
-          textColor: '#000000',
-        };
-      }
-    }
-
-    return markedDates;
-  };
-
-  const isButtonDisabled = !selectedRange.startDate || !selectedRange.endDate;
-
-  return (
-    <View>
-      <Calendar
-        markedDates={getMarkedDates()}
-        mode="date"
-        markingType={'period'}
-        theme={{
-          calendarBackground: 'transparent',
-          arrowColor: '#fff',
-          monthTextColor: '#FFFFFF',
-          dayTextColor: '#A7A7A7',
-          todayTextColor: '#2DE3A6',
-        }}
-        style={{
-          backgroundColor: 'transparent',
-          color: '#A7A7A7',
-        }}
-        onDayPress={onDayPress}
-        {...props}
-      />
-      <Button
-        title="Apply"
-        onPress={() => {
-          onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
-        }}
-        containerStyle={styles.applyButton}
-        textStyle={styles.applyButtonText}
-        disabled={isButtonDisabled}
-      />
-    </View>
-  );
-};
-
-export default DateRangePicker;

package/src/components/dateRangePicker/index.ts

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

package/src/components/dropDown/DropDown.tsx

@@ -1,145 +0,0 @@
-import React, {useState} from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  ViewStyle,
-  TextStyle,
-  ImageStyle,
-} from 'react-native';
-import {Dropdown} from 'react-native-element-dropdown';
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
-import theme from '../../theme/themes';
-
-interface CustomDropdownProps {
-  data: {[key: string]: string}[];
-  labelField?: string;
-  valueField?: string;
-  label?: string;
-  placeholder?: string;
-  containerStyle?: ViewStyle;
-  dropdownStyle?: ViewStyle;
-  placeholderStyle?: TextStyle;
-  selectedTextStyle?: TextStyle;
-  iconStyle?: ImageStyle;
-  labelStyle?: TextStyle;
-  defaultValue?: string;
-  iconColor?: string;
-  itemTextStyle?: TextStyle;
-  onValueChange?: (value: string) => void;
-  itemContainerStyle?: ViewStyle;
-}
-
-const CustomDropdown: React.FC<CustomDropdownProps> = ({
-  data,
-  labelField = 'label',
-  valueField = 'value',
-  label,
-  placeholder,
-  containerStyle,
-  dropdownStyle,
-  placeholderStyle,
-  selectedTextStyle,
-  iconStyle,
-  labelStyle,
-  defaultValue,
-  iconColor,
-  itemTextStyle,
-  onValueChange,
-  itemContainerStyle,
-}) => {
-  const [value, setValue] = useState<string | undefined>(defaultValue);
-  const [isFocus, setIsFocus] = useState<boolean>(false);
-
-  const renderLabel = () => {
-    if (value || isFocus) {
-      return (
-        <Text
-          style={[
-            styles.label,
-            labelStyle,
-            isFocus && {color: theme.BORDER_INVERTED['light']},
-          ]}>
-          {label}
-        </Text>
-      );
-    }
-    return null;
-  };
-
-  const handleValueChange = (item: {[key: string]: string}) => {
-    const newValue = item[valueField];
-    setValue(newValue);
-    setIsFocus(false);
-    if (onValueChange) {
-      onValueChange(newValue);
-    }
-  };
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      {label && renderLabel()}
-      <Dropdown
-        style={[
-          styles.dropdown,
-          dropdownStyle,
-          isFocus && {borderColor: theme.BORDER_INVERTED['light']},
-        ]}
-        placeholderStyle={[styles.placeholderStyle, placeholderStyle]}
-        selectedTextStyle={[styles.selectedTextStyle, selectedTextStyle]}
-        iconStyle={[styles.iconStyle, iconStyle]}
-        data={data ?? []}
-        labelField={labelField}
-        valueField={valueField}
-        placeholder={!isFocus ? placeholder : ''}
-        value={value}
-        onFocus={() => setIsFocus(true)}
-        onBlur={() => setIsFocus(false)}
-        onChange={handleValueChange}
-        iconColor={iconColor}
-        dropdownPosition="bottom"
-        itemTextStyle={itemTextStyle}
-        itemContainerStyle={[styles.itemListStyle, itemContainerStyle]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: theme.SURFACE_STATIC['light'],
-    marginVertical: verticalScale(4), // External margin
-  },
-  dropdown: {
-    height: verticalScale(48),
-    borderColor: theme.BORDER_PRIMARY['light'],
-    borderWidth: 1,
-    borderRadius: 8,
-    paddingHorizontal: horizontalScale(12),
-    backgroundColor: theme.SURFACE_STATIC['light'],
-  },
-  label: {
-    position: 'absolute',
-    backgroundColor: theme.SURFACE_STATIC['light'],
-    left: horizontalScale(10),
-    top: verticalScale(-8),
-    zIndex: 10,
-    paddingHorizontal: horizontalScale(4),
-    fontSize: verticalScale(12),
-  },
-  placeholderStyle: {
-    fontSize: verticalScale(16),
-  },
-  selectedTextStyle: {
-    fontSize: verticalScale(16),
-  },
-  iconStyle: {
-    width: horizontalScale(20),
-    height: verticalScale(20),
-  },
-  itemListStyle: {
-    maxHeight: verticalScale(150),
-  },
-});
-
-export default CustomDropdown;

package/src/components/dropDown/index.ts

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

package/src/components/feedback/feedback.style.ts

@@ -1,48 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'black',
-    padding: 20,
-    justifyContent: 'center',
-  },
-  headerText: {
-    color: 'white',
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 20,
-  },
-  textInput: {
-    backgroundColor: 'white',
-    borderRadius: 10,
-    padding: 15,
-    color: 'black',
-    fontSize: 16,
-    textAlignVertical: 'top',
-    minHeight: 100,
-  },
-  charCounter: {
-    textAlign: 'left',
-    marginTop: 10,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    //justifyContent: "space-between",
-    marginTop: 20,
-  },
-  feedbackButton: {
-    backgroundColor: 'transparent',
-    borderColor: 'white',
-    borderWidth: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 30,
-  },
-  cancelButton: {
-    paddingVertical: 10,
-    paddingHorizontal: 40,
-  },
-});
-
-export default styles;

package/src/components/feedback/feedback.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import {View, Text, TextInput, Pressable} from 'react-native';
-import CustomText from '../customText/CustomText';
-
-import styles from './feedback.style';
-const FeedbackForm = ({
-  title,
-  clearAllData,
-  handleSendFeedback,
-  feedback,
-  setFeedback,
-}: {
-  title: string;
-  feedback: string;
-  clearAllData?: () => void;
-  handleSendFeedback?: () => void;
-  setFeedback: (val: string) => void;
-}) => {
-  const maxChars = 200;
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.headerText}>{title}</Text>
-
-      <TextInput
-        style={[styles.textInput, {height: Math.max(100)}]}
-        placeholder="Would you like to tell us more..."
-        placeholderTextColor="gray"
-        multiline
-        maxLength={maxChars}
-        value={feedback}
-        onChangeText={text => setFeedback(text)}
-      />
-      <CustomText
-        text={`${feedback.length}/${maxChars} characters`}
-        variant="L2_REGULAR"
-        textColor="CONTENT_SECONDRY"
-        style={styles.charCounter}
-      />
-      <View style={styles.buttonContainer}>
-        <Pressable style={styles.feedbackButton} onPress={handleSendFeedback}>
-          <CustomText
-            text="Send feedback"
-            variant="L1_REGULAR"
-            textColor="CONTENT_PRIMARY"
-          />
-        </Pressable>
-
-        <Pressable style={styles.cancelButton} onPress={clearAllData}>
-          <CustomText
-            text="Cancel"
-            variant="L1_REGULAR"
-            textColor="CONTENT_PRIMARY"
-          />
-        </Pressable>
-      </View>
-    </View>
-  );
-};
-
-export default FeedbackForm;

package/src/components/feedback/index.ts

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

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

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

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

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

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

package/src/components/horizontalLine/Line.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import {View, StyleSheet, ViewStyle} from 'react-native';
-import {useTheme} from '../../theme/ThemeContext';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-
-const HorizontalLine = ({style}: {style?: ViewStyle}) => {
-  const {theme} = useTheme();
-  return (
-    <View
-      style={[
-        styles.line,
-        {backgroundColor: theme['SURFACE_SECONDARY']},
-        style,
-      ]}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  line: {
-    height: 1,
-    width: '100%',
-  },
-});
-
-export default withThemeProvider(HorizontalLine);

package/src/components/horizontalLine/index.ts

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

package/src/components/notificationBandge/NotificationBandge.interface.tsx

@@ -1,3 +0,0 @@
-export interface NotificationBandgeProps {
-  notificationCount?: number;
-}

package/src/components/notificationBandge/NotificationBandge.styles.tsx

@@ -1,26 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {FONT_STYLES} from '../../theme/fonts';
-
-const styles = StyleSheet.create({
-  iconContainer: {
-    position: 'relative',
-    alignItems: 'center',
-  },
-  badge: {
-    position: 'absolute',
-    top: -5,
-    right: -5,
-    minWidth: 20,
-    height: 20,
-    borderRadius: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5524A',
-  },
-  badgeText: {
-    ...FONT_STYLES.L3_BOLD,
-    color: '#fff',
-  },
-});
-
-export default styles;

package/src/components/notificationBandge/NotificationBandge.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import {View, Text} from 'react-native';
-import {BellSimple} from '../../assets';
-import styles from './NotificationBandge.styles';
-import {NotificationBandgeProps} from './NotificationBandge.interface';
-
-const NotificationBandge: React.FC<NotificationBandgeProps> = ({
-  notificationCount = 0,
-}) => {
-  if (notificationCount <= 0) {
-    return <BellSimple />;
-  }
-
-  return (
-    <View style={styles.iconContainer}>
-      <BellSimple />
-      <View style={styles.badge}>
-        <Text style={[styles.badgeText]}>
-          {notificationCount > 99 ? '99+' : notificationCount}
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-export default NotificationBandge;

package/src/components/notificationBandge/index.tsx

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