dhre-component-lib 0.1.7 → 0.1.8

package/src/components/Map/GoogleMap.tsx

@@ -1,186 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import {
-  GoogleMap,
-  Marker,
-  Circle,
-  DirectionsRenderer,
-} from "@react-google-maps/api";
-import { useGoogleMapsLoader } from "./GoogleMapsLoader";
-import styles from './GoogleMap.module.scss'
-export interface MapComponentProps {
-  containerClassName?: string;
-  zoom?: number;
-  mapOptions?: google.maps.MapOptions;
-  radius?: number;
-  googleMapsUrls: string[];
-  buttonText: string;
-  buttonClassName: string;
-}
-
-const MapComponent: React.FC<MapComponentProps> = ({
-  containerClassName = "map-container",
-  zoom = 18,
-  mapOptions = {
-    zoomControl: true,
-    tilt: 0,
-    gestureHandling: "auto",
-    mapTypeId: "roadmap",
-  },
-  radius = 5000,
-  googleMapsUrls,
-  buttonText,
-  buttonClassName,
-}) => {
-  const [location, setLocation] = useState<{
-    latitude: number;
-    longitude: number;
-  } | null>(null);
-  const [mapVisible, setMapVisible] = useState(false);
-  const [directionsResponse, setDirectionsResponse] =
-    useState<google.maps.DirectionsResult | null>(null);
-  const mapRef = useRef<google.maps.Map | null>(null);
-  const directionsService = useRef<google.maps.DirectionsService | null>(null);
-  const directionsRenderer = useRef<google.maps.DirectionsRenderer | null>(
-    null
-  );
-
-  const handleLocationRequest = () => {
-    if ("geolocation" in navigator) {
-      navigator.geolocation.getCurrentPosition(
-        ({ coords }) => {
-          const { latitude, longitude } = coords;
-          setLocation({ latitude, longitude });
-          setMapVisible(true);
-        },
-        () => {
-          alert("Failed to get location. Please try again.");
-        }
-      );
-    } else {
-      alert("Geolocation is not supported by this browser.");
-    }
-  };
-
-  const handleMarkerClick = (lat: number, lng: number) => {
-    if (location) {
-      const directionsServiceInstance =
-        directionsService.current || new google.maps.DirectionsService();
-      const directionsRendererInstance =
-        directionsRenderer.current || new google.maps.DirectionsRenderer();
-
-      if (!directionsService.current)
-        directionsService.current = directionsServiceInstance;
-      if (!directionsRenderer.current)
-        directionsRenderer.current = directionsRendererInstance;
-
-      const directionsRequest: google.maps.DirectionsRequest = {
-        origin: { lat: location.latitude, lng: location.longitude },
-        destination: { lat, lng },
-        travelMode: google.maps.TravelMode.DRIVING,
-      };
-
-      directionsService.current.route(directionsRequest, (result, status) => {
-        if (status === google.maps.DirectionsStatus.OK) {
-          setDirectionsResponse(result);
-          if (mapRef.current && directionsRenderer.current) {
-            directionsRenderer.current.setMap(mapRef.current);
-            directionsRenderer.current.setDirections(result);
-          }
-        } else {
-          alert("Failed to get directions. Please try again."); 
-        }
-      });
-    }
-  };
-
-  const extractCoordinatesFromUrl = (url: string) => {
-    const regex = /@(-?\d+\.\d+),(-?\d+\.\d+)/;
-    const match = url.match(regex);
-    if (match) {
-      return {
-        lat: parseFloat(match[1]),
-        lng: parseFloat(match[2]),
-      };
-    }
-
-    return null;
-  };
-
-  const { isLoaded } = useGoogleMapsLoader();
-
-  useEffect(() => {}, [isLoaded]);
-
-  useEffect(() => {}, [mapVisible]);
-
-  if (!isLoaded) {
-    return <div>Loading map...</div>;
-  }
-
-  if (mapVisible && location) {
-    return (
-      <div className={containerClassName}>
-        <button onClick={handleLocationRequest} className={buttonClassName}>
-          {buttonText}
-        </button>
-
-        <GoogleMap
-          mapContainerStyle={styles.mapContainerStyle}
-          center={{ lat: location.latitude, lng: location.longitude }}
-          zoom={zoom}
-          options={mapOptions}
-          onLoad={(map) => {
-            mapRef.current = map;
-            directionsRenderer.current = new google.maps.DirectionsRenderer();
-            directionsRenderer.current.setMap(map);
-          }}
-        >
-          <Marker
-            position={{ lat: location.latitude, lng: location.longitude }}
-            icon="http://maps.google.com/mapfiles/ms/icons/red-dot.png"
-          />
-          <Circle
-            center={{ lat: location.latitude, lng: location.longitude }}
-            radius={radius}
-            options={{
-              strokeColor: "#FF0000",
-              strokeOpacity: 0.8,
-              strokeWeight: 2,
-              fillColor: "#FF0000",
-              fillOpacity: 0,
-            }}
-          />
-          {googleMapsUrls.map((url, index) => {
-            const coord = extractCoordinatesFromUrl(url);
-            if (!coord) return null;
-
-            return (
-              <Marker
-                key={index}
-                position={{ lat: coord.lat, lng: coord.lng }}
-                title={`Sample Location ${index + 1}`}
-                icon="http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
-                onClick={() => handleMarkerClick(coord.lat, coord.lng)}
-              />
-            );
-          })}
-          {directionsResponse && (
-            <DirectionsRenderer
-              directions={directionsResponse}
-              options={{ suppressMarkers: true }}
-            />
-          )}
-        </GoogleMap>
-      </div>
-    );
-  } else {
-    return (
-      <div className={containerClassName}>
-        <button onClick={handleLocationRequest} className={buttonClassName}>
-          {buttonText}
-        </button>
-      </div>
-    );
-  }
-};
-
-export default MapComponent;

package/src/components/Map/GoogleMapsLoader.tsx

@@ -1,12 +0,0 @@
-import { useJsApiLoader } from '@react-google-maps/api';
-
-const GOOGLE_MAPS_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAP_API as string; // Ensure you are using environment variable
-
-export const useGoogleMapsLoader = () => {
-    return useJsApiLoader({
-        googleMapsApiKey: GOOGLE_MAPS_API_KEY, // Replace with your API key
-        libraries: ['places', 'drawing', 'geometry'], // Include all libraries you need
-        language: 'en',
-        region: 'US',
-    });
-};

package/src/components/Map/index.ts

@@ -1,3 +0,0 @@
-export { default as Directions } from "./Directions";
-export { default as GoogleMap } from "./GoogleMap";
-import "./GoogleMap.module.scss"

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

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

@@ -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,2 +0,0 @@
-export { default } from "./Modal";
-import "./Modal.module.scss"

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,2 +0,0 @@
-export { default } from "./Notification";
-import "./Notification.module.scss"

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,2 +0,0 @@
-export { default } from "./OtpInput";
-import "./OtpInput.module.scss"

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();
-  });
-});