natalia-ui v1.5.47
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?
- Desde CLI, descargar clonar el repositorio
git clone git@repo.avantrip.com:react/natalia-ui.git
cd ./natalia-ui
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)
- Desde CLI, asegurarse de tener seteado el registro de NPM correcto:
npm set registry http://npm.apps.prd.devtrip.com.ar
- 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
- Ir al package.json del proyecto y subir la versión.
- Desde CLI, ir al root del proyecto y ejecutar
npm run build
- 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
- Hacer un git pull o git fetch de master para tener la última versión.
- Chequear en natalia-ui que no exista el componente.
- Chequear con el equipo de UX si el componente se puede reutilizar de otro existente.
- Informar en el canal de slack #desarrollo-frontend del desarrollo del nuevo componente.
Elegir conceptualmente el tipo de componente que se va a crear: átomo, molécula u organismo. Guía del paradigma Atomic Design
Creación
- Desde CLI, ejecutar
npm run create-component
y seguir las instrucciones.
Prueba
Desde CLI, ejecutar
npm run dev
para interactuar con storybookCómo instalar natalia-ui en una app
Desde CLI, asegurarse de tener seteado el registro de NPM correcto:
npm set registry http://npm.apps.prd.devtrip.com.ar
- Desde CLI,
npm install --save natalia-ui
- 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>