UIBuilder ✨

La NPM que te permite usar Components V2 de Discord en Discord.js v13 de forma simple y encadenable.

UIBuilder es una clase diseñada para construir interfaces interactivas modernas en Discord.js v13, usando Components V2.

Permite crear fácilmente mensajes con:

• 📝 Bloques de texto
• ➖ Divisores
• 🔘 Botones (Unicode, custom o animados)
• 📋 Select menus
• 🖼️ Imágenes

Todo mediante method chaining para construir interfaces complejas de forma limpia.

⚡ Instalación

npm install uibuilder-djs

📦 Importar en tu proyecto

const UIBuilder = require("uibuilder-djs");

🧠 Ejemplo completo

const ui = new UIBuilder(client)
	.buttons([
		{
			type: 1,
			id: "settings_verification",
			label: "Unicode",
			emoji: "⛔",
			style: 1,
		},
		{
			type: 1,
			id: "settings_logs",
			label: "Custom",
			emoji: "<:list:123456789>",
			style: 2,
		},
		{
			type: 1,
			id: "settings_antiraid",
			label: "Animado",
			emoji: "<a:loading:987654321>",
			style: 3,
		},
		{
			type: 1,
			id: "settings_language",
			label: "Sin Emoji",
			style: 4,
		},
		{
			type: 2,
			label: "Link",
			url: "https://discord.com/",
		},
	])
	.text("# ⚙️ Panel de Configuración")
	.divider()
	.text("Selecciona una categoría para configurar el bot.")
	.divider()
	.image("https://cdn.discordapp.com/embed/avatars/0.png")
	.selectmenu({
		id: "configMenu",
		placeholder: "Selecciona una opción",
		options: [
			{ label: "Opción 1", emoji: "❌", value: "opt1" },
			{ label: "Opción 2", emoji: "📋", value: "opt2" },
		],
	})
	.text("-# Todos los derechos reservados");

await ui.interactionReply(interaction);

🧩 Métodos disponibles

| Método | Descripción | | -------------------------------- | ---------------------------- | | .text(content) | Añade un bloque de texto | | .divider() | Añade un divisor | | .buttons(array) | Añade una fila de botones | | .selectmenu(options) | Añade un select menu | | .image(url) | Añade una imagen | | .build() | Devuelve solo los ActionRows | | .send(channel) | Envía la UI a un canal | | .interactionReply(interaction) | Responde a un Slash Command | | .messageReply(message) | Responde a un mensaje |

🎨 Emojis soportados

UIBuilder detecta automáticamente:

Unicode

emoji: "⛔"

Custom emoji

emoji: "<:emoji:123456789>"

Emoji animado

emoji: "<a:loading:987654321>"

Todos se convierten automáticamente al formato que requiere la API de Discord.

🔘 Botones

Tipos de botón disponibles:

Botón interactivo

{
	type: 1,
	id: "button_id",
	label: "Click",
	emoji: "✅",
	style: 1
}

Botón de link

{
	type: 2,
	label: "Discord",
	url: "https://discord.com"
}

📋 Select Menu

.selectmenu({
	id: "menu",
	placeholder: "Selecciona una opción",
	options: [
		{
			label: "Opción 1",
			value: "1",
			emoji: "📋"
		}
	]
})

📤 Enviar la UI

Slash Commands

await ui.interactionReply(interaction);

Mensaje normal

await ui.messageReply(message);

Enviar a canal

await ui.send(channel);

⚠️ Notas importantes

• Compatible con Discord.js v13
• Usa Components V2
• Utiliza flags: 1 << 15 automáticamente
• Todos los emojis se parsean automáticamente
• Permite method chaining

🚀 Ejemplo visual

Un panel creado con UIBuilder puede incluir:

• botones de configuración
• menús desplegables
• texto estructurado
• imágenes
• divisores

todo en un solo mensaje.

📜 Licencia

MIT License