@seed-ship/mcp-ui-solid 1.2.2 → 2.0.0

package/src/components/LightboxOverlay.tsx

@@ -0,0 +1,172 @@
+/**
+ * LightboxOverlay - Fullscreen image viewer
+ * Sprint 5: Media Components
+ */
+
+import { Component, Show, createEffect, onCleanup } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import type { GalleryImage } from '../types'
+
+export interface LightboxOverlayProps {
+  /**
+   * Array of images to navigate through
+   */
+  images: GalleryImage[]
+
+  /**
+   * Currently selected image index (null when closed)
+   */
+  selectedIndex: number | null
+
+  /**
+   * Callback when lightbox should close
+   */
+  onClose: () => void
+
+  /**
+   * Callback when navigating to a different image
+   */
+  onNavigate: (index: number) => void
+}
+
+export const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {
+  const isOpen = () => props.selectedIndex !== null
+  const currentImage = () =>
+    props.selectedIndex !== null ? props.images[props.selectedIndex] : null
+  const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0
+  const canGoNext = () =>
+    props.selectedIndex !== null && props.selectedIndex < props.images.length - 1
+
+  const handlePrev = () => {
+    if (canGoPrev()) {
+      props.onNavigate(props.selectedIndex! - 1)
+    }
+  }
+
+  const handleNext = () => {
+    if (canGoNext()) {
+      props.onNavigate(props.selectedIndex! + 1)
+    }
+  }
+
+  // Keyboard navigation
+  createEffect(() => {
+    if (!isOpen()) return
+
+    const handleKeydown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          props.onClose()
+          break
+        case 'ArrowLeft':
+          handlePrev()
+          break
+        case 'ArrowRight':
+          handleNext()
+          break
+      }
+    }
+
+    document.addEventListener('keydown', handleKeydown)
+    document.body.style.overflow = 'hidden'
+
+    onCleanup(() => {
+      document.removeEventListener('keydown', handleKeydown)
+      document.body.style.overflow = ''
+    })
+  })
+
+  return (
+    <Show when={isOpen()}>
+      <Portal>
+        <div
+          class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
+          onClick={props.onClose}
+          role="dialog"
+          aria-modal="true"
+          aria-label="Image lightbox"
+        >
+          {/* Close button */}
+          <button
+            class="absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"
+            onClick={props.onClose}
+            aria-label="Close lightbox"
+          >
+            <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+
+          {/* Previous button */}
+          <Show when={canGoPrev()}>
+            <button
+              class="absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation()
+                handlePrev()
+              }}
+              aria-label="Previous image"
+            >
+              <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
+          </Show>
+
+          {/* Next button */}
+          <Show when={canGoNext()}>
+            <button
+              class="absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleNext()
+              }}
+              aria-label="Next image"
+            >
+              <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          </Show>
+
+          {/* Image */}
+          <img
+            src={currentImage()?.url}
+            alt={currentImage()?.alt || ''}
+            srcset={currentImage()?.srcset}
+            sizes={currentImage()?.sizes}
+            class="max-w-[90vw] max-h-[90vh] object-contain"
+            onClick={(e) => e.stopPropagation()}
+          />
+
+          {/* Caption */}
+          <Show when={currentImage()?.caption}>
+            <div class="absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center">
+              {currentImage()!.caption}
+            </div>
+          </Show>
+
+          {/* Counter */}
+          <div class="absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm">
+            {(props.selectedIndex ?? 0) + 1} / {props.images.length}
+          </div>
+        </div>
+      </Portal>
+    </Show>
+  )
+}

package/src/components/MapRenderer.test.tsx

@@ -0,0 +1,100 @@
+/**
+ * MapRenderer Tests
+ * Sprint 6 Refinement
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render } from '@solidjs/testing-library'
+import { MapRenderer } from './MapRenderer'
+import type { MapComponentParams } from '../types'
+
+// Mock Leaflet
+const setViewMock = vi.fn()
+const addLayerMock = vi.fn()
+const removeLayerMock = vi.fn()
+const bindTooltipMock = vi.fn()
+const bindPopupMock = vi.fn()
+const removeMock = vi.fn()
+const fitBoundsMock = vi.fn()
+
+const mapMock = {
+    setView: setViewMock.mockReturnThis(),
+    eachLayer: vi.fn(),
+    removeLayer: removeLayerMock,
+    remove: removeMock,
+    getZoom: vi.fn(() => 13),
+    fitBounds: fitBoundsMock.mockReturnThis(),
+}
+
+const markerMock = {
+    addTo: addLayerMock.mockReturnThis(),
+    bindTooltip: bindTooltipMock.mockReturnThis(),
+    bindPopup: bindPopupMock.mockReturnThis(),
+}
+
+const tileLayerMock = {
+    addTo: addLayerMock.mockReturnThis(),
+}
+
+const controlMock = {
+    attribution: vi.fn(() => ({ addTo: vi.fn() }))
+}
+
+const featureGroupMock = {
+    getBounds: vi.fn(() => ({ pad: vi.fn() }))
+}
+
+vi.mock('leaflet', () => ({
+    default: {
+        map: vi.fn(() => mapMock),
+        tileLayer: vi.fn(() => tileLayerMock),
+        marker: vi.fn(() => markerMock),
+        featureGroup: vi.fn(() => featureGroupMock),
+        control: controlMock,
+        Icon: {
+            Default: {
+                prototype: { _getIconUrl: vi.fn() },
+                mergeOptions: vi.fn(),
+            }
+        }
+    }
+}))
+
+vi.mock('leaflet/dist/leaflet.css', () => ({}))
+
+describe('MapRenderer', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+        mapMock.setView.mockClear()
+    })
+
+    const defaultParams: MapComponentParams = {
+        center: [51.505, -0.09],
+        zoom: 13,
+        markers: [
+            { position: [51.5, -0.09], tooltip: 'Marker 1' }
+        ]
+    }
+
+    it('renders map container', () => {
+        const { container } = render(() => <MapRenderer params={defaultParams} />)
+        const mapDiv = container.querySelector('div[style*="height: 400px"]')
+        expect(mapDiv).toBeTruthy()
+    })
+
+    it('renders with new marker format', () => {
+        // This test mostly verifies type check and structural validity since actual logic is mocked
+        const { container } = render(() => <MapRenderer params={{
+            markers: [{ position: [10, 20], tooltip: 'Hello', popup: 'World' }]
+        }} />)
+        expect(container).toBeTruthy()
+    })
+
+    it('renders with fitBounds', () => {
+        const { container } = render(() => <MapRenderer params={{
+            markers: [{ position: [10, 20] }],
+            fitBounds: true
+        }} />)
+        expect(container).toBeTruthy()
+    })
+})

package/src/components/MapRenderer.tsx

@@ -0,0 +1,201 @@
+/**
+ * MapRenderer - Interactive map Component
+ * Sprint 6: Code & Maps
+ * Sprint Ultimate U.2: Marker Clustering Support
+ */
+
+import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'
+import { isServer } from 'solid-js/web'
+import type { UIComponent, MapComponentParams, MapClusterOptions } from '../types'
+
+// Lazy load leaflet (it doesn't support SSR well)
+let L: any = null
+// Track if marker cluster CSS has been loaded
+let clusterCssLoaded = false
+
+export interface MapRendererProps {
+    /**
+     * UIComponent containing map params
+     */
+    component?: UIComponent
+
+    /**
+     * Direct map params
+     */
+    params?: MapComponentParams
+}
+
+export const MapRenderer: Component<MapRendererProps> = (props) => {
+    let mapContainer: HTMLDivElement | undefined
+    let mapInstance: any = null
+    const [isLeafletLoaded, setIsLeafletLoaded] = createSignal(false)
+    const [error, setError] = createSignal<string | null>(null)
+
+    const params = () => props.params || (props.component?.params as MapComponentParams)
+
+    // Initialize Map
+    createEffect(async () => {
+        if (isServer) return // Don't run on server
+
+        if (!L) {
+            try {
+                const module = await import('leaflet')
+                L = module.default || module
+                await import('leaflet/dist/leaflet.css') // Import CSS
+                setIsLeafletLoaded(true)
+            } catch (e) {
+                console.warn('Failed to load leaflet', e)
+                setError('Map library could not be loaded.')
+                return
+            }
+        } else {
+            setIsLeafletLoaded(true)
+        }
+
+        if (isLeafletLoaded() && mapContainer && !mapInstance) {
+            const p = params()
+            const center = p?.center || [51.505, -0.09] // Default to London
+            const zoom = p?.zoom || 13
+
+            mapInstance = L.map(mapContainer, {
+                zoomControl: p?.zoomControl !== false,
+                scrollWheelZoom: p?.scrollWheelZoom !== false,
+                attributionControl: false
+            }).setView(center, zoom)
+
+            // Add OpenStreetMap tile layer
+            const tileLayerUrl = p?.tileLayer || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+            L.tileLayer(tileLayerUrl, {
+                attribution: p?.attribution || '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(mapInstance)
+
+            if (p?.attribution !== '') {
+                L.control.attribution({ prefix: false }).addTo(mapInstance)
+            }
+
+            // Fix marker icons (Leaflet issue with bundlers)
+            delete (L.Icon.Default.prototype as any)._getIconUrl
+            L.Icon.Default.mergeOptions({
+                iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+                iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+                shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+            })
+        }
+
+        // Update markers and view - Sprint Ultimate U.2: Clustering support
+        if (mapInstance && L) {
+            const p = params()
+
+            // Clear existing layers (markers and cluster groups)
+            mapInstance.eachLayer((layer: any) => {
+                if (layer instanceof L.Marker || layer._group || layer._featureGroup) {
+                    mapInstance.removeLayer(layer)
+                }
+            })
+
+            const markers: any[] = []
+            const shouldCluster = p?.clustering && p?.markers && p.markers.length > 0
+
+            if (shouldCluster) {
+                // Sprint Ultimate U.2: Use marker clustering
+                try {
+                    // Lazy load markercluster plugin
+                    // Import markercluster plugin for side-effects (registers with Leaflet)
+                    await import('leaflet.markercluster')
+
+                    // Load cluster CSS if not already loaded
+                    if (!clusterCssLoaded) {
+                        await import('leaflet.markercluster/dist/MarkerCluster.css')
+                        await import('leaflet.markercluster/dist/MarkerCluster.Default.css')
+                        clusterCssLoaded = true
+                    }
+
+                    // Get cluster options
+                    const clusterOpts: MapClusterOptions = typeof p.clustering === 'object' ? p.clustering : {}
+
+                    // Create cluster group with options
+                    const clusterGroup = (L as any).markerClusterGroup({
+                        maxClusterRadius: clusterOpts.maxClusterRadius ?? 80,
+                        spiderfyOnMaxZoom: clusterOpts.spiderfyOnMaxZoom ?? true,
+                        showCoverageOnHover: clusterOpts.showCoverageOnHover ?? true,
+                        disableClusteringAtZoom: clusterOpts.disableClusteringAtZoom,
+                        animate: clusterOpts.animateAddingMarkers ?? true
+                    })
+
+                    // Add markers to cluster group
+                    p?.markers?.forEach(marker => {
+                        const m = L.marker(marker.position)
+                        if (marker.tooltip) {
+                            m.bindTooltip(marker.tooltip)
+                        }
+                        if (marker.popup) {
+                            m.bindPopup(marker.popup)
+                        }
+                        clusterGroup.addLayer(m)
+                        markers.push(m)
+                    })
+
+                    mapInstance.addLayer(clusterGroup)
+                } catch (e) {
+                    console.warn('Failed to load leaflet.markercluster, falling back to regular markers', e)
+                    // Fallback to regular markers
+                    p?.markers?.forEach(marker => {
+                        const m = L.marker(marker.position).addTo(mapInstance)
+                        if (marker.tooltip) {
+                            m.bindTooltip(marker.tooltip)
+                        }
+                        if (marker.popup) {
+                            m.bindPopup(marker.popup)
+                        }
+                        markers.push(m)
+                    })
+                }
+            } else {
+                // Standard marker rendering (no clustering)
+                p?.markers?.forEach(marker => {
+                    const m = L.marker(marker.position).addTo(mapInstance)
+                    if (marker.tooltip) {
+                        m.bindTooltip(marker.tooltip)
+                    }
+                    if (marker.popup) {
+                        m.bindPopup(marker.popup)
+                    }
+                    markers.push(m)
+                })
+            }
+
+            // Handle fitBounds
+            if (p?.fitBounds && markers.length > 0) {
+                const group = L.featureGroup(markers)
+                mapInstance.fitBounds(group.getBounds().pad(0.1))
+            } else if (p?.center) {
+                mapInstance.setView(p.center, p.zoom || mapInstance.getZoom())
+            }
+        }
+    })
+
+    // Cleanup
+    onCleanup(() => {
+        if (mapInstance) {
+            mapInstance.remove()
+            mapInstance = null
+        }
+    })
+
+    return (
+        <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <Show when={error()}>
+                <div class="p-4 text-red-500 bg-red-50 dark:bg-red-900/20 text-center">
+                    {error()}
+                </div>
+            </Show>
+            <Show when={!error()}>
+                <div
+                    ref={mapContainer}
+                    style={{ height: params()?.height || '400px', width: '100%', "z-index": 0 }}
+                    class="relative z-0"
+                />
+            </Show>
+        </div>
+    )
+}