Dynamic Form Modal Builder

Build a TypeScript utility that creates Slack modal views with configurable input fields, where specific fields can be automatically focused when the modal opens.

Requirements

Create a function buildFormModal that accepts a form configuration and returns a properly typed Slack modal view structure. The configuration should specify which input field should receive initial focus when the modal is displayed to the user.

Form Configuration

The function should accept:

• A modal title
• A list of form fields, where each field has:
  • A unique field ID
  • A label
  • A field type (plain text input or multi-line text input)
  • An optional flag indicating if this field should be focused on modal open
• A submit button label

Modal Behavior

• The modal should contain an input block for each configured field
• Exactly one field should be designated to receive focus when the modal opens
• If no field is explicitly marked for focus, the first field should receive focus by default
• All input fields should have appropriate labels
• The modal should include proper submit button configuration

Type Safety

The function must be properly typed using the @slack/types package to ensure:

• The returned modal structure is valid
• Input elements are correctly configured
• The modal view conforms to Slack's type requirements

Test Cases

• Building a modal with a single text input that receives focus @test
• Building a modal with multiple fields where the second field is focused @test
• Building a modal with multi-line text input that receives focus @test
• Building a modal where no focus is specified defaults to first field @test

Implementation

@generates

API

export interface FormField {
  fieldId: string;
  label: string;
  type: 'plain_text_input' | 'multi_line_text_input';
  shouldFocus?: boolean;
}

export interface FormConfig {
  title: string;
  fields: FormField[];
  submitLabel: string;
}

export function buildFormModal(config: FormConfig): unknown;

Dependencies { .dependencies }

@slack/types { .dependency }

Provides TypeScript type definitions for Slack Block Kit UI components and modal views.