feat: Add Modals and Text Inputs (#7023)

Co-authored-by: Vlad Frangu <kingdgrizzle@gmail.com>
Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>
Co-authored-by: Ryan Munro <monbrey@gmail.com>
Co-authored-by: Vitor <milagre.vitor@gmail.com>

packages/builders/__tests__/components/actionRow.test.ts

@@ -1,4 +1,10 @@
-import { APIActionRowComponent, APIMessageComponent, ButtonStyle, ComponentType } from 'discord-api-types/v9';
+import {
+	APIActionRowComponent,
+	APIActionRowComponentTypes,
+	APIMessageActionRowComponent,
+	ButtonStyle,
+	ComponentType,
+} from 'discord-api-types/v9';
 import { ActionRow, ButtonComponent, createComponent, SelectMenuComponent, SelectMenuOption } from '../../src';
 
 const rowWithButtonData: APIActionRowComponent<APIMessageComponent> = {
@@ -43,7 +49,7 @@ describe('Action Row Components', () => {
 		});
 
 		test('GIVEN valid JSON input THEN valid JSON output is given', () => {
-			const actionRowData: APIActionRowComponent<APIMessageComponent> = {
+			const actionRowData: APIActionRowComponent<APIMessageActionRowComponent> = {
 				type: ComponentType.ActionRow,
 				components: [
 					{
@@ -75,10 +81,43 @@ describe('Action Row Components', () => {
 			expect(new ActionRow(actionRowData).toJSON()).toEqual(actionRowData);
 			expect(new ActionRow().toJSON()).toEqual({ type: ComponentType.ActionRow, components: [] });
 			expect(() => createComponent({ type: ComponentType.ActionRow, components: [] })).not.toThrowError();
-			// @ts-expect-error
 			expect(() => createComponent({ type: 42, components: [] })).toThrowError();
 		});
 		test('GIVEN valid builder options THEN valid JSON output is given', () => {
+			const rowWithButtonData: APIActionRowComponent<APIActionRowComponentTypes> = {
+				type: ComponentType.ActionRow,
+				components: [
+					{
+						type: ComponentType.Button,
+						label: 'test',
+						custom_id: '123',
+						style: ButtonStyle.Primary,
+					},
+				],
+			};
+
+			const rowWithSelectMenuData: APIActionRowComponent<APIActionRowComponentTypes> = {
+				type: ComponentType.ActionRow,
+				components: [
+					{
+						type: ComponentType.SelectMenu,
+						custom_id: '1234',
+						options: [
+							{
+								label: 'one',
+								value: 'one',
+							},
+							{
+								label: 'two',
+								value: 'two',
+							},
+						],
+						max_values: 10,
+						min_values: 12,
+					},
+				],
+			};
+
 			const button = new ButtonComponent().setLabel('test').setStyle(ButtonStyle.Primary).setCustomId('123');
 			const selectMenu = new SelectMenuComponent()
 				.setCustomId('1234')

packages/builders/__tests__/components/textInput.test.ts

@@ -0,0 +1,126 @@
+import { APITextInputComponent, ComponentType, TextInputStyle } from 'discord-api-types/v9';
+import {
+	labelValidator,
+	maxLengthValidator,
+	minLengthValidator,
+	placeholderValidator,
+	valueValidator,
+	textInputStyleValidator,
+} from '../../src/components/textInput/Assertions';
+import { TextInputComponent } from '../../src/components/textInput/TextInput';
+
+const superLongStr = 'a'.repeat(5000);
+
+const textInputComponent = () => new TextInputComponent();
+
+describe('Text Input Components', () => {
+	describe('Assertion Tests', () => {
+		test('GIVEN valid label THEN validator does not throw', () => {
+			expect(() => labelValidator.parse('foobar')).not.toThrowError();
+		});
+
+		test('GIVEN invalid label THEN validator does throw', () => {
+			expect(() => labelValidator.parse(24)).toThrowError();
+			expect(() => labelValidator.parse(undefined)).toThrowError();
+		});
+
+		test('GIVEN valid style THEN validator does not throw', () => {
+			expect(() => textInputStyleValidator.parse(TextInputStyle.Paragraph)).not.toThrowError();
+			expect(() => textInputStyleValidator.parse(TextInputStyle.Short)).not.toThrowError();
+		});
+
+		test('GIVEN invalid style THEN validator does throw', () => {
+			expect(() => textInputStyleValidator.parse(24)).toThrowError();
+		});
+
+		test('GIVEN valid min length THEN validator does not throw', () => {
+			expect(() => minLengthValidator.parse(10)).not.toThrowError();
+		});
+
+		test('GIVEN invalid min length THEN validator does throw', () => {
+			expect(() => minLengthValidator.parse(-1)).toThrowError();
+		});
+
+		test('GIVEN valid max length THEN validator does not throw', () => {
+			expect(() => maxLengthValidator.parse(10)).not.toThrowError();
+		});
+
+		test('GIVEN invalid min length THEN validator does throw', () => {
+			expect(() => maxLengthValidator.parse(4001)).toThrowError();
+		});
+
+		test('GIVEN valid value THEN validator does not throw', () => {
+			expect(() => valueValidator.parse('foobar')).not.toThrowError();
+		});
+
+		test('GIVEN invalid value THEN validator does throw', () => {
+			expect(() => valueValidator.parse(superLongStr)).toThrowError();
+		});
+
+		test('GIVEN valid placeholder THEN validator does not throw', () => {
+			expect(() => placeholderValidator.parse('foobar')).not.toThrowError();
+		});
+
+		test('GIVEN invalid value THEN validator does throw', () => {
+			expect(() => placeholderValidator.parse(superLongStr)).toThrowError();
+		});
+
+		test('GIVEN valid fields THEN builder does not throw', () => {
+			expect(() => {
+				textInputComponent().setCustomId('foobar').setLabel('test').setStyle(TextInputStyle.Paragraph).toJSON();
+			}).not.toThrowError();
+
+			expect(() => {
+				textInputComponent()
+					.setCustomId('foobar')
+					.setLabel('test')
+					.setMaxLength(100)
+					.setMinLength(1)
+					.setPlaceholder('bar')
+					.setRequired(true)
+					.setStyle(TextInputStyle.Paragraph)
+					.toJSON();
+			}).not.toThrowError();
+		});
+	});
+
+	test('GIVEN invalid fields THEN builder throws', () => {
+		expect(() => textInputComponent().toJSON()).toThrowError();
+		expect(() => {
+			textInputComponent()
+				.setCustomId('test')
+				.setMaxLength(100)
+				.setPlaceholder('hello')
+				.setStyle(TextInputStyle.Paragraph)
+				.toJSON();
+		}).toThrowError();
+	});
+
+	test('GIVEN valid input THEN valid JSON outputs are given', () => {
+		const textInputData: APITextInputComponent = {
+			type: ComponentType.TextInput,
+			label: 'label',
+			custom_id: 'custom id',
+			placeholder: 'placeholder',
+			max_length: 100,
+			min_length: 10,
+			value: 'value',
+			required: false,
+			style: TextInputStyle.Paragraph,
+		};
+
+		expect(new TextInputComponent(textInputData).toJSON()).toEqual(textInputData);
+		expect(
+			textInputComponent()
+				.setCustomId(textInputData.custom_id)
+				.setLabel(textInputData.label)
+				.setPlaceholder(textInputData.placeholder)
+				.setMaxLength(textInputData.max_length)
+				.setMinLength(textInputData.min_length)
+				.setValue(textInputData.value)
+				.setRequired(textInputData.required)
+				.setStyle(textInputData.style)
+				.toJSON(),
+		).toEqual(textInputData);
+	});
+});

packages/builders/__tests__/interactions/modal.test.ts

@@ -0,0 +1,88 @@
+import { APIModalInteractionResponseCallbackData, ComponentType, TextInputStyle } from 'discord-api-types/v9';
+import { ActionRow, ButtonComponent, Modal, ModalActionRowComponent, TextInputComponent } from '../../src';
+import {
+	componentsValidator,
+	titleValidator,
+	validateRequiredParameters,
+} from '../../src/interactions/modals/Assertions';
+
+const modal = () => new Modal();
+
+describe('Modals', () => {
+	describe('Assertion Tests', () => {
+		test('GIVEN valid title THEN validator does not throw', () => {
+			expect(() => titleValidator.parse('foobar')).not.toThrowError();
+		});
+
+		test('GIVEN invalid title THEN validator does throw', () => {
+			expect(() => titleValidator.parse(42)).toThrowError();
+		});
+
+		test('GIVEN valid components THEN validator does not throw', () => {
+			expect(() => componentsValidator.parse([new ActionRow(), new ActionRow()])).not.toThrowError();
+		});
+
+		test('GIVEN invalid components THEN validator does throw', () => {
+			expect(() => componentsValidator.parse([new ButtonComponent(), new TextInputComponent()])).toThrowError();
+		});
+
+		test('GIVEN valid required parameters THEN validator does not throw', () => {
+			expect(() => validateRequiredParameters('123', 'title', [new ActionRow(), new ActionRow()])).not.toThrowError();
+		});
+
+		test('GIVEN invalid required parameters THEN validator does throw', () => {
+			expect(() =>
+				// @ts-expect-error
+				validateRequiredParameters('123', undefined, [new ActionRow(), new ButtonComponent()]),
+			).toThrowError();
+		});
+	});
+
+	test('GIVEN valid fields THEN builder does not throw', () => {
+		expect(() => modal().setTitle('test').setCustomId('foobar').setComponents(new ActionRow())).not.toThrowError();
+	});
+
+	test('GIVEN invalid fields THEN builder does throw', () => {
+		expect(() =>
+			// @ts-expect-error
+			modal().setTitle('test').setCustomId('foobar').setComponents([new ActionRow()]).toJSON(),
+		).toThrowError();
+		expect(() => modal().setTitle('test').setCustomId('foobar').toJSON()).toThrowError();
+		// @ts-expect-error
+		expect(() => modal().setTitle('test').setCustomId(42).toJSON()).toThrowError();
+	});
+
+	test('GIVEN valid input THEN valid JSON outputs are given', () => {
+		const modalData: APIModalInteractionResponseCallbackData = {
+			title: 'title',
+			custom_id: 'custom id',
+			components: [
+				{
+					type: ComponentType.ActionRow,
+					components: [
+						{
+							type: ComponentType.TextInput,
+							label: 'label',
+							style: TextInputStyle.Paragraph,
+							custom_id: 'custom id',
+						},
+					],
+				},
+			],
+		};
+
+		expect(new Modal(modalData).toJSON()).toEqual(modalData);
+
+		expect(
+			modal()
+				.setTitle(modalData.title)
+				.setCustomId('custom id')
+				.setComponents(
+					new ActionRow<ModalActionRowComponent>().addComponents(
+						new TextInputComponent().setCustomId('custom id').setLabel('label').setStyle(TextInputStyle.Paragraph),
+					),
+				)
+				.toJSON(),
+		).toEqual(modalData);
+	});
+});

packages/builders/package.json

@@ -52,7 +52,7 @@
 	"homepage": "https://discord.js.org",
 	"dependencies": {
 		"@sindresorhus/is": "^4.4.0",
-		"discord-api-types": "^0.27.0",
+		"discord-api-types": "^0.27.3",
 		"fast-deep-equal": "^3.1.3",
 		"ts-mixer": "^6.0.0",
 		"tslib": "^2.3.1",

packages/builders/src/components/ActionRow.ts

@@ -1,26 +1,42 @@
-import { type APIActionRowComponent, ComponentType, APIMessageComponent } from 'discord-api-types/v9';
-import type { ButtonComponent, SelectMenuComponent } from '..';
+import {
+	APIActionRowComponent,
+	APIMessageActionRowComponent,
+	APIModalActionRowComponent,
+	ComponentType,
+} from 'discord-api-types/v9';
+import type { ButtonComponent, SelectMenuComponent, TextInputComponent } from '../index';
 import { Component } from './Component';
 import { createComponent } from './Components';
 import isEqual from 'fast-deep-equal';
 
-export type MessageComponent = ActionRowComponent | ActionRow;
+export type MessageComponent = MessageActionRowComponent | ActionRow<MessageActionRowComponent>;
+export type ModalComponent = ModalActionRowComponent | ActionRow<ModalActionRowComponent>;
 
-export type ActionRowComponent = ButtonComponent | SelectMenuComponent;
+export type MessageActionRowComponent = ButtonComponent | SelectMenuComponent;
+export type ModalActionRowComponent = TextInputComponent;
 
-// TODO: Add valid form component types
 /**
  * Represents an action row component
  */
-export class ActionRow<T extends ActionRowComponent = ActionRowComponent> extends Component<
-	Omit<Partial<APIActionRowComponent<APIMessageComponent>> & { type: ComponentType.ActionRow }, 'components'>
+export class ActionRow<
+	T extends ModalActionRowComponent | MessageActionRowComponent = ModalActionRowComponent | MessageActionRowComponent,
+> extends Component<
+	Omit<
+		Partial<APIActionRowComponent<APIMessageActionRowComponent | APIModalActionRowComponent>> & {
+			type: ComponentType.ActionRow;
+		},
+		'components'
+	>
 > {
 	/**
 	 * The components within this action row
 	 */
 	public readonly components: T[];
 
-	public constructor({ components, ...data }: Partial<APIActionRowComponent<APIMessageComponent>> = {}) {
+	public constructor({
+		components,
+		...data
+	}: Partial<APIActionRowComponent<APIMessageActionRowComponent | APIModalActionRowComponent>> = {}) {
 		super({ type: ComponentType.ActionRow, ...data });
 		this.components = (components?.map((c) => createComponent(c)) ?? []) as T[];
 	}
@@ -44,14 +60,14 @@ export class ActionRow<T extends ActionRowComponent = ActionRowComponent> extend
 		return this;
 	}
 
-	public toJSON(): APIActionRowComponent<APIMessageComponent> {
+	public toJSON(): APIActionRowComponent<ReturnType<T['toJSON']>> {
 		return {
 			...this.data,
-			components: this.components.map((component) => component.toJSON()),
+			components: this.components.map((component) => component.toJSON()) as ReturnType<T['toJSON']>[],
 		};
 	}
 
-	public equals(other: APIActionRowComponent<APIMessageComponent> | ActionRow) {
+	public equals(other: APIActionRowComponent<APIMessageActionRowComponent | APIModalActionRowComponent> | ActionRow) {
 		if (other instanceof ActionRow) {
 			return isEqual(other.data, this.data) && isEqual(other.components, this.components);
 		}

packages/builders/src/components/Component.ts

@@ -1,9 +1,13 @@
 import type { JSONEncodable } from '../util/jsonEncodable';
 import type {
+	APIActionRowComponent,
 	APIActionRowComponentTypes,
 	APIBaseComponent,
+	APIMessageActionRowComponent,
+	APIModalActionRowComponent,
 	APIMessageComponent,
 	ComponentType,
+	APIModalComponent,
 } from 'discord-api-types/v9';
 import type { Equatable } from '../util/equatable';
 
@@ -14,16 +18,33 @@ export abstract class Component<
 	DataType extends Partial<APIBaseComponent<ComponentType>> & {
 		type: ComponentType;
 	} = APIBaseComponent<ComponentType>,
-> implements JSONEncodable<APIMessageComponent>, Equatable<Component | APIActionRowComponentTypes>
+> implements
+		JSONEncodable<
+			| APIModalComponent
+			| APIMessageComponent
+			| APIActionRowComponent<APIModalActionRowComponent | APIMessageActionRowComponent>
+		>,
+		Equatable<
+			| Component
+			| APIActionRowComponentTypes
+			| APIActionRowComponent<APIModalActionRowComponent | APIMessageActionRowComponent>
+		>
 {
 	/**
 	 * The API data associated with this component
 	 */
 	public readonly data: DataType;
 
-	public abstract toJSON(): APIMessageComponent;
+	public abstract toJSON():
+		| APIActionRowComponentTypes
+		| APIActionRowComponent<APIModalActionRowComponent | APIMessageActionRowComponent>;
 
-	public abstract equals(other: Component | APIActionRowComponentTypes): boolean;
+	public abstract equals(
+		other:
+			| Component
+			| APIActionRowComponentTypes
+			| APIActionRowComponent<APIModalActionRowComponent | APIMessageActionRowComponent>,
+	): boolean;
 
 	public constructor(data: DataType) {
 		this.data = data;

packages/builders/src/components/Components.ts

@@ -1,11 +1,12 @@
-import { APIMessageComponent, ComponentType } from 'discord-api-types/v9';
-import { ActionRow, ButtonComponent, Component, SelectMenuComponent } from '../index';
-import type { MessageComponent } from './ActionRow';
+import { APIBaseComponent, APIMessageComponent, APIModalComponent, ComponentType } from 'discord-api-types/v9';
+import { ActionRow, ButtonComponent, Component, SelectMenuComponent, TextInputComponent } from '../index';
+import type { MessageComponent, ModalActionRowComponent } from './ActionRow';
 
 export interface MappedComponentTypes {
 	[ComponentType.ActionRow]: ActionRow;
 	[ComponentType.Button]: ButtonComponent;
 	[ComponentType.SelectMenu]: SelectMenuComponent;
+	[ComponentType.TextInput]: TextInputComponent;
 }
 
 /**
@@ -13,10 +14,10 @@ export interface MappedComponentTypes {
  * @param data The api data to transform to a component class
  */
 export function createComponent<T extends keyof MappedComponentTypes>(
-	data: APIMessageComponent & { type: T },
+	data: (APIMessageComponent | APIModalComponent) & { type: T },
 ): MappedComponentTypes[T];
-export function createComponent<C extends MessageComponent>(data: C): C;
-export function createComponent(data: APIMessageComponent | MessageComponent): Component {
+export function createComponent<C extends MessageComponent | ModalActionRowComponent>(data: C): C;
+export function createComponent(data: APIModalComponent | APIMessageComponent | Component): Component {
 	if (data instanceof Component) {
 		return data;
 	}
@@ -28,8 +29,9 @@ export function createComponent(data: APIMessageComponent | MessageComponent): C
 			return new ButtonComponent(data);
 		case ComponentType.SelectMenu:
 			return new SelectMenuComponent(data);
+		case ComponentType.TextInput:
+			return new TextInputComponent(data);
 		default:
-			// @ts-expect-error
-			throw new Error(`Cannot serialize component type: ${data.type as number}`);
+			throw new Error(`Cannot serialize component type: ${(data as APIBaseComponent<ComponentType>).type}`);
 	}
 }

packages/builders/src/components/textInput/Assertions.ts

@@ -0,0 +1,17 @@
+import { TextInputStyle } from 'discord-api-types/v9';
+import { z } from 'zod';
+import { customIdValidator } from '../Assertions';
+
+export const textInputStyleValidator = z.nativeEnum(TextInputStyle);
+export const minLengthValidator = z.number().int().min(0).max(4000);
+export const maxLengthValidator = z.number().int().min(1).max(4000);
+export const requiredValidator = z.boolean();
+export const valueValidator = z.string().max(4000);
+export const placeholderValidator = z.string().max(100);
+export const labelValidator = z.string().min(1).max(45);
+
+export function validateRequiredParameters(customId?: string, style?: TextInputStyle, label?: string) {
+	customIdValidator.parse(customId);
+	textInputStyleValidator.parse(style);
+	labelValidator.parse(label);
+}

packages/builders/src/components/textInput/TextInput.ts

@@ -0,0 +1,37 @@
+import type { APITextInputComponent } from 'discord-api-types/v9';
+import {
+	maxLengthValidator,
+	minLengthValidator,
+	placeholderValidator,
+	requiredValidator,
+	valueValidator,
+	validateRequiredParameters,
+} from './Assertions';
+import { UnsafeTextInputComponent } from './UnsafeTextInput';
+
+export class TextInputComponent extends UnsafeTextInputComponent {
+	public override setMinLength(minLength: number) {
+		return super.setMinLength(minLengthValidator.parse(minLength));
+	}
+
+	public override setMaxLength(maxLength: number) {
+		return super.setMaxLength(maxLengthValidator.parse(maxLength));
+	}
+
+	public override setRequired(required = true) {
+		return super.setRequired(requiredValidator.parse(required));
+	}
+
+	public override setValue(value: string) {
+		return super.setValue(valueValidator.parse(value));
+	}
+
+	public override setPlaceholder(placeholder: string) {
+		return super.setPlaceholder(placeholderValidator.parse(placeholder));
+	}
+
+	public override toJSON(): APITextInputComponent {
+		validateRequiredParameters(this.data.custom_id, this.data.style, this.data.label);
+		return super.toJSON();
+	}
+}

packages/builders/src/components/textInput/UnsafeTextInput.ts

@@ -0,0 +1,154 @@
+import { ComponentType, type TextInputStyle, type APITextInputComponent } from 'discord-api-types/v9';
+import { Component } from '../../index';
+import isEqual from 'fast-deep-equal';
+
+export class UnsafeTextInputComponent extends Component<
+	Partial<APITextInputComponent> & { type: ComponentType.TextInput }
+> {
+	public constructor(data?: APITextInputComponent & { type?: ComponentType.TextInput }) {
+		super({ type: ComponentType.TextInput, ...data });
+	}
+
+	/**
+	 * The style of this text input
+	 */
+	public get style() {
+		return this.data.style;
+	}
+
+	/**
+	 * The custom id of this text input
+	 */
+	public get customId() {
+		return this.data.custom_id;
+	}
+
+	/**
+	 * The label for this text input
+	 */
+	public get label() {
+		return this.data.label;
+	}
+
+	/**
+	 * The placeholder text for this text input
+	 */
+	public get placeholder() {
+		return this.data.placeholder;
+	}
+
+	/**
+	 * The default value for this text input
+	 */
+	public get value() {
+		return this.data.value;
+	}
+
+	/**
+	 * The minimum length of this text input
+	 */
+	public get minLength() {
+		return this.data.min_length;
+	}
+
+	/**
+	 * The maximum length of this text input
+	 */
+	public get maxLength() {
+		return this.data.max_length;
+	}
+
+	/**
+	 * Whether this text input is required
+	 */
+	public get required() {
+		return this.data.required;
+	}
+
+	/**
+	 * Sets the custom id for this text input
+	 * @param customId The custom id of this text input
+	 */
+	public setCustomId(customId: string) {
+		this.data.custom_id = customId;
+		return this;
+	}
+
+	/**
+	 * Sets the label for this text input
+	 * @param label The label for this text input
+	 */
+	public setLabel(label: string) {
+		this.data.label = label;
+		return this;
+	}
+
+	/**
+	 * Sets the style for this text input
+	 * @param style The style for this text input
+	 */
+	public setStyle(style: TextInputStyle) {
+		this.data.style = style;
+		return this;
+	}
+
+	/**
+	 * Sets the minimum length of text for this text input
+	 * @param minLength The minimum length of text for this text input
+	 */
+	public setMinLength(minLength: number) {
+		this.data.min_length = minLength;
+		return this;
+	}
+
+	/**
+	 * Sets the maximum length of text for this text input
+	 * @param maxLength The maximum length of text for this text input
+	 */
+	public setMaxLength(maxLength: number) {
+		this.data.max_length = maxLength;
+		return this;
+	}
+
+	/**
+	 * Sets the placeholder of this text input
+	 * @param placeholder The placeholder of this text input
+	 */
+	public setPlaceholder(placeholder: string) {
+		this.data.placeholder = placeholder;
+		return this;
+	}
+
+	/**
+	 * Sets the value of this text input
+	 * @param value The value for this text input
+	 */
+	public setValue(value: string) {
+		this.data.value = value;
+		return this;
+	}
+
+	/**
+	 * Sets whether this text input is required or not
+	 * @param required Whether this text input is required or not
+	 */
+	public setRequired(required = true) {
+		this.data.required = required;
+		return this;
+	}
+
+	public toJSON(): APITextInputComponent {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		return {
+			...this.data,
+		} as APITextInputComponent;
+	}
+
+	public equals(other: UnsafeTextInputComponent | APITextInputComponent): boolean {
+		if (other instanceof UnsafeTextInputComponent) {
+			return isEqual(other.data, this.data);
+		}
+
+		return isEqual(other, this.data);
+	}
+}

packages/builders/src/index.ts

@@ -8,6 +8,12 @@ export * from './components/ActionRow';
 export * from './components/button/Button';
 export * from './components/Component';
 export * from './components/Components';
+export * from './components/textInput/TextInput';
+export * as TextInputAssertions from './components/textInput/Assertions';
+export * from './components/textInput/UnsafeTextInput';
+export * from './interactions/modals/UnsafeModal';
+export * from './interactions/modals/Modal';
+export * as ModalAssertions from './interactions/modals/Assertions';
 export * from './components/selectMenu/SelectMenu';
 export * from './components/selectMenu/SelectMenuOption';
 export * from './components/button/UnsafeButton';

packages/builders/src/interactions/modals/Assertions.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+import { ActionRow, type ModalActionRowComponent } from '../..';
+import { customIdValidator } from '../../components/Assertions';
+
+export const titleValidator = z.string().min(1).max(45);
+export const componentsValidator = z.array(z.instanceof(ActionRow)).min(1);
+
+export function validateRequiredParameters(
+	customId?: string,
+	title?: string,
+	components?: ActionRow<ModalActionRowComponent>[],
+) {
+	customIdValidator.parse(customId);
+	titleValidator.parse(title);
+	componentsValidator.parse(components);
+}

packages/builders/src/interactions/modals/Modal.ts

@@ -0,0 +1,19 @@
+import type { APIModalInteractionResponseCallbackData } from 'discord-api-types/v9';
+import { customIdValidator } from '../../components/Assertions';
+import { titleValidator, validateRequiredParameters } from './Assertions';
+import { UnsafeModal } from './UnsafeModal';
+
+export class Modal extends UnsafeModal {
+	public override setCustomId(customId: string): this {
+		return super.setCustomId(customIdValidator.parse(customId));
+	}
+
+	public override setTitle(title: string) {
+		return super.setTitle(titleValidator.parse(title));
+	}
+
+	public override toJSON(): APIModalInteractionResponseCallbackData {
+		validateRequiredParameters(this.data.custom_id, this.data.title, this.components);
+		return super.toJSON();
+	}
+}

packages/builders/src/interactions/modals/UnsafeModal.ts

@@ -0,0 +1,80 @@
+import type {
+	APIActionRowComponent,
+	APIModalActionRowComponent,
+	APIModalInteractionResponseCallbackData,
+} from 'discord-api-types/v9';
+import { ActionRow, createComponent, JSONEncodable, ModalActionRowComponent } from '../../index';
+
+export class UnsafeModal implements JSONEncodable<APIModalInteractionResponseCallbackData> {
+	protected readonly data: Partial<Omit<APIModalInteractionResponseCallbackData, 'components'>>;
+	public readonly components: ActionRow<ModalActionRowComponent>[] = [];
+
+	public constructor({ components, ...data }: Partial<APIModalInteractionResponseCallbackData> = {}) {
+		this.data = { ...data };
+		this.components = (components?.map((c) => createComponent(c)) ?? []) as ActionRow<ModalActionRowComponent>[];
+	}
+
+	/**
+	 * The custom id of this modal
+	 */
+	public get customId() {
+		return this.data.custom_id;
+	}
+
+	/**
+	 * The title of this modal
+	 */
+	public get title() {
+		return this.data.title;
+	}
+
+	/**
+	 * Sets the title of the modal
+	 * @param title The title of the modal
+	 */
+	public setTitle(title: string) {
+		this.data.title = title;
+		return this;
+	}
+
+	/**
+	 * Sets the custom id of the modal
+	 * @param customId The custom id of this modal
+	 */
+	public setCustomId(customId: string) {
+		this.data.custom_id = customId;
+		return this;
+	}
+
+	/**
+	 * Adds components to this modal
+	 * @param components The components to add to this modal
+	 */
+	public addComponents(
+		...components: (ActionRow<ModalActionRowComponent> | APIActionRowComponent<APIModalActionRowComponent>)[]
+	) {
+		this.components.push(
+			...components.map((component) =>
+				component instanceof ActionRow ? component : new ActionRow<ModalActionRowComponent>(component),
+			),
+		);
+		return this;
+	}
+
+	/**
+	 * Sets the components in this modal
+	 * @param components The components to set this modal to
+	 */
+	public setComponents(...components: ActionRow<ModalActionRowComponent>[]) {
+		this.components.splice(0, this.components.length, ...components);
+		return this;
+	}
+
+	public toJSON(): APIModalInteractionResponseCallbackData {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		return {
+			...this.data,
+			components: this.components.map((component) => component.toJSON()),
+		} as APIModalInteractionResponseCallbackData;
+	}
+}