Codifica a la velocidad del diseño en Chakra UI Vue

Hola a todos. Mi nombre es Jonathan Bakebwa. Soy el creador y uno de los mantenedores de Chakra UI View, y también soy ingeniero de UI y gerente de ingeniería en RCT.ai. Durante el día, eso es lo que hago. También soy estudiante de último año de ciencias de la computación en el Instituto de Tecnología de Beijing, y estoy emocionado de estar aquí hoy en Vue.js London hablando sobre programación a la velocidad del design con Chakra UI View.

Voy a comenzar presentando Chakra UI como una biblioteca de componentes. Chakra UI es una biblioteca de componentes centrada en la accesibilidad. Y lo que eso significa es que todos los componentes en la biblioteca de Chakra UI han sido construidos desde cero cumpliendo con las especificaciones de WAI-ARIA para componentes creados por el autor.

También hemos incorporado la capacidad de extender el tema de los componentes de Chakra UI, y esto se vuelve mucho más fácil en la versión V1, y la forma en que lo hemos hecho más conveniente es que ahora puedes anular los estilos iniciales renderizados para los componentes que están nativamente dentro de Chakra UI. También hemos agregado más características que te permiten definir variantes personalizadas, tamaños personalizados, e incluso crear tus propios componentes personalizados y tematizarlos usando Chakra UI. Y lo que esto permite es tener un código más conciso y una implementación más rápida de las interfaces de usuario. Así que vemos esto como un paso hacia la reducción de la brecha entre el design y el código, especialmente en el contexto del navegador.

Para la versión V1, hicimos una reescritura completa en TypeScript. Y lo que hicimos fue reimplementar la API de temas, y quiero hablar sobre la API de temas porque ese será el enfoque de esta charla. También pudimos implementar algunos componibles. Y lo que hicimos fue que al escribir los componentes para V1, dividimos una de la lógica en componibles, y el componente solo tuvo que lidiar con los estilos para ese componente. Esto te permite consumir algunos de los hooks que se usan comúnmente. Eso significa que no necesitas importar otra biblioteca de terceros para los hooks que estamos exponiendo.

Otra cosa que hemos agregado en la versión V1 es una API de fábrica. Esta API de fábrica proporciona algunos componentes primitivos que puedes estilizar directamente. Y también puedes, ya que es una función, usarla para... también puedes proporcionar un componente que inicialmente no está estilizado con Chakra UI. Y este componente podrá... El valor de retorno será el mismo componente, con las mismas props, todo será lo mismo. Con la diferencia de que ahora puedes agregar algunos props de estilo y funcionará nativamente. Entonces, con la nueva API de Temas, también puedes definir componentes personalizados. Y también hemos proporcionado una nueva API con el uso de la configuración de estilo. Y lo que esto te permite hacer es definir estilos dentro de tu tema, y luego puedes consumir esos valores cuando creas tus propios componentes personalizados. Y gracias a la comunidad por trabajar con diferentes herramientas como Volar y con Vite, todo esto se vuelve mucho más fácil si estás utilizando Vue 3. Definitivamente recomendamos usar Vite para Chakra UI Vue, Vue V1.

Si tienes Webpack, también es posible usarlo. Algunas de las ideas que estamos explorando en las versiones posteriores de V1 serían una compilación sin tiempo de ejecución. Y lo que esto permitiría es que recorramos todo el contexto de tu plantilla porque nos dimos cuenta de que la mayoría de nuestros usuarios usan Chakra UI para definir propiedades estáticas, propiedades de estilo estáticas en los componentes. Y así, lo que también podemos hacer es recorrer toda tu plantilla y luego extraer esas propiedades de estilo en CSS que luego inyectaremos en tus estilos de componentes de archivo único.

También estamos planeando, en el futuro, también estamos planeando usar máquinas de estado para componentes con mucha lógica. Por ejemplo, el acordeón tiene mucha lógica que tenemos que calcular y muchos estados que tenemos que gestionar. Y la mejor manera de lidiar con esto que descubrimos como equipo fue usar máquinas de estado. Y esto nos permite que la máquina de estado solo devuelva el estado actual que luego desestructuramos en los componentes que se representan en la página. Esto lo hace mucho más conveniente de usar y es ciertamente una buena manera para nosotros de compartir lógica. Y así, en el futuro, si alguien decide construir Chakra UI para Svelte, no tiene que reescribir toda esta lógica y usar efectos secundarios para cosas que probablemente ya existan dentro de una máquina de estado, solo necesitan acceder a ese estado y luego proporcionarlo a sus componentes, lo cual es realmente conveniente.

Entonces, ¿qué viene dentro de la API de temas de V1? Como mencioné antes, vamos a proporcionar anulaciones de componentes, que veremos hoy. También proporcionamos una API de variantes personalizadas. También proporcionamos la capacidad de crear tamaños personalizados para tus componentes. También proporcionamos la API de función de fábrica y componentes personalizados. Así que para la charla de hoy, quiero centrarme en tres atributos que cubrirá la API de temas dentro de V1. El primero, entre tantos, por cierto, ya que vamos a tener tiempo, solo podemos hablar de tres. El primero será las anulaciones de componentes. Entonces, dentro del objeto de tema, para aquellos de nosotros que estamos bastante familiarizados con la V1, de V0.x de Chakra UI, dentro de las opciones del complemento, hay un valor llamado extender tema. Y en el tema extendido, para V1 hemos agregado una clave llamada componentes. Entonces, esta clave de componente te permite anular los estilos base para el componente que elijas anular dentro del tema extendido. Entonces, cuando defines los estilos base, esos estilos se aplican a todos los botones. Así que no necesitas crear un botón personalizado para hacer eso. Lo segundo que hemos permitido hacer es definir variantes personalizadas. Ahora, dentro de Chakra UI, puedes crear una variante personalizada para ese componente que esperas consumir la variante. Y finalmente, puedes definir tamaños personalizados, lo cual es realmente conveniente para crear un botón extra grande. Si necesitas un botón que tenga 100 metros de ancho, ahora puedes hacerlo con Chakra UI View, aunque no te aconsejaría crear un botón de 100 metros de ancho, no cabría en la pantalla. Pero ciertamente es posible.

Veamos todo esto en acción, cómo vamos a implementar esto, esto, cómo vamos a ver estas cosas en acción. Para empezar, fui en línea y traté de recopilar una interfaz de usuario con algunos componentes personalizados que no están implementados dentro de Chakra UI. Así que mirando muy rápidamente esta interfaz de usuario, puedo ver que hay un botón aquí y este botón parece tener un tema diferente en comparación con los estilos predeterminados que se proporcionan dentro de Chakra UI.

Y hay esta variedad de un botón sólido que tiene un estilo negro, un fondo negro, los bordes están redondeados. Y también está este, este, este, este, este estilo aquí. Así que ya podemos ver que ciertas cosas están siendo compartidas por los botones.

La segunda cosa que puedo ver aquí es que la altura de este botón no es realmente la misma que la de este botón. Así que este es un tamaño diferente y es posible que necesitemos crear un tamaño personalizado para este componente. Está heredando iconos de una biblioteca externa porque no tenemos este icono dentro de Chakra UI de forma nativa. Así que es posible que necesitemos usar un icono personalizado.

Así que voy a seguir adelante y crearé un proyecto que luego podremos clonar, luego básicamente intentar reimplementar esto usando Chakra UI. Y lo bueno de esto es que no vamos a reescribir toda la lógica del botón porque necesitamos que el botón se vea diferente y no vas a escribir estilos anidados adicionales para asegurarte de que el botón se vea como quieres que se vea. Simplemente puedes definir estos y crear una nueva variante personalizada dentro del objeto de tema o puedes decidir anular completamente el botón y hacer que todos los botones compartan estos estilos. Así que sumerjámonos y veamos cómo se ve eso.

Creo que lo primero que vamos a hacer es intentar clonar este botón usando Chakra UI e intentar implementarlo. Sabes, voy a suponer que un diseñador me lo entregó y en la mayoría de los casos probablemente ya conozco todas las diferentes medidas de todos los píxeles sobre los radios y todo lo demás en particular, pero puede que no profundicemos tanto. Solo quiero mostrarte lo fácil que es implementar la representación visual de este botón.

Lo primero que voy a hacer es clonar mi inicio de Chakra UI Chidori. En realidad, creo que es un buen inicio. Lo usaré para mi proyecto. Así que si alguna vez quieres tener un proyecto que ya esté utilizando Chakra UI, simplemente ve a mi nombre de usuario de GitHub slash Chakra UI Chidori starter. Así que lo copiaré y lo clonaré. Abriré mi terminal y lo clonaré. Lo siento. Abriré mi terminal de nuevo. Y me dirigiré a mi directorio de proyectos y luego clonaré, uh, esto, bueno, debería haberlo pegado. Bueno, no lo pegué. Así que lo copiaré de nuevo. Clonaré eso. Y lo llamaré ChakraButton. Correcto. Llamaré a esto ChakraButton. Iba a intentar clonar ese botón.

Genial. Y aunque esto fue, oh, fui muy rápido. Voy a ingresar al directorio. Creo que se llama ChakraButton. Ejecutaré yarn install y yarn dev, y abriré el mismo directorio en una nueva terminal y lo abriré en VSCode. Así podemos ver qué hay dentro de este proyecto. Muy bien, déjame abrirlo en pantalla completa.

Genial. Eso es perfecto. Lo primero en lo que estoy interesado en ver es nuestro archivo main.ts. Este proyecto está estructurado con Chakra UI, con diseños, rutas y también un sitio generado estáticamente. Así que es bastante bueno. Lo primero que voy a ver aquí es dentro de nuestro complemento de Chakra UI, vemos que hay esta opción de extender el tema que vimos, y voy a hacer clic en el tema y dentro del tema aquí, es donde está toda la definición de nuestro tema. Dado que vamos a volver a implementarlo desde cero, voy a eliminar todo lo que hay aquí porque no lo necesitamos porque somos salvajes. Estoy bromeando, y lo voy a eliminar. También voy a ir al archivo index.view y eliminar todo lo que hay dentro. También voy a eliminar estos otros estilos porque no creo que los necesitemos. No, no creo que los necesitemos. No creo que los necesitemos. Y simplemente escribiré aquí un hola mundo para asegurarme de que todo funcione. Aquí podemos ver nuestro servicio de desarrollo en ejecución. Voy a abrirlo en una nueva pestaña. Y si actualizo esta página, ahí está, ahí está nuestro hola mundo. Está vacío. La página está vacía. No hay vacío. Y vamos a hacer algunas modificaciones simples aquí. Lo primero que quiero hacer es importar esta familia de fuentes porque me parece que se está utilizando una familia de fuentes muy especial aquí.

Así que voy a ir a fonts.google.com. Y parece que se parece a Pop-Ins. Así que voy a buscar directamente Pop-Ins. Lo he estado usando mucho, así que puedo reconocer Pop-Ins. Y voy a obtener este estilo. Tal vez queramos usar el estilo en negrita. Así que también voy a copiar eso.

Creo que también vamos a usar el estilo regular. Así que copiaré todo este enlace y lo pondré dentro de nuestro archivo index.html. Esta plantilla viene configurada con Inter, pero no creo que lo necesitemos para esta demostración. Vamos a reemplazar Inter con la familia de fuentes Pop-Ins. Y finalmente, me gustaría que nuestro tema, le pediré a nuestro tema que, donde encuentre el valor de la familia de fuentes definido como cuerpo o como encabezado, me gustaría que use la familia de fuentes Pop-Ins. Para hacer eso, volvemos a nuestro archivo de tema y vamos a las fuentes. Y aquí hay una propiedad llamada cuerpo, y para el cuerpo, quiero usar esto. Y también para nuestros encabezados, me gustaría que usen la misma familia de fuentes. Y así puedo heredar eso diciendo, me gustaría que todo lo que está aquí dentro, me gustaría que herede la familia de fuentes del cuerpo. Cuerpo. Esto debería hacer referencia a lo que tenemos dentro de nuestra definición de tema aquí. Así que eso es genial. Ahora puedo ir al navegador. Y si actualizo la página, ya puedo ver que hay una familia de fuentes allí. Si lo inspecciono, puedo ver que hay una familia de fuentes llamada fuentes cuerpo. Y si hacemos clic en eso, o si intentamos buscar eso, fuentes cuerpo, la definición, debería estar en algún lugar aquí. Sí, fuentes, fuentes cuerpo. Ahí está. Ahí está nuestro Pop-Ins. Increíble. Voy a hacer zoom para que todo sea un poco más claro aquí para nosotros. Genial.

Y nuestro botón, ahora, podemos ver que tiene este fondo negro.

Y también puedo ver que todos los botones tienden a tener este radio de borde cuadrado. Así que voy a ir dentro de nuestro tema y voy a definir eso para nuestros botones. Pero primero necesitamos un botón. Ahí está. Y creo que el texto dentro del botón dice, comenzar. Entonces, de entrada, está bien, hay un botón de Comenzar, no se parece en nada a nuestro botón que vemos en nuestro design. Así que voy a ir y primero definir los radios de borde y los pesos de fuente.

Entonces, bajo la clave de componentes, tengo un componente de botón, ¿verdad?, y luego voy a encontrar el estilo base. El estilo base, quiero que tenga un radio de borde de ninguno. Todos estos son atajos que Chakra UI ya tiene incorporados. Así que puedes usar directamente los atajos aquí. Me gustaría que tenga un peso de fuente, creo que regular. Bien, con suerte, esto debería haber reemplazado esos valores dentro de nuestro... Muy bien, eso es genial.

Lo siguiente que quiero hacer es que me parece que esta es una variante diferente. Este botón negro es una variante diferente en comparación con este otro. Así que voy a ir y definir una clave de variantes. Variantes y quiero crear una, veamos, ¿cómo lo llamamos? Llamémoslo una variante oscura, ¿de acuerdo? La mayoría de las personas probablemente usen algo como primario o algo así. Solo lo estoy usando para que sea fácil de recordar. Puedes nombrarlos como quieras. Así que voy a darle un fondo negro. Le voy a dar un color blanco. Y si vuelvo, por supuesto, no se aplicará. La razón de eso es que necesitamos agregar la propiedad de variante aquí. Entonces podemos decir que la variante es, supongo que la llamamos oscura. Y si volvemos a nuestro navegador, debería haberse actualizado. Oh, perfecto. Ahí está. Genial.

Lo segundo es, si volvemos al tamaño predeterminado, al tamaño predeterminado aquí, podemos ver que en realidad es un poco más pequeño de lo que debería ser en comparación con el botón aquí.

Así que voy a crear un tamaño personalizado y dentro de este tamaño, me gustaría que tuviera un padding muy específico. Así que volvamos a nuestro tema y creemos un tamaño personalizado. Para eso, lo colocaremos bajo la clave de tamaños, y me gustaría que tuviera un valor de Excel.

Ahora, solo para mostrarte que no existe en la biblioteca, no tenemos un botón de Excel, así que podemos decir Excel o el tamaño sería Excel. Y esto debería romper nuestro botón, porque si definimos un tamaño que no existe o perfecto, está roto. Tal vez usemos un tamaño llamado huge. Usemos huge, porque puedes nombrar estos tamaños como quieras. Así que quiero un botón huge. Y para esto, me gustaría que tuviera un padding x de 6 por 4, que son aproximadamente 24 píxeles. Creo que tiene sentido. Voy a usar seis. En Chakra UI, tenemos una cuadrícula de cuatro píxeles. Y así podemos establecer, podemos calcular cuántos píxeles se están utilizando. Y permite cierta consistencia visual en la página. Y para nuestro padding y, me gustaría que el botón grande tenga alrededor de 12, tal vez 16 píxeles a cada lado. Genial. Y genial. Ahora puedes ver que nuestro botón está heredando los estilos. Y solo voy a hacer zoom. Así podemos ver eso. Genial. Este es el tamaño que pasamos como prop en el tamaño huge.

Lo último y final aquí, como podemos ver, es que nuestro botón tiene este icono, y no creo que tengamos este icono dentro de Chakra UI en los iconos internos. Entonces, ¿cómo solucionamos este problema? Me gusta usar los iconos de pluma. Solo voy a ir a feathericons.com. Y ya configuré estos data para que funcionen con los iconos de pluma. Y voy a buscar la flecha. Y creo que el nombre de ese icono es arrow up right. Perfecto, ya podemos encontrar el icono que necesitamos, así que no necesitamos hacer muchas acrobacias para eso. Y vamos a nuestros iconos de utilidades.

Y si te preguntas cómo pudimos definir estos, dentro del archivo principal de TS, importamos el objeto de iconos de este archivo. Así que voy a entrar aquí y exportarlo desde la biblioteca. Entonces, arrow, era arrow up right, ¿verdad? Y luego voy a ir dentro de nuestra plantilla y voy a definir un icono izquierdo. Así que diré aquí, el icono izquierdo debería ser igual a la flecha hacia arriba y hacia la derecha. Y si vuelvo a nuestro navegador, o no está bien, es el icono correcto, puedo golpear correctamente. No puedo mostrar incorrectamente, solo estaba posicionado incorrectamente. Olvidé posicionarlo de la manera correcta. Creo que debería estar aquí. Muy bien, genial. Increíble. Tenemos un botón perfectamente similar. Y no creamos un componente completamente nuevo, solo definimos una nueva variante personalizada, definimos un tamaño personalizado. E incluso importamos un icono de una biblioteca externa. Y hemos vuelto a implementar esto sin tener que reescribir todo el botón. Y nos ahorra mucho tiempo en comparación con tener que haberlo escrito nosotros mismos. Y si queremos, podríamos usar un tamaño de botón como grande en caso de que necesites que sea más pequeño. Y este tamaño se reflejaría dentro de la plantilla. Creo que debido al zoom, tal vez la diferencia en el efecto no sea tan grande. Creo que probablemente sea lo mismo. Pero sí, eso es todo cuando se trata de usar Chakra UI. Pero también podríamos hacer lo mismo para esta otra variante, esta probablemente sería tu variante secundaria si fuera una variante primaria, y puedes hacerlo usando Chakra UI. Genial. Con Chakra UI, te permite escribir menos código y tener un poco más de velocidad al implementar nuevos diseños de interfaz de usuario que tu equipo de diseño te entregará. Para comenzar con Chakra UI, puedes dirigirte a view.chakraui.com o también puedes seguirnos en Twitter. También puedes consultar nuestro repositorio v1, que es chakraui.com/ChakraUIViewNext. Si quieres ver nuestra v0.next, simplemente omite el 'next' del enlace del repositorio de GitHub y podrás ver la versión actualmente lanzada. Así que si quieres comenzar con esto, simplemente dirígete a next.view.chakraui.com y podrás comenzar con nuestra API v1. Y estoy deseando ver lo que has construido, lo que construyas con esto y estoy feliz de responder cualquier pregunta y estoy muy emocionado de estar aquí hoy. Muchas gracias por la oportunidad y te deseo un excelente resto de tu día. Que tengas una maravillosa noche. ¡Adiós, adiós!