dhre-component-lib 0.0.8 → 0.0.9

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.module.scss

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

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

package/src/components/RadioButton/index.ts

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

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

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

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

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