Tienes razón. Mi respuesta anterior fue para la versión de Vue y no para la de React. Lo siento.

Aquí tienes la versión actualizada del README.md lista para copiar y pegar. He ajustado todos los ejemplos de código y las explicaciones para que se adapten a tu librería de React, tal como me la has mostrado.

🎯 Zeus React Model Manager

La primera librería que combina OpenUI5 JsonModel con React Context para microfrontends empresariales.

🌟 ¿Por qué Zeus React Model Manager?

Zeus React Model Manager es la solución ideal para desarrolladores que provienen de SAP UI5 y están trabajando con React en arquitecturas de microfrontends. Combina lo mejor de ambos mundos: el patrón de datos de OpenUI5 con el sistema de componentes y hooks de React.

🎯 El Problema de la verbosidad en la gestión de estado

// ❌ ANTES: Repetitivo y verboso
const appTitle = modelManager.getProperty('app', '/title');
const userName = modelManager.getProperty('user', '/name');
const notificationCount = modelManager.getProperty('notifications', '/count');

// Usar en el JSX...
<ui5-shellbar primary-title={appTitle} userName={userName} />

// ✅ DESPUÉS: Elegante y familiar (como en UI5)
import { useModels } from '@telcomdataperu/zeus-react-model-manager';

// ✅ Obtén modelos y propiedades de forma reactiva
const [app, user, notifications] = useModels(['app', 'user', 'notifications']);

// Usar en el JSX...
<ui5-shellbar 
  primary-title={app.title} 
  userName={user.name} 
  notifications-count={notifications.count}
/>

🏆 Ventajas únicas

| Característica | Zeus React Model Manager | React Context | Redux | OpenUI5 JsonModel | |---------------|----------------------|---------------|-------|-------------------| | Learning curve para devs UI5 | ✅ Zero | ❌ Media | ❌ Alta | ✅ Familiar | | Tamaño de paquete | ✅ ~2KB | ✅ Nativo | ❌ ~15KB | ❌ Full UI5 | | Microfrontend ready | ✅ Nativo | ✅ Sí | ❌ No | ❌ No | | Navegación por paths | ✅ /user/name | ❌ No | ❌ No | ✅ Nativo | | Reactividad | ✅ 100% | ✅ Nativa | ✅ Sí | ❌ No | | Compartir entre MFs | ✅ Built-in | ❌ No | ❌ No | ❌ No | | Tipado seguro | ✅ Enterprise | ✅ Básico | ✅ Enterprise | ❌ No |

🚀 Instalación y Configuración

📦 Instalación desde NPM

Para uso en producción o desarrollo local:

npm install @telcomdataperu/zeus-react-model-manager

🔧 Configuración en tu proyecto React

Envuelve tu aplicación o microfrontend con el ModelManagerProvider para inyectar el contexto de los modelos.

// main.tsx o index.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { ModelManagerProvider } from '@telcomdataperu/zeus-react-model-manager';
import { MyMainModel } from './models/MyMainModel';

// Crea una instancia de tu modelo de datos principal
const mainModel = new MyMainModel();

createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    {/* Aquí se inyecta el modelo en toda la aplicación */}
    <ModelManagerProvider model={mainModel}>
      <App />
    </ModelManagerProvider>
  </React.StrictMode>,
);

📖 Guía de Uso Completa

🔰 1. Conceptos Básicos

JsonModel - La base de todo

JsonModel es la clase central que gestiona los datos. Permite la navegación y modificación de propiedades a través de paths, similar a OpenUI5.

import { JsonModel } from '@telcomdataperu/zeus-react-model-manager'

const userModel = new JsonModel({
  profile: {
    name: 'David Rodriguez',
    email: '[email protected]',
  },
  notifications: {
    count: 5,
    items: [
      { id: 1, title: 'Bienvenido', read: false },
    ]
  }
})

// ✅ Navegación por paths (estilo OpenUI5)
console.log(userModel.getProperty('/profile/name'))   // "David Rodriguez"
console.log(userModel.getProperty('/notifications/count')) // 5

// ✅ Actualizar propiedades
userModel.setProperty('/profile/name', 'David Rodriguez Silva')

// ✅ Operaciones con arrays
userModel.addToArray('/notifications/items', {
  id: 2,
  title: 'Nueva funcionalidad',
  read: false
})

ModelManager - Gestión con scopes

ModelManager administra múltiples JsonModels bajo un "scope" único, lo que lo hace perfecto para microfrontends.

import { createModelManager } from '@telcomdataperu/zeus-react-model-manager'

// Crear un manager para tu microfrontend
const manager = createModelManager('zeus-header')

// Crear y asignar modelos específicos
const appModel = manager.create('app', {
  title: 'Zeus Identity Platform',
})
const userModel = manager.create('user', {
  name: 'David Rodriguez',
})

// Acceder a modelos
const app = manager.getModel('app')
const user = manager.getModel('user')

console.log(app?.getProperty('/title')) // "Zeus Identity Platform"
console.log(user?.getProperty('/name')) // "David Rodriguez"

🎯 2. Uso en Componentes React

Aprovecha los hooks para integrar los modelos en tus componentes de React de forma reactiva y limpia.

// MyProfilePage.tsx
import React from 'react';
import { useModelProperty } from '@telcomdataperu/zeus-react-model-manager';
import { createProfilePageController } from '../controllers/ProfilePage.controller';

const MyProfilePage: React.FC = ({ userId }) => {
  // 1. Instanciamos el controlador que tiene la lógica de negocio
  const controller = React.useMemo(() => createProfilePageController({ userId, manager }), [userId]);

  // 2. Usamos el hook para que la UI sea reactiva al nombre del usuario.
  const [userName] = useModelProperty<string>('user', '/profile/name');

  return (
    <div>
      <h1>Perfil de Usuario (Vista)</h1>
      <p>Nombre: {userName}</p>
      
      <button onClick={() => controller.updateUserName(`David (${Date.now().toString().slice(-4)})`)}>
        Cambiar Nombre
      </button>
    </div>
  );
};

🚀 Despliegue y Distribución

📦 Build y Publicación

Sigue estos pasos para construir y publicar tu librería en npm:

1. Ejecuta las pruebas: npm run test
2. Limpia y construye el paquete: npm run clean && npm run build
3. Verifica los archivos construidos: ls -la dist/
4. Publica en npm (si tienes permisos): npm publish --access public

🔧 Integración en Proyectos

Vite + React

Asegúrate de que Vite transpila correctamente la librería.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['@telcomdataperu/zeus-react-model-manager']
  }
})

🤝 Contribución y Soporte

🐛 Reportar Issues

• Usa la plantilla de issues.
• Incluye la versión de React y de la librería.
• Proporciona un código mínimo para reproducir el error.

💡 Sugerir Features

• Abre un Feature Request.
• Explica el caso de uso y, si es posible, sugiere una API.

🔧 Desarrollo Local

• Haz un fork y clona el repositorio.
• Instala dependencias con npm install.
• Ejecuta los tests con npm run test.
• Haz tus cambios, crea un commit y un pull request.

📄 Licencia

Este proyecto está bajo la Licencia MIT.

🙋‍♂️ FAQ

• ¿Es compatible con React 17? Sí, es compatible con React 17 y versiones posteriores.
• ¿Tiene limitaciones de performance? Está optimizado para miles de propiedades reactivas y es ideal para aplicaciones empresariales.
• ¿Funciona con otras librerías UI? Sí, es agnóstico a la librería de componentes que uses.

🎯 Roadmap

• v1.1.0 - Q3 2025: Composables mágicos (useModels, useFormModel), plugin para DevTools y soporte para SSR.
• v1.2.0 - Q4 2025: Persistencia automática, optimistic updates y cache inteligente.
• v2.0.0 - Q1 2026: Soporte para Vue 4, WebAssembly bindings y plugins para orquestadores.

<div align="center">

✒️ Autor

José David Villanueva Villalobos   Creador de Zeus Platform   LinkedIn • GitHub

</div>

☕ Apóyame con una donación

¿Te fue útil esta herramienta? Apoya mi trabajo para que pueda seguir creando soluciones open source.