@regardio/react 0.4.5 → 0.5.1

package/src/components/leaflet-map.tsx

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

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

package/src/components/list-item.tsx

@@ -1,30 +0,0 @@
-import type { ComponentProps } from 'react';
-import { cva, type VariantProps } from '../utils/cn';
-
-const li = cva({
-  defaultVariants: {
-    variant: 'primary',
-  },
-  variants: {
-    variant: {
-      primary: [],
-    },
-  },
-});
-
-export interface ListItemProps extends ComponentProps<'li'>, VariantProps<typeof li> {}
-
-export const ListItem = (props: ListItemProps) => {
-  const { children, className, variant } = props;
-
-  return (
-    <li
-      className={li({
-        className,
-        variant,
-      })}
-    >
-      {children}
-    </li>
-  );
-};