feat: adaptación de los proyectos para utilizar .env y comienzo de preparación para despliegue en docker

frontend/src/main.tsx

@@ -1,9 +1,67 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+// Importamos TODOS los widgets que queremos que estén disponibles
+import { MercadoAgroWidget } from './components/MercadoAgroWidget';
+import { MercadoAgroCardWidget } from './components/MercadoAgroCardWidget';
+import { GranosWidget } from './components/GranosWidget';
+import { GranosCardWidget } from './components/GranosCardWidget';
+import { BolsaUsaWidget } from './components/BolsaUsaWidget';
+import { UsaIndexHeroCard } from './components/UsaIndexHeroCard';
+import { BolsaLocalWidget } from './components/BolsaLocalWidget';
+import { MervalHeroCard } from './components/MervalHeroCard';
+import { RawDataView } from './pages/RawDataView';
+
+// El registro de todos nuestros widgets disponibles
+const widgetRegistry = {
+  // Widgets del Mercado Local
+  'merval-heroe': MervalHeroCard,
+  'bolsa-local-tabla': BolsaLocalWidget,
+  
+  // Widgets del Mercado de EEUU
+  'sp500-heroe': UsaIndexHeroCard,
+  'bolsa-eeuu-tabla': BolsaUsaWidget,
+  
+  // Widgets de Granos
+  'granos-tarjetas': GranosCardWidget,
+  'granos-tabla': GranosWidget,
+  
+  // Widgets del Mercado Agroganadero
+  'mercado-agro-tarjetas': MercadoAgroCardWidget,
+  'mercado-agro-tabla': MercadoAgroWidget,
+  
+  // Página completa como un widget
+  'pagina-datos-crudos': RawDataView,
+};
+
+// Tema base de Material-UI
+const theme = createTheme();
+
+// Exponemos la función de renderizado en el objeto window
+// @ts-ignore
+window.MercadosWidgets = {
+  render: () => {
+    const widgetContainers = document.querySelectorAll<HTMLElement>('[data-mercado-widget]');
+    widgetContainers.forEach(container => {
+      const widgetName = container.dataset.mercadoWidget as keyof typeof widgetRegistry;
+      if (widgetName && widgetRegistry[widgetName]) {
+        const WidgetComponent = widgetRegistry[widgetName];
+        ReactDOM.createRoot(container).render(
+          <React.StrictMode>
+            <ThemeProvider theme={theme}>
+              <CssBaseline />
+              <WidgetComponent />
+            </ThemeProvider>
+          </React.StrictMode>
+        );
+      }
+    });
+  }
+};
+
+// Si estamos en modo de desarrollo, llamamos a render automáticamente
+if (import.meta.env.DEV) {
+    // @ts-ignore
+    window.MercadosWidgets.render();
+}