docs: update <ActionRow /> examples

Author: notunderctrl

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

@@ -4,47 +4,75 @@ import {
   CommandData,
   OnButtonKitClick,
   ChatInputCommandContext,
+  StringSelectMenu,
+  StringSelectMenuOption,
 } from 'commandkit';
-import { MessageFlags } from 'discord.js';
+import { ButtonStyle, MessageFlags } from 'discord.js';
 
 export const command: CommandData = {
   name: 'commandkit',
   description: 'This is a commandkit command.',
 };
 
-const handleButtonClick: OnButtonKitClick = async (interaction) => {
-  const { customId } = interaction;
+// const handleButtonClick: OnButtonKitClick = async (interaction) => {
+//   const { customId } = interaction;
 
-  await interaction.reply({
-    content: `You clicked the "${customId}" button!`,
-    flags: MessageFlags.Ephemeral,
-  });
-};
+//   await interaction.reply({
+//     content: `You clicked the "${customId}" button!`,
+//     flags: MessageFlags.Ephemeral,
+//   });
+// };
 
-function ButtonGrid() {
-  return (
-    <>
-      {Array.from({ length: 5 }, (_, i) => (
-        <ActionRow>
-          {Array.from({ length: 5 }, (_, j) => (
-            <Button
-              onClick={handleButtonClick}
-              customId={`button ${i * 5 + j + 1}`}
-            >
-              {i * 5 + j + 1}
-            </Button>
-          ))}
-        </ActionRow>
-      ))}
-    </>
-  );
-}
+// function ButtonGrid() {
+//   return (
+//     <>
+//       {Array.from({ length: 5 }, (_, i) => (
+//         <ActionRow>
+//           {Array.from({ length: 5 }, (_, j) => (
+//             <Button
+//               onClick={handleButtonClick}
+//               customId={`button ${i * 5 + j + 1}`}
+//             >
+//               {i * 5 + j + 1}
+//             </Button>
+//           ))}
+//         </ActionRow>
+//       ))}
+//     </>
+//   );
+// }
 
 export async function chatInput({ interaction }: ChatInputCommandContext) {
-  await interaction.deferReply();
+  // await interaction.deferReply();
+
+  // await interaction.editReply({
+  //   content: 'Click the button below to test CommandKit buttons.',
+  //   components: <ButtonGrid />,
+  // });
 
-  await interaction.editReply({
-    content: 'Click the button below to test CommandKit buttons.',
-    components: <ButtonGrid />,
+  const firstRow = (
+    <ActionRow>
+      <Button style={ButtonStyle.Primary} customId="button-1">
+        Primary Action
+      </Button>
+      <Button style={ButtonStyle.Secondary} customId="button-2">
+        Secondary Action
+      </Button>
+    </ActionRow>
+  );
+
+  const secondRow = (
+    <ActionRow>
+      <Button style={ButtonStyle.Success} customId="button-3">
+        Confirm
+      </Button>
+      <Button style={ButtonStyle.Danger} customId="button-4">
+        Cancel
+      </Button>
+    </ActionRow>
+  );
+
+  await interaction.reply({
+    components: [firstRow, secondRow],
   });
 }

apps/website/docs/guide/04-jsx-components/02-discord-components-v1/01-action-row.mdx

@@ -8,16 +8,15 @@ components like buttons and select menus together in a single row.
 ## Basic usage
 
 ```tsx title="src/app/commands/example.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { ActionRow, Button } from 'commandkit';
+import { type ChatInputCommand, ActionRow, Button } from 'commandkit';
 
 export const chatInput: ChatInputCommand = async ({
   interaction,
 }) => {
   const row = (
     <ActionRow>
-      <Button>Click me!</Button>
-      <Button>Another button</Button>
+      <Button customId="button-1">Click me!</Button>
+      <Button customId="button-2">Another button</Button>
     </ActionRow>
   );
 
@@ -31,8 +30,8 @@ export const chatInput: ChatInputCommand = async ({
 ## With select menus
 
 ```tsx title="src/app/commands/select-example.tsx"
-import type { ChatInputCommand } from 'commandkit';
 import {
+  type ChatInputCommand,
   ActionRow,
   StringSelectMenu,
   StringSelectMenuOption,
@@ -63,23 +62,31 @@ You can use multiple ActionRows in a single message to organize your
 components:
 
 ```tsx title="src/app/commands/multiple-rows.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { ActionRow, Button } from 'commandkit';
+import { type ChatInputCommand, ActionRow, Button } from 'commandkit';
+import { ButtonStyle } from 'discord.js';
 
 export const chatInput: ChatInputCommand = async ({
   interaction,
 }) => {
   const firstRow = (
     <ActionRow>
-      <Button style="primary">Primary Action</Button>
-      <Button style="secondary">Secondary Action</Button>
+      <Button style={ButtonStyle.Primary} customId="button-1">
+        Primary Action
+      </Button>
+      <Button style={ButtonStyle.Secondary} customId="button-2">
+        Secondary Action
+      </Button>
     </ActionRow>
   );
 
   const secondRow = (
     <ActionRow>
-      <Button style="success">Confirm</Button>
-      <Button style="danger">Cancel</Button>
+      <Button style={ButtonStyle.Success} customId="button-3">
+        Confirm
+      </Button>
+      <Button style={ButtonStyle.Danger} customId="button-4">
+        Cancel
+      </Button>
     </ActionRow>
   );