Top Gun Library

Libería de componentes.

Top Gun library es un conjunto de componentes desarrollados en React que permiten optimizar y acelerar los desarrollos en VST Seguros.

Features

| Fecha | Versión | Ticket | Feature | | ------ | ------ | ------ | ------ | | 07 - 10 - 2022 | 1.0.0 | [SQTGS-664] | Creación proyecto más migración de componentes de Chile | | 21 - 11 - 2022 | 1.0.1 | [SQTGS-813] | Creación componente Pre Header | | 29 - 11 - 2022 | 1.0.2 | [SQTGS-794] | Creación componente Header | | 29 - 11 - 2022 | 1.0.3 | [SQTGS-810] | Creación componente Footer | | 30 - 11 - 2022 | 1.0.4 | [SQTGS-796] | Creación componente Carrusel | | 01 - 12 - 2022 | 1.0.5 | [SQTGS-798] | Creación componente Reportar Siniestro | | 12 - 12 - 2022 | 1.0.6 | [SQTGS-732] | Creación componente Accordion y Accordion Section | | 14 - 12 - 2022 | 1.0.7 | [SQTGS-799] | Creación componente Canales de Atención | | 20 - 12 - 2022 | 1.0.8 | [SQTGS-731] | Creación componente Logos aseguradora. | | 23 - 12 - 2022 | 1.0.9 | [SQTGS-851] | Creación componente Barra Fija Cotizar. | | 28 - 12 - 2022 | 1.1.0 | [SQTGS-821] | Creación componente Detalles del seguro. | | 28 - 12 - 2022 | 1.1.1 | [SQTGS-861] | Ajuste componente Header. | | 16 - 12 - 2022 | 1.1.2 | [SQTGS-795] | Creación componente Banner. | | 05 - 01 - 2023 | 1.1.3 | [SQTGS-859] | Creación componente Formulario Diversificador. | | 16 - 12 - 2022 | 1.1.4 | [SQSEG-313] | Creación subcomponente CarouselBanner. | | 10 - 01 - 2023 | 1.1.5 | [SQTGS-797] | Creación componente Tabla dinámica. | | 13 - 02 - 2023 | 1.1.6 | [SQTGS-850] | Creación componente Modal Dinámico Contentful. | | 27 - 02 - 2023 | 1.1.7 | [SQSEG-431] | Creación componente Toolbar. | | 27 - 03 - 2023 | 1.1.8 | [SQSEG-457] | Creación componente DetailsList. | | 28 - 03 - 2023 | 1.1.9 | [SQSEG-435] | Creación componente Paginator. | | 15 - 05 - 2023 | 1.2.0 | [SQSEG-562] | Creación componente Sidebar. | | 22 - 05 - 2023 | 1.2.1 | [SQTGS-1400] | Ajuste css tabla comparativa y componente modal. | | 23 - 05 - 2023 | 1.2.2 | [SQTGS-1359] | Cambios de estilos y agregar campo de color de fondo para ajuste en página en componentes: Accordion, AttentionChannel, Carousel, DynamicTable, footer, InsuranceDetails, Page. Cambio de estructuración de html en componente Page y además se agregó un wrapper(1130px). Ajuste de campos opcionales: FixedBar y parseData(Page). Creación nuevo componente TextDetails. | | 25 - 05 - 2023 | 1.2.3 | [SQTGS-1359] | Ajustes en componentes | | 23 - 06 - 2023 | 1.2.4 | [SQTGS-1450] | Ajustes visuales en componentes y agregado de lazy imports en componente Page. | | 27 - 05 - 2023 | 1.2.5 | [SQTGS-1507] | Ajustes en padding boton componente CheckboxFilter. | | 29 - 05 - 2023 | 1.2.6 | [SQTGS-1507] | Ajuste en condiciónes para desplegar contentful modal del banner en componente Page. | | 12 - 06 - 2023 | 1.2.7 | [SQSEG-603] | Desarrollo componente Datepicker y ajustes en componentes. | | 02 - 08 - 2023 | 1.2.8 | [SQTGS-1746] | Desarrollo componente Botón Flotante de Contacto | | 08 - 08 - 2023 | 1.2.9 | [SQTGS-1746] | Se agregan interfaces útiles a exportar | | 09 - 08 - 2023 | 1.3.0 | [SQSEG-736] | Ajuste de componente DatePicker | | 25 - 08 - 2023 | 1.3.1 | [SQTGS-1602] | Ajuste de componente Page, agregar nuevo componente Swiper, CardList y SideBySide. | | 28 - 08 - 2023 | 1.3.2 | [SQTGS-1851] | Se agregan interfaces útiles a exportar | | 30 - 08 - 2023 | 1.3.3 | [SQTGS-1851] | Componente Modal ahora siempre crea un elemento contenedor | | 7 - 09 - 2023 | 1.3.4 | [SQTGS-1801] | Se agregaron nuevos componentes y se agregaron al componente Page. | | 14 - 09 - 2023 | 1.3.5 | [SQTGS-1902] | Mejoras varias rediseño | | 14 - 09 - 2023 | 1.3.6 | [SQTGS-1918] | Cambio interfaz modal y scss. | | 21 - 09 - 2023 | 1.3.11 | [SQTGS-2019] | Cambio comportamiento Card List | | 25 - 09 - 2023 | 1.3.11 | [SQTGS-2080] | Se devuelve el modal default al regular | | 26 - 09 - 2023 | 1.3.12 | [SQTGS-1918] | Ajuste estilo header y agregar boton al componente. | | 26 - 09 - 2023 | 1.3.13 | [SQTGS-2054] | Ajuste tamaño cards parrilla | | 27 - 09 - 2023 | 1.3.14 | [SQTGS-2054] | Fix varios estilos | | 28 - 09 - 2023 | 1.3.15 | [SQSEG-854] | Ajuste formato DatePicker y nuevo componente RangeSlider | | 29 - 09 - 2023 | 1.3.16 | [SQTGS-2114] | Fix estilos Acordeón y Canales de Atención | | 02 - 10 - 2023 | 1.3.17 | [SQTGS-2100] | Fix estilo Cards del Carrusel | | 02 - 10 - 2023 | 1.3.18 | [SQTGS-2113] | Fix formulario de contacto en modal no se cierra en caso de éxito | | 02 - 10 - 2023 | 1.3.19 | [SQTGS-2101] | Fix Insurance Details ancho cards responsive | | 03 - 10 - 2023 | 1.3.20 | [SQTGS-2102] | Fix varios en estilos | | 04 - 10 - 2023 | 1.3.21 | [SQTGS-2102] | Fix varios en estilos | | 05 - 10 - 2023 | 1.3.22 | [SQTGS-2070] | Fix swiper, header estilos. | | 05 - 10 - 2023 | 1.3.23 | [SQTGS-2070] | Fix estilos banner cross selling | | 05 - 10 - 2023 | 1.3.24 | [SQTGS-2070] | Fix estilos baner y header.| | 05 - 10 - 2023 | 1.3.25 | [SQTGS-2131] | Fix h1 a h2 en Flow Header | | 19 - 10 - 2023 | 1.3.26 | [SQTGS-2143] | Fix Header styles and new termns component. | | 31 - 10 - 2023 | 1.3.27 | [SQTGS-2049] | Se agrega nueva versión de card para flujo de auto | | 02 - 11 - 2023 | 1.3.28 | [SQTGS-2208] | Se agrega los números clickeables en "Nuestros Canales de atención" | | 03 - 11 - 2023 | 1.3.29 | [SQTGS-2050] | Se agrega nuevo componente "CarInsuranceMoreDetails". | | 02 - 11 - 2023 | 1.3.30 | [SQTGS-2169] | Se sincroniza con contentful los componentes "LegalTerms" y algunas funciones del "Header". | | 06 - 11 - 2023 | 1.3.31 | [SQTGS-2253] | Se realizan ajustes de estilo al componente de card v2 | | 16 - 11 - 2023 | 1.3.32 | [SQTGS-2253] | Se realizan ajustes de estilo al componente de card v2 | | 17 - 11 - 2023 | 1.3.33 | [SQSEG-941] | Modificación de formato del placa patente PE y Datepicker | | 21 - 11 - 2023 | 1.3.34 | [SQTGS-2295] | Se integra precio oferta en card v2 | | 21 - 11 - 2023 | 1.3.34 | [SQTGS-2259] | Integración del precio oferta en filtro | | 21 - 11 - 2023 | 1.3.35 | [SQTGS-2159] | Se actualiza el componente FlowHeader con el nuevo diseño | | 23 - 11 - 2023 | 1.3.36 | [SQTGS-2292] | Corrección en huincha comparador desktop | | 27 - 11 - 2023 | 1.3.37 | [SQTGS-2295] | Se arreglan errores de estilos en componentes. | | 27 - 11 - 2023 | 1.3.38 | [SQTGS-2293] | Se arreglan errores de estilos en componentes de flujo PT. | | 05 - 12 - 2023 | 1.3.39 | [SQTGS-2336] | Se actualizan múltiples dependencias del package.json | | 27 - 12 - 2023 | 1.3.40 | [SQTGS-2346] | Reparación estilos en componentes. | | 27 - 12 - 2023 | 1.3.41 | [] | Reparación estilos en componente tabla. | | 15 - 01 - 2024 | 1.3.42 | [SQSEG-1125] | Ajustes de placa patente PE y Datepicker. | | 15 - 01 - 2024 | 1.3.43 | [SQTGS-2410] | Ajuste box shadow cards comparador. | | 18 - 01 - 2024 | 1.3.44 | [SQTGS-2460] | Fix ReCAPTCHA en formulario diversificador. | | 18 - 01 - 2024 | 1.3.45 | [SQTGS-2445] | Ajuste en estilos de componentes comparador y header. | | 18 - 01 - 2024 | 1.3.46 | [SQTGS-2445] | Agregar nuevas propiedades al componente Tabla. | | 29 - 01 - 2024 | 1.3.48 | [SQTGS-2457] | Corrección bug modals donde el body seguía siendo scrolleable en el fondo. | | 02 - 02 - 2024 | 1.3.49 | [SQTGS-2445][SQTGS-2390] | Correcciones precio oferta y último paso a producción | | 02 - 02 - 2024 | 1.3.50 | [SQTGS-2445][SQTGS-2390] | Corrección color hover header | | 12 - 02 - 2024 | 1.3.51 | [SQTGS-2479][SQTGS-2500] | Corrección en cerrar el Side Menu, cuando se selecciona un item del menú. Ver Detalle en una linea | | 27 - 02 - 2024 | 1.3.52 | [SQTGS-2565] | Correcciones precio oferta | | 28 - 02 - 2024 | 1.3.52 | [SQTGS-2565] | Correcciones replace | | 04 - 03 - 2024 | 1.3.56 | [SQTGS-2592] | Implementation "Seguro Viaje" | | 25 - 03 - 2024 | 1.3.57 | [SQTGS-2637] | Implementation modal Zona Schengen | | 09 - 04 - 2024 | 1.3.58 | [SQTGS-2646] | Corrección filtro auto 0uf Pérdida Total | | 27 - 05 - 2024 | 1.3.59 | [SQTGS-2782] | Se modifica clase para que los títulos de los Swiper acepten | | 05 - 06 - 2024 | 1.3.60 | [SQTGS-2792] | Se elimina la librería Lodash y de loading + import dynamic para mejorar rendimiento de las páginas | | 07 - 06 - 2024 | 1.3.61 | [SQTGS-2792] | Fix en librería de lottie | | 11 - 06 - 2024 | 1.3.62 | [SQTGS-2815] | Fix en filtro auto para el navegador Safari |

Tech

• Node 12.21+
• Npm 6.14+
• React 18+

Changes

Pasos para generar un cambio en el proyecto

Paso 1 - Clonar el repositorio: git clone [email protected]:banco_ripley/top_gun_library.git
Paso 2 - Dirigirse a la rama Development: git checkout development
Paso 3 - Crear el feature según la tarea Jira o modificación que se necesite: git checkout -b feature/[ticket-jira]
Paso 4 - Modificar el README con los cambios realizados en la sección Feature.
Paso 5 - Modificar la versión del Package.json.
Paso 6 - Realizar el PR
Paso 7 - Realizar correcciones de Sonar y/o comentarios.
Paso 8 - Merge hacia Development

Installation

Local

Instalar la librería en tu proyecto React/NextJs

1. En el proyecto Top_Gun_Library debes poner el siguiente código:

npm link
npm run start

2. En el proyecto que necesites ocupar la librería debes poner el siguiente código en tu TERMINAL:

npm link top-gun-library

3. En el proyecto que se necesite ocupar la librería deber poner el siguiente código en donde se necesite utilizar:

import { COMPONENTS_1, COMPONENTS_2, COMPONENTS_3, COMPONENTS_N } from 'top-gun-library';

DEV / PP / PROD

TODO

Documentation

| Componente | URL | | ------ | ------ | | Accordion | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25069945083/Accordion | | Accordion Section | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25071257524/AccordionSection | | Stepper - Step | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24839520322/Stepper+-+Step | | Generic Card | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24840044545/Generic+Card | | Button | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24840044558/Button| | Info Badge | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24843059201/Info+Badge | | Select |https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24841224193/Select | | Promotional Bar | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24858787841/Promotional+Bar | | Loading | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24860360716/Loading | | Input | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24862752782/Input | | Checkbox | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24865112181/Checkbox | | Checkbox Group | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24866324515 | | Modal | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24869011558/Modal. | | Contentful Dynamic Modal | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25165168710/Contentful+Dynamic+Modal | | Custom Card | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24875630665/Custom+Card | | Car Insurance Card | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24875598017/Car+Insurance+Card | | Comparison Table | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24879661138/Comparison+Table. | | Contentful Modal | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24880906241/Contentful+Modal | | Car Insurance Comparator | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24891523120/Car+Insurance+Comparator | | Switch | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24899747841/Switch | | InfoBox | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24899911890/InfoBox | | Tarjeta Resumen | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24900501509/Tarjeta+resumen | | Radio Group | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24900567230/Radio+Group | | Selección Método de pago | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24900272437/Selecci+n+M+todo+de+pago | | Checkbox filter | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24921505856/Checkbox+filter | | Price sort select | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24923471956/Price+sort+select | | Car insurance Filter | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/24923177108/Car+Insurance+Filter | | Pre Header | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25065619773/Sombrero+del+Header | | Header | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25065717990/Header | | Footer | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25065947339/Footer | | Carrusel | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25066242146/Carrusel+Im+genes | | Reportar Siniestro | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25076957222/Secci+n+Reportar+Siniestro | | Logotype list | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25085902849/Compa+ia+Logos | | Canales de Atención | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25080267052/Secci+n+Canales+de+Atenci+n | | Banner | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25072927822/Banner | | Detalles del seguro | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25102518021/Detalles+del+seguro | | Barra Fija Cotizar | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25098978076/Barra+Fija | | Diversification Form | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25109760310/Diversification+Form | | Tabla dinámica | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25119981569/Dynamic+Comparison+Table | | Toolbar | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25187778603/Toolbar | | DetailsList | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25218056249/DetailsList | | Paginator | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25219366968/Paginator | | TextDetails | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25284902992/Text+Details | | Sidebar | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25221038159/Sidebar | | Datepicker | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25336676353/Datepicker | | Floating Contact Button | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25366986761/Floating+Contact+Button | | RangeSlider | https://bancoripley1.atlassian.net/wiki/spaces/S/pages/25428754434/RangeSlider |

SonarCloud ☁️

SonarCloud project link. SonarCloud project documentation.