xertica-ui 1.0.0

package/components/examples/MapShowcase.tsx

@@ -0,0 +1,446 @@
+import React, { useState } from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Alert, AlertDescription } from '../ui/alert';
+import { Info, Layers, MapPin, MousePointer2, Pencil } from 'lucide-react';
+import { Checkbox } from '../ui/checkbox';
+import { Label } from '../ui/label';
+import { Switch } from '../ui/switch';
+import { FilterableMapExample } from './FilterableMapExample';
+import { SimpleFilterableMap } from './SimpleFilterableMap';
+import { DrawingMapExample } from './DrawingMapExample';
+
+/**
+ * MapShowcase - Componente de demonstração completo e organizado
+ * 
+ * Organizado em 3 abas principais conforme diretrizes do Design System:
+ * 1. Mapas Simples (Padrão, Layers, Compacto)
+ * 2. Marcadores (Pins, Áreas, Personalização)
+ * 3. Controles (Filtros, Controles Nativos)
+ */
+
+export function MapShowcase() {
+  const [activeTab, setActiveTab] = useState('simple');
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  // Estados para Layers
+  const [showTraffic, setShowTraffic] = useState(false);
+  const [showTransit, setShowTransit] = useState(false);
+  const [showBicycling, setShowBicycling] = useState(false);
+
+  // Estados para Controles Nativos
+  const [showZoomControl, setShowZoomControl] = useState(true);
+  const [showMapTypeControl, setShowMapTypeControl] = useState(false);
+  const [showStreetViewControl, setShowStreetViewControl] = useState(false);
+  const [showFullscreenControl, setShowFullscreenControl] = useState(true);
+
+  // Handler para troca de tabs com cleanup
+  const handleTabChange = (value: string) => {
+    if (value === activeTab) return;
+    setIsTransitioning(true);
+    setTimeout(() => {
+      setActiveTab(value);
+      setIsTransitioning(false);
+    }, 50);
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="space-y-4">
+        <div className="flex items-center gap-3">
+          <h2>Mapas</h2>
+          <Badge>Design System</Badge>
+        </div>
+        <p className="text-muted-foreground max-w-3xl">
+          Biblioteca de componentes de mapa para visualização de dados geoespaciais. 
+          Utiliza a API do Google Maps com estilização personalizada do Xertica UI.
+        </p>
+      </div>
+
+      {/* API Key Notice */}
+      <Alert>
+        <AlertDescription>
+          <strong>Nota:</strong> Certifique-se de que a API Key do Google Maps esteja configurada corretamente para visualizar os mapas.
+        </AlertDescription>
+      </Alert>
+
+      {/* Tabs Principais */}
+      <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
+        <TabsList className="grid w-full grid-cols-4 mb-8">
+          <TabsTrigger value="simple">Mapas Simples</TabsTrigger>
+          <TabsTrigger value="markers">Marcadores</TabsTrigger>
+          <TabsTrigger value="controls">Controles</TabsTrigger>
+          <TabsTrigger value="drawing" className="flex items-center gap-2">
+            <Pencil className="w-3 h-3" /> Desenho
+          </TabsTrigger>
+        </TabsList>
+
+        {/* 1. Mapas Simples */}
+        <TabsContent value="simple" className="space-y-8">
+          {!isTransitioning && activeTab === 'simple' && (
+            <>
+              {/* Mapa Padrão */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Mapa Padrão</CardTitle>
+                  <CardDescription>
+                    Configuração básica do mapa centralizado em uma coordenada específica.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={13}
+                    height="400px"
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Mapa com Layers */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Camadas (Layers)</CardTitle>
+                  <CardDescription>
+                    Sobreposição de informações como tráfego, transporte público e ciclovias.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="flex flex-wrap gap-6 p-4 border rounded-lg bg-muted/50">
+                    <div className="flex items-center space-x-2">
+                      <Switch 
+                        id="traffic" 
+                        checked={showTraffic}
+                        onCheckedChange={setShowTraffic}
+                      />
+                      <Label htmlFor="traffic" className="flex items-center gap-2">
+                        <Layers className="w-4 h-4" /> Trânsito
+                      </Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Switch 
+                        id="transit" 
+                        checked={showTransit}
+                        onCheckedChange={setShowTransit}
+                      />
+                      <Label htmlFor="transit" className="flex items-center gap-2">
+                        <Layers className="w-4 h-4" /> Transporte
+                      </Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Switch 
+                        id="bicycling" 
+                        checked={showBicycling}
+                        onCheckedChange={setShowBicycling}
+                      />
+                      <Label htmlFor="bicycling" className="flex items-center gap-2">
+                        <Layers className="w-4 h-4" /> Ciclovias
+                      </Label>
+                    </div>
+                  </div>
+
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={12}
+                    height="500px"
+                    layers={{
+                      traffic: showTraffic,
+                      transit: showTransit,
+                      bicycling: showBicycling,
+                    }}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Mapas Compactos */}
+              <div className="grid md:grid-cols-3 gap-4">
+                <Card>
+                  <CardHeader className="p-4 pb-2">
+                    <CardTitle className="text-sm">São Paulo</CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-4 pt-0">
+                    <Map
+                      center={{ lat: -23.5505, lng: -46.6333 }}
+                      zoom={11}
+                      height="200px"
+                      disableDefaultUI={true}
+                    />
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className="p-4 pb-2">
+                    <CardTitle className="text-sm">Rio de Janeiro</CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-4 pt-0">
+                    <Map
+                      center={{ lat: -22.9068, lng: -43.1729 }}
+                      zoom={11}
+                      height="200px"
+                      disableDefaultUI={true}
+                    />
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className="p-4 pb-2">
+                    <CardTitle className="text-sm">New York</CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-4 pt-0">
+                    <Map
+                      center={{ lat: 40.7128, lng: -74.0060 }}
+                      zoom={11}
+                      height="200px"
+                      disableDefaultUI={true}
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            </>
+          )}
+        </TabsContent>
+
+        {/* 2. Marcadores */}
+        <TabsContent value="markers" className="space-y-8">
+          {!isTransitioning && activeTab === 'markers' && (
+            <>
+              {/* Marcadores e Pins */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Marcadores e Pins</CardTitle>
+                  <CardDescription>
+                    Exemplos de marcadores personalizados com diferentes cores e informações.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={13}
+                    height="500px"
+                    markers={[
+                      {
+                        position: { lat: -23.5505, lng: -46.6333 },
+                        title: "Principal",
+                        info: "Marcador padrão",
+                        customColor: "#4F46E5"
+                      },
+                      {
+                        position: { lat: -23.540, lng: -46.640 },
+                        title: "Secundário",
+                        info: "Marcador de alerta",
+                        customColor: "#EF4444",
+                        icon: "!"
+                      },
+                      {
+                        position: { lat: -23.560, lng: -46.620 },
+                        title: "Loja",
+                        info: "Ponto de venda",
+                        customColor: "#10B981",
+                        icon: "S"
+                      }
+                    ]}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Marcador com Conteúdo Rico */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Marcador com Ações</CardTitle>
+                  <CardDescription>
+                    Marcador interativo que exibe conteúdo rico (texto, imagem, botões) ao ser clicado.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={13}
+                    height="500px"
+                    markers={[
+                      {
+                        position: { lat: -23.5505, lng: -46.6333 },
+                        label: "🏢",
+                        richContent: (
+                          <div className="p-4 max-w-[260px]">
+                            <div className="flex items-center justify-between mb-2">
+                              <h4 className="font-semibold text-base">Xertica HQ</h4>
+                              <Badge variant="outline" className="text-[10px] h-5">Open</Badge>
+                            </div>
+                            <div className="w-full h-32 bg-muted rounded-md mb-3 overflow-hidden relative">
+                              <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
+                              <div className="absolute inset-0 flex items-center justify-center text-white font-medium">
+                                Office View
+                              </div>
+                            </div>
+                            <p className="text-sm text-muted-foreground mb-3 leading-relaxed">
+                              Sede principal em São Paulo. Espaço moderno para reuniões e eventos.
+                            </p>
+                            <div className="grid grid-cols-2 gap-2">
+                              <Button size="sm" className="w-full h-8 text-xs shadow-sm">
+                                Navegar
+                              </Button>
+                              <Button size="sm" variant="outline" className="w-full h-8 text-xs bg-background">
+                                Detalhes
+                              </Button>
+                            </div>
+                          </div>
+                        )
+                      }
+                    ]}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Áreas e Polígonos */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Áreas e Zonas</CardTitle>
+                  <CardDescription>
+                    Delimitação de áreas geográficas usando círculos e polígonos.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={12}
+                    height="500px"
+                    markers={[
+                      {
+                        position: { lat: -23.5505, lng: -46.6333 },
+                        title: "Centro da Zona",
+                        info: "Raio de 3km",
+                        customColor: "#6366F1"
+                      }
+                    ]}
+                    circle={{
+                      center: { lat: -23.5505, lng: -46.6333 },
+                      radius: 3000,
+                      fillColor: "#6366F1",
+                      strokeColor: "#4F46E5"
+                    }}
+                    polygon={{
+                      paths: [
+                        { lat: -23.520, lng: -46.600 },
+                        { lat: -23.520, lng: -46.660 },
+                        { lat: -23.580, lng: -46.660 },
+                        { lat: -23.580, lng: -46.600 }
+                      ],
+                      fillColor: "#10B981",
+                      strokeColor: "#059669"
+                    }}
+                  />
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </TabsContent>
+
+        {/* 3. Controles */}
+        <TabsContent value="controls" className="space-y-8">
+          {!isTransitioning && activeTab === 'controls' && (
+            <>
+              {/* Controles Nativos */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Controles do Mapa</CardTitle>
+                  <CardDescription>
+                    Personalize a interface do mapa ativando ou desativando controles nativos.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border rounded-lg bg-muted/50">
+                    <div className="flex items-center space-x-2">
+                      <Checkbox 
+                        id="zoom" 
+                        checked={showZoomControl}
+                        onCheckedChange={(c) => setShowZoomControl(!!c)}
+                      />
+                      <Label htmlFor="zoom">Zoom Control</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Checkbox 
+                        id="maptype" 
+                        checked={showMapTypeControl}
+                        onCheckedChange={(c) => setShowMapTypeControl(!!c)}
+                      />
+                      <Label htmlFor="maptype">Map Type</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Checkbox 
+                        id="streetview" 
+                        checked={showStreetViewControl}
+                        onCheckedChange={(c) => setShowStreetViewControl(!!c)}
+                      />
+                      <Label htmlFor="streetview">Street View</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Checkbox 
+                        id="fullscreen" 
+                        checked={showFullscreenControl}
+                        onCheckedChange={(c) => setShowFullscreenControl(!!c)}
+                      />
+                      <Label htmlFor="fullscreen">Fullscreen</Label>
+                    </div>
+                  </div>
+
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={13}
+                    height="400px"
+                    zoomControl={showZoomControl}
+                    mapTypeControl={showMapTypeControl}
+                    streetViewControl={showStreetViewControl}
+                    fullscreenControl={showFullscreenControl}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Filtros Customizados */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Filtros Interativos</CardTitle>
+                  <CardDescription>
+                    Exemplo avançado de mapa com controles customizados para filtragem de marcadores.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <FilterableMapExample />
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </TabsContent>
+
+        {/* 4. Desenho */}
+        <TabsContent value="drawing" className="space-y-8">
+          {!isTransitioning && activeTab === 'drawing' && (
+            <DrawingMapExample />
+          )}
+        </TabsContent>
+      </Tabs>
+
+      {/* Footer Info */}
+      <div className="grid md:grid-cols-3 gap-6 pt-8 border-t">
+        <div className="space-y-2">
+          <h4 className="font-semibold text-sm">Documentação</h4>
+          <p className="text-xs text-muted-foreground">
+            Verifique <code>MAP_SETUP.md</code> para configuração inicial e requisitos de API.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <h4 className="font-semibold text-sm">Performance</h4>
+          <p className="text-xs text-muted-foreground">
+            Utiliza carregamento assíncrono e AdvancedMarkerElement para melhor desempenho.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <h4 className="font-semibold text-sm">Design System</h4>
+          <p className="text-xs text-muted-foreground">
+            Componentes seguem estritamente as variáveis de tokens do <code>globals.css</code>.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}