xertica-ui 1.0.0 → 1.2.0

package/bin/cli.ts

@@ -7,6 +7,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { execa } from 'execa';
+import { colorThemes } from '../contexts/theme-data';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -34,7 +35,7 @@ program
             const files = await fs.readdir(uiComponentsDir);
             const components = files
                 .filter(f => f.endsWith('.tsx') && !f.startsWith('index'))
-                .map(f => ({ title: f.replace('.tsx', ''), value: f }));
+                .map(f => ({ title: f.replace('.tsx', ''), value: f, selected: true }));
 
             componentChoices = [
                 { title: 'All Components', value: 'all', selected: true },
@@ -42,6 +43,8 @@ program
             ];
         }
 
+
+
         console.log(chalk.blue('🚀 Welcome to Xertica UI CLI!'));
 
         const response = await prompts([
@@ -49,7 +52,12 @@ program
                 type: 'multiselect',
                 name: 'components',
                 message: 'Which components would you like to include?',
-                choices: componentChoices,
+                choices: componentChoices.length > 1 ? componentChoices : [
+                    { title: 'All Components', value: 'all', selected: true },
+                    // Fetch components logic was above, I'll rely on existing code for that part 
+                    // and just insert my code around existing blocks in separate steps if needed.
+                    // But replace_file_content requires me to match content.
+                ],
                 hint: '- Space to select. Return to submit',
                 min: 1
             },
@@ -63,6 +71,17 @@ program
                     { title: 'Template Page', value: 'template', selected: true },
                 ]
             },
+            {
+                type: 'select',
+                name: 'theme',
+                message: 'Select the default color theme for your project:',
+                choices: colorThemes.map(t => ({
+                    title: t.name,
+                    description: t.description,
+                    value: t.id
+                })),
+                initial: 0
+            },
             {
                 type: 'confirm',
                 name: 'install',
@@ -96,6 +115,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');
@@ -138,11 +162,7 @@ export default function App() {
                             if (basename === 'node_modules') return false;
 
                             // Component filtering
-                            // src is absolute. We need relative validation.
-                            // Or just check if basename is in the list.
-                            // Warning: 'button.tsx' might be in other places? Unlikely in flat structure components/ui
-                            // Ideally we check if it is inside components/ui
-                            const isUI = src.includes(path.join('components', 'ui')); // Simple check
+                            const isUI = src.includes(path.join('components', 'ui'));
 
                             if (isUI && folder === 'components') {
                                 if (basename === 'index.ts') return true;
@@ -172,6 +192,22 @@ export default function App() {
                 }
             }
 
+            // --- Apply Selected Theme ---
+            if (response.theme) {
+                const contextPath = path.join(targetDir, 'contexts', 'BrandColorsContext.tsx');
+                if (await fs.pathExists(contextPath)) {
+                    let content = await fs.readFile(contextPath, 'utf8');
+                    // Replace default theme
+                    // Need to match the line: return saved || 'xertica-original';
+                    // We can use regex to be safe
+                    content = content.replace(
+                        /return saved \|\| 'xertica-original';/,
+                        `return saved || '${response.theme}';`
+                    );
+                    await fs.writeFile(contextPath, content);
+                }
+            }
+
             spinner.succeed('Project initialized successfully!');
 
             if (response.install) {
@@ -190,4 +226,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 (