dhre-ui-kit 0.0.95 → 0.0.96

package/src/components/swipableList/SwipableList.test.tsx

@@ -1,209 +0,0 @@
-import React from 'react';
-import {fireEvent, render} from '@testing-library/react-native';
-import SwipableList from './SwipableList';
-import {CalenderDots} from '../../assets';
-import {Text} from 'react-native';
-
-jest.mock('react-native-gesture-handler', () => {
-  const mockGestureHandler = {
-    swipeable: jest.fn(),
-    gestureHandlerRootHOC: jest.fn(),
-  };
-  return {
-    PanGestureHandler: mockGestureHandler,
-    TapGestureHandler: mockGestureHandler,
-    LongPressGestureHandler: mockGestureHandler,
-    State: {},
-    Directions: {},
-    Swipeable: jest
-      .fn()
-      .mockImplementation(
-        ({children, renderLeftActions, renderRightActions}) => (
-          <div>
-            {renderLeftActions && renderLeftActions()}
-            {children}
-            {renderRightActions && renderRightActions()}
-          </div>
-        ),
-      ),
-    GestureHandlerRootView: jest
-      .fn()
-      .mockImplementation(({children}) => <div>{children}</div>),
-  };
-});
-const customStyle = {backgroundColor: 'red', padding: 20};
-
-describe('Notification Component', () => {
-  const notifications = [
-    {
-      id: '1',
-      title: 'Notification 1',
-      isPinned: false,
-      isRead: true,
-      templateId: 1,
-      subTitle: 'Welcome Albus',
-      icon: 'https://svgshare.com/i/U7z.svg',
-      isDeleted: false,
-      isActionable: false,
-      category: 'general',
-      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
-      channel: 'push',
-      status: 'sent',
-      createdBy: 'system',
-      createdDateTime: '2024-09-02T12:00:00+05:30',
-    },
-    {
-      id: '2',
-      title: 'Notification 2',
-      isPinned: true,
-      isRead: false,
-      templateId: 1,
-      subTitle: 'Welcome Albus',
-      icon: 'https://svgshare.com/i/U7z.svg',
-      isDeleted: false,
-      isActionable: false,
-      category: 'general',
-      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
-      channel: 'push',
-      status: 'sent',
-      createdBy: 'system',
-      createdDateTime: '2024-09-02T12:00:00+05:30',
-    },
-  ];
-
-  const notificationsPinned = [
-    {
-      id: '1',
-      title: 'Notification 1',
-      isPinned: true,
-      isRead: true,
-      templateId: 1,
-      subTitle: 'Welcome Albus',
-      icon: 'https://svgshare.com/i/U7z.svg',
-      isDeleted: false,
-      isActionable: false,
-      category: 'general',
-      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
-      channel: 'push',
-      status: 'sent',
-      createdBy: 'system',
-      createdDateTime: '2024-09-02T12:00:00+05:30',
-    },
-    {
-      id: '2',
-      title: 'Notification 2',
-      isPinned: false,
-      isRead: false,
-      templateId: 1,
-      subTitle: 'Welcome Albus',
-      icon: 'https://svgshare.com/i/U7z.svg',
-      isDeleted: false,
-      isActionable: false,
-      category: 'general',
-      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
-      channel: 'push',
-      status: 'sent',
-      createdBy: 'system',
-      createdDateTime: '2024-09-02T12:00:00+05:30',
-    },
-  ];
-
-  const notificationsUnPinned = [
-    {
-      id: '1',
-      title: 'Notification 1',
-      isPinned: false,
-      isRead: false,
-      templateId: 1,
-      subTitle: 'Welcome Albus',
-      icon: 'https://svgshare.com/i/U7z.svg',
-      isDeleted: false,
-      isActionable: false,
-      category: 'general',
-      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
-      channel: 'push',
-      status: 'sent',
-      createdBy: 'system',
-      createdDateTime: '2024-09-02T12:00:00+05:30',
-    },
-    {
-      id: '2',
-      title: 'Notification 2',
-      isPinned: false,
-      isRead: false,
-      templateId: 1,
-      subTitle: 'Welcome Albus',
-      icon: 'https://svgshare.com/i/U7z.svg',
-      isDeleted: false,
-      isActionable: false,
-      category: 'general',
-      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
-      channel: 'push',
-      status: 'sent',
-      createdBy: 'system',
-      createdDateTime: '2024-09-02T12:00:00+05:30',
-    },
-  ];
-
-  const mockLeftPrimaryActionHandler = jest.fn();
-  const mockRightPrimaryActionHandler = jest.fn();
-  const mockLeftSecondaryActionHandler = jest.fn();
-
-  const commonProps = {
-    leftPrimaryActionIcon: <CalenderDots />,
-    leftPrimaryActionHandler: mockLeftPrimaryActionHandler,
-    leftPrimaryActionStyle: {backgroundColor: 'red'},
-    leftSecondaryActionIcon: <CalenderDots />,
-    leftSecondaryActionHandler: mockLeftSecondaryActionHandler,
-    leftSecondaryActionStyle: {backgroundColor: 'blue'},
-    rightPrimaryActionIcon: <CalenderDots />,
-    rightPrimaryActionHandler: mockRightPrimaryActionHandler,
-    rightPrimaryActionStyle: {backgroundColor: 'green'},
-    itemStyle: customStyle,
-    titleStyle: customStyle,
-  };
-
-  const props = {
-    ...commonProps,
-    data: notifications,
-    leftPrimaryActionTitle: 'Pin',
-    leftSecondaryActionTitle: 'Read',
-    rightPrimaryActionTitle: 'Delete',
-  };
-  const propsUnPinned = {
-    ...commonProps,
-    data: notificationsUnPinned,
-    leftPrimaryActionTitle: 'Pin',
-    leftSecondaryActionTitle: 'Read',
-    rightPrimaryActionTitle: 'Delete',
-  };
-
-  const propsPinned = {
-    ...commonProps,
-    data: notificationsPinned,
-    leftPrimaryActionTitle: '',
-    leftSecondaryActionTitle: '',
-    rightPrimaryActionTitle: '',
-  };
-
-  it('renders Notification component correctly', () => {
-    const {getByTestId} = render(
-      <SwipableList {...props} renderItem={() => <Text>Title</Text>} />,
-    );
-    expect(getByTestId('SWIPABLE-LIST')).toBeTruthy();
-    fireEvent.press(getByTestId('SWIPABLE-LIST-RIGHT-PRIMARY-1'));
-  });
-
-  it('renders Notification component when pinned', () => {
-    const {getByTestId} = render(
-      <SwipableList {...propsPinned} renderItem={() => <Text>Title</Text>} />,
-    );
-    expect(getByTestId('SWIPABLE-LIST')).toBeTruthy();
-  });
-  it('renders Notification component when pinned', () => {
-    const {getByTestId} = render(
-      <SwipableList {...propsUnPinned} renderItem={() => <Text>Title</Text>} />,
-    );
-    expect(getByTestId('SWIPABLE-LIST')).toBeTruthy();
-  });
-});

package/src/components/swipableList/SwipableList.tsx

@@ -1,137 +0,0 @@
-import React, {ReactNode} from 'react';
-import {FlatList, View, Pressable} from 'react-native';
-import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
-import {
-  ActionButtonProps,
-  ListItem,
-  SwipableListProps,
-} from './SwipableList.interface';
-import {styles} from './SwipableList.styles';
-import CustomTypography from '../customTypography/CustomTypography';
-
-const SwipableList = (props: SwipableListProps) => {
-  const {
-    data,
-    testId = 'SWIPABLE-LIST',
-    leftPrimaryActionActiveIcon,
-    leftPrimaryActionInActiveIcon,
-    leftPrimaryActionActiveTitle,
-    leftPrimaryActionInActiveTitle,
-    leftSecondaryActionActiveIcon,
-    leftSecondaryActionInActiveIcon,
-    leftSecondaryActionActiveTitle,
-    leftSecondaryActionInActiveTitle,
-    leftPrimaryActionHandler,
-    leftPrimaryActionStyle,
-    leftSecondaryActionHandler,
-    leftSecondaryActionStyle,
-    rightPrimaryActionIcon,
-    rightPrimaryActionTitle,
-    rightPrimaryActionHandler,
-    rightPrimaryActionStyle,
-    titleStyle,
-  } = props;
-
-  const ActionButton = ({
-    icon,
-    title,
-    onPress,
-    style,
-    testID,
-  }: ActionButtonProps) => (
-    <Pressable
-      testID={testID}
-      onPress={onPress}
-      style={[styles.actionButton, style]}>
-      {icon}
-      <CustomTypography
-        variant="L1_REGULAR"
-        style={[styles.titleStyle, titleStyle]}
-        text={title}
-      />
-    </Pressable>
-  );
-
-  const leftActionHandle = (
-    item: ListItem,
-    leftPrimaryActionIcon: ReactNode,
-    leftPrimaryActionTitle: string | undefined,
-    leftSecondaryActionIcon: ReactNode,
-    leftSecondaryActionTitle: string | undefined,
-  ) => (
-    <View style={[styles.leftActions, leftPrimaryActionStyle]}>
-      {leftPrimaryActionIcon && (
-        <ActionButton
-          icon={leftPrimaryActionIcon}
-          title={leftPrimaryActionTitle}
-          onPress={() => leftPrimaryActionHandler?.(item)}
-          style={leftPrimaryActionStyle}
-          testID={`${testId}-LEFT-PRIMARY-${item.id}`}
-        />
-      )}
-      {leftSecondaryActionIcon && (
-        <ActionButton
-          icon={leftSecondaryActionIcon}
-          title={leftSecondaryActionTitle}
-          onPress={() => leftSecondaryActionHandler?.(item)}
-          style={leftSecondaryActionStyle}
-          testID={`${testId}-LEFT-SECONDARY-${item.id}`}
-        />
-      )}
-    </View>
-  );
-
-  const rightActionHandle = (item: ListItem) => (
-    <View style={[styles.rightActions, rightPrimaryActionStyle]}>
-      {rightPrimaryActionIcon && (
-        <ActionButton
-          icon={rightPrimaryActionIcon}
-          title={rightPrimaryActionTitle || ''}
-          onPress={() => rightPrimaryActionHandler?.(item)}
-          style={rightPrimaryActionStyle}
-          testID={`${testId}-RIGHT-PRIMARY-${item.id}`}
-        />
-      )}
-    </View>
-  );
-
-  const renderItem = ({item}: {item: ListItem}) => (
-    <GestureHandlerRootView testID={`${testId}-LIST`} style={styles.container}>
-      <Swipeable
-        renderLeftActions={() =>
-          leftActionHandle(
-            item,
-            item.isPinned
-              ? leftPrimaryActionInActiveIcon
-              : leftPrimaryActionActiveIcon,
-            item.isPinned
-              ? leftPrimaryActionInActiveTitle
-              : leftPrimaryActionActiveTitle,
-            item.isRead
-              ? leftSecondaryActionInActiveIcon
-              : leftSecondaryActionActiveIcon,
-            item.isRead
-              ? leftSecondaryActionInActiveTitle
-              : leftSecondaryActionActiveTitle,
-          )
-        }
-        renderRightActions={() => rightActionHandle(item)}
-        containerStyle={styles.swippableContainer}>
-        {props?.renderItem(item)}
-      </Swipeable>
-    </GestureHandlerRootView>
-  );
-
-  return (
-    <View testID={testId}>
-      <FlatList
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={item => item.id}
-        ItemSeparatorComponent={() => <View style={styles.seprator} />}
-      />
-    </View>
-  );
-};
-
-export default SwipableList;

package/src/components/swipableList/index.ts

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

package/src/components/tabs/Tabs.interface.ts

@@ -1,10 +0,0 @@
-export interface Tab {
-  id: string;
-  title: string;
-  isSelected?: boolean;
-}
-export interface MultipleTabsProps {
-  tabs: Tab[];
-  initialSelected?: string[];
-  onSelectionChange?: (selectedTabs: Tab[]) => void;
-}

package/src/components/tabs/Tabs.styles.ts

@@ -1,24 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {
-  horizontalScale,
-  moderateScale,
-  verticalScale,
-} from '../../utils/stylehelper';
-
-export default StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    gap: horizontalScale(5),
-    flexWrap: 'wrap',
-  },
-  button: {
-    minWidth: horizontalScale(94),
-    minHeight: verticalScale(32),
-    paddingVertical: verticalScale(8),
-    paddingHorizontal: horizontalScale(12),
-    borderRadius: moderateScale(32),
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-  },
-});

package/src/components/tabs/Tabs.tsx

@@ -1,74 +0,0 @@
-import React, {useState} from 'react';
-import {Pressable, View, ViewStyle} from 'react-native';
-import styles from './Tabs.styles';
-import {FontStyle} from '../../utils/appEnum';
-import CustomText from '../customText';
-import {useTheme} from '../../theme/ThemeContext';
-import {withThemeProvider} from '../../theme/withThemeProvider';
-interface Props {
-  options: string[];
-  initialSelected?: string[];
-  onSelectionChange?: (selected: string[]) => void;
-  style?: ViewStyle;
-}
-
-const Tabs: React.FC<Props> = ({
-  options,
-  initialSelected = [],
-  onSelectionChange,
-  style,
-}) => {
-  const {theme} = useTheme();
-
-  const [data, setData] = useState(
-    options.map(option => ({
-      title: option,
-      id: option,
-      isSelected: initialSelected?.includes(option),
-    })),
-  );
-
-  const handlePress = (id: string) => {
-    const updatedData = data?.map(item =>
-      item?.id === id ? {...item, isSelected: !item?.isSelected} : item,
-    );
-    setData(updatedData);
-    const selectedTabs = updatedData
-      .filter(item => item?.isSelected)
-      .map(item => item?.id);
-    if (onSelectionChange) {
-      onSelectionChange(selectedTabs);
-    }
-  };
-
-  return (
-    <View style={[styles.container, style]}>
-      {data?.map(({id, title, isSelected}) => (
-        <Pressable
-          key={id}
-          style={{
-            ...styles.button,
-            backgroundColor: isSelected
-              ? theme.CONTENT_PRIMARY
-              : theme.CONTENT_INVERTED,
-            borderColor: isSelected
-              ? theme.CONTENT_INVERTED
-              : theme.CONTENT_SECONDRY,
-          }}
-          onPress={() => handlePress(id)}>
-          <CustomText
-            variant={FontStyle.L2_REGULAR}
-            style={{
-              color: isSelected
-                ? theme.CONTENT_INVERTED
-                : theme.CONTENT_SECONDRY,
-            }}
-            text={title}
-          />
-        </Pressable>
-      ))}
-    </View>
-  );
-};
-
-export default withThemeProvider(Tabs);

package/src/components/tabs/index.ts

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

package/src/components/tags/Tags.interface.ts

@@ -1,12 +0,0 @@
-import {ReactElement} from 'react';
-import {ViewStyle} from 'react-native';
-
-export interface TagsProps {
-  tags: string[];
-  tagStyles?: ViewStyle;
-  handleSetSelectedTagsOptions: (tags: string[]) => void;
-  handleTagsChange: (tag: string) => void;
-  testID?: string;
-  icon?: ReactElement;
-  iconStyle?: ViewStyle;
-}

package/src/components/tags/Tags.styles.ts

@@ -1,36 +0,0 @@
-import {DHRE_COLORS_BG, DHRE_COLORS_TEXT} from '../../theme/colors';
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  contentContainer: {
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-  },
-  tag: {
-    paddingVertical: verticalScale(8),
-    paddingHorizontal: horizontalScale(12),
-    borderRadius: 20,
-    margin: horizontalScale(8),
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  selectedTag: {
-    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
-  },
-  tagText: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-    marginRight: horizontalScale(8),
-  },
-  tagUnSelected: {
-    backgroundColor: DHRE_COLORS_BG.DH_GREY1,
-  },
-  tagUnselectedText: {
-    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
-  },
-});
-
-export default styles;

package/src/components/tags/Tags.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import {it} from '@jest/globals';
-import {fireEvent, render} from '@testing-library/react-native';
-import Tags from './Tags';
-
-const customStyle = {backgroundColor: 'red', padding: 20};
-
-const mockProps = {
-  tags: ['One', 'Two', 'Three'],
-  tagStyles: customStyle,
-  handleSetSelectedTagsOptions: jest.fn(),
-  handleTagsChange: jest.fn(),
-  testID: 'TAGS-COMPONENT',
-};
-
-describe('Tags Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(<Tags {...mockProps} />);
-    expect(getByTestId('TAGS-COMPONENT')).toBeTruthy();
-    fireEvent.press(getByTestId('TAGS-COMPONENT-One-BTN'));
-  });
-});

package/src/components/tags/Tags.tsx

@@ -1,76 +0,0 @@
-import React, {useState} from 'react';
-import {ScrollView, Pressable} from 'react-native';
-import CustomTypography from '../customTypography/CustomTypography';
-import {TagsProps} from './Tags.interface';
-import styles from './Tags.styles';
-
-const Tags: React.FC<TagsProps> = ({
-  tags,
-  tagStyles,
-  handleSetSelectedTagsOptions,
-  handleTagsChange,
-  testID,
-  icon,
-  iconStyle,
-}) => {
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-
-  const toggleTag = (tag: string) => {
-    setSelectedTags(prevSelectedTags => {
-      const selectedTagsSet = new Set(prevSelectedTags);
-      selectedTagsSet.has(tag)
-        ? selectedTagsSet.delete(tag)
-        : selectedTagsSet.add(tag);
-      handleSetSelectedTagsOptions([...selectedTagsSet]);
-      return [...selectedTagsSet];
-    });
-  };
-
-  const removeTag = (tag: string) => {
-    setSelectedTags(prevSelectedTags =>
-      prevSelectedTags.filter(t => t !== tag),
-    );
-    handleTagsChange(tag);
-  };
-
-  return (
-    <ScrollView
-      testID={testID}
-      style={styles.container}
-      contentContainerStyle={styles.contentContainer}
-      horizontal={false}>
-      {tags?.map(tag => (
-        <Pressable
-          testID={`${testID}-${tag}-BTN`}
-          key={tag}
-          onPress={() => toggleTag(tag)}
-          style={[
-            styles.tag,
-            tagStyles,
-            selectedTags.includes(tag)
-              ? styles.selectedTag
-              : styles.tagUnSelected,
-          ]}>
-          <CustomTypography
-            variant={selectedTags.includes(tag) ? 'H9semiBold' : 'P4regular'}
-            style={
-              selectedTags.includes(tag)
-                ? styles.tagText
-                : styles.tagUnselectedText
-            }
-            text={tag}
-          />
-          {selectedTags.includes(tag) && icon && (
-            <Pressable
-              testID={`${testID}-${tag}-PRESS`}
-              onPress={() => removeTag(tag)}>
-              {React.cloneElement(icon, {style: [icon.props.style, iconStyle]})}
-            </Pressable>
-          )}
-        </Pressable>
-      ))}
-    </ScrollView>
-  );
-};
-
-export default Tags;

package/src/components/tags/index.ts

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