cordo 2.9.4 → 2.10.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cordo",
-  "version": "2.9.4",
+  "version": "2.10.0-rc.1",
   "description": "A framework for handling complex discord api interactions",
   "exports": {
     ".": "./src/index.ts",

package/src/components/builtin/checkbox-group.ts

@@ -0,0 +1,113 @@
+import { ComponentType, createComponent } from "../component"
+import { Hooks } from "../../core/hooks"
+import { value, type CordoFunct, type CordoFunctRun } from "../../functions"
+import { FunctCompiler } from "../../functions/compiler"
+import { MaxLengthConstants } from "../../lib/constants"
+
+
+type CheckboxGroupOption<Value extends string = string> = ({
+  label: string
+  description?: string
+  default?: boolean
+  value?: Value
+  onSelect?: CordoFunct | CordoFunctRun
+})
+
+export function checkboxGroup<Values extends string = string>() {
+  let labelVal: string | undefined = undefined
+  let descriptionVal: string | undefined = undefined
+  let optionsVal: CheckboxGroupOption[] = []
+  let minValues: number | undefined = undefined
+  let maxValues: number | undefined = undefined
+  let requiredVal: boolean = false
+  const functVal: CordoFunct[] = []
+
+  function getLabel() {
+    if (!labelVal)
+      return 'Pick one'
+    return Hooks.callHook(
+      'transformUserFacingText',
+      labelVal,
+      { component: 'CheckboxGroup', position: 'label' }
+    )
+  }
+
+  function getDescription() {
+    if (!descriptionVal)
+      return undefined
+    return Hooks.callHook(
+      'transformUserFacingText',
+      descriptionVal,
+      { component: 'CheckboxGroup', position: 'description' }
+    )
+  }
+
+  function getOptions(): CheckboxGroupOption[] {
+    return optionsVal.slice(0, 10).map(o => ({
+      ...o,
+      label: Hooks.callHook('transformUserFacingText', o.label, { component: 'CheckboxGroup', position: 'option.label' })?.slice(0, MaxLengthConstants.SELECT_OPTION_LABEL),
+      description: o.description
+        ? Hooks.callHook('transformUserFacingText', o.description, { component: 'CheckboxGroup', position: 'option.description' })?.slice(0, MaxLengthConstants.SELECT_OPTION_DESCRIPTION)
+        : undefined,
+      value: FunctCompiler.toCustomId([
+        ...(o.onSelect
+          ? Array.isArray(o.onSelect)
+            ? o.onSelect
+            : [ o.onSelect ]
+          : []
+        ),
+        o.value ? value(o.value) : null
+      ])
+    }))
+  }
+
+  const out = {
+    ...createComponent('CheckboxGroup', () => ({
+      type: ComponentType.CheckboxGroup,
+      label: getLabel(),
+      description: getDescription(),
+      min_values: Math.max(minValues ?? 1, 0),
+      max_values: Math.min(maxValues ?? minValues ?? 1, optionsVal.length),
+      required: requiredVal,
+      options: getOptions(),
+      custom_id: FunctCompiler.toCustomId(requiredVal ? [] : functVal),
+      'modal:label': getLabel(),
+      'modal:description': getDescription(),
+    })),
+
+    required(required = true) {
+      requiredVal = required
+      return out
+    },
+    min: (num: number = 1) => {
+      minValues = num
+      return out
+    },
+    max: (num: number = 10) => {
+      maxValues = num
+      return out
+    },
+    onSubmit: (...funct: CordoFunctRun) => {
+      functVal.push(...funct)
+      return out
+    },
+    setOptions(options: Array<CheckboxGroupOption<Values>>) {
+      optionsVal = options
+      return out
+    },
+    addOption(o: CheckboxGroupOption<Values>) {
+      optionsVal.push(o)
+      return out
+    },
+    withLabel: (text: string) => {
+      labelVal = text
+      return out
+    },
+    withDescription: (text: string) => {
+      descriptionVal = text
+      return out
+    },
+  }
+
+  return out
+}

package/src/components/builtin/file-upload.ts

@@ -0,0 +1,75 @@
+import { ComponentType, createComponent } from "../component"
+import { Hooks } from "../../core/hooks"
+import { type CordoFunct, type CordoFunctRun } from "../../functions"
+import { FunctCompiler } from "../../functions/compiler"
+
+
+export function fileUpload() {
+  let labelVal: string | undefined = undefined
+  let descriptionVal: string | undefined = undefined
+  let minValues: number | undefined = undefined
+  let maxValues: number | undefined = undefined
+  let requiredVal: boolean = false
+  const functVal: CordoFunct[] = []
+
+  function getLabel() {
+    if (!labelVal)
+      return 'Your Response'
+    return Hooks.callHook(
+      'transformUserFacingText',
+      labelVal,
+      { component: 'FileUpload', position: 'label' }
+    )
+  }
+
+  function getDescription() {
+    if (!descriptionVal)
+      return undefined
+    return Hooks.callHook(
+      'transformUserFacingText',
+      descriptionVal,
+      { component: 'FileUpload', position: 'description' }
+    )
+  }
+
+  const out = {
+    ...createComponent('FileUpload', () => ({
+      type: ComponentType.FileUpload,
+      label: getLabel(),
+      description: getDescription(),
+      min_values: Math.max(minValues ?? 1, 0),
+      max_values: Math.min(maxValues ?? minValues ?? 1, 10),
+      required: requiredVal,
+      custom_id: FunctCompiler.toCustomId(functVal),
+      'modal:label': getLabel(),
+      'modal:description': getDescription(),
+    })),
+
+    min: (num: number = 1) => {
+      minValues = num
+      return out
+    },
+    max: (num: number = 10) => {
+      maxValues = num
+      return out
+    },
+    required(required = true) {
+      requiredVal = required
+      return out
+    },
+    onSubmit: (...funct: CordoFunctRun) => {
+      functVal.push(...funct)
+      return out
+    },
+    withLabel: (text: string) => {
+      labelVal = text
+      return out
+    },
+    withDescription: (text: string) => {
+      descriptionVal = text
+      return out
+    },
+  }
+
+  return out
+}

package/src/components/builtin/link-button.ts

@@ -1,3 +1,4 @@
+import { URL } from "node:url"
 import { ButtonStyle } from "discord-api-types/v10"
 import { ComponentType, createComponent } from "../component"
 import { Hooks } from "../../core/hooks"

package/src/components/builtin/modal.ts

@@ -1,13 +1,38 @@
 import { Hooks } from "../../core/hooks"
 import type { CordoFunct, CordoFunctRun } from "../../functions"
 import { FunctCompiler } from "../../functions/compiler"
-import { ComponentType, createComponent, renderComponentList, type CordoComponent } from "../component"
+import { ComponentType, createComponent, renderComponent, renderComponentList, type CordoComponent, type CordoComponentPayload, type StringComponentType } from "../component"
 import type { CordoModifier } from "../modifier"
 
 
-export type AllowedComponents = CordoComponent<'TextInput'> | CordoModifier
+export type AllowedComponents = CordoComponent<'TextDisplay' | 'TextInput' | 'RoleSelect' | 'UserSelect' | 'StringSelect' | 'ChannelSelect' | 'MentionableSelect'> | CordoModifier
 type AllowedComponentArray = Array<AllowedComponents | AllowedComponents[]>
 
+const componentsRequiringLabel: StringComponentType[] = [ 'TextInput', 'RoleSelect', 'UserSelect', 'StringSelect', 'ChannelSelect', 'MentionableSelect', 'ChannelSelect', 'FileUpload', 'RadioGroup', 'CheckboxGroup', 'Checkbox' ]
+function labelize(component: CordoComponent<StringComponentType>, parsed: CordoComponentPayload<StringComponentType>): CordoComponent<StringComponentType> | null {
+  if (!parsed.visible)
+    return null
+
+  if (!componentsRequiringLabel.includes(parsed.nativeName))
+    return component
+
+  return createComponent('Label', ({ attributes, hirarchy }) => {
+    const rendered = renderComponent(component, 'Modal', hirarchy, attributes)
+    return {
+      type: ComponentType.Label,
+      label: rendered?.['modal:label'] ?? parsed.nativeName,
+      id: rendered?.['modal:id'],
+      description: rendered?.['modal:description'],
+      component: {
+        ...rendered,
+        'modal:label': undefined,
+        'modal:id': undefined,
+        'modal:description': undefined
+      }
+    }
+  })
+}
+
 export function modal(...components: AllowedComponentArray) {
   let titleVal: string | undefined = undefined
   const functVal: CordoFunct[] = []
@@ -26,7 +51,7 @@ export function modal(...components: AllowedComponentArray) {
   const out = {
     ...createComponent('Modal', ({ hirarchy, attributes }) => ({
       type: ComponentType.Modal,
-      components: renderComponentList(components.flat(), 'Modal', hirarchy, attributes),
+      components: renderComponentList(components.flat(), 'Modal', hirarchy, attributes, labelize),
       title: getTitle(),
       custom_id: FunctCompiler.toCustomId(functVal)
     })),
@@ -35,7 +60,7 @@ export function modal(...components: AllowedComponentArray) {
       titleVal = value
       return out
     },
-    onClick: (...funct: CordoFunctRun) => {
+    onSubmit: (...funct: CordoFunctRun) => {
       functVal.push(...funct)
       return out
     },

package/src/components/builtin/radio-group.ts

@@ -0,0 +1,101 @@
+import { ComponentType, createComponent } from "../component"
+import { Hooks } from "../../core/hooks"
+import { value, type CordoFunct, type CordoFunctRun } from "../../functions"
+import { FunctCompiler } from "../../functions/compiler"
+import { MaxLengthConstants } from "../../lib/constants"
+
+
+type RadioGroupOption<Value extends string = string> = ({
+  label: string
+  description?: string
+  default?: boolean
+  value?: Value
+  onSelect?: CordoFunct | CordoFunctRun
+})
+
+export function radioGroup<Values extends string = string>() {
+  let labelVal: string | undefined = undefined
+  let descriptionVal: string | undefined = undefined
+  let optionsVal: RadioGroupOption[] = []
+  let requiredVal: boolean = false
+  const functVal: CordoFunct[] = []
+
+  function getLabel() {
+    if (!labelVal)
+      return 'Pick one'
+    return Hooks.callHook(
+      'transformUserFacingText',
+      labelVal,
+      { component: 'RadioGroup', position: 'label' }
+    )
+  }
+
+  function getDescription() {
+    if (!descriptionVal)
+      return undefined
+    return Hooks.callHook(
+      'transformUserFacingText',
+      descriptionVal,
+      { component: 'RadioGroup', position: 'description' }
+    )
+  }
+
+  function getOptions(): RadioGroupOption[] {
+    return optionsVal.slice(0, 25).map(o => ({
+      ...o,
+      label: Hooks.callHook('transformUserFacingText', o.label, { component: 'RadioGroup', position: 'option.label' })?.slice(0, MaxLengthConstants.SELECT_OPTION_LABEL),
+      description: o.description
+        ? Hooks.callHook('transformUserFacingText', o.description, { component: 'RadioGroup', position: 'option.description' })?.slice(0, MaxLengthConstants.SELECT_OPTION_DESCRIPTION)
+        : undefined,
+      value: FunctCompiler.toCustomId([
+        ...(o.onSelect
+          ? Array.isArray(o.onSelect)
+            ? o.onSelect
+            : [ o.onSelect ]
+          : []
+        ),
+        o.value ? value(o.value) : null
+      ])
+    }))
+  }
+
+  const out = {
+    ...createComponent('RadioGroup', () => ({
+      type: ComponentType.RadioGroup,
+      label: getLabel(),
+      description: getDescription(),
+      required: requiredVal,
+      options: getOptions(),
+      custom_id: FunctCompiler.toCustomId(requiredVal ? [] : functVal),
+      'modal:label': getLabel(),
+      'modal:description': getDescription(),
+    })),
+
+    required(required = true) {
+      requiredVal = required
+      return out
+    },
+    onSubmit: (...funct: CordoFunctRun) => {
+      functVal.push(...funct)
+      return out
+    },
+    setOptions(options: Array<RadioGroupOption<Values>>) {
+      optionsVal = options
+      return out
+    },
+    addOption(o: RadioGroupOption<Values>) {
+      optionsVal.push(o)
+      return out
+    },
+    withLabel: (text: string) => {
+      labelVal = text
+      return out
+    },
+    withDescription: (text: string) => {
+      descriptionVal = text
+      return out
+    },
+  }
+
+  return out
+}

package/src/components/builtin/select-string.ts

@@ -13,6 +13,8 @@ type SelectMenuOption<Value extends string = string> = Omit<APISelectMenuOption,
 
 export function selectString<Values extends string = string>() {
   let placeholderVal: string | undefined = undefined
+  let labelVal: string | undefined = undefined
+  let descriptionVal: string | undefined = undefined
   let minValues: number | undefined = undefined
   let maxValues: number | undefined = undefined
   let optionsVal: SelectMenuOption[] = []
@@ -29,6 +31,26 @@ export function selectString<Values extends string = string>() {
     )
   }
 
+  function getLabel() {
+    if (!labelVal)
+      return 'Your Response'
+    return Hooks.callHook(
+      'transformUserFacingText',
+      labelVal,
+      { component: 'StringSelect', position: 'label' }
+    )
+  }
+
+  function getDescription() {
+    if (!descriptionVal)
+      return undefined
+    return Hooks.callHook(
+      'transformUserFacingText',
+      descriptionVal,
+      { component: 'StringSelect', position: 'description' }
+    )
+  }
+
   function getOptions(): SelectMenuOption[] {
     return optionsVal.slice(0, 25).map(o => ({
       ...o,
@@ -56,7 +78,9 @@ export function selectString<Values extends string = string>() {
       max_values: maxValues ? Math.min(optionsVal.length, maxValues) : undefined,
       disabled: disabledVal,
       options: getOptions(),
-      custom_id: FunctCompiler.toCustomId(disabledVal ? [] : functVal)
+      custom_id: FunctCompiler.toCustomId(disabledVal ? [] : functVal),
+      'modal:label': getLabel(),
+      'modal:description': getDescription(),
     })),
 
     placeholder: (text: string) => {
@@ -86,7 +110,15 @@ export function selectString<Values extends string = string>() {
     addOption(o: SelectMenuOption<Values>) {
       optionsVal.push(o)
       return out
-    }
+    },
+    withLabel: (text: string) => {
+      labelVal = text
+      return out
+    },
+    withDescription: (text: string) => {
+      descriptionVal = text
+      return out
+    },
   }
 
   return out

package/src/components/builtin/text-input.ts

@@ -6,6 +6,7 @@ import { FunctCompiler } from "../../functions/compiler"
 export function textInput() {
   let placeholderVal: string | undefined = undefined
   let labelVal: string | undefined = undefined
+  let descriptionVal: string | undefined = undefined
   let minLength: number | undefined = undefined
   let maxLength: number | undefined = undefined
   let requiredVal: boolean | undefined = undefined
@@ -33,17 +34,28 @@ export function textInput() {
     )
   }
 
+  function getDescription() {
+    if (!descriptionVal)
+      return undefined
+    return Hooks.callHook(
+      'transformUserFacingText',
+      descriptionVal,
+      { component: 'TextInput', position: 'description' }
+    )
+  }
+
   const out = {
     ...createComponent('TextInput', () => ({
       type: ComponentType.TextInput,
       placeholder: getPlaceholder(),
-      label: getLabel(),
       min_length: minLength,
       max_length: maxLength,
       required: requiredVal,
       style: sizeVal ?? 1,
       value: currentVal,
-      custom_id: ref ?? FunctCompiler.toCustomId([]) // get a noop if no ref
+      custom_id: ref ?? FunctCompiler.toCustomId([]), // get a noop if no ref
+      'modal:label': getLabel(),
+      'modal:description': getDescription(),
     })),
 
     as: (id: string) => {
@@ -54,10 +66,14 @@ export function textInput() {
       placeholderVal = text
       return out
     },
-    label: (text: string) => {
+    withLabel: (text: string) => {
       labelVal = text
       return out
     },
+    withDescription: (text: string) => {
+      descriptionVal = text
+      return out
+    },
     current: (text: string) => {
       currentVal = text
       return out

package/src/components/component.ts

@@ -23,6 +23,11 @@ export const ComponentType = {
   File: 13,
   Seperator: 14,
   Container: 17,
+  Label: 18,
+  FileUpload: 19,
+  RadioGroup: 21,
+  CheckboxGroup: 22,
+  Checkbox: 23,
 
   Modal: -1, // This is a special type that is not used in the API, but for Cordo's internal use
 } as const
@@ -60,7 +65,7 @@ export function createComponent<Type extends StringComponentType>(
     nativeType: ComponentType[type],
     visible: true,
     attributes: {},
-    render
+    render,
   }
   const out = {
     [CordoComponentSymbol]: comp,
@@ -105,14 +110,15 @@ export function renderComponentList(
   list: Array<CordoComponent<StringComponentType> | CordoModifier>,
   parent: StringComponentType | null,
   hirarchy: Array<StringComponentType> = [],
-  inheritAttributes: Record<string, any> = {}
+  inheritAttributes: Record<string, any> = {},
+  transform?: (component: CordoComponent<StringComponentType>, parsed: CordoComponentPayload<StringComponentType>) => CordoComponent<StringComponentType> | null
 ) {
   let pipeline: Array<CordoComponentPayload<StringComponentType>> = []
   /* when we have buttons without a host row we use this to collect up to 5 and then create the row for it */
   const rowBuilder: Array<CordoComponent<StringComponentType>> = []
   const modifiers: Array<ReturnType<typeof readModifier>> = []
 
-  for (const item of list) {
+  for (let item of list) {
     if (!item)
       continue
 
@@ -129,6 +135,14 @@ export function renderComponentList(
         parsed = mod.hooks.onRender(parsed)
     }
 
+    if (transform) {
+      const transformed = transform(item, parsed)
+      if (!transformed)
+        continue
+      item = transformed
+      parsed = readComponent(transformed)
+    }
+
     if (parent !== 'ActionRow') {
       if (parsed.nativeName === 'Button') {
         rowBuilder.push(item)

package/src/components/index.ts

@@ -10,13 +10,16 @@ import {
 } from './component'
 
 export { button } from './builtin/button'
+export { checkboxGroup } from './builtin/checkbox-group'
 export { container } from './builtin/container'
 export { collection } from './builtin/collection'
 export { divider } from './builtin/divider'
+export { fileUpload } from './builtin/file-upload'
 export { gallery } from './builtin/gallery'
 export { image } from './builtin/image'
 export { linkButton } from './builtin/link-button'
 export { modal } from './builtin/modal'
+export { radioGroup } from './builtin/radio-group'
 export { row } from './builtin/row'
 export { section } from './builtin/section'
 export { selectString } from './builtin/select-string'

package/src/core/routing/respond.ts

@@ -157,7 +157,9 @@ export namespace RoutingRespond {
         has: (key: string) => key in interaction.locals
       },
 
-      ack: opts.disableRendering ? noOp : () => CordoGateway.respondTo(interaction, null),
+      ack: opts.disableRendering ? noOp : () => {
+        CordoGateway.respondTo(interaction, null)
+      },
       render: opts.disableRendering ? noOp : (...response) => {
         const rendered = renderRouteResponse(response, interaction, opts)
         CordoGateway.respondTo(interaction, rendered)