xertica-ui 1.0.0

package/components/examples/LocationPickerExample.tsx

@@ -0,0 +1,330 @@
+import React, { useState } from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { MapPin, Store, Home, Building2, Navigation } from 'lucide-react';
+
+/**
+ * LocationPickerExample
+ * 
+ * Exemplo avançado que demonstra:
+ * - Seleção de localização em um mapa
+ * - Múltiplas categorias de locais
+ * - Estado interativo
+ * - Integração com outros componentes UI
+ */
+
+interface Location {
+  id: string;
+  name: string;
+  address: string;
+  category: 'store' | 'office' | 'home';
+  coords: { lat: number; lng: number };
+  description: string;
+  isOpen?: boolean;
+  phone?: string;
+}
+
+const mockLocations: Location[] = [
+  {
+    id: '1',
+    name: 'Loja Centro',
+    address: 'Av. Paulista, 1000 - Bela Vista, São Paulo',
+    category: 'store',
+    coords: { lat: -23.5505, lng: -46.6333 },
+    description: 'Nossa loja principal no centro da cidade',
+    isOpen: true,
+    phone: '(11) 3456-7890'
+  },
+  {
+    id: '2',
+    name: 'Loja Shopping',
+    address: 'Shopping Ibirapuera - Vila Clementino, São Paulo',
+    category: 'store',
+    coords: { lat: -23.5965, lng: -46.6520 },
+    description: 'Loja no Shopping Ibirapuera',
+    isOpen: true,
+    phone: '(11) 3456-7891'
+  },
+  {
+    id: '3',
+    name: 'Escritório Administrativo',
+    address: 'Rua Augusta, 2000 - Consolação, São Paulo',
+    category: 'office',
+    coords: { lat: -23.5558, lng: -46.6600 },
+    description: 'Sede administrativa da empresa',
+    isOpen: false,
+    phone: '(11) 3456-7892'
+  },
+  {
+    id: '4',
+    name: 'Centro de Distribuição',
+    address: 'Rodovia dos Bandeirantes, km 24',
+    category: 'office',
+    coords: { lat: -23.4850, lng: -46.6850 },
+    description: 'Centro de logística e distribuição',
+    isOpen: true,
+    phone: '(11) 3456-7893'
+  }
+];
+
+export function LocationPickerExample() {
+  const [selectedLocation, setSelectedLocation] = useState<Location | null>(mockLocations[0]);
+  const [activeCategory, setActiveCategory] = useState<string>('all');
+
+  // Filtrar localizações por categoria
+  const filteredLocations = activeCategory === 'all' 
+    ? mockLocations 
+    : mockLocations.filter(loc => loc.category === activeCategory);
+
+  // Criar marcadores para o mapa
+  const markers = filteredLocations.map(loc => ({
+    position: loc.coords,
+    title: loc.name,
+    info: loc.address,
+    label: loc.category === 'store' ? '🏪' : loc.category === 'office' ? '🏢' : '🏠'
+  }));
+
+  // Calcular centro do mapa baseado nos locais filtrados
+  const mapCenter = selectedLocation?.coords || { lat: -23.5505, lng: -46.6333 };
+
+  const getCategoryIcon = (category: string) => {
+    switch (category) {
+      case 'store': return <Store className="w-4 h-4" />;
+      case 'office': return <Building2 className="w-4 h-4" />;
+      case 'home': return <Home className="w-4 h-4" />;
+      default: return <MapPin className="w-4 h-4" />;
+    }
+  };
+
+  const getCategoryLabel = (category: string) => {
+    switch (category) {
+      case 'store': return 'Loja';
+      case 'office': return 'Escritório';
+      case 'home': return 'Residência';
+      default: return 'Local';
+    }
+  };
+
+  return (
+    <div className="space-y-6 max-w-6xl mx-auto">
+      <div className="space-y-2">
+        <h2 className="text-2xl">Encontre uma Localização</h2>
+        <p className="text-muted-foreground">
+          Selecione um local para ver mais informações e como chegar
+        </p>
+      </div>
+
+      <Tabs defaultValue="all" onValueChange={setActiveCategory}>
+        <TabsList className="w-full grid grid-cols-4">
+          <TabsTrigger value="all">
+            <MapPin className="w-4 h-4 mr-2" />
+            Todos ({mockLocations.length})
+          </TabsTrigger>
+          <TabsTrigger value="store">
+            <Store className="w-4 h-4 mr-2" />
+            Lojas ({mockLocations.filter(l => l.category === 'store').length})
+          </TabsTrigger>
+          <TabsTrigger value="office">
+            <Building2 className="w-4 h-4 mr-2" />
+            Escritórios ({mockLocations.filter(l => l.category === 'office').length})
+          </TabsTrigger>
+          <TabsTrigger value="home">
+            <Home className="w-4 h-4 mr-2" />
+            Outros ({mockLocations.filter(l => l.category === 'home').length})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value={activeCategory} className="mt-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* Lista de Locais */}
+            <div className="lg:col-span-1 space-y-3">
+              <h3 className="text-sm font-medium text-muted-foreground">
+                {filteredLocations.length} {filteredLocations.length === 1 ? 'local' : 'locais'} encontrado{filteredLocations.length !== 1 ? 's' : ''}
+              </h3>
+              
+              <div className="space-y-2 max-h-[600px] overflow-y-auto pr-2">
+                {filteredLocations.map((location) => (
+                  <Card
+                    key={location.id}
+                    className={`cursor-pointer transition-all hover:shadow-md ${
+                      selectedLocation?.id === location.id
+                        ? 'ring-2 ring-primary bg-primary/5'
+                        : ''
+                    }`}
+                    onClick={() => setSelectedLocation(location)}
+                  >
+                    <CardHeader className="p-4">
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1">
+                          <CardTitle className="text-base flex items-center gap-2">
+                            {getCategoryIcon(location.category)}
+                            {location.name}
+                          </CardTitle>
+                          <CardDescription className="text-xs mt-1">
+                            {location.address}
+                          </CardDescription>
+                        </div>
+                        {location.isOpen !== undefined && (
+                          <Badge
+                            variant={location.isOpen ? 'success' : 'secondary'}
+                            className="text-xs"
+                          >
+                            {location.isOpen ? 'Aberto' : 'Fechado'}
+                          </Badge>
+                        )}
+                      </div>
+                    </CardHeader>
+                  </Card>
+                ))}
+              </div>
+            </div>
+
+            {/* Mapa e Detalhes */}
+            <div className="lg:col-span-2 space-y-4">
+              {/* Mapa */}
+              <Card>
+                <CardContent className="p-4">
+                  <Map
+                    center={mapCenter}
+                    zoom={selectedLocation ? 15 : 12}
+                    markers={markers}
+                    height="400px"
+                    zoomControl={true}
+                    fullscreenControl={true}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Informações do Local Selecionado */}
+              {selectedLocation && (
+                <Card>
+                  <CardHeader>
+                    <div className="flex items-start justify-between">
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          {getCategoryIcon(selectedLocation.category)}
+                          <CardTitle>{selectedLocation.name}</CardTitle>
+                        </div>
+                        <CardDescription>
+                          {getCategoryLabel(selectedLocation.category)}
+                        </CardDescription>
+                      </div>
+                      {selectedLocation.isOpen !== undefined && (
+                        <Badge
+                          variant={selectedLocation.isOpen ? 'success' : 'secondary'}
+                        >
+                          {selectedLocation.isOpen ? 'Aberto agora' : 'Fechado'}
+                        </Badge>
+                      )}
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                      <div className="flex items-start gap-2 text-sm">
+                        <MapPin className="w-4 h-4 text-muted-foreground mt-0.5 shrink-0" />
+                        <span>{selectedLocation.address}</span>
+                      </div>
+                      {selectedLocation.phone && (
+                        <div className="flex items-center gap-2 text-sm">
+                          <span className="text-muted-foreground">📞</span>
+                          <span>{selectedLocation.phone}</span>
+                        </div>
+                      )}
+                    </div>
+                    
+                    <p className="text-sm text-muted-foreground">
+                      {selectedLocation.description}
+                    </p>
+                  </CardContent>
+                  <CardFooter className="flex gap-2">
+                    <Button className="flex-1">
+                      <Navigation className="w-4 h-4 mr-2" />
+                      Como Chegar
+                    </Button>
+                    <Button variant="outline" className="flex-1">
+                      Mais Informações
+                    </Button>
+                  </CardFooter>
+                </Card>
+              )}
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+/**
+ * VARIAÇÃO: Seletor de Endereço de Entrega
+ */
+export function DeliveryAddressSelector() {
+  const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
+
+  const addresses = [
+    { id: '1', label: 'Casa', address: 'Rua das Flores, 123', coords: { lat: -23.5505, lng: -46.6333 } },
+    { id: '2', label: 'Trabalho', address: 'Av. Paulista, 1000', coords: { lat: -23.5615, lng: -46.6560 } },
+    { id: '3', label: 'Outro', address: 'Rua Augusta, 2000', coords: { lat: -23.5558, lng: -46.6600 } }
+  ];
+
+  const selectedCoords = addresses.find(a => a.id === selectedAddress)?.coords || addresses[0].coords;
+
+  return (
+    <Card className="max-w-2xl">
+      <CardHeader>
+        <CardTitle>Selecione o Endereço de Entrega</CardTitle>
+        <CardDescription>
+          Escolha onde deseja receber seu pedido
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          {addresses.map((addr) => (
+            <button
+              key={addr.id}
+              onClick={() => setSelectedAddress(addr.id)}
+              className={`w-full p-4 rounded-lg border-2 text-left transition-all ${
+                selectedAddress === addr.id
+                  ? 'border-primary bg-primary/5'
+                  : 'border-border hover:border-primary/50'
+              }`}
+            >
+              <div className="flex items-start gap-3">
+                <Home className="w-5 h-5 text-muted-foreground mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium">{addr.label}</p>
+                  <p className="text-sm text-muted-foreground">{addr.address}</p>
+                </div>
+                {selectedAddress === addr.id && (
+                  <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
+                    <span className="text-xs text-primary-foreground">✓</span>
+                  </div>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+
+        <Map
+          center={selectedCoords}
+          zoom={15}
+          markers={[
+            {
+              position: selectedCoords,
+              title: "Endereço de Entrega"
+            }
+          ]}
+          height="300px"
+        />
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full" disabled={!selectedAddress}>
+          Confirmar Endereço
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/components/examples/MapExamples.tsx

@@ -0,0 +1,280 @@
+import React from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { MapPin, Navigation, Store, Heart } from 'lucide-react';
+
+/**
+ * Exemplos práticos de uso do componente Map
+ * Demonstra diferentes casos de uso do mundo real
+ */
+
+// 1. Mapa de Loja com Raio de Entrega
+export function StoreDeliveryMap() {
+  const storeLocation = { lat: -23.5505, lng: -46.6333 };
+  
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Store className="w-5 h-5 text-primary" />
+          <CardTitle>Área de Entrega</CardTitle>
+        </div>
+        <CardDescription>
+          Realizamos entregas em um raio de 5km da nossa loja
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Map
+          center={storeLocation}
+          zoom={13}
+          markers={[
+            {
+              position: storeLocation,
+              title: "Nossa Loja",
+              info: "Avenida Paulista, 1000"
+            }
+          ]}
+          circle={{
+            center: storeLocation,
+            radius: 5000,
+            fillColor: "#10B981",
+            strokeColor: "#059669"
+          }}
+          height="400px"
+        />
+        <div className="mt-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <MapPin className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">
+              Cobertura de 5km
+            </span>
+          </div>
+          <Button size="sm">
+            <Navigation className="w-4 h-4 mr-2" />
+            Como Chegar
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 2. Mapa de Locais Favoritos
+export function FavoritePlacesMap() {
+  const favorites = [
+    {
+      position: { lat: -23.5505, lng: -46.6333 },
+      label: "⭐",
+      title: "Restaurante Favorito",
+      info: "Melhor pizza da cidade!"
+    },
+    {
+      position: { lat: -23.5475, lng: -46.6361 },
+      label: "☕",
+      title: "Cafeteria",
+      info: "Café artesanal"
+    },
+    {
+      position: { lat: -23.5613, lng: -46.6563 },
+      label: "🏃",
+      title: "Parque",
+      info: "Local de corrida matinal"
+    },
+    {
+      position: { lat: -23.5558, lng: -46.6396 },
+      label: "🎬",
+      title: "Cinema",
+      info: "Cinema independente"
+    }
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Heart className="w-5 h-5 text-destructive" />
+            <CardTitle>Meus Lugares Favoritos</CardTitle>
+          </div>
+          <Badge variant="secondary">{favorites.length} locais</Badge>
+        </div>
+        <CardDescription>
+          Lugares que você marcou como favoritos
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Map
+          center={{ lat: -23.5505, lng: -46.6333 }}
+          zoom={13}
+          markers={favorites}
+          height="450px"
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+// 3. Mapa de Escritórios da Empresa
+export function CompanyOfficesMap() {
+  const offices = [
+    {
+      position: { lat: -23.5505, lng: -46.6333 },
+      label: "HQ",
+      title: "Sede - São Paulo",
+      info: "Matriz da empresa - 200 funcionários"
+    },
+    {
+      position: { lat: -22.9068, lng: -43.1729 },
+      label: "RJ",
+      title: "Filial - Rio de Janeiro",
+      info: "Escritório regional - 80 funcionários"
+    },
+    {
+      position: { lat: -19.9167, lng: -43.9345 },
+      label: "BH",
+      title: "Filial - Belo Horizonte",
+      info: "Centro de distribuição - 50 funcionários"
+    },
+    {
+      position: { lat: -25.4284, lng: -49.2733 },
+      label: "CWB",
+      title: "Filial - Curitiba",
+      info: "Centro de tecnologia - 120 funcionários"
+    }
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Nossos Escritórios</CardTitle>
+        <CardDescription>
+          Presença em 4 estados brasileiros
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Map
+          center={{ lat: -22.5, lng: -45.0 }}
+          zoom={6}
+          markers={offices}
+          height="500px"
+          zoomControl={true}
+          fullscreenControl={true}
+        />
+        <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2">
+          {offices.map((office, index) => (
+            <div key={index} className="text-center p-3 bg-muted rounded-lg">
+              <div className="text-2xl mb-1">{office.label}</div>
+              <p className="text-xs text-muted-foreground line-clamp-1">
+                {office.title}
+              </p>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 4. Mapa de Zona de Serviço com Polígono
+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 }
+    ],
+    fillColor: "#3B82F6",
+    strokeColor: "#2563EB"
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Área de Atendimento</CardTitle>
+        <CardDescription>
+          Zona azul indica nossa área de serviço prioritária
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Map
+          center={{ lat: -23.5525, lng: -46.640 }}
+          zoom={13}
+          polygon={serviceZone}
+          markers={[
+            {
+              position: { lat: -23.5525, lng: -46.640 },
+              title: "Central de Operações",
+              info: "Base de atendimento"
+            }
+          ]}
+          height="450px"
+        />
+        <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 
+            recebem atendimento em até 2 horas.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 5. Grid de Mapas Compactos (Comparação)
+export function CompactMapsGrid() {
+  const cities = [
+    {
+      name: "São Paulo",
+      center: { lat: -23.5505, lng: -46.6333 },
+      description: "Maior cidade do Brasil"
+    },
+    {
+      name: "Rio de Janeiro",
+      center: { lat: -22.9068, lng: -43.1729 },
+      description: "Cidade maravilhosa"
+    },
+    {
+      name: "Brasília",
+      center: { lat: -15.7942, lng: -47.8822 },
+      description: "Capital federal"
+    },
+    {
+      name: "Salvador",
+      center: { lat: -12.9714, lng: -38.5014 },
+      description: "Primeira capital"
+    }
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Principais Cidades</CardTitle>
+        <CardDescription>
+          Visão rápida das principais metrópoles brasileiras
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {cities.map((city, index) => (
+            <div key={index} className="space-y-2">
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium">{city.name}</h4>
+                <Badge variant="outline">{city.description}</Badge>
+              </div>
+              <Map
+                center={city.center}
+                zoom={11}
+                height="200px"
+                disableDefaultUI={true}
+                gestureHandling="none"
+              />
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}