User Interface

/**
 * Base UI class defining interface contract
 */
class UI {
  // Base class with no implementation
  // Extended by concrete UI implementations
}

/**
 * Console-based UI implementation
 */
class ConsoleUI extends UI {
  /**
   * Initialize console UI with CLI options
   * @param cliOptions - CLI options for configuration
   */
  constructor(cliOptions: CLIOptions);
  
  /**
   * Log text to console with optional indentation
   * @param text - Text to log
   * @param indent - Optional indentation level
   * @returns Promise resolving when log completes
   */
  log(text: string, indent?: number): Promise<void>;
  
  /**
   * Ensure answer is provided for a question
   * @param answer - Current answer value
   * @param question - Question text
   * @param suggestion - Optional suggestion
   * @returns Promise resolving to final answer
   */
  ensureAnswer(answer: any, question: string, suggestion?: string): Promise<any>;
  
  /**
   * Display Aurelia logo
   * @returns Promise resolving when logo is displayed
   */
  displayLogo(): Promise<void>;
  
  /**
   * Get terminal width for formatting
   * @returns Terminal width in characters
   */
  getWidth(): number;
  
  /**
   * Get terminal height for formatting
   * @returns Terminal height in characters
   */
  getHeight(): number;
  
  /**
   * Ask interactive question
   * @param text - Question text
   * @param options - Question options
   * @returns Promise resolving to user answer
   */
  question(text: string, options?: QuestionOptions): Promise<string>;
  
  /**
   * Multi-select prompt
   * @param question - Question text
   * @param choices - Array of choice objects
   * @returns Promise resolving to selected choices
   */
  multiselect(question: string, choices: Choice[]): Promise<string[]>;
  
  // Properties
  cliOptions: CLIOptions;
}

interface QuestionOptions {
  /** Default value */
  default?: string;
  /** Input type */
  type?: 'input' | 'password' | 'confirm';
  /** Validation function */
  validate?: (input: string) => boolean | string;
  /** Transform function */
  format?: (input: string) => string;
}

interface Choice {
  /** Choice name/value */
  name: string;
  /** Display value */
  value?: string;
  /** Choice description */
  message?: string;
  /** Whether choice is disabled */
  disabled?: boolean;
  /** Whether choice is checked by default */
  checked?: boolean;
}

const { ConsoleUI, CLIOptions } = require("aurelia-cli");

// Create console UI
const options = new CLIOptions();
const ui = new ConsoleUI(options);

// Basic logging
await ui.log("Building application...");
await ui.log("Processing files:", 2); // With indentation

// Interactive questions
const projectName = await ui.question("Project name:", {
  default: "my-aurelia-app",
  validate: (input) => input.length > 0 || "Project name required"
});

const useTypeScript = await ui.question("Use TypeScript?", {
  type: "confirm",
  default: "yes"
});

// Multi-select prompt
const features = await ui.multiselect("Select features:", [
  { name: "TypeScript", value: "typescript" },
  { name: "CSS Framework", value: "css-framework" },
  { name: "Testing", value: "testing", checked: true },
  { name: "PWA", value: "pwa" }
]);

console.log("Selected features:", features);

/**
 * Get terminal dimensions for proper text formatting
 * @returns Terminal size object
 */
function getTtySize(): TerminalSize;

interface TerminalSize {
  /** Terminal width in characters */
  width: number;
  /** Terminal height in characters */
  height: number;
}

const { getTtySize } = require("aurelia-cli");

// Get terminal dimensions
const termSize = getTtySize();
console.log(`Terminal: ${termSize.width}x${termSize.height}`);

// Use with UI
const ui = new ConsoleUI(options);
const width = ui.getWidth();
const height = ui.getHeight();

// Format text to terminal width
const longText = "This is a very long text that needs to be wrapped...";
const wrapped = wordWrap(longText, { width, indent: '  ' });
await ui.log(wrapped);

/**
 * Format choices for interactive prompts
 * @param choices - Array of choice objects
 * @param options - Formatting options
 * @returns Formatted choice display
 */
function formatChoices(choices: Choice[], options?: FormatOptions): string;

interface FormatOptions {
  /** Maximum width for formatting */
  width?: number;
  /** Indentation string */
  indent?: string;
  /** Show descriptions */
  showDescriptions?: boolean;
}

const choices = [
  { name: "JavaScript", description: "Use JavaScript for development" },
  { name: "TypeScript", description: "Use TypeScript for type safety" },
  { name: "ESNext", description: "Use latest ECMAScript features" }
];

const formatted = formatChoices(choices, {
  width: 80,
  indent: "  ",
  showDescriptions: true
});

console.log(formatted);

/**
 * Build styled command help text from metadata
 * @param metadata - Command metadata array
 * @param width - Terminal width for formatting
 * @returns Formatted help text
 */
function buildFromMetadata(metadata: CommandMetadata[], width?: number): string;

interface CommandMetadata {
  /** Command name */
  name: string;
  /** Command description */
  description: string;
  /** Command parameters */
  parameters?: Parameter[];
  /** Command flags */
  flags?: Flag[];
}

interface Parameter {
  /** Parameter name */
  name: string;
  /** Parameter description */
  description: string;
  /** Whether parameter is optional */
  optional?: boolean;
}

interface Flag {
  /** Flag name */
  name: string;
  /** Flag description */
  description: string;
  /** Flag type */
  type?: 'boolean' | 'string' | 'number';
}

const { buildFromMetadata } = require("aurelia-cli");

// Format command help
const commandMetadata = [
  {
    name: "generate",
    description: "Generate Aurelia components and files",
    parameters: [
      { name: "type", description: "Type of item to generate" },
      { name: "name", description: "Name of the item", optional: true }
    ],
    flags: [
      { name: "typescript", description: "Generate TypeScript files", type: "boolean" },
      { name: "path", description: "Output path", type: "string" }
    ]
  }
];

const helpText = buildFromMetadata(commandMetadata, 80);
console.log(helpText);

/*
Output:
generate type [name] --typescript --path value

    Generate Aurelia components and files

    type - Type of item to generate
    name (optional) - Name of the item

    --typescript - Generate TypeScript files
    --path - Output path
*/

/**
 * Enhanced input prompt with validation
 * @param prompt - Prompt configuration
 * @returns Promise resolving to user input
 */
function createInput(prompt: InputPrompt): Promise<string>;

interface InputPrompt {
  /** Prompt message */
  message: string;
  /** Default value */
  initial?: string;
  /** Input validation */
  validate?: (value: string) => boolean | string;
  /** Value transformation */
  format?: (value: string) => string;
  /** Input type */
  type?: 'input' | 'invisible' | 'password';
  /** Show default in prompt */
  showDefault?: boolean;
}

/**
 * Select prompt with multiple choice support
 * @param prompt - Select prompt configuration
 * @returns Promise resolving to selected value(s)
 */
function createSelect(prompt: SelectPrompt): Promise<string | string[]>;

interface SelectPrompt {
  /** Prompt message */
  message: string;
  /** Available choices */
  choices: Choice[];
  /** Allow multiple selections */
  multiple?: boolean;
  /** Maximum number of selections */
  limit?: number;
  /** Default selection */
  initial?: string | number;
}

// Enhanced input with validation
const projectName = await createInput({
  message: "Enter project name:",
  initial: "my-app",
  validate: (value) => {
    if (!value) return "Project name is required";
    if (!/^[a-z0-9-]+$/.test(value)) return "Use lowercase letters, numbers, and hyphens only";
    return true;
  },
  format: (value) => value.toLowerCase().replace(/\s+/g, "-")
});

// Select prompt
const framework = await createSelect({
  message: "Choose CSS framework:",
  choices: [
    { name: "None", value: "none" },
    { name: "Bootstrap", value: "bootstrap" },
    { name: "Tailwind CSS", value: "tailwind" },
    { name: "Bulma", value: "bulma" }
  ],
  initial: 0
});

// Multi-select prompt
const plugins = await createSelect({
  message: "Select plugins:",
  multiple: true,
  limit: 3,
  choices: [
    { name: "Router", value: "router", checked: true },
    { name: "HTTP Client", value: "http-client" },
    { name: "Validation", value: "validation" },
    { name: "i18n", value: "i18n" }
  ]
});