dhre-component-lib 0.0.9 → 0.1.0

package/src/components/PdfView/PdfView.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect } from "react";
+import styles from './PdfView.module.scss';
+
+export interface PdfViewerProps {
+  content: string;
+  contentType?: string;
+  buttonText?: string;
+  loadingText?: string;
+  errorText?: string;
+  cleanUpDelay?: number;
+  buttonVariant?: "text" | "outlined" | "contained";
+  buttonColor?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+  buttonSize?: "small" | "medium" | "large";
+  showLoadingSpinner?: boolean;
+  spinnerSize?: number;
+  spinnerColor?: "inherit" | "primary" | "secondary";
+  className?: string;
+}
+
+const PdfView: React.FC<PdfViewerProps> = ({
+  content,
+  contentType = "application/pdf",
+  buttonText = "View PDF",
+  loadingText = "Loading...",
+  errorText = "Failed to load PDF",
+  cleanUpDelay = 1000,
+  buttonVariant = "contained",
+  buttonColor = "primary",
+  buttonSize = "medium",
+  showLoadingSpinner = false,
+  spinnerSize = 24,
+  spinnerColor = "primary",
+  className = "",
+}) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isError, setIsError] = React.useState(false);
+  const [errorMsg, setErrorMsg] = React.useState(errorText);
+
+  useEffect(() => {
+    if (btoa(atob(content)) !== content) {
+      setIsError(true);
+    }
+  }, [content]);
+
+  const base64ToBlob = (content: string, contentType: string = "application/pdf"): Blob | null => {
+    try {
+      const byteCharacters = atob(content);
+      const byteArray = new Uint8Array(byteCharacters.length);
+
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteArray[i] = byteCharacters.charCodeAt(i);
+      }
+
+      return new Blob([byteArray], { type: contentType });
+    } catch (error) {
+      setIsError(true);
+      setErrorMsg("Invalid base64 string:");
+      return null;
+    }
+  };
+
+  const handleViewPdf = async () => {
+    setIsLoading(true);
+    setIsError(false);
+    const blob = base64ToBlob(content, contentType);
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+
+      window.open(url, "_blank");
+
+      setTimeout(() => {
+        URL.revokeObjectURL(url);
+      }, cleanUpDelay);
+      setIsLoading(false);
+    } else {
+      setIsLoading(false);
+      setIsError(true);
+      setErrorMsg("Failed to create Blob from base64 string.");
+    }
+  };
+
+  const buttonClass = `
+    ${styles.button} 
+    ${styles[`button${buttonVariant.charAt(0).toUpperCase() + buttonVariant.slice(1)}`]} 
+    ${styles[`button${buttonColor.charAt(0).toUpperCase() + buttonColor.slice(1)}`]} 
+    ${styles[`button${buttonSize.charAt(0).toUpperCase() + buttonSize.slice(1)}`]}
+  `;
+
+  const spinnerClass = `${styles.spinner} ${styles.spinnerInner}`;
+
+  return (
+    <div className={`${styles.container} ${className}`}>
+      {isLoading && showLoadingSpinner && (
+        <div
+          data-testid="spinnertest"
+          className={spinnerClass}
+          style={{ width: spinnerSize, height: spinnerSize, borderColor: spinnerColor }}
+        >
+          <div className={styles.spinnerInner}></div>
+        </div>
+      )}
+      {isError && <p className={styles.errorText}>{errorMsg}</p>}
+      {!isLoading && !isError && (
+        <button
+          onClick={handleViewPdf}
+          className={buttonClass}
+        >
+          {buttonText}
+        </button>
+      )}
+      {isLoading && !showLoadingSpinner && <p>{loadingText}</p>}
+    </div>
+  );
+};
+
+export default PdfView;

package/src/components/PdfView/index.ts

@@ -0,0 +1 @@
+export { default } from "./PdfView";

package/src/components/Progress/Progress.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Progress from './Progress';
+
+describe('Progress Component', () => {
+  it('renders the progress bar with correct percentage width', () => {
+    render(<Progress value={50} max={100} barClassName="progress-bar" />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toHaveStyle('width: 50%');
+  });
+
+  it('renders the label when provided', () => {
+    render(<Progress value={30} max={100} label="Loading" labelClassName="label-class" />);
+    expect(screen.getByText('Loading')).toHaveClass('label-class');
+  });
+
+  it('does not render the label when not provided', () => {
+    render(<Progress value={30} max={100} />);
+    expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+  });
+
+ 
+
+  it('handles zero values correctly', () => {
+    render(<Progress value={0} max={100} barClassName="progress-bar" />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toHaveStyle('width: 0%');
+  });
+
+  it('handles max values correctly', () => {
+    render(<Progress value={100} max={100} barClassName="progress-bar" />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toHaveStyle('width: 100%');
+  });
+
+  it('handles values greater than max', () => {
+    render(<Progress value={150} max={100} barClassName="progress-bar" />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toHaveStyle('width: 150%'); // Matches the component's behavior
+  });
+
+})

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface ProgressProps {
+  value: number;
+  max: number;
+  className?: string;
+  barContainerClassName?: string;
+  barClassName?: string;
+  labelClassName?: string;
+  label?: string;
+}
+
+const Progress: React.FC<ProgressProps> = ({
+  value,
+  max,
+  className = '',
+  barContainerClassName = '',
+  barClassName = '',
+  labelClassName = '',
+  label,
+  ...rest
+}) => {
+  const percentage = (value / max) * 100;
+
+  return (
+    <div className={className} {...rest}>
+      {label && <div className={labelClassName}>{label}</div>}
+      <div className={barContainerClassName}>
+        <div data-testid="progress-bar" className={barClassName} style={{ width: `${percentage}%` }} />
+      </div>
+    </div>
+  );
+};
+
+export default Progress;

package/src/components/Progress/index.ts

@@ -0,0 +1 @@
+export { default } from "./Progress";

package/src/components/RadioButton/RadioButton.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CustomRadioButton from './RadioButton';
+
+describe('CustomRadioButton', () => {
+  it('should render with given props', () => {
+    render(
+      <CustomRadioButton
+        name="testName"
+        value="testValue"
+        checked={true}
+        onChange={() => {}}
+        className="custom-class"
+        inputClassName="input-class"
+        labelClassName="label-class"
+        id="radio1"
+      />
+    );
+
+    const radioInput = screen.getByRole('radio');
+    const label = screen.getByText('testValue'); // Use text to find the label
+
+    // Assert that the radio input is rendered correctly
+    expect(radioInput).toBeInTheDocument();
+    expect(radioInput).toHaveAttribute('name', 'testName');
+    expect(radioInput).toHaveAttribute('value', 'testValue');
+    expect(radioInput).toBeChecked();
+    expect(radioInput).toHaveClass('input-class');
+
+    // Assert that the label is rendered correctly
+    expect(label).toBeInTheDocument();
+
+    // Ensure the label has the correct class by finding the label element directly
+    const labelElement = document.querySelector(`label[for="radio1"]`);
+    expect(labelElement).toHaveClass('label-class');
+  });
+
+  it('should call onChange handler when clicked', () => {
+    const handleChange = jest.fn();
+
+    render(
+      <CustomRadioButton
+        name="testName"
+        value="testValue"
+        onChange={handleChange}
+        id="radio1"
+      />
+    );
+
+    const radioInput = screen.getByRole('radio');
+    fireEvent.click(radioInput);
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+});

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface RadioButtonProps {
+  name: string;
+  value: string;
+  checked?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  className?: string;
+  inputClassName?: string;
+  labelClassName?: string;
+  id?: string;
+  [key: string]: any;
+}
+
+const CustomRadioButton: React.FC<RadioButtonProps> = ({
+  name,
+  value,
+  checked = false,
+  onChange,
+  className = '',
+  inputClassName = '',
+  labelClassName = '',
+  id,
+  ...rest
+}) => {
+  return (
+    <div className={className}>
+      <input
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={onChange}
+        id={id}
+        className={inputClassName}
+        {...rest}
+      />
+      <label htmlFor={id} className={labelClassName}>{value}</label>
+    </div>
+  );
+};
+
+export default CustomRadioButton;

package/src/components/RadioButton/index.ts

@@ -0,0 +1 @@
+export { default } from "./RadioButton";

package/src/components/Switch/Switch.test.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Switch from './Switch';
+
+describe('Switch Component', () => {
+  it('renders with basic props', () => {
+    const { container } = render(<Switch checked={true} handleChange={() => {}} switchClassName="switch-class" />);
+    
+    const switchInput = screen.getByRole('checkbox');
+    const switchToggle = container.querySelector('.switch-class');
+
+    expect(switchInput).toBeInTheDocument();
+    expect(switchInput).toBeChecked();
+    expect(switchToggle).toBeInTheDocument();
+  });
+
+  it('renders with a label', () => {
+    render(
+      <Switch 
+        checked={true} 
+        handleChange={() => {}} 
+        switchClassName="switch-class" 
+        label="Toggle Switch" 
+        labelClassName="label-class" 
+      />
+    );
+
+    const label = screen.getByText('Toggle Switch');
+    const switchInput = screen.getByRole('checkbox');
+
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveClass('label-class');
+    expect(switchInput).toBeChecked();
+  });
+
+  it('calls handleChange handler when clicked', () => {
+    // Simulate a component that manages its own state
+    const TestComponent = () => {
+      const [checked, setChecked] = useState(false);
+      return (
+        <Switch
+          checked={checked}
+          handleChange={() => setChecked(!checked)}
+          switchClassName="switch-class"
+        />
+      );
+    };
+
+    render(<TestComponent />);
+    
+    const switchInput = screen.getByRole('checkbox');
+    expect(switchInput).not.toBeChecked();
+
+    // Simulate the click event
+    fireEvent.click(switchInput);
+
+    // Check if the switchInput is now checked
+    expect(switchInput).toBeChecked();
+  });
+
+  it('applies custom classes', () => {
+    const { container } = render(
+      <Switch
+        checked={true}
+        handleChange={() => {}}
+        switchClassName="switch-class"
+        containerClassName="container-class"
+        toggleClassName="toggle-class"
+        label="Toggle Switch"
+        labelClassName="label-class"
+      />
+    );
+    
+    const containerDiv = container.querySelector('.container-class');
+    const switchToggle = container.querySelector('.switch-class');
+    const label = screen.getByText('Toggle Switch');
+
+    expect(containerDiv).toHaveClass('container-class');
+    expect(switchToggle).toHaveClass('switch-class');
+    expect(label).toHaveClass('label-class');
+  });
+});

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import './Switch.css';
+
+export interface SwitchProps {
+  checked: boolean;              
+  handleChange: () => void;      
+  switchClassName: string;       
+  label?: string;                
+  labelClassName?: string;  
+  containerClassName?: string;  
+  toggleClassName?:string,   
+}
+
+const Switch: React.FC<SwitchProps> = ({
+  checked,
+  handleChange,
+  switchClassName,
+  label,
+  labelClassName,
+  containerClassName,
+  toggleClassName
+}) => {
+  return (
+    <div className={containerClassName}>
+      {label && <span className={labelClassName}>{label}</span>}
+      <label className={toggleClassName}>
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={handleChange}
+        />
+        <span className={switchClassName}></span>
+      </label>
+    </div>
+  );
+};
+
+export default Switch;

package/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export { default } from "./Switch";

package/src/components/Tag/Tag.css

@@ -0,0 +1,14 @@
+.customTagClass {
+  display: inline-block;
+  padding: 5px 10px;
+  background-color: #f0f0f0;
+  color: #333;
+  border-radius: 12px;
+  font-size: 14px;
+  cursor: pointer;
+  margin-right: 8px;
+
+  &:hover {
+    background-color: #e0e0e0;
+  }
+}

package/src/components/Tag/Tag.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Tag, { TagProps } from './Tag';
+
+describe('Tag Component', () => {
+  let handleClick: jest.Mock;
+
+  beforeEach(() => {
+    handleClick = jest.fn();  // Reset the mock function before each test
+  });
+
+  // Function to generate default props for each test
+  const getDefaultProps = (): TagProps => ({
+    content: 'Sample Tag',
+    tagClassName: 'tag-class',
+    handleClick,
+  });
+
+  it('renders the tag with the correct content', () => {
+    render(<Tag {...getDefaultProps()} />);
+    
+    const tagElement = screen.getByText('Sample Tag');
+    
+    expect(tagElement).toBeInTheDocument();
+  });
+
+  it('applies the correct className to the tag', () => {
+    render(<Tag {...getDefaultProps()} />);
+    
+    const tagElement = screen.getByText('Sample Tag');
+    
+    expect(tagElement).toHaveClass('tag-class');
+  });
+
+  it('calls the handleClick function when the tag is clicked', () => {
+    render(<Tag {...getDefaultProps()} />);
+    
+    const tagElement = screen.getByText('Sample Tag');
+    
+    fireEvent.click(tagElement);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call handleClick when the tag is not clicked', () => {
+    render(<Tag {...getDefaultProps()} />);
+    
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('renders correctly with different content', () => {
+    const newContent = 'New Tag Content';
+    render(<Tag {...getDefaultProps()} content={newContent} />);
+    
+    const tagElement = screen.getByText(newContent);
+    
+    expect(tagElement).toBeInTheDocument();
+    expect(tagElement).toHaveTextContent(newContent);
+  });
+});

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./Tag.module.scss";
+
+export interface TagProps {
+  content: string | number;
+  tagClassName?: string; // Optional prop for custom class name
+  handleClick?: () => void;
+  style?: React.CSSProperties; // Inline styles as props
+}
+
+const Tag: React.FC<TagProps> = ({ content, tagClassName = styles.customTagClass, handleClick, style }) => {
+  return (
+    <button onClick={handleClick} style={style} className={tagClassName}>
+      {content}
+    </button>
+  );
+};
+
+export default Tag;

package/src/components/Tag/index.ts

@@ -0,0 +1 @@
+export { default } from "./Tag";

package/src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,37 @@
+.tooltipWrapper {
+  display: inline-block;
+  position: relative;
+  margin-right: 20px;
+}
+
+.customTooltipClass {
+  position: absolute;
+  bottom: 125%; /* Position above the element */
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 14px;
+  white-space: nowrap;
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.customTooltipClass::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px;
+  border-style: solid;
+  border-color: #333 transparent transparent transparent;
+}
+
+.hoverText {
+  color: blue;
+  cursor: pointer;
+}

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Tooltip, { TooltipProps } from "./Tooltip";
+
+describe("Tooltip Component", () => {
+  const defaultProps: TooltipProps = {
+    content: "Tooltip content",
+    tooltipClassName: "tooltip-class",
+    children: <button>Hover me</button>,
+  };
+
+  it("renders the children correctly", () => {
+    render(<Tooltip {...defaultProps} />);
+
+    const childElement = screen.getByText("Hover me");
+
+    expect(childElement).toBeInTheDocument();
+  });
+
+  it("does not show tooltip content by default", () => {
+    render(<Tooltip {...defaultProps} />);
+
+    const tooltipElement = screen.queryByText(defaultProps.content);
+
+    expect(tooltipElement).not.toBeInTheDocument();
+  });
+
+  it("shows tooltip content on mouse enter and hides it on mouse leave", () => {
+    render(<Tooltip {...defaultProps} />);
+
+    const childElement = screen.getByText("Hover me");
+
+    // Trigger mouse enter
+    fireEvent.mouseEnter(childElement);
+    let tooltipElement = screen.queryByText(defaultProps.content);
+    expect(tooltipElement).toBeInTheDocument();
+    expect(tooltipElement).toHaveClass(defaultProps.tooltipClassName);
+
+    // Trigger mouse leave
+    fireEvent.mouseLeave(childElement);
+    tooltipElement = screen.queryByText(defaultProps.content);
+
+    // Ensure tooltipElement is null if it was not found
+    expect(tooltipElement).toBeNull();
+  });
+
+  it("applies the correct container className", () => {
+    const customClassName = "custom-container-class";
+    render(<Tooltip {...defaultProps} containerClassName={customClassName} />);
+
+    const containerElement = screen.getByText("Hover me").parentElement;
+
+    expect(containerElement).toHaveClass(customClassName);
+  });
+
+  it("handles tooltip visibility correctly", () => {
+    render(<Tooltip {...defaultProps} />);
+
+    const childElement = screen.getByText("Hover me");
+
+    fireEvent.mouseEnter(childElement);
+
+    const tooltipElement = screen.queryByText(defaultProps.content);
+
+    expect(tooltipElement).toBeInTheDocument();
+  });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import styles from './Tooltip.module.scss';
+
+export interface TooltipProps {
+  content: string; 
+  tooltipClassName: string; 
+  children: React.ReactNode;
+  containerClassName?: string;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  tooltipClassName,
+  children,
+  containerClassName = "",
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  const showTooltip = () => setVisible(true);
+  const hideTooltip = () => setVisible(false);
+
+  return (
+    <div 
+      className={`${styles.tooltipWrapper} ${containerClassName}`} 
+      onMouseEnter={showTooltip} 
+      onMouseLeave={hideTooltip}
+    >
+      {children}
+      {visible && (
+        <div className={`${styles.customTooltipClass} ${tooltipClassName}`}>
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default } from "./Tooltip";