Innovar con React

Hola a todos. Mi nombre es Cristobal Chao. Vivo en la ciudad de Nueva York, pero probablemente puedas notar un acento. Soy originario de España. Vine a los Estados Unidos hace 10 años. Viví en San Francisco y ahora vivo en Nueva York, cada vez más cerca de Europa poco a poco.

Vamos a empezar. Aquí, probablemente ya lo tengas frente a ti. La, la Tabla de Contenidos que estoy compartiendo contigo en este momento. Así que lo que podemos hacer es que tenemos dos tipos de navegación en este nivel. Uno es que puedes hacer clic en cualquiera de estas secciones y te llevará allí, o puedes hacer clic aquí en la esquina superior derecha junto a `next` para ir a la siguiente sesión. Muy bien. Cubriremos la introducción, solo un poco de introducción. Luego configuraremos el entorno de desarrollo y tendremos tres secciones de implementaciones donde cubriremos lo básico de implementar un sistema de diseño en React. Y luego iremos agregando más y más complejidad. Muy bien, al final, en el nivel superior, esa es la parte que cubriremos al final, muy, muy al final. Pero en cualquier caso, creo que es la parte más emocionante. De todos modos, vamos directo al grano. Sé que hay un comentario. Muy bien, déjame verificarlo. Sí. Y bien, es hora de empezar, chicos.

Así que la introducción. Bueno, antes de entrar en esto también. Si en algún momento te quedas atascado, cada sección, excepto la introducción, tiene el archivo descargado al final. Así que imagina que estás en la siguiente sección, en la configuración del entorno, y te quedas atascado en algún lugar aquí. Siempre puedes obtener lo último de esta sección al final. Tienes el enlace aquí abajo. Muy bien. Sé que es posible que te quedes atascado. Así que siempre puedes volver al buen camino, ¿de acuerdo? De todos modos, introducción, chicos. Entonces, ¿qué es un sistema de componentes? Muchas personas tienen opiniones diferentes sobre lo que es un sistema de componentes. Pero al final del día, es una única fuente de verdad, ¿verdad? Tienes todos los elementos que se utilizan en tu aplicación que básicamente comunican los valores de tu aplicación, el tono de voz, las pautas, ¿verdad, los patterns? Y no es un producto terminado, ¿verdad? A veces pensamos que un sistema de componentes es solo el producto final, pero no lo es. Al final del día, es cómo se verá el producto para que las cosas sean más consistentes, ¿de acuerdo? ¿Quieres tener un sistema de componentes si quieres ver si quieres obtener una aplicación consistente y cohesiva? Creo que si tienes una empresa pequeña, probablemente no estés pensando en esto. Pero al final del día, esto te perjudicará. Y te perjudicará de dos maneras. Una forma es a nivel de usuario, la gente se confundirá, como, ¿dónde estoy? Y desde la perspectiva de un desarrollador, no estás aprovechando eficientemente al máximo, porque una vez que tienes un sistema de componentes, puedes reutilizar cosas. Y la gente sabe cuál es lo último y lo mejor. Así que es una gran fuente de comunicación. Muy bien. Vamos a pasar a la configuración del entorno. Ahora, tengo que decir. Voy a hacer esto contigo. Así que instalaremos todo desde cero. Voy a tener esto lado a lado. Y si tienen alguna pregunta, avísenme. Pero no podré responder a todas. Muy bien. Tengo mi terminal a la derecha. Tengo a la izquierda donde también deberías estar. Y vamos a instalar los paquetes primero. Puedes hacerlo uno por uno si no tienes NPX o si no tienes yarn. Yo usaré yarn. Muy bien. Pero si lo tienes, si usas NPM, está bien. Solo entiende que cada vez que veas un comando en yarn, tendrás que traducirlo a NPM. Muy bien. Creo que es bastante sencillo. Pero de todos modos, vamos a crear una nueva aplicación React. Supongo que todos ustedes saben qué es esto. Hay enlaces a la documentación aquí, pero también tengo el fragmento aquí mismo. Solo copia esto y pégalo. Si no tienes NPM, necesitas instalarlo en este primer comando aquí. Muy bien. Voy a ampliar esto un poco. Por si acaso no lo ves bien. Otra cosa mientras instalo esto, lo haré en Visual Code. Creo que puedes usar cualquier IDE que quieras, pero es posible que encuentres algunos problemas con algunas de las cosas que explicaré. Pero lo cubriremos en un segundo. Pero si tienes Visual Studio, genial. Si no, mucha suerte. Muy bien. Espero que puedas llegar a cualquier parte. Pero por si acaso, solo te lo digo. Estamos instalando una nueva aplicación React desde el principio. Lo estoy haciendo con Vue. Si tienes Visual Studio, comienza ahora porque llegaremos allí en un segundo. Muy bien. No veo ninguna pregunta. Espero que no sean tímidos. Muy bien. Genial. Así que instalamos nuestra aplicación React, y ahora podemos pasar al siguiente nivel, que es ir a nuestra nueva carpeta y comenzar el servidor. Hago yarn start. De nuevo, si estás usando npm, será npm run start. Muy bien. Hay nuevas personas que se unen. Muy bien. Genial. Acabo de ejecutar la aplicación. La veo aquí. Probablemente estés familiarizado con esto. Ya lo has visto antes, supongo. De todos modos, voy a volver a nuestra presentación, a nuestro taller, y lo primero que vamos a hacer es abrir nuestro IDE. En este caso, usaré Visual Studio, como mencioné. Y vamos a hacer una limpieza. Muy bien. Hay algunos archivos que no necesitamos. Uno de ellos es report vitals, y el otro son las pruebas. Muy bien. Las pruebas son muy importantes, chicos. No me malinterpreten, pero para esta presentación, para este taller, no las necesitamos. Así que voy a eliminar esos para que las cosas estén un poco más limpias, ¿de acuerdo? Voy a eliminar estos archivos. Report web vitals, setup tests. Todos eliminados. Si ahora voy a index JS, tendré que eliminar algunos de estos archivos y algunas de estas instancias porque no queremos que estén aquí, ¿de acuerdo? En el package JSON, también puedes eliminar algunas de las cosas que no necesitamos, como algunas de estas dependencias en la parte superior, no las necesitamos. Pero como ya las instalamos, quiero decir, está bien.

Lo mismo con las métricas web, podemos simplemente eliminar eso, ¿de acuerdo? Genial, voy a ampliar esto un poco para que también puedas verlo, ¿de acuerdo, fantástico? Y voy a verificar de nuevo que esa aplicación React todavía esté en funcionamiento. Muy bien, genial. Así que limpiamos nuestra aplicación con las dependencias necesarias. Lo siguiente es instalar un storybook. Así que tienes este fragmento justo ahí y puedes usarlo en tu terminal. Muy bien. Así que espero que estén conmigo en este momento. Y si te quedas atascado, nuevamente, siempre puedes seguirme al final, tienes el enlace para descargar el código. Necesitarás instalar las dependencias y ejecutarlo pero siempre puedes volver al buen camino, ¿de acuerdo? Así que estamos instalando un storybook. Por cierto, ahora vamos a ejecutar esta instancia de storybook. Y solo quiero decir que vamos a tener dos servidores diferentes en funcionamiento. Uno de ellos es un storybook, y otro es nuestra aplicación. La razón principal por la que quiero mostrarte los dos es para mostrar los componentes reutilizables que crearemos. Al final del día, storybook se utilizará como nuestra biblioteca y la aplicación es para mostrar que podemos reutilizar estos componentes en otros lugares. Así que te recomiendo tener estas dos pestañas en tu terminal o como sea que lo hagas abierto y es posible que necesites una tercera si quieres hacer algo más. Así que tengo esta pestaña aquí. La voy a llamar Storybook y esta otra pestaña aquí, la voy a llamar aplicación. Para mí, puedo ver dónde estoy, ¿de acuerdo? Vale, tenemos más personas que se unen. Ahora, las cosas están sucediendo porque estamos instalando algunas instancias, creo. Así que lo que voy a hacer, voy a reiniciar el servidor de la aplicación y ahora se ha instalado nuestro storybook. Y lo que puedo hacer es escribir jarn storybook. Así que ejecuto este segundo servidor y por lo general esto se ejecutará en el puerto 6006, ¿de acuerdo? Si tienes algo en el puerto 6006, te preguntará y probablemente necesitarás responder que sí y lo obtendrás en el siguiente puerto que es el 6007, ¿de acuerdo? Entonces, un storybook se está iniciando y lo tenemos aquí en el lado izquierdo, puedes verlo. Así que voy a mostrarte un poco sobre qué es el storybook, si no lo has visto antes. Así que storybook te permite tener toda la documentación que necesitas para tu única fuente de verdad. Esta página aquí es en realidad, puedes encontrarla en SRC stories e Introduction Stories. Te recomendaría instalar una extensión para ver correctamente el MDX porque esto es terrible, pero en cualquier caso, todo lo que está aquí se está ejecutando aquí en el lado izquierdo. Como si cambio esto de Bienvenido a storybook a Bienvenido a Innovate con React. Debería ver eso en tiempo real en el lado izquierdo. Muy bien, no vamos a tocar este archivo más. Lo voy a cerrar. Pero también te mostraré algunos de estos componentes que vienen de forma gratuita al instalar un storybook. Este es el primer componente que tenemos, que es un botón. Y hay diferentes estados de este botón que puedes ver en el lado izquierdo para mostrar una visión general de sus capacidades. También puedes tener estos controles, que están aquí abajo, y puedes activarlos y desactivarlos. Entonces, el primario es una propiedad primaria y puedes ver cómo se comporta cuando es falso y cuando es verdadero. También puedes cambiar la etiqueta a lo que quieras, luego con react, por ejemplo. Puedes cambiar el color de fondo de los componentes. Y luego el tamaño aquí. Hay algunas acciones que creo si haces clic en ellas, también puedes verlas, e interacciones, para ser honesto. Todavía quiero averiguar qué es eso. No lo he usado. Luego la documentación, que es bastante emocionante. Tenemos la documentación de forma gratuita. Y eso nos permite, cuando incluso estamos cambiando el estado de nuestro componente, obtener el código en cada estado. Podemos copiarlo y pegarlo en otro lugar. Bastante simple. Entonces puedes venir aquí, cambiar un poco el estado, y copiar el componente y pegarlo en tu IDE. También puedes ver otras historias. Y también hay cosas más emocionantes aquí. Hay controles. Puedes hacer zoom, si solo quieres asegurarte de que las cosas funcionen bien. También puedes tener fondos oscuros o fondos claros. También tienes la capacidad de ver cómo responden en diferentes tamaños de pantalla, móvil pequeño, vista previa predefinida. Puedes ver estas pautas, pero si eres un desarrollador, probablemente no obtendrás mucho de esto porque estás acostumbrado a las herramientas de desarrollo, como yo. Pero esta es una única fuente de verdad que también se supone que deben usar personas que no son técnicas. Como si compartes esto con diseñadores, también pueden ver lo último y lo mejor. Y para ellos es bastante fácil de usar herramientas como esta, donde puedes obtener todas las diferentes rellenos, márgenes y todas las diferentes pautas de tu componente. Así que tienes algunas herramientas aquí. Algunas de ellas son útiles. Algunas de ellas probablemente no sean tan útiles. Luego, la última parte que quiero mostrarte es button.stories, stories.jsx. En realidad, es el archivo que se está representando. Este en el lado izquierdo, ¿verdad? Si miras esto, en el siete, dice ejemplo botón. Ese ejemplo es cómo quieres organizar. Entonces, todo lo que está a la izquierda de esta barra, es donde este componente va a vivir en nuestra navegación izquierda. Hay esta sección plegable, se llama ejemplo. Si cambio esto, digamos biblioteca en lugar de ejemplo, estamos teniendo un problema, pero tan pronto como haga clic en otro lugar, entonces verás nuestro componente allí, bien, ahora está bajo biblioteca. Tan pronto como cambie esto, irá donde quiera. Y la razón por la que tienes un error es porque esta instancia de storybook está cambiando constantemente la URL cuando cambio cualquier estado, ¿de acuerdo? Entonces, si cambio esto a otro lugar, ¿verdad?, como luego en biblioteca, no tengo nada más, y ahora está dando un error, ¿verdad? Ahora está bajo FF, ¿verdad? Voy a volver a biblioteca, lo voy a guardar, y probablemente verás que funciona. Y esto también, esto está sucediendo porque tenemos toda la recarga sucediendo, ¿verdad? Así que ten en cuenta eso. Si te encuentras con problemas, a veces es solo cuestión de cambiar donde estás en un storybook, ¿de acuerdo? Luego tenemos aquí algunos arquetipos, y estos arquetipos están definiendo algunos de los controles que tenemos aquí. Ves el control de fondo, pero también tenemos la capacidad de agregar otros argumentos en estos diferentes estados. Entonces tenemos primario, ¿verdad? Cada vez que hacemos un enlace de plantilla, está haciendo un enlace de plantilla de nuestro componente botón. Y este botón se está importando en la parte superior. Este botón en la parte superior, si quieres encontrarlo, también se llama button.jsx y tiene la información de nuestro componente, ¿verdad? Pero si vas a button.jsx, tendrás aquí lo que se está representando en la historia, ¿de acuerdo? Si cambio primario por otra cosa, como digamos taller, y luego también cambio este objeto aquí, nombre, entonces se llamará taller, ¿de acuerdo? Esto es solo el comienzo de storybook. Si no estás acostumbrado, esto es solo un vistazo de lo que obtendrás. Muy bien, también obtuvimos otros componentes como el encabezado y la página. Estos vienen de forma gratuita. Storybook nos da acceso a ellos. Una cosa que tenemos que hacer es que vamos a limpiar un poco las cosas, ¿de acuerdo? Y lo primero es esto está un poco desordenado ahora. Tenemos historias pero todo está dentro de las historias y no tiene sentido. Sabes, las historias se supone que son solo para un storybook, pero nuestros componentes deberían ser reutilizables. Queremos reutilizarlos en otros lugares. Así que no tiene sentido que tengamos nuestros componentes dentro de las historias. Entonces, lo que podemos hacer es vamos a crear una nueva carpeta llamada componentes dentro de SRC, ¿de acuerdo? Y esta carpeta va a tener los diferentes componentes que tenemos en las historias.

De acuerdo, así que vamos a movernos allí, el botón R, el CSS del botón R y todo se va a estrellar ahora, ¿de acuerdo? Porque estamos moviendo las cosas. Incluso vamos a mover el storage.jsx allí y voy a ir allí en un segundo, ¿de acuerdo? Voy a mover el encabezado. Voy a estar moviendo todo y como estoy usando Mac, lo voy a hacer aún más rápido, ¿de acuerdo? Así que voy a mover el encabezado y las páginas. Espera. Voy a copiar esto, pegarlo justo ahí y lo voy a eliminar por alguna razón. Mi CAD no funciona, así que tengo que eliminar después de copiar. Esto es terrible. De todos modos, componentes.

Entonces, en componentes tenemos todo allí, ¿verdad? Y lo que queremos en este punto es organizar las cosas un poco. Así que vamos a crear una nueva carpeta llamada botón y vamos a mover todas las dependencias del botón allí, el CSS, el JSX y las historias. Lo mismo con el encabezado, todo se está estrellando porque estamos moviendo las cosas. Con el encabezado, vamos a hacer lo mismo y con la página vamos a hacer exactamente lo mismo. ¿De acuerdo? Así que estamos moviendo las cosas a sus propias carpetas y todo se está estrellando porque todavía tenemos que hacer algunas configuraciones. Ahora todo está bajo botón, encabezado, página y componentes. Todo está mucho más organizado. Así que ahora vamos a ir al botón. Voy a cerrar esto. Y luego verás que nuestras historias de botón, JSX está importando nuestro botón pero no está importando nuestro botón por defecto, lo cual es bastante extraño por qué el equipo de storybook lo hizo de esa manera. Bajo botón, solo hay un botón. Por lo general, cuando tienes un componente reutilizable, quieres exportarlo como predeterminado. ¿Entonces, cómo exportamos esto como predeterminado? Apuesto a que sabes cómo hacerlo, pero vamos a hacerlo eliminando esta exportación y luego podemos exportarlo al final. También puedes hacerlo allí arriba, donde quieras. Estoy acostumbrado a usar esta forma de hacer las cosas. Así que voy a exportar por defecto el botón y luego en historias, solo voy a eliminar estas llaves porque ahora las estoy importando de una nueva forma predeterminada. Este componente aquí ya está allí y voy a verificar si está funcionando. Tal vez haya algo más que nos falte. El encabezado se está quejando. Entonces, el encabezado, lo mismo que hicimos con el botón. Entonces, el encabezado está importando nuestro botón. Vamos a eliminar esas llaves porque ahora lo estamos importando de esta forma predeterminada. Y lo mismo con el encabezado, vamos a exportarlo como predeterminado, ¿de acuerdo? Y en un segundo, vamos a hacer exactamente lo mismo para nuestra página. Si vas a las historias del encabezado, también verás que necesitamos cambiar, necesitamos eliminar esas llaves, ¿de acuerdo? Y porque tenemos esto y ese ejemplo, vamos a cambiar eso a biblioteca. Muy bien. Y luego, si veo aquí, esto todavía se está quejando. Dice, oh, si miras el encabezado, no es punto barra storybook, ¿verdad? Debería ser punto punto botón, ¿verdad? Nuestro botón ahora está en otro lugar. Pero aquí está la cosa, ¿verdad? Nuestro botón ahora vive bajo botón JSX. Entonces, para importarlo, tenemos que hacer esta cosa terrible, que es un botón barra botón. La página se está quejando. Vamos a ir allí. Vamos a arreglar lo que la página está diciendo aquí. Lo mismo, lo estamos importando por defecto, estamos encontrando el encabezado. Y para encontrar el encabezado, vamos a limpiar las cosas, chicos. No se preocupen, esto es terrible. Pero verán, lo vamos a hacer en un segundo. Muy bien, ahora las cosas se están renderizando. Nuestra página no se está quejando, pero también necesitamos eliminar esto, asegurándonos de que todo se importe desde una perspectiva predeterminada. Y el título debería ser biblioteca, como hicimos antes con el botón y el encabezado. Y ahora todo se ve bien. La página, algo está sucediendo con la página. Vamos a verificar. Oh sí, así que nuestra página debe ser exportada por defecto. Solo estamos limpiando esto un poco. Me pregunto por qué otros estudios lo tienen de esta manera. De todos modos, ahora tenemos la página. Ahora todo está mucho más limpio, pero no tan limpio como queremos. Este es un patrón muy, no sé, como este patrón aquí es terrible, chicos. Vamos a hacer dos cosas, ¿de acuerdo? Idealmente, vamos a usar rutas absolutas, ¿verdad? Y tengo eso como parte de la documentación. Como ves en la limpieza de storybook. Movemos los componentes de historias a componentes. Y la segunda cosa es habilitar rutas absolutas. Veo esta técnica bastante, bastante útil porque simplifica mucho tus importaciones. Y tan pronto como tengas esto bien configurado, que puedes hacerlo al principio de tu proyecto, entonces hace la vida mucho, mucho más sencilla. Si comienzas a construir tu aplicación sin estas bases, es muy fácil que el código se vuelva un desastre en otros lugares y las cosas comiencen a arrastrarse. Así que creo que si lo haces al principio del proyecto, te hará más feliz a ti y a todos tus desarrolladores. De todos modos, hay una nueva carpeta de la que no hablamos, que se llama punto storybook, y está en la ruta, ¿verdad? Esa carpeta aquí tiene dos archivos diferentes. Y esos son como los archivos que nos ayudan a importar todas las historias. Esos son parte del sistema de compilación cuando ejecutamos el servidor, ¿de acuerdo? Lo que vamos a hacer ahora es que puedes copiar y pegar todo y reemplazar todo el archivo. ¿De acuerdo? Pero lo que quiero que veas es la última parte porque esto es prácticamente lo que agregamos, ¿de acuerdo? Esta última parte aquí que dice Webpack final nos permite tener alias. Y los alias van a habilitar estas rutas absolutas o capacidades para un Storybook, ¿de acuerdo? Y como mencioné, tenemos un Storybook como un servidor y tenemos nuestra aplicación en otro servidor, ¿verdad? Tenemos un Storybook y tenemos nuestra aplicación. Esto solo influye en un Storybook, ¿verdad? Entonces, si queremos tener también rutas absolutas en nuestra aplicación y esta es la parte que quería mencionar antes, vamos a crear un nuevo archivo llamado js.config.js, ¿de acuerdo? Es posible que conozcas este archivo. Tiene una configuración básica para tu IDE y tengo esto en el punto número cuatro. Lo voy a hacer ahora mismo contigo. Sé que estoy yendo y viniendo, pero es mejor hacerlo una vez para que sepamos qué está pasando. Entonces, estamos agregando, lo siento, js.config.json, ¿de acuerdo? No js, json, disculpas por eso. Y lo que estamos haciendo aquí es establecer la base en SRC, ¿de acuerdo? Y lo que obtenemos son todas las capacidades que necesitamos para rutas absolutas para nuestra aplicación. Esto funciona en Visual Studio. No sé si todos los IDE te permiten tener esto. Entonces, si te quedas atascado porque esto no funciona para ti, es posible que solo quieras seguir con rutas relativas, ¿de acuerdo? En cualquier caso, ahora que tenemos nuestra aplicación configurada con la habilitación de rutas absolutas, así como nuestro Storybook, podemos ir a nuestro encabezado, por ejemplo, y en lugar de importar de esta manera, podemos hacer esto, componente/barra botón, ¿verdad? Si queremos importar cualquier otra cosa, como digamos que tenemos una carpeta llamada utils o constantes y su origen, diremos constante/barra el nombre del archivo en lugar de encontrarlos, ¿verdad? Lo cual a veces es muy engorroso porque puedes tener diferentes niveles de jerarquía diferentes entre diferentes archivos y diferentes carpetas. Se vuelve bastante, bastante desordenado. Así que hacemos esto, es mucho más simple, ¿verdad? De todos modos, ahora probablemente se rompa porque la última parte que necesitamos hacer es crear un nuevo archivo en cualquiera de estos componentes llamado index.js. Y este index.js va a indexar nuestro archivo. Puedes tomar este fragmento aquí en el punto dos. Y luego debes cambiar este nombre de componente. En este caso, será botón, ¿verdad? Esto está indexando nuestro botón, ¿de acuerdo? Algunas personas prefieren tener, en el index.js, la lógica del botón.

En realidad, no me gusta eso. Y la razón es que una vez que tu producto se vuelve más grande y grande, si estás usando Visual Studio, por ejemplo, te darás cuenta de que si quieres encontrar archivos, digamos, como quieres encontrar un botón, el índice, la búsqueda principal se mostrará aquí. Así que piénsalo, si tienes un componente llamado botón, otro componente llamado botón-icono, puedes tener otro componente llamado botón-grupo, ¿verdad? Obtendrás todos estos index.js mostrándose allí y tendrás que prestar mucha atención e intentar encontrar la ruta. De esta manera, si solo busco botón y lo veo allí mismo, y voy allí, ¿verdad? Es mucho más simple. Y de esta manera, solo estoy indexando el botón.

Entonces, ahora mismo en el encabezado, puedo importarlo de esta manera, que es mucho más simple. Si miras ahora, nuestro botón, CanResolveComponentsButton, ¿de acuerdo? Entonces, si esto sucede, debes reiniciar tu instancia de Storybook. Y olvidé decirte, pero cada vez que cambies archivos en el punto Storybook, debes reiniciar tu servidor, ¿de acuerdo? Necesitas reconstruir tu aplicación. Así que estoy reiniciando el servidor. Y veremos eso, con suerte, funcionando. Muy bien, aquí lo tienes. El botón está justo ahí. Funciona, los diferentes estados están ahí. Y esto es mucho más simple, chicos. Permíteme decirte que este patrón puede parecer, oh dios mío, hay tantos pasos. Una vez que lo haces dos o tres veces, se vuelve súper automatizado. Y puedes hacerlo en segundos.

Entonces ahora vamos a ir al encabezado y vamos a hacer exactamente lo mismo. Otro archivo index.js. Vamos a indexar nuestros componentes y vamos a hacer exactamente lo mismo. Por lo general, copio mi index.js de button y lo pego en el nuevo. Y luego cambio el nombre del componente. ¿De acuerdo? Y lo mismo vamos a hacer con la página. Así que otro, vamos a hacer como otro archivo en su página llamado index.js. Lo pegamos y cambiamos nuestro predeterminado. ¿De acuerdo? Ahora, si miramos nuestro encabezado, está funcionando. Pero creo que nuestra página, oh, nuestra página también está funcionando. Permítanme verificar nuestra página. Sí, pero nuestra página está importando nuestro encabezado de una manera muy, muy fea. Así que vamos a hacer ahora que tenemos rutas absolutas, componentes/encabezado, y eso debería funcionar. Muy bien, está funcionando. Y nuestro encabezado se ve bien y nuestro botón también se ve bien. Muy bien, así que limpiamos todo. Ahora tenemos rutas absolutas y estamos listos para continuar. Ahora, una cosa que tengo que mencionar es este botón aquí, es posible que encuentres que está bien, ¿verdad? Pero déjame decirte una cosa, no es accesible, ¿de acuerdo? Descubrí esto recientemente, y tenemos un complemento que podemos usar para ver qué está pasando aquí, ¿de acuerdo? Los complementos en Storybook, puedes encontrarlos en el sitio web y puedes obtener el fragmento aquí. Estamos usando yarn, si estás usando MPM, solo puedes copiar esto y pegarlo. Vamos a instalar este complemento de accesibilidad, creo que es muy, muy útil. Así que vamos a instalar eso, agregando una nueva pestaña, vamos a copiar y pegar ese fragmento, y esto se instalará bastante pronto. Muy bien. Mientras se instala, también podemos agregar este nuevo complemento en main.js, ¿de acuerdo? No necesitas copiar todo, solo asegúrate de obtener el complemento de Storybook/addon/A11Y, que significa Accesibilidad, ¿de acuerdo? Entonces, en main.js bajo Storybook, verás un nuevo, como hay una matriz que se llama addons. Cada complemento, quieres agregarlo aquí mismo, ¿de acuerdo? En este caso, vamos a crear una nueva línea y pegar esto Storybook/addon/accessibility. Dado que cambiamos nuestro main.js en Storybook, necesitamos reiniciar nuestro servidor, ¿de acuerdo? Pero esperemos hasta que se instale el complemento. Muy bien, parece que está instalado. Voy a reiniciar el servidor. Voy a reiniciar el servidor y veremos algo bastante genial en un segundo. Estoy reiniciando el servidor. Muy bien. Aquí lo tienes. No sé si notaste algo diferente, pero hay un nuevo icono en la barra de aplicaciones. Este aquí. Si haces clic en él, puedes ver cómo se comporta el componente con diferentes condiciones, ¿de acuerdo? De esta manera, te ayuda a comprender lo que está sucediendo desde diferentes perspectivas de usuario, ¿verdad? También hay otra pestaña llamada accesibilidad en tus controles. Por cierto, estos controles, puedes tenerlos aquí abajo o puedes configurarlos en el lado derecho usando este control aquí. Como tengo mi pantalla al lado de mi terminal, prefiero tenerlo ahí abajo. Pero también puedes tenerlo aquí. Por el bien de tenerlo aquí, lo mantendré aquí. Hay esta nueva pestaña llamada accesibilidad. Si haces clic en ella, esta es la parte más útil de este complemento, encontrarás cualquier problema de inmediato. Y como puedes ver aquí, esto es una violación. Está diciendo que los elementos deben tener un contraste de color suficiente. Por eso este componente no es accesible, ¿verdad? Entonces, ¿qué tenemos que hacer? Cambiar nuestro color de fondo o cambiar el color del texto, ¿verdad? Si cambiamos el color del texto, si vas a button.css y cambias esto a color, digamos negro, lo siento, negro. Lo siento, estoy usando JSX. JSX, esto es CSS, ¿de acuerdo? A veces tengo dificultades. Espera. Oh, está bien. Es un botón primario de Storybook, ¿de acuerdo? Color oscuro, blanco, lo vamos a cambiar a negro. Y es esto, ¿de acuerdo? Si vas y vienes con accesibilidad, ahora dice cero violaciones para pasar. Cero incompletos, mira. Este botón ahora es accesible, pero es feo. Es bastante feo, ¿verdad? Lo vamos a solucionar en un segundo, pero sí, este botón ahora es accesible, pero nuevamente, no es accesible. Bueno, es accesible, pero no es bonito, ¿verdad? Eso es lo que quería decir. Pero de todos modos, con este botón aquí, también podemos cambiar eso. En lugar de ser texto negro, también podemos cambiar el color de fondo, el azul, para que sea un poco más oscuro, para que sea accesible, ¿verdad? Pero en cualquier caso, lo mantendremos así por ahora. Lo arreglaremos en un segundo. Solo te estoy mostrando las capacidades de accesibilidad aquí, que creo que son bastante útiles porque puedes obtener esta información de inmediato para cualquier componente que tengas en Storybook. Muy bien, es algo bastante útil. Muy bien, ahora, volviendo a donde estábamos. Cambiamos el contraste de color primario porque no es suficiente. Y luego copiamos y pegamos en nuestra aplicación, y bueno, nuestra aplicación ahora no tiene el botón. ¿Qué tal si agregamos el botón ahí? ¿De acuerdo? Así que en lugar de este enlace, podemos simplemente importar, bueno, primero, necesitaremos importar nuestro botón. Y dado que ahora tenemos rutas absolutas, es mucho más fácil importarlos, ¿verdad? Porque sabemos que el botón está en components. Entonces, es import button from components/button. Es así de simple. ¿De acuerdo? Botón, botón aquí. Y veamos qué está sucediendo allí. De acuerdo, reiniciamos el Storybook, pero no reiniciamos nuestro servidor de React. Así que también necesitamos reiniciar el servidor de React, y esperemos que esto funcione. ¿De acuerdo? Cuando agregamos una nueva configuración de JS, esto, también necesitamos hacer lo mismo. No estamos viendo ningún botón. Oh, Dios mío, ¿qué está pasando aquí, chicos? Entonces, cuando esto te suceda, y esto es por qué Storybook es bastante útil. Siempre puedes ir a la documentación, obtener el código de tus componentes, copiar eso, ¿verdad? Y pegarlo, en este caso, en nuestro app.js. Muy bien, en lugar de adivinar lo que tengo que hacer, simplemente puedo copiar el estado de este componente en este nivel y verlo, ¿verdad? Mira, es tan simple como eso. En lugar de botón, podemos decir learnReact como era antes, y eso es todo. Así completamos nuestra primera sección del taller, nuevamente, si se quedaron atascados, pueden descargarlo e instalarlo ahora mismo. Estarán en este nivel, ¿de acuerdo? Ahora, vamos a pasar al siguiente. Así que vamos a presionar el botón siguiente en la esquina superior derecha, y vamos a entrar en cosas más interesantes. De acuerdo, importando fuentes. Una cosa que quiero mencionar es este botón aquí. Y nuevamente, esto también es algo que me sorprende ver, porque este botón aquí, si miras el CSS, se supone que se está importando en Unito Sans, ¿verdad? Pero, si te fijas bien y abres nuestras herramientas de desarrollo, e imagino que sabes cómo abrir las herramientas de desarrollo, clic derecho, inspeccionar. Si abres la pestaña de computadora en elementos y te desplazas hacia abajo, verás que se está mostrando Helvetica new, que es nuestra segunda opción en nuestra fuente. Entonces, Unito no se está importando. Y lo mismo ocurre con la aplicación. Entonces, tenemos que solucionarlo, ¿verdad? Tenemos que solucionarlo porque por alguna razón, el equipo de Storybook no lo agregó. Tal vez sabían que estábamos haciendo un taller. Entonces, tenemos que facilitar las cosas para todos. Y de esta manera, todos pueden aprender cómo importar fuentes.

Entonces, ¿cómo podemos importar esto? Bueno, lo que podemos hacer es ir a Google Fonts. No sé si conoces este sitio web. Es bastante genial y puedes encontrar fuentes aquí que en su mayoría son gratuitas. Creo que todas son gratuitas, pero de todos modos. Busqué por la nueva Unito sans, puedo hacer clic en ella y esta es una nueva versión de Google Fonts, que es bastante interesante porque creo que la versión anterior para mí era mucho más sencilla. Pero de todos modos, Unito sans está aquí y lo que vamos a hacer. Y no sé si estás familiarizado con Google Fonts, pero el concepto aquí es como si fueras una plataforma de comercio electrónico, pero todo es gratuito, ¿verdad? Entonces podemos seleccionar nuestras fuentes y enviarlas a nuestro carrito de compras, ¿verdad? En este caso, solo necesitamos la regular 400, así que podemos hacer clic en ese botón. Necesitamos el 700 y el 900, ¿verdad? Así que el 700 y el 900. Si esta navegación derecha no aparece, está debajo de este botón en la esquina superior derecha, ¿de acuerdo? Y puedes ver en la vista previa, este es nuestro carrito de compras con nuestras fuentes y es gratis, como puedes imaginar. Así que aquí podemos copiar esta sección. Y lo que tenemos que hacer es pegar esto en un nuevo archivo en la carpeta .storybook. Este archivo en la carpeta .storybook se llama preview-head.html, ¿de acuerdo? Y podemos pegarlo allí. También puedes encontrar esto en la documentación. Todo lo que te estoy explicando aquí está en la documentación. Como puedes ver aquí, lo importaremos como parte de preview-head.html. Entonces, ¿qué es este archivo? ¿Qué es este archivo que estamos agregando aquí? Dado que creamos un nuevo archivo en .storybook, necesitamos reiniciar el servidor. Y voy a reiniciar el servidor para que puedas ver qué está sucediendo. Pero, ¿qué es este archivo preview-head.html? Este lienzo en Storybook es un iFrame, ¿de acuerdo? Entonces, cada vez que cambiamos entre los diferentes botones, los diferentes componentes, esto se renderiza en diferentes iFrames, ¿de acuerdo? Así es como funciona Storybook. Entonces, preview-head.html es cualquier cosa que queramos inyectar en el encabezado de nuestro iFrame, ¿de acuerdo? Entonces, lo que importamos de Google Fonts y pegamos allí ahora debería estar en el encabezado, en algún lugar aquí. Mira, lo estoy viendo ahí mismo, ¿de acuerdo? Y no sé si lo notaste, voy a hacer zoom un poco, pero este botón ahora, la etiqueta ha cambiado y podemos verificar que ahora es NuNITO, ¿de acuerdo? Ahora la fuente se está renderizando, finalmente. Fantástico. Sin embargo, si miras tu aplicación, esto no se está renderizando y puedes verificarlo revisando en DevTools, se está importando Helvetica new, y eso no es lo que queremos. Como mencioné, Storybook es un servidor, nuestra aplicación es otro servidor, ¿de acuerdo? Entonces, tenemos que copiar este fragmento, ¿verdad? Y lo vamos a mover a la carpeta public en el archivo Index HTML. Puedes pegarlo debajo del logotipo si quieres. Y ahora puedes ver que tenemos nuestra nueva fuente ahí mismo. ¿De acuerdo? Fantástico. Así que ya tenemos nuestras fuentes importadas en ambos lugares, listas para continuar. Genial.

Entonces, como mencioné, no olvides importar eso como parte de la aplicación si quieres verlo con una mejor fuente, con la fuente supuesta, de todos modos. La elección de una biblioteca de componentes React, siguiente sección aquí. Entonces, ¿por qué elegimos una biblioteca de componentes React? ¿Verdad? Bueno, puedes pensar que esto es, que siempre prefieres construir tus propios componentes mientras usas algo más, va a agregar mucho tamaño a mi paquete. Prefiero mantener las cosas simples. Está bien. Pero la cosa es, cuando eliges una biblioteca de componentes React, en realidad, quiero decir, estás obteniendo muchas cosas gratis, ¿verdad? Estás obteniendo cosas como componentes de alta calidad. Si miras nuestro componente ahora mismo en Storybook, no tiene ninguna interacción. Como si pasas el cursor, solo ves el puntero, pero nada más. Estoy haciendo clic en él. No pasa nada, ¿verdad? Quiero decir, está bien este botón, pero no es realmente receptivo. Por lo general, aquí es donde comienzas, ¿verdad? Pero cuando tienes una biblioteca de componentes, vas a comenzar a reutilizar cosas desde cero y ya hay componentes de alta calidad que puedes personalizar como quieras, ¿verdad? Y hacerlo personalizado para tu propio sistema de componentes con tu propio esquema de colores, con tu propia tipografía. Entonces, estás construyendo eso, ¿verdad? Estás creando tu propia marca, ¿verdad? La cosa es que también tienes un equipo trabajando para ti, ya sabes, como, por ejemplo, vamos a usar Material UI y voy a ir allí en un segundo, pero el equipo de Material UI es un equipo fantástico. Estos chicos son increíbles. Cuando formaba parte de Google, intentamos hacer lo mismo. Intentamos crear una versión de React de nuestra biblioteca de componentes. Terminamos señalando a Material UI porque estaban haciendo un mejor trabajo que nosotros. No debería decir eso, pero también tengo que decirlo porque la comunidad alrededor de Material UI es tan grande y el equipo de desarrollo allí, constantemente están haciendo actualizaciones, asegurándose de que todo esté libre de errores y obtienes accesibilidad, obtienes extensibilidad, obtienes muchas cosas gratis. Entonces, es como si tuvieras tu propia empresa unipersonal, al usar una biblioteca de componentes, esto es como tener un equipo que trabaja para ti, lo cual es increíble. ¿Verdad? De todos modos, vamos a elegir Material UI, como mencioné. La razón es que, si haces clic en este enlace, también puedes encontrar las comunidades que, a partir de este artículo, esto es reciente de este año, y la comparación con otras bibliotecas, hay Ant, hay Chakra, Bootstrap, todos son geniales. Pero creo que Material UI tiene, con mucho, la comunidad más grande. ¿Verdad, y cuando tienes una comunidad muy grande, generalmente piensas en tener también la documentación adecuada. Si te quedas atascado, también sabes que esto está siendo mantenido por un equipo de personas, día a día. ¿Verdad? Y esto dice origen, Google, bueno, diría que está respaldado por Google, pero no está hecho por Googlers. De todos modos, eso es FYI. De todos modos, Material UI. No sé si conoces Material UI. Es bastante genial. Si vas al sitio web, tienes la documentación. Puedes buscar por componentes. Por ejemplo, si miramos el botón, puedes encontrar aquí, encontrar los botones. Puedes obtener la documentación de los diferentes estados aquí mismo, todo en React. Este componente por defecto, ya he usado el diseño de Material. Y aquí tienes tantos componentes diferentes, como casillas de verificación, radios, selectores. Hay muchas cosas sucediendo que obtienes de forma gratuita, ¿verdad? Así que esto es bastante emocionante. De todos modos, vamos a pasar a instalar la biblioteca, ¿de acuerdo? Aquí tenemos un enlace para instalar la biblioteca y también tienes el fragmento, ¿de acuerdo? Entonces, simplemente puedes copiar y pegar el fragmento en una nueva pestaña en tu terminal y vamos a instalar Material UI ahora mismo. De acuerdo, bien, va a llevar un poco de tiempo. No creo que tarde mucho. Mira eso, qué rápido fue. De acuerdo, instalamos MUI y vamos a hacer una limpieza, ¿de acuerdo? Lo primero es lo primero, entonces nuestro componente de botón se ve como mencioné, se ve terrible, no tiene ninguna interacción. Mira eso, es tan malo. De todos modos, vamos a ir a nuestro button.jsx y voy a importar el botón. Tienes el fragmento. Sé que no tienes el fragmento, pero es bastante simple, chicos. Entonces, lo que necesitas hacer es simplemente importar button de @mui/material/button, ¿de acuerdo? Como hacemos con bueno, tenemos que, tenemos que también saber que si uno importa button pero nuestro componente, hay un conflicto aquí. Entonces, en lugar de importar button, vamos a decir MUI button en su lugar, ¿verdad? Y con suerte eso está bien, fantástico. Entonces, este MUI button puedo simplemente reemplazar este botón que tengo aquí en su lugar y tan pronto como lo tenga, está ejecutando un error. ¿Por qué? Necesitamos reiniciar Storybook probablemente porque instalamos una nueva dependencia, ¿verdad? Entonces, vamos a reiniciar Storybook y con suerte vamos a ver este nuevo botón de inmediato. De acuerdo, aquí lo tienes, aquí está el botón, ¿verdad? Puedes notar que este botón ya tiene alguna interacción. Sin embargo, si miras la documentación del botón, por cierto, si te quedas atascado en cómo importar el botón, también puedes obtenerlo de la documentación, ¿de acuerdo? Está justo ahí. Y como puedes ver, hay diferentes variantes y también tienes acceso a la API en el panel derecho en la parte inferior, donde puedes ver, si haces clic en button, tienes acceso a todas las diferentes props y valores. De acuerdo, pero para facilitar las cosas, vamos a hacer algunos cambios en nuestro botón. Este es el variant aquí, ¿de acuerdo? Que como puedes ver, hay texto, contener, esquema y esta es la representación de estos tres. Entonces, si voy aquí y luego cambio el variant a contener, ¿de acuerdo? Entonces, nuestro botón se ve mucho mejor, ¿verdad? Sin embargo, este prop aquí, ¿verdad? Necesitamos inyectarlo para que admita Material UI. ¿De acuerdo? Será bastante simple. Entonces, lo primero es agregar una nueva propiedad llamada, podemos agregarla al final. Variant y ese variant lo vamos a agregar aquí, inyectado en este prop justo ahí y no has visto nada, ¿verdad? ¿Por qué? Porque también necesitamos, en .stories, también necesitamos inyectarlo, ¿de acuerdo? Entonces, este primary, ¿qué tal si lo llamamos contener en su lugar, porque contener es la variante? Entonces, voy a decir que la variante es contener. Y si lo hago, esto se quejará, pero tan pronto como haga clic en él, lo veré, ¿de acuerdo? Y en lugar de secundario, podemos llamarlo esquema, que es la segunda versión de la variante y vamos a agregar una nueva prop llamada variant esquema, ¿de acuerdo? Lo mismo haremos con texto. Entonces, en grande, podemos mantener grande. Grande creo que es útil, y es pequeño. Entonces, creemos uno nuevo, un nuevo estado, y podemos llamarlo texto y variant texto, ¿de acuerdo? Listo, ahora podemos cambiar entre los tres. El texto no se muestra porque, ¿por qué? Oh, porque olvidé agregar, lo olvidé, ¿de acuerdo? Oh, debería llamarse texto y los argumentos. Ahora está ahí mismo, pero ¿qué está pasando con ese borde ahí? Creo que hay algunos conflictos sucediendo con nuestras clases, así que vamos a eliminar el nombre de la clase justo ahí y también vamos a eliminar el estilo. No lo necesitamos. Vamos a eliminar eso, y ahora nuestro botón tiene tres versiones diferentes. Esquema, contener y lo tenemos ahí mismo. Lo cual es genial, se ve bien. De todos modos, como puedes ver ahora, nuestro botón es mucho más interactivo. Tenemos el hover, vemos la sombra, podemos hacer clic, todo se ve mucho, mucho mejor. Si miras la documentación, estas descripciones aquí, tenemos la nueva prop variante, pero no es una descripción. Para agregarlo, simplemente puedes agregar esto en los prop types, y puedes llamarlo en lugar de variant. Y esto es una cadena. Y aquí puedes agregar algo de documentación. En este caso, este es el estado de variante de nuestro botón, lo que sea. No es un gran comentario, pero si lo agrego allí y luego actualizo, con suerte, lo veo, oh sí, aquí lo tienes. Este es el estado de variante de nuestro botón, y es un tipo de cadena, y tengo el control justo ahí. Una cosa que nos gustaría hacer ahora, nuestra accesibilidad está pasando, lo cual es increíble. Y una cosa que necesitamos hacer aquí es que contener es una cadena, pero sería muy agradable si pudiéramos hacer algo como esto, ¿verdad? En nuestros controles. Pero en lugar de eso, también podemos agregar selectores, bueno, en su lugar, un componente de selección en lugar de tener botones de radio para eso. Entonces, ¿cómo lo hacemos? Entonces, en nuestros tipos en nuestras historias de botones, podemos usar el color de fondo, simplemente podemos eliminarlo. No lo necesitamos. Y luego agregaremos variant, que es el nombre de nuestro prop. Y luego haremos tipo y esto es un select y opciones, que es la segunda clave. Y esto es una matriz de cadenas y podemos establecer contener, podemos establecer esquema y podemos establecer texto. Tan pronto como lo haga, este componente, era un campo de texto. Ahora es un selector, ¿verdad? Ahora puedo cambiar entre las tres variantes diferentes en los controles. ¿Qué tan genial es eso? Muy genial. De todos modos, tenemos nuestra biblioteca ahí mismo con nuestro botón que se ve genial. Las diferentes versiones de nuestro botón.

Esto es genial, chicos. También hay cosas que podemos agregar también. Si miras el botón en sí, también tiene colores, ¿verdad? Así que también podemos crear uno nuevo llamado color y se llama tipo select. Vamos a comenzar con el control primero y luego podemos establecer las diferentes props. La primera es primario, luego agregamos el secundario y luego también tenemos éxito y también podemos tener error, ¿verdad? Hay más. Si quieres ver la lista completa de estos tipos, están aquí mismo. Tenemos primario, secundario, éxito, error, información, advertencia, así que también podemos agregar esos si queremos. Voy a agregar información, advertencia, fantástico. Así que lo tenemos ahí y luego este color, creo que aún no lo tenemos en nuestras props. Entonces vamos a incluirlo, ¿de acuerdo? Entonces, color en realidad, debería venir de esto, pero en este caso, solo vamos a agregar eso para ver qué está pasando. Y luego olvidamos agregar la coma ahí mismo, lo siento. Color y luego este modo aquí, también podemos eliminar eso, no lo necesitamos, fantástico. Entonces, nuestro botón ahora, hay algo sucediendo. Muy, muy interesante lo que está sucediendo aquí. Color, opciones de tipo select, algo sucedió ahí mismo. Haz clic en la versión de representación de nuestro botón. ¿Qué hacemos, correcto, aquí mismo? Aquí lo tienes, algo sucedió ahí. Eso fue interesante. De todos modos, nuestro color también es importante porque también agregamos las props de estructuración, ¿verdad? Así que eso debería estar ahí. De todos modos, tenemos este Color, Nuevo, Control aquí abajo y podemos ver cómo se comporta. Pero tenemos un problema ahí mismo. De acuerdo, sí, de acuerdo. Así que configuré esto, chicos, pero bueno, lo restableceré. Lo restableceré y la razón es que aún no tenemos nuestro tema. Me adelanté un poco. Me emocioné mucho. Ahora, nuestro color, mantengámoslo como primario. Haremos más cosas. Pero eso será en una sección que viene a continuación. Entonces agregamos esto. Ahora vamos a nuestra sección. Agregamos color, nuestro tamaño. Creo que nuestro tamaño no está ahí. Verifiquemos. Mira, no está ahí. Esto es bastante simple. Entonces, el tamaño, solo necesitamos agregarlo también como parte de nuestras props. Y ahora puedo cambiar entre los tres, ¿de acuerdo? Y si también queremos, también podemos agregarlo como parte de los arquetipos y tener un selector. Pero eso depende de ti. De acuerdo, genial. Fantástico, así que ahora, hicimos la limpieza. Y finalmente, nuestra aplicación. Tiene este nuevo componente de Material UI, pero no se ve como queremos. Como hicimos antes, podemos ir a la documentación, obtener el código de nuestro componente, podemos copiar eso. Y si vamos a nuestro app JS, podemos simplemente pegarlo y reemplazar nuestra versión anterior de nuestro botón y si miramos ahora, aquí lo tienes. Aquí está, ¿verdad? Se ve mucho mejor que antes. Así que ahora tenemos un componente de alta calidad ahí mismo. Ahora mismo. De todos modos, aquí, esta es la primera, el final de la primera parte. Como mencioné, puedes descargar el código aquí mismo y ponerte al día. De acuerdo, y ahora pasaremos a la siguiente sección.

Entonces, configurando un tema centralizado. ¿Por qué queremos un tema centralizado? Bueno, tal vez ya lo sepas cuando tenemos un sistema de componentes, también queremos mostrar nuestra marca, nuestros colores, nuestra tipografía, ¿verdad? Y tener un tema centralizado significa que puedes controlar todo desde un único lugar, ¿verdad? Lo cual es bastante genial y reutilizar cosas. Así que en lugar de codificar colores o codificar cosas, incluso cosas de tipografía, simplemente puedes tener un único lugar donde tienes tus colores, tu tipografía y reutilizarlos, ¿verdad? Sin código repetitivo, ¿de acuerdo? El código repetitivo es malo, chicos. Evítalo.

De todos modos, también tienes acceso aquí a los colores de Material UI. Te explica que estamos usando la base de Material, ¿verdad? Y si miras esta herramienta aquí mismo, que es una herramienta bastante genial, porque puedes hacer algunas cosas aquí, pero también construí esta herramienta cuando era parte de Google, así que eso es FYI. No debería decir eso, pero esta herramienta fue construida en Angular, lo cual fue una decisión terrible. Pero, de todos modos, eso fue en 2014, así que fue hace mucho tiempo. De todos modos, lo que quiero mostrarte aquí es cómo se ha implementado el esquema de colores de Material y cómo funciona. Entonces, si miras aquí en el lado izquierdo, tenemos todos los diferentes tonos, rojo, rosa, morado, ¿verdad? Y luego en la parte superior, ves los diferentes, ya sabes, como colores, 50, 100, 200. Puedes hacer clic en ellos y verlos, ¿verdad? Estos son, ya sabes, todas las diferentes tonalidades del color, ¿verdad? Va desde el más claro hasta el 900, que es el más oscuro. También tienes acceso a los acentos, pero no vamos a cubrir eso, ¿de acuerdo? De todos modos, solo estoy mostrando, mostrándote, algunas de estas capacidades. Luego también tienes acceso al secundario en caso de que quieras cambiar cosas aquí, ¿de acuerdo? Y ver cómo se ve en diferentes interfaces de usuario. Fantástico. Entonces, ahora, ahora que sabes un poco sobre el esquema de colores, también quiero mostrarte esta generación de colores, que te permite, a partir de un solo color, generar todas las diferentes tonalidades, ¿verdad? Esto es bastante útil porque simplemente si tienes una marca y tienes un color, puedes obtener toda la lista de colores usando esto. Bastante genial. Tienes acceso a los complementarios, análogos y los tríadicos, ¿verdad? También puedes ver esto en la herramienta de colores si haces clic aquí con los colores que seleccionaste, ¿de acuerdo? Genial. De todos modos, tipografía. Entonces, la tipografía en Material UI, también utilizan la base de Material y tiene todos los diferentes tamaños que puedes reutilizar en tu aplicación. Va desde H1, H2, hasta S3, hasta H6. Tienes Subtítulo 1, Subtítulo 2, Cuerpo 1, Cuerpo 2. También se hicieron textos, se subtitularon, otra línea de texto. También puedes agregar más si quieres, ¿de acuerdo? Y también puedes personalizar los nombres de esas tipografías. Pero solo en caso de que también quieras ver cómo funciona esto es si miras aquí la tipografía, este es un componente reutilizable, ¿verdad? Y si estableces la variante, si es H1, usará H1. Si es H2, usará H2, ¿verdad? En lugar de ir al CSS y cambiar y codificar cada archivo con diferentes tamaños, puedes tener cosas consistentes y reutilizar esto en tu aplicación, ¿de acuerdo? Es mucho mejor, chicos, mucho mejor.

De todos modos, eso es por qué queremos centralizarlos. Y lo vamos a hacer ahora mismo, ¿de acuerdo? Así que la configuración está ahí. Voy a cerrar algunas de estas pestañas porque no las necesitamos. Bueno, en realidad necesitamos el servidor y también necesitamos tener nuestra aplicación, lo siento por eso. Pero en SRC index, este es el archivo principal al que queremos agregar nuestro tema para inyectar el tema en nuestra aplicación. Esto no va a inyectar el tema en nuestro servidor de storybook porque, como sabes, index.js no está renderizando nuestro servidor de storybook. Aquí tienes estas dos importaciones que puedes copiar. También puedes copiar todo antes de los tres puntos ahí mismo y pegarlo justo ahí. Y luego también puedes copiar y pegar este root.render y reemplazar nuestro root.render, ¿verdad? Y si te fijas, hay un nuevo componente de alto nivel aquí llamado ThemeProvider al que puedes inyectar el tema, este tema justo aquí. Entonces, si miras nuestra aplicación de React, verás de inmediato que nuestro color de botón ha cambiado a rojo. ¿Por qué? Si ves aquí, dice paleta primary main, este es el rojo 500 que estamos usando para el primario. Si cambiamos red a red, 700, será la versión más oscura del rojo. Y este rojo aquí, también puedes verlo en la herramienta de colores. Es el mismo rojo predeterminado de Material. Entonces, el 700 aquí es este. Este aquí es el mismo. De acuerdo, así que también puedes acceder a 900 y verlo más oscuro o puedes ir hasta el más claro 100 y verlo. Y mira qué genial es Material UI, ¿verdad? Tan pronto como cambias el color a un color que es bastante claro, cambiará automáticamente el color del texto por ti. Así que es accesible, ¿de acuerdo? No necesitas asegurarte de que las cosas sean accesibles. Estas cosas vienen gratis para ti. Cosas bastante útiles. En cualquier caso, el botón rojo, solo te estaba mostrando esto, pero hagámoslo azul. Es más limpio. Así que hagámoslo azul 500, por ejemplo. Bueno, eso es bastante claro. Hagámoslo 600 en su lugar. De acuerdo, eso está bien. Genial. Tenemos nuestro tema justo ahí. Fantástico. Cosas que también puedes hacer es si miras la documentación del tema, bueno, hay mucha información aquí, pero dame un segundo. En realidad, si miras la documentación del tema en la tipografía, porque vamos a hacer algo bastante genial ahora mismo, puedes agregar una propiedad de tipografía en la paleta. Y esta tipografía, podemos cambiar, por ejemplo, nuestra familia de fuentes. Digamos que nuestra familia de fuentes es Arial en su lugar, ¿verdad? Espera, ¿funcionó eso? No, pero dame un segundo. Sí, aquí lo tienes. Entonces, ves que al establecer la tipografía en la familia de fuentes Arial, lo veo justo ahí, ¿de acuerdo? Si miras nuestro app.js, este P aquí, podemos comenzar a reemplazar eso por tipografía en su lugar. Entonces, puedes decir importar tipografía, y también podemos hacer esto en su lugar, para que podamos tener estos componentes viniendo en una sola línea, en una sola línea. Solo ten cuidado con esto, chicos, porque esto agrega un poco de tamaño de paquete si no tienes una construcción específica de Webpack. Creo que a partir de la versión cinco, esto está bien, pero las versiones anteriores de Webpack realmente no funcionan bien con esta forma de importar. La razón es que si haces eso, esto va a agregar toda la biblioteca cada vez que lo hagas. Entonces, si tienes muchas importaciones diferentes y diferentes archivos, esto va a agregar mucho tamaño de paquete que no necesitas. Así que por eso no recomiendo este enfoque si no estás usando una versión moderna de Webpack. En cualquier caso, estamos agregando este componente de tipografía y vamos a reemplazar nuestra etiqueta p con tipografía. Y no necesitamos el código de edición, lo que sea. Editar, agregar y guardar, veamos. De acuerdo. Editar, agregar y guardar para recargar. De todos modos, vamos a cambiar la variante como vi antes, a h1, y mira, es tan grande. Oh Dios mío, ¿qué está pasando aquí? Hagamos h4. H4 se ve un poco mejor. Pero, ¿qué pasa con nuestro botón? Algo pasó con nuestro botón. Oh, porque lo importé desde Material UI. No necesitamos eso, ¿verdad? Nuestro botón es nuestro componente de botón. No es nuestro componente de Material. Ya tenemos nuestro propio componente personalizado y sus componentes de botón. Ese fue un error que cometí. Lo siento por eso, chicos. Y ahora, ahora vemos nuestra tipografía, nuestro botón. También podemos agregar algún tipo de espacio entre los dos. Así que te voy a presentar un componente Box, que también es como un div, pero puedes hacer cosas geniales con Box. Con Box, puedes agregar márgenes. Margen superior, por ejemplo. Nuevamente, puedes agregar, como, margen superior y se especifica, digamos, como tres. Y tres en realidad es, y lo cubriremos en un segundo, es en realidad 24. Y la razón es la línea base que utiliza Material UI.

Material UI, cada línea de base es una cuadrícula. Y voy a cubrir eso en un segundo. Pero no voy a profundizar en eso ahora mismo porque hay una sección que habla de eso en un segundo. Pero lo que quiero que entiendas es que tres aquí es 24. Porque es una multiplicación de ocho. Entonces, si digo uno, sería ocho. Si digo dos, sería 16. Tres, 24. Y puedes preguntar, esto es terrible. ¿Por qué estás haciendo eso? Lo cubriremos en un segundo, ¿de acuerdo? Puede que no tenga sentido para ti en este momento, pero tendrá sentido una vez que lleguemos allí.

Una cosa que también podemos hacer es el margen superior que agregué allí. Así que hay algo de espacio entre los dos. También puedo llamarlo MT. Eso significa M, margen superior, ¿de acuerdo? Si quiero hacer margen inferior, puedo hacer MB. Ya sabes, es margen, M, inferior, B. Si quiero hacer margen izquierdo, ¿cómo sería? Entonces sería ML, ¿verdad? Eso no va a funcionar allí. Pero de todos modos, cuando hago eso y agrego esta caja, esta caja al final del día es un div en el que puedes hacer cosas geniales. De todos modos, tenemos eso. Nuestro botón se ve bien, nuestra tipografía está ahí. Entonces, volviendo a nuestro tema, lo genial de esto es que también puedes especificar las diferentes variantes en este nivel. Entonces, estamos usando H4, ¿verdad? Entonces, si vamos a nuestro índice y cambiamos, y agregamos H4 y luego agregamos font-weight bold, puedes ver que de inmediato nuestro H4 se está inyectando allí, ¿verdad? Entonces, en un archivo, podemos especificar los valores de cada tipografía que tenemos. Y hay H1, H2, S3, H4. Como te mencioné, ya tenemos todos estos listos para ser utilizados, y también podemos agregar más, ¿verdad? También podemos personalizar nuestras fuentes. Pero esto es un adelanto de lo que puedes hacer con el tema. Así que hicimos una inyección de color, una inyección de tipografía, y vamos a eliminar este Arial porque Arial es terrible. Mantengámoslo como Nunito, como estaba. Creo que en realidad no es Nunito. Creo que está usando Helvetica. Así que cambiemos eso. Entonces, nuestra familia de fuentes debería ser Nunito Sans, y aquí lo tienes, aquí lo vemos. Está justo ahí, fantástico. Si queremos cambiar nuestro botón, también podemos hacerlo en este nivel, ¿de acuerdo? Como viste en la tipografía, es Button Text también, y la variante de Button Text es Button, ¿de acuerdo? Entonces, lo que podemos hacer ahora es en el botón, podemos establecer el peso de la fuente en negrita, para que sea más fácil de leer. Veámoslo, veamos eso. Aquí lo tienes, ahora es en negrita, más fácil de leer. Hay dos formas de cambiar tu botón, ¿verdad? Una es desde tu componente de botón y también desde tu tema ahora, ¿verdad? Puedes cambiar algunas cosas en este nivel, ¿de acuerdo? Genial, ahora vamos a continuar, cambiamos nuestro botón, ahora está mejor, 500. Bueno, uso 600 aquí y agregué algunas cosas más que lo que estás viendo aquí mismo.

Ahora necesitamos hacer lo mismo para Storybook porque nuestro Storybook no tiene ningún tema, ¿de acuerdo? Entonces, para hacer eso, necesitamos agregar un nuevo decorador en Preview. Entonces, en Preview JX, vemos estos parámetros, archivo, ¿verdad, que tiene alguna configuración para nuestros controles, pero también podemos importar nuestro tema allí, ¿de acuerdo? Entonces vamos a importar el tema. Bueno, en realidad, nuestro tema no está en SRC theme, ¿de acuerdo? Nuestro tema ahora mismo está en index, entonces, ¿qué podemos hacer ahora, porque no queremos que entren en conflicto, vamos a mover este tema a un archivo diferente para que se pueda reutilizar en nuestra aplicación y también en un Storybook. Entonces, ¿cómo lo hacemos? Vamos a crear una nueva carpeta en SRC llamada Theme, en theme podemos crear un nuevo archivo llamado index.js, y simplemente podemos mover nuestras cosas de tema, el proveedor de tema no lo necesitamos, y vamos a exportar este tema como predeterminado, ¿de acuerdo? Exportar predeterminado, crear tema, y luego en nuestro índice, simplemente podemos importar el tema que tenemos en theme. Mira qué simple es eso, la importación ahora que tenemos rutas absolutas. Es mucho más fácil, ¿verdad? El tema está en theme. Tan simple. Ahora, vamos a ver, verifiquemos nuestra aplicación, así que nuestra aplicación funciona bien, fantástico. Vamos a mover las cosas, para no duplicar el código, y nuestra vista previa. Ahora, tenemos SRC slash theme allí, ¿de acuerdo? Genial. Entonces, también si quieres usar rutas absolutas en un storybook, puedes hacerlo desde main, ¿de acuerdo? Pero necesitas agregar el alias aquí mismo. Entonces, si hago eso en componentes, podré usar rutas absolutas, bueno, en este caso, serán atajos, ¿verdad? Ya no serán absolutas. Entonces, quiero ver la vista previa, y puedo seguir el mismo enfoque que estaba haciendo antes. Y también necesitamos agregar este decorador aquí mismo, ¿de acuerdo? Lo que hace este decorador, es permitirnos agregar componentes de alto nivel encima de nuestra historia. Nuestra historia es lo que se renderiza en el iframe. En este caso, es lo que está debajo de dot stories. Entonces, si quieres agregar contextos, o quieres agregar otros proveedores, necesitas hacerlo en este nivel, ¿de acuerdo? Y esta es la función de los decoradores, en su mayoría. Entonces, nuestro storybook se queja porque probablemente necesitamos reiniciar nuestro servidor de storybook. Así que tenemos que reiniciarlo.

Y estoy viendo una pregunta de hace una hora, lo siento Ernesto. Entonces, ¿para qué son los addons en el main.js de un storybook? Si miramos esos, son cosas esenciales que puedes obtener, por ejemplo, si ves el addon de interacciones, ese es el llamado de pestaña interacciones. Si quieres aprender más, simplemente haz clic aquí, y en realidad te está dando un 404. Por eso no entendí qué era esto. Sí, necesitamos pedirle al equipo de storybook que actualice algunas cosas aquí, pero también hay cosas esenciales. Las cosas esenciales son, creo que las que tienes aquí, y creo que también las acciones, y creo que los enlaces, los enlaces son muy débiles. ¿Dónde están los enlaces aquí? Creo que estos están relacionados con la documentación, pero necesitamos verificar eso. Podemos hacer una búsqueda rápida en Google y ver. Entonces, cómo se vinculan las historias, bien, genial. Entonces sí, esto vincula las historias, te permite prácticamente tener tus historias vinculadas en un solo archivo. No estoy seguro si fue útil, Ernesto, pero espero que hayas entendido el punto aquí. De todos modos, hay algo sucediendo aquí, nuestro proveedor de temas no está definido, bien. ¿Cómo importamos nuestro proveedor de temas? Entonces, si miras el index.js, bien, ya tenemos nuestra importación, por alguna razón, creo que no lo agregué allí. Así que fue un error. También actualizaré la documentación. Entonces, también necesitas importar el proveedor de temas de MUI, bien, y probablemente esto seguirá quejándose. Lo sé, mira, está apareciendo justo ahí, fantástico. Y no sé si lo notaste, pero ya tenemos el tema. Tenemos Nunito, el peso de la fuente es negrita. Entonces ahora tenemos nuestro tema tanto en el storybook como en nuestra aplicación. Bien, fantástico, genial, ¿dónde estamos? Bien, agregamos historias de temas. Ya hicimos eso, no, okay, esto está bien. Así que tengo dos fragmentos de código aquí. Bien, y lo que vamos a hacer es bajo historias, en SRC historias, vamos a crear dos archivos nuevos. Bien, el primer archivo se llamará, se llamará typography.stories.jsx. Y otro, lo llamaremos colors.stories.jsx. Encuentro esto muy útil porque puedes reutilizar esto en cualquier storybook que quieras hacer. Esto es un fragmento de código y muestra tu tema a nivel de storybook, bien? Así que si haces clic en el enlace del fragmento de código, tienes acceso al código y puedes copiarlo completamente y pegarlo. Creo que este es el de los colores. Está bien, los colores y luego haremos lo mismo para la tipografía, bien? Así que la tipografía también el enlace, así que lo voy a copiar y pegar en typography. Esta tipografía, por cierto, proviene de aquí, de la documentación de MUI. Hice algunos cambios para que sea una historia. Entonces, si miramos nuestro storybook, no está apareciendo, interesante. ¿Por qué no está apareciendo? Oh, tuve que actualizar la página. Si actualizas la página, lo verás. Entonces verás una nueva sección llamada bajo library theme, y tenemos los colores, bien. Y también tenemos nuestra tipografía, bien. Entonces, en este nivel, podemos ver cómo se puede usar nuestra tipografía, bien? Esto es bastante genial porque puedes ver aquí de un vistazo qué está pasando, bien. Cambiamos el H4 a negrita, ¿verdad? Entonces, en este nivel, también podemos hacer configuraciones, ¿verdad? Digamos que H1, queremos cambiarlo a negrita también. Y ahora lo estamos viendo, ¿verdad? Y así, en este nivel, podemos hacer todas las configuraciones que necesitemos, y sabemos qué está pasando, y luego podemos reutilizarlo. Esto también ayuda, ya sabes, a otros miembros del equipo a venir aquí y entender cuál es la única fuente de verdad, cómo se están implementando las cosas desde un nivel reutilizable. Y los colores, también puedes ver los colores que estás usando. Estos, por defecto, vienen de Material UI, pero digamos que en lugar de este púrpura aquí, ¿verdad?, queremos cambiarlo a rojo, ¿verdad? Entonces lo que hacemos es bajo paleta, secundario, podemos cambiar main a red 400, y necesitamos importarlo en colors. Entonces importamos los colores de Material. Y lo ves justo ahí. Al establecer el main, el light y el dark, y viene gratis para ti. Si miras la herramienta de colores, esos son los mismos que los que ves aquí en Material. Entonces, cada vez que seleccionas un color, obtienes las versiones light y dark, ¿verdad? Entonces lo ves ahí. No lo voy a tener principalmente rojo porque soy fanático del Real Madrid. Y lo siento si algunos de ustedes son fanáticos del Barcelona, pero no puedo apoyar algo así. Necesito cambiar eso. Así que lo haré verde en su lugar. Lo siento, chicos. Si quieres mantenerlo rojo, mantenlo rojo. Quiero hacerlo verde. No se ve tan bien. Pero de todos modos, verde 400, lo mantendré. También puedes ver que hay algunos tokens de diseño que se están mostrando aquí. Tienes el secundario principal. Tienes el secundario claro. Tienes el secundario oscuro. Y también tienes el texto de contraste secundario, bien. Esas son propiedades que puedes usar en toda tu aplicación, ¿verdad?, y no necesitas pensar si debería ser blanco o negro dependiendo de las pruebas de contraste de accesibilidad que necesites. ¿Verdad? Viene gratis, ya viene gratis. Bien. Todavía no estamos inyectando estas propiedades. Lo haremos muy pronto. Pero en este punto, solo quiero que veas un adelanto de nuestros colores, nuestra tipografía ahora como parte de nuestra component library. Fantástico. Genial. Hicimos eso. Luego, lo siguiente es que queríamos inyectar nuestros iconos en nuestros componentes. Bueno, en realidad no lo voy a hacer porque no tengo mucho tiempo para esto, pero no es tan difícil. Pero una cosa que quiero mencionar es que si miras la documentación, estos iconos de Material son una biblioteca de más de 2,000 iconos que puedes usar de inmediato con Material UI. Necesitas instalar este paquete. Pero lo genial de esto, estos son todos los iconos de Material. Y digamos que quieres encontrar algo relacionado con un mapa, puedes encontrarlo aquí. Y si haces clic en cualquiera de estos iconos, tienes la importación justo ahí. Así que puedes copiarlo y pegarlo. Y estos son como SVG. Así que también puedes cambiar el color. Así que es bastante útil, ¿verdad? De todos modos, tengo un ejercicio para ti. Pero no lo vamos a hacer, que es habilitar la capacidad de agregar iconos a nuestro componente de botón. Si miras la documentación de botón, encontrarás información al respecto. Pero no lo voy a hacer.

En cualquier caso, voy a instalar los iconos. Los voy a instalar. Así que tienes el fragmento de código justo ahí. También puedes usar NPM, como mencioné antes, pero vamos a instalar los iconos. Eso es lo único que vamos a hacer en esta sección en particular.

Y mientras se instalan, nuestra próxima parte va a ser muy emocionante. Vamos a escribir nuestros primeros componentes porque los anteriores no los escribimos. Los limpiamos un poco. Muy bien. Así que vamos a escribir algunos componentes aquí. El primero es el avatar. Esto es lo genial de usar una biblioteca de React. Ya tienes todos estos componentes disponibles de forma gratuita. Pero quieres personalizarlos para hacerlos tuyos. Así que comienzas aquí en lugar de construir todo desde cero. Esto ahorra mucho tiempo. Y todos estos componentes, como mencioné, que ya te proporcionan propiedades de accesibilidad, son extensibles, por lo que obtienes muchas cosas de forma gratuita.

También tenemos un enlace aquí que dice comenzar aquí, porque nuestros amigos en Anima, ellos crearon algunas historias para nosotros. No para nosotros. Tienen un storybook de muestra, pero podemos usarlo. Podemos aprovecharlo, porque de esta manera podemos hacer las cosas más rápido. Como no tenemos todo el tiempo del mundo, vamos a agregar eso. Entonces, ¿cómo agregamos eso? Con los mismos principios de los que hablamos antes. Vamos a crear una carpeta por componente. Así que dentro de la carpeta components, creamos una nueva carpeta llamada avatar. Y este avatar va a tener tres archivos diferentes, Index.js, recuerda. Luego otro llamado avatar.jsx. Y otro llamado avatar stories.jsx. Y eso es todo. Por ahora, eso es todo. Así que avatar stories.jsx, vamos a copiar y pegar esto desde allí. Y ahora, si revisas tu storybook, deberías verlo. Déjame refrescar. Sí. Está bajo Material UI. ¿Por qué es Material UI? Como mencioné antes en el título, podemos cambiar eso para mover las cosas, pero quiero moverlo a una biblioteca, porque queremos mantener nuestros componentes en esa biblioteca. Aquí lo tienes. Vemos que nuestro avatar está ahí. SRC es la foto. También puedes cambiar la letra y hacerla una letra en su lugar. También puedes cambiar el color de fondo de tu letra si quieres usando este control aquí. Como sabes, también hay documentación, pero este componente en este momento no es reutilizable. Es solo una historia. No podemos reutilizar esto, ¿verdad? Si queremos reutilizar esto, necesitamos agregarlo en el avatar JSX. Entonces, lo primero es lo primero, vamos a indexarlo. Y voy a ir un poco más rápido ahora, porque esto es algo que ya hicimos. Muy bien, avatar. Importamos el avatar en el index. Y luego el avatar, no tenemos nada aquí, así que podemos comenzar a agregar nuestro nuevo componente de React, const avatar. Y luego no podemos, este es el esqueleto de nuestro avatar, así que export default avatar. Y aquí, en el return, vamos a agregar todo esto. ¿De acuerdo? Todo esto está bajo stories, bajo template. Vamos a copiarlo y pegarlo bajo el return. Y se queja porque estos arcs no tienen sentido. En realidad, son como las props. Así que agregaremos las props en el primer argumento de nuestra función, llámalo bgColor, letter, src. Podemos simplemente eliminar los arcs. No los necesitamos. Y también está la letra. Muy bien. Lo llamaré character, pero de todos modos, está bien. Muy bien, aquí lo tienes. Así que nuestro avatar, pero avatar está importando avatar. Eso no tiene sentido. Así que mira, avatar.stories está usando el avatar de MUI, y podemos simplemente cortarlo y pegarlo aquí. Muy bien. Y luego este avatar está entrando en conflicto con nuestro avatar, así que deberíamos llamarlo MUI avatar, muy bien. Y ahora, en stories, necesitamos importar nuestro avatar que acabamos de crear. Así que importa avatar de avatar, porque está justo ahí. Así que necesitamos importarlo desde la misma carpeta. Muy bien, genial. Ahora, esto, ya no lo necesitamos. Así que nuestro avatar se puede inyectar de esta manera, usando la desestructuración. Y algo está sucediendo con nuestros métodos de renderizado. Vamos a verificarlo. Ahora, no viste nada. Avísame. Pero algo está pasando con nuestro avatar por alguna razón. No le gusta eso. El tipo de elemento no es válido. A veces, la cosa más estúpida del mundo. Cuando suceden cosas como esta, me confundo. Voy a reiniciar el servidor. Pero no creo que funcione. Creo que hay algo mal. Oh, no, nuestro archivo avatar que no puedo ver. Tal vez olvidamos la exportación predeterminada. Gracias, Epica. Export default avatar. Pero lo tenemos justo ahí. Y de repente, funcionó.

No sé. A veces sucede esto, chicos. Mágicamente esto funcionó. Muy interesante. Bueno, a veces suceden cosas como esta. Creo que funcionó porque se reinició el servidor. Así que cuando sucedan cosas como esta, recuerden, a veces solo es cuestión de reiniciar el servidor. No debería ser así. Pero como agregué nuevos archivos, eso es probablemente algo que sucedió en la compilación. Así que ahora está ahí, está funcionando. Tenemos un avatar reutilizable. Fantástico. Así que vamos a hacer lo mismo con los otros dos. El menú y la alerta. Así como hicimos con la alerta, vamos a comenzar aquí con el menú. Y vamos a crear una nueva carpeta bajo componentes llamada menú. Y dentro del menú, nuevamente, tres nuevos archivos, index.js, menú.jsx, y nuestro menú.stories.jsx. Ese archivo también lo vamos a obtener de aquí. Lo llaman MUI. Yo lo llamaré menú, porque idealmente este menú, queremos personalizarlo como queramos. Pero no lo estamos haciendo ahora mismo. Simplemente nos gusta hacerlos reutilizables. Muy bien. Así que nuestro menú.stories se ve ahí. También podemos encontrarlo. Hemos actualizado nuestro storybook. Y está justo ahí. Aquí está nuestro menú. Mira eso. Tenemos nuestro menú. Pero no es reutilizable. Así que necesitamos hacerlo reutilizable. Y nuevamente, podemos obtener el index.js, pegarlo. Y no sé si te diste cuenta. Pero esto es siempre la misma historia. Todo el tiempo lo mismo. ABC, ABC, deberíamos crear un script para automatizar todo esto. De todos modos, nuestro menú, lo tenemos aquí bajo la plantilla. Podemos copiar todo el return y agregarlo allí. Pegué mi avatar antes. Así que tengo una especie de plantilla. Y voy a cambiar todo ahí mismo. Escribiré el menú. Cambiaré eso. Y luego esto tiene todos los componentes diferentes ahí mismo. Si miramos el menú de las historias, tenemos todas las importaciones. Así que podemos simplemente copiarlas, pegarlas. Y estos arcs, necesitamos cambiarlos. Muy bien. Necesitamos agregarlos como props. Así que tenemos el open, tenemos los items. Y creo que eso es prácticamente todo lo que veo aquí, ¿verdad? Creo que eso es prácticamente todo. Creo que sí. De acuerdo, voy a abrir las historias. Y ahora voy a eliminar todas estas importaciones. Estoy usando mi propio componente de menú reutilizable que voy a tener como parte de mi historia. Así que voy a reemplazar este return con nuestro menú. Y luego desestructuro los arcs. Y esta lista de menú debería ser menú. Muy bien. Ahora, está ahí. Todo está funcionando. Nuestro menú funciona. Este botón aquí no tiene sentido. Ni siquiera está haciendo nada. Así que simplemente lo voy a eliminar. No necesito ese botón. Así que también voy a eliminar la importación. Y supongo que mantendré esto tal como está. Pero aquí está la cosa, chicos. Cuando estás creando tu propio componente, también puedes personalizarlo. Puedes hacer más cosas. Pero quiero cubrir el estilo en un segundo. Pero así es como comienzas. Puedes comenzar desde ahí. Este menú, también puedes obtenerlo de la documentación de MUI. Aquí puedes buscarlo, y si buscas menú, tendrás acceso a todo este código que puedes simplemente copiar y pegar. Pero en cualquier caso, puedes tomar cualquier enfoque que desees. Ahí mismo. Muy bien, tenemos nuestro menú. Esta etiqueta de panel de control, no la necesitamos. Muy bien, fantástico. Así que nuestro menú está ahí. Y luego el último componente que tenemos ahí es la alerta. Nuevamente, vamos a comenzar aquí, y vamos a crear esta nueva carpeta bajo componentes. Lo mismo de nuevo. Se está volviendo un poco repetitivo. Así que alerta. Tenemos index.js. Vamos a usar alerta.jsx y alerta.stories.jsx.

Así que vemos que hay aquí, algo está sucediendo ahí mismo. No sé qué está pasando. Algo está creciendo. Este es un error muy interesante. Veamos. Mm-mm. Hola. Hay algo sucediendo con este componente. No sé si algo sucedió, pero, oh. Algo se está, oh, aquí está. Entonces nuestra aplicación está inyectando algunas propiedades que no necesitamos, el CSS, el Salient Center. Bien, lo voy a eliminar. Bien, ahora funciona bien. A veces debemos tener cuidado con estas cosas. Pero de todos modos, acabo de mostrar la alerta ahí, la voy a dejar como un error. Pero en lugar de un error, hagámosla una información, porque no tenemos problemas en este momento. Podemos simplemente llamarla, hola, esta es mi aplicación. Hola, estoy creando una aplicación de componentes reutilizables, lo que sea, aquí está. Y luego lo vemos ahí. Muy bien, genial. Fantástico. Muy bien, chicos. Agregamos los tres componentes justo ahí. Y solo para que lo sepan, estamos terminando, casi terminando la segunda sección, implementación. Y vamos a tomar un descanso de cinco minutos una vez que lo hagamos. Aún no lo hemos hecho, pero estaremos muy, muy cerca. Los controles de arquetipos, ya les mostré lo que hacen. Y la última parte de esto es escribir estilos personalizados para nuestros componentes. Probablemente eso es algo que ya se estaban preguntando, cómo podemos hacerlo, ¿verdad? Muy bien, si miran la documentación de MUI, hay muchas cosas que pueden hacer en términos de estilización. Pueden usar CSS básico. Pueden usar componentes de estilo. Pueden usar módulos de CSS. Pueden usar Tailwind. Y hasta hace un año podían usar JSX. Ahora se llama TSX. Miren, soy un gran fan de JSX, y lo uso mucho. Pero sí, es triste que se estén alejando de él. De todos modos, debo decir que MUI ahora, la última versión viene con Emotion. Así que ya tienen Emotion ahí. Si son grandes fanáticos de los componentes de estilo, y necesitan instalar los componentes de estilo por su cuenta. Entonces, si miran aquí, tienen los pasos sobre cómo instalarlo. También tienen que instalar la biblioteca. Eso es para que lo sepan. ¿De acuerdo? Pero Emotion viene incluido. Y miren, tal vez quieran quedarse con el CSS básico, pero déjenme decirles algo. Si lo usan, no obtendrán todas las capacidades de MUI. Todo el tema que ya creamos, eso es la base de lo que viene después. Las capacidades que veremos ahora, realmente no las pueden obtener con CSS básico. Así que tal vez quieran llevar su juego al siguiente nivel, ¿de acuerdo? Y aquí voy a hablar sobre Emotion. Lo voy a hacer en Emotion porque así funciona MUI. Emotion es bastante similar a los componentes de estilo, por cierto. Y voy a hablar sobre la prop style y el estilo en la prop SX, ¿de acuerdo? El estilo es el motor detrás de esta estilización. El estilo que vamos a agregar a los componentes ahora es el que inyectará el tema a nuestros componentes y se usa esta función, style, ¿de acuerdo? Y lo vamos a cubrir en un segundo. Es bastante simple. No se asusten. Y otra cosa es la prop SX. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. Con la prop SX, Con la prop SX, Con la prop SX, Con la prop SX, Con la prop SX, Con la prop SX, Con la prop SX, pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Ven la caja. Ven la caja. Ven la caja. Ven la caja. Ven la caja. Ven la caja. Ven la caja. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. Así es como lo harían. Así es como lo harían. Así es como lo harían. Así es como lo harían. Así es como lo harían. Así es como lo harían. Así es como lo harían. Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. De todos modos, vamos a escribir un estilo personalizado simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, ya no lo usamos. ya no lo usamos. ya no lo usamos. ya no lo usamos. ya no lo usamos. ya no lo usamos. ya no lo usamos. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. JS. JS. JS. JS. JS. JS. JS. La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración para eso. para eso. para eso. para eso. para eso. para eso. para eso. No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. Es bastante simple. Es bastante simple. Es bastante simple. Es bastante simple. Es bastante simple. Es bastante simple. Es bastante simple. No se asusten. No se asusten. No se asusten. No se asusten. No se asusten. No se asusten. No se asusten. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX

De esta manera, mi componente se ve más limpio y es mucho mejor para mí hacerlo de esta manera porque, para ser honesto, una vez que sigues haciendo eso es el mismo tipo de modelo de organización y las cosas se vuelven mucho, mucho más limpias en otros lugares, ¿de acuerdo? Entonces, lo que vamos a hacer aquí es importar estilos desde button styles, ¿verdad? Y luego lo que podemos hacer ahora es nuestro botón, podemos simplemente establecer esos estilos ahí mismo. Así que usamos la prop SX, ¿de acuerdo? La prop SX, la vamos a usar, y ahora diremos styles.root. Lo llamo root porque es una especie de patrón consistente que uso, ¿verdad? En cualquier componente, tienes un nivel raíz, ¿verdad? Entonces, si usas ese enfoque, no puedes usarlo en otro lugar. Así que ese es el root. Si miras nuestra aplicación react, está bien, puede resolver nuestro CSS. Necesitamos eliminar esa importación.

Este es el botón. Probablemente no te hayas dado cuenta mucho, pero esta prop PX ahí establece el relleno en el nivel horizontal. Esto es horizontal. X es para horizontal. Y es para vertical. Entonces, si cambio la X por Y, es PY. No sé si te diste cuenta de que mencioné eso antes, P es relleno, ¿verdad? P significa relleno. Y probablemente preguntes de nuevo. Ahora, no lo preguntaste antes, pero tres no es tres, es 24, ¿verdad? Mencioné eso antes y la razón es, y lo explicaré ahora, Material utiliza el fundamento de Material, Material UI utiliza el fundamento de Material y eso utiliza esta cuadrícula de referencia. Esta cuadrícula de referencia significa que todo se alinea a una cuadrícula de ocho puntos cuadrados, ¿de acuerdo? Esta es una forma de especificar algunas reglas en nuestras aplicaciones front-end, ¿de acuerdo? Si usamos esta cuadrícula de referencia, las cosas mejoran si usamos esa regla en otros lugares. Y cuando digo usar esta regla en otros lugares, significa que si tienes ciertos espacios entre elementos, debes mantener esta regla de ocho píxeles o un múltiplo de ocho píxeles. Este es un ejemplo aquí. Este elemento es de 12 píxeles, pero eso ha crecido, ¿verdad? Porque debería ser 16, ¿verdad? Para algunas cosas no te importa, pero para otras cosas quieres hacer ocho o incluso puedes hacer cuatro. Eso también está bien, ¿verdad? Pero esto es el cuatro, lo siento. Esto no ha crecido. Por defecto, tenemos el ocho y también está la cuadrícula de cuatro puntos. Para usar la cuadrícula de cuatro puntos, creo que puedes hacer una configuración en tu tema. Pero no vamos a usar el cuatro, vamos a usar el ocho. Pero en este cuatro, puedes ver que esto es un múltiplo, 12 es un múltiplo de tres, ¿verdad? Multiplicado por tres, obtendrás el 12. En este caso, usaremos el ocho. No sé si notaste este componente vat en el lado derecho, ves estos dos pequeños elementos de la cuadrícula, esto es 16. Entonces, para especificar eso, con esta regla, será dos, ¿verdad? Tal vez al principio parezca difícil de seguir, pero una vez que lo haces, se convierte en un modelo bastante consistente. Y déjame decirte, ayuda mucho para crear cosas que se vean bien. Es un patrón muy agradable.

De todos modos, veamos nuestro botón, este botón se ve terrible, vamos a hacerlo X como antes. Y ahora tenemos 24 píxeles en cada lado, también puedes verlo en DevTools. En la sección de cálculos, puedes ver que el padding (espaciado interno) es de 24 en el lado izquierdo, 24 en el lado derecho, ocho en la parte superior, ocho en la parte inferior, ¿de acuerdo? Cambiamos el texto a capitalize en lugar de uppercase, agregamos un poco de espaciado entre letras y cambiamos el peso de la fuente. Si estás acostumbrado a CSX, esto es diferente, ¿verdad? Estamos utilizando camel case para cada propiedad individual. Y como mencioné, porque estamos usando SX, tenemos otras cosas que podemos usar para simplificar las cosas. P para padding (espaciado interno), M para margin (margen), y también puedes obtener más cosas que eso. Pero esas son las bases. Muy bien, chicos.

Así que hicimos eso. Y nuevamente, si quieres agregar más estilos, simplemente puedes agregar nuevas propiedades a este objeto, y luego inyectarlas en tus componentes, ¿de acuerdo? Lo siento, aquí, ¿de acuerdo? Entonces estarás utilizando la propiedad SX. Es un ejemplo bastante sencillo, pero creo que puedes entender cómo funciona este estilo a un nivel alto. Aquí tengo un ejercicio que no necesitamos hacer ahora, pero la idea es cambiar el color de fondo utilizando la propiedad SX. Bastante, bastante simple. Creo que puedes hacerlo en un segundo. Pero de todos modos, ahora estamos al final de la sección dos. ¿De acuerdo? Ahora vamos a tomar un descanso de cinco minutos. Las secciones más emocionantes están por venir. Una es la implementación tres, que cubriremos a continuación, que es agregar un componente más complejo, y haremos más cosas como agregar algunos modos oscuros a nuestra aplicación y mejorarla. Estaba leyendo el hilo sobre lo que mencionó Sebastien y Ernesto hablando sobre el problema de performance (rendimiento), y sí, tienen razón. SX no es tan eficiente como se puede ver al usar un nombre de clase básico, pero aquí estamos renderizando, como mencionaste, miles de estilos primitivos, ¿verdad? Es bastante grande, pero estoy totalmente de acuerdo. SX es bastante útil si quieres hacer cosas rápidamente, pero hay un compromiso de rendimiento, debo decirlo. ¿Hay algo que en realidad es nuevo para mí? Así que gracias por compartir esto porque todavía estamos usando JSX en la versión anterior, MUI en la mayoría de nuestros proyectos. Y en algún momento necesitaremos evolucionar a la nueva versión de MUI. Y, pasar de JSX a TSX para nosotros, probablemente sea lo que haremos. Creo que TSX se supone que es una evolución de eso, pero tendremos que echarle un vistazo. JSX fue bastante eficiente para estilos estáticos. Creo que para los estilos dinámicos, emotion es mejor. Pero SXPRO es algo bastante nuevo. Es algo que comencé con la versión cinco y viene de forma gratuita. Y parece muy útil para ciertas cosas en términos de escribir código más rápido y hacer las cosas más rápido y que se vean un poco más limpias, pero sí, hay un compromiso de rendimiento. Así que tenlo en cuenta. ¿De acuerdo? También puedes seguir usando nombres de clase o cualquier otro motor que estés utilizando. Como mencioné antes, hay algunos motores que puedes usar para el estilo dentro de UI y puedes encontrarlos en la documentación. De todos modos, vamos a continuar, la masterclass ya está en este punto. Solo para que lo sepas, tengo el enlace justo aquí y creo que también está en el chat de Zoom, así que lo tienes ahí. Vamos a acelerar un poco las cosas porque tenemos un poco menos de 45 minutos y necesitamos cubrir un par de secciones, ¿de acuerdo? La primera es, voy a eliminar, voy a eliminar algunas de estas pestañas para que esté un poco más limpio y vamos a agregar un componente más complejo. Este es un componente de carrito y como hicimos con la alerta y el avatar, vamos a hacer exactamente lo mismo porque estamos obteniendo muchas cosas aquí de forma gratuita. Como mencioné, esto también es parte de la documentación de MUI y puedes encontrarlo allí. Este componente es bastante interesante y lo verás en un segundo. Entonces, como hicimos antes con los pocos componentes, vamos a agregar una nueva carpeta llamada cart y luego, dentro de cart, vamos a agregar tres nuevos archivos, index.js, cart.jsx para hacerlo reutilizable en un segundo y cart.stories.jsx. Vamos a pegar eso ahí y nuestro carrito debería mostrarse en nuestro storybook, ahí está. Es bastante genial, ¿verdad? Tenemos el contenido, las variantes, podemos elevar el carrito, podemos establecer el pie de página, hay una imagen que también podemos cambiar como queramos y eliminar el encabezado. Muy bien. Entonces este componente está ahí, simplemente lo copiamos y pegamos pero no forma parte de nuestra biblioteca de componentes reutilizables, ¿de acuerdo? Solo se muestra en un storybook. Como hicimos antes con el avatar y la alerta, vamos a... Voy a usar el avatar como plantilla para el archivo index y el log porque es muy simple y lo tengo ahí. Entonces, las historias en su plantilla, puedo copiar todo el HTML y reemplazar el return y cambiar los nombres porque ya no es un avatar, es un carrito y también voy a establecer estos arcs como props, ¿verdad? Así que los vamos a establecer como props. Muy bien, y luego este arcs header, también lo vamos a agregar así como la imagen, el contenido, el pie de página y eso es todo. Ahora necesitamos eliminar esa clave arcs. Muy bien, y estos son algunos imports que vamos a obtener en un segundo. Así que mira las historias del carrito, tienen todos los imports en la parte superior, y simplemente podemos pegarlos. Y el carrito, necesitamos cambiar eso porque entra en conflicto con nuestro nuevo componente. Y aquí tienes, hemos creado nuestro componente y ahora necesitamos inyectarlo en nuestra historia, ¿de acuerdo? Importa el carrito desde cart. Y simplemente vamos a eliminar toda esta lógica. Y eso es todo. Aquí tienes, así que tenemos nuestro carrito ahí. Fantástico. Entonces, idealmente, y este es un ejercicio que si tuviéramos tiempo, lo habríamos hecho juntos. Podemos extender este carrito para que también use nuestro menú, que está aquí, ¿verdad? Idealmente, también quieres hacer eso reutilizable, una propiedad extensible, para que puedas inyectarla desde el exterior. Al final, quieres hacer tu componente lo más reutilizable posible, ¿verdad? Pero te dejo a ti hacerlo, ¿de acuerdo? Así que agregamos este componente carrito y lo inyectamos. Lo vamos a agregar como parte de nuestra biblioteca que tenemos en un storybook. Así que esto va a dar un error por un segundo, pero está ahí. ¿De acuerdo? Tenemos nuestro carrito. Genial. Así que tenemos nuestro carrito. Hicimos este componente ahí. Este es el último componente que estamos agregando. Ahora vamos a hacer algunas cosas aquí, ¿de acuerdo? Vamos a hacer que los componentes sean responsivos. Y esto es bastante genial. Muy genial. Entonces, MUI nos permite hacer que el comportamiento de nuestras fuentes sea responsivo desde nuestro tema. ¿De acuerdo? Como puedes ver aquí, hay un fragmento que puedes comenzar a usar con REMS. Pero también hay esta función llamada responsive font sizes y mira qué genial es esto. Porque si miras, por ejemplo, nuestra tipografía y ves cómo se ve en diferentes tamaños, ¿verdad? En móvil, o móvil pequeño, o la tableta, no es realmente responsiva, ¿verdad? Pero si vamos a nuestro tema e importamos estos tamaños de fuente responsivos, podemos simplemente llamar a nuestro tema. Dentro de responsive font sizes, queremos agregar nuestro tema. Entonces, de repente, todas se vuelven responsivas. Mira, acabo de hacer eso, ¿verdad? Acabo de agregar esta función y todas nuestras entradas de tipografía ya son responsivas. Esto es bastante genial porque ni siquiera necesitas pensar en hacer muchas cosas. Obtienes todo esto de forma gratuita. Ahora, si quieres hacer las cosas más personalizadas y específicas para diferentes páginas, también puedes usar el motor de estilos para agregar eso. Pero esto, creo que, es bastante útil y puedes usarlo de inmediato. Puedes agregar algo de responsividad a tu aplicación desde el principio. Vamos a ver nuestro carrito ahora en un móvil pequeño, y en el móvil grande ya es responsivo, es bastante genial. Muy bien. Ahora te mostraré también los puntos de interrupción porque esto es muy importante.

La forma en que realizas configuraciones en tus puntos de interrupción, utilizando Material UI, debes saber que hay seis propiedades diferentes, y estas son como los puntos de interrupción predeterminados que utiliza Material UI. Uno es 0, 600, que es pequeño, 900 mediano, 1200 grande y Excel es 1536. Todos estos también puedes personalizarlos como desees. Si haces clic aquí, en Tema, puedes establecer tus puntos de interrupción y configurarlos como desees. Si no lo haces, los que vendrán aquí de forma predeterminada serán los que verás. Pero digamos que nuestra versión pequeña será 400, así que lo hago aquí.

Si no establezco nada, simplemente tomaré las propiedades predeterminadas. Pero esto es bastante útil porque también puedo hacer todos los diferentes puntos de interrupción en un solo archivo, por lo que todo es coherente y podemos usarlo en todos lados. Otro aspecto es que es responsivo, y eso es fantástico. Una cosa que tengo que decir es que si hubiera tenido tiempo, te habría mostrado cómo puedes inyectarlos de manera responsiva. Pero como no tenemos mucho tiempo, no puedo hacerlo. Pero aquí tengo la documentación. La documentación te permite encontrar toda la información que necesitas. Como aquí, estamos inyectando desde la tipografía H3. Puedes hacerlo de esta manera o de esta manera, que es aún mejor. En lugar de nuestro código, solo usarás el tema. Podrías hacer theme.breakpoints.up('md'). Solo para que lo veas ahora mismo, puedo hacerlo muy rápido contigo. Lo que puedo hacer es tomar eso en la raíz y pegarlo aquí. El tema se queja. La forma en que inyectas el tema es haciendo esto. Esto también devuelve una función. Puedes hacer esto. Digamos que nuestro tamaño de fuente, solo para ver cómo funciona, verifiquemos. Nuestro tamaño de fuente de botón es 24 M. Oh, es app MD. MD, creo que era 900. Así es como realmente quieres hacer tal vez consultas en tus componentes utilizando el motor de estilos. Bastante genial. También puedes tomar un enfoque diferente. En lugar de hacerlo desde el lado del estilo, también puedes hacerlo desde el lado del componente. Eso es lo que vamos a cubrir en un segundo.

Vamos a agregar un hook llamado UseMediaQuery, este hook UseMediaQuery es un fragmento de código que puedes arrastrar y soltar en tu proyecto y probablemente ya sabes qué son los hooks. Pero los hooks son súper útiles porque son lógica de negocio reutilizable que puedes reutilizar en otros componentes. Dentro de SRC vamos a crear una nueva carpeta llamada hooks y vamos a agregar dos archivos. Uno de ellos es Index.js y el otro es UseMediaQuery.js. Luego agregaremos el Index.js así como este UseMediaQuery.js. La razón es que si comienzas a agregar más hooks, puedes inyectarlos en el index. Así que solo tienes que hacer en la importación, abrir llaves y el nombre de tu hook, muy simple. De todos modos, hemos agregado este hook. Proporciona tres propiedades diferentes que básicamente extienden nuestra consulta de medios de Material UI. Es más específico. Si es una pantalla móvil, una pantalla de tablet o una pantalla de escritorio, puedes reutilizar esto en tus proyectos si lo encuentras útil. Yo creo que es muy útil. Por ejemplo, en nuestro carrito, ¿verdad? Dado que este es un componente más complejo, podemos importar nuestro use media query desde hooks, ¿verdad? Y este use media query viene con diferentes propiedades, ¿verdad? La primera propiedad, creo que era como, es una pantalla móvil. Sí, esta es otra forma de saber si es una pantalla móvil o no. Así que digamos que, si miramos nuestro storybook, ¿verdad? Que por alguna razón ahora está dando un error, ok, ahora no está dando un error. Si miramos nuestro storybook y decimos que, si es una pantalla móvil no renderizar el encabezado, ¿verdad? También puedes ver que funciona, ¿verdad? Mira eso. Así que en un móvil pequeño, no funciona tan pronto como es un móvil grande, funciona porque así no configuramos nuestra pantalla móvil. Si cambiamos ahora, ¿verdad? Como nuestro, bueno, nuestro hook apunta a SM. Así que si cambiamos en nuestro tema, la versión SM en lugar de 400 es 600. Entonces no veremos el encabezado, ¿verdad? Porque esto es para 414. Así que es menor que 600, ¿verdad? En cualquier caso, creo que ahora tienes una muy buena idea de cómo puedes usar consultas de medios en tu lógica y también en tus archivos de estilo. Pero sí, si tienen alguna pregunta, no duden en preguntarme. Les recomendaré que pregunten en Discord porque ese será el único lugar donde responderé preguntas. Tan pronto como terminemos la llamada, no podré ver nada. En fin, aquí estamos. Ya hemos agregado capacidad de respuesta a nuestro sitio web y también hemos hecho algunas consultas de medios y ahora las cosas se van a poner muy, muy, muy emocionantes.

Lo primero que haremos es agregar capacidades de modo oscuro y lo primero es lo primero, permíteme explicarte un poco sobre qué es este modo oscuro. Si miras nuestro tema, debajo del tema, ¿verdad? Hay esta paleta ahí. Una cosa que debes saber es que si miras la documentación de MUI, hay una sección llamada modo oscuro. Como puedes ver, hay un modo llamado en oscuro, puedes especificar oscuro y cambiará las cosas por defecto. Así que vamos a crear dos temas diferentes, uno claro y uno oscuro.

Entonces, lo que podemos hacer ahora, en lugar de exportar por defecto esto, podemos crear un nuevo tema llamado modo claro. Lo siento, tema claro, llamémoslo tema claro porque ahora es un tema. Así que crearemos un tema claro y vamos a duplicar esto. Y allí abajo, vamos a tener nuestro tema oscuro. Y solo para empezar, vamos a agregar esta nueva propiedad llamada modo oscuro. Eso es todo, ¿verdad? Ahora mismo las cosas se están rompiendo porque antes teníamos el tema por defecto. Ahora, no tenemos ningún tema por defecto. Así que necesitamos cambiar nuestro JX principal, lo siento, nuestro JX de vista previa. Y en lugar de tema, usemos el tema oscuro a partir de ahora. Por ahora, vamos a usar el tema oscuro, y mira eso. Tan pronto como agregamos el tema oscuro, nuestro componente que antes era blanco, ahora es oscuro. Utiliza el fondo y ya hace la transformación por ti, ¿verdad? Es súper genial. También necesitamos hacer lo mismo en nuestra aplicación, ¿de acuerdo? Así que en nuestra aplicación, tenemos el index JS. Y este tema ya no está allí. Así que vamos a establecer el tema oscuro. Y en nuestra aplicación en este momento, creo que no tenemos nada que ver todavía. Bueno, la alerta está cambiando de color, lo cual es genial, pero veremos más. Fantástico, aquí estamos, agregamos el tema oscuro, pero sería bueno cambiar entre los dos, ¿verdad? Sería bastante genial. He agregado este fragmento para ti. Esto tiene como una utilidad de concurso que también puedes usar en tus proyectos. Lo encuentro muy útil. Esto utiliza la API de contexto. No sé si estás familiarizado con la API de contexto. Ojalá tuviera tiempo para explicarte qué hace. Pero al final del día, lo que estamos haciendo es agregar algunos proveedores de alto nivel que nos permiten hacer ciertas cosas en nuestra aplicación. Como por ejemplo, si queremos cambiar nuestro modo claro a modo oscuro, así es como lo haremos en el nivel más alto de nuestra aplicación. Bajo SRC, vamos a crear una nueva carpeta llamada Contexto. Contexto, y dentro de Contexto, vamos a tener algunos archivos como ves en los fragmentos. El primero es index.js. Podemos copiar y pegar todo. Muy bien. Y luego vamos a agregar mode.context.jsx y copiar y pegar todo también. Y luego vamos a hacer algo en la vista previa, pero me detendré aquí por un segundo solo para mostrarte qué está pasando. El contexto de modo. ¿Verdad? Tenemos lo importante, el tema claro, el tema oscuro. Y también está el modo oscuro y el modo claro que... dos constantes que aún no hemos especificado. Lo haremos en un segundo. Pero este contexto de modo está exponiendo dos funciones diferentes. Una es establecer modo y otra es alternar modo. ¿De acuerdo? Estas ahora se están memorizando en nuestro proveedor, lo que significa que esto no se está ejecutando todo el tiempo cuando la aplicación cambia. ¿De acuerdo? Y también tenemos el tema que cuando nuestro modo cambia a modo claro, estaremos exponiendo nuestro tema claro. De lo contrario, estaremos exponiendo nuestro tema oscuro. ¿De acuerdo? Así es el nivel más alto de nuestra aplicación que nos ocuparemos de cambiar ambos temas. ¿De acuerdo? Así que bajo tema, solo necesitamos agregar dos nuevas constantes. Uno de ellos es modo oscuro y otro es modo claro. Así que vamos allí. Vamos allí. Así que está bajo tema. Exportaremos modo oscuro y eso es igual a oscuro y modo claro. A claro, ¿verdad? Así que modo oscuro, modo oscuro también podemos usarlo aquí para que podamos limpiar esta cadena para que no esté codificada. Fantástico. Ahora esto está limpio y listo para usar. Y volviendo a nuestro contexto de modo, esto ahora se importa bien, pero no sé si te diste cuenta, pero estamos importando el proveedor de tema aquí. Así que si miramos nuestra aplicación en este momento, en el index.js, ¿verdad? Estamos importando el proveedor de tema. Ya no necesitamos importar el proveedor de tema. Importaremos este nuevo proveedor, ¿de acuerdo? Y vamos a ir allí en un segundo. Pero antes de ir allí, también te muestro este index.js, que está exponiendo algunas cosas. Una es que está exponiendo el contexto y el proveedor. ¿De acuerdo? Pero las dos cosas que quiero que entiendas de esto es solo este nuevo gancho, que es un gancho de contexto, que usaremos para cambiar nuestros temas, ¿verdad? Y luego el proveedor que inyectaremos en el nivel más alto de nuestra aplicación, ¿de acuerdo? Eso es todo. Entonces, ahora en la vista previa, en nuestra storybook, ¿de acuerdo? Necesitamos agregar algunas cosas. Vamos uno por uno. Entonces, lo primero es lo primero, las primeras cinco líneas, vamos a copiar eso y pegarlo. Después, bueno, en realidad este tema, podemos eliminar eso. Y también podemos eliminar el proveedor de tema en la parte superior, ¿verdad? Esto va directamente allí, fantástico. Agregamos todo esto allí, y también queremos agregar estos parámetros después de los parámetros, después de los controles, ¿de acuerdo? Vamos a agregar eso. Y luego las cosas se van a poner interesantes ahora. Porque estamos usando el proveedor de tema, necesitamos agregar, para usar nuestro nuevo proveedor, que es el proveedor de modo. Para hacer eso, necesitamos tener, necesitamos agregar un nuevo proveedor de historia allí. Así que podemos copiar esto. En realidad, podemos copiar todo, chicos, y reemplazar la última parte. Y solo para explicarte lo que hace, nuestros decoradores ahora están usando nuestro proveedor de modo. Nuestro proveedor de modo es lo que definimos en nuestro contexto. Y luego, tenemos este proveedor de historia, que nos permitirá cambiar entre los diferentes modos. Ahora, necesitamos reiniciar la storybook para ver esto en acción, ¿de acuerdo? Así que, vamos, reiniciemos la storybook. Muy bien, fantástico. Entonces, si queremos cambiar ahora al modo oscuro, mira qué fácil es. Si haces clic en este icono aquí, y luego haces clic en oscuro, entonces verás la versión de modo oscuro. Si haces clic en claro, verás la versión clara. Entonces, lo que hicimos ahora, chicos, al importar algunas lógicas en nuestros archivos, es poder cambiar entre estos dos modos desde una sola aplicación. Eso es súper genial, ¿verdad? Como puedes ver, ahora nuestra storybook está funcionando, pero no nuestra aplicación, ¿verdad? Y me gustaría tener tiempo para mostrarte eso, pero lo dejaré en tus manos cómo hacerlo. Creo que ya tienes la información que necesitas para hacerlo. Te recomendaré que mires este archivo aquí y también uses el uso del contexto de modo, que es el gancho que creamos para cambiar el modo desde cualquier parte de nuestra aplicación, ¿de acuerdo? Y sí, eso es prácticamente todo. Chicos, si descargan el código, también tendrán acceso a este código del que estaba hablando que les permitirá cambiar los temas desde la propia aplicación, ¿de acuerdo? Y ahora llegamos a la última sección.

Las cosas se van a poner muy emocionantes ahora. Así que cuando creas tu sistema de componentes, es útil tenerlo localmente, pero idealmente, puedes exponerlo para que otros equipos, otros miembros del equipo puedan encontrarlo, ¿verdad? Especialmente los no desarrolladores. La forma más fácil y rápida de hacerlo es la que voy a mostrarte. Así que vamos a hacer una construcción de Storybook con Yarn. También puedes hacer npm run build storybook. Y una vez que lo hagas, se creará una nueva carpeta, ¿verdad? Lo veremos en un segundo. Esta nueva carpeta se llama Storybook Static, ¿de acuerdo? También puedes cambiar eso. Si quieres cambiar la carpeta, ve a Paket Json y bajo Build Storybook lo que necesitas hacer es agregar my, guión O, que significa salida y luego el nombre de tu carpeta. Puedes llamarla dist o como quieras, ¿de acuerdo? Pero lo que esto hace es construir un Storybook a partir de public también. ¿De acuerdo? Hay cosas en public que estarán allí. Bien, acabamos de construir un Storybook. Así que ahora, si miras tus archivos, hay una nueva carpeta llamada Storybook static. Es prácticamente como un archivo estático, incluso si abres el index.html, tienes acceso a un Storybook, ¿verdad? Con las cosas que hicimos ahora. Para desplegarlo, puedes usar Netlify Drop. Te recomendaré que crees tu cuenta en Netlify porque es gratis, chicos. Si no inicias sesión cuando estás desplegando, creo que tu sitio solo estará en vivo durante unas pocas horas. Pero si creas una cuenta y es gratis, creo que es para siempre, así que es algo que te recomendaré que eches un vistazo porque es útil. Así que puedes subirlo e incluso cambiar el nombre de dominio. Lo cual también es bastante genial. ¿Han usado Netlify antes? Nadie responde. Oh sí, Gabriel, eso es genial. Eso es impresionante. Muy bien, obtuvimos un 500, mira eso. Lo siento, creo que lo estoy haciendo mal, ¿verdad? No estoy exportando. No estoy importando lo que debería exportar. Lo siento chicos, denme un segundo. Necesito exportar un Storybook static. No sé qué estaba exportando, chicos. Lo siento por eso. No debería llevar mucho tiempo, sin embargo. Así que sí, aquí lo tienes. Tu sitio está en vivo y tenemos nuestro Storybook desplegado allí. Y todas las diferentes versiones de nuestros componentes, el Modo Oscuro que agregamos está allí. Así que cualquiera puede venir aquí y usar lo último y lo mejor, ¿de acuerdo? Idealmente, tienes alguna integración de CDCI en tu GitHub para que se despliegue automáticamente en la instancia que desees. También puedes usar GitHub Actions para eso, ¿verdad? Así que esta es la forma más rápida de tener tu sitio ahí fuera. De todos modos, también puedes... y esta es la parte más emocionante. Lo que voy a mostrarte. Así que ahora mismo, Anima está creando un nuevo complemento. No sé si conoces Anima, pero Anima app, esta es una herramienta de prototipado que te permite obtener código directamente desde activos de diseño, ¿verdad? Es una aplicación bastante genial, pero creo que lo que están intentando hacer ahora, que es bastante nuevo porque esto está en beta. Esto no está disponible para todos todavía. Así que lo que vas a ver ahora es bastante, bastante nuevo. Muy bien. Ni siquiera tienes acceso a ello todavía. Necesitas solicitar acceso, pero estará en vivo pronto. Así que mantén un ojo en esto. Entonces, lo que vamos a hacer es agregar este nuevo complemento y tienes este fragmento aquí. La cosa es que en este punto, no creo que puedas ver lo que estoy a punto de ver porque no tienes acceso. Así que ahora mismo, lo que te recomiendo hacer es ver lo que estoy haciendo porque es la única forma en la que lo verás hasta que esté en vivo. Muy bien. Y creo que eso será muy pronto. Así que por eso tienes acceso al código una vez que esto esté en vivo, ¿de acuerdo? Así que instalé el Storybook Anima y ahora necesito registrarlo en mi Storybook. Muy bien. Voy a agregar ese complemento justo allí como lo hicimos con la accesibilidad. Muy bien. Y luego necesito configurar el token de acceso de Anima. Permíteme mostrarte lo que voy a hacer. Así que estoy mostrando como un nuevo marco en Figma. No sé si conocen Figma. Probablemente sea la herramienta más útil en este momento para que los diseñadores construyan cualquier diseño. Así que esto también es algo que puedes abrir si quieres. Pero en Figma, cuando creas un nuevo marco, se ve así, ¿verdad? Y puedes agregar cosas, ¿verdad, en el archivo de Figma? Este es el proyecto vacío. Así que lo que voy a hacer es mostrarte este complemento llamado Anima. Muy bien, si lo ejecuto, tengo acceso a un Storybook, pero tú aún no, ¿de acuerdo? Eso es FYI, ¿de acuerdo? Tengo algún proyecto de sincronización, lo voy a olvidar porque voy a empezar desde cero contigo. Muy bien, entonces. Como mencioné, esto está en beta, chicos aún no tienes acceso. Puedes solicitar acceso. Esto estará en vivo pronto. Pero lo que voy a mostrarte es esta característica bastante genial que nos permite importar nuestros componentes de forma intuitiva, ya sabes, podemos solicitar importar nuestros componentes desde un Storybook a Figma, lo cual convierte eso en un activo de diseño. Así que si miras la documentación también necesitamos agregar un nuevo archivo llamado .env, ¿de acuerdo? Y pegar este token de Storybook, ¿de acuerdo? Necesitamos espaciar este token que estoy usando. Muy bien. Y ahora podemos sincronizar tus componentes, pero déjame mostrarte ahora. Ahora ya he instalado Anima. Solo necesito reiniciar nuestro servidor de Storybook, ¿de acuerdo? Probablemente te hayas dado cuenta de que hay un nuevo complemento justo aquí, el complemento de Anima, ¿de acuerdo? Así que vamos a nuestro botón y hacemos clic allí. Esta es la historia que se sincronizó correctamente. Así que abriremos nuestro Figma y solo necesito agregar esta URL aquí. Falta una fuente. De todos modos, voy a empezar a generar el componente. Estoy generando ahora el componente desde el Storybook. Muy bien, este no es el correcto. Muy bien, aquí lo tienes. Aquí lo tienes, como sabes, has visto mejor. Así que las cosas no están funcionando al 100% ahora mismo, pero estará allí. Así que permíteme generar todos los componentes, ¿de acuerdo?

Las cosas se están generando. Muy bien, creo que ya tenemos algunas cosas. Ya tenemos algunas cosas, miren eso, chicos. Entonces, nuestro botón ahora está aquí en Figma, ¿verdad? Estos son los elementos utilizables que los diseñadores pueden usar de inmediato, y provienen directamente de nuestra instancia de Storybook, ¿verdad? Como lo configuramos en un Storybook, está aquí con todas las variantes diferentes, por lo que prácticamente puedes venir aquí y comenzar a reutilizarlos en tu aplicación, ¿verdad? Así que ve aquí en Assets, puedes buscar el botón, por ejemplo, que creamos. Este está mostrando rojo. Creo que hay algo que está pasando, probablemente, oh sí, aquí lo tienes. Estas propiedades aquí, ¿verdad?, son las propiedades que teníamos en Storybook. Voy a poner esto lado a lado para que puedas verlo. Esto es una coincidencia exacta, pero ahora tenemos la única fuente de verdad en Storybook. Ahora los diseñadores, en lugar de crear una nueva biblioteca de componentes, pueden simplemente agregarla desde nuestra biblioteca de Storybook, ¿verdad? Y si ves aquí estos colores, podemos cambiarlos a primario, secundario, éxito, advertencia, ¿verdad?, como hicimos aquí también, ¿verdad?, secundario. Oh, tenemos un error ahí. Muy bien, chicos, hay un error ahí. Indefinido y muy oscuro, lo que sea. Ahora no está ahí, pero creo que algo está mal con nuestra lógica. Tendremos que arreglar eso. Pero de todos modos, tenemos acceso a las diferentes propiedades, mediano, pequeño, por cierto, esto no está funcionando ahora, pero esto debería funcionar. La versión desactivada también. Así que tenemos acceso a todos los componentes que creamos ahora, como el avatar también, ¿verdad? Es directamente desde un storybook. Y lo más genial de esto, y esto es algo que se está desarrollando, es que al final del día, el objetivo es que todos estos componentes sean útiles como un marco de prototipo, ¿verdad? Como si fueras a Anima, puedes previsualizar esto, y mira esto, y previsualízalo, que en un segundo debería aparecer. Perdónenme, chicos, porque les estoy mostrando algo que está en beta, por lo que no es tan estable, pero espero que lo veamos ahora. Esto está tardando más de lo que debería. Esto no es normal. Cuando esto sucede, hmm, algo está pasando. Pero en cualquier caso, lo que iba a mostrarte, y esto funciona, esto me ha funcionado, oh, ahora está funcionando, mira eso, ahora tenemos acceso a nuestro elemento de producción. Mira eso, ya tenemos el repositorio. Entonces, lo que creamos en nuestro Storybook como un componente de producción ahora es accesible para cualquier diseñador, incluso tú, para armar un prototipo bastante rápido, arrastrar y soltar componentes y crear tus propios prototipos directamente desde tus componentes en un storybook. Eso es un cambio de juego súper, súper importante, ¿sabes? Y eso es lo que quiero decir con innovación. Si ustedes quieren innovar, quieren comenzar a pensar en la forma más rápida de crear algo que puedan poner frente a los usuarios, ¿verdad? Y lo más cercano al producto, que al final, es el mejor comentario que puedes obtener de cualquier usuario. Entonces, si puedes crear esta biblioteca de componentes que acabamos de hacer en menos de tres horas, ¿verdad? Y luego comenzar a armar prototipos, ¿verdad? Arrastrando y soltando tus propios componentes en Figma y poner esto frente a los usuarios. Al final del día, estás innovando, ¿verdad? Por eso esto se llama Innovar con React, porque no estamos innovando desde una herramienta de diseño, que es el proceso habitual. Estamos innovando desde el lado del desarrollo, lo cual es ahora súper, súper nuevo. Y como mencioné, chicos, hay pocas empresas en este momento tratando de hacer esto. Una de ellas es Anima. Pero si miras las herramientas NoCode, es un concepto muy similar, ¿verdad? Las herramientas NoCode nos van a ayudar realmente, ya sabes, a pasar menos tiempo construyendo cosas, lo cual nos encanta hacer, ¿verdad? Pero también podemos ir un paso más allá de eso, que es innovar. Muy bien, chicos, eso es prácticamente todo. Casi se nos acaba el tiempo. Les mostré esta última sección de prototipado con tus componentes de producción, porque esto es algo súper, súper nuevo. Hasta ahora en Figma, incluso si lo intentas, no hay forma de que puedas usar campos de entrada, ¿verdad? Pero esto va a ser una tendencia que sucederá muy pronto, lo cual es súper emocionante. De todos modos, chicos, espero que lo disfruten. Fue genial compartir con ustedes todo esto. Espero que les guste. Muchas gracias. Que tengan un maravilloso día, y espero verlos pronto, chicos. Adiós.