🚀 ez-modals

Welcome to ez-modals! This plugin is designed to seamlessly integrate with your existing Robo.js project and provide new features and enhancements to your robo. The best part? Everything automatically works once you install this plugin!

• 📚 Documentation: Getting started with Robo.js
• ✨ Discord: Robo - Imagine Magic

👩‍💻 Are you the plugin developer? Check out the Development Guide for instructions on how to develop, build, and publish this plugin.

Installation 💻

To add this plugin to your Robo.js project:

npx robo add ez-modals

New to Robo.js? Start your project with this plugin pre-installed:

npx create-robo <project-name> -p ez-modals

in short ez madals shorten the process to makeing a modal down to a json in the plugin config and function to use in your command i.e

Config exarmple

// ez modals plugin config Exarmple
export default {
	modals: [
		{
			customId: 'test-modal', // Unique identifier for the modal to distinguish it from others.
			title: 'Test Modal', // The title displayed at the top of the modal.
			responseChannelId: '1264700487215747203', // The channel ID where the embed response will be sent.
			embed: {
				title: 'User Submission', // Title for the embed that will be sent in response to the modal.
				hexcolour: '#5865F2' // The hex color for the embed's side color bar.
			},
			inputs: [
				{
					customId: 'randomid', // Unique identifier for this input field to retrieve the value later.
					label: 'whats your name', // Label shown to the user for this input field.
					placeholder: 'Enter Text...', // Placeholder text displayed in the input field.
					required: true, // Whether this input field must be filled by the user.
					style: 'Short' // Input style: 'Short' for single-line text input.
				},
				{
					customId: 'randomid2', // Unique identifier for this input field to retrieve the value later.
					label: 'who are you?', // Label shown to the user for this input field.
					placeholder: 'Enter text...', // Placeholder text displayed in the input field.
					required: true, // Whether this input field must be filled by the user.
					style: 'Paragraph' // Input style: 'Paragraph' for multi-line text input.
				}
			]
		}
	]
}

code in the command exarmple

import { ChatInputCommandInteraction } from 'discord.js'
import { createModal } from 'ez-modals'

export const config = {
	description: `send a modal`
}

export default async (interaction: ChatInputCommandInteraction) => {
	if (!interaction.guild) return

	const modal = createModal(`test-modal`) // put the customId of the whole modal here

	await interaction.showModal(modal)

	return
}

the modals option is an array so juts add another item to it and have a diffrent customId and you can have as many modals set as you want!

heres some dirrent configs set up

1 modal 2 fields

export default {
	modals: [
		{
			customId: 'test-modal',
			title: 'Test Modal',
			responseChannelId: '1264700487215747203',
			embed: {
				title: 'User Submission',
				hexcolour: '#5865F2'
			},
			inputs: [
				{
					customId: 'randomid',
					label: 'whats your name',
					placeholder: 'Enter Text...',
					required: true,
					style: 'Short'
				},
				{
					customId: 'randomid2',
					label: 'who are you?',
					placeholder: 'Enter text...',
					required: true,
					style: 'Paragraph'
				}
			]
		}
	]
}

2 modals 1 with 1 field and the other with 4

1 modal 2 fields

export default {
	modals: [
		{
			customId: 'test-modal1',
			title: 'Test Modal',
			responseChannelId: '1264700487215747203',
			embed: {
				title: 'User Submission',
				hexcolour: '#5865F2'
			},
			inputs: [
				{
					customId: 'randomid1',
					label: 'whats your name',
					placeholder: 'Enter Text...',
					required: true,
					style: 'Short'
				}
			]
		},
		{
			customId: 'test-modal2',
			title: 'Test Modal',
			responseChannelId: '1264700487215747203',
			embed: {
				title: 'User Submission',
				hexcolour: '#5865F2'
			},
			inputs: [
				{
					customId: 'randomid3',
					label: 'whats your name',
					placeholder: 'Enter Text...',
					required: true,
					style: 'Short'
				},
				{
					customId: 'randomid4',
					label: 'who are you?',
					placeholder: 'Enter text...',
					required: true,
					style: 'Paragraph'
				},
				{
					customId: 'randomid5',
					label: 'whats your name',
					placeholder: 'Enter Text...',
					required: true,
					style: 'Short'
				},
				{
					customId: 'randomid6',
					label: 'who are you?',
					placeholder: 'Enter text...',
					required: true,
					style: 'Paragraph'
				}
			]
		}
	]
}

each modal can be used seperatly by using ther customIds (test-modal or test-modal2) in the createModal function