fix: optional components and types

Author: twlite

.npmrc

@@ -1 +1,2 @@
-public-hoist-pattern[]=*commandkit*
+prefer-workspace-packages=true
+public-hoist-pattern[]=@commandkit/*

CONTRIBUTING.md

@@ -44,8 +44,8 @@ git checkout -b your-feature-or-bugfix
 2. Make your changes. Please make sure to use the
    [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
    extension for consistent formatting and comments wherever
-   necessary. Alternatively, you can run `pnpm prettier:format` after
-   you've made your changes.
+   necessary. Alternatively, you can run `pnpm format` after you've
+   made your changes.
 
 3. Ensure that your changes don't break any existing functionality.
    You can test the functionality of your code depending on where

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

@@ -11,7 +11,7 @@ import {
   StringSelectMenuOption,
   FileUpload,
 } from 'commandkit';
-import { ComponentType, MessageFlags } from 'discord.js';
+import { MessageFlags } from 'discord.js';
 
 export const command: CommandData = {
   name: 'prompt',

package.json

@@ -11,9 +11,9 @@
     "bootstrap": "turbo gen bootstrap --args",
     "check-types": "turbo run --filter=\"./packages/*\" check-types",
     "build": "turbo run --filter=\"./packages/*\" build",
-    "docgen": "tsx ./scripts/docs/generate-typescript-docs.ts && pnpm prettier:format",
+    "docgen": "tsx ./scripts/docs/generate-typescript-docs.ts && pnpm format",
     "prettier:check": "prettier --experimental-cli --check . --ignore-path=.prettierignore",
-    "prettier:format": "prettier --experimental-cli --write . --ignore-path=.prettierignore"
+    "format": "prettier --experimental-cli --write . --ignore-path=.prettierignore"
   },
   "devDependencies": {
     "@types/node": "^22.10.2",

packages/commandkit/src/components/common/element.ts

@@ -1,6 +1,7 @@
 import type { ActionRowBuilder, TextInputBuilder } from 'discord.js';
 import type { ButtonKit } from '../interactive/button/ButtonKit';
 import type { ModalKit } from '../interactive/modal/ModalKit';
+import { getConfig } from '../../config/config';
 
 /**
  * Represents the types of elements that can be used in CommandKit.
@@ -102,3 +103,18 @@ export function createElement(
 }
 
 export { createElement as jsx, createElement as jsxs };
+
+let _isOptional: boolean;
+
+export function applyDefaultOptionalComponentBehavior<P>(props: P): P {
+  if (
+    props &&
+    typeof props === 'object' &&
+    (props as { required?: boolean }).required == null &&
+    (_isOptional ??= getConfig().jsxDefaultOptionalComponents)
+  ) {
+    (props as { required?: boolean }).required ??= false;
+  }
+
+  return props;
+}

packages/commandkit/src/components/display/common.ts

@@ -1,9 +1,12 @@
 import { ComponentBuilder } from 'discord.js';
+import { applyDefaultOptionalComponentBehavior } from '../..';
 
 /**
  * @private
  */
 export function applyId(props: { id?: number }, component: ComponentBuilder) {
+  applyDefaultOptionalComponentBehavior(props);
+
   if (props.id != null && 'setId' in component) {
     component.setId(props.id);
   }

packages/commandkit/src/components/interactive/modal/Modal.ts

@@ -5,7 +5,10 @@ import {
   FileUploadBuilder,
 } from 'discord.js';
 import { MaybeArray } from '../../common/types';
-import { CommandKitElement } from '../../common/element';
+import {
+  applyDefaultOptionalComponentBehavior,
+  CommandKitElement,
+} from '../../common/element';
 import {
   CommandKitModalBuilderInteractionCollectorDispatchContextData,
   ModalKit,
@@ -95,6 +98,7 @@ export interface TextInputProps {
 export function TextInput(
   props: TextInputProps & { style: TextInputStyle },
 ): CommandKitElement<'text-input'> {
+  applyDefaultOptionalComponentBehavior(props);
   const input = new TextInputBuilder().setStyle(props.style);
 
   if (props.customId) {
@@ -127,7 +131,7 @@ export function TextInput(
     input.setValue(props.value);
   }
 
-  if (props.required) {
+  if (props.required != null) {
     input.setRequired(props.required);
   }
 

packages/commandkit/src/components/interactive/select-menu/SelectMenu.ts

@@ -8,6 +8,7 @@ import {
   RoleSelectMenuComponentData,
   RoleSelectMenuInteraction,
   SelectMenuComponentOptionData,
+  Snowflake,
   StringSelectMenuInteraction,
   StringSelectMenuOptionBuilder,
   UserSelectMenuComponentData,
@@ -24,6 +25,7 @@ import {
   CommandKitSelectMenuBuilderInteractionCollectorDispatchContextData,
   CommandKitSelectMenuBuilderOnEnd,
 } from './common';
+import { applyDefaultOptionalComponentBehavior } from '../../common/element';
 
 /**
  * Type for the common properties shared by all select menu builders.
@@ -39,8 +41,10 @@ export interface CommonSelectMenuProps<T, C> {
  * Type for the base select menu component data.
  */
 export interface SelectMenuProps<T, C>
-  extends Partial<Omit<BaseSelectMenuComponentData, 'type'>>,
-    CommonSelectMenuProps<T, C> {}
+  extends Partial<Omit<BaseSelectMenuComponentData, 'type' | 'required'>>,
+    CommonSelectMenuProps<T, C> {
+  required?: boolean;
+}
 
 /**
  * The properties for a string select menu component.
@@ -83,9 +87,13 @@ export type ResolveBuilderInteraction<T> = T extends StringSelectMenuKit
  */
 function applyPropsToBuilder<B extends CommonBuilderKit>(
   builder: B,
-  props: Partial<Omit<BaseSelectMenuComponentData, 'type'>> &
-    CommonSelectMenuProps<ResolveBuilderInteraction<B>, B>,
+  props: Partial<Omit<BaseSelectMenuComponentData, 'type' | 'required'>> &
+    CommonSelectMenuProps<ResolveBuilderInteraction<B>, B> & {
+      required?: boolean;
+    },
 ) {
+  applyDefaultOptionalComponentBehavior(props);
+
   builder.setCustomId(props.customId ?? `select-menu::${crypto.randomUUID()}`);
 
   if (props.maxValues != null) {
@@ -116,6 +124,10 @@ function applyPropsToBuilder<B extends CommonBuilderKit>(
     // @ts-ignore
     builder.onSelect(props.onSelect, props.options);
   }
+
+  if (props.required != null) {
+    builder.setRequired(props.required);
+  }
 }
 
 /**
@@ -182,8 +194,10 @@ export function StringSelectMenuOption(props: StringSelectMenuOptionProps) {
  * The UserSelectMenu component.
  */
 export interface UserSelectMenuProps
-  extends Partial<Omit<UserSelectMenuComponentData, 'type'>>,
-    CommonSelectMenuProps<UserSelectMenuInteraction, UserSelectMenuKit> {}
+  extends Partial<Omit<UserSelectMenuComponentData, 'type' | 'defaultValues'>>,
+    CommonSelectMenuProps<UserSelectMenuInteraction, UserSelectMenuKit> {
+  defaultValues?: MaybeArray<string | Snowflake>;
+}
 
 /**
  * The UserSelectMenu component.

packages/commandkit/src/config/config.ts

@@ -77,6 +77,9 @@ export function defineConfig(
     disablePermissionsMiddleware:
       config.disablePermissionsMiddleware ??
       defaultConfig.disablePermissionsMiddleware,
+    jsxDefaultOptionalComponents:
+      config.jsxDefaultOptionalComponents ??
+      defaultConfig.jsxDefaultOptionalComponents,
   };
 
   return defined;

packages/commandkit/src/config/default.ts

@@ -34,4 +34,5 @@ export const defaultConfig: ResolvedCommandKitConfig = {
     development: true,
     production: false,
   },
+  jsxDefaultOptionalComponents: true,
 };