dhre-component-lib 0.0.9 → 0.1.0

package/src/components/Modal/Modal.module.scss

@@ -0,0 +1,26 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background: white;
+  position: relative;
+  width: auto;
+  height: auto;
+  max-width: 80vw;
+  max-height: 80vh;
+  overflow: scroll;
+}
+
+.modalContent::-webkit-scrollbar {
+  display: none;
+}

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Modal from './Modal';
+
+describe('Modal Component', () => {
+  const onCloseMock = jest.fn();
+  const modalContentText = 'This is the modal content';
+
+  const renderModal = (
+    isOpen: boolean,
+    modalOverlayClassname?: string,
+    modalContentClassname?: string
+  ) => {
+    render(
+      <Modal
+        isOpen={isOpen}
+        onClose={onCloseMock}
+        modalOverlayClassname={modalOverlayClassname}
+        modalContentClassname={modalContentClassname}
+      >
+        <div>{modalContentText}</div>
+      </Modal>
+    );
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the modal when isOpen is true', () => {
+    renderModal(true);
+    expect(screen.getByText(modalContentText)).toBeInTheDocument();
+  });
+
+  it('does not render the modal when isOpen is false', () => {
+    renderModal(false);
+    expect(screen.queryByText(modalContentText)).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when clicking on the overlay', () => {
+    renderModal(true);
+    const overlay = screen.getByText(modalContentText).closest('button');
+    fireEvent.click(overlay!);
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+
+  it('does not call onClose when clicking inside the modal content', () => {
+    renderModal(true);
+    const modalContent = screen.getByText(modalContentText);
+    fireEvent.click(modalContent);
+    expect(onCloseMock).not.toHaveBeenCalled();
+  });
+
+  it('applies the provided modalOverlayClassname', () => {
+    const overlayClass = 'customOverlayClass';
+    renderModal(true, overlayClass);
+    const overlay = screen.getByText(modalContentText).closest('button');
+    expect(overlay).toHaveClass(overlayClass);
+  });
+
+  it('applies the provided modalContentClassname', () => {
+    const contentClass = 'customContentClass';
+    renderModal(true, undefined, contentClass);
+    const modalContent = screen.getByText(modalContentText);
+    expect(modalContent.parentElement).toHaveClass(contentClass);
+  });
+
+  it('does not render modal when isOpen is false, even if modalOverlayClassname and modalContentClassname are provided', () => {
+    const overlayClass = 'customOverlayClass';
+    const contentClass = 'customContentClass';
+    renderModal(false, overlayClass, contentClass);
+    expect(screen.queryByText(modalContentText)).not.toBeInTheDocument();
+  });
+});

package/src/components/Modal/Modal.tsx

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

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

package/src/components/Notification/Notification.module.scss

@@ -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.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

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

package/src/components/OtpInput/OtpInput.module.scss

@@ -0,0 +1,49 @@
+@import '../../theme/colors/colors.scss';
+
+.otpMainContainer {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 10px;
+    width: 343px;
+  }
+  
+  .otpInputDiv { 
+    flex-direction: row;
+    gap: 12px;
+    display: flex 
+  }
+  
+  .otpInput {
+      width: 76px;
+      height: 48px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 400;
+      border-radius: 8px;
+  }
+  
+  .resendContainer {
+      display: flex;
+      flex-direction: row;
+      margin-top: 10px;
+      justify-content: space-between;
+  }
+  
+  .errorText {
+    color: $border-brand-danger;
+    font-weight: 400;
+    font-size: 14px;
+  }
+  
+  .timerText {
+    color: $content-disabled;
+    font-weight: 400;
+    font-size: 14px;
+  }
+  .resendText {
+    color: $content-disabled;
+    font-weight: 700;
+    font-size: 14px;
+  }
+  

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

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

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

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

package/src/components/PdfView/PdfView.module.scss

@@ -0,0 +1,69 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  border: 2px solid transparent;
+  border-radius: 50%;
+  border-top: 2px solid currentColor;
+  animation: spin 1s linear infinite;
+}
+
+.spinnerInner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.errorText {
+  color: red;
+}
+
+.button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+
+  &-text {
+    background: none;
+  }
+
+  &-outlined {
+    border: 1px solid currentColor;
+  }
+
+  &-contained {
+    background-color: currentColor;
+    color: white;
+  }
+
+  &-primary {
+    color: blue;
+  }
+
+  &-secondary {
+    color: gray;
+  }
+
+  &-small {
+    font-size: 12px;
+  }
+
+  &-medium {
+    font-size: 16px;
+  }
+
+  &-large {
+    font-size: 20px;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,52 @@
+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();
+  });
+});