Skip to content

Commit 2f00bc4

Browse files
twlitetwlite
committed
feat: add label and poll jsx components
1 parent 605a8e7 commit 2f00bc4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+777
-97
lines changed

‎apps/test-bot/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
},
2727
"devDependencies": {
2828
"@types/ms": "^2.1.0",
29+
"cross-env": "^10.1.0",
2930
"tsx": "^4.7.0"
3031
}
31-
}
32+
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {
2+
Poll,
3+
PollQuestion,
4+
PollAnswer,
5+
CommandData,
6+
ChatInputCommand,
7+
} from 'commandkit';
8+
import { PollData } from 'discord.js';
9+
10+
export const command: CommandData = {
11+
name: 'poll',
12+
description: 'Create a poll',
13+
};
14+
15+
export const chatInput: ChatInputCommand = async (ctx) => {
16+
const poll: PollData = (
17+
<Poll>
18+
<PollQuestion>What's your favorite color?</PollQuestion>
19+
<PollAnswer emoji="🟥">Red</PollAnswer>
20+
<PollAnswer emoji="🟦">Blue</PollAnswer>
21+
<PollAnswer emoji="🟩">Green</PollAnswer>
22+
<PollAnswer>Other</PollAnswer>
23+
</Poll>
24+
);
25+
26+
await ctx.interaction.reply({ poll });
27+
};

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import { MessageFlags } from 'discord.js';
44
export function beforeExecute(ctx: MiddlewareContext) {
55
Logger.info('Pre-command middleware');
66

7-
console.log({ isAI: ctx.ai });
8-
97
const user = ctx.isInteraction() ? ctx.interaction.user : ctx.message.author;
108

119
if (ctx.commandName === 'prompt' && user.id === '159985870458322944') {

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

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import {
33
Modal,
44
ShortInput,
55
ParagraphInput,
6+
Label,
67
OnModalKitSubmit,
78
MessageCommandContext,
89
ChatInputCommandContext,
10+
StringSelectMenu,
11+
StringSelectMenuOption,
912
} from 'commandkit';
10-
import { MessageFlags } from 'discord.js';
13+
import { ComponentType, MessageFlags } from 'discord.js';
1114

1215
export const command: CommandData = {
1316
name: 'prompt',
@@ -17,9 +20,10 @@ export const command: CommandData = {
1720
const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
1821
const name = interaction.fields.getTextInputValue('name');
1922
const description = interaction.fields.getTextInputValue('description');
23+
const select = interaction.fields.getField('select');
2024

2125
await interaction.reply({
22-
content: `Name: ${name}\nDescription: ${description}`,
26+
content: `Name: ${name}\nDescription: ${description}\nSelect: ${select}`,
2327
flags: MessageFlags.Ephemeral,
2428
});
2529

@@ -28,13 +32,38 @@ const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
2832

2933
export async function chatInput(ctx: ChatInputCommandContext) {
3034
const modal = (
31-
<Modal title={'Modal'} onSubmit={handleSubmit}>
32-
<ShortInput customId="name" label="Name" placeholder="John" required />
33-
<ParagraphInput
34-
customId="description"
35-
label={'Description'}
36-
placeholder={'Enter a description here...'}
37-
/>
35+
<Modal title="Modal" onSubmit={handleSubmit}>
36+
<Label label="Name" description="Enter your name">
37+
<ShortInput customId="name" placeholder="John Doe" required />
38+
</Label>
39+
<Label label="Description" description="Enter a description here...">
40+
<ParagraphInput
41+
customId="description"
42+
placeholder="Lorem ipsum dolor sit amet..."
43+
/>
44+
</Label>
45+
<Label label="Select" description="Select an option">
46+
<StringSelectMenu customId="select">
47+
<StringSelectMenuOption
48+
label="Option 1"
49+
value="option1"
50+
description="This is the first option"
51+
emoji="👍"
52+
/>
53+
<StringSelectMenuOption
54+
label="Option 2"
55+
value="option2"
56+
description="This is the second option"
57+
emoji="👍"
58+
/>
59+
<StringSelectMenuOption
60+
label="Option 3"
61+
value="option3"
62+
description="This is the third option"
63+
emoji="👍"
64+
/>
65+
</StringSelectMenu>
66+
</Label>
3867
</Modal>
3968
);
4069

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

File renamed without changes.

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

File renamed without changes.

‎apps/website/docs/guide/04-jsx-components/02-discord-components-v1/03-select-menu.mdx‎ renamed to ‎apps/website/docs/guide/04-jsx-components/02-interactive-components/03-select-menu.mdx‎

File renamed without changes.

‎apps/website/docs/guide/04-jsx-components/02-discord-components-v1/04-modal.mdx‎ renamed to ‎apps/website/docs/guide/04-jsx-components/02-interactive-components/04-modal.mdx‎

File renamed without changes.

‎apps/website/docs/guide/04-jsx-components/02-interactive-components/05-poll.mdx‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
---
2+
title: Poll
3+
---
4+
5+
The `Poll` component allows you to create interactive polls in Discord messages. Users can vote on poll questions with multiple answer options, and the results are displayed in real-time. Polls can be open for up to 32 days (768 hours).
6+
7+
## Basic usage
8+
9+
```tsx title="src/app/commands/poll-example.tsx"
10+
import {
11+
CommandData,
12+
Poll,
13+
PollQuestion,
14+
PollAnswer,
15+
ChatInputCommand,
16+
} from 'commandkit';
17+
import { PollData } from 'discord.js';
18+
19+
export const command: CommandData = {
20+
name: 'poll',
21+
description: 'Create a poll',
22+
};
23+
24+
export const chatInput: ChatInputCommand = async (ctx) => {
25+
const poll: PollData = (
26+
<Poll duration={24} allowMultiselect={false}>
27+
<PollQuestion>What's your favorite programming language?</PollQuestion>
28+
<PollAnswer emoji="🟥">JavaScript</PollAnswer>
29+
<PollAnswer emoji="🟦">TypeScript</PollAnswer>
30+
<PollAnswer emoji="🟩">Python</PollAnswer>
31+
<PollAnswer emoji="🟨">Rust</PollAnswer>
32+
</Poll>
33+
);
34+
35+
await ctx.interaction.reply({ poll });
36+
};
37+
```
38+
39+
## Poll duration
40+
41+
Set how long the poll should be active (in hours). The duration defaults to 24 hours and can be up to 32 days (768 hours):
42+
43+
```tsx title="src/app/commands/poll-duration.tsx"
44+
import {
45+
CommandData,
46+
Poll,
47+
PollQuestion,
48+
PollAnswer,
49+
ChatInputCommand,
50+
} from 'commandkit';
51+
import { PollData } from 'discord.js';
52+
53+
export const command: CommandData = {
54+
name: 'quickpoll',
55+
description: 'Create a quick poll',
56+
};
57+
58+
export const chatInput: ChatInputCommand = async (ctx) => {
59+
const poll: PollData = (
60+
<Poll duration={1}>
61+
<PollQuestion>Quick question: Coffee or tea?</PollQuestion>
62+
<PollAnswer emoji="☕">Coffee</PollAnswer>
63+
<PollAnswer emoji="🍵">Tea</PollAnswer>
64+
</Poll>
65+
);
66+
67+
await ctx.interaction.reply({ poll });
68+
};
69+
```
70+
71+
For longer polls, you can specify durations up to 32 days:
72+
73+
```tsx title="src/app/commands/long-poll.tsx"
74+
import {
75+
CommandData,
76+
Poll,
77+
PollQuestion,
78+
PollAnswer,
79+
ChatInputCommand,
80+
} from 'commandkit';
81+
import { PollData } from 'discord.js';
82+
83+
export const command: CommandData = {
84+
name: 'weeklypoll',
85+
description: 'Create a weekly poll',
86+
};
87+
88+
export const chatInput: ChatInputCommand = async (ctx) => {
89+
const poll: PollData = (
90+
<Poll duration={168}>
91+
<PollQuestion>Weekly poll: What should we work on next?</PollQuestion>
92+
<PollAnswer emoji="🚀">New features</PollAnswer>
93+
<PollAnswer emoji="🐛">Bug fixes</PollAnswer>
94+
<PollAnswer emoji="📚">Documentation</PollAnswer>
95+
<PollAnswer emoji="🎨">UI improvements</PollAnswer>
96+
</Poll>
97+
);
98+
99+
await ctx.interaction.reply({ poll });
100+
};
101+
```
102+
103+
## Multiple choice polls
104+
105+
Allow users to select multiple answers:
106+
107+
```tsx title="src/app/commands/multiselect-poll.tsx"
108+
import {
109+
CommandData,
110+
Poll,
111+
PollQuestion,
112+
PollAnswer,
113+
ChatInputCommand,
114+
} from 'commandkit';
115+
import { PollData } from 'discord.js';
116+
117+
export const command: CommandData = {
118+
name: 'multiselect',
119+
description: 'Create a multiple choice poll',
120+
};
121+
122+
export const chatInput: ChatInputCommand = async (ctx) => {
123+
const poll: PollData = (
124+
<Poll duration={48} allowMultiselect={true}>
125+
<PollQuestion>Which social media platforms do you use? (Select all that apply)</PollQuestion>
126+
<PollAnswer emoji="📘">Facebook</PollAnswer>
127+
<PollAnswer emoji="🐦">Twitter</PollAnswer>
128+
<PollAnswer emoji="📷">Instagram</PollAnswer>
129+
<PollAnswer emoji="💼">LinkedIn</PollAnswer>
130+
<PollAnswer emoji="🎵">TikTok</PollAnswer>
131+
<PollAnswer emoji="📺">YouTube</PollAnswer>
132+
</Poll>
133+
);
134+
135+
await ctx.interaction.reply({ poll });
136+
};
137+
```
138+
139+
## Poll layout types
140+
141+
Customize how your poll appears using different layout types:
142+
143+
```tsx title="src/app/commands/poll-layouts.tsx"
144+
import {
145+
CommandData,
146+
Poll,
147+
PollQuestion,
148+
PollAnswer,
149+
ChatInputCommand,
150+
} from 'commandkit';
151+
import { PollData, PollLayoutType } from 'discord.js';
152+
153+
export const command: CommandData = {
154+
name: 'layoutpoll',
155+
description: 'Create a poll with custom layout',
156+
};
157+
158+
export const chatInput: ChatInputCommand = async (ctx) => {
159+
const poll: PollData = (
160+
<Poll duration={24} layoutType={PollLayoutType.List}>
161+
<PollQuestion>List layout poll</PollQuestion>
162+
<PollAnswer emoji="📝">First item</PollAnswer>
163+
<PollAnswer emoji="📋">Second item</PollAnswer>
164+
<PollAnswer emoji="📄">Third item</PollAnswer>
165+
</Poll>
166+
);
167+
168+
await ctx.interaction.reply({ poll });
169+
};
170+
```
171+
172+
## Poll with media
173+
174+
Add images or other media to your poll questions:
175+
176+
```tsx title="src/app/commands/media-poll.tsx"
177+
import {
178+
CommandData,
179+
Poll,
180+
PollQuestion,
181+
PollAnswer,
182+
ChatInputCommand,
183+
} from 'commandkit';
184+
import { PollData } from 'discord.js';
185+
186+
export const command: CommandData = {
187+
name: 'mediapoll',
188+
description: 'Create a poll with media',
189+
};
190+
191+
export const chatInput: ChatInputCommand = async (ctx) => {
192+
const poll: PollData = (
193+
<Poll duration={24}>
194+
<PollQuestion
195+
text="Which logo design do you prefer?"
196+
media={{
197+
type: 1,
198+
url: "https://example.com/logos.png"
199+
}}
200+
>
201+
Choose your favorite logo design
202+
</PollQuestion>
203+
<PollAnswer emoji="🎨">Design A</PollAnswer>
204+
<PollAnswer emoji="🖼️">Design B</PollAnswer>
205+
<PollAnswer emoji="✨">Design C</PollAnswer>
206+
</Poll>
207+
);
208+
209+
await ctx.interaction.reply({ poll });
210+
};
211+
```

‎apps/website/docs/guide/04-jsx-components/03-discord-components-v2/01-text-display.mdx‎ renamed to ‎apps/website/docs/guide/04-jsx-components/03-display-components/01-text-display.mdx‎

File renamed without changes.

0 commit comments

Comments
 (0)