xertica-ui 1.0.0

package/components/ui/map.tsx

@@ -0,0 +1,412 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { cn } from './utils';
+import { useGoogleMapsLoader } from './google-maps-loader';
+import { useMapLayers, MapLayersConfig } from './map-layers';
+
+export interface MapProps extends React.HTMLAttributes<HTMLDivElement> {
+  center?: { lat: number; lng: number };
+  zoom?: number;
+  markers?: Array<{
+    position: { lat: number; lng: number };
+    label?: string;
+    title?: string;
+    info?: string;
+    customColor?: string;
+    icon?: string;
+    iconSvg?: string;
+    iconColor?: string;
+    infoWindowContent?: string; // Custom HTML content for InfoWindow
+    richContent?: React.ReactNode; // Custom React component for InfoWindow
+  }>[];
+  circle?: {
+    center: { lat: number; lng: number };
+    radius: number;
+    fillColor?: string;
+    strokeColor?: string;
+  };
+  polygon?: {
+    paths: Array<{ lat: number; lng: number }>[];
+    fillColor?: string;
+    strokeColor?: string;
+  };
+  layers?: MapLayersConfig;
+  height?: string;
+  apiKey?: string;
+  mapContainerClassName?: string;
+  disableDefaultUI?: boolean;
+  zoomControl?: boolean;
+  streetViewControl?: boolean;
+  mapTypeControl?: boolean;
+  fullscreenControl?: boolean;
+  gestureHandling?: 'cooperative' | 'greedy' | 'none' | 'auto';
+  onMapLoad?: (map: google.maps.Map) => void;
+}
+
+const DEFAULT_CENTER = { lat: -23.5505, lng: -46.6333 };
+const DEFAULT_ZOOM = 12;
+
+const MapContent = React.forwardRef<HTMLDivElement, MapProps & { apiKey: string }>(
+  ({ apiKey, ...props }, ref) => {
+    const { isLoaded, loadError } = useGoogleMapsLoader();
+    const {
+      center = DEFAULT_CENTER,
+      zoom = DEFAULT_ZOOM,
+      markers = [],
+      circle,
+      polygon,
+      layers,
+      height = "400px",
+      mapContainerClassName,
+      disableDefaultUI = false,
+      zoomControl = true,
+      streetViewControl = false,
+      mapTypeControl = false,
+      fullscreenControl = true,
+      gestureHandling = 'cooperative',
+      onMapLoad,
+      className,
+      ...divProps
+    } = props;
+
+    const [selectedMarker, setSelectedMarker] = useState<number | null>(null);
+    const mapRef = useRef<google.maps.Map | null>(null);
+    const mapContainerRef = useRef<HTMLDivElement>(null);
+    const markersRef = useRef<google.maps.marker.AdvancedMarkerElement[]>([]);
+    const infoWindowRef = useRef<google.maps.InfoWindow | null>(null);
+    const circleRef = useRef<google.maps.Circle | null>(null);
+    const polygonRef = useRef<google.maps.Polygon | null>(null);
+    const isInitializedRef = useRef(false);
+
+    // Resolve theme colors for Map shapes (Circle, Polygon)
+    const [themeColors, setThemeColors] = useState({
+      primary: '#4F46E5',
+      chart2: '#10B981'
+    });
+
+    useEffect(() => {
+      if (typeof window !== 'undefined') {
+        const styles = getComputedStyle(document.documentElement);
+        setThemeColors({
+          primary: styles.getPropertyValue('--primary').trim() || '#4F46E5',
+          chart2: styles.getPropertyValue('--chart-2').trim() || '#10B981'
+        });
+      }
+    }, []);
+
+    // Initialize map once
+    useEffect(() => {
+      if (!isLoaded || !mapContainerRef.current || isInitializedRef.current) return;
+
+      isInitializedRef.current = true;
+      const map = new google.maps.Map(mapContainerRef.current, {
+        center,
+        zoom,
+        mapId: 'xertica-map',
+        disableDefaultUI,
+        zoomControl,
+        streetViewControl,
+        mapTypeControl,
+        fullscreenControl,
+        gestureHandling,
+      });
+
+      mapRef.current = map;
+      
+      if (onMapLoad) {
+        onMapLoad(map);
+      }
+
+      return () => {
+        isInitializedRef.current = false;
+        mapRef.current = null;
+      };
+    }, [isLoaded]);
+
+    // Update markers
+    useEffect(() => {
+      const map = mapRef.current;
+      if (!map || !isLoaded || !window.google?.maps?.marker) return;
+
+      // Clear old markers
+      markersRef.current.forEach(m => { m.map = null; });
+      markersRef.current = [];
+
+      // Create new markers
+      markers.forEach((markerData, idx) => {
+        const markerColor = markerData.customColor || 'var(--primary)';
+        const iconColor = markerData.iconColor || 'white';
+
+        const markerContent = document.createElement('div');
+        markerContent.className = 'flex items-center justify-center w-8 h-8 border-[3px] border-background shadow-lg cursor-pointer origin-center transition-transform duration-200';
+        // Custom shape using standard border-radius classes if possible, or style for specific shape
+        markerContent.style.borderRadius = '50% 50% 50% 0';
+        markerContent.style.transform = 'rotate(-45deg)';
+        markerContent.style.backgroundColor = markerColor;
+        // box-shadow is handled by shadow-lg, border by border-background
+
+        const iconContainer = document.createElement('div');
+        iconContainer.className = 'flex items-center justify-center rotate-45';
+        
+        if (markerData.iconSvg) {
+          const div = document.createElement('div');
+          div.innerHTML = markerData.iconSvg;
+          const svg = div.querySelector('svg');
+          if (svg) {
+            svg.setAttribute('width', '16');
+            svg.setAttribute('height', '16');
+            svg.style.color = iconColor;
+            svg.style.fill = 'currentColor';
+            iconContainer.appendChild(svg);
+          }
+        } else if (markerData.icon || markerData.label) {
+          const span = document.createElement('span');
+          span.textContent = markerData.icon || markerData.label || '';
+          span.style.color = iconColor;
+          span.className = 'font-semibold text-sm';
+          iconContainer.appendChild(span);
+        }
+
+        markerContent.appendChild(iconContainer);
+
+        markerContent.addEventListener('mouseenter', () => {
+          markerContent.style.transform = 'rotate(-45deg) scale(1.15)';
+        });
+        markerContent.addEventListener('mouseleave', () => {
+          markerContent.style.transform = 'rotate(-45deg) scale(1)';
+        });
+
+        const marker = new google.maps.marker.AdvancedMarkerElement({
+          map,
+          position: markerData.position,
+          content: markerContent,
+          title: markerData.title,
+        });
+
+        marker.addListener('click', () => {
+          setSelectedMarker(idx);
+          map.panTo(markerData.position);
+        });
+
+        markersRef.current.push(marker);
+      });
+
+      return () => {
+        markersRef.current.forEach(m => { m.map = null; });
+        markersRef.current = [];
+      };
+    }, [isLoaded, markers]);
+
+    // Update InfoWindow
+    useEffect(() => {
+      const map = mapRef.current;
+      if (!map || selectedMarker === null) {
+        infoWindowRef.current?.close();
+        return;
+      }
+
+      const markerData = markers[selectedMarker];
+      if (!markerData) return;
+
+      // Determine content to render
+      let contentToRender = markerData.richContent;
+
+      // If no richContent but title/info exists, create default standard content
+      if (!contentToRender && (markerData.title || markerData.info)) {
+        contentToRender = (
+          <div className="p-4 pr-8 min-w-[200px] max-w-[300px]">
+            {markerData.title && <h4 className="font-semibold text-base mb-1">{markerData.title}</h4>}
+            {markerData.info && <p className="text-sm text-muted-foreground">{markerData.info}</p>}
+          </div>
+        );
+      }
+
+      // Render content using React Root if we have something to render
+      if (contentToRender) {
+        if (!infoWindowRef.current) {
+          infoWindowRef.current = new google.maps.InfoWindow();
+        }
+
+        const container = document.createElement('div');
+        const root = createRoot(container);
+        root.render(contentToRender);
+
+        infoWindowRef.current.setContent(container);
+        infoWindowRef.current.open({
+          map,
+          anchor: markersRef.current[selectedMarker],
+        });
+
+        const listener = infoWindowRef.current.addListener('closeclick', () => {
+          setSelectedMarker(null);
+          // Small delay to ensure close animation finishes
+          setTimeout(() => root.unmount(), 0);
+        });
+
+        return () => {
+          google.maps.event.removeListener(listener);
+          // Safe unmount
+          setTimeout(() => root.unmount(), 0);
+        };
+      }
+    }, [selectedMarker, markers]);
+
+    // Update circle
+    useEffect(() => {
+      const map = mapRef.current;
+      if (!map || !isLoaded) return;
+
+      circleRef.current?.setMap(null);
+      circleRef.current = null;
+
+      if (circle && circle.center && circle.radius) {
+        circleRef.current = new google.maps.Circle({
+          map,
+          center: circle.center,
+          radius: circle.radius,
+          fillColor: circle.fillColor || themeColors.primary,
+          fillOpacity: 0.2,
+          strokeColor: circle.strokeColor || themeColors.primary,
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+        });
+      }
+
+      return () => {
+        circleRef.current?.setMap(null);
+      };
+    }, [circle, isLoaded]);
+
+    // Update polygon
+    useEffect(() => {
+      const map = mapRef.current;
+      if (!map || !isLoaded) return;
+
+      polygonRef.current?.setMap(null);
+      polygonRef.current = null;
+
+      if (polygon && polygon.paths) {
+        polygonRef.current = new google.maps.Polygon({
+          map,
+          paths: polygon.paths,
+          fillColor: polygon.fillColor || themeColors.chart2,
+          fillOpacity: 0.2,
+          strokeColor: polygon.strokeColor || themeColors.chart2,
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+        });
+      }
+
+      return () => {
+        polygonRef.current?.setMap(null);
+      };
+    }, [polygon, isLoaded]);
+
+    // Layers
+    useMapLayers(mapRef.current, layers || {});
+
+    if (loadError) {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "relative rounded-[var(--radius-card)] border border-destructive/50 overflow-hidden bg-destructive/5",
+            className
+          )}
+          style={{ height }}
+          {...divProps}
+        >
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center space-y-2 p-6">
+              <div className="text-destructive">
+                <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <p className="text-sm text-destructive">Failed to load Google Maps</p>
+              <p className="text-xs text-muted-foreground">Check API key in Settings</p>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    if (!isLoaded) {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted animate-pulse",
+            className
+          )}
+          style={{ height }}
+          {...divProps}
+        />
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative rounded-[var(--radius-card)] border border-border overflow-hidden",
+          className
+        )}
+        {...divProps}
+      >
+        <div
+          ref={mapContainerRef}
+          style={{ height }}
+          className={cn("rounded-[var(--radius-card)] w-full", mapContainerClassName)}
+        />
+      </div>
+    );
+  }
+);
+MapContent.displayName = "MapContent";
+
+export const Map = React.forwardRef<HTMLDivElement, MapProps>(
+  (props, ref) => {
+    const effectiveApiKey = props.apiKey || "";
+
+    const isValidKey = effectiveApiKey && 
+                       effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && 
+                       effectiveApiKey.startsWith("AIza");
+
+    if (!isValidKey) {
+      const { 
+        center, zoom, markers, circle, polygon, height, apiKey, 
+        mapContainerClassName, disableDefaultUI, zoomControl, 
+        streetViewControl, mapTypeControl, fullscreenControl, 
+        gestureHandling, layers, ...divProps 
+      } = props;
+
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+            props.className
+          )}
+          style={{ height: props.height || "400px" }}
+          {...divProps}
+        >
+          <div className="absolute inset-0 flex items-center justify-center bg-muted">
+            <div className="text-center space-y-3 p-6">
+              <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              </div>
+              <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+  }
+);
+Map.displayName = "Map";

package/components/ui/menubar.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  );
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  );
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  );
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  );
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  );
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+};