🤔

¿por qué crear una styleguide?

Brinda un conjunto de patrones y

pequeñas partes reutilizables

Sirve para mantener la consistencia

y la identidad de una ORGANIZACIÓN 

promueve mejores PRÁCTICAS y simplifica el

trabajo de los desarrolladores

🚀

¿cómo evolucionar

nuestra styleguide?

Documentar fuentes,

variables, colores y sus usos

Comenzar a extraer patrones

de nuestros productos

Asignar MAINTAINERS para regularizar

componentes y REFACTORIZAR proyectos

hacer nuestra styleguide pública

https://github.com/auth0/styleguide

http://styleguide.auth0.com/

🛠
¿cómo agregar una LIBRERÍA de react components?

Ventajas de usar react

👥   Ecosistema

🖼   Abstracción

🏋   Flexibilidad

Decisiones a la hora de crear una

LIBRERÍA de react components

¿cómo manejamos los estilos?

- CSS plano (con alguna naming convention como BEM, SMACSS, etc)

​- CSS Modules (estilos con scope local)

- CSS in JS (aphrodite, styled-components, radium, styled-jsx, etc)

¿cómo manejar los distintos paquetes?

Utilizamos una herramienta llamada Lerna para manejar la styleguide como un mono-repo.

¿Cómo consumir nuestra libreria?

Generamos bundles de ES6 modules (dead code elimination e inlining), CommonJS y UMD.

¿Cómo probar nuestros

componentes en desarrollo?

Usamos StoryBook para desarrollar y mostrar distintos estados de nuestros componentes.

¿CÓMO Documentar

nuestros componentes?

Usamos react-docgen para generar documentación automáticamente.

interactuar con los componentes

Codepen nos permite hacer un POST para rellenar las opciones del pen con el código de ejemplo (tutorial).

¿cómo asegurar la consistencia

entre componentes?

Podemos agregar una configuración de ESLint para React y especificar guidelines para enforzar cierto estilo en nuestros componentes.