dhre-ui-kit 0.0.1

package/src/components/progressBar/ProgressBar.tsx

@@ -0,0 +1,93 @@
+import commonStyles from '../../utils/commonStyles';
+import React, {useEffect} from 'react';
+import {View} from 'react-native';
+import * as Progress from 'react-native-progress';
+import {ShapeType} from '../../utils/appEnum';
+
+interface CustomProgressBarProps {
+  value: number; // Current progress value (0 to 100)
+  type: ShapeType.LINE | ShapeType.CIRCLE; // Type of progress bar
+  width: number; // Width of the progress bar
+  height?: number; // Optional height (default behavior depends on library)
+  fillColor: string; // Color of the progress fill
+  unfilledColor: string; // Color of the unfilled area
+  borderWidth?: number; // Optional border width
+  borderRadius?: number; // Optional border radius
+  circleSize?: number; // Size of the circle progress bar (if type is CIRCLE)
+  thickness?: number; // Thickness of the circle progress bar (if type is CIRCLE)
+  progress: number; // filled area
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
+  increment?: number; // Optional increment value for progress update
+  interval?: number; // Optional interval time (ms) for progress update
+}
+
+const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
+  value,
+  type,
+  width,
+  height,
+  fillColor,
+  unfilledColor,
+  borderWidth,
+  borderRadius,
+  circleSize,
+  thickness,
+  progress,
+  setProgress,
+  increment = 1, // Default increment to 1
+  interval = 100, // Default interval to 100ms
+}) => {
+  useEffect(() => {
+    const progressInterval = setInterval(() => {
+      if (progress < value) {
+        setProgress((prevProgress: number) => prevProgress + increment);
+      } else {
+        clearInterval(progressInterval);
+      }
+    }, interval);
+
+    return () => clearInterval(progressInterval);
+  }, [progress, value, increment, interval]);
+
+  const renderProgressBar = () => {
+    switch (type) {
+      case ShapeType.LINE:
+        return (
+          <Progress.Bar
+            progress={progress / 100}
+            width={width}
+            height={height}
+            color={fillColor}
+            unfilledColor={unfilledColor}
+            borderWidth={borderWidth}
+            borderRadius={borderRadius}
+            testID="custom-progress-bar-line"
+          />
+        );
+      case ShapeType.CIRCLE:
+        return (
+          <Progress.Circle
+            progress={progress / 100}
+            size={circleSize}
+            thickness={thickness}
+            color={fillColor}
+            unfilledColor={unfilledColor}
+            borderWidth={borderWidth}
+            showsText={true}
+            formatText={() => `${value}%`}
+            testID="custom-progress-bar-circle"
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <View style={commonStyles.centeredContainer} testID="custom-progress-bar">
+      {renderProgressBar()}
+    </View>
+  );
+};
+
+export default CustomProgressBar;

package/src/components/progressBar/index.ts

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

package/src/components/property360View/Property360View.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import Property360View from './Property360View';
+import WebView from 'react-native-webview';
+
+describe('Property360View Component', () => {
+  it('should render the WebView with the correct URI', () => {
+    const imageURI = 'https://example.com/360image.jpg';
+    const {getByTestId} = render(<Property360View imageURI={imageURI} />);
+    const propertyView = getByTestId('PROPERTY_360_VIEW');
+    expect(propertyView).toBeTruthy();
+    expect(WebView).toHaveBeenCalledWith(
+      expect.objectContaining({
+        source: {uri: imageURI},
+      }),
+      {},
+    );
+  });
+  it('should apply the commonStyles.flexOne style to the View and WebView components', () => {
+    const imageURI = 'https://example.com/360image.jpg';
+    const {getByTestId} = render(<Property360View imageURI={imageURI} />);
+    expect(getByTestId('PROPERTY_360_VIEW')).toBeTruthy();
+  });
+});

package/src/components/property360View/Property360View.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {View} from 'react-native';
+import WebView from 'react-native-webview';
+import commonStyles from '../../utils/commonStyles';
+
+const Property360View = ({imageURI}: {imageURI: string}) => {
+  return (
+    <View style={commonStyles.flexOne} testID="PROPERTY_360_VIEW">
+      <WebView
+        source={{
+          uri: imageURI,
+        }}
+        style={commonStyles.flexOne}
+      />
+    </View>
+  );
+};
+
+export default Property360View;

package/src/components/property360View/index.ts

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

package/src/components/rating/Rating.styles.ts

@@ -0,0 +1,13 @@
+import {horizontalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  star: {
+    marginHorizontal: horizontalScale(2),
+  },
+});
+export default styles;

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

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

@@ -0,0 +1,96 @@
+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/rating/index.ts

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

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

@@ -0,0 +1,13 @@
+import {ReactElement} from 'react';
+import {ViewStyle} from 'react-native';
+
+export interface TabsProps {
+  tabs: {label: string}[];
+  onTabPress?: (index: number) => void;
+  testID?: string;
+  hideTitle?: boolean;
+  hideIcon?: boolean;
+  initialTab?: number;
+  icon?: ReactElement;
+  iconStyle?: ViewStyle;
+}

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

@@ -0,0 +1,36 @@
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  tabsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tabItem: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: verticalScale(6),
+    paddingHorizontal: horizontalScale(12),
+    marginHorizontal: horizontalScale(8),
+    borderRadius: 50,
+    gap: horizontalScale(8),
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+  },
+  label: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  activeTab: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+  },
+  inactiveTab: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  inActiveLabel: {
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
+  },
+});
+
+export default styles;

package/src/components/tabs/Tabs.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {it} from '@jest/globals';
+import {render} from '@testing-library/react-native';
+import Tabs from './Tabs';
+
+const mockProps = {
+  tabs: [{label: 'Tabs'}],
+  hideTitle: false,
+  hideIcon: false,
+  initialTab: 1,
+  onTabPress: jest.fn(),
+  testID: 'TABS-COMPONENT',
+};
+
+describe('Tabs Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(<Tabs {...mockProps} />);
+    expect(getByTestId('TABS-COMPONENT')).toBeTruthy();
+  });
+});

package/src/components/tabs/Tabs.tsx

@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+import {ScrollView, Pressable, View} from 'react-native';
+import CustomTypography from '../customTypography/CustomTypography';
+import styles from './Tabs.styles';
+import {TabsProps} from './Tabs.interface';
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+
+const Tabs: React.FC<TabsProps> = ({
+  tabs,
+  onTabPress,
+  testID,
+  hideTitle = false,
+  hideIcon = true,
+  initialTab = 0,
+  icon: Icon,
+  iconStyle,
+}) => {
+  const [activeTab, setActiveTab] = useState(initialTab);
+
+  const handleTabPress = (index: number) => {
+    setActiveTab(index);
+    if (onTabPress) {
+      onTabPress(index);
+    }
+  };
+
+  return (
+    <ScrollView
+      testID={testID}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.tabsContainer}>
+      {tabs?.map((tab, index) => (
+        <Pressable
+          testID={`Press-Tab-${index}`}
+          key={index}
+          onPress={() => handleTabPress(index)}
+          style={[
+            styles.tabItem,
+            activeTab === index ? styles.activeTab : styles.inactiveTab,
+          ]}>
+          {!hideIcon && Icon && (
+            <View style={iconStyle}>
+              {React.cloneElement(Icon, {
+                fill:
+                  activeTab === index
+                    ? DHRE_COLORS_TEXT.DH_WHITE
+                    : DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
+              })}
+            </View>
+          )}
+          {!hideTitle && (
+            <CustomTypography
+              variant={activeTab === index ? 'H8semiBold' : 'H8medium'}
+              style={activeTab === index ? styles.label : styles.inActiveLabel}
+              text={tab?.label}
+            />
+          )}
+        </Pressable>
+      ))}
+    </ScrollView>
+  );
+};
+
+export default Tabs;

package/src/components/tabs/index.ts

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

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

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

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

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

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

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

package/src/components/toggleButton/ToggleButton.styles.ts

@@ -0,0 +1,40 @@
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    width: horizontalScale(70),
+    height: verticalScale(25),
+    borderRadius: 15,
+    justifyContent: 'center',
+  },
+  track: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    borderRadius: 15,
+  },
+  thumb: {
+    position: 'absolute',
+    width: horizontalScale(20),
+    height: verticalScale(20),
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    left: horizontalScale(2),
+  },
+  text: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+    textAlign: 'left',
+    marginHorizontal: horizontalScale(10),
+  },
+  textRight: {
+    textAlign: 'right',
+  },
+});
+export default styles;

package/src/components/toggleButton/ToggleButton.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {render, screen, fireEvent} from '@testing-library/react-native';
+import CustomSwitch from './ToggleButton';
+
+describe('CustomSwitch', () => {
+  it('renders correctly with default type', () => {
+    const onValueChangeMock = jest.fn();
+    render(<CustomSwitch onValueChange={onValueChangeMock} value={false} />);
+
+    const switchElement = screen.getByTestId('custom-switch');
+    expect(switchElement).toBeTruthy();
+  });
+
+  it('renders correctly with custom type', () => {
+    const onValueChangeMock = jest.fn();
+    render(<CustomSwitch onValueChange={onValueChangeMock} value={true} />);
+
+    const switchElement = screen.getByTestId('custom-switch');
+    expect(switchElement).toBeTruthy();
+  });
+
+  it('toggles switch on press', () => {
+    const onValueChangeMock = jest.fn();
+    const {getByTestId} = render(
+      <CustomSwitch onValueChange={onValueChangeMock} value={false} />,
+    );
+
+    const switchElement = getByTestId('custom-switch');
+    fireEvent.press(switchElement);
+
+    expect(onValueChangeMock).toHaveBeenCalledWith(true);
+  });
+});