@djangocfg/ui-tools 2.1.110 → 2.1.112

package/src/tools/Map/components/MapControls.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import {
+  NavigationControl,
+  FullscreenControl,
+  GeolocateControl,
+  ScaleControl,
+} from 'react-map-gl/maplibre'
+
+type ControlPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+
+export interface MapControlsProps {
+  position?: ControlPosition
+  showNavigation?: boolean
+  showFullscreen?: boolean
+  showGeolocate?: boolean
+  showScale?: boolean
+  scaleUnit?: 'imperial' | 'metric' | 'nautical'
+}
+
+export function MapControls({
+  position = 'top-right',
+  showNavigation = true,
+  showFullscreen = false,
+  showGeolocate = false,
+  showScale = false,
+  scaleUnit = 'metric',
+}: MapControlsProps) {
+  return (
+    <>
+      {showNavigation && (
+        <NavigationControl position={position} showCompass showZoom />
+      )}
+      {showFullscreen && <FullscreenControl position={position} />}
+      {showGeolocate && (
+        <GeolocateControl
+          position={position}
+          trackUserLocation
+        />
+      )}
+      {showScale && <ScaleControl unit={scaleUnit} />}
+    </>
+  )
+}

package/src/tools/Map/components/MapLegend.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import { useState, useMemo, memo } from 'react'
+
+import type { MapLegendProps, LegendItem } from '../types'
+
+const positionStyles: Record<string, React.CSSProperties> = {
+  'top-left': { top: 10, left: 10 },
+  'top-right': { top: 10, right: 10 },
+  'bottom-left': { bottom: 10, left: 10 },
+  'bottom-right': { bottom: 10, right: 10 },
+}
+
+function LegendIcon({
+  type,
+  color,
+}: {
+  type: LegendItem['type']
+  color?: string
+}) {
+  const fill = color || '#888'
+
+  switch (type) {
+    case 'circle':
+      return (
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <circle cx="8" cy="8" r="6" fill={fill} />
+        </svg>
+      )
+    case 'line':
+      return (
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <line
+            x1="0"
+            y1="8"
+            x2="16"
+            y2="8"
+            stroke={fill}
+            strokeWidth="3"
+            strokeLinecap="round"
+          />
+        </svg>
+      )
+    case 'fill':
+      return (
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <rect x="1" y="1" width="14" height="14" fill={fill} rx="2" />
+        </svg>
+      )
+    case 'symbol':
+    default:
+      return (
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path
+            d="M8 1l2.5 5 5.5.8-4 3.9.9 5.3L8 13.5l-4.9 2.5.9-5.3-4-3.9 5.5-.8z"
+            fill={fill}
+          />
+        </svg>
+      )
+  }
+}
+
+function MapLegendComponent({
+  items,
+  position = 'bottom-right',
+  title,
+  collapsible = false,
+  defaultCollapsed = false,
+  className = '',
+  style,
+  onItemClick,
+}: MapLegendProps) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed)
+
+  const containerStyle = useMemo<React.CSSProperties>(
+    () => ({
+      position: 'absolute',
+      ...positionStyles[position],
+      backgroundColor: 'white',
+      borderRadius: 8,
+      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+      padding: collapsed ? 8 : 12,
+      minWidth: collapsed ? 'auto' : 120,
+      zIndex: 1,
+      ...style,
+    }),
+    [position, collapsed, style]
+  )
+
+  const headerStyle = useMemo<React.CSSProperties>(
+    () => ({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+      cursor: collapsible ? 'pointer' : 'default',
+      fontWeight: 600,
+      fontSize: 12,
+      color: '#333',
+      marginBottom: collapsed ? 0 : 8,
+    }),
+    [collapsible, collapsed]
+  )
+
+  const itemStyle = useMemo<React.CSSProperties>(
+    () => ({
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      padding: '4px 0',
+      fontSize: 12,
+      color: '#666',
+      cursor: onItemClick ? 'pointer' : 'default',
+    }),
+    [onItemClick]
+  )
+
+  const handleHeaderClick = collapsible ? () => setCollapsed(!collapsed) : undefined
+
+  return (
+    <div className={className} style={containerStyle}>
+      {(title || collapsible) && (
+        <div style={headerStyle} onClick={handleHeaderClick}>
+          {title && <span>{title}</span>}
+          {collapsible && (
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              style={{
+                transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+                transition: 'transform 0.2s',
+              }}
+            >
+              <path d="M3 4.5L6 7.5L9 4.5" stroke="#666" fill="none" />
+            </svg>
+          )}
+        </div>
+      )}
+      {!collapsed && (
+        <div>
+          {items.map((item) => (
+            <div
+              key={item.id}
+              style={{
+                ...itemStyle,
+                opacity: item.visible === false ? 0.5 : 1,
+              }}
+              onClick={onItemClick ? () => onItemClick(item) : undefined}
+            >
+              {item.icon || <LegendIcon type={item.type} color={item.color} />}
+              <span>{item.label}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const MapLegend = memo(MapLegendComponent)

package/src/tools/Map/components/MapMarker.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { useCallback, memo, type ReactNode } from 'react'
+import { Marker, type MarkerEvent, type MarkerDragEvent } from 'react-map-gl/maplibre'
+import type { LngLat } from 'maplibre-gl'
+import type { MarkerData } from '../types'
+
+export interface MapMarkerProps {
+  marker: MarkerData
+  onClick?: (marker: MarkerData) => void
+  children?: ReactNode
+  anchor?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  draggable?: boolean
+  onDragStart?: (marker: MarkerData) => void
+  onDrag?: (marker: MarkerData, lngLat: LngLat) => void
+  onDragEnd?: (marker: MarkerData, lngLat: LngLat) => void
+  color?: string
+  size?: number
+}
+
+const DefaultPin = memo(function DefaultPin({
+  size = 24,
+  color = '#ef4444'
+}: {
+  size?: number
+  color?: string
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      style={{ cursor: 'pointer' }}
+    >
+      <path
+        d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"
+        fill={color}
+        stroke="#fff"
+        strokeWidth="1.5"
+      />
+      <circle cx="12" cy="9" r="2.5" fill="#fff" />
+    </svg>
+  )
+})
+
+export const MapMarker = memo(function MapMarker({
+  marker,
+  onClick,
+  children,
+  anchor = 'bottom',
+  draggable = false,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  color,
+  size,
+}: MapMarkerProps) {
+  const handleClick = useCallback(
+    (e: MarkerEvent<MouseEvent>) => {
+      e.originalEvent.stopPropagation()
+      onClick?.(marker)
+    },
+    [onClick, marker]
+  )
+
+  const handleDragStart = useCallback(
+    (e: MarkerDragEvent) => {
+      onDragStart?.(marker)
+    },
+    [onDragStart, marker]
+  )
+
+  const handleDrag = useCallback(
+    (e: MarkerDragEvent) => {
+      onDrag?.(marker, e.lngLat)
+    },
+    [onDrag, marker]
+  )
+
+  const handleDragEnd = useCallback(
+    (e: MarkerDragEvent) => {
+      onDragEnd?.(marker, e.lngLat)
+    },
+    [onDragEnd, marker]
+  )
+
+  return (
+    <Marker
+      longitude={marker.longitude}
+      latitude={marker.latitude}
+      anchor={anchor}
+      draggable={draggable}
+      onClick={handleClick}
+      onDragStart={handleDragStart}
+      onDrag={handleDrag}
+      onDragEnd={handleDragEnd}
+    >
+      {children ?? <DefaultPin color={color} size={size} />}
+    </Marker>
+  )
+})

package/src/tools/Map/components/MapPopup.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { memo, type ReactNode } from 'react'
+import { Popup } from 'react-map-gl/maplibre'
+
+export interface MapPopupProps {
+  longitude: number
+  latitude: number
+  onClose: () => void
+  children: ReactNode
+  anchor?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  closeOnClick?: boolean
+  closeButton?: boolean
+  className?: string
+  maxWidth?: string
+  offset?: number | [number, number]
+}
+
+export const MapPopup = memo(function MapPopup({
+  longitude,
+  latitude,
+  onClose,
+  children,
+  anchor = 'bottom',
+  closeOnClick = true,
+  closeButton = true,
+  className,
+  maxWidth = '300px',
+  offset = 15,
+}: MapPopupProps) {
+  return (
+    <Popup
+      longitude={longitude}
+      latitude={latitude}
+      anchor={anchor}
+      onClose={onClose}
+      closeOnClick={closeOnClick}
+      closeButton={closeButton}
+      className={className}
+      maxWidth={maxWidth}
+      offset={offset}
+    >
+      {children}
+    </Popup>
+  )
+})

package/src/tools/Map/components/MapSource.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { memo, type ReactNode } from 'react'
+import { Source, Layer, type LayerProps } from 'react-map-gl/maplibre'
+
+export interface MapSourceProps {
+  id: string
+  data: GeoJSON.GeoJSON | string
+  type?: 'geojson'
+  children?: ReactNode
+}
+
+export const MapSource = memo(function MapSource({
+  id,
+  data,
+  type = 'geojson',
+  children,
+}: MapSourceProps) {
+  return (
+    <Source id={id} type={type} data={data}>
+      {children}
+    </Source>
+  )
+})
+
+export type MapLayerProps = LayerProps
+
+export const MapLayer = memo(function MapLayer(props: MapLayerProps) {
+  return <Layer {...props} />
+})

package/src/tools/Map/components/index.ts

@@ -0,0 +1,20 @@
+export { MapContainer, MapView } from './MapContainer'
+export { MapControls } from './MapControls'
+export { MapMarker } from './MapMarker'
+export { MapPopup } from './MapPopup'
+export { MapCluster } from './MapCluster'
+export { MapSource, MapLayer } from './MapSource'
+export { CustomOverlay } from './CustomOverlay'
+export { MapLegend } from './MapLegend'
+export { LayerSwitcher } from './LayerSwitcher'
+
+// DrawControl and GeocoderControl require optional dependencies
+// See DrawControl.tsx and GeocoderControl.tsx for implementation examples
+
+// Types are exported from ../types.ts
+export type { MapContainerProps } from './MapContainer'
+export type { MapControlsProps } from './MapControls'
+export type { MapMarkerProps } from './MapMarker'
+export type { MapPopupProps } from './MapPopup'
+export type { MapClusterProps } from './MapCluster'
+export type { MapSourceProps, MapLayerProps } from './MapSource'

package/src/tools/Map/context/MapContext.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useMemo,
+  useCallback,
+  type ReactNode,
+} from 'react'
+import type { MapRef } from 'react-map-gl/maplibre'
+import type { MapContextValue, MapViewport, MarkerData } from '../types'
+
+const MapContext = createContext<MapContextValue | null>(null)
+
+export interface MapProviderProps {
+  children: ReactNode
+  initialViewport?: Partial<MapViewport>
+}
+
+const DEFAULT_VIEWPORT: MapViewport = {
+  longitude: 115.1889,
+  latitude: -8.4095,
+  zoom: 10,
+  bearing: 0,
+  pitch: 0,
+}
+
+export function MapProvider({ children, initialViewport }: MapProviderProps) {
+  const mapRef = useRef<MapRef | null>(null)
+  const initialViewportRef = useRef<MapViewport>({
+    ...DEFAULT_VIEWPORT,
+    ...initialViewport,
+  })
+  const [viewport, setViewportState] = useState<MapViewport>(initialViewportRef.current)
+  const [markers, setMarkers] = useState<MarkerData[]>([])
+  const [selectedMarker, setSelectedMarker] = useState<MarkerData | null>(null)
+  const [hoveredFeature, setHoveredFeature] = useState<GeoJSON.Feature | null>(null)
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  const setViewport = useCallback((newViewport: Partial<MapViewport>) => {
+    setViewportState((prev) => ({ ...prev, ...newViewport }))
+  }, [])
+
+  const resetToInitial = useCallback(() => {
+    const map = mapRef.current
+    if (map) {
+      map.flyTo({
+        center: [initialViewportRef.current.longitude, initialViewportRef.current.latitude],
+        zoom: initialViewportRef.current.zoom,
+        bearing: initialViewportRef.current.bearing ?? 0,
+        pitch: initialViewportRef.current.pitch ?? 0,
+        duration: 1000,
+      })
+    }
+  }, [])
+
+  const value = useMemo<MapContextValue>(
+    () => ({
+      mapRef,
+      viewport,
+      setViewport,
+      initialViewport: initialViewportRef.current,
+      resetToInitial,
+      markers,
+      setMarkers,
+      selectedMarker,
+      setSelectedMarker,
+      hoveredFeature,
+      setHoveredFeature,
+      isLoaded,
+      setIsLoaded,
+    }),
+    [viewport, setViewport, resetToInitial, markers, selectedMarker, hoveredFeature, isLoaded]
+  )
+
+  return <MapContext.Provider value={value}>{children}</MapContext.Provider>
+}
+
+export function useMapContext(): MapContextValue {
+  const context = useContext(MapContext)
+  if (!context) {
+    throw new Error('useMapContext must be used within a MapProvider')
+  }
+  return context
+}
+
+export { MapContext }

package/src/tools/Map/context/index.ts

@@ -0,0 +1,2 @@
+export { MapProvider, useMapContext, MapContext } from './MapContext'
+export type { MapProviderProps } from './MapContext'

package/src/tools/Map/hooks/index.ts

@@ -0,0 +1,9 @@
+export { useMap } from './useMap'
+export { useMapControl } from './useMapControl'
+export { useMarkers } from './useMarkers'
+export { useMapEvents } from './useMapEvents'
+export { useMapViewport } from './useMapViewport'
+export { useMapLayers } from './useMapLayers'
+
+// Re-export useControl from react-map-gl for custom control creation
+export { useControl } from 'react-map-gl/maplibre'

package/src/tools/Map/hooks/useMap.ts

@@ -0,0 +1,11 @@
+'use client'
+
+import { useMapContext } from '../context'
+
+/**
+ * Hook to access the map context
+ * Must be used within a MapProvider
+ */
+export function useMap() {
+  return useMapContext()
+}

package/src/tools/Map/hooks/useMapControl.ts

@@ -0,0 +1,99 @@
+'use client'
+
+import { useCallback } from 'react'
+import type { LngLatBoundsLike } from 'maplibre-gl'
+import { useMapContext } from '../context'
+import type { MapControlActions, MapViewport } from '../types'
+
+/**
+ * Hook for imperative map control
+ * Provides methods for programmatic map navigation
+ */
+export function useMapControl(): MapControlActions {
+  const { mapRef } = useMapContext()
+
+  const flyTo = useCallback(
+    (center: [number, number], zoom?: number, options?: { duration?: number }) => {
+      mapRef.current?.flyTo({
+        center,
+        zoom,
+        duration: options?.duration ?? 2000,
+      })
+    },
+    [mapRef]
+  )
+
+  const easeTo = useCallback(
+    (center: [number, number], zoom?: number, options?: { duration?: number }) => {
+      mapRef.current?.easeTo({
+        center,
+        zoom,
+        duration: options?.duration ?? 500,
+      })
+    },
+    [mapRef]
+  )
+
+  const fitBounds = useCallback(
+    (bounds: LngLatBoundsLike, options?: { padding?: number; duration?: number }) => {
+      mapRef.current?.fitBounds(bounds, {
+        padding: options?.padding ?? 50,
+        duration: options?.duration ?? 1000,
+      })
+    },
+    [mapRef]
+  )
+
+  const zoomIn = useCallback(() => {
+    const currentZoom = mapRef.current?.getZoom() ?? 10
+    mapRef.current?.easeTo({ zoom: currentZoom + 1, duration: 300 })
+  }, [mapRef])
+
+  const zoomOut = useCallback(() => {
+    const currentZoom = mapRef.current?.getZoom() ?? 10
+    mapRef.current?.easeTo({ zoom: Math.max(0, currentZoom - 1), duration: 300 })
+  }, [mapRef])
+
+  const resetView = useCallback(
+    (initialViewport: MapViewport) => {
+      mapRef.current?.flyTo({
+        center: [initialViewport.longitude, initialViewport.latitude],
+        zoom: initialViewport.zoom,
+        bearing: initialViewport.bearing ?? 0,
+        pitch: initialViewport.pitch ?? 0,
+        duration: 1000,
+      })
+    },
+    [mapRef]
+  )
+
+  const getCenter = useCallback((): [number, number] | null => {
+    const center = mapRef.current?.getCenter()
+    return center ? [center.lng, center.lat] : null
+  }, [mapRef])
+
+  const getZoom = useCallback((): number | null => {
+    return mapRef.current?.getZoom() ?? null
+  }, [mapRef])
+
+  const getBounds = useCallback((): LngLatBoundsLike | null => {
+    const bounds = mapRef.current?.getBounds()
+    if (!bounds) return null
+    return [
+      [bounds.getWest(), bounds.getSouth()],
+      [bounds.getEast(), bounds.getNorth()],
+    ]
+  }, [mapRef])
+
+  return {
+    flyTo,
+    easeTo,
+    fitBounds,
+    zoomIn,
+    zoomOut,
+    resetView,
+    getCenter,
+    getZoom,
+    getBounds,
+  }
+}