xertica-ui 1.0.0

package/components/ui/google-maps-loader.tsx

@@ -0,0 +1,379 @@
+'use client';
+
+import React, { createContext, useContext, ReactNode, useState, useEffect, useRef } from 'react';
+import { GOOGLE_MAPS_LIBRARIES, GOOGLE_MAPS_ID } from './map-config';
+
+interface GoogleMapsContextType {
+  isLoaded: boolean;
+  loadError: Error | undefined;
+}
+
+const GoogleMapsContext = createContext<GoogleMapsContextType>({
+  isLoaded: false,
+  loadError: undefined,
+});
+
+// Singleton global para prevenir múltiplos carregamentos
+declare global {
+  interface Window {
+    __XERTICA_GOOGLE_MAPS_LOADER__?: {
+      isLoaded: boolean;
+      loadError: Error | undefined;
+      listeners: Set<(state: GoogleMapsContextType) => void>;
+      scriptElement?: HTMLScriptElement;
+    };
+  }
+}
+
+/**
+ * Função auxiliar para ler a API key do localStorage de forma síncrona
+ */
+function getInitialApiKey(): string | undefined {
+  if (typeof window === 'undefined') return undefined;
+  
+  const savedKey = localStorage.getItem('xertica-googlemaps-api-key');
+  
+  if (savedKey && savedKey.trim().length > 0) {
+    return savedKey;
+  }
+  
+  return undefined;
+}
+
+/**
+ * Remove o script existente do Google Maps
+ */
+function removeExistingScript(): void {
+  if (typeof window === 'undefined') return;
+  
+  // Remover callback global se existir
+  if ((window as any).__googleMapsCallback) {
+    delete (window as any).__googleMapsCallback;
+  }
+  
+  // Remover script existente
+  const existingScript = document.querySelector(`script[src*=\"maps.googleapis.com/maps/api/js\"]`);
+  if (existingScript) {
+    existingScript.remove();
+  }
+  
+  // Limpar Google Maps do window
+  if ((window as any).google?.maps) {
+    delete (window as any).google.maps;
+  }
+  
+  // Limpar singleton para permitir novo carregamento
+  if (window.__XERTICA_GOOGLE_MAPS_LOADER__) {
+    window.__XERTICA_GOOGLE_MAPS_LOADER__.isLoaded = false;
+    window.__XERTICA_GOOGLE_MAPS_LOADER__.loadError = undefined;
+    window.__XERTICA_GOOGLE_MAPS_LOADER__.scriptElement = undefined;
+  }
+}
+
+/**
+ * Verifica se o Google Maps já está carregado
+ */
+function isGoogleMapsAlreadyLoaded(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.google?.maps?.version !== undefined;
+}
+
+/**
+ * Verifica se a biblioteca marker (AdvancedMarkerElement) está disponível
+ */
+function isMarkerLibraryLoaded(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.google?.maps?.marker?.AdvancedMarkerElement !== undefined;
+}
+
+/**
+ * Carrega o script do Google Maps manualmente
+ */
+function loadGoogleMapsScript(apiKey?: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (typeof window === 'undefined') {
+      reject(new Error('Window is undefined'));
+      return;
+    }
+
+    // Validar API key antes de carregar
+    if (!apiKey || apiKey.length < 10) {
+      reject(new Error('Invalid or missing Google Maps API key. Please configure your API key in Settings.'));
+      return;
+    }
+
+    // Se já está carregado com a mesma key, resolver imediatamente
+    if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
+      // Verificar se a API key atual é a mesma
+      const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`) as HTMLScriptElement;
+      if (existingScript && existingScript.src.includes(`key=${apiKey}`)) {
+        resolve();
+        return;
+      }
+    }
+
+    // Verificar se o script já existe com KEY DIFERENTE
+    const existing = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`) as HTMLScriptElement;
+    if (existing) {
+      // Se existe mas com chave diferente, precisamos recarregar a página
+      if (!existing.src.includes(`key=${apiKey}`)) {
+        console.warn('[GoogleMapsLoader] API key changed, page reload required');
+        reject(new Error('API key changed. Please reload the page to apply changes.'));
+        return;
+      }
+      
+      // Aguardar o script carregar
+      if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
+        resolve();
+      } else {
+        existing.addEventListener('load', () => {
+          // Aguardar um pouco para garantir que todas as bibliotecas foram carregadas
+          setTimeout(() => {
+            if (isMarkerLibraryLoaded()) {
+              resolve();
+            } else {
+              reject(new Error('Marker library failed to load'));
+            }
+          }, 100);
+        });
+        existing.addEventListener('error', () => reject(new Error('Failed to load Google Maps')));
+      }
+      return;
+    }
+
+    // Criar novo script
+    const script = document.createElement('script');
+    const params = new URLSearchParams({
+      key: apiKey, // SEMPRE incluir a API key
+      callback: '__googleMapsCallback',
+      libraries: GOOGLE_MAPS_LIBRARIES.join(','),
+      v: 'quarterly', // Usar 'quarterly' para versão estável ao invés de 'weekly'
+      loading: 'async',
+    });
+
+    script.src = `https://maps.googleapis.com/maps/api/js?${params.toString()}`;
+    script.async = true;
+    script.defer = true;
+    script.id = GOOGLE_MAPS_ID;
+
+    // Callback global
+    (window as any).__googleMapsCallback = () => {
+      delete (window as any).__googleMapsCallback;
+      // Aguardar um pouco para garantir que todas as bibliotecas foram carregadas
+      setTimeout(() => {
+        if (isMarkerLibraryLoaded()) {
+          resolve();
+        } else {
+          reject(new Error('Marker library failed to load'));
+        }
+      }, 100);
+    };
+
+    script.addEventListener('error', () => {
+      delete (window as any).__googleMapsCallback;
+      reject(new Error('Failed to load Google Maps script. Please check your API key and ensure Maps JavaScript API is enabled.'));
+    });
+
+    document.head.appendChild(script);
+    
+    // Salvar referência ao script
+    const singleton = getOrCreateSingleton();
+    if (singleton) {
+      singleton.scriptElement = script;
+    }
+  });
+}
+
+/**
+ * Inicializa o singleton global
+ */
+function getOrCreateSingleton() {
+  if (typeof window === 'undefined') return null;
+  
+  if (!window.__XERTICA_GOOGLE_MAPS_LOADER__) {
+    const isPreloaded = isGoogleMapsAlreadyLoaded();
+    
+    window.__XERTICA_GOOGLE_MAPS_LOADER__ = {
+      isLoaded: isPreloaded,
+      loadError: undefined,
+      listeners: new Set(),
+    };
+  }
+  
+  return window.__XERTICA_GOOGLE_MAPS_LOADER__;
+}
+
+/**
+ * Atualiza o estado do singleton e notifica listeners
+ */
+function updateSingleton(state: Partial<GoogleMapsContextType>) {
+  const singleton = getOrCreateSingleton();
+  if (!singleton) return;
+  
+  if (state.isLoaded !== undefined) singleton.isLoaded = state.isLoaded;
+  if (state.loadError !== undefined) singleton.loadError = state.loadError;
+  
+  const newState = { isLoaded: singleton.isLoaded, loadError: singleton.loadError };
+  singleton.listeners.forEach(listener => listener(newState));
+}
+
+/**
+ * Componente que gerencia os listeners do singleton
+ */
+const SingletonLoaderWrapper = ({ children }: { children: ReactNode }) => {
+  const [state, setState] = useState<GoogleMapsContextType>(() => {
+    const singleton = getOrCreateSingleton();
+    if (!singleton) return { isLoaded: false, loadError: undefined };
+    
+    return {
+      isLoaded: singleton.isLoaded,
+      loadError: singleton.loadError,
+    };
+  });
+  
+  useEffect(() => {
+    const singleton = getOrCreateSingleton();
+    if (!singleton) return;
+    
+    const listener = (newState: GoogleMapsContextType) => {
+      setState(newState);
+    };
+    
+    singleton.listeners.add(listener);
+    
+    // Sincronizar estado inicial
+    listener({ isLoaded: singleton.isLoaded, loadError: singleton.loadError });
+    
+    return () => {
+      singleton.listeners.delete(listener);
+    };
+  }, []);
+
+  return (
+    <GoogleMapsContext.Provider value={state}>
+      {children}
+    </GoogleMapsContext.Provider>
+  );
+};
+
+/**
+ * Componente que carrega o Google Maps manualmente
+ */
+const LoaderInitializer = () => {
+  const hasInitializedRef = useRef(false);
+
+  useEffect(() => {
+    // Prevenir múltiplas execuções
+    if (hasInitializedRef.current) {
+      return;
+    }
+
+    const singleton = getOrCreateSingleton();
+    if (!singleton) return;
+
+    // Se já está carregado, atualizar estado
+    if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
+      updateSingleton({ isLoaded: true, loadError: undefined });
+      hasInitializedRef.current = true;
+      return;
+    }
+
+    hasInitializedRef.current = true;
+
+    const apiKey = getInitialApiKey();
+    
+    // Se não houver API key, apenas marcar como não carregado (sem erro)
+    if (!apiKey) {
+      updateSingleton({ 
+        isLoaded: false, 
+        loadError: undefined // Não definir erro quando não há API key
+      });
+      return;
+    }
+    
+    loadGoogleMapsScript(apiKey)
+      .then(() => {
+        updateSingleton({ isLoaded: true, loadError: undefined });
+      })
+      .catch((error) => {
+        updateSingleton({ isLoaded: false, loadError: error });
+      });
+  }, []);
+
+  return null;
+};
+
+/**
+ * GoogleMapsLoaderProvider
+ * 
+ * Provider global que gerencia o carregamento da API do Google Maps.
+ * Usa carregamento manual do script para evitar conflitos com custom elements.
+ */
+export const GoogleMapsLoaderProvider = ({ children }: { children: ReactNode }) => {
+  const [shouldInitialize] = useState(() => {
+    const singleton = getOrCreateSingleton();
+    if (!singleton) return false;
+    
+    // Se já está carregado, não inicializar
+    if (singleton.isLoaded || isGoogleMapsAlreadyLoaded() || isMarkerLibraryLoaded()) {
+      singleton.isLoaded = true;
+      return false;
+    }
+    
+    return true;
+  });
+
+  return (
+    <>
+      {shouldInitialize && <LoaderInitializer />}
+      <SingletonLoaderWrapper>{children}</SingletonLoaderWrapper>
+    </>
+  );
+};
+
+export const useGoogleMapsLoader = () => useContext(GoogleMapsContext);
+
+/**
+ * Recarrega o Google Maps com uma nova API key
+ */
+export function reloadGoogleMaps(newApiKey: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (typeof window === 'undefined') {
+      reject(new Error('Window is undefined'));
+      return;
+    }
+
+    // Validar API key
+    if (!newApiKey || newApiKey.length < 10) {
+      reject(new Error('Invalid or missing Google Maps API key'));
+      return;
+    }
+
+    // Verificar se a key atual é a mesma
+    const existingScript = document.querySelector(`script[src*=\"maps.googleapis.com/maps/api/js\"]`) as HTMLScriptElement;
+    if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
+      // Mesma key, apenas resolver
+      if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
+        resolve();
+        return;
+      }
+    }
+
+    // Remover script antigo
+    removeExistingScript();
+
+    // Atualizar singleton
+    updateSingleton({ isLoaded: false, loadError: undefined });
+
+    // Carregar novo script
+    loadGoogleMapsScript(newApiKey)
+      .then(() => {
+        updateSingleton({ isLoaded: true, loadError: undefined });
+        resolve();
+      })
+      .catch((error) => {
+        updateSingleton({ isLoaded: false, loadError: error });
+        reject(error);
+      });
+  });
+}

package/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "./utils";
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  );
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/components/ui/index.ts

@@ -0,0 +1,242 @@
+/**
+ * Xertica UI - Design System Components
+ * 
+ * A comprehensive React component library built with Tailwind CSS v4.0
+ * following the CLI-first architecture (shadcn model).
+ * 
+ * @package xertica-ui
+ */
+
+// Utilities
+export { cn } from "./utils";
+
+// Layout & Structure
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from "./card";
+export { Separator } from "./separator";
+export { AspectRatio } from "./aspect-ratio";
+export { Resizable, ResizableHandle, ResizablePanel } from "./resizable";
+
+// Navigation
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "./breadcrumb";
+export { 
+  NavigationMenu, 
+  NavigationMenuList, 
+  NavigationMenuItem, 
+  NavigationMenuContent, 
+  NavigationMenuTrigger, 
+  NavigationMenuLink, 
+  NavigationMenuIndicator, 
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle 
+} from "./navigation-menu";
+export { 
+  Sidebar, 
+  SidebarContent, 
+  SidebarFooter, 
+  SidebarGroup, 
+  SidebarGroupAction, 
+  SidebarGroupContent, 
+  SidebarGroupLabel, 
+  SidebarHeader, 
+  SidebarInput, 
+  SidebarInset, 
+  SidebarMenu, 
+  SidebarMenuAction, 
+  SidebarMenuBadge, 
+  SidebarMenuButton, 
+  SidebarMenuItem, 
+  SidebarMenuSkeleton, 
+  SidebarMenuSub, 
+  SidebarMenuSubButton, 
+  SidebarMenuSubItem, 
+  SidebarProvider, 
+  SidebarRail, 
+  SidebarSeparator, 
+  SidebarTrigger, 
+  useSidebar 
+} from "./sidebar";
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination";
+
+// Buttons & Interactions
+export { Button, buttonVariants } from "./button";
+export { Toggle, toggleVariants } from "./toggle";
+export { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+// Forms & Inputs
+export { Input } from "./input";
+export { Textarea } from "./textarea";
+export { Label } from "./label";
+export { Checkbox } from "./checkbox";
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export { Switch } from "./switch";
+export { Slider } from "./slider";
+export { 
+  Select, 
+  SelectGroup, 
+  SelectValue, 
+  SelectTrigger, 
+  SelectContent, 
+  SelectLabel, 
+  SelectItem, 
+  SelectSeparator, 
+  SelectScrollUpButton, 
+  SelectScrollDownButton 
+} from "./select";
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp";
+export { 
+  Form, 
+  FormItem, 
+  FormLabel, 
+  FormControl, 
+  FormDescription, 
+  FormMessage, 
+  FormField, 
+  useFormField 
+} from "./form";
+export { Calendar } from "./calendar";
+
+// Overlays & Dialogs
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./dialog";
+export { 
+  AlertDialog, 
+  AlertDialogAction, 
+  AlertDialogCancel, 
+  AlertDialogContent, 
+  AlertDialogDescription, 
+  AlertDialogFooter, 
+  AlertDialogHeader, 
+  AlertDialogOverlay, 
+  AlertDialogPortal, 
+  AlertDialogTitle, 
+  AlertDialogTrigger 
+} from "./alert-dialog";
+export { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./sheet";
+export { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./drawer";
+export { Popover, PopoverContent, PopoverTrigger } from "./popover";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+export { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card";
+
+// Menus
+export { 
+  DropdownMenu, 
+  DropdownMenuPortal, 
+  DropdownMenuTrigger, 
+  DropdownMenuContent, 
+  DropdownMenuGroup, 
+  DropdownMenuLabel, 
+  DropdownMenuItem, 
+  DropdownMenuCheckboxItem, 
+  DropdownMenuRadioGroup, 
+  DropdownMenuRadioItem, 
+  DropdownMenuSeparator, 
+  DropdownMenuShortcut, 
+  DropdownMenuSub, 
+  DropdownMenuSubTrigger, 
+  DropdownMenuSubContent 
+} from "./dropdown-menu";
+export { 
+  ContextMenu, 
+  ContextMenuTrigger, 
+  ContextMenuContent, 
+  ContextMenuItem, 
+  ContextMenuCheckboxItem, 
+  ContextMenuRadioItem, 
+  ContextMenuLabel, 
+  ContextMenuSeparator, 
+  ContextMenuShortcut, 
+  ContextMenuGroup, 
+  ContextMenuPortal, 
+  ContextMenuSub, 
+  ContextMenuSubContent, 
+  ContextMenuSubTrigger, 
+  ContextMenuRadioGroup 
+} from "./context-menu";
+export { 
+  Menubar, 
+  MenubarMenu, 
+  MenubarTrigger, 
+  MenubarContent, 
+  MenubarItem, 
+  MenubarSeparator, 
+  MenubarLabel, 
+  MenubarCheckboxItem, 
+  MenubarRadioGroup, 
+  MenubarRadioItem, 
+  MenubarPortal, 
+  MenubarSubContent, 
+  MenubarSubTrigger, 
+  MenubarGroup, 
+  MenubarSub, 
+  MenubarShortcut 
+} from "./menubar";
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command";
+
+// Feedback & Notifications
+export { Alert, AlertTitle, AlertDescription } from "./alert";
+export { Badge, badgeVariants } from "./badge";
+export { Progress } from "./progress";
+export { Skeleton } from "./skeleton";
+export { Toaster } from "./sonner";
+export { NotificationBadge } from "./notification-badge";
+export type { NotificationBadgeProps } from "./notification-badge";
+
+// Data Display
+export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./table";
+export { 
+  ChartContainer, 
+  ChartTooltip, 
+  ChartTooltipContent, 
+  ChartLegend, 
+  ChartLegendContent, 
+  ChartStyle 
+} from "./chart";
+export { Empty } from "./empty";
+export { StatsCard } from "./stats-card";
+export type { StatsCardProps } from "./stats-card";
+export { 
+  Timeline, 
+  TimelineItem, 
+  TimelineDot, 
+  TimelineContent, 
+  TimelineHeading, 
+  TimelineTime, 
+  TimelineDescription 
+} from "./timeline";
+export { TreeView } from "./tree-view";
+export type { TreeViewProps, TreeNode } from "./tree-view";
+
+// Utility Components
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+export { ScrollArea, ScrollBar } from "./scroll-area";
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi } from "./carousel";
+export { Stepper, Step, useStepper } from "./stepper";
+export { FileUpload } from "./file-upload";
+export type { FileUploadProps } from "./file-upload";
+export { Rating } from "./rating";
+export type { RatingProps } from "./rating";
+export { Search } from "./search";
+export type { SearchProps } from "./search";
+
+// Maps
+export { Map } from "./map";
+export { RouteMap } from "./route-map";
+export type { MapProps } from "./map";
+export type { RouteMapProps } from "./route-map";
+export type { MapLayerType, MapLayersConfig } from "./map-layers";
+
+// Xertica Custom Components
+export { XerticaAssistant } from "./xertica-assistant";
+export type { MessageType, AttachmentType } from "./xertica-assistant";
+
+// Page Components
+export { PageHeader, PageHeaderDescription, PageHeaderHeading } from "./page-header";
+export type { BreadcrumbItem as PageHeaderBreadcrumbItem, Language as PageHeaderLanguage, PageHeaderProps } from "./page-header";
+
+// Chart Types
+export type { ChartConfig } from "./chart";
+
+// Hooks
+export { useMobile, useIsMobile } from "./use-mobile";