@alumbwe/anvil 1.0.0 → 1.0.1

package/src/components/ask-user/components/accordion-question.tsx

@@ -1,153 +0,0 @@
-/**
- * Accordion-style question component that can expand/collapse
- */
-
-import React, { useCallback } from 'react'
-
-import { CustomAnswerInput } from './custom-answer-input'
-import { OptionsList } from './options-list'
-import { QuestionHeader } from './question-header'
-import { getOptionLabel } from '../constants'
-
-import type { AskUserQuestion } from '../../../types/store'
-
-/** Answer state for a single question */
-export interface AccordionAnswer {
-  selectedIndex?: number
-  selectedIndices?: Set<number>
-  isCustom?: boolean
-  customText?: string
-}
-
-export interface AccordionQuestionProps {
-  question: AskUserQuestion
-  questionIndex: number
-  totalQuestions: number
-  answer: AccordionAnswer | undefined
-  isExpanded: boolean
-  isTypingCustom: boolean
-  onToggleExpand: () => void
-  onSelectOption: (optionIndex: number) => void
-  onToggleOption: (optionIndex: number) => void
-  onSetCustomText: (text: string, cursorPosition: number) => void
-  onCustomSubmit: () => void
-  customCursorPosition: number
-  focusedOptionIndex: number | null
-  onFocusOption: (index: number | null) => void
-}
-
-export const AccordionQuestion: React.FC<AccordionQuestionProps> = ({
-  question,
-  questionIndex,
-  totalQuestions,
-  answer,
-  isExpanded,
-  isTypingCustom,
-  onToggleExpand,
-  onSelectOption,
-  onToggleOption,
-  onSetCustomText,
-  onCustomSubmit,
-  customCursorPosition,
-  focusedOptionIndex,
-  onFocusOption,
-}) => {
-  const isMultiSelect = question.multiSelect
-  const showQuestionNumber = totalQuestions > 1
-  const questionNumber = questionIndex + 1
-  const questionPrefix = showQuestionNumber ? `${questionNumber}. ` : ''
-  const optionIndent = 2 + questionPrefix.length
-
-  // Check if question has a valid answer
-  const isAnswered =
-    !!answer &&
-    ((answer.isCustom && !!answer.customText?.trim()) ||
-      (isMultiSelect && (answer.selectedIndices?.size ?? 0) > 0) ||
-      answer.selectedIndex !== undefined)
-
-  const getAnswerDisplay = (): string => {
-    if (!answer) return '(click to answer)'
-
-    if (answer.isCustom && answer.customText) {
-      const hadNewlines = /\r?\n/.test(answer.customText)
-      const flattenedText = answer.customText
-        .replace(/\r?\n/g, ' ')
-        .replace(/\s+/g, ' ')
-        .trim()
-      return `Custom: ${flattenedText}${hadNewlines ? '…' : ''}`
-    }
-
-    if (isMultiSelect && answer.selectedIndices) {
-      const selectedLabels = Array.from(answer.selectedIndices)
-        .map((idx) => getOptionLabel(question.options[idx]))
-        .filter(Boolean)
-      return selectedLabels.length > 0
-        ? selectedLabels.join(', ')
-        : '(click to answer)'
-    }
-
-    if (answer.selectedIndex !== undefined) {
-      const label = getOptionLabel(question.options[answer.selectedIndex])
-      return label || '(click to answer)'
-    }
-
-    return '(click to answer)'
-  }
-
-  const isCustomSelected = answer?.isCustom ?? false
-
-  const handlePaste = useCallback(
-    (text: string) => {
-      const currentText = answer?.customText || ''
-      const newText =
-        currentText.slice(0, customCursorPosition) +
-        text +
-        currentText.slice(customCursorPosition)
-      onSetCustomText(newText, customCursorPosition + text.length)
-    },
-    [answer?.customText, customCursorPosition, onSetCustomText],
-  )
-
-  return (
-    <box style={{ flexDirection: 'column', marginBottom: 1, width: '100%' }}>
-      {/* Question header - always visible */}
-      <QuestionHeader
-        questionText={question.question}
-        questionPrefix={questionPrefix}
-        isExpanded={isExpanded}
-        isAnswered={isAnswered}
-        answerDisplay={getAnswerDisplay()}
-        onToggleExpand={onToggleExpand}
-      />
-
-      {/* Expanded content - options */}
-      {isExpanded && (
-        <box style={{ flexDirection: 'column', width: '100%' }}>
-          <OptionsList
-            question={question}
-            answer={answer}
-            optionIndent={optionIndent}
-            focusedOptionIndex={focusedOptionIndex}
-            isTypingCustom={isTypingCustom}
-            onSelectOption={onSelectOption}
-            onToggleOption={onToggleOption}
-            onFocusOption={onFocusOption}
-          />
-
-          {/* Text input area when Custom is selected */}
-          {isCustomSelected && (
-            <CustomAnswerInput
-              value={answer?.customText || ''}
-              cursorPosition={customCursorPosition}
-              focused={isTypingCustom}
-              optionIndent={optionIndent}
-              onChange={onSetCustomText}
-              onSubmit={onCustomSubmit}
-              onPaste={handlePaste}
-            />
-          )}
-        </box>
-      )}
-    </box>
-  )
-}

package/src/components/ask-user/components/custom-answer-input.tsx

@@ -1,66 +0,0 @@
-/**
- * Custom answer input component - MultilineInput wrapper for custom text answers
- */
-
-import React, { memo } from 'react'
-
-import { useTheme } from '../../../hooks/use-theme'
-import { MultilineInput } from '../../multiline-input'
-
-export interface CustomAnswerInputProps {
-  value: string
-  cursorPosition: number
-  focused: boolean
-  optionIndent: number
-  onChange: (text: string, cursorPosition: number) => void
-  onSubmit: () => void
-  onPaste: (text: string) => void
-}
-
-export const CustomAnswerInput: React.FC<CustomAnswerInputProps> = memo(
-  ({
-    value,
-    cursorPosition,
-    focused,
-    optionIndent,
-    onChange,
-    onSubmit,
-    onPaste,
-  }) => {
-    const theme = useTheme()
-
-    return (
-      <box style={{ flexDirection: 'column', paddingLeft: optionIndent + 2 }}>
-        <box
-          style={{
-            borderStyle: 'single',
-            borderColor: theme.muted,
-            paddingLeft: 1,
-            paddingRight: 1,
-          }}
-        >
-        <MultilineInput
-          value={value}
-          cursorPosition={cursorPosition}
-          onChange={(inputValue) => {
-            onChange(inputValue.text, inputValue.cursorPosition)
-          }}
-          onSubmit={onSubmit}
-          onPaste={(text) => {
-            if (text) {
-              onPaste(text)
-            }
-          }}
-          focused={focused}
-          maxHeight={5}
-          minHeight={1}
-          placeholder="Type your answer..."
-          showScrollbar={true}
-        />
-        </box>
-      </box>
-    )
-  },
-)
-
-CustomAnswerInput.displayName = 'CustomAnswerInput'

package/src/components/ask-user/components/options-list.tsx

@@ -1,133 +0,0 @@
-/**
- * Options list component that renders all question options
- * including the Custom option button
- */
-
-import { TextAttributes } from '@opentui/core'
-import React, { memo } from 'react'
-
-import { QuestionOption } from './question-option'
-import { useTheme } from '../../../hooks/use-theme'
-import { Button } from '../../button'
-import { CUSTOM_OPTION_INDEX, SYMBOLS } from '../constants'
-
-import type { AccordionAnswer } from './accordion-question'
-import type { AskUserQuestion } from '../../../types/store'
-
-export interface OptionsListProps {
-  question: AskUserQuestion
-  answer: AccordionAnswer | undefined
-  optionIndent: number
-  focusedOptionIndex: number | null
-  isTypingCustom: boolean
-  onSelectOption: (optionIndex: number) => void
-  onToggleOption: (optionIndex: number) => void
-  onFocusOption: (index: number | null) => void
-}
-
-export const OptionsList: React.FC<OptionsListProps> = memo(
-  ({
-    question,
-    answer,
-    optionIndent,
-    focusedOptionIndex,
-    isTypingCustom,
-    onSelectOption,
-    onToggleOption,
-    onFocusOption,
-  }) => {
-    const theme = useTheme()
-    const isMultiSelect = question.multiSelect
-
-    const isCustomSelected = answer?.isCustom ?? false
-    const isCustomFocused = focusedOptionIndex === question.options.length || isTypingCustom
-    const selectedFg = theme.name === 'dark' ? '#ffffff' : '#000000'
-    const customSymbol = isMultiSelect
-      ? isCustomSelected
-        ? SYMBOLS.CHECKBOX_CHECKED
-        : SYMBOLS.CHECKBOX_UNCHECKED
-      : isCustomSelected
-        ? SYMBOLS.SELECTED
-        : SYMBOLS.UNSELECTED
-    const customFg = isCustomFocused ? '#000000' : isCustomSelected ? selectedFg : theme.muted
-    const customAttributes = isCustomFocused || isCustomSelected ? TextAttributes.BOLD : undefined
-
-    const handleOptionSelect = (optionIndex: number) => {
-      if (isMultiSelect) {
-        onToggleOption(optionIndex)
-      } else {
-        onSelectOption(optionIndex)
-      }
-    }
-
-    const handleCustomClick = () => {
-      if (isMultiSelect) {
-        onToggleOption(CUSTOM_OPTION_INDEX)
-      } else {
-        onSelectOption(CUSTOM_OPTION_INDEX)
-      }
-    }
-
-    return (
-      <>
-        {/* Multi-select hint */}
-        {isMultiSelect && (
-          <text style={{ fg: theme.muted, paddingLeft: optionIndent }}>
-            (Select multiple options)
-          </text>
-        )}
-
-        {/* Options */}
-        {question.options.map((option, optionIndex) => {
-          const isSelected = isMultiSelect
-            ? answer?.selectedIndices?.has(optionIndex) ?? false
-            : answer?.selectedIndex === optionIndex
-
-          return (
-            <QuestionOption
-              key={optionIndex}
-              option={option}
-              indent={optionIndent}
-              isSelected={isSelected}
-              isFocused={focusedOptionIndex === optionIndex}
-              isMultiSelect={isMultiSelect}
-              onSelect={() => handleOptionSelect(optionIndex)}
-              onMouseOver={() => onFocusOption(optionIndex)}
-            />
-          )
-        })}
-
-        {/* Custom option - uses checkbox style for multi-select questions */}
-        <Button
-          onClick={handleCustomClick}
-          onMouseOver={() => onFocusOption(question.options.length)}
-          style={{
-            width: '100%',
-            flexDirection: 'column',
-            gap: 0,
-            backgroundColor: isCustomFocused ? theme.primary : undefined,
-            paddingTop: 0,
-            paddingBottom: 0,
-            paddingLeft: optionIndent,
-          }}
-        >
-          <text style={{ fg: customFg, attributes: customAttributes }}>
-            {`${customSymbol} Custom`}
-          </text>
-          {isCustomFocused && (
-            <text
-              style={{
-                fg: '#000000',
-                marginLeft: 2,
-              }}
-            >
-              Type your own answer
-            </text>
-          )}
-        </Button>
-      </>
-    )
-  },
-)
-
-OptionsList.displayName = 'OptionsList'

package/src/components/ask-user/components/question-header.tsx

@@ -1,80 +0,0 @@
-/**
- * Question header component with expand/collapse functionality
- * and answer preview when collapsed
- */
-
-import { TextAttributes } from '@opentui/core'
-import React, { memo } from 'react'
-
-import { useTerminalLayout } from '../../../hooks/use-terminal-layout'
-import { useTheme } from '../../../hooks/use-theme'
-import { Button } from '../../button'
-
-// Overhead for the answer line: modal borders (~6) + marginLeft (3) + "↳ " (3) + quotes (2) + buffer (6)
-const ANSWER_LINE_OVERHEAD = 20
-
-export interface QuestionHeaderProps {
-  questionText: string
-  questionPrefix: string
-  isExpanded: boolean
-  isAnswered: boolean
-  answerDisplay: string
-  onToggleExpand: () => void
-}
-
-export const QuestionHeader: React.FC<QuestionHeaderProps> = memo(
-  ({
-    questionText,
-    questionPrefix,
-    isExpanded,
-    isAnswered,
-    answerDisplay,
-    onToggleExpand,
-  }) => {
-    const theme = useTheme()
-    const { terminalWidth } = useTerminalLayout()
-
-    // Calculate available width for the answer text and truncate with ellipsis at end
-    const availableWidth = Math.max(20, terminalWidth - ANSWER_LINE_OVERHEAD)
-    const truncatedAnswer =
-      answerDisplay.length > availableWidth
-        ? answerDisplay.slice(0, availableWidth - 1) + '…'
-        : answerDisplay
-
-    return (
-      <Button
-        onClick={onToggleExpand}
-        style={{
-          flexDirection: 'column',
-          width: '100%',
-        }}
-      >
-        <text>
-          <span fg={theme.muted}>{isExpanded ? '▼' : '▶'}</span>
-          <span
-            fg={theme.foreground}
-            attributes={isExpanded ? TextAttributes.BOLD : undefined}
-          >
-            {' '}
-            {questionPrefix}
-            {questionText}
-          </span>
-        </text>
-        {/* Answer displayed on separate line when collapsed (like User Answers style) */}
-        {!isExpanded && (
-          <text wrapMode="none" style={{ marginLeft: 3 }}>
-            <span fg={theme.primary}>↳ </span>
-            <span
-              fg={isAnswered ? theme.primary : theme.muted}
-              attributes={TextAttributes.ITALIC}
-            >
-              {isAnswered ? `"${truncatedAnswer}"` : '(click to answer)'}
-            </span>
-          </text>
-        )}
-      </Button>
-    )
-  },
-)
-
-QuestionHeader.displayName = 'QuestionHeader'

package/src/components/ask-user/components/question-option.tsx

@@ -1,89 +0,0 @@
-/**
- * Question option component (radio button or checkbox)
- */
-
-import { TextAttributes } from '@opentui/core'
-import React, { memo } from 'react'
-
-import { useTheme } from '../../../hooks/use-theme'
-import { Button } from '../../button'
-import { SYMBOLS } from '../constants'
-
-export interface QuestionOptionProps {
-  option: string | { label: string; description?: string }
-  indent: number
-  isSelected: boolean
-  isFocused: boolean
-  isMultiSelect?: boolean
-  onSelect: () => void
-  onMouseOver: () => void
-}
-
-export const QuestionOption: React.FC<QuestionOptionProps> = memo(
-  ({
-    option,
-    indent,
-    isSelected,
-    isFocused,
-    isMultiSelect = false,
-    onSelect,
-    onMouseOver,
-  }) => {
-    const theme = useTheme()
-
-    // Extract label and description
-    const label = typeof option === 'string' ? option : option.label
-    const description = typeof option === 'object' ? option.description : undefined
-
-    const selectedFg = theme.name === 'dark' ? '#ffffff' : '#000000'
-    const symbol = isMultiSelect
-      ? isSelected ? SYMBOLS.CHECKBOX_CHECKED : SYMBOLS.CHECKBOX_UNCHECKED
-      : isSelected ? SYMBOLS.SELECTED : SYMBOLS.UNSELECTED
-    const fg = isFocused ? '#000000' : isSelected ? selectedFg : theme.muted
-    const attributes = isFocused || isSelected ? TextAttributes.BOLD : undefined
-
-    return (
-      <Button
-        onClick={onSelect}
-        onMouseOver={onMouseOver}
-        style={{
-          flexDirection: 'column',
-          gap: 0,
-          width: '100%',
-          backgroundColor: isFocused ? theme.primary : undefined,
-          marginBottom: 0,
-          paddingTop: 0,
-          paddingBottom: 0,
-          paddingLeft: indent,
-        }}
-      >
-        <text style={{ fg, attributes }}>{`${symbol} ${label}`}</text>
-        {/* Show description on focus */}
-        {isFocused && description && (
-          <text
-            style={{
-              fg: '#000000',
-              marginLeft: 2,
-            }}
-          >
-            {description}
-          </text>
-        )}
-      </Button>
-    )
-  },
-  // Memo comparison: only re-render if these props change
-  (prev, next) => {
-    return (
-      prev.isSelected === next.isSelected &&
-      prev.isFocused === next.isFocused &&
-      prev.option === next.option &&
-      prev.indent === next.indent &&
-      prev.isMultiSelect === next.isMultiSelect &&
-      prev.onSelect === next.onSelect &&
-      prev.onMouseOver === next.onMouseOver
-    )
-  }
-)
-
-QuestionOption.displayName = 'QuestionOption'

package/src/components/ask-user/constants.ts

@@ -1,38 +0,0 @@
-/**
- * Visual symbols used in the UI
- */
-export const SYMBOLS = {
-  /** Selected radio button */
-  SELECTED: '●',
-
-  /** Unselected radio button */
-  UNSELECTED: '○',
-
-  /** Completed question indicator */
-  COMPLETED: '✓',
-
-  /** Current question indicator */
-  CURRENT: '●',
-
-  /** Checked checkbox (multi-select) */
-  CHECKBOX_CHECKED: '☑',
-
-  /** Unchecked checkbox (multi-select) */
-  CHECKBOX_UNCHECKED: '☐',
-} as const
-
-/** Option type - can be string or object with label/description */
-export type AskUserOption = string | { label: string; description?: string }
-
-/** Helper to extract label from an option (handles both string and object formats) */
-export const getOptionLabel = (option: AskUserOption): string => {
-  return typeof option === 'string' ? option : option?.label ?? ''
-}
-
-/** Constant for the "Custom" option index */
-export const CUSTOM_OPTION_INDEX: number = -1
-
-export const KEYBOARD_HINTS = [
-  '↑↓ navigate •',
-  'Enter select',
-] as const