natalia-ui

Bienvenido a natalia-ui

Natalia-ui es la librería de componentes de React oficial para todo el grupo Bibam.

Url de integración - storybook con versión 1.1.XX

http://natalia-ui.apps.int.devtrip.com.ar

Url de producción - inactiva -

http://natalia-ui.apps.prd.devtrip.com.ar

Repositorio de desarrollo

https://repo.avantrip.com/react/natalia-ui

Repositorio de npm

http://npm.apps.prd.devtrip.com.ar

¿Cómo correrlo local?

1. Desde CLI, descargar clonar el repositorio git clone git@repo.avantrip.com:react/natalia-ui.git
2. cd ./natalia-ui
3. docker-compose up

Comandos disponibles

npm run dev: Corre el proyecto con storybook.

npm run build: Genera el distribuible en el directorio dist (será el subirá al repositorio privado de npm).

npm run start-with-next: Corre un proyecto pequeño en next.js con el objetivo de probar el build de componentes y estilos.

npm run analyze: Idem que el comando "start-with-next" y adicionalmente corre un analizador de tamaño de archivos estáticos con el objetivo de medir el tamaño del componente.

Comandos adicionales

npm run _create-dist-directories: Elimina y crea los directorios para el distribuible.

npm run _copy-icons-from-source-to-dist: Copia los íconos del src al distribuible.

npm run _compile-all-sass-to-dist: Compila todos los sass y genera el bundle css (quiero.css, avantrip.css, etc) para cada portal en el distribuible.

npm run _compile-components-with-babel: Compila todos los componentes con babel y lo guarda en el distribuible.

npm run _storybook-dev: Corre storybook (necesita compilaciones previas).

npm run _build-static-storybook: Genera un distribuible estático de storybook para que pueda correrse en el entorno de integración. El comando se usa Dockerfile

npm run _start-next-with-analyzer: Corre el distribuible estático de storybook para que pueda correrse en el entorno de integración. El comando se usa Dockerfile

Requisitos para desarrollar

• nodejs 12.14.1

Cómo publicar una nueva versión (Pronto: Automáticamente desde gitlab)

1. Desde CLI, asegurarse de tener seteado el registro de NPM correcto: npm set registry http://npm.apps.prd.devtrip.com.ar
2. Crear un usuario válido en NPM npm adduser --registry http://npm.apps.prd.devtrip.com.ar o hacer el login en el header del siguiente link: http://npm.apps.prd.devtrip.com.ar
3. Ir al package.json del proyecto y subir la versión.
4. Desde CLI, ir al root del proyecto y ejecutar npm run build
5. Desde CLI, ir a ./dist y ejecutar npm publish

Errores

En caso de error de watch ENOSPC o si storybook no recarga automáticamente la app en cada cambio de código, ejecutar en CLI: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Arquitectura

graph LR;
 natalia-ui-->storybook;
 natalia-ui-->docs;
 natalia-ui-->src;
 natalia-ui-->test;
 natalia-ui-->utils;
 natalia-ui-->dist;
 src-->components;
 src-->icons;
 src-->styles;
 test-->nextjs;
 test-->integration-test;
 test-->unit-test;

Directorios principales

Directorio	Función
storybook	Configuración de storybook, babel, webpack con loaders de sass y css, add-ons, loader de stories de componentes.
docs	Documentación en formato MDX storybook
src	Fuente del proyecto que sirve de base para generar el distribuible dist.
test	Designado para la configuración de test unitarios e integración. También contiene un proyecto base de nextjs para probar componentes en un entorno simil avantrip/quiero y calcular su peso total.
dist	Distribuible completo de natalia-ui listo para publicar al repositorio de NPM
utils	Lógica de apoyo para la creación de componentes.

Cómo crear un componente

Verificación

1. Hacer un git pull o git fetch de master para tener la última versión.
2. Chequear en natalia-ui que no exista el componente.
3. Chequear con el equipo de UX si el componente se puede reutilizar de otro existente.
4. Informar en el canal de slack #desarrollo-frontend del desarrollo del nuevo componente.
5. Elegir conceptualmente el tipo de componente que se va a crear: átomo, molécula u organismo. Guía del paradigma Atomic Design

Creación

5. Desde CLI, ejecutar npm run create-component y seguir las instrucciones.

Prueba

1. Desde CLI, ejecutar npm run dev para interactuar con storybook

Cómo instalar natalia-ui en una app

1. Desde CLI, asegurarse de tener seteado el registro de NPM correcto: npm set registry http://npm.apps.prd.devtrip.com.ar
2. Desde CLI, npm install --save natalia-ui
3. Importar el css del portal y luego el componente deseado de la siguiente manera:

import React from 'react'; 

import 'natalia-ui/styles/avantrip.css';

import Button from 'natalia-ui/components/Atoms/src/Component-button';

export default class Index extends React.Component {
  render() {
    return <Button>Hola soy un boton</Button>
  }
}

TODO

• [ ] Relevar todos los componentes del proyecto "hoteles-ui-react" y pasarlos a natalia-ui.
• [ ] Documentación sobre Atomic Design y su aplicación con clases css/sass.
• [ ] Documentar como usar atributos de data-qa- para el team de testing.
• [ ] Configurar procesos Gitlab, versionados, integración, master.
• [ ] Evitar que se pueda publicar una versión que no salga del branch master.
• [ ] Permitir versionado beta para pruebas en proyectos.
• [x] Probar natalia-ui con IE11 (compatibilidad con QV).
• [ ] Documentar la forma de aprobar componentes nuevos (branch y MR).
• [x] Estandarizar la forma de enviar métricas con los eventos.
• [ ] Documentar donde y cómo usar componentes que se están en medio de un A/B.
• [ ] Documentar donde quedan los breakpoints y cómo usarlos.
• [ ] Actualizar versiones de paquetes del package.json para un correcto resultado de npm audit.
• [ ] Hacer un test unitario para el boilerplate de componente.
• [ ] Facilitar el cambio de Theme para todos los componentes.
• [ ] Configurar linter.
• [ ] Preparar un comando que corra los test unitarios.
• [ ] Configurar Gitlab para correr los test antes del build.
• [ ] Hacer tag de versiones.
• [ ] Relevar todos los README de los componentes. Hacer tickets en jira para los incompletos.
• [ ] Relevar todos los Knobs de los componentes. Hacer tickets en jira para los incompletos.
• [ ] Completar la Introducción, Customización y Faqs.
• [ ] Vincular cada componente con su representación en Figma, mediante un addon de storybook.
• [ ] Configurar un warning por el peso total de natalia-ui.
• [ ] Analizar si se van a usar los componentes que quedaron Deprecados.
• [x] Pasar el buscador de vuelos de las landings a natalia-ui.
• [ ] Hacer que la importación de componentes sea más sencilla:

//Cambiar 
import Button from 'natalia-ui/components/Atoms/src/Component-button'; 
//Por:
import { Button } from 'natalia-ui';

Estructura de un componente de natalia-ui

Ejemplo componente: "Cloud"

¿Dónde crearlo?

Dependiendo del tipo: ./src/components/Atoms/src/ ./src/components/Molecules/src/ ./src/components/Organism/src/

¿Con qué nombre?

Component-Cloud

¿Qué archivos debe tener?

• Cloud.js (Usar Named Export)
• Cloud.scss (Estilos deben respetar el estándar BEM o BEM in practice)
• README.md
• stories.js
• Está permitido tener otros js de soporte.
• Test aún por definir

Adicionales:

• No se deben importar archivos css y scss. El compilador de natalia-ui es el encargado de tomar todos los scss dentro de cada directorio y generar el bundle css. Para llamar a la clase usar:

import { cssModules } from '@ReactUtils';
const getClassName = cssModules();
...
<div className={getClassName('cloud')}> Nube de color </div>

Proceso interno de build (En REVISIÓN)

Versión Beta de natalia-ui:

Objetivo

Versión integración de natalia-ui

Objetivo

Versión productiva de natalia-ui

Objetivo