docs: update Modal component example

Author: notunderctrl

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

@@ -8,6 +8,10 @@ import {
   StringSelectMenuOption,
   OnStringSelectMenuKitSubmit,
   ChatInputCommand,
+  OnModalKitSubmit,
+  Modal,
+  ShortInput,
+  ParagraphInput,
 } from 'commandkit';
 import { ButtonStyle, MessageFlags } from 'discord.js';
 
@@ -44,37 +48,34 @@ export const command: CommandData = {
 //   );
 // }
 
-const handleSelect: OnStringSelectMenuKitSubmit = async (
-  interaction,
-  context,
-) => {
-  const selections = interaction.values;
+const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
+  const name = interaction.fields.getTextInputValue('name');
+  const description = interaction.fields.getTextInputValue('description');
+
   await interaction.reply({
-    content: `You selected: ${selections.join(', ')}`,
+    content: `**Profile Created!**\n**Name:** ${name}\n**Description:** ${description}`,
     flags: MessageFlags.Ephemeral,
   });
+
   context.dispose();
 };
 
 export const chatInput: ChatInputCommand = async ({ interaction }) => {
-  const selectMenu = (
-    <ActionRow>
-      <StringSelectMenu
-        placeholder="Choose multiple options"
-        minValues={1}
-        maxValues={3}
-        onSelect={handleSelect}
-      >
-        <StringSelectMenuOption label="Pizza" value="pizza" emoji="🍕" />
-        <StringSelectMenuOption label="Burger" value="burger" emoji="🍔" />
-        <StringSelectMenuOption label="Pasta" value="pasta" emoji="🍝" />
-        <StringSelectMenuOption label="Sushi" value="sushi" emoji="🍣" />
-      </StringSelectMenu>
-    </ActionRow>
+  const modal = (
+    <Modal title="User Profile" onSubmit={handleSubmit}>
+      <ShortInput
+        customId="name"
+        label="Name"
+        placeholder="Enter your name"
+        required
+      />
+      <ParagraphInput
+        customId="description"
+        label="Description"
+        placeholder="Tell us about yourself"
+      />
+    </Modal>
   );
 
-  await interaction.reply({
-    content: 'Select your favorite foods (1-3 options):',
-    components: [selectMenu],
-  });
+  await interaction.showModal(modal);
 };

apps/website/docs/guide/04-jsx-components/02-discord-components-v1/02-button.mdx

@@ -29,7 +29,8 @@ export const chatInput: ChatInputCommand = async ({
 
 ## Button styles
 
-Discord provides several built-in button styles:
+Discord provides several button styles that you can import from the
+[`discord.js`](https://discord.js.org) package:
 
 ```tsx title="src/app/commands/button-styles.tsx"
 import { type ChatInputCommand, ActionRow, Button } from 'commandkit';

apps/website/docs/guide/04-jsx-components/02-discord-components-v1/04-modal.mdx

@@ -8,8 +8,13 @@ appear as popups in Discord.
 ## Basic usage
 
 ```tsx title="src/app/commands/user-profile.tsx"
-import type { ChatInputCommand, OnModalKitSubmit } from 'commandkit';
-import { Modal, ShortInput, ParagraphInput } from 'commandkit';
+import {
+  type ChatInputCommand,
+  type OnModalKitSubmit,
+  Modal,
+  ShortInput,
+  ParagraphInput,
+} from 'commandkit';
 import { MessageFlags } from 'discord.js';
 
 const handleSubmit: OnModalKitSubmit = async (
@@ -25,6 +30,7 @@ const handleSubmit: OnModalKitSubmit = async (
     flags: MessageFlags.Ephemeral,
   });
 
+  // Clean up the modal context
   context.dispose();
 };
 
@@ -50,94 +56,3 @@ export const chatInput: ChatInputCommand = async ({
   await interaction.showModal(modal);
 };
 ```
-
-## Input types
-
-### Short input
-
-For single-line text input:
-
-```tsx title="src/app/commands/username.tsx"
-import type { ChatInputCommand, OnModalKitSubmit } from 'commandkit';
-import { Modal, ShortInput } from 'commandkit';
-import { MessageFlags } from 'discord.js';
-
-const handleSubmit: OnModalKitSubmit = async (
-  interaction,
-  context,
-) => {
-  const username = interaction.fields.getTextInputValue('username');
-
-  await interaction.reply({
-    content: `Username set to: ${username}`,
-    flags: MessageFlags.Ephemeral,
-  });
-
-  context.dispose();
-};
-
-export const chatInput: ChatInputCommand = async ({
-  interaction,
-}) => {
-  const modal = (
-    <Modal title="Set Username" onSubmit={handleSubmit}>
-      <ShortInput
-        customId="username"
-        label="Username"
-        placeholder="Enter username"
-        required
-        minLength={3}
-        maxLength={20}
-      />
-    </Modal>
-  );
-
-  await interaction.showModal(modal);
-};
-```
-
-### Paragraph input
-
-For multi-line text input:
-
-```tsx title="src/app/commands/feedback.tsx"
-import type { ChatInputCommand, OnModalKitSubmit } from 'commandkit';
-import { Modal, ParagraphInput } from 'commandkit';
-import { MessageFlags } from 'discord.js';
-
-const handleSubmit: OnModalKitSubmit = async (
-  interaction,
-  context,
-) => {
-  const feedback = interaction.fields.getTextInputValue('feedback');
-
-  await interaction.reply({
-    content: "Thank you for your feedback! We'll review it soon.",
-    flags: MessageFlags.Ephemeral,
-  });
-
-  // Here you could save the feedback to a database
-  console.log(`Feedback received: ${feedback}`);
-
-  context.dispose();
-};
-
-export const chatInput: ChatInputCommand = async ({
-  interaction,
-}) => {
-  const modal = (
-    <Modal title="Feedback Form" onSubmit={handleSubmit}>
-      <ParagraphInput
-        customId="feedback"
-        label="Your Feedback"
-        placeholder="What do you think about our service?"
-        required
-        minLength={10}
-        maxLength={1000}
-      />
-    </Modal>
-  );
-
-  await interaction.showModal(modal);
-};
-```