Visão Geral de Componentes TUI
Invowk™ inclui um conjunto de componentes de interface de terminal interativos inspirados no gum. Use-os em seus scripts para criar prompts interativos, seleções e saída estilizada.
Componentes Disponíveis
| Componente | Descrição | Caso de Uso |
|---|---|---|
| input | Entrada de texto de linha única | Nomes, caminhos, valores simples |
| write | Editor de texto multilinha | Descrições, mensagens de commit |
| choose | Selecionar de opções | Menus, escolhas |
| confirm | Prompt sim/não | Confirmações |
| filter | Filtrar lista fuzzy | Buscar entre opções |
| file | Seletor de arquivo | Selecionar arquivos/diretórios |
| table | Exibir dados tabulares | CSV, tabelas de dados |
| spin | Spinner com comando | Tarefas de longa duração |
| pager | Visualizador de conteúdo rolável | Logs, revisão de código, saídas longas |
| format | Formatar texto (markdown, código) | Renderizar conteúdo |
| style | Estilizar texto (cores, negrito) | Decorar saída |
Exemplos Rápidos
# Get user input
NAME=$(invowk tui input --title "What's your name?")
# Choose from options
COLOR=$(invowk tui choose --title "Pick a color" red green blue)
# Confirm action
if invowk tui confirm "Continue?"; then
echo "Proceeding..."
fi
# Show spinner during long task
invowk tui spin --title "Installing..." -- npm install
# Style output
echo "Success!" | invowk tui style --foreground "#00FF00" --bold
Usando em Invowkfiles
Componentes TUI funcionam muito bem dentro de scripts de comando, incluindo aqueles executando em containers com modo interativo (-i):
Suporte a Container
Componentes TUI funcionam perfeitamente dentro de containers ao usar o modo interativo. Os componentes são renderizados como overlays modais no seu terminal do host. Veja Runtime Container - Modo Interativo para detalhes.
{
name: "setup"
description: "Interactive project setup"
implementations: [{
script: """
#!/bin/bash
# Gather information
NAME=$(invowk tui input --title "Project name:")
TYPE=$(invowk tui choose --title "Type:" cli library api)
# Confirm
echo "Creating $TYPE project: $NAME"
if ! invowk tui confirm "Proceed?"; then
echo "Cancelled."
exit 0
fi
# Execute with spinner
invowk tui spin --title "Creating project..." -- mkdir -p "$NAME"
# Success message
echo "Project created!" | invowk tui style --foreground "#00FF00" --bold
"""
runtimes: [{name: "native"}]
platforms: [{name: "linux"}, {name: "macos"}]
}]
}
Padrões Comuns
Input com Validação
while true; do
EMAIL=$(invowk tui input --title "Email address:")
if echo "$EMAIL" | grep -qE '^[^@]+@[^@]+.[^@]+$'; then
break
fi
echo "Invalid email format" | invowk tui style --foreground "#FF0000"
done
Sistema de Menu
ACTION=$(invowk tui choose --title "What would you like to do?"
"Build project"
"Run tests"
"Deploy"
"Exit")
case "$ACTION" in
"Build project") make build ;;
"Run tests") make test ;;
"Deploy") make deploy ;;
"Exit") exit 0 ;;
esac
Feedback de Progresso
echo "Step 1: Installing dependencies..."
invowk tui spin --title "Installing..." -- npm install
echo "Step 2: Building..."
invowk tui spin --title "Building..." -- npm run build
echo "Done!" | invowk tui style --foreground "#00FF00" --bold
Cabeçalhos Estilizados
invowk tui style --bold --foreground "#00BFFF" "=== Project Setup ==="
echo ""
# ... rest of script
Piping e Captura
A maioria dos componentes funciona com pipes:
# Pipe to filter
ls | invowk tui filter --title "Select file"
# Capture output
SELECTED=$(invowk tui choose opt1 opt2 opt3)
echo "You selected: $SELECTED"
# Pipe for styling
echo "Important message" | invowk tui style --bold
Códigos de Saída
Componentes usam códigos de saída para comunicar:
| Componente | Exit 0 | Exit 1 |
|---|---|---|
| confirm | Usuário disse sim | Usuário disse não |
| input | Valor inserido | Cancelado |
| choose | Opção selecionada | Cancelado |
| filter | Opção selecionada | Cancelado |
| pager | Saiu normalmente | Erro ocorreu |
Use em condicionais:
if invowk tui confirm "Delete files?"; then
rm -rf ./temp
fi
Próximos Passos
Explore cada componente em detalhes:
- Input e Write - Entrada de texto
- Choose e Confirm - Seleção e confirmação
- Filter e File - Busca e seleção de arquivo
- Table e Spin - Exibição de dados e spinners
- Pager - Visualização de conteúdo rolável
- Format e Style - Formatação e estilização de texto