Librería React para el Ecosistema de Información de la UNP

La Librería del Ecosistema de Información es una colección de componentes reutilizables y modulares para crear y gestionar el entorno digital de la Unidad Nacional de Protección. Esta librería proporciona componentes para facilitar la integración de diversas funcionalidades dentro de las aplicaciones del ecosistema.

Instalación

npm install react-ecosistema-unp@latest

Nota: El Module Resolution del proyecto debe ser bundler para su correcto funcionamiento

"moduleResolution": "bundler"

Configuración inicial

Todo proyecto que utilice la librería debe envolver la aplicación con el componente EcoProvider. Este proveedor configura los contextos de autenticación y WebSocket necesarios para el correcto funcionamiento de los demás componentes.

import { EcoProvider } from 'react-ecosistema-unp/utils';

function App() {
  return (
    <EcoProvider>
      {/* Tu aplicación */}
    </EcoProvider>
  );
}

Documentación

• Elementos UI
• Componentes compartidos (Layout)
• Tarjetas
• Tablas y modales
• Utilidades
• Autenticación
• Datos
• Accesibilidad

Módulos de importación

| Módulo | Importación | Componentes principales | |--------|-------------|------------------------| | UI | react-ecosistema-unp/ui | Encabezado, Subtitulo, Logo, Paginador, Animacion, ContenedorVentana, IconoTooltip, ItemsModal, ContenidoModal, EcoModal | | Shared | react-ecosistema-unp/shared | VentanaLienzo, VentanaTabs, TabVentana, IconosSistema | | Cards | react-ecosistema-unp/cards | Tarjeta, SeccionTarjeta, ContenedorTarjeta, NuevoElemento, TarjetaLectura, SeccionTarjetaLectura, TarjetaInfo | | Tables | react-ecosistema-unp/tables | TablaRegistros | | Utils | react-ecosistema-unp/utils | EcoProvider, ProtectedRoute, UserRoute, useFetchData, useFormValidation, CaptchaEcosistema, useWebSocket, ModalRadicado, ModalDocumento, UnpHistorico | | Accessibility | react-ecosistema-unp/accessibility | BarraAccesibilidad | | Data | react-ecosistema-unp/data | DocsEcosistema |