chrxmaticc-framework 1.2.1 → 1.4.0

package/core/ChrxComponentsV3.js

@@ -0,0 +1,652 @@
+/**
+ * core/ChrxComponentsV3.js
+ * Components V3 — every Discord component simplified into clean Chrx builders.
+ *
+ * Includes:
+ * - ChrxButton
+ * - ChrxSelectMenu
+ * - ChrxPagination
+ * - ChrxContextMenu
+ * - ChrxMenu
+ * - ChrxForm
+ * - ChrxConfirm
+ */
+
+const {
+  ButtonBuilder,
+  ButtonStyle,
+  ActionRowBuilder,
+  StringSelectMenuBuilder,
+  StringSelectMenuOptionBuilder,
+  ContextMenuCommandBuilder,
+  ApplicationCommandType,
+  EmbedBuilder,
+  ComponentType,
+} = require("discord.js");
+
+// ── Style map ─────────────────────────────────────────────────────────────
+const BUTTON_STYLE_MAP = {
+  primary:   ButtonStyle.Primary,
+  secondary: ButtonStyle.Secondary,
+  success:   ButtonStyle.Success,
+  danger:    ButtonStyle.Danger,
+  link:      ButtonStyle.Link,
+  blurple:   ButtonStyle.Primary,
+  grey:      ButtonStyle.Secondary,
+  gray:      ButtonStyle.Secondary,
+  green:     ButtonStyle.Success,
+  red:       ButtonStyle.Danger,
+};
+
+// ═════════════════════════════════════════════════════════════════════════════
+// ChrxButton
+// ═════════════════════════════════════════════════════════════════════════════
+
+class ChrxButton {
+  /**
+   * @param {object} options
+   * @param {string}   options.label            Button label
+   * @param {string}   [options.style]          "primary"|"secondary"|"success"|"danger"|"link" (default: primary)
+   * @param {string}   [options.id]             Custom ID (not needed for link buttons)
+   * @param {string}   [options.url]            URL for link buttons
+   * @param {string}   [options.emoji]          Emoji for button
+   * @param {boolean}  [options.disabled]       Disable the button
+   * @param {Function} [options.onClick]        Handler (interaction) => void
+   */
+  constructor(options = {}) {
+    if (!options.label) throw new Error("[ChrxButton] label is required.");
+
+    this._options = options;
+    this._handler = options.onClick ?? null;
+
+    const btn = new ButtonBuilder().setLabel(options.label);
+
+    if (options.style === "link" || options.url) {
+      btn.setStyle(ButtonStyle.Link).setURL(options.url);
+    } else {
+      btn.setStyle(BUTTON_STYLE_MAP[options.style ?? "primary"] ?? ButtonStyle.Primary);
+      btn.setCustomId(options.id ?? `chrx-btn-${Math.random().toString(36).slice(2, 9)}`);
+    }
+
+    if (options.emoji)    btn.setEmoji(options.emoji);
+    if (options.disabled) btn.setDisabled(true);
+
+    this._button = btn;
+    this.customId = options.id;
+  }
+
+  /**
+   * Build into an ActionRow ready to send.
+   */
+  toRow() {
+    return new ActionRowBuilder().addComponents(this._button);
+  }
+
+  /**
+   * Send the button with a message and listen for clicks.
+   * Auto cleans up the collector after timeout.
+   *
+   * @param {import("discord.js").CommandInteraction} interaction
+   * @param {object} [options]
+   * @param {string}  [options.content]    Message content
+   * @param {object}  [options.embed]      EmbedBuilder to attach
+   * @param {boolean} [options.ephemeral]
+   * @param {number}  [options.timeout]    Collector timeout in ms (default: 60000)
+   */
+  async send(interaction, options = {}) {
+    const payload = {
+      components: [this.toRow()],
+      ephemeral: options.ephemeral ?? false,
+    };
+    if (options.content) payload.content = options.content;
+    if (options.embed)   payload.embeds  = [options.embed];
+
+    const reply = await interaction.reply({ ...payload, fetchReply: true });
+
+    if (!this._handler) return;
+
+    const collector = reply.createMessageComponentCollector({
+      componentType: ComponentType.Button,
+      time: options.timeout ?? 60000,
+    });
+
+    collector.on("collect", async (i) => {
+      if (i.customId !== (this._options.id ?? this._button.data.custom_id)) return;
+      try {
+        await this._handler(i);
+      } catch (err) {
+        console.error("[ChrxButton] onClick error:", err);
+        i.reply({ content: err.message || "❌ Something went wrong.", ephemeral: true }).catch(() => {});
+      }
+    });
+
+    collector.on("end", () => {
+      reply.edit({ components: [] }).catch(() => {});
+    });
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════════
+// ChrxSelectMenu
+// ═════════════════════════════════════════════════════════════════════════════
+
+class ChrxSelectMenu {
+  /**
+   * @param {object} options
+   * @param {string}   options.id              Custom ID
+   * @param {string}   options.placeholder     Placeholder text
+   * @param {object[]} options.options         Menu options
+   * @param {string}   options.options[].label
+   * @param {string}   options.options[].value
+   * @param {string}   [options.options[].description]
+   * @param {string}   [options.options[].emoji]
+   * @param {boolean}  [options.options[].default]
+   * @param {number}   [options.min]           Min selections (default: 1)
+   * @param {number}   [options.max]           Max selections (default: 1)
+   * @param {Function} [options.onSelect]      Handler (interaction, values) => void
+   */
+  constructor(options = {}) {
+    if (!options.id)          throw new Error("[ChrxSelectMenu] id is required.");
+    if (!options.placeholder) throw new Error("[ChrxSelectMenu] placeholder is required.");
+    if (!options.options?.length) throw new Error("[ChrxSelectMenu] options are required.");
+
+    this._options = options;
+    this._handler = options.onSelect ?? null;
+
+    const menu = new StringSelectMenuBuilder()
+      .setCustomId(options.id)
+      .setPlaceholder(options.placeholder)
+      .setMinValues(options.min ?? 1)
+      .setMaxValues(options.max ?? 1)
+      .addOptions(
+        options.options.map((opt) => {
+          const o = new StringSelectMenuOptionBuilder()
+            .setLabel(opt.label)
+            .setValue(opt.value);
+          if (opt.description) o.setDescription(opt.description);
+          if (opt.emoji)       o.setEmoji(opt.emoji);
+          if (opt.default)     o.setDefault(true);
+          return o;
+        })
+      );
+
+    this._menu = menu;
+  }
+
+  toRow() {
+    return new ActionRowBuilder().addComponents(this._menu);
+  }
+
+  /**
+   * Send the select menu and listen for selections.
+   */
+  async send(interaction, options = {}) {
+    const payload = {
+      components: [this.toRow()],
+      ephemeral: options.ephemeral ?? false,
+    };
+    if (options.content) payload.content = options.content;
+    if (options.embed)   payload.embeds  = [options.embed];
+
+    const reply = await interaction.reply({ ...payload, fetchReply: true });
+
+    if (!this._handler) return;
+
+    const collector = reply.createMessageComponentCollector({
+      componentType: ComponentType.StringSelect,
+      time: options.timeout ?? 60000,
+    });
+
+    collector.on("collect", async (i) => {
+      if (i.customId !== this._options.id) return;
+      try {
+        await this._handler(i, i.values);
+      } catch (err) {
+        console.error("[ChrxSelectMenu] onSelect error:", err);
+        i.reply({ content: err.message || "❌ Something went wrong.", ephemeral: true }).catch(() => {});
+      }
+    });
+
+    collector.on("end", () => {
+      reply.edit({ components: [] }).catch(() => {});
+    });
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════════
+// ChrxPagination
+// ═════════════════════════════════════════════════════════════════════════════
+
+class ChrxPagination {
+  /**
+   * Auto paginated embed system with next/prev buttons.
+   *
+   * @param {object} options
+   * @param {EmbedBuilder[]} options.pages      Array of EmbedBuilders
+   * @param {number}  [options.timeout]         Collector timeout ms (default: 120000)
+   * @param {boolean} [options.ephemeral]
+   * @param {boolean} [options.showPageNumber]  Show "Page X/Y" in footer (default: true)
+   */
+  constructor(options = {}) {
+    if (!options.pages?.length) throw new Error("[ChrxPagination] pages array is required.");
+    this._options = options;
+    this._page    = 0;
+  }
+
+  _getButtons(page, total) {
+    const prev = new ButtonBuilder()
+      .setCustomId("chrx-page-prev")
+      .setLabel("◀")
+      .setStyle(ButtonStyle.Secondary)
+      .setDisabled(page === 0);
+
+    const next = new ButtonBuilder()
+      .setCustomId("chrx-page-next")
+      .setLabel("▶")
+      .setStyle(ButtonStyle.Secondary)
+      .setDisabled(page === total - 1);
+
+    const counter = new ButtonBuilder()
+      .setCustomId("chrx-page-counter")
+      .setLabel(`${page + 1} / ${total}`)
+      .setStyle(ButtonStyle.Primary)
+      .setDisabled(true);
+
+    return new ActionRowBuilder().addComponents(prev, counter, next);
+  }
+
+  _getPage(index) {
+    const page  = this._options.pages[index];
+    const total = this._options.pages.length;
+    if (this._options.showPageNumber !== false) {
+      page.setFooter({ text: `Page ${index + 1} of ${total}` });
+    }
+    return page;
+  }
+
+  /**
+   * Send the paginated embed.
+   */
+  async send(interaction) {
+    const total = this._options.pages.length;
+    const reply = await interaction.reply({
+      embeds: [this._getPage(0)],
+      components: total > 1 ? [this._getButtons(0, total)] : [],
+      ephemeral: this._options.ephemeral ?? false,
+      fetchReply: true,
+    });
+
+    if (total <= 1) return;
+
+    const collector = reply.createMessageComponentCollector({
+      componentType: ComponentType.Button,
+      time: this._options.timeout ?? 120000,
+    });
+
+    collector.on("collect", async (i) => {
+      if (i.user.id !== interaction.user.id) {
+        return i.reply({ content: "❌ These controls aren't for you.", ephemeral: true });
+      }
+
+      if (i.customId === "chrx-page-prev") this._page = Math.max(0, this._page - 1);
+      if (i.customId === "chrx-page-next") this._page = Math.min(total - 1, this._page + 1);
+
+      await i.update({
+        embeds: [this._getPage(this._page)],
+        components: [this._getButtons(this._page, total)],
+      });
+    });
+
+    collector.on("end", () => {
+      reply.edit({ components: [] }).catch(() => {});
+    });
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════════
+// ChrxContextMenu
+// ═════════════════════════════════════════════════════════════════════════════
+
+class ChrxContextMenu {
+  /**
+   * Right click context menu command.
+   *
+   * @param {object} options
+   * @param {string}   options.name    Context menu name
+   * @param {string}   options.type   "user" | "message"
+   * @param {Function} options.run    Handler (interaction) => void
+   */
+  constructor(options = {}) {
+    if (!options.name) throw new Error("[ChrxContextMenu] name is required.");
+    if (!options.type) throw new Error("[ChrxContextMenu] type is required. Use 'user' or 'message'.");
+    if (!options.run)  throw new Error("[ChrxContextMenu] run function is required.");
+
+    const builder = new ContextMenuCommandBuilder()
+      .setName(options.name)
+      .setType(
+        options.type === "user"
+          ? ApplicationCommandType.User
+          : ApplicationCommandType.Message
+      );
+
+    this.data    = builder;
+    this.execute = async (interaction) => {
+      try {
+        await options.run(interaction);
+      } catch (err) {
+        console.error(`[ChrxContextMenu] Error in "${options.name}":`, err);
+        const msg = { content: err.message || "❌ Something went wrong.", ephemeral: true };
+        if (interaction.replied || interaction.deferred) {
+          interaction.followUp(msg).catch(() => {});
+        } else {
+          interaction.reply(msg).catch(() => {});
+        }
+      }
+    };
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════════
+// ChrxMenu
+// ═════════════════════════════════════════════════════════════════════════════
+
+class ChrxMenu {
+  /**
+   * Full interactive menu — combines embed, buttons and select menus together.
+   *
+   * @param {object} options
+   * @param {object}   options.embed              Embed options for ChrxEmbedBuilder.build()
+   * @param {object[]} [options.buttons]          Array of ChrxButton-like option objects
+   * @param {object}   [options.select]           ChrxSelectMenu-like option object
+   * @param {number}   [options.timeout]          Collector timeout ms (default: 60000)
+   * @param {boolean}  [options.ephemeral]
+   */
+  constructor(options = {}) {
+    if (!options.embed) throw new Error("[ChrxMenu] embed is required.");
+    this._options = options;
+  }
+
+  async send(interaction) {
+    const { EmbedBuilder } = require("discord.js");
+    const embed = new EmbedBuilder();
+
+    if (this._options.embed.title)       embed.setTitle(this._options.embed.title);
+    if (this._options.embed.desc)        embed.setDescription(this._options.embed.desc);
+    if (this._options.embed.color)       embed.setColor(this._options.embed.color);
+    if (this._options.embed.footer)      embed.setFooter({ text: this._options.embed.footer });
+    if (this._options.embed.thumbnail)   embed.setThumbnail(this._options.embed.thumbnail);
+    if (this._options.embed.timestamp)   embed.setTimestamp();
+
+    const rows = [];
+
+    // ── Buttons ───────────────────────────────────────────────────────────
+    if (this._options.buttons?.length) {
+      const btnRow = new ActionRowBuilder();
+      const handlers = {};
+
+      for (const btnOpt of this._options.buttons) {
+        const btn = new ButtonBuilder()
+          .setLabel(btnOpt.label)
+          .setStyle(BUTTON_STYLE_MAP[btnOpt.style ?? "primary"] ?? ButtonStyle.Primary)
+          .setCustomId(btnOpt.id ?? `chrx-menu-btn-${Math.random().toString(36).slice(2, 7)}`);
+
+        if (btnOpt.emoji)    btn.setEmoji(btnOpt.emoji);
+        if (btnOpt.disabled) btn.setDisabled(true);
+
+        handlers[btnOpt.id] = btnOpt.onClick;
+        btnRow.addComponents(btn);
+      }
+
+      rows.push(btnRow);
+
+      const reply = await interaction.reply({
+        embeds: [embed],
+        components: rows,
+        ephemeral: this._options.ephemeral ?? false,
+        fetchReply: true,
+      });
+
+      const collector = reply.createMessageComponentCollector({
+        time: this._options.timeout ?? 60000,
+      });
+
+      collector.on("collect", async (i) => {
+        const handler = handlers[i.customId];
+        if (handler) {
+          try {
+            await handler(i);
+          } catch (err) {
+            i.reply({ content: err.message || "❌ Error.", ephemeral: true }).catch(() => {});
+          }
+        }
+      });
+
+      collector.on("end", () => {
+        reply.edit({ components: [] }).catch(() => {});
+      });
+
+      return;
+    }
+
+    // ── Select only ───────────────────────────────────────────────────────
+    if (this._options.select) {
+      const menu = new ChrxSelectMenu(this._options.select);
+      rows.push(menu.toRow());
+      await interaction.reply({
+        embeds: [embed],
+        components: rows,
+        ephemeral: this._options.ephemeral ?? false,
+      });
+      return;
+    }
+
+    // ── Embed only ────────────────────────────────────────────────────────
+    await interaction.reply({
+      embeds: [embed],
+      ephemeral: this._options.ephemeral ?? false,
+    });
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════════
+// ChrxForm
+// ═════════════════════════════════════════════════════════════════════════════
+
+class ChrxForm {
+  /**
+   * Combines a modal AND processes the response in one block.
+   * No need to set up onModalSubmit separately.
+   *
+   * @param {object} options
+   * @param {string}   options.id       Modal ID
+   * @param {string}   options.title    Modal title
+   * @param {object[]} options.inputs   Same as ChrxModalBuilder inputs
+   * @param {Function} options.onSubmit (interaction, values) => void
+   *                   values is an object keyed by input id e.g. { answer: "yes" }
+   */
+  constructor(options = {}) {
+    if (!options.id)       throw new Error("[ChrxForm] id is required.");
+    if (!options.title)    throw new Error("[ChrxForm] title is required.");
+    if (!options.inputs?.length) throw new Error("[ChrxForm] inputs are required.");
+    if (!options.onSubmit) throw new Error("[ChrxForm] onSubmit is required.");
+
+    this._options = options;
+    this._modal   = null;
+
+    // Build the modal
+    const {
+      ModalBuilder,
+      TextInputBuilder,
+      TextInputStyle,
+      ActionRowBuilder,
+    } = require("discord.js");
+
+    const STYLE_MAP = {
+      short:     TextInputStyle.Short,
+      paragraph: TextInputStyle.Paragraph,
+      long:      TextInputStyle.Paragraph,
+    };
+
+    const modal = new ModalBuilder()
+      .setCustomId(options.id)
+      .setTitle(options.title);
+
+    const rows = options.inputs.map((input) => {
+      const textInput = new TextInputBuilder()
+        .setCustomId(input.id)
+        .setLabel(input.label)
+        .setStyle(STYLE_MAP[input.type ?? "short"] ?? TextInputStyle.Short);
+
+      if (input.required)    textInput.setRequired(input.required);
+      if (input.placeholder) textInput.setPlaceholder(input.placeholder);
+      if (input.value)       textInput.setValue(input.value);
+      if (input.minLength)   textInput.setMinLength(input.minLength);
+      if (input.maxLength)   textInput.setMaxLength(input.maxLength);
+
+      return new ActionRowBuilder().addComponents(textInput);
+    });
+
+    modal.addComponents(...rows);
+    this._modal = modal;
+  }
+
+  /**
+   * Show the form and handle submission automatically.
+   * @param {import("discord.js").CommandInteraction} interaction
+   */
+  async show(interaction) {
+    await interaction.showModal(this._modal);
+
+    try {
+      const submitted = await interaction.awaitModalSubmit({
+        time: 300000, // 5 minutes to fill out the form
+        filter: (i) => i.customId === this._options.id && i.user.id === interaction.user.id,
+      });
+
+      // Build values object keyed by input id
+      const values = {};
+      for (const input of this._options.inputs) {
+        values[input.id] = submitted.fields.getTextInputValue(input.id);
+      }
+
+      try {
+        await this._options.onSubmit(submitted, values);
+      } catch (err) {
+        console.error(`[ChrxForm] onSubmit error:`, err);
+        const msg = { content: err.message || "❌ Something went wrong.", ephemeral: true };
+        if (submitted.replied || submitted.deferred) {
+          submitted.followUp(msg).catch(() => {});
+        } else {
+          submitted.reply(msg).catch(() => {});
+        }
+      }
+    } catch {
+      // User didn't submit in time — silently ignore
+    }
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════════
+// ChrxConfirm
+// ═════════════════════════════════════════════════════════════════════════════
+
+class ChrxConfirm {
+  /**
+   * Yes/No confirmation prompt in two lines.
+   *
+   * @param {object} options
+   * @param {string}   options.question          Question to ask
+   * @param {Function} options.onConfirm         Called when user clicks Yes
+   * @param {Function} [options.onCancel]        Called when user clicks No
+   * @param {string}   [options.confirmLabel]    Yes button label (default: "Confirm")
+   * @param {string}   [options.cancelLabel]     No button label (default: "Cancel")
+   * @param {string}   [options.color]           Embed color (default: #5865F2)
+   * @param {boolean}  [options.ephemeral]
+   * @param {number}   [options.timeout]         ms before auto cancel (default: 30000)
+   */
+  constructor(options = {}) {
+    if (!options.question)  throw new Error("[ChrxConfirm] question is required.");
+    if (!options.onConfirm) throw new Error("[ChrxConfirm] onConfirm is required.");
+    this._options = options;
+  }
+
+  /**
+   * Send the confirmation prompt.
+   */
+  async send(interaction) {
+    const confirmId = `chrx-confirm-yes-${Math.random().toString(36).slice(2, 7)}`;
+    const cancelId  = `chrx-confirm-no-${Math.random().toString(36).slice(2, 7)}`;
+
+    const embed = new EmbedBuilder()
+      .setColor(this._options.color ?? "#5865F2")
+      .setDescription(`❓ ${this._options.question}`);
+
+    const row = new ActionRowBuilder().addComponents(
+      new ButtonBuilder()
+        .setCustomId(confirmId)
+        .setLabel(this._options.confirmLabel ?? "Confirm")
+        .setStyle(ButtonStyle.Success),
+      new ButtonBuilder()
+        .setCustomId(cancelId)
+        .setLabel(this._options.cancelLabel ?? "Cancel")
+        .setStyle(ButtonStyle.Danger)
+    );
+
+    const reply = await interaction.reply({
+      embeds: [embed],
+      components: [row],
+      ephemeral: this._options.ephemeral ?? false,
+      fetchReply: true,
+    });
+
+    const collector = reply.createMessageComponentCollector({
+      componentType: ComponentType.Button,
+      time: this._options.timeout ?? 30000,
+      max: 1,
+    });
+
+    collector.on("collect", async (i) => {
+      if (i.user.id !== interaction.user.id) {
+        return i.reply({ content: "❌ This isn't your confirmation.", ephemeral: true });
+      }
+
+      try {
+        if (i.customId === confirmId) {
+          await this._options.onConfirm(i);
+        } else {
+          if (this._options.onCancel) {
+            await this._options.onCancel(i);
+          } else {
+            await i.update({ embeds: [embed.setDescription("❌ Cancelled.").setColor("#ED4245")], components: [] });
+          }
+        }
+      } catch (err) {
+        console.error("[ChrxConfirm] Error:", err);
+        i.reply({ content: err.message || "❌ Something went wrong.", ephemeral: true }).catch(() => {});
+      }
+    });
+
+    collector.on("end", (collected) => {
+      if (collected.size === 0) {
+        reply.edit({
+          embeds: [embed.setDescription("⏱ Confirmation timed out.").setColor("#ED4245")],
+          components: [],
+        }).catch(() => {});
+      }
+    });
+  }
+}
+
+// ═════════════════════════════════════════════════════════════════════════════
+// Exports
+// ═════════════════════════════════════════════════════════════════════════════
+
+module.exports = {
+  ChrxButton,
+  ChrxSelectMenu,
+  ChrxPagination,
+  ChrxContextMenu,
+  ChrxMenu,
+  ChrxForm,
+  ChrxConfirm,
+};