dhre-component-lib 0.0.1 → 0.0.2

package/src/components/PdfView/PdfView.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Button, Box, CircularProgress, Typography } from '@mui/material';
+import React, { useEffect } from "react";
+import './PdfView.css';
 
 export interface PdfViewerProps {
   content: string;
@@ -7,14 +7,14 @@ export interface PdfViewerProps {
   buttonText?: string;
   loadingText?: string;
   errorText?: string;
-  onError?: (error: Error) => void;
+  // onError?: (error: Error) => void;
   cleanUpDelay?: number;
-  buttonVariant?: 'text' | 'outlined' | 'contained';
-  buttonColor?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'; // Removed "default"
-  buttonSize?: 'small' | 'medium' | 'large';
+  buttonVariant?: "text" | "outlined" | "contained";
+  buttonColor?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+  buttonSize?: "small" | "medium" | "large";
   showLoadingSpinner?: boolean;
   spinnerSize?: number;
-  spinnerColor?: 'inherit' | 'primary' | 'secondary';
+  spinnerColor?: "inherit" | "primary" | "secondary";
   className?: string;
 }
 
@@ -24,10 +24,10 @@ const PdfView: React.FC<PdfViewerProps> = ({
   buttonText = "View PDF",
   loadingText = "Loading...",
   errorText = "Failed to load PDF",
-  onError,
+  
   cleanUpDelay = 1000,
   buttonVariant = "contained",
-  buttonColor = "primary", // Changed to a valid default
+  buttonColor = "primary",
   buttonSize = "medium",
   showLoadingSpinner = false,
   spinnerSize = 24,
@@ -36,58 +36,70 @@ const PdfView: React.FC<PdfViewerProps> = ({
 }) => {
   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);
-    try {
-      const blob = base64ToBlob(content, contentType);
+    const blob = base64ToBlob(content, contentType);
+    if (blob) {
       const url = URL.createObjectURL(blob);
 
-      window.open(url, '_blank');
- 
+      window.open(url, "_blank");
+
       setTimeout(() => {
         URL.revokeObjectURL(url);
       }, cleanUpDelay);
-    } catch (error) {
-      setIsError(true);
-      if (onError) {
-        onError(error as Error);
-      } else {
-        console.error("Error generating PDF URL:", error);
-      }
-    } finally {
       setIsLoading(false);
+    } else {
+      setIsLoading(false);
+      setIsError(true);
+      setErrorMsg("Failed to create Blob from base64 string.");
     }
   };
 
   return (
-    <Box className={className} display="flex" flexDirection="column" alignItems="center" justifyContent="center">
-      {isLoading && showLoadingSpinner && <CircularProgress size={spinnerSize} color={spinnerColor} />}
-      {isError && <Typography color="error">{errorText}</Typography>}
+    <div className={`${className} container`}>
+      {isLoading && showLoadingSpinner && (
+        <div data-testid="spinnertest" className="spinner" style={{ width: spinnerSize, height: spinnerSize, borderColor: spinnerColor }}>
+          <div className="spinner-inner"></div>
+        </div>
+      )}
+      {isError && <p className="error-text">{errorMsg}</p>}
       {!isLoading && !isError && (
-        <Button
+        <button
           onClick={handleViewPdf}
-          variant={buttonVariant}
-          color={buttonColor} // Ensure only valid options are passed
-          size={buttonSize}
+          className={`button button-${buttonVariant} button-${buttonColor} button-${buttonSize}`}
         >
           {buttonText}
-        </Button>
+        </button>
       )}
-      {isLoading && <Typography>{loadingText}</Typography>}
-    </Box>
+      {isLoading && !showLoadingSpinner && <p>{loadingText}</p>}
+    </div>
   );
 };
 
-const base64ToBlob = (content: string, contentType: string = 'application/pdf'): Blob => {
-  const byteCharacters = atob(content);
-  const byteNumbers = new Array(byteCharacters.length);
-  for (let i = 0; i < byteCharacters.length; i++) {
-    byteNumbers[i] = byteCharacters.charCodeAt(i);
-  }
-  const byteArray = new Uint8Array(byteNumbers);
-  return new Blob([byteArray], { type: contentType });
-};
-
 export default PdfView;

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

@@ -1,35 +1,43 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import Progress from "./Progress";
-
-describe("Progress Component", () => {
-  it("should render without crashing", () => {
-    render(<Progress value={50} />);
-    const progressElement = screen.getByRole("progressbar");
-    expect(progressElement).toBeInTheDocument();
+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("should render with default props", () => {
-    render(<Progress value={50} />);
-    const progressElement = screen.getByRole("progressbar");
-    expect(progressElement).toHaveClass("MuiLinearProgress-colorPrimary");
+  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("should render with custom variant", () => {
-    render(<Progress value={50} variant="determinate" />);
-    const progressElement = screen.getByRole("progressbar");
-    expect(progressElement).toHaveClass("MuiLinearProgress-determinate");
+  it('does not render the label when not provided', () => {
+    render(<Progress value={30} max={100} />);
+    expect(screen.queryByText('Loading')).not.toBeInTheDocument();
   });
 
-  it("should render with custom color", () => {
-    render(<Progress value={50} color="secondary" />);
-    const progressElement = screen.getByRole("progressbar");
-    expect(progressElement).toHaveClass("MuiLinearProgress-colorSecondary");
+ 
+
+  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("should apply custom size", () => {
-    render(<Progress value={50} size={150} />);
-    const progressElement = screen.getByRole("progressbar");
-    expect(progressElement).toHaveStyle({ width: "150px", height: "150px" });
+  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

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

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

@@ -1,38 +1,67 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import RadioButton from "./RadioButton";
-
-describe("RadioButton Component", () => {
-  it("should render without crashing", () => {
-    render(<RadioButton value="option1" />);
-    const radioElement = screen.getByRole("radio");
-    expect(radioElement).toBeInTheDocument();
-  });
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CustomRadioButton from './RadioButton';
 
-  it("should render with default props", () => {
-    render(<RadioButton value="option1" />);
-    const radioElement = screen.getByRole("radio");
-    expect(radioElement).not.toBeChecked();
-    expect(radioElement).toHaveAttribute("value", "option1");
-  });
+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"
+      />
+    );
 
-  it("should handle the checked prop", () => {
-    render(<RadioButton value="option1" checked />);
-    const radioElement = screen.getByRole("radio");
-    expect(radioElement).toBeChecked();
-  });
+    const radioInput = screen.getByRole('radio');
+    const label = screen.getByText('testValue'); // Use text to find the label
 
-  it("should be disabled when disabled prop is true", () => {
-    render(<RadioButton value="option1" disabled />);
-    const radioElement = screen.getByRole("radio");
-    expect(radioElement).toBeDisabled();
+    // 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 the onChange handler when clicked", () => {
+  it('should call onChange handler when clicked', () => {
     const handleChange = jest.fn();
-    render(<RadioButton value="option1" onChange={handleChange} />);
-    const radioElement = screen.getByRole("radio");
-    fireEvent.click(radioElement);
-    expect(handleChange).toHaveBeenCalledTimes(1);
+
+    render(
+      <CustomRadioButton
+        name="testName"
+        value="testValue"
+        onChange={handleChange}
+        id="radio1"
+      />
+    );
+
+    const radioInput = screen.getByRole('radio');
+    fireEvent.click(radioInput);
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it('should render without crashing if no props are provided', () => {
+    render(<CustomRadioButton name="testName" value="testValue" />);
+
+    const radioInput = screen.getByRole('radio');
+    // Ensure that the label is associated with the radio input
+    const label = screen.getByText('testValue');
+
+    expect(radioInput).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
   });
 });

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/Tag/Tag.test.tsx

@@ -0,0 +1,57 @@
+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 without crashing', () => {
+    const { container } = render(<Tag {...getDefaultProps()} />);
+    
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag Component renders correctly without crashing 1`] = `
+<span
+  class="tag-class"
+>
+  Sample Tag
+</span>
+`;

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } 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.getByText(defaultProps.content);
+    expect(tooltipElement).toBeInTheDocument();
+    expect(tooltipElement).toHaveClass(defaultProps.tooltipClassName);
+    
+    // Trigger mouse leave
+    fireEvent.mouseLeave(childElement);
+    tooltipElement = screen.queryByText(defaultProps.content);
+    
+    // Ensure tooltipElement is not null before checking its properties
+    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('matches snapshot when tooltip is visible', () => {
+    const { container } = render(<Tooltip {...defaultProps} />);
+    
+    const childElement = screen.getByText('Hover me');
+    
+    // Trigger mouse enter to show tooltip
+    fireEvent.mouseEnter(childElement);
+    
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot when tooltip is hidden', () => {
+    const { container } = render(<Tooltip {...defaultProps} />);
+    
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip Component matches snapshot when tooltip is hidden 1`] = `
+<div>
+  <button>
+    Hover me
+  </button>
+</div>
+`;
+
+exports[`Tooltip Component matches snapshot when tooltip is visible 1`] = `
+<div>
+  <button>
+    Hover me
+  </button>
+  <div
+    class="tooltip-class"
+  >
+    Tooltip content
+  </div>
+</div>
+`;

package/src/components/index.ts

@@ -3,9 +3,12 @@ export { default as Avatar } from "./Avatar";
 export { default as Badge } from "./Badge";
 export { default as BreadCrumb } from "./BreadCrumb";
 export { default as Checkbox } from "./Checkbox";
-export { default as CircularProgress } from "./Circular_Progress";
+export { default as CircularProgress } from "./CircularProgress";
 export { default as Divider } from "./Divider";
 export { default as Link } from "./Link";
 export { default as Progress } from "./Progress";
 export { default as RadioButton } from "./RadioButton";
-export { default as InputTextField } from "./InputTextField";
+export { default as InputTextField } from "./InputTextField";
+export { default } from "./PdfView";
+export { default as Directions } from "./Map/Directions";
+export { default as GoogleMap } from "./Map/GoogleMap";

package/src/typings.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';