xertica-ui 1.3.8 → 1.4.0

package/components/TemplateContent.tsx

@@ -20,6 +20,7 @@ import { toast } from 'sonner';
 import { ScrollArea } from './ui/scroll-area';
 import { ThemeToggle } from './ThemeToggle';
 import { LanguageSelector } from './LanguageSelector';
+import { MapShowcase } from './examples/MapShowcase';
 
 import { useLayout } from '../contexts/LayoutContext';
 
@@ -597,6 +598,12 @@ export function TemplateContent({ }: TemplateContentProps) {
                   </CardContent>
                 </Card>
               </section>
+              {/* Maps */}
+              <section>
+                <MapShowcase />
+              </section>
+
+              <Separator className="my-8" />
 
               {/* Footer Note */}
               <Card className="mt-8">

package/components/examples/DrawingMapExample.tsx

@@ -4,14 +4,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui
 import { Button } from '../ui/button';
 import { Badge } from '../ui/badge';
 import { Separator } from '../ui/separator';
-import { 
-  MousePointer2, 
-  MapPin, 
-  Circle, 
-  Square, 
-  Hexagon, 
-  Trash2, 
-  Save, 
+import {
+  MousePointer2,
+  MapPin,
+  Circle,
+  Square,
+  Hexagon,
+  Trash2,
+  Save,
   Undo,
   Check,
   X
@@ -30,13 +30,17 @@ type DrawnShape = {
   data?: any;
 };
 
-export function DrawingMapExample() {
+export interface DrawingMapExampleProps {
+  apiKey?: string;
+}
+
+export function DrawingMapExample({ apiKey }: DrawingMapExampleProps) {
   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);
@@ -48,7 +52,7 @@ export function DrawingMapExample() {
   // Cores do Design System (Xertica Primary)
   const colors = {
     fill: '#2C275B', // Primary do CSS
-    stroke: '#2C275B', 
+    stroke: '#2C275B',
     fillOpacity: 0.2,
     strokeWeight: 2,
     editable: true,
@@ -69,7 +73,7 @@ export function DrawingMapExample() {
     });
 
     marker.addListener('dragend', () => {
-        toast.info('Posição do marcador atualizada');
+      toast.info('Posição do marcador atualizada');
     });
 
     const newShape: DrawnShape = { type: 'marker', overlay: marker };
@@ -154,7 +158,7 @@ export function DrawingMapExample() {
 
     const newShape: DrawnShape = { type: 'polygon', overlay: polygon };
     setShapes(prev => [...prev, newShape]);
-    
+
     cancelPolygonDrawing();
     toast.success('Polígono criado com sucesso!');
   }, [mapInstance, colors, cancelPolygonDrawing]);
@@ -165,7 +169,7 @@ export function DrawingMapExample() {
     if (!isDrawingPolygon) {
       setIsDrawingPolygon(true);
       polygonPathRef.current = [point];
-      
+
       tempPolylineRef.current = new google.maps.Polyline({
         map: mapInstance,
         path: polygonPathRef.current,
@@ -175,7 +179,7 @@ export function DrawingMapExample() {
         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);
@@ -197,13 +201,13 @@ export function DrawingMapExample() {
     clearListeners();
 
     if (!selectedMode) {
-       mapInstance.setOptions({ draggableCursor: 'grab', clickableIcons: true });
-       return;
+      mapInstance.setOptions({ draggableCursor: 'grab', clickableIcons: true });
+      return;
     }
 
-    mapInstance.setOptions({ 
+    mapInstance.setOptions({
       draggableCursor: 'crosshair',
-      clickableIcons: false 
+      clickableIcons: false
     });
 
     const clickListener = mapInstance.addListener('click', (e: google.maps.MapMouseEvent) => {
@@ -246,13 +250,16 @@ export function DrawingMapExample() {
 
   const handleModeChange = (mode: DrawingMode) => {
     if (isDrawingPolygon) {
-        cancelPolygonDrawing();
+      cancelPolygonDrawing();
     }
     setSelectedMode(mode);
   };
 
   const clearAll = () => {
-    shapes.forEach(shape => shape.overlay.setMap(null));
+    shapes.forEach(shape => {
+      if ('setMap' in shape.overlay) (shape.overlay as any).setMap(null);
+      else (shape.overlay as any).map = null;
+    });
     setShapes([]);
     if (isDrawingPolygon) cancelPolygonDrawing();
     toast.info('Mapa limpo');
@@ -264,16 +271,17 @@ export function DrawingMapExample() {
         polygonPathRef.current.pop();
         tempPolylineRef.current?.setPath(polygonPathRef.current);
         if (polygonPathRef.current.length === 0) {
-           cancelPolygonDrawing();
+          cancelPolygonDrawing();
         }
       }
       return;
     }
 
     if (shapes.length === 0) return;
-    
+
     const lastShape = shapes[shapes.length - 1];
-    lastShape.overlay.setMap(null);
+    if ('setMap' in lastShape.overlay) (lastShape.overlay as any).setMap(null);
+    else (lastShape.overlay as any).map = null;
     setShapes(prev => prev.slice(0, prev.length - 1));
   };
 
@@ -285,7 +293,7 @@ export function DrawingMapExample() {
 
     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;
@@ -295,7 +303,7 @@ export function DrawingMapExample() {
           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 = {
@@ -327,16 +335,16 @@ export function DrawingMapExample() {
   };
 
   // Botão auxiliar para renderizar itens da toolbar
-  const ToolButton = ({ 
-    active, 
-    onClick, 
-    icon: Icon, 
-    label 
-  }: { 
-    active?: boolean; 
-    onClick: () => void; 
-    icon: any; 
-    label: string 
+  const ToolButton = ({
+    active,
+    onClick,
+    icon: Icon,
+    label
+  }: {
+    active?: boolean;
+    onClick: () => void;
+    icon: any;
+    label: string
   }) => (
     <Button
       variant={active ? "default" : "ghost"}
@@ -363,7 +371,7 @@ export function DrawingMapExample() {
           </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">
@@ -375,31 +383,31 @@ export function DrawingMapExample() {
                   Ferramentas
                 </h4>
                 <div className="space-y-1">
-                  <ToolButton 
+                  <ToolButton
                     active={selectedMode === null}
                     onClick={() => handleModeChange(null)}
                     icon={MousePointer2}
                     label="Navegar"
                   />
-                  <ToolButton 
+                  <ToolButton
                     active={selectedMode === 'marker'}
                     onClick={() => handleModeChange('marker')}
                     icon={MapPin}
                     label="Marcador"
                   />
-                  <ToolButton 
+                  <ToolButton
                     active={selectedMode === 'circle'}
                     onClick={() => handleModeChange('circle')}
                     icon={Circle}
                     label="Círculo"
                   />
-                  <ToolButton 
+                  <ToolButton
                     active={selectedMode === 'rectangle'}
                     onClick={() => handleModeChange('rectangle')}
                     icon={Square}
                     label="Retângulo"
                   />
-                  <ToolButton 
+                  <ToolButton
                     active={selectedMode === 'polygon'}
                     onClick={() => handleModeChange('polygon')}
                     icon={Hexagon}
@@ -436,7 +444,7 @@ export function DrawingMapExample() {
                     Limpar
                   </Button>
                 </div>
-                
+
                 <Button
                   variant="default"
                   onClick={handleSave}
@@ -461,16 +469,16 @@ export function DrawingMapExample() {
                 Desenhando Polígono...
               </div>
               <div className="flex gap-2">
-                <Button 
-                  size="sm" 
+                <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" 
+                <Button
+                  size="sm"
+                  variant="outline"
                   className="w-full"
                   onClick={cancelPolygonDrawing}
                 >
@@ -492,8 +500,9 @@ export function DrawingMapExample() {
             disableDefaultUI={true}
             zoomControl={true}
             onMapLoad={setMapInstance}
+            apiKey={apiKey}
           />
-          
+
           {/* 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">

package/components/examples/FilterableMapExample.tsx

@@ -24,7 +24,7 @@ function createLucideIconSvg(iconName: string): string {
     shopping: '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path><path d="M3 6h18"></path><path d="M16 10a4 4 0 0 1-8 0"></path>',
     coffee: '<path d="M17 8h1a4 4 0 1 1 0 8h-1"></path><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"></path><line x1="6" x2="6" y1="2" y2="4"></line><line x1="10" x2="10" y1="2" y2="4"></line><line x1="14" x2="14" y1="2" y2="4"></line>',
   };
-  
+
   const path = iconPaths[iconName] || '';
   return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
 }
@@ -167,7 +167,11 @@ const sampleLocations = [
  * Permite filtrar marcadores por categorias com interface integrada no mapa
  * COMPACTO: Usa checkboxes para economia de espaço
  */
-export function FilterableMapExample() {
+export interface FilterableMapExampleProps {
+  apiKey?: string;
+}
+
+export function FilterableMapExample({ apiKey }: FilterableMapExampleProps) {
   const [activeFilters, setActiveFilters] = useState<Set<MarkerGroupId>>(
     new Set(Object.keys(markerGroups) as MarkerGroupId[])
   );
@@ -224,7 +228,7 @@ export function FilterableMapExample() {
           {filteredLocations.length} de {sampleLocations.length} locais
         </Badge>
       </div>
-      
+
       <p className="text-muted-foreground">
         Use os filtros compactos no canto superior esquerdo do mapa para visualizar marcadores por categoria
       </p>
@@ -238,6 +242,7 @@ export function FilterableMapExample() {
           height="500px"
           zoomControl={true}
           fullscreenControl={true}
+          apiKey={apiKey}
         />
         {/* Painel de Filtros COMPACTO Integrado no Mapa */}
         <div
@@ -246,7 +251,7 @@ export function FilterableMapExample() {
             showFilters ? "translate-x-0" : "-translate-x-full"
           )}
         >
-          <div 
+          <div
             className="p-2.5 rounded-lg shadow-[var(--shadow-elevation-sm)] bg-card border border-border max-w-[220px]"
           >
             <div className="flex items-center justify-between mb-2 gap-2">
@@ -295,12 +300,12 @@ export function FilterableMapExample() {
                       checked={isActive}
                       onCheckedChange={() => toggleFilter(groupId)}
                     />
-                    <Label 
-                      htmlFor={`filter-${id}`} 
+                    <Label
+                      htmlFor={`filter-${id}`}
                       className="flex items-center gap-1.5 cursor-pointer text-sm"
                     >
-                      <Icon 
-                        className="w-3.5 h-3.5" 
+                      <Icon
+                        className="w-3.5 h-3.5"
                         style={{ color: group.color }}
                       />
                       <span className={isActive ? "text-foreground" : "text-muted-foreground"}>

package/components/examples/MapExamples.tsx

@@ -13,7 +13,7 @@ import { MapPin, Navigation, Store, Heart } from 'lucide-react';
 // 1. Mapa de Loja com Raio de Entrega
 export function StoreDeliveryMap() {
   const storeLocation = { lat: -23.5505, lng: -46.6333 };
-  
+
   return (
     <Card>
       <CardHeader>
@@ -181,10 +181,12 @@ export function CompanyOfficesMap() {
 export function ServiceZoneMap() {
   const serviceZone = {
     paths: [
-      { lat: -23.540, lng: -46.620 },
-      { lat: -23.540, lng: -46.660 },
-      { lat: -23.565, lng: -46.660 },
-      { lat: -23.565, lng: -46.620 }
+      [
+        { lat: -23.540, lng: -46.620 },
+        { lat: -23.540, lng: -46.660 },
+        { lat: -23.565, lng: -46.660 },
+        { lat: -23.565, lng: -46.620 }
+      ]
     ],
     fillColor: "#3B82F6",
     strokeColor: "#2563EB"
@@ -214,7 +216,7 @@ export function ServiceZoneMap() {
         />
         <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
           <p className="text-sm text-blue-900 dark:text-blue-100">
-            <strong>Atendimento prioritário:</strong> Clientes dentro da zona azul 
+            <strong>Atendimento prioritário:</strong> Clientes dentro da zona azul
             recebem atendimento em até 2 horas.
           </p>
         </div>

package/components/examples/MapGmpExample.tsx

@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import { Map, MapProps } from '../ui/map';
+import { RouteMap } from '../ui/route-map';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+
+export function MapGmpExample() {
+    const [apiKey, setApiKey] = useState('');
+
+    // Example markers
+    const markers = [
+        {
+            position: { lat: -23.5505, lng: -46.6333 },
+            title: "São Paulo",
+            info: "Capital financeira",
+            customColor: "#EF4444",
+            icon: "SP"
+        },
+        {
+            position: { lat: -23.58, lng: -46.65 },
+            title: "Ibirapuera",
+            info: "Parque do Ibirapuera",
+            customColor: "#10B981",
+            icon: "IB"
+        }
+    ];
+
+    return (
+        <div className="container mx-auto py-8 space-y-8">
+            <div className="space-y-4">
+                <h1 className="text-3xl font-bold">Google Maps Platform - Web Components</h1>
+                <p className="text-muted-foreground">
+                    This example uses custom elements <code>&lt;gmp-map&gt;</code> and <code>&lt;gmp-advanced-marker&gt;</code> for better performance and modern integration.
+                </p>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle>API Key Configuration</CardTitle>
+                        <CardDescription>Enter your API Key to load the maps. It will be stored in the session context.</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="flex gap-4">
+                            <Input
+                                type="password"
+                                placeholder="Paste your Google Maps API Key here"
+                                value={apiKey}
+                                onChange={(e) => setApiKey(e.target.value)}
+                                className="flex-1"
+                            />
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <Tabs defaultValue="standard">
+                <TabsList className="mb-4">
+                    <TabsTrigger value="standard">Standard Map</TabsTrigger>
+                    <TabsTrigger value="satellite">Satellite</TabsTrigger>
+                    <TabsTrigger value="dark">Dark / NY</TabsTrigger>
+                    <TabsTrigger value="route">Route Map</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="standard" className="space-y-4">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Standard Map (&lt;gmp-map&gt;)</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <Map
+                                apiKey={apiKey}
+                                height="500px"
+                                zoom={12}
+                                center={{ lat: -23.56, lng: -46.64 }}
+                                markers={markers}
+                                circle={{
+                                    center: { lat: -23.5505, lng: -46.6333 },
+                                    radius: 1000,
+                                    fillColor: "#EF4444"
+                                }}
+                            />
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="route" className="space-y-4">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Route Map (Hybrid)</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <RouteMap
+                                apiKey={apiKey}
+                                height="500px"
+                                origin={{ lat: -23.5505, lng: -46.6333 }}
+                                destination={{ lat: -23.58, lng: -46.65 }}
+                                travelMode="DRIVING"
+                                onRouteCalculated={(distance, duration) => console.log(`Route: ${distance}, ${duration}`)}
+                            />
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+                <TabsContent value="satellite" className="space-y-4">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Satellite View</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <Map
+                                apiKey={apiKey}
+                                height="500px"
+                                zoom={16}
+                                center={{ lat: -23.5505, lng: -46.6333 }}
+                                mapTypeId="satellite"
+                                markers={[{
+                                    position: { lat: -23.5505, lng: -46.6333 },
+                                    title: "Detailed View",
+                                    customColor: "#ffffff",
+                                    iconColor: "#000000",
+                                    icon: "👁️"
+                                }]}
+                            />
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="dark" className="space-y-4">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Dark Mode (Styled)</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <Map
+                                apiKey={apiKey}
+                                height="500px"
+                                zoom={12}
+                                center={{ lat: 40.7128, lng: -74.0060 }}
+                                mapId="4504f8b37365c3d0" // Example Dark Map ID (won't work without config, falling back to standard if invalid)
+                                // Alternatively use styles prop if we supported legacy styles, but GMP recommends MapID.
+                                // For now, let's just show a different location and markers to varify reusability
+                                markers={[
+                                    { position: { lat: 40.7128, lng: -74.0060 }, title: "New York", customColor: "#3b82f6" },
+                                    { position: { lat: 40.7580, lng: -73.9855 }, title: "Times Square", customColor: "#8b5cf6" }
+                                ]}
+                            />
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+            </Tabs>
+        </div>
+    );
+}