From 7e4b7ec8bd1fd997e85f219f4e54aaafb32d0048 Mon Sep 17 00:00:00 2001 From: "Mauro Rosero P." Date: Sat, 5 Apr 2025 19:22:44 -0500 Subject: [PATCH] =?UTF-8?q?[DOCS]=20A=C3=B1adido=20soporte=20para=20im?= =?UTF-8?q?=C3=A1genes=20de=20documentaci=C3=B3n=20y=20mejorada=20la=20doc?= =?UTF-8?q?umentaci=C3=B3n=20de=20Gum?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Actualizada la configuración .gitignore para incluir las imágenes de documentación - Añadidas referencias a imágenes en la documentación de Gum - Mejorado el formato de la documentación - Eliminadas secciones redundantes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .gitignore | 1 + docs/forms-gum.md | 152 ++++++++-------------------------------------- 2 files changed, 26 insertions(+), 127 deletions(-) diff --git a/.gitignore b/.gitignore index 91181e6..4df5c23 100644 --- a/.gitignore +++ b/.gitignore @@ -37,3 +37,4 @@ data/* !inventory/** !sops/*.yaml !docs/*.md +!docs/img/** diff --git a/docs/forms-gum.md b/docs/forms-gum.md index 29536d3..b3d851e 100644 --- a/docs/forms-gum.md +++ b/docs/forms-gum.md @@ -4,6 +4,8 @@ [Gum](https://github.com/charmbracelet/gum) es una herramienta de línea de comandos desarrollada por [Charm](https://charm.sh/) que permite crear interfaces de texto (TUI) elegantes y funcionales para scripts Bash. Con Gum, puedes mejorar dramáticamente la experiencia de usuario de tus scripts de shell, añadiendo formularios interactivos, menús, estilos y más. +![Ejemplo interfaz Gum](img/gum-overview.png) + Este tutorial cubre cómo utilizar Gum para crear formularios interactivos en scripts de shell dentro del entorno MRDevs Tools. ## Requisitos Previos @@ -11,37 +13,24 @@ Este tutorial cubre cómo utilizar Gum para crear formularios interactivos en sc - MRDevs Tools instalado (bootstrap.sh ya instala Gum automáticamente) - Conocimientos básicos de shell scripting -## Instalación de Gum - -Si no tienes MRDevs Tools instalado o necesitas instalar Gum manualmente, puedes hacerlo con: - -```bash -# Verifica si gum está instalado -command -v gum > /dev/null || { - echo "Instalando gum..." - bin/bootstrap.sh -} -``` ## Componentes Básicos de Gum Gum ofrece varios comandos para crear diferentes tipos de elementos de interfaz: -| Comando | Descripción | -|---------|-------------| -| `gum style` | Da formato al texto (color, negrita, etc.) | -| `gum input` | Campo de entrada para texto | -| `gum write` | Área de texto multilínea | -| `gum confirm` | Diálogo de confirmación (Sí/No) | -| `gum choose` | Menú de selección de opciones | -| `gum filter` | Lista filtrable de opciones | -| `gum spin` | Indicador de carga con mensaje | -| `gum format` | Formatea texto (Markdown, código, etc.) | -| `gum join` | Combina salidas en layouts | -| `gum table` | Muestra datos en formato de tabla | -| `gum pager` | Visualizador de texto paginado | - -## Ejemplos Prácticos +| Comando | Descripción | +|---------------|--------------------------------------------| +| `gum style` | Da formato al texto (color, negrita, etc.) | +| `gum input` | Campo de entrada para texto | +| `gum write` | Área de texto multilínea | +| `gum confirm` | Diálogo de confirmación (Sí/No) | +| `gum choose` | Menú de selección de opciones | +| `gum filter` | Lista filtrable de opciones | +| `gum spin` | Indicador de carga con mensaje | +| `gum format` | Formatea texto (Markdown, código, etc.) | +| `gum join` | Combina salidas en layouts | +| `gum table` | Muestra datos en formato de tabla | +| `gum pager` | Visualizador de texto paginado | ### 1. Formulario Básico de Registro @@ -51,10 +40,6 @@ Vamos a crear un formulario simple que solicite nombre, correo electrónico y co #!/bin/bash # Ejemplo de formulario básico con Gum -# Importar bibliotecas necesarias (opcional para MRDevs Tools) -SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" -source "${SCRIPT_DIR}/lib/base.lib" - # Título estilizado echo gum style --foreground 212 --bold --align center "Formulario de Registro" @@ -84,6 +69,8 @@ else fi ``` +![Formulario Básico de Registro](img/gum-registro.png) + ### 2. Selector de Proyecto Creemos un selector para elegir el tipo de proyecto a crear: @@ -139,6 +126,8 @@ else fi ``` +![Selector de Tipo de Proyecto](img/gum-selector.png) + ### 3. Utilidad de Configuración del Sistema Este ejemplo muestra cómo crear una utilidad para configurar aspectos del sistema: @@ -241,6 +230,8 @@ main() { main ``` +![Utilidad de Configuración del Sistema](img/gum-config.png) + ## Técnicas Avanzadas ### Layouts con `gum join` @@ -261,6 +252,8 @@ gum join --vertical \ "$(gum style --padding "1 2" --border normal --width 50 "Fila 3")" ``` +![Layouts con Gum Join](img/gum-layouts.png) + ### Tablas de Datos Las tablas son útiles para mostrar datos estructurados: @@ -271,6 +264,8 @@ echo -e "NOMBRE\tROL\tDEPARTAMENTO\nJuan Pérez\tDesarrollador\tTecnología\nAna gum table --widths 20,15,20 --height 10 ``` +![Tablas de Datos](img/gum-table.png) + ### Filtrar Listas Largas Para buscar en listas extensas: @@ -296,103 +291,6 @@ gum input --prompt "Nombre: " gum confirm "¿Continuar?" ``` -## Integración con MRDevs Tools - -### Template de Asistente con Gum - -Aquí hay un template para crear asistentes interactivos en MRDevs Tools: - -```bash -#!/bin/bash -#Script : asistente_ejemplo.sh -#Apps : MRDEVS TOOLS -#Description : Asistente interactivo con Gum -#Author : Tu Nombre -#Created : 2025/04/05 -#Modified : 2025/04/05 -#Version : 1.0.0 -#Use Notes : -#============================================================================== -# Derechos de Autor 2025 Mauro Rosero P. -#============================================================================== -# Este programa es software libre: usted puede redistribuirlo y/o modificarlo -# bajo los términos de la Licencia Pública Affero General de GNU tal como -# lo publica la Free Software Foundation, ya sea la versión 3 de la licencia, -# o (a su elección) cualquier versión posterior. -# -# [...] - -# Configuración inicial -SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" -source "${SCRIPT_DIR}/lib/base.lib" -source "${SCRIPT_DIR}/lib/console.lib" - -# Cargar mensajes -load_messages "${SCRIPT_DIR}" "msg" "${LANG:0:2}" "head" - -# Verificar que gum esté instalado -command_installed gum -if [ $? -ne 0 ]; then - echo "Error: Gum no está instalado. Ejecutando bootstrap.sh..." - "${SCRIPT_DIR}/bootstrap.sh" - - # Verificar nuevamente - command_installed gum - if [ $? -ne 0 ]; then - echo "Error: No se pudo instalar Gum. Abortando." - exit 1 - fi -fi - -# Funciones del asistente -mostrar_titulo() { - clear - gum style \ - --foreground 212 --border double --border-foreground 99 \ - --align center --width 60 --margin "1 0" --padding "1 2" \ - "Asistente Interactivo MRDevs" -} - -mostrar_menu() { - gum style --foreground 99 "Selecciona una opción:" - gum choose --height 10 \ - "1. Opción Uno" \ - "2. Opción Dos" \ - "3. Opción Tres" \ - "4. Salir" -} - -# Flujo principal -main() { - mostrar_titulo - - while true; do - echo - opcion=$(mostrar_menu) - - case $opcion in - "1. Opción Uno") - gum style --foreground 82 "Has seleccionado la Opción Uno" - gum input --placeholder "Presiona Enter para continuar..." - mostrar_titulo - ;; - "4. Salir") - gum style --foreground 82 "¡Gracias por usar el Asistente MRDevs!" - exit 0 - ;; - *) - gum style --foreground 196 "Opción no implementada aún." - gum input --placeholder "Presiona Enter para continuar..." - mostrar_titulo - ;; - esac - done -} - -# Iniciar programa -main -``` - ### Ejemplo Práctico: Asistente de Configuración de Proyecto Este ejemplo muestra cómo usar Gum para crear un asistente para inicializar proyectos: