dhre-ui-kit 0.0.94 → 0.0.96

package/src/components/rating/rating.test.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react-native';
-import StarRating from './rating';
-import {CalenderDots} from '../../assets';
-
-describe('Star component', () => {
-  it('renders a full star for a rating of 1', () => {
-    const rating = 1;
-    const count = 5;
-    const size = 20;
-
-    render(
-      <StarRating
-        rating={rating}
-        count={count}
-        size={size}
-        fullStarIcon={<CalenderDots />}
-        halfStarIcon={<CalenderDots />}
-      />,
-    );
-
-    const stars = screen.getAllByTestId('star');
-    expect(stars.length).toBe(1);
-  });
-
-  it('renders a half star for a rating of 1.5', () => {
-    const rating = 1.5;
-    const count = 5;
-    const size = 20;
-
-    render(
-      <StarRating
-        rating={rating}
-        count={count}
-        size={size}
-        fullStarIcon={<CalenderDots />}
-        halfStarIcon={<CalenderDots />}
-      />,
-    );
-    const stars = screen.getAllByTestId('star');
-    expect(stars.length).toBe(1);
-  });
-
-  it('renders empty stars for a rating below 1', () => {
-    const rating = 0.5;
-    const count = 5;
-    const size = 20;
-
-    render(
-      <StarRating
-        rating={rating}
-        count={count}
-        size={size}
-        fullStarIcon={<CalenderDots />}
-        halfStarIcon={<CalenderDots />}
-      />,
-    );
-    const stars = screen.getAllByTestId('star');
-    expect(stars.length).toBe(1);
-  });
-});

package/src/components/rating/rating.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import {View, ViewStyle} from 'react-native';
-import styles from './rating.styles';
-
-interface StarProps {
-  rating: number;
-  count: number;
-  size: number;
-  fullStarIcon: React.ReactElement;
-  halfStarIcon: React.ReactElement;
-  fullStarColor?: string;
-  emptyStarColor?: string;
-  starStyle?: ViewStyle;
-}
-
-const splitRating = (rating: number): [number, number] => {
-  const isDecimal = rating !== Math.floor(rating);
-  if (isDecimal) {
-    const integerPart = Math.floor(rating);
-    const decimalPart = rating - integerPart;
-    return [integerPart, decimalPart];
-  } else {
-    return [rating, 0];
-  }
-};
-
-const drawStar = (
-  starIndex: number,
-  ratingArray: [number, number],
-  size: number,
-  fullStarIcon: React.ReactElement,
-  halfStarIcon: React.ReactElement,
-  fullStarColor: string,
-  emptyStarColor: string,
-): JSX.Element => {
-  const [fullStars, decimalPart] = ratingArray;
-
-  if (starIndex <= fullStars) {
-    return React.cloneElement(fullStarIcon, {
-      style: {height: size, width: size},
-      fill: fullStarColor,
-      testID: `star-${starIndex}`,
-    });
-  } else if (starIndex === fullStars + 1 && decimalPart >= 0.5) {
-    return React.cloneElement(halfStarIcon, {
-      style: {height: size, width: size},
-      fill: fullStarColor,
-      testID: `star-${starIndex}`,
-    });
-  } else {
-    return React.cloneElement(fullStarIcon, {
-      style: {height: size, width: size},
-      fill: emptyStarColor,
-      testID: `star-${starIndex}`,
-    });
-  }
-};
-
-const Star: React.FC<StarProps> = ({
-  rating,
-  count,
-  size,
-  fullStarIcon,
-  halfStarIcon,
-  fullStarColor = 'gold',
-  emptyStarColor = 'gray',
-  starStyle,
-}) => {
-  const stars: React.ReactElement[] = [];
-  for (let i = 0; i < count; i++) {
-    const starIndex = i + 1;
-    const ratingArray = splitRating(rating);
-    const starType = drawStar(
-      starIndex,
-      ratingArray,
-      size,
-      fullStarIcon,
-      halfStarIcon,
-      fullStarColor,
-      emptyStarColor,
-    );
-    stars.push(
-      <View key={i} style={[styles.star, starStyle]}>
-        {starType}
-      </View>,
-    );
-  }
-
-  return (
-    <View style={styles.container} testID="star">
-      {stars}
-    </View>
-  );
-};
-
-export default Star;

package/src/components/scrollList/category.tsx

@@ -1,110 +0,0 @@
-import React, {useState} from 'react';
-import {ScrollView, Pressable, View, StyleSheet} from 'react-native';
-import CustomText from '../customText/CustomText';
-import {useTheme} from '../../theme/ThemeContext';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-
-interface ScrollableListProps {
-  data: {name: string; value: string; isError?: boolean}[] | undefined;
-  handleSelectCategory: (name: string, value: string) => void;
-  containerStyle?: object;
-  scrollViewContentStyle?: object;
-  itemStyle?: object;
-  selectedItemStyle?: object;
-  selectedItemTextColor?: string;
-  defaultItemTextColor?: string;
-  activeTab?: string;
-}
-
-const ScrollableList = ({
-  data,
-  handleSelectCategory,
-  containerStyle,
-  scrollViewContentStyle,
-  itemStyle,
-  selectedItemStyle,
-  selectedItemTextColor = 'CONTENT_PRIMARY',
-  defaultItemTextColor = 'CONTENT_SECONDRY',
-  activeTab,
-}: ScrollableListProps) => {
-  const [selectedItem, setSelectedItem] = useState<string | null>(
-    data && data.length > 0 ? data[0].name : null,
-  );
-  const {theme} = useTheme();
-  return (
-    <View style={[styles.container, containerStyle]}>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={[
-          styles.scrollViewContent,
-          scrollViewContentStyle,
-        ]}>
-        {data?.map(item => (
-          <Pressable
-            key={item.value} // Use item.value as the key
-            style={[
-              styles.item,
-              itemStyle,
-              (activeTab ?? selectedItem) === item.name && [
-                styles.selectedItem,
-                selectedItemStyle,
-              ],
-            ]}
-            onPress={() => {
-              setSelectedItem(item.name);
-              handleSelectCategory(item.name, item.value);
-            }}>
-            <CustomText
-              text={item.name}
-              variant="L1_REGULAR"
-              textColor={
-                (activeTab ?? selectedItem) === item.name
-                  ? selectedItemTextColor
-                  : defaultItemTextColor
-              }
-            />
-            {item?.isError && (
-              <View
-                style={[
-                  styles.errorViewStyle,
-                  {
-                    backgroundColor: theme.SURFACE_BRAND_STATIC,
-                  },
-                ]}
-              />
-            )}
-          </Pressable>
-        ))}
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 10,
-  },
-  scrollViewContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    padding: 12,
-    borderBottomWidth: 2,
-    borderBottomColor: 'transparent',
-  },
-  selectedItem: {
-    borderBottomColor: 'white',
-  },
-  errorViewStyle: {
-    width: 6,
-    height: 6,
-    borderRadius: 100,
-  },
-});
-
-export default withThemeProvider(ScrollableList);

package/src/components/scrollList/index.ts

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

package/src/components/singleSelectionTag/TagSingleSelection.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import {View, Text, Pressable, FlatList, StyleSheet} from 'react-native';
-
-interface Tag {
-  value: string;
-  name: string;
-}
-
-interface TagsComponentProps {
-  tagList: Tag[];
-  selectedTag: string; // Allow null for unselected state
-  setSelectedTag: (val: string) => void; // Allow null for unselected state
-  handleTagPress?: (val: string) => void | undefined;
-}
-
-const TagsComponent: React.FC<TagsComponentProps> = ({
-  tagList,
-  selectedTag,
-  handleTagPress,
-}) => {
-  const reorderedTags = (): Tag[] => {
-    if (selectedTag) {
-      return [
-        tagList.find(tag => tag.name === selectedTag)!,
-        ...tagList.filter(tag => tag.name !== selectedTag),
-      ];
-    }
-    return tagList;
-  };
-
-  const renderTagItem = ({item}: {item: Tag}) => (
-    <Pressable
-      onPress={() => handleTagPress?.(item.name)}
-      style={[
-        styles.tagButton,
-        selectedTag === item?.name
-          ? styles.selectedTagButton
-          : styles.unselectedTagButton,
-      ]}>
-      <Text
-        style={[
-          styles.tagText,
-          selectedTag === item?.name
-            ? styles.selectedTagText
-            : styles.unselectedTagText,
-        ]}>
-        {item?.name}
-      </Text>
-      {selectedTag === item?.name && <Text style={styles.closeButton}>✕</Text>}
-    </Pressable>
-  );
-
-  return (
-    <View>
-      <FlatList
-        data={reorderedTags()}
-        renderItem={renderTagItem}
-        keyExtractor={item => item?.name}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.listContainer}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  listContainer: {
-    paddingHorizontal: 10,
-    alignItems: 'center',
-  },
-  tagButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 20,
-    marginHorizontal: 8,
-    borderWidth: 1,
-  },
-  selectedTagButton: {
-    backgroundColor: '#FFF',
-    borderColor: '#000',
-  },
-  unselectedTagButton: {
-    backgroundColor: 'transparent',
-    borderColor: '#888',
-  },
-  tagText: {
-    fontSize: 16,
-  },
-  selectedTagText: {
-    color: '#000',
-  },
-  unselectedTagText: {
-    color: '#888',
-  },
-  closeButton: {
-    marginLeft: 10,
-    fontSize: 18,
-    color: '#000',
-  },
-});
-
-export default TagsComponent;

package/src/components/singleSelectionTag/index.ts

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

package/src/components/stepper/index.tsx

@@ -1,105 +0,0 @@
-import {View} from 'react-native';
-import React from 'react';
-import {CheckWhite} from '../../assets';
-import {styles} from './styles';
-import {IData, IProps, Status} from './stepper.interface';
-import {FontStyle} from '../../utils/appEnum';
-import CustomTypography from '../customTypography';
-import {useTheme} from '../../theme/ThemeContext';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-
-const Stepper = ({
-  containerStyle,
-  showStepCount = false,
-  showStatus = false,
-  data,
-}: IProps) => {
-  const {theme} = useTheme();
-
-  const renderCircleStyle = (status?: string) => {
-    if (status === Status.Active) {
-      return {...styles.activeStepCircle, borderColor: theme.CONTENT_PRIMARY};
-    } else if (status === Status.Inactive) {
-      return {
-        ...styles.inactiveStepCircle,
-        borderColor: theme.CONTENT_SECONDRY,
-      };
-    } else if (status === Status.Completed) {
-      return {...styles.completeStepCircle, backgroundColor: theme.SUCCESS};
-    } else {
-      return {...styles.stepCountCircle, borderColor: theme.BORDER_PRIMARY};
-    }
-  };
-  const renderLableStyle = (status?: string) => {
-    if (status === Status.Active) {
-      return {...styles.activeStepLabel, color: theme.CONTENT_PRIMARY};
-    } else if (status === Status.Inactive) {
-      return {...styles.inactiveStepLabel, color: theme.CONTENT_SECONDRY};
-    } else if (status === Status.Completed) {
-      return {...styles.completeStepLabel, color: theme.CONTENT_PRIMARY};
-    } else {
-      return {...styles.countStepLabel, color: theme.CONTENT_PRIMARY};
-    }
-  };
-
-  const renderDividerStyle = (status?: string) => {
-    if (status === Status.Active) {
-      return {borderColor: theme.BORDER_PRIMARY};
-    } else if (status === Status.Inactive) {
-      return {borderColor: theme.BORDER_PRIMARY};
-    } else if (status === Status.Completed) {
-      return {
-        ...styles.completeStepDivider,
-        borderColor: theme.CONTENT_PRIMARY,
-      };
-    } else {
-      return {borderColor: theme.CONTENT_SECONDRY};
-    }
-  };
-
-  return (
-    <View style={{...styles.stepperContainer, ...containerStyle}}>
-      {data?.map((item: IData, index) => {
-        const stepCircleStyle = renderCircleStyle(item?.status);
-        const dividerStyle = renderDividerStyle(item?.status);
-        const labelStyle = renderLableStyle(item?.status);
-        const lastViewStyle =
-          index === data?.length - 1 ? styles.lastStepWrapper : null;
-        return (
-          <View
-            key={index?.toString()}
-            style={{...styles.stepperWrapper, ...lastViewStyle}}>
-            <View style={styles.stepperSeparatorContainer}>
-              <View style={{...stepCircleStyle}}>
-                {showStepCount && (
-                  <CustomTypography
-                    text={item?.step}
-                    variant={FontStyle.L2_REGULAR}
-                    style={{
-                      color: theme.CONTENT_PRIMARY,
-                    }}
-                  />
-                )}
-                {showStatus && item?.status === Status.Completed && (
-                  <CheckWhite />
-                )}
-              </View>
-              {index != data?.length - 1 && (
-                <View style={{...styles.separator, ...dividerStyle}} />
-              )}
-            </View>
-            <View style={styles.lableContainer}>
-              <CustomTypography
-                text={item?.label}
-                variant={FontStyle.L3_REGULAR}
-                style={labelStyle}
-              />
-            </View>
-          </View>
-        );
-      })}
-    </View>
-  );
-};
-
-export default withThemeProvider(Stepper);

package/src/components/stepper/stepper.interface.ts

@@ -1,24 +0,0 @@
-import {ViewStyle} from 'react-native';
-
-type StatusType = 'Active' | 'Inactive' | 'Completed' | 'Rejected' | 'Count';
-
-export enum Status {
-  Active = 'Active',
-  Inactive = 'Inactive',
-  Completed = 'Completed',
-  Rejected = 'Rejected',
-  Count = 'Count',
-}
-
-export interface IData {
-  step: string;
-  label?: string;
-  status?: StatusType;
-}
-
-export interface IProps {
-  containerStyle?: ViewStyle;
-  showStepCount?: boolean;
-  showStatus?: boolean;
-  data: IData[];
-}

package/src/components/stepper/styles.ts

@@ -1,74 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  stepperContainer: {
-    flexDirection: 'row',
-    marginBottom: 24,
-    justifyContent: 'space-between',
-  },
-  stepperWrapper: {
-    flex: 1,
-    marginRight: 10,
-    overflow: 'hidden',
-  },
-  lastStepWrapper: {flex: 0.5},
-  stepperSeparatorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  activeStepCircle: {
-    height: 24,
-    width: 24,
-    borderRadius: 12,
-    alignItems: 'center',
-    borderWidth: 2,
-    justifyContent: 'center',
-  },
-  activeStepLabel: {
-    marginTop: 11,
-  },
-  inactiveStepCircle: {
-    height: 24,
-    width: 24,
-    borderRadius: 12,
-    alignItems: 'center',
-    borderWidth: 2,
-    justifyContent: 'center',
-  },
-  inactiveStepLabel: {
-    marginTop: 11,
-  },
-  completeStepCircle: {
-    height: 24,
-    width: 24,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  completeStepLabel: {
-    marginTop: 11,
-  },
-  completeStepDivider: {
-    borderStyle: 'solid',
-  },
-  stepCountCircle: {
-    height: 24,
-    width: 24,
-    borderRadius: 12,
-    alignItems: 'center',
-    borderWidth: 1,
-    justifyContent: 'center',
-  },
-  countStepLabel: {
-    marginTop: 11,
-  },
-  separator: {
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    width: '100%',
-    marginLeft: 10,
-  },
-  lableContainer: {width: 60},
-});
-
-export {styles};

package/src/components/swipableList/SwipableList.interface.ts

@@ -1,52 +0,0 @@
-import {ReactNode} from 'react';
-import {TextStyle, ViewStyle} from 'react-native';
-
-export interface ListItem {
-  id: string;
-  templateId: number;
-  title: string;
-  subTitle: string;
-  icon: string;
-  isRead: boolean;
-  isPinned: boolean;
-  isDeleted: boolean;
-  isActionable: boolean;
-  category: string;
-  url: string;
-  channel: string;
-  status: string;
-  createdBy: string;
-  createdDateTime: string;
-}
-
-export interface ActionButtonProps {
-  icon: ReactNode;
-  title?: string;
-  onPress: () => void;
-  style?: object;
-  testID: string;
-}
-
-export interface SwipableListProps {
-  data: ListItem[];
-  testId?: string;
-  renderItem: (item: ListItem) => ReactNode;
-  leftPrimaryActionActiveIcon?: ReactNode;
-  leftPrimaryActionActiveTitle?: string;
-  leftPrimaryActionInActiveIcon?: ReactNode;
-  leftPrimaryActionInActiveTitle?: string;
-  leftPrimaryActionHandler?: (item: ListItem) => void;
-  leftPrimaryActionStyle?: ViewStyle;
-  leftSecondaryActionActiveIcon?: ReactNode;
-  leftSecondaryActionActiveTitle?: string;
-  leftSecondaryActionInActiveIcon?: ReactNode;
-  leftSecondaryActionInActiveTitle?: string;
-  leftSecondaryActionHandler?: (item: ListItem) => void;
-  leftSecondaryActionStyle?: ViewStyle;
-  rightPrimaryActionIcon?: ReactNode;
-  rightPrimaryActionTitle?: string;
-  rightPrimaryActionHandler?: (item: ListItem) => void;
-  rightPrimaryActionStyle?: ViewStyle;
-  itemStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-}

package/src/components/swipableList/SwipableList.styles.ts

@@ -1,30 +0,0 @@
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
-import {StyleSheet} from 'react-native';
-
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  swippableContainer: {paddingVertical: verticalScale(16)},
-  actionButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  titleStyle: {
-    color: '#fff',
-  },
-  leftActions: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: horizontalScale(150),
-    gap: horizontalScale(24),
-  },
-  rightActions: {
-    flexDirection: 'row',
-    paddingHorizontal: horizontalScale(24),
-  },
-  seprator: {
-    height: verticalScale(16),
-  },
-});