dhre-component-lib 0.1.6 → 0.1.8

package/src/components/Modal/Modal.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import styles from './Modal.module.scss';
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-  modalOverlayClassname?: string;
-  modalContentClassname?: string;
-}
-
-const Modal: React.FC<ModalProps> = ({ 
-  isOpen, 
-  onClose, 
-  children, 
-  modalOverlayClassname = '', 
-  modalContentClassname = '' 
-}) => {
-  if (!isOpen) return null;
-
-  const handleOverlayClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  };
-
-  return (
-    <button 
-      className={`${styles.modalOverlay} ${modalOverlayClassname}`} 
-      onClick={handleOverlayClick}
-    >
-      <div className={`${styles.modalContent} ${modalContentClassname}`}>
-        {children}
-      </div>
-    </button>
-  );
-};
-
-export default Modal;

package/src/components/Modal/index.ts

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

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

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

@@ -1,42 +0,0 @@
-import React, { useEffect } from "react";
-import './Notification.module.scss';
-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

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

package/src/components/OtpInput/OtpInput.test.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import OTPInput from './OtpInput';
-import '@testing-library/jest-dom'; 
-
-describe('OTPInput Component', () => {
-  it('renders the correct number of input fields based on the length prop', () => {
-    render(
-      <OTPInput
-        length={4}
-        onChange={() => {}}
-        onResend={() => {}}
-        resendText="Resend OTP"
-      />
-    );
-    const inputs = screen.getAllByRole('textbox');
-    expect(inputs).toHaveLength(4);
-  });
-  it('calls onChange prop when input changes', () => {
-    const handleChange = jest.fn();
-    render(<OTPInput length={4} onChange={handleChange} onResend={() => {}} resendText="Resend OTP" />);
-    const inputs = screen.getAllByRole('textbox');
-    fireEvent.change(inputs[0], { target: { value: '1' } });
-    expect(handleChange).toHaveBeenCalledWith('1');
-  });
-
-  it('calls onResend prop when the resend button is clicked', async () => {
-    const handleResend = jest.fn();
-    render(<OTPInput length={4} onChange={() => {}} onResend={handleResend} resendText="Resend OTP" resendDelay={0} />);
-    const resendButton = screen.getByRole('button', { name: /resend otp/i });
-    fireEvent.click(resendButton);
-    expect(handleResend).toHaveBeenCalled();
-  });
-  it('displays error text when the error prop is true', () => {
-    const errorMessage = 'Invalid OTP';
-    render(<OTPInput length={4} onChange={() => {}} onResend={() => {}} resendText="Resend OTP" error={true} errorText={errorMessage} />);
-    const errorElement = screen.getByText(errorMessage);
-    expect(errorElement).toBeInTheDocument();
-  });
-  it('changes border color to red when the error prop is true', () => {
-    render(
-      <OTPInput
-        length={4}
-        onChange={() => {}}
-        onResend={() => {}}
-        resendText="Resend OTP"
-        error={true}
-      />
-    );
-    const firstInput = screen.getByTestId('otp-input-0');
-    expect(firstInput).toHaveStyle('border: 1px solid #EB0542');
-  });
-});

package/src/components/OtpInput/OtpInput.tsx

@@ -1,137 +0,0 @@
-import React, { useEffect, useState } from "react";
-import "./OtpInput.module.scss";
-interface OTPInputProps {
-  length?: number;
-  // eslint-disable-next-line no-unused-vars
-  onChange: (otp: string) => void;
-  autoFocus?: boolean;
-  onResend: () => void;
-  resendDelay?: number;
-  error?: boolean;
-  errorText?: string;
-  resendText: string;
-}
-
-const OTPInput: React.FC<OTPInputProps> = ({
-  length = 4,
-  onChange,
-  autoFocus = false,
-  onResend,
-  resendDelay = 60,
-  error = false,
-  errorText,
-  resendText,
-}) => {
-  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
-  const [timer, setTimer] = useState<number>(resendDelay);
-  const [isComplete, setIsComplete] = useState<boolean>(false);
-
-  useEffect(() => {
-    const countdown = setInterval(() => {
-      setTimer((prevTimer) => (prevTimer > 0 ? prevTimer - 1 : 0));
-    }, 1000);
-
-    return () => clearInterval(countdown);
-  }, []);
-  const handleChange = (value: string, index: number) => {
-    if (isNaN(Number(value))) return;
-
-    const newOtp = [...otp];
-    newOtp[index] = value;
-    setOtp(newOtp);
-    onChange(newOtp.join(""));
-
-    if (value && index < length - 1) {
-      const nextInput = document.getElementById(
-        `otp-input-${index + 1}`
-      ) as HTMLInputElement;
-      if (nextInput) {
-        nextInput.focus();
-      }
-    }
-  };
-
-  const handleKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    if (e.key === "Backspace" && !otp[index] && index > 0) {
-      const prevInput = document.getElementById(
-        `otp-input-${index - 1}`
-      ) as HTMLInputElement;
-      if (prevInput) {
-        prevInput.focus();
-      }
-    }
-  };
-
-  const handleResendClick = () => {
-    onResend();
-    setOtp(Array(length).fill(""));
-    setTimer(resendDelay);
-    setIsComplete(false);
-  };
-
-  useEffect(() => {
-    setIsComplete(otp.every((digit) => digit !== ""));
-  }, [otp]);
-
-  useEffect(() => {
-    if (error) {
-      setTimer(0);
-    }
-  }, [error]);
-
-  function getReadableStatus() {
-    if (error) {
-      return "#EB0542";
-    }
-    return isComplete ? "#00B578" : "#A7A7A7";
-  }
-  return (
-    <div className="otpMainContainer">
-      <div className="otpInputDiv">
-        {Array(length)
-          .fill("")
-          .map((_, index) => (
-            <input
-              key={index}
-              type="text"
-              id={`otp-input-${index}`}
-              value={otp[index]}
-              data-testid={`otp-input-${index}`}
-              role="textbox"
-              onChange={(e) => handleChange(e.target.value, index)}
-              onKeyDown={(e) => handleKeyDown(e, index)}
-              maxLength={1}
-              style={{ border: `1px solid ${getReadableStatus()}` }}
-              className="otpInput"
-              autoFocus={autoFocus && index === 0}
-            />
-          ))}
-      </div>
-      <div className="resendContainer">
-        {error ? (
-          <div className="errorText">{errorText}</div>
-        ) : (
-          <div className="timerText">
-            {timer > 0 ? `00:${timer} secs` : ""}
-          </div>
-        )}
-        <button
-          onClick={handleResendClick}
-          disabled={timer > 0}
-          style={{
-            border: "none",
-            background: "none",
-            cursor: timer > 0 ? "not-allowed" : "pointer",
-          }}
-        >
-          <div className="resendText">{resendText}</div>
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default OTPInput;

package/src/components/OtpInput/index.ts

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

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import PdfView from './PdfView';
-
-// Dummy base64 content for testing
-const validBase64Content = 'JVBERi0xLjQKJeLjz9MNCjEgMCBvYmoKPDwvTGluay9QYWdlcyAyIDAgUj4+CnN0YXJ0eHJlZgoyNCAwIFIKZW5kb2JqCjEgMCBvYmoKPDwvTGluay9QYWdlcyAyIDAgUj4+CnN0YXJ0eHJlZgo2IDAgUgo+';
-const invalidBase64Content = 'invalid base64 content';
-const errorText = 'Failed to load PDF';
-const buttonText = 'View PDF';
-const loadingText = 'Loading...';
-
-// Save the original implementation of createObjectURL
-const originalCreateObjectURL = global.URL.createObjectURL;
-
-describe('PdfView Component', () => {
-  beforeAll(() => {
-    // Mock URL.createObjectURL directly
-    global.URL.createObjectURL = jest.fn(() => 'mock-url');
-  });
-
-  afterAll(() => {
-    // Restore the original implementation
-    global.URL.createObjectURL = originalCreateObjectURL;
-  });
-
-  it('renders correctly with default props', () => {
-    render(<PdfView content={validBase64Content} />);
-    expect(screen.getByText(buttonText)).toBeInTheDocument();
-  });
-
-  it('shows error message if content is invalid', () => {
-    render(<PdfView content={invalidBase64Content} />);
-    expect(screen.getByText(errorText)).toBeInTheDocument();
-  });
-
-  it('applies the provided class names', () => {
-    const className = 'custom-class';
-    render(<PdfView content={validBase64Content} className={className} />);
-    expect(screen.getByText(buttonText).parentElement).toHaveClass(className);
-  });
-
-  
-
-  it('does not show spinner or loading text if isLoading is false', () => {
-    render(<PdfView content={validBase64Content} />);
-    
-    // The component should not be in a loading state initially
-    expect(screen.queryByTestId('spinnertest')).not.toBeInTheDocument();
-    expect(screen.queryByText(loadingText)).not.toBeInTheDocument();
-  });
-});

package/src/components/PdfView/PdfView.tsx

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

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

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

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

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

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

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

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

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