Construye tu propia biblioteca de componentes, con `Shadcn-vue`

Hola chicos. Soy Xenonia y bienvenidos a la Charla Relámpago. Hoy compartiré con ustedes sobre cómo construir su propia biblioteca de componentes con Shed CN view. Soy de Malasia y soy el líder de front-end en TroopFail Inc. También soy el co-mantenedor de RedixView y Shed CN view.

Entonces, en primer lugar, ¿qué es una biblioteca de componentes tradicional? Básicamente, la describo como la biblioteca de componentes donde la API del componente fue diseñada, como props, eventos, métodos y slots, fueron diseñados por el autor o el equipo mismo. Así que creo que todos hemos usado una biblioteca de componentes antes. Definitivamente, nos encontraremos con algunos desafíos. En primer lugar, siempre estamos limitados a la API expuesta. Ya sea que exponga mil props o eventos, siempre estamos de alguna manera limitados. Siempre pensamos en el fondo de nuestra mente, ojalá pudiera modificar algo de ese componente.

El segundo desafío es que siempre nos resulta difícil personalizar el estilo, especialmente cuando estamos usando, digamos, Tailwind CSS o Uno CSS, siempre necesitamos forzar el importante signo de exclamación para el estilo, para afirmar el estilo, porque la biblioteca de componentes no fue construida ni diseñada para tener estilos de clases en línea.

En tercer lugar, siempre nos resulta difícil construir un envoltorio alrededor de ella. En mi empresa, estábamos tratando de construir un sistema de diseño, una biblioteca de componentes alrededor de una biblioteca de componentes, porque queremos tener diferentes estilos, diferentes comportamientos de componentes, y siempre nos resulta tan difícil hacerlo. Creo que este problema siempre ha sido el caso, hasta que llegó ShadCN.

Este proyecto fue lanzado inicialmente el año pasado, en enero, y desde entonces ha ganado mucha popularidad en el mundo de React, y también ha afectado a Vue, así como al mundo de Shelf. Entonces, ¿qué es este ShadCN Vue? Esencialmente, es un concepto que te permite copiar y pegar componentes accesibles en tu proyecto. Y resuelve todos los problemas que mencioné anteriormente. ¿Cómo? No voy a hablar sobre ShadCN UI, porque ese proyecto está construido para React. Así que veamos ShadCN Vue, que es esencialmente la misma idea, el mismo concepto, pero es una vista de comunidad de ShadCN UI. Y es una colección de componentes reutilizables que puedes copiar y pegar o usar la CLI para agregar los componentes a tu proyecto. Así que elimina tres de los problemas mencionados anteriormente. Ya no estamos limitados por la API expuesta. Ahora somos libres de diseñar la API como queramos. Porque todos los componentes están ahora en tu proyecto, tienes la propiedad del componente. Así que echemos un vistazo a este botón aquí. Puedes agregar cualquier prop, evento, propiedades de slot que desees al botón porque ahora tienes la propiedad de eso. Solo diseña como mejor te parezca. ¿Entendido? En segundo lugar, siempre nos resulta difícil personalizar el estilo y, digamos, las posiciones DOM de ciertos elementos. Ya no es el caso tampoco.

Debido a cómo ShadCN está construido sobre RedixView, te permite usar los primitivos y dar estilo al elemento mismo aquí. Así que si puedes ver el disparador del menú, pasamos la clase de sin embargo, cualquier clase aquí y sobrescribirá, no sobrescribirá, se fusionará con las clases predeterminadas usando Tailwind Merge. Aparte de eso, también nos permite agregar los elementos que queramos o mover el elemento que queramos que se renderice en el DOM. Así que digamos que quiero agregar un separador o quiero agregar un span entre las opciones del menú desplegable. Sí, ya no estamos limitados, pero ahora podemos hacer lo que queramos.

Y por último, ya no resulta difícil construir un REPL porque, como mencioné anteriormente, está construido sobre RedixView, que es una biblioteca de componentes accesible y con estilo en la que puedes construir tu sistema de diseño. También estamos usando Tailwind CSS, que es muy fácil de personalizar ya sea usando tus variables CSS o la configuración de Tailwind para adaptarse a tu propio proyecto. Así que veamos cómo podemos personalizarlo en lugar de solo hablar del punto. Veamos el caso.

Entonces, aquí en el repositorio, si lo inicias, si incluyes los diálogos en un componente, recibirás todos estos archivos .view así como este index.cx. Veamos cómo podemos personalizarlo para tu propio proyecto. Así que ahora mismo, digamos que tengo esta vista general del diálogo. Digamos que no quiero tener un diseño negro. Puedo simplemente modificarlo. Puedo cambiar el estilo aquí. También puedo cambiar las animaciones como quiera para esta superposición. Y aquí, el contenido del diálogo, puedes ver que aquí tenemos una función CN, que es esencialmente funciones que Tailwind fusiona junto con CLSX. Así que ahora mismo, los primeros parámetros aquí están diseñados por nosotros, la biblioteca shadcn, y prop.class esencialmente es lo que quieres fusionar con. Digamos que no quieres tener left one stroke two, quieres tener left 33%. En el uso del componente, solo tienes que agregar la clase igual a left-33%. Se fusionará y sobrescribirá esta vista específica y persistirá todo el otro archivo, todo el otro estilo aquí. No necesitas tener un signo de exclamación ni nada. Y por supuesto, puedes agregar el icono de componente que quieras. Ya no está limitado por la biblioteca de iconos específica. Puedes cambiarlo como quieras. Estos son solo algunos ejemplos rápidos de cómo personalizarlo. Hay mucho más que me encantaría compartir contigo. Desafortunadamente, no tengo tiempo hoy. Así que danos una estrella y consulta la documentación. Hay muchas cosas que puedes personalizar. Así que si miras el equipo, puedes cambiarlo como quieras. Además, hay muchos bloques predefinidos que puedes copiar y pegar en tu proyecto. Nos vemos la próxima vez. Eso es todo por mi parte. Nos vemos la próxima vez.