1.5.47 • Published 2 years ago

natalia-ui v1.5.47

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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

DirectorioFunción
storybookConfiguración de storybook, babel, webpack con loaders de sass y css, add-ons, loader de stories de componentes.
docsDocumentación en formato MDX storybook
srcFuente del proyecto que sirve de base para generar el distribuible dist.
testDesignado 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.
distDistribuible completo de natalia-ui listo para publicar al repositorio de NPM
utilsLó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

  1. 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

  2. Desde CLI, asegurarse de tener seteado el registro de NPM correcto: npm set registry http://npm.apps.prd.devtrip.com.ar

  3. Desde CLI, npm install --save natalia-ui
  4. 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.
  • Probar natalia-ui con IE11 (compatibilidad con QV).
  • Documentar la forma de aprobar componentes nuevos (branch y MR).
  • 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.
  • 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