feat: modalkit and modal jsx

twlite · twlite · commit 4be77c2d9d08 · 2025-02-08T12:26:01.000+05:45
diff --git a/apps/test-bot/src/commands/misc/prompt.tsx b/apps/test-bot/src/commands/misc/prompt.tsx
@@ -0,0 +1,39 @@
+import CommandKit, {
+  SlashCommandProps,
+  CommandData,
+  Modal,
+  ShortInput,
+  ParagraphInput,
+  OnModalKitSubmit,
+} from 'commandkit';
+import { MessageFlags } from 'discord.js';
+
+export const data: CommandData = {
+  name: 'prompt',
+  description: 'This is a prompt command.',
+};
+
+const handleSubmit: OnModalKitSubmit = async (interaction) => {
+  const name = interaction.fields.getTextInputValue('name');
+  const description = interaction.fields.getTextInputValue('description');
+
+  await interaction.reply({
+    content: `Name: ${name}\nDescription: ${description}`,
+    flags: MessageFlags.Ephemeral,
+  });
+};
+
+export async function run({ interaction }: SlashCommandProps) {
+  const modal = (
+    <Modal title="My Cool Modal" onSubmit={handleSubmit}>
+      <ShortInput customId="name" label="Name" placeholder="John" required />
+      <ParagraphInput
+        customId="description"
+        label="Description"
+        placeholder="This is a description."
+      />
+    </Modal>
+  );
+
+  await interaction.showModal(modal);
+}
diff --git a/packages/commandkit/src/components/button/Button.ts b/packages/commandkit/src/components/button/Button.ts
@@ -6,6 +6,7 @@ import {
   type CommandKitButtonBuilderInteractionCollectorDispatchContextData,
 } from './ButtonKit';
 import { CommandKitElement } from '../common/element';
+import { MaybeArray } from '../common/types';
 
 export type ButtonChildrenLike = string | number | boolean;
 
@@ -20,7 +21,7 @@ export interface ButtonProps {
   onClick?: CommandKitButtonBuilderInteractionCollectorDispatch;
   options?: CommandKitButtonBuilderInteractionCollectorDispatchContextData;
   onEnd?: CommandKitButtonBuilderOnEnd;
-  children?: ButtonChildrenLike[] | ButtonChildrenLike;
+  children?: MaybeArray<ButtonChildrenLike>;
 }
 
 /**
@@ -36,13 +37,17 @@ export function Button(props: ButtonProps): CommandKitElement<'button-kit'> {
 
   // auto-generate customId if not provided (only if onClick is set)
   if (props.onClick) {
-    props.customId ??= crypto.randomUUID();
+    props.customId ??= `buttonkit::${crypto.randomUUID()}`;
   }
 
   if (props.customId) {
     button.setCustomId(props.customId);
   }
 
+  if (props.onClick) {
+    button.onClick(props.onClick, props.options);
+  }
+
   if (props.disabled) {
     button.setDisabled(props.disabled);
   }
@@ -75,10 +80,6 @@ export function Button(props: ButtonProps): CommandKitElement<'button-kit'> {
     );
   }
 
-  if (props.onClick) {
-    button.onClick(props.onClick, props.options);
-  }
-
   if (props.onEnd) {
     button.onEnd(props.onEnd);
   }
diff --git a/packages/commandkit/src/components/button/ButtonKit.ts b/packages/commandkit/src/components/button/ButtonKit.ts
@@ -149,6 +149,11 @@ export class ButtonKit extends ButtonBuilder {
     return this;
   }
 
+  private get customId() {
+    // @ts-ignore
+    return this.data.custom_id ?? this.data.customId;
+  }
+
   #setupInteractionCollector() {
     if (
       this.data.style === ButtonStyle.Link ||
@@ -157,12 +162,7 @@ export class ButtonKit extends ButtonBuilder {
     )
       return;
 
-    const myCustomId =
-      'custom_id' in this.data
-        ? this.data.custom_id
-        : 'customId' in this.data
-          ? this.data.customId
-          : null;
+    const myCustomId = this.customId ?? null;
 
     if (myCustomId === null) {
       throw new TypeError(
@@ -177,12 +177,7 @@ export class ButtonKit extends ButtonBuilder {
       async (interaction) => {
         if (!interaction.isButton()) return;
 
-        const myCustomId =
-          'custom_id' in this.data
-            ? this.data.custom_id
-            : 'customId' in this.data
-              ? this.data.customId
-              : null;
+        const myCustomId = this.customId ?? null;
         const interactionCustomId = interaction.customId;
 
         if (myCustomId && interactionCustomId !== myCustomId) return;
diff --git a/packages/commandkit/src/components/common/element.ts b/packages/commandkit/src/components/common/element.ts
@@ -1,17 +1,22 @@
-import { ActionRowBuilder } from 'discord.js';
+import { ActionRowBuilder, TextInputBuilder } from 'discord.js';
 import type { ButtonKit } from '../button/ButtonKit';
 import { warnUnstable } from '../../utils/warn-unstable';
+import { ModalKit } from '../modal/ModalKit';
 
 export const ElementType = {
   ActionRow: 'action-row',
   Button: 'button-kit',
+  Modal: 'modal',
+  TextInput: 'text-input',
 } as const;
 
 export type ElementType = (typeof ElementType)[keyof typeof ElementType];
 
 export interface CommandKitElementData {
   [ElementType.ActionRow]: ActionRowBuilder;
   [ElementType.Button]: ButtonKit;
+  [ElementType.Modal]: ModalKit;
+  [ElementType.TextInput]: TextInputBuilder;
 }
 
 export type CommandKitElement<Type extends ElementType> =
diff --git a/packages/commandkit/src/components/common/types.ts b/packages/commandkit/src/components/common/types.ts
@@ -0,0 +1 @@
+export type MaybeArray<T> = T | T[];
diff --git a/packages/commandkit/src/components/index.ts b/packages/commandkit/src/components/index.ts
@@ -5,5 +5,11 @@ export * from './action-row/ActionRow';
 export * from './button/ButtonKit';
 export * from './button/Button';
 
+// modals
+export * from './modal/ModalKit';
+export * from './modal/Modal';
+
 // common
 export * from './common/element';
+export * from './common/types';
+export * from './common/EventInterceptor';
diff --git a/packages/commandkit/src/components/modal/Modal.ts b/packages/commandkit/src/components/modal/Modal.ts
@@ -0,0 +1,140 @@
+import { ActionRowBuilder, TextInputBuilder, TextInputStyle } from 'discord.js';
+import { MaybeArray } from '../common/types';
+import { CommandKitElement } from '../common/element';
+import {
+  CommandKitModalBuilderInteractionCollectorDispatchContextData,
+  ModalKit,
+  OnModalKitEnd,
+  OnModalKitSubmit,
+} from './ModalKit';
+
+export interface ModalProps {
+  customId?: string;
+  title: string;
+  children?: MaybeArray<TextInputBuilder | ActionRowBuilder>;
+  onSubmit?: OnModalKitSubmit;
+  onEnd?: OnModalKitEnd;
+  options?: CommandKitModalBuilderInteractionCollectorDispatchContextData;
+}
+
+/**
+ * The modal component.
+ * @param props The modal properties.
+ * @returns The commandkit element.
+ * @example <Modal title="My Modal" onSubmit={onSubmit}>...</Modal>
+ */
+export function Modal(props: ModalProps): CommandKitElement<'modal'> {
+  const modal = new ModalKit();
+
+  if (props.title) {
+    modal.setTitle(props.title);
+  }
+
+  if (props.onSubmit) {
+    props.customId ??= `modalkit::${crypto.randomUUID()}`;
+  }
+
+  if (props.customId) {
+    modal.setCustomId(props.customId);
+  }
+
+  if (props.onSubmit) {
+    modal.onSubmit(props.onSubmit, props.options);
+  }
+
+  if (props.children) {
+    const childs = (
+      Array.isArray(props.children) ? props.children : [props.children]
+    )
+      .map((c) => {
+        if (c instanceof ActionRowBuilder) return c;
+        if (c instanceof TextInputBuilder)
+          return new ActionRowBuilder().addComponents(c);
+      })
+      .filter((c): c is ActionRowBuilder<TextInputBuilder> => c != null);
+
+    modal.addComponents(childs);
+  }
+
+  if (props.onEnd) {
+    modal.onEnd(props.onEnd);
+  }
+
+  return modal;
+}
+
+export interface TextInputProps {
+  customId: string;
+  label: string;
+  placeholder?: string;
+  maxLength?: number;
+  minLength?: number;
+  value?: string;
+  required?: boolean;
+}
+
+/**
+ * The text input component.
+ * @param props The text input properties.
+ * @returns The commandkit element.
+ * @example <TextInput customId="input" label="Input" style={TextInputStyle.Short} />
+ */
+export function TextInput(
+  props: TextInputProps & { style: TextInputStyle },
+): CommandKitElement<'text-input'> {
+  const input = new TextInputBuilder().setStyle(props.style);
+
+  if (props.customId) {
+    input.setCustomId(props.customId);
+  }
+
+  if (props.label) {
+    input.setLabel(props.label);
+  }
+
+  if (props.placeholder) {
+    input.setPlaceholder(props.placeholder);
+  }
+
+  if (props.maxLength) {
+    input.setMaxLength(props.maxLength);
+  }
+
+  if (props.minLength) {
+    input.setMinLength(props.minLength);
+  }
+
+  if (props.value) {
+    input.setValue(props.value);
+  }
+
+  if (props.required) {
+    input.setRequired(props.required);
+  }
+
+  return input;
+}
+
+/**
+ * The short text input component.
+ * @param props The text input properties.
+ * @returns The commandkit element.
+ * @example <ShortInput customId="input" label="Input" />
+ */
+export function ShortInput(
+  props: TextInputProps,
+): CommandKitElement<'text-input'> {
+  return TextInput({ ...props, style: TextInputStyle.Short });
+}
+
+/**
+ * The paragraph text input component.
+ * @param props The text input properties.
+ * @returns The commandkit element.
+ * @example <ParagraphInput customId="input" label="Input" />
+ */
+export function ParagraphInput(
+  props: TextInputProps,
+): CommandKitElement<'text-input'> {
+  return TextInput({ ...props, style: TextInputStyle.Paragraph });
+}
diff --git a/packages/commandkit/src/components/modal/ModalKit.ts b/packages/commandkit/src/components/modal/ModalKit.ts
