Merge pull request #574 from underctrl-io/label-and-poll

feat: label and poll jsx components

Author: twlite

apps/test-bot/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@types/ms": "^2.1.0",
+    "cross-env": "^10.1.0",
     "tsx": "^4.7.0"
   }
 }

apps/test-bot/src/app/commands/(general)/poll.tsx

@@ -0,0 +1,27 @@
+import {
+  Poll,
+  PollQuestion,
+  PollAnswer,
+  CommandData,
+  ChatInputCommand,
+} from 'commandkit';
+import { PollData } from 'discord.js';
+
+export const command: CommandData = {
+  name: 'poll',
+  description: 'Create a poll',
+};
+
+export const chatInput: ChatInputCommand = async (ctx) => {
+  const poll: PollData = (
+    <Poll>
+      <PollQuestion>What's your favorite color?</PollQuestion>
+      <PollAnswer emoji="🟥">Red</PollAnswer>
+      <PollAnswer emoji="🟦">Blue</PollAnswer>
+      <PollAnswer emoji="🟩">Green</PollAnswer>
+      <PollAnswer>Other</PollAnswer>
+    </Poll>
+  );
+
+  await ctx.interaction.reply({ poll });
+};

apps/test-bot/src/app/commands/(interactions)/+middleware.ts

@@ -4,8 +4,6 @@ import { MessageFlags } from 'discord.js';
 export function beforeExecute(ctx: MiddlewareContext) {
   Logger.info('Pre-command middleware');
 
-  console.log({ isAI: ctx.ai });
-
   const user = ctx.isInteraction() ? ctx.interaction.user : ctx.message.author;
 
   if (ctx.commandName === 'prompt' && user.id === '159985870458322944') {

apps/test-bot/src/app/commands/(interactions)/prompt.tsx

@@ -3,11 +3,14 @@ import {
   Modal,
   ShortInput,
   ParagraphInput,
+  Label,
   OnModalKitSubmit,
   MessageCommandContext,
   ChatInputCommandContext,
+  StringSelectMenu,
+  StringSelectMenuOption,
 } from 'commandkit';
-import { MessageFlags } from 'discord.js';
+import { ComponentType, MessageFlags } from 'discord.js';
 
 export const command: CommandData = {
   name: 'prompt',
@@ -17,9 +20,10 @@ export const command: CommandData = {
 const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
   const name = interaction.fields.getTextInputValue('name');
   const description = interaction.fields.getTextInputValue('description');
+  const select = interaction.fields.getField('select');
 
   await interaction.reply({
-    content: `Name: ${name}\nDescription: ${description}`,
+    content: `Name: ${name}\nDescription: ${description}\nSelect: ${select}`,
     flags: MessageFlags.Ephemeral,
   });
 
@@ -28,13 +32,38 @@ const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
 
 export async function chatInput(ctx: ChatInputCommandContext) {
   const modal = (
-    <Modal title={'Modal'} onSubmit={handleSubmit}>
-      <ShortInput customId="name" label="Name" placeholder="John" required />
-      <ParagraphInput
-        customId="description"
-        label={'Description'}
-        placeholder={'Enter a description here...'}
-      />
+    <Modal title="Modal" onSubmit={handleSubmit}>
+      <Label label="Name" description="Enter your name">
+        <ShortInput customId="name" placeholder="John Doe" required />
+      </Label>
+      <Label label="Description" description="Enter a description here...">
+        <ParagraphInput
+          customId="description"
+          placeholder="Lorem ipsum dolor sit amet..."
+        />
+      </Label>
+      <Label label="Select" description="Select an option">
+        <StringSelectMenu customId="select">
+          <StringSelectMenuOption
+            label="Option 1"
+            value="option1"
+            description="This is the first option"
+            emoji="👍"
+          />
+          <StringSelectMenuOption
+            label="Option 2"
+            value="option2"
+            description="This is the second option"
+            emoji="👍"
+          />
+          <StringSelectMenuOption
+            label="Option 3"
+            value="option3"
+            description="This is the third option"
+            emoji="👍"
+          />
+        </StringSelectMenu>
+      </Label>
     </Modal>
   );
 

apps/website/docs/api-reference/commandkit/classes/button-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ButtonKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/button/ButtonKit.ts" sourceLine="64" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/button/ButtonKit.ts" sourceLine="64" packageName="commandkit" />
 
 A builder for creating buttons with additional features like interaction collectors and event handling.
 

apps/website/docs/api-reference/commandkit/classes/channel-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ChannelSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/ChannelSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/ChannelSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
 
 A builder for creating channel select menus with additional features like interaction collectors and event handling.
 This class extends the ChannelSelectMenuBuilder from discord.js and adds methods for handling interactions.

apps/website/docs/api-reference/commandkit/classes/mentionable-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## MentionableSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/MentionableSelectMenuKit.ts" sourceLine="35" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/MentionableSelectMenuKit.ts" sourceLine="35" packageName="commandkit" />
 
 
 

apps/website/docs/api-reference/commandkit/classes/modal-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ModalKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/modal/ModalKit.ts" sourceLine="65" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/ModalKit.ts" sourceLine="65" packageName="commandkit" />
 
 A builder for creating modals with additional features like interaction collectors and event handling.
 This class extends the ModalBuilder from discord.js and adds methods for handling interactions.

apps/website/docs/api-reference/commandkit/classes/role-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## RoleSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/RoleSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/RoleSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
 
 A builder for creating role select menus with additional features like interaction collectors and event handling.
 This class extends the RoleSelectMenuBuilder from discord.js and adds methods for handling interactions.

apps/website/docs/api-reference/commandkit/classes/string-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## StringSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/StringSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/StringSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
 
 A builder for creating string select menus with additional features like interaction collectors and event handling.
 This class extends the StringSelectMenuBuilder from discord.js and adds methods for handling interactions.