Discord-Modals v1.3.0: Add ModalActionRow class, fix typings and add support for JSON Modals.

Author: Mateo-tem

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 Hello! This is the Change log section of Discord-Modals. Here you can see what things have been changed in the different versions, to be informed. This will be updated every time there are new versions. I hope you enjoy this package :)
 
+# v1.3.0 (Stable)
+
+- Fix bug: 'INVALID_CLIENT' error when the Client is valid on `.showModal()` method.
+- **Featured:** Add `ModalActionRow` class.
+- Now the `TextInputComponent` returns an **Action Row Component**. Add `ModalActionRow` class and types.
+- **Featured:** Now the `.showModal()` method supports **JSON Modals**.
+- Fix error typings `ModalSubmitField`.
+- **Featured:** Implement `.update()` method to `ModalSubmitInteraction` class.
+- Fix types: `.showModal()` method, `.addComponents()` and `.setComponents()` of `Modal` class.
+- Typings: `discord-api-types` updated to **v10**.
+
 # v1.2.9 (Stable)
 
 - Fix: Add types for reply options on `ModalSubmitInteraction` class.

DOCS.md

@@ -42,7 +42,7 @@ Shows the Modal to the Interaction User.
 
 ## Modal
 Represents a Modal Form to be shown in response to an Interaction.
-- A modal can contain at most **5 Text Input Components**
+- A modal can contain at most **5 Action Rows**. Each of them can contain **1 Text Input Component**.
 
 ```javascript
 new Modal(data)
@@ -69,7 +69,7 @@ The Custom Id of the Modal.
 
 #### .components
 The Text Input Components of the Modal.
-> Returns: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+> Returns: [Array<TextInputComponent>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
 
 ### Methods
 
@@ -96,7 +96,7 @@ Sets the Custom Id of the Modal. (Max. 100 characters)
 > Returns: [Modal](#modal)
 
 ```js
-.addComponents(TextInputComponent)
+.addComponents(...TextInputComponent)
 ```
 Adds the Components of the Modal.
 
@@ -107,7 +107,7 @@ Adds the Components of the Modal.
 > Returns: [Modal](#modal)
 
 ```js
-.setComponents(TextInputComponent)
+.setComponents(...TextInputComponent)
 ```
 Sets the Components of the Modal.
 
@@ -150,6 +150,7 @@ new TextInputComponent(data)
 |  `.required`  | `.setRequired()` |
 |  `.style`  | `.setStyle()` |
 |  `.value`  | `.setDefaultValue()` |
+|    | `.toJSON()` |
 
 ### Properties
 
@@ -275,13 +276,71 @@ Sets a Default/Pre-filled Value of the Text Input Component. (Max. 4000 characte
 
 > Returns: [TextInputComponent](#textinputcomponent)
 
+```js
+.toJSON()
+```
+Transforms the TextInputComponent to a plain object.
+
+> Returns: [APITextInputComponent](https://discord.com/developers/docs/interactions/message-components#text-inputs)
+
 ### TextInputStyle
 
 | Text |Value|Description|
 | ------------ | ------------ |------------ |
 |  SHORT  |1 [[Short]](https://discord.com/developers/docs/interactions/message-components#text-inputs-text-input-styles)| A single-line input |
 |  LONG  |2 [[Paragraph]](https://discord.com/developers/docs/interactions/message-components#text-inputs-text-input-styles)| A multi-line input |
 
+## ModalActionRow
+Represents a Modal Action Row, that contains a Text Input Component.
+
+| Properties |Methods|
+| ------------ | ------------ |
+|  `.type`  | `.addComponent()` |
+|  `.components`  | `.componentToJSON()` |
+|    | `.toJSON()` |
+
+### Properties
+
+#### .type
+The type of the Modal Action Row (1).
+> Returns: [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)
+
+#### .components
+The Text Input Component of this Action Row.
+> Returns: [Array<APITextInputComponent>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+
+### Methods
+
+```js
+.addComponent(TextInputComponent)
+```
+Adds a Text Input Component.
+
+| Parameter |Type|Description|
+| ------------ | ------------ |------------ |
+|  *TextInputComponent*  |[TextInputComponent](#textinputcomponent)| The Text Input Component to add in the Action Row. |
+
+> Returns: [ModalActionRow](#modalactionrow)
+
+```js
+.componentToJSON(TextInputComponent)
+```
+Transforms a Text Input Component to a plain object.
+
+| Parameter |Type|Description|
+| ------------ | ------------ |------------ |
+|  *TextInputComponent*  |[TextInputComponent](#textinputcomponent)| The Text Input Component to transform. |
+
+> Returns: [APITextInputComponent](https://discord.com/developers/docs/interactions/message-components#text-inputs)
+
+```js
+.toJSON()
+```
+Transforms the Modal Action Row to a plain object.
+
+> Returns: [APIModalActionRowComponent<APITextInputComponent>](https://discord.com/developers/docs/interactions/message-components#text-inputs)
+
+
 ## ModalSubmitField
 Represents a Field of a Modal Submit Interaction.
 
@@ -320,9 +379,9 @@ Represents a Modal Submit Interaction.
 |  `.guildId`  | `.editReply()` |
 |  `.user`  | `.deleteReply()` |
 |  `.member`  | `.followUp()` |
-|  `.memberPermissions`  | `.isFromMessage()` |
-|  `.locale`  | `.isRepliable()` |
-|  `.guildLocale`  |  |
+|  `.memberPermissions`  | `.update()` |
+|  `.locale`  | `.isFromMessage()` |
+|  `.guildLocale`  | `.isRepliable()` |
 |  `.message`  |  |
 |  `.version`  |  |  
 |  `.webhook`  |  | 
@@ -445,6 +504,7 @@ Discord-Modals integrates some errors to avoid issues and respect the structures
 |  `TEXT_INPUT_VALUE` | TextInputComponent value must be a string. |
 |  `MODAL_CUSTOM_ID` | Modal customId must be a string. |
 |  `MODAL_TITLE` | Modal title must be a string. |
+|  `MODAL_INTERACTION_MESSAGE` | This Modal Submit Interaction does not have a message to update. |
 
 
 # 🔨 Do you want to contribute to Discord-Modals?

index.d.ts

@@ -3,7 +3,8 @@ import {
   APITextInputComponent,
   APIModalInteractionResponseCallbackData,
   APIModalSubmitInteraction,
-} from "discord-api-types/v9";
+  APIModalActionRowComponent,
+} from "discord-api-types/v10";
 import {
   Client,
   User,
@@ -16,6 +17,7 @@ import {
   MessagePayload,
   InteractionReplyOptions,
   InteractionDeferReplyOptions,
+  InteractionUpdateOptions,
 } from "discord.js";
 
 export default function (client: Client): void;
@@ -93,7 +95,7 @@ export class TextInputComponent extends BaseMessageComponent {
   setPlaceholder(placeholder: string): TextInputComponent;
   setRequired(required: boolean): TextInputComponent;
   setDefaultValue(value: string): TextInputComponent;
-  toJSON(): APITextInputComponent;
+  toJSON(): APIModalActionRowComponent<APITextInputComponent>;
 }
 
 export type TextInputStyle = "SHORT" | "LONG";
@@ -116,11 +118,22 @@ export class Modal {
 export class ModalSubmitField extends BaseMessageComponent {
   constructor(data?: ModalSubmitFieldData);
 
-  type: string;
+  type: MessageComponentType;
   customId: string;
   value: string;
 }
 
+export class ModalActionRow {
+  constructor();
+
+  type: number;
+  components: APITextInputComponent[];
+
+  addComponent(component: TextInputComponent): ModalActionRow;
+  componentToJSON(component: TextInputComponent): APITextInputComponent;
+  toJSON(): APIModalActionRowComponent<APITextInputComponent>;
+}
+
 export class ModalSubmitInteraction extends Interaction {
   constructor(client?: Client, data?: APIModalSubmitInteraction);
 
@@ -156,6 +169,9 @@ export class ModalSubmitInteraction extends Interaction {
   followUp(
     options: string | MessagePayload | InteractionReplyOptions
   ): Promise<void>;
+  update(
+    options: string | MessagePayload | InteractionUpdateOptions
+  ): Promise<void>
 }
 
 export function showModal(

index.js

@@ -1,4 +1,4 @@
-const { Client, version } = require('discord.js');
+const { version } = require('discord.js');
 let ModalSubmitInteraction = require('./src/structures/ModalSubmitInteraction');
 const { Error } = require('./src/structures/errors');
 const { InteractionTypes } = require('./src/util/Constants');
@@ -40,6 +40,7 @@ if (discordjsVersion.includes('v13')) {
   module.exports.TextInputComponent = require('./src/structures/TextInputComponent');
   module.exports.ModalSubmitInteraction = require('./src/structures/ModalSubmitInteraction');
   module.exports.ModalSubmitField = require('./src/structures/ModalSubmitField');
+  module.exports.ModalActionRow = require('./src/structures/ModalActionRow');
   module.exports.showModal = require('./src/structures/ShowModal');
   module.exports.Interaction = require('./src/structures/Interaction');
   module.exports.InteractionResponses = require('./src/structures/interfaces/InteractionResponses');
@@ -50,6 +51,7 @@ if (discordjsVersion.includes('v13')) {
   module.exports.TextInputComponent = require('./src/structures/TextInputComponent');
   module.exports.ModalSubmitInteraction = require('./src/v14/ModalSubmitInteraction');
   module.exports.ModalSubmitField = require('./src/structures/ModalSubmitField');
+  module.exports.ModalActionRow = require('./src/structures/ModalActionRow');
   module.exports.showModal = require('./src/v14/ShowModal');
   module.exports.Interaction = require('./src/v14/Interaction');
   module.exports.InteractionResponses = require('./src/v14/interfaces/InteractionResponses');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-modals",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "Discord-Modals is a package that allows your discord.js v13 and v14 bot to create, and interact with Modals, a new Discord feature.",
   "main": "index.js",
   "files": [

src/structures/Modal.js

@@ -21,11 +21,11 @@ class Modal {
   constructor(data = {}, client = null) {
 
     /**
-     * The Text Input Components of the Modal.
-     * @type {BaseMessageComponent}
+     * The Title of the Modal.
+     * @type {String}
     */
 
-    this.components = data.components?.map(c => BaseMessageComponent.create(c, client)) ?? [];
+    this.title = data.title ?? null;
 
     /**
      * The Custom Id of the Modal.
@@ -35,11 +35,11 @@ class Modal {
     this.customId = data.custom_id ?? data.customId ?? null;
 
     /**
-     * The Title of the Modal.
-     * @type {String}
+     * The Text Input Components of the Modal.
+     * @type {BaseMessageComponent}
     */
 
-    this.title = data.title ?? null;
+    this.components = data.components?.map(c => BaseMessageComponent.create(c, client)) ?? [];
 
   }
 

src/structures/ModalActionRow.js

@@ -0,0 +1,56 @@
+const TextInputComponent = require("./TextInputComponent");
+const { MessageComponentTypes, TextInputStyles } = require("../util/Constants");
+
+/**
+ * Represents a Modal Action Row, that contains a Text Input Component.
+ */
+
+class ModalActionRow {
+  constructor() {
+
+    /**
+     * The type of the Modal Action Row.
+     */
+
+    this.type = MessageComponentTypes.ACTION_ROW;
+
+    /**
+     * The Text Input Component of this action row
+    */
+
+    this.components = [];
+  }
+
+  /**
+   * Adds a Text Input Component.
+   * @param {TextInputComponent} component
+   */
+
+  addComponent(component) {
+    this.components.push(component);
+    return this;
+  }
+
+  componentToJSON(component) {
+    return {
+      type: MessageComponentTypes[component.type],
+      custom_id: component.customId,
+      label: component.label,
+      style: TextInputStyles[component.style],
+      min_length: component.minLength,
+      max_length: component.maxLength,
+      required: component.required,
+      value: component.value,
+      placeholder: component.placeholder,
+    };
+  }
+
+  toJSON() {
+    return {
+      type: MessageComponentTypes.ACTION_ROW,
+      components: this.components.map(c => this.componentToJSON(c)),
+    };
+  }
+}
+
+module.exports = ModalActionRow;

src/structures/ModalSubmitInteraction.js

@@ -96,11 +96,11 @@ class ModalSubmitInteraction extends Interaction {
   editReply() {}
   deleteReply() {}
   followUp() {}
+  update() {}
 }
 
 InteractionResponses.applyToClass(ModalSubmitInteraction, [
   "deferUpdate",
-  "update",
   "showModal",
 ]);
 

src/structures/ShowModal.js

@@ -22,7 +22,7 @@ async function showModal(modal, options){
     if (!options.client) throw new Error('CLIENT_REQUIRED');
     if (!options.interaction) throw new Error('INTERACTION_REQUIRED');
     if (!(modal instanceof Modal)) throw new Error('INVALID_MODAL');
-    if (!(options.client instanceof Client)) throw new Error('INVALID_CLIENT');
+    if (!options.client.api) throw new Error('INVALID_CLIENT');
     if (!(options.interaction instanceof Interaction)) throw new Error('INVALID_INTERACTION');
 
     const _modal = modal instanceof Modal ? modal : new Modal(modal, options.client);