Skip to content

Commit 0cf06a7

Browse files
twlitetwlite
committed
chore: regen lockfile and prettier
1 parent 8c3348c commit 0cf06a7

2 files changed

Lines changed: 128 additions & 129 deletions

File tree

‎apps/website/docs/guide/04-jsx-components/02-interactive-components/06-checkbox.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ export const chatInput: ChatInputCommand = async ({ interaction }) => {
6767
```
6868

6969
## Descriptions
70+
7071
To provide more context about the options, you can add descriptions to `CheckboxGroupOption`:
7172

7273
```tsx title="src/app/commands/checkbox-descriptions.tsx"
@@ -94,10 +95,7 @@ const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
9495
export const chatInput: ChatInputCommand = async ({ interaction }) => {
9596
const modal = (
9697
<Modal title="Feature Feedback" onSubmit={handleSubmit}>
97-
<Label
98-
label="Features"
99-
description="Which features do you use the most?"
100-
>
98+
<Label label="Features" description="Which features do you use the most?">
10199
<CheckboxGroup customId="features">
102100
<CheckboxGroupOption
103101
label="Modals"

‎apps/website/docs/guide/04-jsx-components/02-interactive-components/07-radio.mdx‎

Lines changed: 126 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -11,108 +11,109 @@ Use `RadioGroup` when you want the user to pick exactly one item from a list:
1111

1212
```tsx title="src/app/commands/radio-group.tsx"
1313
import {
14-
type ChatInputCommand,
15-
type OnModalKitSubmit,
16-
Modal,
17-
Label,
18-
RadioGroup,
19-
RadioGroupOption,
14+
type ChatInputCommand,
15+
type OnModalKitSubmit,
16+
Modal,
17+
Label,
18+
RadioGroup,
19+
RadioGroupOption,
2020
} from 'commandkit';
2121
import { MessageFlags } from 'discord.js';
2222

2323
const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
24-
// returns the selected option's value
25-
const plan = interaction.fields.getRadioGroup('plan', true);
24+
// returns the selected option's value
25+
const plan = interaction.fields.getRadioGroup('plan', true);
2626

27-
await interaction.reply({
28-
content: `Selected plan: ${plan}`,
29-
flags: MessageFlags.Ephemeral,
30-
});
27+
await interaction.reply({
28+
content: `Selected plan: ${plan}`,
29+
flags: MessageFlags.Ephemeral,
30+
});
3131

32-
// Clean up the modal context
33-
context.dispose();
32+
// Clean up the modal context
33+
context.dispose();
3434
};
3535

3636
export const chatInput: ChatInputCommand = async ({ interaction }) => {
37-
const modal = (
38-
<Modal title="Choose a plan" onSubmit={handleSubmit}>
39-
<Label label="Plan" description="Select one option">
40-
<RadioGroup customId="plan" required>
41-
<RadioGroupOption
42-
label="Free"
43-
value="free"
44-
description="Basic features"
45-
/>
46-
<RadioGroupOption
47-
label="Pro"
48-
value="pro"
49-
description="Extra features"
50-
/>
51-
<RadioGroupOption
52-
label="Enterprise"
53-
value="enterprise"
54-
description="Custom agreement"
55-
/>
56-
</RadioGroup>
57-
</Label>
58-
</Modal>
59-
);
60-
61-
await interaction.showModal(modal);
37+
const modal = (
38+
<Modal title="Choose a plan" onSubmit={handleSubmit}>
39+
<Label label="Plan" description="Select one option">
40+
<RadioGroup customId="plan" required>
41+
<RadioGroupOption
42+
label="Free"
43+
value="free"
44+
description="Basic features"
45+
/>
46+
<RadioGroupOption
47+
label="Pro"
48+
value="pro"
49+
description="Extra features"
50+
/>
51+
<RadioGroupOption
52+
label="Enterprise"
53+
value="enterprise"
54+
description="Custom agreement"
55+
/>
56+
</RadioGroup>
57+
</Label>
58+
</Modal>
59+
);
60+
61+
await interaction.showModal(modal);
6262
};
6363
```
6464

6565
## Descriptions
66+
6667
To add more context to each option, use the `description` prop on `RadioGroupOption`. This will render a smaller text below the option label, giving users more information to make their choice:
6768

6869
```tsx title="src/app/commands/radio-descriptions.tsx"
6970
import {
70-
type ChatInputCommand,
71-
type OnModalKitSubmit,
72-
Modal,
73-
Label,
74-
RadioGroup,
75-
RadioGroupOption,
71+
type ChatInputCommand,
72+
type OnModalKitSubmit,
73+
Modal,
74+
Label,
75+
RadioGroup,
76+
RadioGroupOption,
7677
} from 'commandkit';
7778
import { MessageFlags } from 'discord.js';
7879

7980
const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
80-
const choice = interaction.fields.getRadioGroup('choice', true);
81+
const choice = interaction.fields.getRadioGroup('choice', true);
8182

82-
await interaction.reply({
83-
content: `You chose: ${choice}`,
84-
flags: MessageFlags.Ephemeral,
85-
});
83+
await interaction.reply({
84+
content: `You chose: ${choice}`,
85+
flags: MessageFlags.Ephemeral,
86+
});
8687

87-
context.dispose();
88+
context.dispose();
8889
};
8990

9091
export const chatInput: ChatInputCommand = async ({ interaction }) => {
91-
const modal = (
92-
<Modal title="Feedback" onSubmit={handleSubmit}>
93-
<Label label="How was your experience?">
94-
<RadioGroup customId="choice" required>
95-
<RadioGroupOption
96-
label="Good"
97-
value="good"
98-
description="Had a great experience"
99-
/>
100-
<RadioGroupOption
101-
label="Okay"
102-
value="okay"
103-
description="It was fine, nothing special"
104-
/>
105-
<RadioGroupOption
106-
label="Bad"
107-
value="bad"
108-
description="Had a poor experience"
109-
/>
110-
</RadioGroup>
111-
</Label>
112-
</Modal>
113-
);
114-
115-
await interaction.showModal(modal);
92+
const modal = (
93+
<Modal title="Feedback" onSubmit={handleSubmit}>
94+
<Label label="How was your experience?">
95+
<RadioGroup customId="choice" required>
96+
<RadioGroupOption
97+
label="Good"
98+
value="good"
99+
description="Had a great experience"
100+
/>
101+
<RadioGroupOption
102+
label="Okay"
103+
value="okay"
104+
description="It was fine, nothing special"
105+
/>
106+
<RadioGroupOption
107+
label="Bad"
108+
value="bad"
109+
description="Had a poor experience"
110+
/>
111+
</RadioGroup>
112+
</Label>
113+
</Modal>
114+
);
115+
116+
await interaction.showModal(modal);
116117
};
117118
```
118119

@@ -122,40 +123,40 @@ Use `default` on `RadioGroupOption` to pre-select an option:
122123

123124
```tsx title="src/app/commands/default-radio.tsx"
124125
import {
125-
type ChatInputCommand,
126-
type OnModalKitSubmit,
127-
Modal,
128-
Label,
129-
RadioGroup,
130-
RadioGroupOption,
126+
type ChatInputCommand,
127+
type OnModalKitSubmit,
128+
Modal,
129+
Label,
130+
RadioGroup,
131+
RadioGroupOption,
131132
} from 'commandkit';
132133
import { MessageFlags } from 'discord.js';
133134

134135
const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
135-
const frequency = interaction.fields.getRadioGroup('frequency', true);
136+
const frequency = interaction.fields.getRadioGroup('frequency', true);
136137

137-
await interaction.reply({
138-
content: `Notification frequency: ${frequency}`,
139-
flags: MessageFlags.Ephemeral,
140-
});
138+
await interaction.reply({
139+
content: `Notification frequency: ${frequency}`,
140+
flags: MessageFlags.Ephemeral,
141+
});
141142

142-
context.dispose();
143+
context.dispose();
143144
};
144145

145146
export const chatInput: ChatInputCommand = async ({ interaction }) => {
146-
const modal = (
147-
<Modal title="Notifications" onSubmit={handleSubmit}>
148-
<Label label="How often should we notify you?">
149-
<RadioGroup customId="frequency" required>
150-
<RadioGroupOption label="Daily" value="daily" />
151-
<RadioGroupOption label="Weekly" value="weekly" default />
152-
<RadioGroupOption label="Never" value="never" />
153-
</RadioGroup>
154-
</Label>
155-
</Modal>
156-
);
157-
158-
await interaction.showModal(modal);
147+
const modal = (
148+
<Modal title="Notifications" onSubmit={handleSubmit}>
149+
<Label label="How often should we notify you?">
150+
<RadioGroup customId="frequency" required>
151+
<RadioGroupOption label="Daily" value="daily" />
152+
<RadioGroupOption label="Weekly" value="weekly" default />
153+
<RadioGroupOption label="Never" value="never" />
154+
</RadioGroup>
155+
</Label>
156+
</Modal>
157+
);
158+
159+
await interaction.showModal(modal);
159160
};
160161
```
161162

@@ -167,38 +168,38 @@ When `required` is not set (or is `false`), you can read the value as
167168

168169
```tsx title="src/app/commands/optional-radio.tsx"
169170
import {
170-
type ChatInputCommand,
171-
type OnModalKitSubmit,
172-
Modal,
173-
Label,
174-
RadioGroup,
175-
RadioGroupOption,
171+
type ChatInputCommand,
172+
type OnModalKitSubmit,
173+
Modal,
174+
Label,
175+
RadioGroup,
176+
RadioGroupOption,
176177
} from 'commandkit';
177178
import { MessageFlags } from 'discord.js';
178179

179180
const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
180-
const choice = interaction.fields.getRadioGroup('choice');
181+
const choice = interaction.fields.getRadioGroup('choice');
181182

182-
await interaction.reply({
183-
content: `Choice: ${choice ?? 'skipped'}`,
184-
flags: MessageFlags.Ephemeral,
185-
});
183+
await interaction.reply({
184+
content: `Choice: ${choice ?? 'skipped'}`,
185+
flags: MessageFlags.Ephemeral,
186+
});
186187

187-
context.dispose();
188+
context.dispose();
188189
};
189190

190191
export const chatInput: ChatInputCommand = async ({ interaction }) => {
191-
const modal = (
192-
<Modal title="Quick question" onSubmit={handleSubmit}>
193-
<Label label="Pick one (optional)">
194-
<RadioGroup customId="choice" required={false}>
195-
<RadioGroupOption label="Yes" value="yes" />
196-
<RadioGroupOption label="No" value="no" />
197-
</RadioGroup>
198-
</Label>
199-
</Modal>
200-
);
201-
202-
await interaction.showModal(modal);
192+
const modal = (
193+
<Modal title="Quick question" onSubmit={handleSubmit}>
194+
<Label label="Pick one (optional)">
195+
<RadioGroup customId="choice" required={false}>
196+
<RadioGroupOption label="Yes" value="yes" />
197+
<RadioGroupOption label="No" value="no" />
198+
</RadioGroup>
199+
</Label>
200+
</Modal>
201+
);
202+
203+
await interaction.showModal(modal);
203204
};
204205
```

0 commit comments

Comments
 (0)