@regardio/react 0.3.2

package/src/components/leaflet-map.tsx

@@ -0,0 +1,294 @@
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+import { useEffect, useRef } from 'react';
+
+interface MapMarker {
+  lat: number;
+  lng: number;
+  id: string;
+  content?: string;
+  htmlContent?: string;
+  imageUrl?: string;
+  imageAlt?: string;
+  offset?: { x: number; y: number };
+}
+
+interface LeafletMapProps {
+  markers: MapMarker[];
+  mapUrl: string;
+  center?: { lat: number; lng: number };
+  zoom?: number;
+  icon?: {
+    iconUrl: string;
+    iconSize: [number, number];
+    iconAnchor: [number, number];
+  };
+  attribution?: string;
+  showPopupsOnHover?: boolean;
+}
+
+export const LeafletMap = ({
+  markers,
+  mapUrl,
+  center,
+  zoom = 12,
+  icon = {
+    iconAnchor: [12, 41] as [number, number],
+    iconSize: [25, 41] as [number, number],
+    iconUrl: '/marker-icon-2x.png',
+  },
+  attribution = '',
+  showPopupsOnHover = false,
+}: LeafletMapProps) => {
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<L.Map | null>(null);
+  const markersRef = useRef<L.Marker[]>([]);
+
+  useEffect(() => {
+    if (!mapContainerRef.current || typeof window === 'undefined') return;
+
+    // Calculate center
+    let calculatedCenter: [number, number];
+    if (center) {
+      calculatedCenter = [center.lat, center.lng];
+    } else if (markers.length > 0) {
+      const firstMarker = markers[0];
+      if (firstMarker) {
+        calculatedCenter = [firstMarker.lat, firstMarker.lng];
+      } else {
+        calculatedCenter = [52.520008, 13.404954];
+      }
+    } else {
+      calculatedCenter = [52.520008, 13.404954];
+    }
+
+    // Initialize map - check if already initialized
+    if (mapRef.current) {
+      try {
+        // Clean up existing markers
+        markersRef.current.forEach((marker) => {
+          try {
+            mapRef.current?.removeLayer(marker);
+          } catch (_error) {
+            // Marker might already be removed
+          }
+        });
+        mapRef.current.remove();
+      } catch (_error) {
+        // Map might already be removed
+      }
+    }
+
+    // Ensure container is clean and prevent duplicate initialization
+    const container = mapContainerRef.current;
+    if (container) {
+      // Clear any existing content and remove any existing map
+      container.innerHTML = '';
+
+      // Check if container already has a map
+      const leafletContainer = container as HTMLDivElement & {
+        _leaflet_id?: number;
+      };
+      if (leafletContainer._leaflet_id) {
+        delete leafletContainer._leaflet_id;
+      }
+
+      // Ensure container has unique ID or remove existing map
+      container.setAttribute('data-map-initialized', 'false');
+    }
+
+    const map = new L.Map(mapContainerRef.current, {
+      center: calculatedCenter,
+      scrollWheelZoom: false,
+      tapTolerance: 100,
+      zoom: zoom,
+    });
+
+    // Add tile layer
+    new L.TileLayer(mapUrl, {
+      attribution,
+    }).addTo(map);
+
+    // Create custom icon
+    const customIcon = new L.Icon({
+      iconAnchor: icon.iconAnchor,
+      iconSize: icon.iconSize,
+      iconUrl: icon.iconUrl,
+    });
+
+    // Add markers with popups
+    const newMarkers: L.Marker[] = [];
+
+    markers.forEach((marker) => {
+      const markerLatLng: [number, number] = [marker.lat, marker.lng];
+      const leafletMarker = new L.Marker(markerLatLng, {
+        icon: customIcon,
+      }).addTo(map);
+
+      // Apply offset if provided
+      const offset = marker.offset || { x: 0, y: 0 };
+
+      // Create popup content
+      let popupContent = '';
+      if (marker.htmlContent) {
+        popupContent = marker.htmlContent;
+      } else if (marker.content) {
+        popupContent = marker.content;
+      }
+
+      // Add image if provided
+      if (marker.imageUrl) {
+        const imageHtml = `<img src="${marker.imageUrl}" alt="${marker.imageAlt || ''}" style="max-width: 100%; height: auto; display: block; margin-bottom: 8px;" />`;
+        popupContent = imageHtml + popupContent;
+      }
+
+      if (popupContent) {
+        const popup = new L.Popup({
+          className: 'custom-map-popup',
+          closeButton: false,
+          offset: [offset.x, offset.y],
+        }).setContent(popupContent);
+
+        leafletMarker.bindPopup(popup);
+
+        // Show popup on hover if enabled
+        if (showPopupsOnHover) {
+          leafletMarker.on('mouseover', () => {
+            leafletMarker.openPopup();
+          });
+          leafletMarker.on('mouseout', () => {
+            leafletMarker.closePopup();
+          });
+        }
+      }
+
+      newMarkers.push(leafletMarker);
+    });
+
+    markersRef.current = newMarkers;
+
+    // Fit bounds if markers exist
+    if (markers.length > 0) {
+      const bounds = new L.LatLngBounds(markers.map((m) => new L.LatLng(m.lat, m.lng)));
+      map.fitBounds(bounds, { padding: [20, 20] });
+    }
+
+    mapRef.current = map;
+
+    // Cleanup function
+    return () => {
+      if (mapRef.current) {
+        try {
+          // Remove all markers
+          markersRef.current.forEach((marker) => {
+            try {
+              mapRef.current?.removeLayer(marker);
+            } catch (_error) {
+              // Marker might already be removed
+            }
+          });
+          mapRef.current.remove();
+          mapRef.current = null;
+
+          // Clean up container
+          if (mapContainerRef.current) {
+            mapContainerRef.current.innerHTML = '';
+            mapContainerRef.current.removeAttribute('data-map-initialized');
+          }
+        } catch (_error) {
+          // Map might already be removed
+        }
+      }
+      markersRef.current = [];
+    };
+  }, [markers, mapUrl, zoom, icon, attribution, center, showPopupsOnHover]);
+
+  // Update markers when they change
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || typeof window === 'undefined') return;
+
+    // Remove existing markers
+    markersRef.current.forEach((marker) => {
+      try {
+        map.removeLayer(marker);
+      } catch (_error) {
+        // Marker might already be removed
+      }
+    });
+    markersRef.current = [];
+
+    // Create new icon
+    const customIcon = new L.Icon({
+      iconAnchor: icon.iconAnchor,
+      iconSize: icon.iconSize,
+      iconUrl: icon.iconUrl,
+    });
+
+    // Add new markers with popups
+    const newMarkers: L.Marker[] = [];
+
+    markers.forEach((marker) => {
+      const markerLatLng: [number, number] = [marker.lat, marker.lng];
+      const leafletMarker = new L.Marker(markerLatLng, {
+        icon: customIcon,
+      }).addTo(map);
+
+      // Apply offset if provided
+      const offset = marker.offset || { x: 0, y: 0 };
+
+      // Create popup content
+      let popupContent = '';
+      if (marker.htmlContent) {
+        popupContent = marker.htmlContent;
+      } else if (marker.content) {
+        popupContent = marker.content;
+      }
+
+      // Add image if provided
+      if (marker.imageUrl) {
+        const imageHtml = `<img src="${marker.imageUrl}" alt="${marker.imageAlt || ''}" style="max-width: 100%; height: auto; display: block; margin-bottom: 8px;" />`;
+        popupContent = imageHtml + popupContent;
+      }
+
+      if (popupContent) {
+        const popup = new L.Popup({
+          className: 'custom-map-popup',
+          closeButton: false,
+          offset: [offset.x, offset.y],
+        }).setContent(popupContent);
+
+        leafletMarker.bindPopup(popup);
+
+        // Show popup on hover if enabled
+        if (showPopupsOnHover) {
+          leafletMarker.on('mouseover', () => {
+            leafletMarker.openPopup();
+          });
+          leafletMarker.on('mouseout', () => {
+            leafletMarker.closePopup();
+          });
+        }
+      }
+
+      newMarkers.push(leafletMarker);
+    });
+
+    markersRef.current = newMarkers;
+
+    // Update bounds if markers exist
+    if (markers.length > 0) {
+      const bounds = new L.LatLngBounds(markers.map((m) => new L.LatLng(m.lat, m.lng)));
+      map.fitBounds(bounds, { padding: [20, 20] });
+    }
+  }, [markers, icon, showPopupsOnHover]);
+
+  return (
+    <div
+      className="h-full w-full"
+      ref={mapContainerRef}
+    />
+  );
+};
+
+export default LeafletMap;

package/src/components/link.test.tsx

@@ -0,0 +1,387 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { Link, LinkBase, MarkdownLink, PathResolverProvider, usePathResolver } from './link';
+
+// Helper to render with router context
+const renderWithRouter = (ui: React.ReactNode, { route = '/' } = {}) => {
+  return render(<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>);
+};
+
+describe('LinkBase', () => {
+  describe('path resolution', () => {
+    test('renders with string "to" prop', () => {
+      renderWithRouter(<LinkBase to="/about">About</LinkBase>);
+
+      const link = screen.getByRole('link', { name: 'About' });
+      expect(link).toHaveAttribute('href', '/about');
+    });
+
+    test('renders with object "to" prop containing pathname', () => {
+      renderWithRouter(<LinkBase to={{ pathname: '/contact' }}>Contact</LinkBase>);
+
+      const link = screen.getByRole('link', { name: 'Contact' });
+      expect(link).toHaveAttribute('href', '/contact');
+    });
+
+    test('renders with object "to" prop containing pathname, search, and hash', () => {
+      renderWithRouter(
+        <LinkBase to={{ hash: '#section', pathname: '/page', search: '?foo=bar' }}>
+          Full Path
+        </LinkBase>,
+      );
+
+      const link = screen.getByRole('link', { name: 'Full Path' });
+      expect(link).toHaveAttribute('href', '/page?foo=bar#section');
+    });
+
+    test('uses pathResolver when routeKey is provided', () => {
+      const mockResolver = vi.fn().mockReturnValue('/resolved-path');
+
+      renderWithRouter(
+        <PathResolverProvider value={mockResolver}>
+          <LinkBase routeKey="home">Home</LinkBase>
+        </PathResolverProvider>,
+      );
+
+      expect(mockResolver).toHaveBeenCalledWith('home');
+      const link = screen.getByRole('link', { name: 'Home' });
+      expect(link).toHaveAttribute('href', '/resolved-path');
+    });
+
+    test('falls back to "to" prop when no pathResolver is available', () => {
+      renderWithRouter(
+        <LinkBase
+          routeKey="home"
+          to="/fallback"
+        >
+          Home
+        </LinkBase>,
+      );
+
+      const link = screen.getByRole('link', { name: 'Home' });
+      expect(link).toHaveAttribute('href', '/fallback');
+    });
+
+    test('renders children only when path is empty', () => {
+      renderWithRouter(<LinkBase>No Link</LinkBase>);
+
+      expect(screen.queryByRole('link')).toBeNull();
+      expect(screen.getByText('No Link')).toBeInTheDocument();
+    });
+
+    test('renders nothing for function children when path is empty', () => {
+      const { container } = renderWithRouter(
+        <LinkBase>{() => <span>Function Child</span>}</LinkBase>,
+      );
+
+      expect(screen.queryByRole('link')).toBeNull();
+      expect(container.textContent).toBe('');
+    });
+  });
+
+  describe('external links', () => {
+    let windowOpenSpy: ReturnType<typeof vi.spyOn>;
+
+    beforeEach(() => {
+      windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    });
+
+    afterEach(() => {
+      windowOpenSpy.mockRestore();
+    });
+
+    test('renders tel: links as anchor elements', () => {
+      renderWithRouter(<LinkBase to="tel:+1234567890">Call Us</LinkBase>);
+
+      const link = screen.getByRole('link', { name: 'Call Us' });
+      expect(link.tagName).toBe('A');
+      expect(link).toHaveAttribute('href', 'tel:+1234567890');
+    });
+
+    test('renders mailto: links as anchor elements', () => {
+      renderWithRouter(<LinkBase to="mailto:test@example.com">Email Us</LinkBase>);
+
+      const link = screen.getByRole('link', { name: 'Email Us' });
+      expect(link.tagName).toBe('A');
+      expect(link).toHaveAttribute('href', 'mailto:test@example.com');
+    });
+
+    test('opens http links in new tab on click', () => {
+      renderWithRouter(<LinkBase to="https://example.com">External</LinkBase>);
+
+      const link = screen.getByRole('link', { name: 'External' });
+      fireEvent.click(link);
+
+      expect(windowOpenSpy).toHaveBeenCalledWith(
+        'https://example.com',
+        '_blank',
+        'noopener,noreferrer',
+      );
+    });
+
+    test('handles hash links with smooth scroll', () => {
+      const mockElement = document.createElement('div');
+      mockElement.id = 'section';
+      mockElement.scrollIntoView = vi.fn();
+      document.body.appendChild(mockElement);
+
+      renderWithRouter(<LinkBase to="#section">Go to Section</LinkBase>);
+
+      const link = screen.getByRole('link', { name: 'Go to Section' });
+      fireEvent.click(link);
+
+      expect(mockElement.scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' });
+
+      document.body.removeChild(mockElement);
+    });
+
+    test('does not scroll if hash element does not exist', () => {
+      renderWithRouter(<LinkBase to="#nonexistent">Missing Section</LinkBase>);
+
+      const link = screen.getByRole('link', { name: 'Missing Section' });
+      // Should not throw
+      expect(() => fireEvent.click(link)).not.toThrow();
+    });
+  });
+
+  describe('onClick handling', () => {
+    test('calls custom onClick handler', () => {
+      const handleClick = vi.fn();
+
+      renderWithRouter(
+        <LinkBase
+          onClick={handleClick}
+          to="/page"
+        >
+          Click Me
+        </LinkBase>,
+      );
+
+      const link = screen.getByRole('link', { name: 'Click Me' });
+      fireEvent.click(link);
+
+      expect(handleClick).toHaveBeenCalled();
+    });
+
+    test('respects preventDefault from custom onClick', () => {
+      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+      const handleClick = vi.fn((e: React.MouseEvent) => e.preventDefault());
+
+      renderWithRouter(
+        <LinkBase
+          onClick={handleClick}
+          to="https://example.com"
+        >
+          External
+        </LinkBase>,
+      );
+
+      const link = screen.getByRole('link', { name: 'External' });
+      fireEvent.click(link);
+
+      expect(handleClick).toHaveBeenCalled();
+      expect(windowOpenSpy).not.toHaveBeenCalled();
+
+      windowOpenSpy.mockRestore();
+    });
+  });
+
+  describe('className and style handling', () => {
+    test('applies static className to external links', () => {
+      renderWithRouter(
+        <LinkBase
+          className="custom-class"
+          to="https://example.com"
+        >
+          External
+        </LinkBase>,
+      );
+
+      const link = screen.getByRole('link', { name: 'External' });
+      expect(link).toHaveClass('custom-class');
+    });
+
+    test('resolves function className for external links', () => {
+      renderWithRouter(
+        <LinkBase
+          className={({ isActive }) => (isActive ? 'active' : 'inactive')}
+          to="https://example.com"
+        >
+          External
+        </LinkBase>,
+      );
+
+      const link = screen.getByRole('link', { name: 'External' });
+      expect(link).toHaveClass('inactive');
+    });
+
+    test('resolves function style for external links', () => {
+      renderWithRouter(
+        <LinkBase
+          style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}
+          to="https://example.com"
+        >
+          External
+        </LinkBase>,
+      );
+
+      const link = screen.getByRole('link', { name: 'External' });
+      expect(link).toHaveStyle({ color: 'rgb(0, 0, 255)' });
+    });
+
+    test('resolves function children for external links', () => {
+      renderWithRouter(
+        <LinkBase to="https://example.com">
+          {({ isActive }) => (isActive ? 'Active' : 'Inactive')}
+        </LinkBase>,
+      );
+
+      expect(screen.getByText('Inactive')).toBeInTheDocument();
+    });
+  });
+
+  describe('viewTransition prop', () => {
+    test('defaults to true for internal links', () => {
+      renderWithRouter(<LinkBase to="/page">Page</LinkBase>);
+
+      // NavLink should receive viewTransition=true by default
+      const link = screen.getByRole('link', { name: 'Page' });
+      expect(link).toBeInTheDocument();
+    });
+
+    test('can be disabled', () => {
+      renderWithRouter(
+        <LinkBase
+          to="/page"
+          viewTransition={false}
+        >
+          Page
+        </LinkBase>,
+      );
+
+      const link = screen.getByRole('link', { name: 'Page' });
+      expect(link).toBeInTheDocument();
+    });
+  });
+});
+
+describe('Link', () => {
+  test('applies variant classes', () => {
+    renderWithRouter(
+      <Link
+        to="/page"
+        variant="button"
+      >
+        Button Link
+      </Link>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Button Link' });
+    expect(link).toHaveClass('button');
+  });
+
+  test('applies arrow classes', () => {
+    renderWithRouter(
+      <Link
+        arrow="rarr"
+        to="/page"
+      >
+        Arrow Link
+      </Link>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Arrow Link' });
+    expect(link).toHaveClass('rarr');
+  });
+
+  test('merges custom className with variant classes', () => {
+    renderWithRouter(
+      <Link
+        className="custom"
+        to="/page"
+        variant="code"
+      >
+        Code Link
+      </Link>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Code Link' });
+    expect(link).toHaveClass('font-monospace');
+    expect(link).toHaveClass('custom');
+  });
+
+  test('passes through routeKey to LinkBase', () => {
+    const mockResolver = vi.fn().mockReturnValue('/resolved');
+
+    renderWithRouter(
+      <PathResolverProvider value={mockResolver}>
+        <Link routeKey="test">Test</Link>
+      </PathResolverProvider>,
+    );
+
+    expect(mockResolver).toHaveBeenCalledWith('test');
+  });
+});
+
+describe('MarkdownLink', () => {
+  test('renders Link when href is provided', () => {
+    renderWithRouter(<MarkdownLink href="/page">Markdown Link</MarkdownLink>);
+
+    const link = screen.getByRole('link', { name: 'Markdown Link' });
+    expect(link).toHaveAttribute('href', '/page');
+  });
+
+  test('renders null when href is not provided', () => {
+    const { container } = renderWithRouter(<MarkdownLink>No Href</MarkdownLink>);
+
+    expect(container.textContent).toBe('');
+  });
+
+  test('passes through Link props', () => {
+    renderWithRouter(
+      <MarkdownLink
+        href="/page"
+        variant="subtitle"
+      >
+        Styled Link
+      </MarkdownLink>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Styled Link' });
+    expect(link).toHaveClass('text-lg');
+  });
+});
+
+describe('usePathResolver', () => {
+  test('returns null when no provider is present', () => {
+    let resolverValue: ReturnType<typeof usePathResolver> = vi.fn();
+
+    const TestComponent = () => {
+      resolverValue = usePathResolver();
+      return null;
+    };
+
+    render(<TestComponent />);
+
+    expect(resolverValue).toBeNull();
+  });
+
+  test('returns resolver function when provider is present', () => {
+    const mockResolver = vi.fn().mockReturnValue('/path');
+    let resolverValue: ReturnType<typeof usePathResolver> = null;
+
+    const TestComponent = () => {
+      resolverValue = usePathResolver();
+      return null;
+    };
+
+    render(
+      <PathResolverProvider value={mockResolver}>
+        <TestComponent />
+      </PathResolverProvider>,
+    );
+
+    expect(resolverValue).toBe(mockResolver);
+  });
+});