xertica-ui 1.0.0

package/components/XerticaXLogo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+interface XerticaXLogoProps {
+  className?: string;
+  color?: string;
+  variant?: 'default' | 'white' | 'theme';
+}
+
+export function XerticaXLogo({ 
+  className = "w-auto h-8", 
+  color,
+  variant = 'default'
+}: XerticaXLogoProps) {
+  
+  // Determinar a cor baseada na variante
+  const getColor = () => {
+    if (color) return color;
+    
+    switch (variant) {
+      case 'white':
+        return '#FFFFFF';
+      case 'theme':
+        return 'currentColor';
+      default:
+        return 'var(--primary)';
+    }
+  };
+
+  return (
+    <svg
+      className={className}
+      fill="none"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox="0 0 258 282"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Xertica X">
+        <path 
+          d="M67.2666 0.0361328L89.7793 33.3447L159.63 137.228L84.7471 248.178L61.8115 282H0L97.7109 137.228L5.45508 0.0361328H67.2666Z" 
+          fill={getColor()} 
+        />
+        <path 
+          d="M258 282H196.185L154.114 219.951L185.192 174.123L258 282Z" 
+          fill={getColor()} 
+        />
+        <path 
+          d="M252.696 0.186523L185.042 100.142L154.106 54.0693L190.884 0L252.696 0.186523Z" 
+          fill={getColor()} 
+        />
+      </g>
+    </svg>
+  );
+}

package/components/examples/DrawingMapExample.tsx

@@ -0,0 +1,530 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { Separator } from '../ui/separator';
+import { 
+  MousePointer2, 
+  MapPin, 
+  Circle, 
+  Square, 
+  Hexagon, 
+  Trash2, 
+  Save, 
+  Undo,
+  Check,
+  X
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../ui/dialog';
+import { ScrollArea } from '../ui/scroll-area';
+
+// Tipos para os modos de desenho
+type DrawingMode = 'marker' | 'circle' | 'rectangle' | 'polygon' | null;
+
+// Tipo para objetos desenhados
+type DrawnShape = {
+  type: DrawingMode;
+  overlay: google.maps.marker.AdvancedMarkerElement | google.maps.Circle | google.maps.Rectangle | google.maps.Polygon;
+  data?: any;
+};
+
+export function DrawingMapExample() {
+  const [mapInstance, setMapInstance] = useState<google.maps.Map | null>(null);
+  const [selectedMode, setSelectedMode] = useState<DrawingMode>(null);
+  const [shapes, setShapes] = useState<DrawnShape[]>([]);
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [savedData, setSavedData] = useState('');
+  
+  // Estado para desenho de polígono em andamento
+  const [isDrawingPolygon, setIsDrawingPolygon] = useState(false);
+  const tempPolylineRef = useRef<google.maps.Polyline | null>(null);
+  const polygonPathRef = useRef<google.maps.LatLng[]>([]);
+
+  // Refs para listeners do mapa para limpeza adequada
+  const mapListenersRef = useRef<google.maps.MapsEventListener[]>([]);
+
+  // Cores do Design System (Xertica Primary)
+  const colors = {
+    fill: '#2C275B', // Primary do CSS
+    stroke: '#2C275B', 
+    fillOpacity: 0.2,
+    strokeWeight: 2,
+    editable: true,
+    draggable: true
+  };
+
+  // --- Funções de Desenho (definidas com useCallback para dependências) ---
+
+  const addMarker = useCallback((position: google.maps.LatLng) => {
+    if (!mapInstance) return;
+
+    // Utilizando AdvancedMarkerElement conforme recomendação (Marker depreciado)
+    const marker = new google.maps.marker.AdvancedMarkerElement({
+      position,
+      map: mapInstance,
+      gmpDraggable: true, // Propriedade correta para AdvancedMarkerElement
+      title: "Marcador"
+    });
+
+    marker.addListener('dragend', () => {
+        toast.info('Posição do marcador atualizada');
+    });
+
+    const newShape: DrawnShape = { type: 'marker', overlay: marker };
+    setShapes(prev => [...prev, newShape]);
+    toast.success('Marcador adicionado');
+  }, [mapInstance]);
+
+  const addCircle = useCallback((center: google.maps.LatLng) => {
+    if (!mapInstance) return;
+
+    const circle = new google.maps.Circle({
+      map: mapInstance,
+      center: center,
+      radius: 500,
+      fillColor: colors.fill,
+      fillOpacity: colors.fillOpacity,
+      strokeColor: colors.stroke,
+      strokeWeight: colors.strokeWeight,
+      editable: true,
+      draggable: true,
+    });
+
+    const newShape: DrawnShape = { type: 'circle', overlay: circle };
+    setShapes(prev => [...prev, newShape]);
+    toast.success('Círculo adicionado');
+  }, [mapInstance, colors]);
+
+  const addRectangle = useCallback((center: google.maps.LatLng) => {
+    if (!mapInstance) return;
+
+    const offset = 0.005;
+    const bounds = {
+      north: center.lat() + offset,
+      south: center.lat() - offset,
+      east: center.lng() + offset,
+      west: center.lng() - offset,
+    };
+
+    const rectangle = new google.maps.Rectangle({
+      map: mapInstance,
+      bounds: bounds,
+      fillColor: colors.fill,
+      fillOpacity: colors.fillOpacity,
+      strokeColor: colors.stroke,
+      strokeWeight: colors.strokeWeight,
+      editable: true,
+      draggable: true,
+    });
+
+    const newShape: DrawnShape = { type: 'rectangle', overlay: rectangle };
+    setShapes(prev => [...prev, newShape]);
+    toast.success('Retângulo adicionado');
+  }, [mapInstance, colors]);
+
+  const cancelPolygonDrawing = useCallback(() => {
+    if (tempPolylineRef.current) {
+      tempPolylineRef.current.setMap(null);
+      tempPolylineRef.current = null;
+    }
+    polygonPathRef.current = [];
+    setIsDrawingPolygon(false);
+  }, []);
+
+  const finishPolygon = useCallback(() => {
+    if (!mapInstance || polygonPathRef.current.length < 3) {
+      if (polygonPathRef.current.length < 3 && polygonPathRef.current.length > 0) {
+        toast.error('Polígono precisa de pelo menos 3 pontos.');
+      }
+      return;
+    }
+
+    const polygon = new google.maps.Polygon({
+      map: mapInstance,
+      paths: polygonPathRef.current,
+      fillColor: colors.fill,
+      fillOpacity: colors.fillOpacity,
+      strokeColor: colors.stroke,
+      strokeWeight: colors.strokeWeight,
+      editable: true,
+      draggable: true,
+    });
+
+    const newShape: DrawnShape = { type: 'polygon', overlay: polygon };
+    setShapes(prev => [...prev, newShape]);
+    
+    cancelPolygonDrawing();
+    toast.success('Polígono criado com sucesso!');
+  }, [mapInstance, colors, cancelPolygonDrawing]);
+
+  const addPolygonPoint = useCallback((point: google.maps.LatLng) => {
+    if (!mapInstance) return;
+
+    if (!isDrawingPolygon) {
+      setIsDrawingPolygon(true);
+      polygonPathRef.current = [point];
+      
+      tempPolylineRef.current = new google.maps.Polyline({
+        map: mapInstance,
+        path: polygonPathRef.current,
+        strokeColor: colors.stroke,
+        strokeOpacity: 0.8,
+        strokeWeight: 2,
+        geodesic: true,
+        clickable: false // Importante: não capturar cliques para não atrapalhar o mapa
+      });
+      
+      toast.info('Clique para adicionar pontos. Duplo clique ou botão check para fechar.', { duration: 4000 });
+    } else {
+      polygonPathRef.current.push(point);
+      tempPolylineRef.current?.setPath(polygonPathRef.current);
+    }
+  }, [mapInstance, isDrawingPolygon, colors]);
+
+  // --- Setup dos Listeners ---
+
+  // Limpar listeners antigos
+  const clearListeners = () => {
+    mapListenersRef.current.forEach(listener => google.maps.event.removeListener(listener));
+    mapListenersRef.current = [];
+  };
+
+  useEffect(() => {
+    if (!mapInstance) return;
+
+    clearListeners();
+
+    if (!selectedMode) {
+       mapInstance.setOptions({ draggableCursor: 'grab', clickableIcons: true });
+       return;
+    }
+
+    mapInstance.setOptions({ 
+      draggableCursor: 'crosshair',
+      clickableIcons: false 
+    });
+
+    const clickListener = mapInstance.addListener('click', (e: google.maps.MapMouseEvent) => {
+      if (!e.latLng) return;
+
+      switch (selectedMode) {
+        case 'marker':
+          addMarker(e.latLng);
+          break;
+        case 'circle':
+          addCircle(e.latLng);
+          break;
+        case 'rectangle':
+          addRectangle(e.latLng);
+          break;
+        case 'polygon':
+          addPolygonPoint(e.latLng);
+          break;
+      }
+    });
+
+    mapListenersRef.current.push(clickListener);
+
+    // Listener especial para fechar polígono com duplo clique
+    if (selectedMode === 'polygon') {
+      const dblClickListener = mapInstance.addListener('dblclick', (e: any) => {
+        if (e.domEvent) e.domEvent.stopPropagation();
+        finishPolygon();
+      });
+      mapListenersRef.current.push(dblClickListener);
+    }
+
+    return () => {
+      clearListeners();
+    };
+  }, [mapInstance, selectedMode, addMarker, addCircle, addRectangle, addPolygonPoint, finishPolygon]);
+
+
+  // --- Ações Gerais ---
+
+  const handleModeChange = (mode: DrawingMode) => {
+    if (isDrawingPolygon) {
+        cancelPolygonDrawing();
+    }
+    setSelectedMode(mode);
+  };
+
+  const clearAll = () => {
+    shapes.forEach(shape => shape.overlay.setMap(null));
+    setShapes([]);
+    if (isDrawingPolygon) cancelPolygonDrawing();
+    toast.info('Mapa limpo');
+  };
+
+  const undoLast = () => {
+    if (isDrawingPolygon) {
+      if (polygonPathRef.current.length > 0) {
+        polygonPathRef.current.pop();
+        tempPolylineRef.current?.setPath(polygonPathRef.current);
+        if (polygonPathRef.current.length === 0) {
+           cancelPolygonDrawing();
+        }
+      }
+      return;
+    }
+
+    if (shapes.length === 0) return;
+    
+    const lastShape = shapes[shapes.length - 1];
+    lastShape.overlay.setMap(null);
+    setShapes(prev => prev.slice(0, prev.length - 1));
+  };
+
+  const handleSave = () => {
+    if (shapes.length === 0) {
+      toast.error('Adicione desenhos ao mapa antes de salvar.');
+      return;
+    }
+
+    const exportData = shapes.map(s => {
+      let data: any = {};
+      
+      if (s.type === 'marker') {
+        const marker = s.overlay as google.maps.marker.AdvancedMarkerElement;
+        const pos = marker.position;
+        // Tratamento seguro para lat/lng que pode ser LatLng object ou LatLngLiteral
+        if (pos) {
+          const lat = typeof (pos as any).lat === 'function' ? (pos as any).lat() : (pos as any).lat;
+          const lng = typeof (pos as any).lng === 'function' ? (pos as any).lng() : (pos as any).lng;
+          data = { lat, lng };
+        }
+      } 
+      else if (s.type === 'circle') {
+        const circle = s.overlay as google.maps.Circle;
+        data = {
+          center: { lat: circle.getCenter()?.lat(), lng: circle.getCenter()?.lng() },
+          radius: circle.getRadius()
+        };
+      }
+      else if (s.type === 'rectangle') {
+        const rect = s.overlay as google.maps.Rectangle;
+        const bounds = rect.getBounds();
+        data = {
+          north: bounds?.getNorthEast().lat(),
+          south: bounds?.getSouthWest().lat(),
+          east: bounds?.getNorthEast().lng(),
+          west: bounds?.getSouthWest().lng()
+        };
+      }
+      else if (s.type === 'polygon') {
+        const poly = s.overlay as google.maps.Polygon;
+        const path = poly.getPath();
+        data = path.getArray().map(coord => ({ lat: coord.lat(), lng: coord.lng() }));
+      }
+
+      return { type: s.type, data };
+    });
+
+    setSavedData(JSON.stringify(exportData, null, 2));
+    setShowSaveDialog(true);
+  };
+
+  // Botão auxiliar para renderizar itens da toolbar
+  const ToolButton = ({ 
+    active, 
+    onClick, 
+    icon: Icon, 
+    label 
+  }: { 
+    active?: boolean; 
+    onClick: () => void; 
+    icon: any; 
+    label: string 
+  }) => (
+    <Button
+      variant={active ? "default" : "ghost"}
+      className={`w-full justify-start gap-3 ${active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+      onClick={onClick}
+    >
+      <Icon className="h-4 w-4" />
+      <span className="text-sm font-medium">{label}</span>
+    </Button>
+  );
+
+  return (
+    <Card className="h-full border-0 shadow-none md:border md:shadow-sm">
+      <CardHeader className="border-b bg-muted/20 pb-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Ferramentas de Desenho</CardTitle>
+            <CardDescription className="mt-1">
+              Crie geometrias personalizadas no mapa
+            </CardDescription>
+          </div>
+          <Badge variant="outline" className="h-6">
+            {shapes.length} {shapes.length === 1 ? 'elemento' : 'elementos'}
+          </Badge>
+        </div>
+      </CardHeader>
+      
+      <CardContent className="p-0 flex flex-col md:flex-row h-[600px] bg-background">
+        {/* Sidebar de Ferramentas */}
+        <div className="w-full md:w-64 border-b md:border-b-0 md:border-r bg-muted/10 flex flex-col">
+          <ScrollArea className="flex-1">
+            <div className="p-4 space-y-6">
+              {/* Seção Modos */}
+              <div className="space-y-3">
+                <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">
+                  Ferramentas
+                </h4>
+                <div className="space-y-1">
+                  <ToolButton 
+                    active={selectedMode === null}
+                    onClick={() => handleModeChange(null)}
+                    icon={MousePointer2}
+                    label="Navegar"
+                  />
+                  <ToolButton 
+                    active={selectedMode === 'marker'}
+                    onClick={() => handleModeChange('marker')}
+                    icon={MapPin}
+                    label="Marcador"
+                  />
+                  <ToolButton 
+                    active={selectedMode === 'circle'}
+                    onClick={() => handleModeChange('circle')}
+                    icon={Circle}
+                    label="Círculo"
+                  />
+                  <ToolButton 
+                    active={selectedMode === 'rectangle'}
+                    onClick={() => handleModeChange('rectangle')}
+                    icon={Square}
+                    label="Retângulo"
+                  />
+                  <ToolButton 
+                    active={selectedMode === 'polygon'}
+                    onClick={() => handleModeChange('polygon')}
+                    icon={Hexagon}
+                    label="Polígono"
+                  />
+                </div>
+              </div>
+
+              <Separator />
+
+              {/* Seção Ações */}
+              <div className="space-y-3">
+                <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">
+                  Ações
+                </h4>
+                <div className="grid grid-cols-2 gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={undoLast}
+                    disabled={shapes.length === 0 && !isDrawingPolygon}
+                    className="w-full"
+                    title="Desfazer último"
+                  >
+                    <Undo className="h-4 w-4 mr-2" />
+                    Desfazer
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={clearAll}
+                    disabled={shapes.length === 0 && !isDrawingPolygon}
+                    className="w-full bg-destructive/10 text-destructive hover:bg-destructive hover:text-destructive-foreground border-0 shadow-none"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Limpar
+                  </Button>
+                </div>
+                
+                <Button
+                  variant="default"
+                  onClick={handleSave}
+                  disabled={shapes.length === 0}
+                  className="w-full mt-2"
+                >
+                  <Save className="h-4 w-4 mr-2" />
+                  Salvar GeoJSON
+                </Button>
+              </div>
+            </div>
+          </ScrollArea>
+
+          {/* Status do Polígono (Floating Action na Sidebar em mobile, ou fixo embaixo em desktop) */}
+          {isDrawingPolygon && (
+            <div className="p-4 bg-primary/5 border-t border-primary/10">
+              <div className="flex items-center gap-2 mb-2 text-primary text-xs font-medium">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                </span>
+                Desenhando Polígono...
+              </div>
+              <div className="flex gap-2">
+                <Button 
+                  size="sm" 
+                  className="w-full bg-green-600 hover:bg-green-700 text-white"
+                  onClick={finishPolygon}
+                >
+                  <Check className="h-3 w-3 mr-1" /> Concluir
+                </Button>
+                <Button 
+                  size="sm" 
+                  variant="outline" 
+                  className="w-full"
+                  onClick={cancelPolygonDrawing}
+                >
+                  <X className="h-3 w-3 mr-1" /> Cancelar
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Área do Mapa */}
+        <div className="flex-1 relative bg-muted/5 min-h-[400px]">
+          <Map
+            className="h-full w-full rounded-none md:rounded-br-lg"
+            center={{ lat: -23.5505, lng: -46.6333 }}
+            zoom={13}
+            height="100%"
+            mapContainerClassName="h-full w-full rounded-none md:rounded-br-lg"
+            disableDefaultUI={true}
+            zoomControl={true}
+            onMapLoad={setMapInstance}
+          />
+          
+          {/* Instruções Flutuantes */}
+          {selectedMode && !isDrawingPolygon && (
+            <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-background/90 backdrop-blur border px-4 py-2 rounded-full shadow-sm text-xs font-medium text-muted-foreground pointer-events-none z-10">
+              {selectedMode === 'marker' && 'Clique no mapa para adicionar um marcador'}
+              {selectedMode === 'circle' && 'Clique no mapa para definir o centro do círculo'}
+              {selectedMode === 'rectangle' && 'Clique no mapa para criar um retângulo'}
+              {selectedMode === 'polygon' && 'Clique sequencialmente para desenhar a área'}
+            </div>
+          )}
+        </div>
+
+        {/* Dialog de Salvamento */}
+        <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>Dados Geográficos (GeoJSON)</DialogTitle>
+              <DialogDescription>
+                Copie os dados das formas desenhadas abaixo.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="relative mt-2">
+              <pre className="p-4 rounded-lg bg-muted overflow-auto max-h-[300px] text-xs font-mono" data-custom-scrollbar>
+                {savedData}
+              </pre>
+            </div>
+            <div className="flex justify-end mt-4">
+              <Button onClick={() => setShowSaveDialog(false)}>Fechar</Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}