oneportal-components-ui-sdk

Abstract

This sdk is a set of components for Errepar. It was designed and developed to save time while developing and increase maintainability of components.

Change History

| Date | Change | Author | | ---------- | --------------------------------------------------------------------------------- | --------------- | | 2023-11-06 | Create this repo | AleA | | - | Added Header, Footer & Sidebar components | santiago.pintus | | - | Added Breadcrumb, Spinner & Skeleton components | santiago.pintus | | - | Added Modal, DefaultModal & SharingModal components | santiago.pintus | | 2024-06-07 | Added DocumentCard components (For hitlist & IDC) | santiago.pintus | | 2024-07-05 | Added Badge, DocumentDate and SimpleDate components (For hitlist & IDC and other) | santiago.pintus | | 2024-07-11 | Added SkeletonLines component useful when loading text | santiago.pintus |

Component list:

• Header: The whole header component with its menus and buttons. It reads user's login state and renders user's data or login button respectively
• Footer: The whole footer component. It reads user's login state and renders user's data or login button respectively
• Sidebar: Sidebar component containing calendars, banners and store carousel
• Breadcrumb: Recieves a limitless array of links with labels and renders a breadcrumb with up to 3 items (desktop) or 2 items (mobile), hiding the extra items with "..." dots
• Spinner: Renders a spinner within a 100%-wide container. The width of the icon can be specified in the props
• Skeleton: Renders a skeleton of the specified width and height, the background-color, foreground-color, border-radius and speed of animation can be specified as well in the props
• SkeletonLines: Renders a skeleton for paragraphs with a random amount of skeleton titles. The component generates lines to fill the height passed as prop (default 64px)
• Modal: This Modal component displays a customizable modal window with configurable size, position, and border radius, and handles closing via an overlay click or the Escape key. It uses animations for appearing and disappearing and allows for optional prevention of closing. The content of the modal are the component's children
• DefaultModal: This DefaultModal component is a pre-styled modal window that displays a title, body content, and optional footer with a button and additional legend. It integrates the Modal component for functionality and allows for customization of content, visibility, and closing behavior
• SharingButton: Button with sharing icon that calls the sharing modal to share the current content (This component already imports SharingModal, no need to import it)
• SharingModal: Modal with sharing options (6 social media options): Recieves URL and title of the document to share as props
• DocumentCard: Card that renders a reduced version of a document with title, summary, date, author (and other fields depending on the content type). Recieves the document as the only parameter
• DocumentDate: Shows the date passed as a string or a "new" badge if the date is less than 48 hours
• Badge: Renders a default badge. The badge can be fully customized with own styles
• SimpleDate: Renders a date in dd/mm/YYYY format

Instrucciones para mantener el repositorio

La rama de UAT es diferente a la de MAIN, y no deben mezclarse. La de UAT contiene la barra de búsqueda incluida en el header, la de main se utiliza en producción y no tiene esta barra de búsqueda. SIEMPRE la última versión del paquete debe ser la de producción.

Versión PROD actual:

1.1.74

Para implementar algún cambio:

1. Correr el comando npm run dev para iniciar el servidor de Next
2. Implementar los cambios necesarios
3. Al iniciar el servidor se reemplazó el contenido de tsconfig.json (por eso hay que restaurarlo): Reemplazar el contenido de tsconfig.json con el contenido de tsconfig-bkup.json
4. Correr npm run build para buildear el packete NPM (En la consola se mostrarán algunos errores con unos index.d.ts sobre un type SVGProps<SVGUseElements> pero es normal no es bloqueante).
5. Correr el comando npm run publish para deployar el paquete (la versión se actualiza automáticamente a la siguiente) copiar la versión del paquete recién publicada (si no se puede publicar probablemente la versión actual del paquete ya existe, probar el comando npm run publish nuevamente)
6. Commitéar los cambios en la rama actual.
7. En caso de haber publicado una versión del paquete desde UAT se debe ir a la rama main y desde allí reemplazar la versión del package.json del paquete (en la ruta: header-footer-package/package.json) por la versión de UAT recién publicada
8. Volver a correr desde main el comando npm run publish (se incrementará en 1 la versión que se copió y pegó en el package.json del paquete) por lo que la última versión del paquete permanece siendo la de producción.
9. Commitéar los cambios hechos en main

• Para instalar en otra app de UAT los cambios implementados correr el comando npm i @syserrepar/header-footer-errepar@(version de UAT acá).
• Para instalar en otra app de PROD los cambios implementados correr el comando npm i @syserrepar/header-footer-errepar@latest (la última versión debe ser la de PROD).