dhre-component-lib 0.0.1

package/src/components/InputTextField/InputTextField.test.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import InputTextField from "./InputTextField";
+
+describe("InputTextField Component", () => {
+  it("should render without crashing", () => {
+    const { getByTestId } = render(
+      <InputTextField label="Name" data-testid="inputTextField-rendered" />
+    );
+    expect(getByTestId("inputTextField-rendered")).toBeInTheDocument();
+  });
+
+  it("should render with default props", () => {
+    const { getByLabelText } = render(<InputTextField label="Name" />);
+    const inputElement = getByLabelText("Name") as HTMLInputElement;
+
+    expect(inputElement).toHaveAttribute("type", "text");
+
+    expect(inputElement).toHaveClass("MuiInputBase-input");
+  });
+
+  it("should render with the specified type", () => {
+    const { getByLabelText } = render(
+      <InputTextField label="Password" type="password" />
+    );
+    const inputElement = getByLabelText("Password") as HTMLInputElement;
+
+    expect(inputElement).toHaveAttribute("type", "password");
+  });
+
+  it("should render with the specified variant", () => {
+    const { getByLabelText } = render(
+      <InputTextField label="Email" variant="outlined" />
+    );
+    const inputElement = getByLabelText("Email") as HTMLInputElement;
+
+    expect(inputElement).toHaveClass("MuiOutlinedInput-input");
+  });
+
+  it("should render with helper text", () => {
+    const { getByText } = render(
+      <InputTextField label="Email" helperText="Enter your email" />
+    );
+    const helperTextElement = getByText("Enter your email");
+
+    expect(helperTextElement).toBeInTheDocument();
+  });
+});

package/src/components/InputTextField/InputTextField.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { INPUT_TYPES } from '../Enum'; 
+
+export interface CustomInputFieldProps {
+  label?: string;
+  value?: string;
+  type?:string ; 
+  placeholder?: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  className?: string; 
+  inputClassName?: string; 
+  labelClassName?: string; 
+  error?: string;
+  errorClassName?: string; 
+}
+
+const CustomInputField: React.FC<CustomInputFieldProps> = ({
+  label,
+  value = '',
+  type = INPUT_TYPES.TEXT, 
+  placeholder = '',
+  onChange,
+  className = '',
+  inputClassName = '',
+  labelClassName = '',
+  error = '',
+  errorClassName = '',
+  ...rest
+}) => {
+  return (
+    <div className={className}>
+      {label && <label className={labelClassName}>{label}</label>}
+      <input
+        type={type}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        className={inputClassName}
+        {...rest}
+      />
+      {error && <div className={errorClassName}>{error}</div>}
+    </div>
+  );
+};
+
+export default CustomInputField;

package/src/components/InputTextField/index.ts

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

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import Link from "./Link";
+
+describe("Link Component", () => {
+  it("should render without crashing", () => {
+    const { getByRole } = render(
+      <Link href="https://example.com">Test Link</Link>
+    );
+    const linkElement = getByRole("link");
+    expect(linkElement).toBeInTheDocument();
+  });
+
+  it("should render with default props", () => {
+    const { getByRole } = render(<Link href="https://example.com" />);
+    const linkElement = getByRole("link");
+
+    expect(linkElement).toHaveAttribute("href", "https://example.com");
+
+    expect(linkElement).toHaveAttribute("target", "_self");
+
+    expect(linkElement).toHaveAttribute("rel", "noopener noreferrer");
+
+    expect(linkElement).toHaveClass("MuiLink-underlineNone");
+  });
+
+  it('should render with target="_blank"', () => {
+    const { getByRole } = render(
+      <Link href="https://example.com" target="_blank" />
+    );
+    const linkElement = getByRole("link");
+
+    expect(linkElement).toHaveAttribute("target", "_blank");
+  });
+
+  it("should handle onClick event", () => {
+    const handleClick = jest.fn();
+    const { getByRole } = render(
+      <Link href="https://example.com" onClick={handleClick} />
+    );
+    const linkElement = getByRole("link");
+
+    fireEvent.click(linkElement);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Link/Link.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { LINK_TARGET } from '../Enum';
+
+interface LinkProps {
+  href: string;
+  target?:string ;
+  rel?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Link: React.FC<LinkProps> = ({
+  href,
+  target = LINK_TARGET.Self,
+  rel,
+  className = '',
+  children,
+  ...rest
+}) => {
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={rel}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+
+export default Link;

package/src/components/Link/index.ts

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

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Modal from "./Modal";
+
+describe("Modal Component", () => {
+  test("renders children when open", () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}}>
+        <div>Modal Content</div>
+      </Modal>
+    );
+
+    expect(screen.getByText("Modal Content")).toBeInTheDocument();
+  });
+
+  test("does not render children when not open", () => {
+    render(
+      <Modal isOpen={false} onClose={() => {}}>
+        <div>Modal Content</div>
+      </Modal>
+    );
+
+    expect(screen.queryByText("Modal Content")).not.toBeInTheDocument();
+  });
+
+  test("calls onClose when the modal is closed", () => {
+    const onCloseMock = jest.fn();
+
+    render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>Modal Content</div>
+      </Modal>
+    );
+
+    // Manually trigger the close event
+    onCloseMock();
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("applies the className to the modal container", () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}} className="custom-class">
+        <div>Modal Content</div>
+      </Modal>
+    );
+
+    const modalContainer = screen.getByText("Modal Content").parentElement;
+    expect(modalContainer).toHaveClass("custom-class");
+  });
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Modal as MuiModal } from "@mui/material";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, className, ...rest }) => {
+  return (
+    <MuiModal open={isOpen} onClose={onClose} {...rest}>
+      <div className={className}>{children}</div>
+    </MuiModal>
+  );
+};
+
+export default Modal;

package/src/components/Modal/index.ts

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

package/src/components/Notification/Notification.css

@@ -0,0 +1,20 @@
+.notification {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 300px;
+  padding: 16px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  z-index: 9999;
+}
+
+.notification .close-button {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+}

package/src/components/Notification/Notification.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import Notification, { NotificationProps } from './Notification';
+
+describe('Notification Component', () => {
+  const defaultProps: NotificationProps = {
+    message: 'Test Message',
+    severity: 'info',
+    autoHideDuration: 6000,
+    onClose: jest.fn(),
+  };
+
+  const renderNotification = (props: Partial<NotificationProps> = {}) => {
+    return render(<Notification {...defaultProps} {...props} />);
+  };
+
+  test('renders notification with the correct message', () => {
+    render(<Notification message="Test Message" severity="info" />);
+  
+    // Check if the element exists by querying it
+    const notificationElement = screen.getByText('Test Message');
+    expect(notificationElement).not.toBeNull(); // Equivalent to `toBeInTheDocument`
+  
+    // Alternatively, check for the presence of the role or className
+    const alertElement = screen.getByRole('alert');
+    expect(alertElement.className).toContain('info'); // Check if className includes "info"
+  });
+
+  test('calls onClose when the notification is clicked', () => {
+    const onClose = jest.fn();
+    renderNotification({ onClose });
+
+    fireEvent.click(screen.getByRole('alert'));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  test('calls onClose when the close button is clicked', () => {
+    const onClose = jest.fn();
+    renderNotification({ onClose });
+
+    fireEvent.click(screen.getByLabelText('Close notification'));
+
+    expect(onClose).toHaveBeenCalledWith(expect.anything(), 'close');
+  });
+
+  test('calls onClose after autoHideDuration expires', async () => {
+    const onClose = jest.fn();
+    renderNotification({ onClose, autoHideDuration: 1000 });
+
+    await waitFor(() => expect(onClose).toHaveBeenCalledWith(expect.anything(), 'timeout'), { timeout: 1500 });
+  });
+});

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+import './Notification.css';
+export interface NotificationProps {
+  message: string;
+  severity?: 'error' | 'warning' | 'info' | 'success';
+  autoHideDuration?: number;
+  onClose?: (event: React.SyntheticEvent<any> | Event, reason?: string) => void;
+}
+
+const Notification: React.FC<NotificationProps> = ({
+  message,
+  severity = 'info',
+  autoHideDuration = 6000,
+  onClose,
+}) => {
+  useEffect(() => {
+    if (autoHideDuration && onClose) {
+      const timer = setTimeout(() => {
+        onClose(new Event('timeout'), 'timeout');
+      }, autoHideDuration);
+
+      return () => clearTimeout(timer);
+    }
+  }, [autoHideDuration, onClose]);
+
+  const handleClose = (event: React.SyntheticEvent<any> | Event, reason?: string) => {
+    if (onClose) {
+      onClose(event, reason);
+    }
+  };
+
+  return (
+    <div className={`notification ${severity}`} onClick={(e) => handleClose(e)} role="alert">
+      <div className="notification-message">{message}</div>
+      <button className="close-button" onClick={(e) => handleClose(e, 'close')} aria-label="Close notification">
+        &times;
+      </button>
+    </div>
+  );
+};
+
+export default Notification;

package/src/components/Notification/index.ts

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

package/src/components/PdfView/PdfView.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PdfView, { PdfViewerProps } from './PdfView';
+
+// Mock the URL.createObjectURL and URL.revokeObjectURL functions
+global.URL.createObjectURL = jest.fn();
+global.URL.revokeObjectURL = jest.fn();
+
+const defaultProps: PdfViewerProps = {
+  content: 'mockBase64Data',
+  buttonText: 'View PDF',
+  showLoadingSpinner: true, // Set this to true to test the spinner
+  loadingText: 'Loading...',
+  errorText: 'Failed to load PDF',
+  spinnerSize: 24,
+  spinnerColor: 'primary',
+};
+
+describe('PdfView Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the PDF viewer with the default button text', () => {
+    render(<PdfView {...defaultProps} />);
+    expect(screen.getByText('View PDF')).toBeInTheDocument();
+  });
+
+  
+  it('should render an error message if the PDF fails to load', async () => {
+    // Override the base64ToBlob method to throw an error
+    jest.spyOn(global, 'atob').mockImplementation(() => {
+      throw new Error('Error converting base64');
+    });
+
+    render(<PdfView {...defaultProps} />);
+
+    // Click the button to trigger the error
+    fireEvent.click(screen.getByText('View PDF'));
+
+    // Wait for the error message to appear
+    await waitFor(() => expect(screen.getByText('Failed to load PDF')).toBeInTheDocument());
+
+    jest.restoreAllMocks();
+  });
+
+  it('should call the onError callback when there is an error', async () => {
+    const mockOnError = jest.fn();
+
+    // Simulate an error in base64 to blob conversion
+    jest.spyOn(global, 'atob').mockImplementation(() => {
+      throw new Error('Error converting base64');
+    });
+
+    render(<PdfView {...defaultProps} onError={mockOnError} />);
+
+    // Click the button to trigger the error
+    fireEvent.click(screen.getByText('View PDF'));
+
+    // Wait for the error callback to be called
+    await waitFor(() => expect(mockOnError).toHaveBeenCalled());
+
+    jest.restoreAllMocks();
+  });
+
+  it('should open the PDF in a new tab when the button is clicked', async () => {
+    render(<PdfView {...defaultProps} />);
+
+    // Click the button to trigger PDF opening
+    fireEvent.click(screen.getByText('View PDF'));
+
+    // Check if URL.createObjectURL was called
+    await waitFor(() => expect(global.URL.createObjectURL).toHaveBeenCalled());
+
+    // Check if window.open was called
+    expect(global.URL.createObjectURL).toHaveBeenCalled();
+  });
+});

package/src/components/PdfView/PdfView.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Button, Box, CircularProgress, Typography } from '@mui/material';
+
+export interface PdfViewerProps {
+  content: string;
+  contentType?: string;
+  buttonText?: string;
+  loadingText?: string;
+  errorText?: string;
+  onError?: (error: Error) => void;
+  cleanUpDelay?: number;
+  buttonVariant?: 'text' | 'outlined' | 'contained';
+  buttonColor?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'; // Removed "default"
+  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",
+  onError,
+  cleanUpDelay = 1000,
+  buttonVariant = "contained",
+  buttonColor = "primary", // Changed to a valid default
+  buttonSize = "medium",
+  showLoadingSpinner = false,
+  spinnerSize = 24,
+  spinnerColor = "primary",
+  className,
+}) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isError, setIsError] = React.useState(false);
+
+  const handleViewPdf = async () => {
+    setIsLoading(true);
+    setIsError(false);
+    try {
+      const blob = base64ToBlob(content, contentType);
+      const url = URL.createObjectURL(blob);
+
+      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);
+    }
+  };
+
+  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>}
+      {!isLoading && !isError && (
+        <Button
+          onClick={handleViewPdf}
+          variant={buttonVariant}
+          color={buttonColor} // Ensure only valid options are passed
+          size={buttonSize}
+        >
+          {buttonText}
+        </Button>
+      )}
+      {isLoading && <Typography>{loadingText}</Typography>}
+    </Box>
+  );
+};
+
+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/PdfView/index.ts

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

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

@@ -0,0 +1,35 @@
+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();
+  });
+
+  it("should render with default props", () => {
+    render(<Progress value={50} />);
+    const progressElement = screen.getByRole("progressbar");
+    expect(progressElement).toHaveClass("MuiLinearProgress-colorPrimary");
+  });
+
+  it("should render with custom variant", () => {
+    render(<Progress value={50} variant="determinate" />);
+    const progressElement = screen.getByRole("progressbar");
+    expect(progressElement).toHaveClass("MuiLinearProgress-determinate");
+  });
+
+  it("should render with custom color", () => {
+    render(<Progress value={50} color="secondary" />);
+    const progressElement = screen.getByRole("progressbar");
+    expect(progressElement).toHaveClass("MuiLinearProgress-colorSecondary");
+  });
+
+  it("should apply custom size", () => {
+    render(<Progress value={50} size={150} />);
+    const progressElement = screen.getByRole("progressbar");
+    expect(progressElement).toHaveStyle({ width: "150px", height: "150px" });
+  });
+});

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+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 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,38 @@
+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();
+  });
+
+  it("should render with default props", () => {
+    render(<RadioButton value="option1" />);
+    const radioElement = screen.getByRole("radio");
+    expect(radioElement).not.toBeChecked();
+    expect(radioElement).toHaveAttribute("value", "option1");
+  });
+
+  it("should handle the checked prop", () => {
+    render(<RadioButton value="option1" checked />);
+    const radioElement = screen.getByRole("radio");
+    expect(radioElement).toBeChecked();
+  });
+
+  it("should be disabled when disabled prop is true", () => {
+    render(<RadioButton value="option1" disabled />);
+    const radioElement = screen.getByRole("radio");
+    expect(radioElement).toBeDisabled();
+  });
+
+  it("should call the 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);
+  });
+});