feat: components v2 in builders v1 (#10787)

* feat(builders): components v2 in builders v1

* feat: implemented the first components

* fix: tests

* fix: tests

* fix: export the new stuff

* feat: add rest of components

* feat: add callback syntax

* feat: callback syntax for section

* fix: missing implements

* fix: accessory property

* fix: apply suggestions from v2 PR

* chore: bring in line with builders v2

* fix: add missing type

* chore: split accessory methods

* chore: backport changes from v2 PR

* fix: accent_color is nullish

* fix: allow passing raw json to MediaGallery methods

* fix: add test

* chore: add Container#addXComponents

* fix: docs

* chore: bump discord-api-types

* Update packages/builders/src/components/Assertions.ts

Co-authored-by: Denis-Adrian Cristea <didinele.dev@gmail.com>

---------

Co-authored-by: Denis-Adrian Cristea <didinele.dev@gmail.com>

packages/builders/src/components/ActionRow.ts

@@ -3,9 +3,9 @@
 import {
 	type APIActionRowComponent,
 	ComponentType,
-	type APIMessageActionRowComponent,
-	type APIModalActionRowComponent,
-	type APIActionRowComponentTypes,
+	type APIComponentInMessageActionRow,
+	type APIComponentInModalActionRow,
+	type APIComponentInActionRow,
 } from 'discord-api-types/v10';
 import { normalizeArray, type RestOrArray } from '../util/normalizeArray.js';
 import { ComponentBuilder } from './Component.js';
@@ -18,13 +18,6 @@ import type { StringSelectMenuBuilder } from './selectMenu/StringSelectMenu.js';
 import type { UserSelectMenuBuilder } from './selectMenu/UserSelectMenu.js';
 import type { TextInputBuilder } from './textInput/TextInput.js';
 
-/**
- * The builders that may be used for messages.
- */
-export type MessageComponentBuilder =
-	| ActionRowBuilder<MessageActionRowComponentBuilder>
-	| MessageActionRowComponentBuilder;
-
 /**
  * The builders that may be used for modals.
  */
@@ -57,7 +50,7 @@ export type AnyComponentBuilder = MessageActionRowComponentBuilder | ModalAction
  * @typeParam ComponentType - The types of components this action row holds
  */
 export class ActionRowBuilder<ComponentType extends AnyComponentBuilder> extends ComponentBuilder<
-	APIActionRowComponent<APIMessageActionRowComponent | APIModalActionRowComponent>
+	APIActionRowComponent<APIComponentInMessageActionRow | APIComponentInModalActionRow>
 > {
 	/**
 	 * The components within this action row.
@@ -98,7 +91,7 @@ export class ActionRowBuilder<ComponentType extends AnyComponentBuilder> extends
 	 * 	.addComponents(button2, button3);
 	 * ```
 	 */
-	public constructor({ components, ...data }: Partial<APIActionRowComponent<APIActionRowComponentTypes>> = {}) {
+	public constructor({ components, ...data }: Partial<APIActionRowComponent<APIComponentInActionRow>> = {}) {
 		super({ type: ComponentType.ActionRow, ...data });
 		this.components = (components?.map((component) => createComponentBuilder(component)) ?? []) as ComponentType[];
 	}

packages/builders/src/components/Assertions.ts

@@ -3,6 +3,13 @@ import { ButtonStyle, ChannelType, type APIMessageComponentEmoji } from 'discord
 import { isValidationEnabled } from '../util/validation.js';
 import { StringSelectMenuOptionBuilder } from './selectMenu/StringSelectMenuOption.js';
 
+export const idValidator = s
+	.number()
+	.safeInt()
+	.greaterThanOrEqual(1)
+	.lessThan(4_294_967_296) // 2^32 - 1
+	.setValidationEnabled(isValidationEnabled);
+
 export const customIdValidator = s
 	.string()
 	.lengthGreaterThanOrEqual(1)

packages/builders/src/components/Component.ts

@@ -1,15 +1,20 @@
 import type { JSONEncodable } from '@discordjs/util';
 import type {
 	APIActionRowComponent,
-	APIActionRowComponentTypes,
+	APIComponentInActionRow,
 	APIBaseComponent,
 	ComponentType,
+	APIMessageComponent,
 } from 'discord-api-types/v10';
+import { idValidator } from './Assertions';
 
 /**
  * Any action row component data represented as an object.
  */
-export type AnyAPIActionRowComponent = APIActionRowComponent<APIActionRowComponentTypes> | APIActionRowComponentTypes;
+export type AnyAPIActionRowComponent =
+	| APIActionRowComponent<APIComponentInActionRow>
+	| APIComponentInActionRow
+	| APIMessageComponent;
 
 /**
  * The base component builder that contains common symbols for all sorts of components.
@@ -42,4 +47,22 @@ export abstract class ComponentBuilder<
 	public constructor(data: Partial<DataType>) {
 		this.data = data;
 	}
+
+	/**
+	 * Sets the id (not the custom id) for this component.
+	 *
+	 * @param id - The id for this component
+	 */
+	public setId(id: number) {
+		this.data.id = idValidator.parse(id);
+		return this;
+	}
+
+	/**
+	 * Clears the id of this component, defaulting to a default incremented id.
+	 */
+	public clearId() {
+		this.data.id = undefined;
+		return this;
+	}
 }

packages/builders/src/components/Components.ts

@@ -1,8 +1,9 @@
+import type { JSONEncodable } from '@discordjs/util';
 import { ComponentType, type APIMessageComponent, type APIModalComponent } from 'discord-api-types/v10';
 import {
 	ActionRowBuilder,
+	type MessageActionRowComponentBuilder,
 	type AnyComponentBuilder,
-	type MessageComponentBuilder,
 	type ModalComponentBuilder,
 } from './ActionRow.js';
 import { ComponentBuilder } from './Component.js';
@@ -13,6 +14,27 @@ import { RoleSelectMenuBuilder } from './selectMenu/RoleSelectMenu.js';
 import { StringSelectMenuBuilder } from './selectMenu/StringSelectMenu.js';
 import { UserSelectMenuBuilder } from './selectMenu/UserSelectMenu.js';
 import { TextInputBuilder } from './textInput/TextInput.js';
+import { ContainerBuilder } from './v2/Container.js';
+import { FileBuilder } from './v2/File.js';
+import { MediaGalleryBuilder } from './v2/MediaGallery.js';
+import { SectionBuilder } from './v2/Section.js';
+import { SeparatorBuilder } from './v2/Separator.js';
+import { TextDisplayBuilder } from './v2/TextDisplay.js';
+import { ThumbnailBuilder } from './v2/Thumbnail.js';
+
+/**
+ * The builders that may be used for messages.
+ */
+export type MessageComponentBuilder =
+	| ActionRowBuilder<MessageActionRowComponentBuilder>
+	| ContainerBuilder
+	| FileBuilder
+	| MediaGalleryBuilder
+	| MessageActionRowComponentBuilder
+	| SectionBuilder
+	| SeparatorBuilder
+	| TextDisplayBuilder
+	| ThumbnailBuilder;
 
 /**
  * Components here are mapped to their respective builder.
@@ -50,6 +72,34 @@ export interface MappedComponentTypes {
 	 * The channel select component type is associated with a {@link ChannelSelectMenuBuilder}.
 	 */
 	[ComponentType.ChannelSelect]: ChannelSelectMenuBuilder;
+	/**
+	 * The file component type is associated with a {@link FileBuilder}.
+	 */
+	[ComponentType.File]: FileBuilder;
+	/**
+	 * The separator component type is associated with a {@link SeparatorBuilder}.
+	 */
+	[ComponentType.Separator]: SeparatorBuilder;
+	/**
+	 * The container component type is associated with a {@link ContainerBuilder}.
+	 */
+	[ComponentType.Container]: ContainerBuilder;
+	/**
+	 * The text display component type is associated with a {@link TextDisplayBuilder}.
+	 */
+	[ComponentType.TextDisplay]: TextDisplayBuilder;
+	/**
+	 * The thumbnail component type is associated with a {@link ThumbnailBuilder}.
+	 */
+	[ComponentType.Thumbnail]: ThumbnailBuilder;
+	/**
+	 * The section component type is associated with a {@link SectionBuilder}.
+	 */
+	[ComponentType.Section]: SectionBuilder;
+	/**
+	 * The media gallery component type is associated with a {@link MediaGalleryBuilder}.
+	 */
+	[ComponentType.MediaGallery]: MediaGalleryBuilder;
 }
 
 /**
@@ -97,8 +147,44 @@ export function createComponentBuilder(
 			return new MentionableSelectMenuBuilder(data);
 		case ComponentType.ChannelSelect:
 			return new ChannelSelectMenuBuilder(data);
+		case ComponentType.File:
+			return new FileBuilder(data);
+		case ComponentType.Container:
+			return new ContainerBuilder(data);
+		case ComponentType.Section:
+			return new SectionBuilder(data);
+		case ComponentType.Separator:
+			return new SeparatorBuilder(data);
+		case ComponentType.TextDisplay:
+			return new TextDisplayBuilder(data);
+		case ComponentType.Thumbnail:
+			return new ThumbnailBuilder(data);
+		case ComponentType.MediaGallery:
+			return new MediaGalleryBuilder(data);
 		default:
 			// @ts-expect-error This case can still occur if we get a newer unsupported component type
 			throw new Error(`Cannot properly serialize component type: ${data.type}`);
 	}
 }
+
+function isBuilder<Builder extends JSONEncodable<any>>(
+	builder: unknown,
+	Constructor: new () => Builder,
+): builder is Builder {
+	return builder instanceof Constructor;
+}
+
+export function resolveBuilder<ComponentType extends Record<PropertyKey, any>, Builder extends JSONEncodable<any>>(
+	builder: Builder | ComponentType | ((builder: Builder) => Builder),
+	Constructor: new (data?: ComponentType) => Builder,
+) {
+	if (isBuilder(builder, Constructor)) {
+		return builder;
+	}
+
+	if (typeof builder === 'function') {
+		return builder(new Constructor());
+	}
+
+	return new Constructor(builder);
+}

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

@@ -0,0 +1,71 @@
+import { s } from '@sapphire/shapeshift';
+import { SeparatorSpacingSize } from 'discord-api-types/v10';
+import { colorPredicate } from '../../messages/embed/Assertions';
+import { isValidationEnabled } from '../../util/validation';
+import { ComponentBuilder } from '../Component';
+import { ButtonBuilder } from '../button/Button';
+import type { ContainerComponentBuilder } from './Container';
+import type { MediaGalleryItemBuilder } from './MediaGalleryItem';
+import type { TextDisplayBuilder } from './TextDisplay';
+import { ThumbnailBuilder } from './Thumbnail';
+
+export const unfurledMediaItemPredicate = s
+	.object({
+		url: s
+			.string()
+			.url(
+				{ allowedProtocols: ['http:', 'https:', 'attachment:'] },
+				{ message: 'Invalid protocol for media URL. Must be http:, https:, or attachment:' },
+			),
+	})
+	.setValidationEnabled(isValidationEnabled);
+
+export const descriptionPredicate = s
+	.string()
+	.lengthGreaterThanOrEqual(1)
+	.lengthLessThanOrEqual(1_024)
+	.setValidationEnabled(isValidationEnabled);
+
+export const filePredicate = s
+	.object({
+		url: s
+			.string()
+			.url({ allowedProtocols: ['attachment:'] }, { message: 'Invalid protocol for file URL. Must be attachment:' }),
+	})
+	.setValidationEnabled(isValidationEnabled);
+
+export const spoilerPredicate = s.boolean();
+
+export const dividerPredicate = s.boolean();
+
+export const spacingPredicate = s.nativeEnum(SeparatorSpacingSize);
+
+export const textDisplayContentPredicate = s
+	.string()
+	.lengthGreaterThanOrEqual(1)
+	.lengthLessThanOrEqual(4_000)
+	.setValidationEnabled(isValidationEnabled);
+
+export const accessoryPredicate = s
+	.instance(ButtonBuilder)
+	.or(s.instance(ThumbnailBuilder))
+	.setValidationEnabled(isValidationEnabled);
+
+export const containerColorPredicate = colorPredicate.nullish();
+
+export function assertReturnOfBuilder<ReturnType extends MediaGalleryItemBuilder | TextDisplayBuilder>(
+	input: unknown,
+	ExpectedInstanceOf: new () => ReturnType,
+): asserts input is ReturnType {
+	s.instance(ExpectedInstanceOf).parse(input);
+}
+
+export function validateComponentArray<
+	ReturnType extends ContainerComponentBuilder | MediaGalleryItemBuilder = ContainerComponentBuilder,
+>(input: unknown, min: number, max: number, ExpectedInstanceOf?: new () => ReturnType): asserts input is ReturnType[] {
+	(ExpectedInstanceOf ? s.instance(ExpectedInstanceOf) : s.instance(ComponentBuilder))
+		.array()
+		.lengthGreaterThanOrEqual(min)
+		.lengthLessThanOrEqual(max)
+		.parse(input);
+}

packages/builders/src/components/v2/Container.ts

@@ -0,0 +1,240 @@
+/* eslint-disable jsdoc/check-param-names */
+
+import type {
+	APIActionRowComponent,
+	APIComponentInContainer,
+	APIComponentInMessageActionRow,
+	APIContainerComponent,
+	APIFileComponent,
+	APIMediaGalleryComponent,
+	APISectionComponent,
+	APISeparatorComponent,
+	APITextDisplayComponent,
+} from 'discord-api-types/v10';
+import { ComponentType } from 'discord-api-types/v10';
+import type { RGBTuple } from '../../index.js';
+import { MediaGalleryBuilder, SectionBuilder } from '../../index.js';
+import { normalizeArray, type RestOrArray } from '../../util/normalizeArray.js';
+import type { AnyComponentBuilder, MessageActionRowComponentBuilder } from '../ActionRow.js';
+import { ActionRowBuilder } from '../ActionRow.js';
+import { ComponentBuilder } from '../Component.js';
+import { createComponentBuilder, resolveBuilder } from '../Components.js';
+import { containerColorPredicate, spoilerPredicate, validateComponentArray } from './Assertions.js';
+import { FileBuilder } from './File.js';
+import { SeparatorBuilder } from './Separator.js';
+import { TextDisplayBuilder } from './TextDisplay.js';
+
+/**
+ * The builders that may be used within a container.
+ */
+export type ContainerComponentBuilder =
+	| ActionRowBuilder<AnyComponentBuilder>
+	| FileBuilder
+	| MediaGalleryBuilder
+	| SectionBuilder
+	| SeparatorBuilder
+	| TextDisplayBuilder;
+
+/**
+ * A builder that creates API-compatible JSON data for a container.
+ */
+export class ContainerBuilder extends ComponentBuilder<APIContainerComponent> {
+	/**
+	 * The components within this container.
+	 */
+	public readonly components: ContainerComponentBuilder[];
+
+	/**
+	 * Creates a new container from API data.
+	 *
+	 * @param data - The API data to create this container with
+	 * @example
+	 * Creating a container from an API data object:
+	 * ```ts
+	 * const container = new ContainerBuilder({
+	 * 	components: [
+	 * 		{
+	 * 			content: "Some text here",
+	 * 			type: ComponentType.TextDisplay,
+	 * 		},
+	 * 	],
+	 * });
+	 * ```
+	 * @example
+	 * Creating a container using setters and API data:
+	 * ```ts
+	 * const container = new ContainerBuilder({
+	 * 	components: [
+	 * 		{
+	 * 			content: "# Heading",
+	 * 			type: ComponentType.TextDisplay,
+	 * 		},
+	 * 	],
+	 * })
+	 * 	.addComponents(separator, section);
+	 * ```
+	 */
+	public constructor({ components, ...data }: Partial<APIContainerComponent> = {}) {
+		super({ type: ComponentType.Container, ...data });
+		this.components = (components?.map((component) => createComponentBuilder(component)) ??
+			[]) as ContainerComponentBuilder[];
+	}
+
+	/**
+	 * Sets the accent color of this container.
+	 *
+	 * @param color - The color to use
+	 */
+	public setAccentColor(color?: RGBTuple | number): this {
+		// Data assertions
+		containerColorPredicate.parse(color);
+
+		if (Array.isArray(color)) {
+			const [red, green, blue] = color;
+			this.data.accent_color = (red << 16) + (green << 8) + blue;
+			return this;
+		}
+
+		this.data.accent_color = color;
+		return this;
+	}
+
+	/**
+	 * Clears the accent color of this container.
+	 */
+	public clearAccentColor() {
+		this.data.accent_color = undefined;
+		return this;
+	}
+
+	/**
+	 * Adds action row components to this container.
+	 *
+	 * @param components - The action row components to add
+	 */
+	public addActionRowComponents<ComponentType extends MessageActionRowComponentBuilder>(
+		...components: RestOrArray<
+			| ActionRowBuilder<ComponentType>
+			| APIActionRowComponent<APIComponentInMessageActionRow>
+			| ((builder: ActionRowBuilder<ComponentType>) => ActionRowBuilder<ComponentType>)
+		>
+	) {
+		this.components.push(
+			...normalizeArray(components).map((component) => resolveBuilder(component, ActionRowBuilder<ComponentType>)),
+		);
+		return this;
+	}
+
+	/**
+	 * Adds file components to this container.
+	 *
+	 * @param components - The file components to add
+	 */
+	public addFileComponents(
+		...components: RestOrArray<APIFileComponent | FileBuilder | ((builder: FileBuilder) => FileBuilder)>
+	) {
+		this.components.push(...normalizeArray(components).map((component) => resolveBuilder(component, FileBuilder)));
+		return this;
+	}
+
+	/**
+	 * Adds media gallery components to this container.
+	 *
+	 * @param components - The media gallery components to add
+	 */
+	public addMediaGalleryComponents(
+		...components: RestOrArray<
+			APIMediaGalleryComponent | MediaGalleryBuilder | ((builder: MediaGalleryBuilder) => MediaGalleryBuilder)
+		>
+	) {
+		this.components.push(
+			...normalizeArray(components).map((component) => resolveBuilder(component, MediaGalleryBuilder)),
+		);
+		return this;
+	}
+
+	/**
+	 * Adds section components to this container.
+	 *
+	 * @param components - The section components to add
+	 */
+	public addSectionComponents(
+		...components: RestOrArray<APISectionComponent | SectionBuilder | ((builder: SectionBuilder) => SectionBuilder)>
+	) {
+		this.components.push(...normalizeArray(components).map((component) => resolveBuilder(component, SectionBuilder)));
+		return this;
+	}
+
+	/**
+	 * Adds separator components to this container.
+	 *
+	 * @param components - The separator components to add
+	 */
+	public addSeparatorComponents(
+		...components: RestOrArray<
+			APISeparatorComponent | SeparatorBuilder | ((builder: SeparatorBuilder) => SeparatorBuilder)
+		>
+	) {
+		this.components.push(...normalizeArray(components).map((component) => resolveBuilder(component, SeparatorBuilder)));
+		return this;
+	}
+
+	/**
+	 * Adds text display components to this container.
+	 *
+	 * @param components - The text display components to add
+	 */
+	public addTextDisplayComponents(
+		...components: RestOrArray<
+			APITextDisplayComponent | TextDisplayBuilder | ((builder: TextDisplayBuilder) => TextDisplayBuilder)
+		>
+	) {
+		this.components.push(
+			...normalizeArray(components).map((component) => resolveBuilder(component, TextDisplayBuilder)),
+		);
+		return this;
+	}
+
+	/**
+	 * Removes, replaces, or inserts components for this container.
+	 *
+	 * @param index - The index to start removing, replacing or inserting components
+	 * @param deleteCount - The amount of components to remove
+	 * @param components - The components to set
+	 */
+	public spliceComponents(
+		index: number,
+		deleteCount: number,
+		...components: RestOrArray<APIComponentInContainer | ContainerComponentBuilder>
+	) {
+		this.components.splice(
+			index,
+			deleteCount,
+			...normalizeArray(components).map((component) =>
+				component instanceof ComponentBuilder ? component : createComponentBuilder(component),
+			),
+		);
+		return this;
+	}
+
+	/**
+	 * Sets the spoiler status of this container.
+	 *
+	 * @param spoiler - The spoiler status to use
+	 */
+	public setSpoiler(spoiler = true) {
+		this.data.spoiler = spoilerPredicate.parse(spoiler);
+		return this;
+	}
+
+	/**
+	 * {@inheritDoc ComponentBuilder.toJSON}
+	 */
+	public toJSON(): APIContainerComponent {
+		validateComponentArray(this.components, 1, 10);
+		return {
+			...this.data,
+			components: this.components.map((component) => component.toJSON()),
+		} as APIContainerComponent;
+	}
+}

packages/builders/src/components/v2/File.ts

@@ -0,0 +1,63 @@
+import { ComponentType, type APIFileComponent } from 'discord-api-types/v10';
+import { ComponentBuilder } from '../Component';
+import { filePredicate, spoilerPredicate } from './Assertions';
+
+export class FileBuilder extends ComponentBuilder<APIFileComponent> {
+	/**
+	 * Creates a new file from API data.
+	 *
+	 * @param data - The API data to create this file with
+	 * @example
+	 * Creating a file from an API data object:
+	 * ```ts
+	 * const file = new FileBuilder({
+	 * 	spoiler: true,
+	 * 	file: {
+	 * 		url: 'attachment://file.png',
+	 * 	},
+	 * });
+	 * ```
+	 * @example
+	 * Creating a file using setters and API data:
+	 * ```ts
+	 * const file = new FileBuilder({
+	 * 	file: {
+	 * 		url: 'attachment://image.jpg',
+	 * 	},
+	 * })
+	 * 	.setSpoiler(false);
+	 * ```
+	 */
+	public constructor(data: Partial<APIFileComponent> = {}) {
+		super({ type: ComponentType.File, ...data, file: data.file ? { url: data.file.url } : undefined });
+	}
+
+	/**
+	 * Sets the spoiler status of this file.
+	 *
+	 * @param spoiler - The spoiler status to use
+	 */
+	public setSpoiler(spoiler = true) {
+		this.data.spoiler = spoilerPredicate.parse(spoiler);
+		return this;
+	}
+
+	/**
+	 * Sets the media URL of this file.
+	 *
+	 * @param url - The URL to use
+	 */
+	public setURL(url: string) {
+		this.data.file = filePredicate.parse({ url });
+		return this;
+	}
+
+	/**
+	 * {@inheritDoc ComponentBuilder.toJSON}
+	 */
+	public override toJSON(): APIFileComponent {
+		filePredicate.parse(this.data.file);
+
+		return { ...this.data, file: { ...this.data.file } } as APIFileComponent;
+	}
+}

packages/builders/src/components/v2/MediaGallery.ts

@@ -0,0 +1,117 @@
+/* eslint-disable jsdoc/check-param-names */
+
+import type { APIMediaGalleryComponent, APIMediaGalleryItem } from 'discord-api-types/v10';
+import { ComponentType } from 'discord-api-types/v10';
+import { normalizeArray, type RestOrArray } from '../../util/normalizeArray.js';
+import { ComponentBuilder } from '../Component.js';
+import { resolveBuilder } from '../Components.js';
+import { assertReturnOfBuilder, validateComponentArray } from './Assertions.js';
+import { MediaGalleryItemBuilder } from './MediaGalleryItem.js';
+
+/**
+ * A builder that creates API-compatible JSON data for a container.
+ */
+export class MediaGalleryBuilder extends ComponentBuilder<APIMediaGalleryComponent> {
+	/**
+	 * The components within this container.
+	 */
+	public readonly items: MediaGalleryItemBuilder[];
+
+	/**
+	 * Creates a new media gallery from API data.
+	 *
+	 * @param data - The API data to create this media gallery with
+	 * @example
+	 * Creating a media gallery from an API data object:
+	 * ```ts
+	 * const mediaGallery = new MediaGalleryBuilder({
+	 * 	items: [
+	 * 		{
+	 * 			description: "Some text here",
+	 * 			media: {
+	 * 				url: 'https://cdn.discordapp.com/embed/avatars/2.png',
+	 * 			},
+	 * 		},
+	 * 	],
+	 * });
+	 * ```
+	 * @example
+	 * Creating a media gallery using setters and API data:
+	 * ```ts
+	 * const mediaGallery = new MediaGalleryBuilder({
+	 * 	items: [
+	 * 		{
+	 * 			description: "alt text",
+	 * 			media: {
+	 * 				url: 'https://cdn.discordapp.com/embed/avatars/5.png',
+	 * 			},
+	 * 		},
+	 * 	],
+	 * })
+	 * 	.addItems(item2, item3);
+	 * ```
+	 */
+	public constructor({ items, ...data }: Partial<APIMediaGalleryComponent> = {}) {
+		super({ type: ComponentType.MediaGallery, ...data });
+		this.items = items?.map((item) => new MediaGalleryItemBuilder(item)) ?? [];
+	}
+
+	/**
+	 * Adds items to this media gallery.
+	 *
+	 * @param items - The items to add
+	 */
+	public addItems(
+		...items: RestOrArray<
+			APIMediaGalleryItem | MediaGalleryItemBuilder | ((builder: MediaGalleryItemBuilder) => MediaGalleryItemBuilder)
+		>
+	) {
+		this.items.push(
+			...normalizeArray(items).map((input) => {
+				const result = resolveBuilder(input, MediaGalleryItemBuilder);
+
+				assertReturnOfBuilder(result, MediaGalleryItemBuilder);
+				return result;
+			}),
+		);
+		return this;
+	}
+
+	/**
+	 * Removes, replaces, or inserts media gallery items for this media gallery.
+	 *
+	 * @param index - The index to start removing, replacing or inserting items
+	 * @param deleteCount - The amount of items to remove
+	 * @param items - The items to insert
+	 */
+	public spliceItems(
+		index: number,
+		deleteCount: number,
+		...items: RestOrArray<
+			APIMediaGalleryItem | MediaGalleryItemBuilder | ((builder: MediaGalleryItemBuilder) => MediaGalleryItemBuilder)
+		>
+	) {
+		this.items.splice(
+			index,
+			deleteCount,
+			...normalizeArray(items).map((input) => {
+				const result = resolveBuilder(input, MediaGalleryItemBuilder);
+
+				assertReturnOfBuilder(result, MediaGalleryItemBuilder);
+				return result;
+			}),
+		);
+		return this;
+	}
+
+	/**
+	 * {@inheritDoc ComponentBuilder.toJSON}
+	 */
+	public toJSON(): APIMediaGalleryComponent {
+		validateComponentArray(this.items, 1, 10, MediaGalleryItemBuilder);
+		return {
+			...this.data,
+			items: this.items.map((item) => item.toJSON()),
+		} as APIMediaGalleryComponent;
+	}
+}

packages/builders/src/components/v2/MediaGalleryItem.ts

@@ -0,0 +1,90 @@
+import type { JSONEncodable } from '@discordjs/util';
+import type { APIMediaGalleryItem } from 'discord-api-types/v10';
+import { descriptionPredicate, spoilerPredicate, unfurledMediaItemPredicate } from './Assertions';
+
+export class MediaGalleryItemBuilder implements JSONEncodable<APIMediaGalleryItem> {
+	/**
+	 * The API data associated with this media gallery item.
+	 */
+	public readonly data: Partial<APIMediaGalleryItem>;
+
+	/**
+	 * Creates a new media gallery item from API data.
+	 *
+	 * @param data - The API data to create this media gallery item with
+	 * @example
+	 * Creating a media gallery item from an API data object:
+	 * ```ts
+	 * const item = new MediaGalleryItemBuilder({
+	 * 	description: "Some text here",
+	 * 	media: {
+	 * 		url: 'https://cdn.discordapp.com/embed/avatars/2.png',
+	 * 	},
+	 * });
+	 * ```
+	 * @example
+	 * Creating a media gallery item using setters and API data:
+	 * ```ts
+	 * const item = new MediaGalleryItemBuilder({
+	 * 	media: {
+	 * 		url: 'https://cdn.discordapp.com/embed/avatars/5.png',
+	 * 	},
+	 * })
+	 * 	.setDescription("alt text");
+	 * ```
+	 */
+	public constructor(data: Partial<APIMediaGalleryItem> = {}) {
+		this.data = data;
+	}
+
+	/**
+	 * Sets the description of this media gallery item.
+	 *
+	 * @param description - The description to use
+	 */
+	public setDescription(description: string) {
+		this.data.description = descriptionPredicate.parse(description);
+		return this;
+	}
+
+	/**
+	 * Clears the description of this media gallery item.
+	 */
+	public clearDescription() {
+		this.data.description = undefined;
+		return this;
+	}
+
+	/**
+	 * Sets the spoiler status of this media gallery item.
+	 *
+	 * @param spoiler - The spoiler status to use
+	 */
+	public setSpoiler(spoiler = true) {
+		this.data.spoiler = spoilerPredicate.parse(spoiler);
+		return this;
+	}
+
+	/**
+	 * Sets the media URL of this media gallery item.
+	 *
+	 * @param url - The URL to use
+	 */
+	public setURL(url: string) {
+		this.data.media = unfurledMediaItemPredicate.parse({ url });
+		return this;
+	}
+
+	/**
+	 * Serializes this builder to API-compatible JSON data.
+	 *
+	 * @remarks
+	 * This method runs validations on the data before serializing it.
+	 * As such, it may throw an error if the data is invalid.
+	 */
+	public toJSON(): APIMediaGalleryItem {
+		unfurledMediaItemPredicate.parse(this.data.media);
+
+		return { ...this.data } as APIMediaGalleryItem;
+	}
+}

packages/builders/src/components/v2/Section.ts

@@ -0,0 +1,153 @@
+/* eslint-disable jsdoc/check-param-names */
+
+import type {
+	APIButtonComponent,
+	APISectionComponent,
+	APITextDisplayComponent,
+	APIThumbnailComponent,
+} from 'discord-api-types/v10';
+import { ComponentType } from 'discord-api-types/v10';
+import { ButtonBuilder, ThumbnailBuilder } from '../../index.js';
+import { normalizeArray, type RestOrArray } from '../../util/normalizeArray.js';
+import { ComponentBuilder } from '../Component.js';
+import { createComponentBuilder, resolveBuilder } from '../Components.js';
+import { accessoryPredicate, assertReturnOfBuilder, validateComponentArray } from './Assertions.js';
+import { TextDisplayBuilder } from './TextDisplay.js';
+
+/**
+ * A builder that creates API-compatible JSON data for a section.
+ */
+export class SectionBuilder extends ComponentBuilder<APISectionComponent> {
+	/**
+	 * The components within this section.
+	 */
+	public readonly components: ComponentBuilder[];
+
+	/**
+	 * The accessory of this section.
+	 */
+	public readonly accessory?: ButtonBuilder | ThumbnailBuilder;
+
+	/**
+	 * Creates a new section from API data.
+	 *
+	 * @param data - The API data to create this section with
+	 * @example
+	 * Creating a section from an API data object:
+	 * ```ts
+	 * const section = new SectionBuilder({
+	 * 	components: [
+	 * 		{
+	 * 			content: "Some text here",
+	 * 			type: ComponentType.TextDisplay,
+	 * 		},
+	 * 	],
+	 *  accessory: {
+	 *      media: {
+	 *          url: 'https://cdn.discordapp.com/embed/avatars/3.png',
+	 *      },
+	 *  }
+	 * });
+	 * ```
+	 * @example
+	 * Creating a section using setters and API data:
+	 * ```ts
+	 * const section = new SectionBuilder({
+	 * 	components: [
+	 * 		{
+	 * 			content: "# Heading",
+	 * 			type: ComponentType.TextDisplay,
+	 * 		},
+	 * 	],
+	 * })
+	 * 	.setPrimaryButtonAccessory(button);
+	 * ```
+	 */
+	public constructor({ components, accessory, ...data }: Partial<APISectionComponent> = {}) {
+		super({ type: ComponentType.Section, ...data });
+		this.components = (components?.map((component) => createComponentBuilder(component)) ?? []) as ComponentBuilder[];
+		this.accessory = accessory ? createComponentBuilder(accessory) : undefined;
+	}
+
+	/**
+	 * Sets the accessory of this section to a button.
+	 *
+	 * @param accessory - The accessory to use
+	 */
+	public setButtonAccessory(
+		accessory: APIButtonComponent | ButtonBuilder | ((builder: ButtonBuilder) => ButtonBuilder),
+	): this {
+		Reflect.set(this, 'accessory', accessoryPredicate.parse(resolveBuilder(accessory, ButtonBuilder)));
+		return this;
+	}
+
+	/**
+	 * Sets the accessory of this section to a thumbnail.
+	 *
+	 * @param accessory - The accessory to use
+	 */
+	public setThumbnailAccessory(
+		accessory: APIThumbnailComponent | ThumbnailBuilder | ((builder: ThumbnailBuilder) => ThumbnailBuilder),
+	): this {
+		Reflect.set(this, 'accessory', accessoryPredicate.parse(resolveBuilder(accessory, ThumbnailBuilder)));
+		return this;
+	}
+
+	/**
+	 * Adds text display components to this section.
+	 *
+	 * @param components - The text display components to add
+	 */
+	public addTextDisplayComponents(
+		...components: RestOrArray<TextDisplayBuilder | ((builder: TextDisplayBuilder) => TextDisplayBuilder)>
+	) {
+		this.components.push(
+			...normalizeArray(components).map((input) => {
+				const result = resolveBuilder(input, TextDisplayBuilder);
+
+				assertReturnOfBuilder(result, TextDisplayBuilder);
+				return result;
+			}),
+		);
+		return this;
+	}
+
+	/**
+	 * Removes, replaces, or inserts text display components for this section.
+	 *
+	 * @param index - The index to start removing, replacing or inserting text display components
+	 * @param deleteCount - The amount of text display components to remove
+	 * @param components - The text display components to insert
+	 */
+	public spliceTextDisplayComponents(
+		index: number,
+		deleteCount: number,
+		...components: RestOrArray<
+			APITextDisplayComponent | TextDisplayBuilder | ((builder: TextDisplayBuilder) => TextDisplayBuilder)
+		>
+	) {
+		this.components.splice(
+			index,
+			deleteCount,
+			...normalizeArray(components).map((input) => {
+				const result = resolveBuilder(input, TextDisplayBuilder);
+
+				assertReturnOfBuilder(result, TextDisplayBuilder);
+				return result;
+			}),
+		);
+		return this;
+	}
+
+	/**
+	 * {@inheritDoc ComponentBuilder.toJSON}
+	 */
+	public toJSON(): APISectionComponent {
+		validateComponentArray(this.components, 1, 3, TextDisplayBuilder);
+		return {
+			...this.data,
+			components: this.components.map((component) => component.toJSON()),
+			accessory: accessoryPredicate.parse(this.accessory).toJSON(),
+		} as APISectionComponent;
+	}
+}

packages/builders/src/components/v2/Separator.ts

@@ -0,0 +1,69 @@
+import type { SeparatorSpacingSize, APISeparatorComponent } from 'discord-api-types/v10';
+import { ComponentType } from 'discord-api-types/v10';
+import { ComponentBuilder } from '../Component';
+import { dividerPredicate, spacingPredicate } from './Assertions';
+
+export class SeparatorBuilder extends ComponentBuilder<APISeparatorComponent> {
+	/**
+	 * Creates a new separator from API data.
+	 *
+	 * @param data - The API data to create this separator with
+	 * @example
+	 * Creating a separator from an API data object:
+	 * ```ts
+	 * const separator = new SeparatorBuilder({
+	 * 	spacing: SeparatorSpacingSize.Small,
+	 *  divider: true,
+	 * });
+	 * ```
+	 * @example
+	 * Creating a separator using setters and API data:
+	 * ```ts
+	 * const separator = new SeparatorBuilder({
+	 * 	spacing: SeparatorSpacingSize.Large,
+	 * })
+	 * 	.setDivider(false);
+	 * ```
+	 */
+	public constructor(data: Partial<APISeparatorComponent> = {}) {
+		super({
+			type: ComponentType.Separator,
+			...data,
+		});
+	}
+
+	/**
+	 * Sets whether this separator should show a divider line.
+	 *
+	 * @param divider - Whether to show a divider line
+	 */
+	public setDivider(divider = true) {
+		this.data.divider = dividerPredicate.parse(divider);
+		return this;
+	}
+
+	/**
+	 * Sets the spacing of this separator.
+	 *
+	 * @param spacing - The spacing to use
+	 */
+	public setSpacing(spacing: SeparatorSpacingSize) {
+		this.data.spacing = spacingPredicate.parse(spacing);
+		return this;
+	}
+
+	/**
+	 * Clears the spacing of this separator.
+	 */
+	public clearSpacing() {
+		this.data.spacing = undefined;
+		return this;
+	}
+
+	/**
+	 * {@inheritDoc ComponentBuilder.toJSON}
+	 */
+	public override toJSON(): APISeparatorComponent {
+		return { ...this.data } as APISeparatorComponent;
+	}
+}

packages/builders/src/components/v2/TextDisplay.ts

@@ -0,0 +1,52 @@
+import type { APITextDisplayComponent } from 'discord-api-types/v10';
+import { ComponentType } from 'discord-api-types/v10';
+import { ComponentBuilder } from '../Component';
+import { textDisplayContentPredicate } from './Assertions';
+
+export class TextDisplayBuilder extends ComponentBuilder<APITextDisplayComponent> {
+	/**
+	 * Creates a new text display from API data.
+	 *
+	 * @param data - The API data to create this text display with
+	 * @example
+	 * Creating a text display from an API data object:
+	 * ```ts
+	 * const textDisplay = new TextDisplayBuilder({
+	 * 	content: 'some text',
+	 * });
+	 * ```
+	 * @example
+	 * Creating a text display using setters and API data:
+	 * ```ts
+	 * const textDisplay = new TextDisplayBuilder({
+	 * 	content: 'old text',
+	 * })
+	 * 	.setContent('new text');
+	 * ```
+	 */
+	public constructor(data: Partial<APITextDisplayComponent> = {}) {
+		super({
+			type: ComponentType.TextDisplay,
+			...data,
+		});
+	}
+
+	/**
+	 * Sets the text of this text display.
+	 *
+	 * @param content - The text to use
+	 */
+	public setContent(content: string) {
+		this.data.content = textDisplayContentPredicate.parse(content);
+		return this;
+	}
+
+	/**
+	 * {@inheritDoc ComponentBuilder.toJSON}
+	 */
+	public override toJSON(): APITextDisplayComponent {
+		textDisplayContentPredicate.parse(this.data.content);
+
+		return { ...this.data } as APITextDisplayComponent;
+	}
+}

packages/builders/src/components/v2/Thumbnail.ts

@@ -0,0 +1,86 @@
+import type { APIThumbnailComponent } from 'discord-api-types/v10';
+import { ComponentType } from 'discord-api-types/v10';
+import { ComponentBuilder } from '../Component';
+import { descriptionPredicate, spoilerPredicate, unfurledMediaItemPredicate } from './Assertions';
+
+export class ThumbnailBuilder extends ComponentBuilder<APIThumbnailComponent> {
+	/**
+	 * Creates a new thumbnail from API data.
+	 *
+	 * @param data - The API data to create this thumbnail with
+	 * @example
+	 * Creating a thumbnail from an API data object:
+	 * ```ts
+	 * const thumbnaik = new ThumbnailBuilder({
+	 * 	description: 'some text',
+	 *  media: {
+	 *      url: 'https://cdn.discordapp.com/embed/avatars/4.png',
+	 *  },
+	 * });
+	 * ```
+	 * @example
+	 * Creating a thumbnail using setters and API data:
+	 * ```ts
+	 * const thumbnail = new ThumbnailBuilder({
+	 * 	media: {
+	 *      url: 'attachment://image.png',
+	 *  },
+	 * })
+	 * 	.setDescription('alt text');
+	 * ```
+	 */
+	public constructor(data: Partial<APIThumbnailComponent> = {}) {
+		super({
+			type: ComponentType.Thumbnail,
+			...data,
+			media: data.media ? { url: data.media.url } : undefined,
+		});
+	}
+
+	/**
+	 * Sets the description of this thumbnail.
+	 *
+	 * @param description - The description to use
+	 */
+	public setDescription(description: string) {
+		this.data.description = descriptionPredicate.parse(description);
+		return this;
+	}
+
+	/**
+	 * Clears the description of this thumbnail.
+	 */
+	public clearDescription() {
+		this.data.description = undefined;
+		return this;
+	}
+
+	/**
+	 * Sets the spoiler status of this thumbnail.
+	 *
+	 * @param spoiler - The spoiler status to use
+	 */
+	public setSpoiler(spoiler = true) {
+		this.data.spoiler = spoilerPredicate.parse(spoiler);
+		return this;
+	}
+
+	/**
+	 * Sets the media URL of this thumbnail.
+	 *
+	 * @param url - The URL to use
+	 */
+	public setURL(url: string) {
+		this.data.media = unfurledMediaItemPredicate.parse({ url });
+		return this;
+	}
+
+	/**
+	 * {@inheritdoc ComponentBuilder.toJSON}
+	 */
+	public override toJSON(): APIThumbnailComponent {
+		unfurledMediaItemPredicate.parse(this.data.media);
+
+		return { ...this.data } as APIThumbnailComponent;
+	}
+}