xertica-ui 1.0.0 → 1.1.0

package/bin/cli.ts

@@ -96,6 +96,11 @@ program
                 }
             }
 
+            // Create .env.example
+            const envExampleContent = `VITE_GOOGLE_MAPS_API_KEY=
+VITE_GEMINI_API_KEY=`;
+            await fs.writeFile(path.join(targetDir, '.env.example'), envExampleContent);
+
             // Handle App.tsx specifically
             const pages = response.pages || [];
             const hasLogin = pages.includes('login');
@@ -190,4 +195,80 @@ export default function App() {
         }
     });
 
+program
+    .command('update')
+    .description('Update components in your project')
+    .argument('[components...]', 'Components to update')
+    .option('-a, --all', 'Update all installed components')
+    .action(async (components, options) => {
+        const targetDir = process.cwd();
+        const sourceRoot = path.resolve(__dirname, '../');
+        const uiComponentsDir = path.join(targetDir, 'components/ui');
+        const sourceUiDir = path.join(sourceRoot, 'components/ui');
+
+        if (!await fs.pathExists(uiComponentsDir)) {
+            console.error(chalk.red('Components directory not found. Is this a Xertica UI project?'));
+            return;
+        }
+
+        if (!await fs.pathExists(sourceUiDir)) {
+            console.error(chalk.red('Source components not found. Try reinstalling the CLI package.'));
+            return;
+        }
+
+        let componentsToUpdate: string[] = [];
+
+        if (options.all) {
+            const files = await fs.readdir(uiComponentsDir);
+            componentsToUpdate = files.filter(f => f.endsWith('.tsx'));
+        } else if (components && components.length > 0) {
+            componentsToUpdate = components.map((c: string) => c.endsWith('.tsx') ? c : `${c}.tsx`);
+        } else {
+            // Interactive mode
+            const files = await fs.readdir(uiComponentsDir);
+            const installedComponents = files.filter(f => f.endsWith('.tsx'));
+
+            if (installedComponents.length === 0) {
+                console.log(chalk.yellow('No components found to update.'));
+                return;
+            }
+
+            const response = await prompts({
+                type: 'multiselect',
+                name: 'selected',
+                message: 'Select components to update',
+                choices: installedComponents.map(f => ({ title: f, value: f })),
+                min: 1
+            });
+
+            if (!response.selected) return;
+            componentsToUpdate = response.selected;
+        }
+
+        const spinner = ora('Updating components...').start();
+
+        try {
+            let updatedCount = 0;
+            for (const component of componentsToUpdate) {
+                const srcPath = path.join(sourceUiDir, component);
+                const destPath = path.join(uiComponentsDir, component);
+
+                if (await fs.pathExists(srcPath)) {
+                    await fs.copy(srcPath, destPath);
+                    updatedCount++;
+                } else {
+                    spinner.warn(`Component ${component} not found in source.`);
+                }
+            }
+            if (updatedCount > 0) {
+                spinner.succeed(`Successfully updated ${updatedCount} components!`);
+            } else {
+                spinner.info('No components updated.');
+            }
+        } catch (error) {
+            spinner.fail('Failed to update components');
+            console.error(error);
+        }
+    });
+
 program.parse();

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

@@ -29,14 +29,19 @@ declare global {
  * Função auxiliar para ler a API key do localStorage de forma síncrona
  */
 function getInitialApiKey(): string | undefined {
+  // 1. Check Environment Variable (Vite)
+  if (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) {
+    return import.meta.env.VITE_GOOGLE_MAPS_API_KEY as string;
+  }
+
   if (typeof window === 'undefined') return undefined;
-  
+
   const savedKey = localStorage.getItem('xertica-googlemaps-api-key');
-  
+
   if (savedKey && savedKey.trim().length > 0) {
     return savedKey;
   }
-  
+
   return undefined;
 }
 
@@ -45,23 +50,23 @@ function getInitialApiKey(): string | undefined {
  */
 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;
@@ -121,7 +126,7 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
         reject(new Error('API key changed. Please reload the page to apply changes.'));
         return;
       }
-      
+
       // Aguardar o script carregar
       if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
         resolve();
@@ -175,7 +180,7 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
     });
 
     document.head.appendChild(script);
-    
+
     // Salvar referência ao script
     const singleton = getOrCreateSingleton();
     if (singleton) {
@@ -189,17 +194,17 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
  */
 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__;
 }
 
@@ -209,10 +214,10 @@ function getOrCreateSingleton() {
 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));
 }
@@ -224,26 +229,26 @@ 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);
     };
@@ -281,16 +286,16 @@ const LoaderInitializer = () => {
     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, 
+      updateSingleton({
+        isLoaded: false,
         loadError: undefined // Não definir erro quando não há API key
       });
       return;
     }
-    
+
     loadGoogleMapsScript(apiKey)
       .then(() => {
         updateSingleton({ isLoaded: true, loadError: undefined });
@@ -313,13 +318,13 @@ 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;
   });
 

package/components/ui/map.tsx

@@ -112,7 +112,7 @@ const MapContent = React.forwardRef<HTMLDivElement, MapProps & { apiKey: string
       });
 
       mapRef.current = map;
-      
+
       if (onMapLoad) {
         onMapLoad(map);
       }
@@ -147,7 +147,7 @@ const MapContent = React.forwardRef<HTMLDivElement, MapProps & { apiKey: string
 
         const iconContainer = document.createElement('div');
         iconContainer.className = 'flex items-center justify-center rotate-45';
-        
+
         if (markerData.iconSvg) {
           const div = document.createElement('div');
           div.innerHTML = markerData.iconSvg;
@@ -367,18 +367,18 @@ MapContent.displayName = "MapContent";
 
 export const Map = React.forwardRef<HTMLDivElement, MapProps>(
   (props, ref) => {
-    const effectiveApiKey = props.apiKey || "";
+    const effectiveApiKey = props.apiKey || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) || "";
 
-    const isValidKey = effectiveApiKey && 
-                       effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && 
-                       effectiveApiKey.startsWith("AIza");
+    const isValidKey = effectiveApiKey &&
+      effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" &&
+      effectiveApiKey.startsWith("AIza");
 
     if (!isValidKey) {
-      const { 
-        center, zoom, markers, circle, polygon, height, apiKey, 
-        mapContainerClassName, disableDefaultUI, zoomControl, 
-        streetViewControl, mapTypeControl, fullscreenControl, 
-        gestureHandling, layers, ...divProps 
+      const {
+        center, zoom, markers, circle, polygon, height, apiKey,
+        mapContainerClassName, disableDefaultUI, zoomControl,
+        streetViewControl, mapTypeControl, fullscreenControl,
+        gestureHandling, layers, ...divProps
       } = props;
 
       return (

package/components/ui/route-map.tsx

@@ -91,7 +91,7 @@ const RouteMapContent = React.forwardRef<HTMLDivElement, RouteMapProps & { apiKe
     useEffect(() => {
       const map = mapRef.current;
       const renderer = directionsRendererRef.current;
-      
+
       if (!map || !renderer || !isLoaded || isCalculatingRef.current) return;
       if (!origin || !destination) return;
 
@@ -111,28 +111,28 @@ const RouteMapContent = React.forwardRef<HTMLDivElement, RouteMapProps & { apiKe
 
       directionsService.route(request, (result, status) => {
         isCalculatingRef.current = false;
-        
+
         if (status === 'OK' && result) {
           renderer.setDirections(result);
-          
+
           // Calculate total distance and duration
           const route = result.routes[0];
           if (route?.legs?.length > 0 && onRouteCalculated) {
             let totalDistance = 0;
             let totalDuration = 0;
-            
+
             route.legs.forEach(leg => {
               if (leg.distance) totalDistance += leg.distance.value;
               if (leg.duration) totalDuration += leg.duration.value;
             });
-            
+
             const distanceKm = (totalDistance / 1000).toFixed(1);
             const distanceText = `${distanceKm} km`;
-            
+
             const hours = Math.floor(totalDuration / 3600);
             const minutes = Math.floor((totalDuration % 3600) / 60);
             const durationText = hours > 0 ? `${hours}h ${minutes}min` : `${minutes} min`;
-            
+
             onRouteCalculated(distanceText, durationText);
           }
         }
@@ -201,18 +201,18 @@ RouteMapContent.displayName = "RouteMapContent";
 
 export const RouteMap = React.forwardRef<HTMLDivElement, RouteMapProps>(
   (props, ref) => {
-    const effectiveApiKey = props.apiKey || "";
+    const effectiveApiKey = props.apiKey || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) || "";
 
-    const isValidKey = effectiveApiKey && 
-                       effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && 
-                       effectiveApiKey.startsWith("AIza");
+    const isValidKey = effectiveApiKey &&
+      effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" &&
+      effectiveApiKey.startsWith("AIza");
 
     if (!isValidKey) {
-      const { 
+      const {
         origin, destination, waypoints, travelMode, height, apiKey,
         mapContainerClassName, disableDefaultUI, zoomControl,
         streetViewControl, mapTypeControl, fullscreenControl,
-        onRouteCalculated, ...divProps 
+        onRouteCalculated, ...divProps
       } = props;
 
       return (