react-ecosistema-unp 1.0.0-pre-release.1 → 1.0.0-pre-release.4

package/README.md

@@ -1 +1,52 @@
-# Librería React para el Ecosistema de Información de la UNP
+# Librería React para el Ecosistema de Información de la UNP
+
+<span align="center">
+<a href="https://www.npmjs.com/package/react-ecosistema-unp"><img title="npm version" src="https://badgen.net/npm/v/react-ecosistema-unp?label=latest"></a>
+<a href="https://www.npmjs.com/package/react-ecosistema-unp"><img title="npm version" src="https://badgen.net/npm/v/react-ecosistema-unp?label=pre"></a>
+</span>
+
+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.
+
+
+### Migración
+
+Todos los proyectos que utilizan la librería [eco-unp](https://www.npmjs.com/package/eco-unp) deben realizar la migración a [react-ecosistema-unp](https://www.npmjs.com/package/react-ecosistema-unp). Para ello deben seguir los siguientes pasos:
+* Desinstalar eco-unp: ```npm uninstall eco-unp```
+* Cambiar el Module Resolution en los proyectos React TS a *bundler* ```"moduleResolution": "bundler"```
+* Instalar la última versión de react-ecosistema-unp: ```npm install react-ecosistema-unp@latest```
+* Realizar el cambio en las siguientes importaciones:
+```tsx
+import { AuthProvider } from 'eco-unp/Utils'; -> import { AuthProvider } from 'react-ecosistema-unp/utils';
+import { UserRoute, ProtectedRoute } from 'eco-unp/Utils'; -> import { ProtectedRoute, UserRoute } from 'react-ecosistema-unp/utils';
+
+import { VentanaLienzo } from 'eco-unp/Ui'; -> import { VentanaLienzo } from 'react-ecosistema-unp/shared';
+import { VentanaUsuario } from 'eco-unp/Ui'; -> import { VentanaTabs } from 'react-ecosistema-unp/shared';
+import { TabVentana } from 'eco-unp/Ui'; -> import { VentanaTabs } from 'react-ecosistema-unp/shared';
+
+import { SubtituloForm } from 'eco-unp/Ui'; -> import { Subtitulo } from "react-ecosistema-unp/ui";
+
+import { CardForm } from 'eco-unp/Ui'; -> import { Tarjeta } from 'react-ecosistema-unp/cards';
+
+import { BootstrapTable } from 'eco-unp/Tables'; -> import { TablaRegistros } from 'react-ecosistema-unp/tables';
+```
+
+> El componente Subtitulo cambia el prop subtitulo a subtitle
+
+
+## Instalación
+
+```bash
+npm install react-ecosistema-unp@latest
+```
+> Nota: El Module Resolution del proyecto debe ser *bundler* para su correcto funcionamiento
+```json
+"moduleResolution": "bundler"
+```
+
+
+## Uso
+
+* [Elementos UI](docs/ui.md)
+* [Tarjetas](docs/cards.md)
+* [Tabla y modal](docs/table.md)
+* [Utilidades](docs/utils.md)

package/dist/assets/Modal.css

@@ -1 +1 @@
-.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:flex-end;align-items:center;transition:opacity .4s ease;opacity:0;visibility:hidden;z-index:1000}.modal-overlay.show{opacity:1;visibility:visible}.modal-overlay.hide{opacity:0;visibility:none}.modal-container{width:42%;height:95vh;background:#fff;box-shadow:0 4px 8px #0003;position:relative;transform:translate(100%);transition:transform .4s ease,opacity .4s ease;border-radius:12px;margin:1.75em}.modal-container.show{transform:translate(0);opacity:1}.modal-container.hide{transform:translate(100%);opacity:0}@media (max-width: 1920px){.modal-container{width:40%!important}}@media (max-width: 1800px){.modal-container{width:42.5%!important}}@media (max-width: 1650px){.modal-container{width:45%!important}}@media (max-width: 1500px){.modal-container{width:50%!important}}@media (max-width: 1425px){.modal-container{width:55%!important}}@media (max-width: 1275px){.modal-container{width:57.5%!important}}@media (max-width: 1150px){.modal-container{width:60%!important}}@media (max-width: 992px){.modal-container{width:70%!important}}@media (max-width: 768px){.modal-container{width:80%!important}}.modal_header{display:flex;justify-content:space-between;align-items:center;padding:10px 30px;background-color:#303d50;color:#fff;font-weight:500;font-size:16px;border-radius:12px 12px 0 0}.modal_body{padding:1rem;height:calc(100% - 56px);border-radius:0 0 12px 12px;overflow-y:auto}.close_button{background:none;border:none;font-size:1.5em;cursor:pointer;color:#fff}.close_button:hover{color:#d36269}.unp-row-subtitle{margin-bottom:4rem}.modal_subtitle_container{display:flex;gap:.5rem;font-size:18px;font-weight:400;align-items:center}.modal_body::-webkit-scrollbar{width:10px}.modal_body::-webkit-scrollbar-track{background:transparent}.modal_body::-webkit-scrollbar-thumb{background-color:#303d50;border-radius:10px;border:3px solid transparent;background-clip:padding-box}
+.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:flex-end;align-items:center;transition:opacity .4s ease;opacity:0;visibility:hidden;z-index:1000}.modal-overlay.show{opacity:1;visibility:visible}.modal-overlay.hide{opacity:0;visibility:none}.modal-container{width:42%;height:95vh;background:#fff;box-shadow:0 4px 8px #0003;position:relative;transform:translate(100%);transition:transform .4s ease,opacity .4s ease;border-radius:12px;margin:1.75em}.modal-container.show{transform:translate(0);opacity:1}.modal-container.hide{transform:translate(100%);opacity:0}@media (max-width: 1920px){.modal-container{width:40%!important}}@media (max-width: 1800px){.modal-container{width:42.5%!important}}@media (max-width: 1650px){.modal-container{width:45%!important}}@media (max-width: 1500px){.modal-container{width:50%!important}}@media (max-width: 1425px){.modal-container{width:55%!important}}@media (max-width: 1275px){.modal-container{width:57.5%!important}}@media (max-width: 1150px){.modal-container{width:60%!important}}@media (max-width: 992px){.modal-container{width:70%!important}}@media (max-width: 768px){.modal-container{width:80%!important}}.modal_header{display:flex;justify-content:space-between;align-items:center;padding:10px 30px;background-color:#303d50;color:#fff;font-weight:500;font-size:16px;border-radius:12px 12px 0 0}.modal_body{padding:1.25rem 1.75rem 1rem;height:calc(100% - 56px);border-radius:0 0 12px 12px;overflow-y:auto}.close_button{background:none;border:none;font-size:1.5em;cursor:pointer;color:#fff}.close_button:hover{color:#d36269}.unp-row-subtitle{margin-bottom:4rem}.modal_subtitle_container{display:flex;gap:.5rem;font-size:18px;font-weight:400;align-items:center}.modal_body::-webkit-scrollbar{width:10px}.modal_body::-webkit-scrollbar-track{background:transparent}.modal_body::-webkit-scrollbar-thumb{background-color:#303d50;border-radius:10px;border:3px solid transparent;background-clip:padding-box}

package/dist/cards/tarjeta/Tarjeta.js

@@ -1,23 +1,24 @@
 import { jsxs as p, jsx as s } from "react/jsx-runtime";
 import e from "react";
 import '../../assets/Bootstrap.css';import '../../assets/Tarjeta.css';/* empty css                       */
-import { C, a as j } from "../../Card-BXqmurzN.js";
+import { C as j, a as g } from "../../Card-BXqmurzN.js";
 import { C as S } from "../../CardBody-RoDe1y90.js";
-import { B as g } from "../../Button-DMwpnJlD.js";
-const x = {
+import { B as x } from "../../Button-DMwpnJlD.js";
+const N = {
   marginBottom: "20px",
   width: "100px"
-}, v = ({
+}, V = ({
   title: m,
-  header: a,
+  header: a = !1,
   children: n,
-  method: i,
+  method: i = "get",
   validated: d = !1,
-  onSubmit: c
+  onSubmit: c,
+  hasPaddingTop: y = !0
 }) => {
-  const r = e.Children.toArray(n), y = r[0] && e.isValidElement(r[0]) && r[0].type.displayName === "Subtitulo", o = r.filter(
+  const r = e.Children.toArray(n), f = r[0] && e.isValidElement(r[0]) && r[0].type.displayName === "Subtitulo", o = r.filter(
     (t) => e.isValidElement(t) && t.type.displayName === "SeccionTarjeta"
-  ), f = o.length > 0, u = e.Children.map(n, (t, l) => e.isValidElement(t) && t.type.displayName === "SeccionTarjeta" ? e.cloneElement(t, {
+  ), u = o.length > 0, C = e.Children.map(n, (t, l) => e.isValidElement(t) && t.type.displayName === "SeccionTarjeta" ? e.cloneElement(t, {
     isGray: t.props.isGray ?? l % 2 === 1,
     isLast: t.props.isLast ?? l === o.length - 1
   }) : t);
@@ -29,15 +30,15 @@ const x = {
       onSubmit: c,
       className: d ? "was-validated" : "",
       children: [
-        /* @__PURE__ */ p(C, { className: "border-0 tarjeta-unp", children: [
+        /* @__PURE__ */ p(j, { className: "border-0 tarjeta-unp", children: [
           /* @__PURE__ */ s(
-            j,
+            g,
             {
               className: "bg-unp text-light tarjeta-header-unp",
               style: {
                 paddingTop: "1rem",
                 paddingBottom: "1rem",
-                fontSize: a ? "1.1rem" : "1.075rem",
+                fontSize: a ? "1.125rem" : "1.075rem",
                 fontWeight: a ? 500 : "",
                 display: a ? "flex" : "",
                 justifyContent: a ? "center" : ""
@@ -45,13 +46,13 @@ const x = {
               children: m
             }
           ),
-          f ? u : /* @__PURE__ */ s(S, { className: `${y ? "pt-0" : ""}`, children: n })
+          u ? C : /* @__PURE__ */ s(S, { className: `${f || !y ? "pt-0" : ""}`, children: n })
         ] }),
-        i === "POST" || i === "post" && /* @__PURE__ */ s("div", { style: { display: "flex", justifyContent: "end" }, children: /* @__PURE__ */ s(g, { variant: "unp_send", style: x, type: "submit", children: "Enviar" }) })
+        i === "post" && /* @__PURE__ */ s("div", { style: { display: "flex", justifyContent: "end" }, children: /* @__PURE__ */ s(x, { variant: "unp_send", style: N, type: "submit", children: "Enviar" }) })
       ]
     }
   );
 };
 export {
-  v as Tarjeta
+  V as Tarjeta
 };

package/dist/cards/tarjeta-lectura/seccion-tarjeta-lectura/SeccionTarjetaLectura.js

@@ -1,12 +1,16 @@
-import { jsxs as n, Fragment as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, Fragment as l, jsx as r } from "react/jsx-runtime";
 import i from "react";
-import '../../../assets/SeccionTarjetaLectura.css';const o = ({ title: a, children: t }) => {
-  const e = i.Children.toArray(t), s = e[0] && i.isValidElement(e[0]) && e[0].type.displayName === "Subtitulo";
-  return /* @__PURE__ */ n(d, { children: [
+import '../../../assets/SeccionTarjetaLectura.css';const c = ({
+  title: a,
+  children: t,
+  hasPaddingTop: s = !0
+}) => {
+  const e = i.Children.toArray(t), n = e[0] && i.isValidElement(e[0]) && e[0].type.displayName === "Subtitulo";
+  return /* @__PURE__ */ d(l, { children: [
     /* @__PURE__ */ r("div", { className: "section_header_qy", children: /* @__PURE__ */ r("span", { children: a }) }),
-    /* @__PURE__ */ r("div", { style: { padding: `${s ? "0rem" : "1.25rem"} 1.25rem 1.25rem 1.25rem` }, children: t })
+    /* @__PURE__ */ r("div", { style: { padding: `${n || !s ? "0rem" : "1.25rem"} 1.25rem 1.25rem 1.25rem` }, children: t })
   ] });
 };
 export {
-  o as SeccionTarjetaLectura
+  c as SeccionTarjetaLectura
 };

package/dist/lib/cards/tarjeta/Tarjeta.d.ts

@@ -1,11 +1,13 @@
 import { default as React } from 'react';
+type MethodType = 'get' | 'post' | 'put';
 interface TarjetaProps {
     title: string;
     header?: boolean;
     children: React.ReactNode;
-    method?: string;
+    method?: MethodType;
     validated?: boolean;
     onSubmit?: (...args: any[]) => any;
+    hasPaddingTop?: boolean;
 }
 declare const Tarjeta: React.FC<TarjetaProps>;
 export { Tarjeta };

package/dist/lib/cards/tarjeta-info/TarjetaInfo.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
+import { IconType } from 'react-icons';
 interface TarjetaInfoProps {
-    icon: any;
+    icon: IconType;
     label: string;
     children: React.ReactNode;
     show?: boolean;

package/dist/lib/cards/tarjeta-lectura/seccion-tarjeta-lectura/SeccionTarjetaLectura.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 interface SeccionTarjetaLecturaProps {
     title: string;
     children: React.ReactNode;
+    hasPaddingTop?: boolean;
 }
 declare const SeccionTarjetaLectura: React.FC<SeccionTarjetaLecturaProps>;
 export { SeccionTarjetaLectura };

package/package.json

@@ -2,7 +2,7 @@
   "name": "react-ecosistema-unp",
   "author": "Ecosistema de Información - Unidad Nacional de Protección",
   "private": false,
-  "version": "1.0.0-pre-release.1",
+  "version": "1.0.0-pre-release.4",
   "type": "module",
   "exports": {
     ".": {