xertica-ui 1.0.0

package/components/examples/RouteMapExamples.tsx

@@ -0,0 +1,329 @@
+import React, { useState } from 'react';
+import { RouteMap } from '../ui/route-map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { Navigation, Car, PersonStanding, Bike, Clock, MapPin } from 'lucide-react';
+
+/**
+ * RouteMapExamples - Exemplos práticos de mapas com rotas
+ * 
+ * Demonstra diferentes casos de uso para o componente RouteMap:
+ * - Rotas de entrega
+ * - Rotas turísticas
+ * - Diferentes modos de transporte
+ * - Rotas com múltiplos waypoints
+ */
+
+// 1. Rota de Entrega Simples
+export function DeliveryRouteMap() {
+  const [routeInfo, setRouteInfo] = useState<{ distance: string; duration: string } | null>(null);
+
+  const origin = { lat: -23.5505, lng: -46.6333 }; // Avenida Paulista
+  const destination = { lat: -23.5613, lng: -46.6563 }; // Parque Ibirapuera
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Car className="w-5 h-5 text-primary" />
+          <CardTitle>Rota de Entrega</CardTitle>
+        </div>
+        <CardDescription>
+          Calcule o tempo e distância para sua entrega
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <RouteMap
+          origin={origin}
+          destination={destination}
+          travelMode="DRIVING"
+          height="400px"
+          onRouteCalculated={(distance, duration) => {
+            setRouteInfo({ distance, duration });
+          }}
+        />
+        
+        {routeInfo && (
+          <div className="grid grid-cols-2 gap-3">
+            <div className="p-3 bg-muted rounded-lg">
+              <div className="flex items-center gap-2 mb-1">
+                <Navigation className="w-4 h-4 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">Distância</span>
+              </div>
+              <p className="text-lg font-semibold">{routeInfo.distance}</p>
+            </div>
+            <div className="p-3 bg-muted rounded-lg">
+              <div className="flex items-center gap-2 mb-1">
+                <Clock className="w-4 h-4 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">Tempo</span>
+              </div>
+              <p className="text-lg font-semibold">{routeInfo.duration}</p>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// 2. Rota Turística com Múltiplos Pontos
+export function TouristRouteMap() {
+  const [routeInfo, setRouteInfo] = useState<{ distance: string; duration: string } | null>(null);
+
+  const route = {
+    origin: { lat: -23.5505, lng: -46.6333 }, // Av. Paulista
+    destination: { lat: -23.5475, lng: -46.6361 }, // MASP
+    waypoints: [
+      { lat: -23.5558, lng: -46.6396 }, // Parque Trianon
+      { lat: -23.5506, lng: -46.6378 }, // Casa das Rosas
+    ]
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Rota Turística - Avenida Paulista</CardTitle>
+        <CardDescription>
+          Roteiro a pé pelos principais pontos turísticos
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <RouteMap
+          origin={route.origin}
+          destination={route.destination}
+          waypoints={route.waypoints}
+          travelMode="WALKING"
+          height="450px"
+          onRouteCalculated={(distance, duration) => {
+            setRouteInfo({ distance, duration });
+          }}
+        />
+
+        <div className="space-y-2">
+          <h4 className="text-sm font-medium">Pontos da Rota:</h4>
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-2 text-sm">
+              <Badge variant="outline" className="w-6 h-6 flex items-center justify-center p-0">A</Badge>
+              <span>Início - Avenida Paulista</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Badge variant="outline" className="w-6 h-6 flex items-center justify-center p-0">C</Badge>
+              <span>Parque Trianon</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Badge variant="outline" className="w-6 h-6 flex items-center justify-center p-0">D</Badge>
+              <span>Casa das Rosas</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Badge variant="outline" className="w-6 h-6 flex items-center justify-center p-0">B</Badge>
+              <span>Fim - MASP</span>
+            </div>
+          </div>
+        </div>
+
+        {routeInfo && (
+          <div className="p-4 bg-green-50 dark:bg-green-950 rounded-lg border border-green-200 dark:border-green-800">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <PersonStanding className="w-5 h-5 text-green-600 dark:text-green-400" />
+                <span className="text-sm text-green-900 dark:text-green-100">
+                  <strong>Caminhada:</strong> {routeInfo.distance} em {routeInfo.duration}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// 3. Comparação de Modos de Transporte
+export function TransportModeComparison() {
+  const [selectedMode, setSelectedMode] = useState<'DRIVING' | 'WALKING' | 'BICYCLING'>('DRIVING');
+  const [routeInfo, setRouteInfo] = useState<{ distance: string; duration: string } | null>(null);
+
+  const origin = { lat: -23.5505, lng: -46.6333 };
+  const destination = { lat: -23.5613, lng: -46.6563 };
+
+  const modes = [
+    { value: 'DRIVING' as const, label: 'Carro', icon: Car, color: 'blue' },
+    { value: 'WALKING' as const, label: 'A Pé', icon: PersonStanding, color: 'green' },
+    { value: 'BICYCLING' as const, label: 'Bicicleta', icon: Bike, color: 'orange' },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Comparação de Transportes</CardTitle>
+        <CardDescription>
+          Veja o tempo e distância para cada modo de transporte
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex gap-2">
+          {modes.map((mode) => {
+            const Icon = mode.icon;
+            return (
+              <Button
+                key={mode.value}
+                variant={selectedMode === mode.value ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setSelectedMode(mode.value)}
+                className="flex-1"
+              >
+                <Icon className="w-4 h-4 mr-2" />
+                {mode.label}
+              </Button>
+            );
+          })}
+        </div>
+
+        <RouteMap
+          origin={origin}
+          destination={destination}
+          travelMode={selectedMode}
+          height="400px"
+          onRouteCalculated={(distance, duration) => {
+            setRouteInfo({ distance, duration });
+          }}
+        />
+
+        {routeInfo && (
+          <div className="grid grid-cols-2 gap-3">
+            <div className="p-4 bg-muted rounded-lg text-center">
+              <p className="text-2xl font-bold">{routeInfo.distance}</p>
+              <p className="text-xs text-muted-foreground mt-1">Distância total</p>
+            </div>
+            <div className="p-4 bg-muted rounded-lg text-center">
+              <p className="text-2xl font-bold">{routeInfo.duration}</p>
+              <p className="text-xs text-muted-foreground mt-1">Tempo estimado</p>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// 4. Rota de Entrega com Múltiplas Paradas
+export function MultiStopDeliveryRoute() {
+  const [routeInfo, setRouteInfo] = useState<{ distance: string; duration: string } | null>(null);
+
+  const deliveryRoute = {
+    origin: { lat: -23.5505, lng: -46.6333 }, // Base
+    destination: { lat: -23.5505, lng: -46.6333 }, // Retorno à base
+    waypoints: [
+      { lat: -23.5558, lng: -46.6500 }, // Cliente 1
+      { lat: -23.5475, lng: -46.6361 }, // Cliente 2
+      { lat: -23.5613, lng: -46.6563 }, // Cliente 3
+    ]
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Rota de Entrega - Múltiplas Paradas</CardTitle>
+            <CardDescription>
+              Otimize sua rota de entregas com paradas intermediárias
+            </CardDescription>
+          </div>
+          <Badge variant="secondary">
+            {deliveryRoute.waypoints.length} paradas
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <RouteMap
+          origin={deliveryRoute.origin}
+          destination={deliveryRoute.destination}
+          waypoints={deliveryRoute.waypoints}
+          travelMode="DRIVING"
+          height="450px"
+          onRouteCalculated={(distance, duration) => {
+            setRouteInfo({ distance, duration });
+          }}
+        />
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between p-3 bg-blue-50 dark:bg-blue-950 rounded-lg border border-blue-200 dark:border-blue-800">
+            <div className="flex items-center gap-2">
+              <MapPin className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+              <span className="text-sm text-blue-900 dark:text-blue-100">
+                <strong>Base Central</strong> → 3 entregas → Retorno
+              </span>
+            </div>
+          </div>
+
+          {routeInfo && (
+            <div className="grid grid-cols-2 gap-3">
+              <div className="p-3 bg-muted rounded-lg">
+                <p className="text-sm text-muted-foreground mb-1">Distância Total</p>
+                <p className="text-xl font-semibold">{routeInfo.distance}</p>
+              </div>
+              <div className="p-3 bg-muted rounded-lg">
+                <p className="text-sm text-muted-foreground mb-1">Tempo Total</p>
+                <p className="text-xl font-semibold">{routeInfo.duration}</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 5. Showcase Completo com Tabs
+export function RouteMapShowcase() {
+  return (
+    <div className="space-y-6 max-w-6xl mx-auto">
+      <div className="space-y-2">
+        <h2 className="text-2xl">Route Maps</h2>
+        <p className="text-muted-foreground">
+          Exemplos de mapas com rotas calculadas automaticamente usando Google Maps Directions API
+        </p>
+      </div>
+
+      <Tabs defaultValue="delivery" className="space-y-4">
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="delivery">
+            <Car className="w-4 h-4 mr-2" />
+            Entrega
+          </TabsTrigger>
+          <TabsTrigger value="tourist">
+            <PersonStanding className="w-4 h-4 mr-2" />
+            Turismo
+          </TabsTrigger>
+          <TabsTrigger value="transport">
+            <Bike className="w-4 h-4 mr-2" />
+            Comparação
+          </TabsTrigger>
+          <TabsTrigger value="multistop">
+            <MapPin className="w-4 h-4 mr-2" />
+            Multi-paradas
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="delivery">
+          <DeliveryRouteMap />
+        </TabsContent>
+
+        <TabsContent value="tourist">
+          <TouristRouteMap />
+        </TabsContent>
+
+        <TabsContent value="transport">
+          <TransportModeComparison />
+        </TabsContent>
+
+        <TabsContent value="multistop">
+          <MultiStopDeliveryRoute />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/components/examples/SimpleFilterableMap.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Checkbox } from '../ui/checkbox';
+import { Label } from '../ui/label';
+
+/**
+ * Exemplo simples de mapa com marcadores de EMOJI e filtro
+ * Demonstra uso de emojis com fundo branco para contraste
+ * IMPORTANTE: Marcadores com emojis usam fundo branco (#FFFFFF)
+ */
+
+// Dados de exemplo com emojis e fundo branco
+const locations = [
+  {
+    position: { lat: -23.5505, lng: -46.6333 },
+    label: '🍕',
+    title: 'Pizzaria do Bairro',
+    info: 'Melhor pizza artesanal',
+    color: '#FFFFFF', // Fundo branco para emojis
+    iconColor: '#000000', // Texto preto para emojis (melhor contraste)
+    category: 'food',
+  },
+  {
+    position: { lat: -23.5485, lng: -46.6350 },
+    label: '🍣',
+    title: 'Sushi Premium',
+    info: 'Culinária japonesa autêntica',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'food',
+  },
+  {
+    position: { lat: -23.5475, lng: -46.6361 },
+    label: '🏨',
+    title: 'Hotel Luxo',
+    info: '5 estrelas com spa',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'hotel',
+  },
+  {
+    position: { lat: -23.5530, lng: -46.6340 },
+    label: '🏩',
+    title: 'Hotel Boutique',
+    info: 'Design contemporâneo',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'hotel',
+  },
+  {
+    position: { lat: -23.5613, lng: -46.6563 },
+    label: '🌳',
+    title: 'Parque Ibirapuera',
+    info: 'Maior parque da cidade',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'attraction',
+  },
+  {
+    position: { lat: -23.5558, lng: -46.6396 },
+    label: '🎨',
+    title: 'MASP',
+    info: 'Museu de Arte',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'attraction',
+  },
+  {
+    position: { lat: -23.5465, lng: -46.6400 },
+    label: '🛍️',
+    title: 'Shopping Center',
+    info: 'Mais de 300 lojas',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'shopping',
+  },
+  {
+    position: { lat: -23.5495, lng: -46.6345 },
+    label: '☕',
+    title: 'Café Artesanal',
+    info: 'Café especial e brunch',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'cafe',
+  },
+];
+
+export function SimpleFilterableMap() {
+  const [filters, setFilters] = useState({
+    food: true,
+    hotel: true,
+    attraction: true,
+    shopping: true,
+    cafe: true,
+  });
+
+  // Filtrar marcadores
+  const filteredMarkers = locations
+    .filter(loc => filters[loc.category as keyof typeof filters])
+    .map(loc => ({
+      position: loc.position,
+      label: loc.label,
+      title: loc.title,
+      info: loc.info,
+      customColor: loc.color, // Sempre branco para emojis
+      iconColor: loc.iconColor, // Texto preto para emojis
+    }));
+
+  const toggleFilter = (category: keyof typeof filters) => {
+    setFilters(prev => ({ ...prev, [category]: !prev[category] }));
+  };
+
+  const filterConfig = [
+    { id: 'food', label: 'Restaurantes', emoji: '🍕', color: 'var(--destructive)', count: locations.filter(l => l.category === 'food').length },
+    { id: 'hotel', label: 'Hotéis', emoji: '🏨', color: 'var(--info)', count: locations.filter(l => l.category === 'hotel').length },
+    { id: 'attraction', label: 'Atrações', emoji: '🌳', color: 'var(--success)', count: locations.filter(l => l.category === 'attraction').length },
+    { id: 'shopping', label: 'Compras', emoji: '🛍️', color: 'var(--warning)', count: locations.filter(l => l.category === 'shopping').length },
+    { id: 'cafe', label: 'Cafés', emoji: '☕', color: 'var(--primary)', count: locations.filter(l => l.category === 'cafe').length },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle>Mapa com Emojis</CardTitle>
+          <Badge variant="secondary">
+            {filteredMarkers.length} de {locations.length} locais
+          </Badge>
+        </div>
+        <CardDescription>
+          Marcadores com emojis em fundo branco - Selecione as categorias para visualizar
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Filtros Compactos com Checkboxes */}
+        <div className="flex flex-wrap gap-4 p-3 rounded-lg border bg-muted">
+          {filterConfig.map(filter => (
+            <div key={filter.id} className="flex items-center space-x-2">
+              <Checkbox
+                id={filter.id}
+                checked={filters[filter.id as keyof typeof filters]}
+                onCheckedChange={() => toggleFilter(filter.id as keyof typeof filters)}
+              />
+              <Label htmlFor={filter.id} className="flex items-center gap-2 cursor-pointer text-sm">
+                <span className="text-base">{filter.emoji}</span>
+                <span>{filter.label}</span>
+                <Badge variant="outline" className="text-xs h-4 px-1">
+                  {filter.count}
+                </Badge>
+              </Label>
+            </div>
+          ))}
+        </div>
+
+        {/* Mapa */}
+        <Map
+          center={{ lat: -23.5505, lng: -46.6333 }}
+          zoom={14}
+          markers={filteredMarkers}
+          height="450px"
+          zoomControl={true}
+          fullscreenControl={true}
+        />
+
+        {/* Legenda */}
+        <div className="flex flex-wrap gap-3 justify-center pt-3 border-t border-border">
+          {filterConfig.map(filter => (
+            <div
+              key={filter.id}
+              className="flex items-center gap-2 px-3 py-1 rounded-lg"
+              style={{
+                backgroundColor: filters[filter.id as keyof typeof filters]
+                  ? `color-mix(in srgb, ${filter.color}, transparent 85%)`
+                  : 'var(--muted)',
+                opacity: filters[filter.id as keyof typeof filters] ? 1 : 0.5,
+              }}
+            >
+              <div
+                className="w-3 h-3 rounded-full"
+                style={{ backgroundColor: filter.color }}
+              />
+              <span className="text-base">{filter.emoji}</span>
+              <span className="text-sm">{filter.label}</span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/components/examples/index.ts

@@ -0,0 +1,52 @@
+/**
+ * Map Examples - Index
+ * 
+ * Exportação centralizada de todos os exemplos de Map
+ */
+
+// Exemplos básicos
+export {
+  StoreDeliveryMap,
+  FavoritePlacesMap,
+  CompanyOfficesMap,
+  ServiceZoneMap,
+  CompactMapsGrid
+} from './MapExamples';
+
+// Exemplos de rotas
+export {
+  DeliveryRouteMap,
+  TouristRouteMap,
+  TransportModeComparison,
+  MultiStopDeliveryRoute,
+  RouteMapShowcase
+} from './RouteMapExamples';
+
+// Exemplos avançados
+export {
+  LocationPickerExample,
+  DeliveryAddressSelector
+} from './LocationPickerExample';
+
+// Exemplo com filtros
+export {
+  FilterableMapExample,
+  markerGroups,
+  type MarkerGroupId
+} from './FilterableMapExample';
+
+// Exemplo simples com filtros
+export { SimpleFilterableMap } from './SimpleFilterableMap';
+
+// Showcase completo
+export { MapShowcase } from './MapShowcase';
+
+/**
+ * Uso:
+ * 
+ * import { StoreDeliveryMap, LocationPickerExample } from '@/components/examples';
+ * 
+ * ou
+ * 
+ * import { StoreDeliveryMap } from '@/components/examples/MapExamples';
+ */

package/components/figma/ImageWithFallback.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false)
+
+  const handleError = () => {
+    setDidError(true)
+  }
+
+  const { src, alt, style, className, ...rest } = props
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  )
+}

package/components/index.ts

@@ -0,0 +1,44 @@
+// ============================================================================
+// Xertica Assistant Exports
+// ============================================================================
+
+export { XerticaAssistant } from './ui/xertica-assistant';
+export type { 
+  XerticaAssistantProps,
+  Message,
+  Conversation,
+  Suggestion,
+  SearchResult,
+  SearchSource,
+  SearchCommand,
+  MessageType,
+  AttachmentType,
+  SearchResultType,
+  AssistantMode,
+  AssistantTab
+} from './ui/xertica-assistant';
+
+// ============================================================================
+// Page Components
+// ============================================================================
+
+export { TemplatePage } from './TemplatePage';
+
+// UI Components - All available via /components/ui/index.ts
+export * from './ui';
+
+// Utility Components (used by XerticaAssistant)
+export { CodeBlock } from './CodeBlock';
+export { MarkdownMessage } from './MarkdownMessage';
+export { ModernChatInput } from './ModernChatInput';
+export { FormattedDocument } from './FormattedDocument';
+
+// Branding
+export { XerticaLogo } from './XerticaLogo';
+export { XerticaXLogo } from './XerticaXLogo';
+export { XerticaOrbe } from './XerticaOrbe';
+
+// Layout
+export { Sidebar } from './Sidebar';
+export { ThemeToggle } from './ThemeToggle';
+export { LanguageSelector } from './LanguageSelector';