dhre-component-lib 0.0.1 → 0.0.2

package/src/components/Link/Link.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LINK_TARGET } from '../Enum';
 
-interface LinkProps {
+export interface LinkProps {
   href: string;
   target?:string ;
   rel?: string;

package/src/components/Map/Directions.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+ 
+interface GetDirectionActionProps {
+  title: string;
+  titleClasses?: string; 
+  location: string;
+  locationClasses?: string; 
+  hours: string;
+  hoursClasses?: string; 
+  directionsLink: string;
+  buttonName?: string; 
+}
+ 
+const GetDirectionAction: React.FC<GetDirectionActionProps> = ({
+  title,
+  titleClasses,
+  location,
+  locationClasses,
+  hours,
+  hoursClasses,
+  directionsLink,
+  buttonName = 'Get Directions', 
+}) => {
+  return (
+<div className="direction-action-container">
+<h3 className={titleClasses}>{title}</h3>
+<p className={locationClasses}>{location}</p>
+<p className={hoursClasses}>{hours}</p>
+<a href={directionsLink} target="_blank" rel="noopener noreferrer" className="directions-link">
+        {buttonName}
+</a>
+</div>
+  );
+};
+ 
+export default GetDirectionAction;

package/src/components/Map/GoogleMap.module.scss

@@ -0,0 +1,5 @@
+.mapContainerStyle{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}

package/src/components/Map/GoogleMap.tsx

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

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

@@ -0,0 +1,2 @@
+export { default as Directions } from "./Directions";
+export { default as GoogleMap } from "./GoogleMap";

package/src/components/Modal/Modal.css

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

@@ -1,51 +1,70 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import Modal from "./Modal";
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Modal from './Modal';
 
-describe("Modal Component", () => {
-  test("renders children when open", () => {
+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={true} onClose={() => {}}>
-        <div>Modal Content</div>
+      <Modal
+        isOpen={isOpen}
+        onClose={onCloseMock}
+        modalOverlayClassname={modalOverlayClassname}
+        modalContentClassname={modalContentClassname}
+      >
+        <div>{modalContentText}</div>
       </Modal>
     );
+  };
 
-    expect(screen.getByText("Modal Content")).toBeInTheDocument();
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
-  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();
+  it('renders the modal when isOpen is true', () => {
+    renderModal(true);
+    expect(screen.getByText(modalContentText)).toBeInTheDocument();
   });
 
-  test("calls onClose when the modal is closed", () => {
-    const onCloseMock = jest.fn();
+  it('does not render the modal when isOpen is false', () => {
+    renderModal(false);
+    expect(screen.queryByText(modalContentText)).not.toBeInTheDocument();
+  });
 
-    render(
-      <Modal isOpen={true} onClose={onCloseMock}>
-        <div>Modal Content</div>
-      </Modal>
-    );
+  it('calls onClose when clicking on the overlay', () => {
+    renderModal(true);
+    const overlay = screen.getByText(modalContentText).closest('div.modalOverlay');
+    fireEvent.click(overlay!);
+    expect(onCloseMock).toHaveBeenCalled();
+  });
 
-    // Manually trigger the close event
-    onCloseMock();
+  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();
+  });
 
-    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  it('applies the provided modalOverlayClassname', () => {
+    const overlayClass = 'customOverlayClass';
+    renderModal(true, overlayClass);
+    const overlay = screen.getByText(modalContentText).closest('div.modalOverlay');
+    expect(overlay).toHaveClass(overlayClass);
   });
 
-  test("applies the className to the modal container", () => {
-    render(
-      <Modal isOpen={true} onClose={() => {}} className="custom-class">
-        <div>Modal Content</div>
-      </Modal>
-    );
+  it('applies the provided modalContentClassname', () => {
+    const contentClass = 'customContentClass';
+    renderModal(true, undefined, contentClass);
+    const modalContent = screen.getByText(modalContentText).closest('div.modalContent');
+    expect(modalContent).toHaveClass(contentClass);
+  });
 
-    const modalContainer = screen.getByText("Modal Content").parentElement;
-    expect(modalContainer).toHaveClass("custom-class");
+  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,18 +1,27 @@
 import React from "react";
-import { Modal as MuiModal } from "@mui/material";
+import "./Modal.css";
 
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
-  className?: string;
+  modalOverlayClassname?: string;
+  modalContentClassname?: string;
 }
 
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, className, ...rest }) => {
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, modalOverlayClassname, modalContentClassname }) => {
+  if (!isOpen) return null;
+
+  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
   return (
-    <MuiModal open={isOpen} onClose={onClose} {...rest}>
-      <div className={className}>{children}</div>
-    </MuiModal>
+    <div className={`modalOverlay ${modalOverlayClassname}`} onClick={handleOverlayClick}>
+      <div className={`modalContent ${modalContentClassname}`}>{children}</div>
+    </div>
   );
 };
 

package/src/components/PdfView/PdfView.css

@@ -0,0 +1,70 @@
+.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;
+  }
+  
+  .spinner-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+  
+  .error-text {
+    color: red;
+  }
+  
+  .button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  
+  .button-text {
+    background: none;
+  }
+  
+  .button-outlined {
+    border: 1px solid currentColor;
+  }
+  
+  .button-contained {
+    background-color: currentColor;
+    color: white;
+  }
+  
+  .button-primary {
+    color: blue;
+  }
+  
+  .button-secondary {
+    color: gray;
+  }
+  
+  .button-small {
+    font-size: 12px;
+  }
+  
+  .button-medium {
+    font-size: 16px;
+  }
+  
+  .button-large {
+    font-size: 20px;
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  

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

@@ -1,79 +1,43 @@
 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',
-};
+import PdfView from './PdfView';
 
 describe('PdfView Component', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
+  // 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...';
+
+  beforeAll(() => {
+    // Mock URL.createObjectURL directly
+    global.URL.createObjectURL = jest.fn(() => 'mock-url');
   });
 
-  it('should render the PDF viewer with the default button text', () => {
-    render(<PdfView {...defaultProps} />);
-    expect(screen.getByText('View PDF')).toBeInTheDocument();
+  afterAll(() => {
+    // Restore the original implementation
+    delete global.URL.createObjectURL;
   });
 
-  
-  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('renders correctly with default props', () => {
+    render(<PdfView content={validBase64Content} />);
+    expect(screen.getByText(buttonText)).toBeInTheDocument();
   });
 
-  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('shows error message if content is invalid', () => {
+    render(<PdfView content={invalidBase64Content} />);
+    expect(screen.getByText(errorText)).toBeInTheDocument();
   });
 
-  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();
+  
+  it('applies the provided class names', () => {
+    const className = 'custom-class';
+    render(<PdfView content={validBase64Content} className={className} />);
+    expect(screen.getByText(buttonText).parentElement).toHaveClass(className);
   });
+
+  // More tests for different button props can be added here...
 });