Skip to content

Commit 5a093db

Browse files
notunderctrlnotunderctrl
committed
document jsx components
1 parent 0c3972a commit 5a093db

File tree

11 files changed

+1059
-7
lines changed

11 files changed

+1059
-7
lines changed

‎apps/website/docs/guide/04-jsx-components/01-using-jsx.mdx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,67 @@
11
---
22
title: Using JSX
33
---
4+
5+
CommandKit provides first-class JSX support for both TypeScript and
6+
JavaScript projects. This allows you to write Discord message
7+
components using a familiar and intuitive syntax if you're already
8+
familiar with React.
9+
10+
## Setup
11+
12+
CommandKit automatically configures JSX support in your project. If
13+
you are doing a manual setup, ensure you have the following in your
14+
`tsconfig.json` or `jsconfig.json`:
15+
16+
```json
17+
{
18+
"compilerOptions": {
19+
"jsx": "react-jsx",
20+
"jsxImportSource": "commandkit"
21+
}
22+
}
23+
```
24+
25+
## Available components
26+
27+
CommandKit provides JSX versions for the following Discord.js
28+
builders:
29+
30+
- [`ActionRow`](./02-discord-components-v1/01-action-row.mdx)
31+
- [`Button`](./02-discord-components-v1/02-button.mdx)
32+
- [`SelectMenu`](./02-discord-components-v1/03-select-menu.mdx)
33+
- [`Modal`](./02-discord-components-v1/04-modal.mdx)
34+
- [`TextDisplay`](./03-discord-components-v2/01-text-display.mdx)
35+
- [`Container`](./03-discord-components-v2/02-container.mdx)
36+
- [`MediaGallery`](./03-discord-components-v2/03-media-gallery.mdx)
37+
- [`Separator`](./03-discord-components-v2/04-section-separator.mdx)
38+
- [`File`](./03-discord-components-v2/05-file.mdx)
39+
40+
## Example usage
41+
42+
```tsx
43+
import { Button, ActionRow } from 'commandkit';
44+
45+
const message = (
46+
<Container>
47+
<TextDisplay>Welcome to our server!</TextDisplay>
48+
<ActionRow>
49+
<Button style="primary">Click me!</Button>
50+
</ActionRow>
51+
</Container>
52+
);
53+
```
54+
55+
## JSX fragments
56+
57+
CommandKit fully supports JSX fragments for grouping multiple elements
58+
without adding extra nodes:
59+
60+
```tsx
61+
const elements = (
62+
<>
63+
<TextDisplay>First message</TextDisplay>
64+
<TextDisplay>Second message</TextDisplay>
65+
</>
66+
);
67+
```

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

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,91 @@
11
---
2-
title: Action row
2+
title: Action Row
33
---
4+
5+
The `ActionRow` component is a container that groups interactive
6+
components like buttons and select menus together in a single row.
7+
8+
## Basic usage
9+
10+
```tsx title="src/app/commands/example.ts"
11+
import type { ChatInputCommand } from 'commandkit';
12+
import { ActionRow, Button } from 'commandkit';
13+
14+
export const chatInput: ChatInputCommand = async ({
15+
interaction,
16+
}) => {
17+
const row = (
18+
<ActionRow>
19+
<Button>Click me!</Button>
20+
<Button>Another button</Button>
21+
</ActionRow>
22+
);
23+
24+
await interaction.reply({
25+
content: 'Choose an option:',
26+
components: [row],
27+
});
28+
};
29+
```
30+
31+
## With select menus
32+
33+
```tsx title="src/app/commands/select-example.ts"
34+
import type { ChatInputCommand } from 'commandkit';
35+
import {
36+
ActionRow,
37+
StringSelectMenu,
38+
StringSelectMenuOption,
39+
} from 'commandkit';
40+
41+
export const chatInput: ChatInputCommand = async ({
42+
interaction,
43+
}) => {
44+
const row = (
45+
<ActionRow>
46+
<StringSelectMenu placeholder="Choose an option">
47+
<StringSelectMenuOption label="Option 1" value="1" />
48+
<StringSelectMenuOption label="Option 2" value="2" />
49+
</StringSelectMenu>
50+
</ActionRow>
51+
);
52+
53+
await interaction.reply({
54+
content: 'Select from the dropdown:',
55+
components: [row],
56+
});
57+
};
58+
```
59+
60+
## Multiple action rows
61+
62+
You can use multiple ActionRows in a single message to organize your
63+
components:
64+
65+
```tsx title="src/app/commands/multiple-rows.ts"
66+
import type { ChatInputCommand } from 'commandkit';
67+
import { ActionRow, Button } from 'commandkit';
68+
69+
export const chatInput: ChatInputCommand = async ({
70+
interaction,
71+
}) => {
72+
const firstRow = (
73+
<ActionRow>
74+
<Button style="primary">Primary Action</Button>
75+
<Button style="secondary">Secondary Action</Button>
76+
</ActionRow>
77+
);
78+
79+
const secondRow = (
80+
<ActionRow>
81+
<Button style="success">Confirm</Button>
82+
<Button style="danger">Cancel</Button>
83+
</ActionRow>
84+
);
85+
86+
await interaction.reply({
87+
content: 'Multiple action rows:',
88+
components: [firstRow, secondRow],
89+
});
90+
};
91+
```

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

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,170 @@
11
---
22
title: Button
33
---
4+
5+
The `Button` component allows you to create interactive buttons in
6+
your Discord messages. Buttons can have different styles, labels, and
7+
emojis.
8+
9+
## Basic usage
10+
11+
```tsx title="src/app/commands/button-example.ts"
12+
import type { ChatInputCommand } from 'commandkit';
13+
import { ActionRow, Button } from 'commandkit';
14+
15+
export const chatInput: ChatInputCommand = async ({
16+
interaction,
17+
}) => {
18+
const button = (
19+
<ActionRow>
20+
<Button>Click me!</Button>
21+
</ActionRow>
22+
);
23+
24+
await interaction.reply({
25+
content: "Here's a button:",
26+
components: [button],
27+
});
28+
};
29+
```
30+
31+
## Button styles
32+
33+
Discord provides several built-in button styles:
34+
35+
```tsx title="src/app/commands/button-styles.ts"
36+
import type { ChatInputCommand } from 'commandkit';
37+
import { ActionRow, Button } from 'commandkit';
38+
39+
export const chatInput: ChatInputCommand = async ({
40+
interaction,
41+
}) => {
42+
const buttons = (
43+
<ActionRow>
44+
<Button style="primary">Primary</Button>
45+
<Button style="secondary">Secondary</Button>
46+
<Button style="success">Success</Button>
47+
<Button style="danger">Danger</Button>
48+
</ActionRow>
49+
);
50+
51+
await interaction.reply({
52+
content: 'Different button styles:',
53+
components: [buttons],
54+
});
55+
};
56+
```
57+
58+
## Link buttons
59+
60+
Link buttons redirect users to external URLs:
61+
62+
```tsx title="src/app/commands/link-button.ts"
63+
import type { ChatInputCommand } from 'commandkit';
64+
import { ActionRow, Button } from 'commandkit';
65+
66+
export const chatInput: ChatInputCommand = async ({
67+
interaction,
68+
}) => {
69+
const linkButton = (
70+
<ActionRow>
71+
<Button style="link" url="https://discord.com">
72+
Visit Discord
73+
</Button>
74+
</ActionRow>
75+
);
76+
77+
await interaction.reply({
78+
content: 'Click to visit Discord:',
79+
components: [linkButton],
80+
});
81+
};
82+
```
83+
84+
## Buttons with emojis
85+
86+
Add emojis to make your buttons more visually appealing:
87+
88+
```tsx title="src/app/commands/emoji-button.ts"
89+
import type { ChatInputCommand } from 'commandkit';
90+
import { ActionRow, Button } from 'commandkit';
91+
92+
export const chatInput: ChatInputCommand = async ({
93+
interaction,
94+
}) => {
95+
const emojiButton = (
96+
<ActionRow>
97+
<Button emoji="🎮">Play Game</Button>
98+
<Button emoji="⚙️">Settings</Button>
99+
</ActionRow>
100+
);
101+
102+
await interaction.reply({
103+
content: 'Buttons with emojis:',
104+
components: [emojiButton],
105+
});
106+
};
107+
```
108+
109+
## Disabled buttons
110+
111+
Disable buttons to prevent interaction:
112+
113+
```tsx title="src/app/commands/disabled-button.ts"
114+
import type { ChatInputCommand } from 'commandkit';
115+
import { ActionRow, Button } from 'commandkit';
116+
117+
export const chatInput: ChatInputCommand = async ({
118+
interaction,
119+
}) => {
120+
const disabledButton = (
121+
<ActionRow>
122+
<Button disabled>Cannot Click</Button>
123+
<Button>Can Click</Button>
124+
</ActionRow>
125+
);
126+
127+
await interaction.reply({
128+
content: 'Disabled vs enabled buttons:',
129+
components: [disabledButton],
130+
});
131+
};
132+
```
133+
134+
## Handling button clicks
135+
136+
Handle button interactions with the `onClick` prop:
137+
138+
```tsx title="src/app/commands/interactive-button.ts"
139+
import type { ChatInputCommand, OnButtonKitClick } from 'commandkit';
140+
import { ActionRow, Button } from 'commandkit';
141+
import { MessageFlags } from 'discord.js';
142+
143+
const handleClick: OnButtonKitClick = async (
144+
interaction,
145+
context,
146+
) => {
147+
await interaction.reply({
148+
content: 'Button clicked!',
149+
flags: MessageFlags.Ephemeral,
150+
});
151+
152+
// Clean up the button context
153+
context.dispose();
154+
};
155+
156+
export const chatInput: ChatInputCommand = async ({
157+
interaction,
158+
}) => {
159+
const interactiveButton = (
160+
<ActionRow>
161+
<Button onClick={handleClick}>Click me!</Button>
162+
</ActionRow>
163+
);
164+
165+
await interaction.reply({
166+
content: 'Click the button to see it work:',
167+
components: [interactiveButton],
168+
});
169+
};
170+
```

0 commit comments

Comments
 (0)