@fairyhunter13/opentui-core 0.1.91 → 0.1.92

package/src/examples/input-select-layout-demo.ts

@@ -1,425 +0,0 @@
-import { CliRenderer, BoxRenderable, TextRenderable, createCliRenderer, type KeyEvent } from "../index.js"
-import { InputRenderable, InputRenderableEvents } from "../renderables/Input.js"
-import { SelectRenderable, SelectRenderableEvents, type SelectOption } from "../renderables/Select.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let renderer: CliRenderer | null = null
-let header: TextRenderable | null = null
-let headerBox: BoxRenderable | null = null
-let selectContainer: BoxRenderable | null = null
-let selectContainerBox: BoxRenderable | null = null
-let leftSelect: SelectRenderable | null = null
-let leftSelectBox: BoxRenderable | null = null
-let rightSelect: SelectRenderable | null = null
-let rightSelectBox: BoxRenderable | null = null
-let inputContainer: BoxRenderable | null = null
-let inputContainerBox: BoxRenderable | null = null
-let inputLabel: TextRenderable | null = null
-let textInput: InputRenderable | null = null
-let textInputBox: BoxRenderable | null = null
-let footer: TextRenderable | null = null
-let footerBox: BoxRenderable | null = null
-let currentFocusIndex = 0
-
-const focusableElements: Array<InputRenderable | SelectRenderable> = []
-const focusableBoxes: Array<BoxRenderable | null> = []
-
-const colorOptions: SelectOption[] = [
-  { name: "Red", description: "A warm primary color", value: "#ff0000" },
-  { name: "Blue", description: "A cool primary color", value: "#0066ff" },
-  { name: "Green", description: "A natural color", value: "#00aa00" },
-  { name: "Purple", description: "A regal color", value: "#8a2be2" },
-  { name: "Orange", description: "A vibrant color", value: "#ff8c00" },
-  { name: "Teal", description: "A calming color", value: "#008080" },
-]
-
-const sizeOptions: SelectOption[] = [
-  { name: "Small", description: "Compact size (8px)", value: 8 },
-  { name: "Medium", description: "Standard size (12px)", value: 12 },
-  { name: "Large", description: "Big size (16px)", value: 16 },
-  { name: "Extra Large", description: "Huge size (20px)", value: 20 },
-]
-
-function createLayoutElements(rendererInstance: CliRenderer): void {
-  renderer = rendererInstance
-  renderer.setBackgroundColor("#001122")
-
-  headerBox = new BoxRenderable(renderer, {
-    id: "header-box",
-    zIndex: 0,
-    width: "auto",
-    height: 3,
-    backgroundColor: "#3b82f6",
-    borderStyle: "single",
-    borderColor: "#2563eb",
-    flexGrow: 0,
-    flexShrink: 0,
-    border: true,
-  })
-
-  header = new TextRenderable(renderer, {
-    id: "header",
-    content: "INPUT & SELECT LAYOUT DEMO",
-    fg: "#ffffff",
-    bg: "transparent",
-    zIndex: 1,
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-
-  headerBox.add(header)
-
-  selectContainerBox = new BoxRenderable(renderer, {
-    id: "select-container-box",
-    zIndex: 0,
-    width: "auto",
-    height: "auto",
-    flexGrow: 1,
-    flexShrink: 1,
-    minHeight: 10,
-    backgroundColor: "#1e293b",
-    borderStyle: "single",
-    borderColor: "#475569",
-    border: true,
-  })
-
-  selectContainer = new BoxRenderable(renderer, {
-    id: "select-container",
-    zIndex: 1,
-    width: "auto",
-    height: "auto",
-    flexDirection: "row",
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-
-  selectContainerBox.add(selectContainer)
-
-  leftSelectBox = new BoxRenderable(renderer, {
-    id: "color-select-box",
-    zIndex: 0,
-    width: "auto",
-    height: "auto",
-    minHeight: 8,
-    borderStyle: "single",
-    borderColor: "#475569",
-    focusedBorderColor: "#3b82f6",
-    title: "Color Selection",
-    titleAlignment: "center",
-    flexGrow: 1,
-    flexShrink: 1,
-    backgroundColor: "transparent",
-    border: true,
-  })
-
-  leftSelect = new SelectRenderable(renderer, {
-    id: "color-select",
-    zIndex: 1,
-    width: "auto",
-    height: "auto",
-    minHeight: 6,
-    options: colorOptions,
-    backgroundColor: "#1e293b",
-    focusedBackgroundColor: "#2d3748",
-    textColor: "#e2e8f0",
-    focusedTextColor: "#f7fafc",
-    selectedBackgroundColor: "#3b82f6",
-    selectedTextColor: "#ffffff",
-    descriptionColor: "#94a3b8",
-    selectedDescriptionColor: "#cbd5e1",
-    showScrollIndicator: true,
-    wrapSelection: true,
-    showDescription: true,
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-
-  leftSelectBox.add(leftSelect)
-
-  rightSelectBox = new BoxRenderable(renderer, {
-    id: "size-select-box",
-    zIndex: 0,
-    width: "auto",
-    height: "auto",
-    minHeight: 8,
-    borderStyle: "single",
-    borderColor: "#475569",
-    focusedBorderColor: "#059669",
-    title: "Size Selection",
-    titleAlignment: "center",
-    flexGrow: 1,
-    flexShrink: 1,
-    backgroundColor: "transparent",
-    border: true,
-  })
-
-  rightSelect = new SelectRenderable(renderer, {
-    id: "size-select",
-    zIndex: 1,
-    width: "auto",
-    height: "auto",
-    minHeight: 6,
-    options: sizeOptions,
-    backgroundColor: "#1e293b",
-    focusedBackgroundColor: "#2d3748",
-    textColor: "#e2e8f0",
-    focusedTextColor: "#f7fafc",
-    selectedBackgroundColor: "#059669",
-    selectedTextColor: "#ffffff",
-    descriptionColor: "#94a3b8",
-    selectedDescriptionColor: "#cbd5e1",
-    showScrollIndicator: true,
-    wrapSelection: true,
-    showDescription: true,
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-
-  rightSelectBox.add(rightSelect)
-
-  inputContainerBox = new BoxRenderable(renderer, {
-    id: "input-container-box",
-    zIndex: 0,
-    width: "auto",
-    height: 7,
-    flexGrow: 0,
-    flexShrink: 0,
-    backgroundColor: "#0f172a",
-    borderStyle: "single",
-    borderColor: "#334155",
-    border: true,
-  })
-
-  inputContainer = new BoxRenderable(renderer, {
-    id: "input-container",
-    zIndex: 1,
-    width: "auto",
-    height: "auto",
-    flexDirection: "column",
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-
-  inputContainerBox.add(inputContainer)
-
-  inputLabel = new TextRenderable(renderer, {
-    id: "input-label",
-    content: "Enter your text:",
-    fg: "#f1f5f9",
-    bg: "#0f172a",
-    zIndex: 0,
-    flexGrow: 0,
-    flexShrink: 0,
-  })
-
-  textInputBox = new BoxRenderable(renderer, {
-    id: "text-input-box",
-    zIndex: 0,
-    width: "auto",
-    height: 3,
-    borderStyle: "single",
-    borderColor: "#475569",
-    focusedBorderColor: "#eab308",
-    flexGrow: 0,
-    flexShrink: 0,
-    marginTop: 1,
-    backgroundColor: "transparent",
-    border: true,
-  })
-
-  textInput = new InputRenderable(renderer, {
-    id: "text-input",
-    zIndex: 1,
-    width: "auto",
-    height: 1,
-    placeholder: "Type something here...",
-    backgroundColor: "#1e293b",
-    focusedBackgroundColor: "#334155",
-    textColor: "#f1f5f9",
-    focusedTextColor: "#ffffff",
-    placeholderColor: "#64748b",
-    cursorColor: "#f1f5f9",
-    maxLength: 100,
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-
-  textInputBox.add(textInput)
-
-  footerBox = new BoxRenderable(renderer, {
-    id: "footer-box",
-    zIndex: 0,
-    width: "auto",
-    height: 3,
-    backgroundColor: "#1e40af",
-    borderStyle: "single",
-    borderColor: "#1d4ed8",
-    flexGrow: 0,
-    flexShrink: 0,
-    border: true,
-  })
-
-  footer = new TextRenderable(renderer, {
-    id: "footer",
-    content: "TAB: focus next | SHIFT+TAB: focus prev | ARROWS/JK: navigate | ESC: quit",
-    fg: "#dbeafe",
-    bg: "transparent",
-    zIndex: 1,
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-
-  footerBox.add(footer)
-
-  selectContainer.add(leftSelectBox)
-  selectContainer.add(rightSelectBox)
-  inputContainer.add(inputLabel)
-  inputContainer.add(textInputBox)
-
-  renderer.root.add(headerBox)
-  renderer.root.add(selectContainerBox)
-  renderer.root.add(inputContainerBox)
-  renderer.root.add(footerBox)
-
-  focusableElements.push(leftSelect, rightSelect, textInput)
-  focusableBoxes.push(leftSelectBox, rightSelectBox, textInputBox)
-  setupEventHandlers()
-  updateFocus()
-
-  renderer.on("resize", handleResize)
-}
-
-function setupEventHandlers(): void {
-  if (!leftSelect || !rightSelect || !textInput) return
-
-  leftSelect.on(SelectRenderableEvents.SELECTION_CHANGED, (index: number, option: SelectOption) => {
-    updateDisplay()
-  })
-
-  leftSelect.on(SelectRenderableEvents.ITEM_SELECTED, (index: number, option: SelectOption) => {
-    updateDisplay()
-  })
-
-  rightSelect.on(SelectRenderableEvents.SELECTION_CHANGED, (index: number, option: SelectOption) => {
-    updateDisplay()
-  })
-
-  rightSelect.on(SelectRenderableEvents.ITEM_SELECTED, (index: number, option: SelectOption) => {
-    updateDisplay()
-  })
-
-  textInput.on(InputRenderableEvents.INPUT, (value: string) => {
-    updateDisplay()
-  })
-
-  textInput.on(InputRenderableEvents.CHANGE, (value: string) => {
-    updateDisplay()
-  })
-}
-
-function updateDisplay(): void {
-  if (!leftSelect || !rightSelect || !textInput || !inputLabel) return
-
-  const selectedColor = leftSelect.getSelectedOption()
-  const selectedSize = rightSelect.getSelectedOption()
-  const inputValue = textInput.value
-
-  let displayText = "Enter your text:"
-  if (inputValue) {
-    displayText += ` "${inputValue}"`
-  }
-  if (selectedColor) {
-    displayText += ` in ${selectedColor.name}`
-  }
-  if (selectedSize) {
-    displayText += ` (${selectedSize.name})`
-  }
-
-  inputLabel.content = displayText
-}
-
-function handleResize(width: number, height: number): void {
-  // Root layout is automatically resized by the renderer
-}
-
-function updateFocus(): void {
-  focusableElements.forEach((element) => element.blur())
-  focusableBoxes.forEach((box) => {
-    if (box) box.blur()
-  })
-
-  if (focusableElements[currentFocusIndex]) {
-    focusableElements[currentFocusIndex].focus()
-  }
-  if (focusableBoxes[currentFocusIndex]) {
-    focusableBoxes[currentFocusIndex]!.focus()
-  }
-}
-
-function handleKeyPress(key: KeyEvent): void {
-  if (key.name === "tab") {
-    if (key.shift) {
-      currentFocusIndex = (currentFocusIndex - 1 + focusableElements.length) % focusableElements.length
-    } else {
-      currentFocusIndex = (currentFocusIndex + 1) % focusableElements.length
-    }
-    updateFocus()
-    return
-  }
-}
-
-export function run(rendererInstance: CliRenderer): void {
-  createLayoutElements(rendererInstance)
-  rendererInstance.keyInput.on("keypress", handleKeyPress)
-  updateDisplay()
-}
-
-export function destroy(rendererInstance: CliRenderer): void {
-  rendererInstance.keyInput.off("keypress", handleKeyPress)
-
-  if (renderer) {
-    renderer.off("resize", handleResize)
-  }
-
-  // Properly destroy all elements that need cleanup
-  if (leftSelect) leftSelect.destroy()
-  if (rightSelect) rightSelect.destroy()
-  if (textInput) textInput.destroy()
-
-  // Clean up elements directly from root
-  if (headerBox) rendererInstance.root.remove(headerBox.id)
-  if (selectContainerBox) rendererInstance.root.remove(selectContainerBox.id)
-  if (inputContainerBox) rendererInstance.root.remove(inputContainerBox.id)
-  if (footerBox) rendererInstance.root.remove(footerBox.id)
-
-  // Clean up all elements
-  header = null
-  headerBox = null
-  selectContainer = null
-  selectContainerBox = null
-  leftSelect = null
-  leftSelectBox = null
-  rightSelect = null
-  rightSelectBox = null
-  inputContainer = null
-  inputContainerBox = null
-  inputLabel = null
-  textInput = null
-  textInputBox = null
-  footer = null
-  footerBox = null
-  renderer = null
-  currentFocusIndex = 0
-  focusableElements.length = 0
-  focusableBoxes.length = 0
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-    targetFps: 30,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-  renderer.start()
-}

package/src/examples/install.sh

@@ -1,143 +0,0 @@
-#!/bin/sh
-set -e
-
-# OpenTUI Examples Installation Script
-# Downloads and runs the latest opentui-examples binary
-
-REPO="anomalyco/opentui"
-GITHUB_API="https://api.github.com/repos/$REPO"
-
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-BLUE='\033[0;34m'
-NC='\033[0m' # No Color
-
-# Default to stable releases
-USE_PRERELEASE=false
-
-# Parse arguments
-while [ $# -gt 0 ]; do
-  case $1 in
-    --pre|--prerelease)
-      USE_PRERELEASE=true
-      shift
-      ;;
-    -h|--help)
-      echo "Usage: $0 [OPTIONS]"
-      echo ""
-      echo "Options:"
-      echo "  --pre, --prerelease    Download the latest pre-release version"
-      echo "  -h, --help            Show this help message"
-      exit 0
-      ;;
-    *)
-      printf "${RED}Error: Unknown option: $1${NC}\n"
-      echo "Use --help for usage information"
-      exit 1
-      ;;
-  esac
-done
-
-printf "${GREEN}OpenTUI Examples Installer${NC}\n"
-echo "Installing opentui-examples binary..."
-echo ""
-
-# Detect platform
-OS=$(uname -s | tr '[:upper:]' '[:lower:]')
-ARCH=$(uname -m)
-
-case "$ARCH" in
-    x86_64|amd64) ARCH="x64" ;;
-    arm64|aarch64) ARCH="arm64" ;;
-    *) printf "${RED}Error: Unsupported architecture: $ARCH${NC}\n"; exit 1 ;;
-esac
-
-case "$OS" in
-    darwin) OS="darwin" ;;
-    linux) OS="linux" ;;
-    mingw*|cygwin*|msys*) OS="windows" ;;
-    *) printf "${RED}Error: Unsupported OS: $OS${NC}\n"; exit 1 ;;
-esac
-
-PLATFORM="${OS}-${ARCH}"
-echo "Detected platform: $PLATFORM"
-
-# Find the latest release
-echo "Fetching latest release information..."
-
-if [ "$USE_PRERELEASE" = "true" ]; then
-  printf "${YELLOW}Looking for latest pre-release...${NC}\n"
-  # Get all releases and find the first one (which could be a pre-release)
-  RELEASE_DATA=$(curl -s "$GITHUB_API/releases" | grep -m 1 '"tag_name"' | cut -d '"' -f 4)
-  if [ -z "$RELEASE_DATA" ]; then
-    printf "${RED}Error: Failed to fetch release information${NC}\n"
-    exit 1
-  fi
-  VERSION="$RELEASE_DATA"
-else
-  # Get the latest stable release
-  RELEASE_DATA=$(curl -s "$GITHUB_API/releases/latest")
-  VERSION=$(echo "$RELEASE_DATA" | grep '"tag_name"' | cut -d '"' -f 4)
-  if [ -z "$VERSION" ]; then
-    printf "${RED}Error: Failed to fetch latest release information${NC}\n"
-    exit 1
-  fi
-fi
-
-# Remove 'v' prefix if present
-VERSION_NO_V="${VERSION#v}"
-
-printf "${BLUE}Version: $VERSION${NC}\n"
-
-# Construct download URL
-ASSET_NAME="opentui-examples-v${VERSION_NO_V}-${PLATFORM}.zip"
-DOWNLOAD_URL="https://github.com/$REPO/releases/download/${VERSION}/${ASSET_NAME}"
-
-echo "Download URL: $DOWNLOAD_URL"
-echo ""
-
-# Create temporary directory
-TEMP_DIR=$(mktemp -d)
-trap "rm -rf $TEMP_DIR" EXIT
-
-# Download the zip file
-echo "Downloading $ASSET_NAME..."
-if ! curl -L -f -o "$TEMP_DIR/examples.zip" "$DOWNLOAD_URL"; then
-  printf "${RED}Error: Failed to download examples binary${NC}\n"
-  echo "URL attempted: $DOWNLOAD_URL"
-  exit 1
-fi
-
-# Unzip to current directory
-echo "Extracting to current directory..."
-if ! unzip -q -o "$TEMP_DIR/examples.zip" -d .; then
-  printf "${RED}Error: Failed to extract archive${NC}\n"
-  exit 1
-fi
-
-# Make executable (if not on Windows)
-if [ "$OS" != "windows" ]; then
-  if [ -f "./opentui-examples" ]; then
-    chmod +x ./opentui-examples
-    EXEC_NAME="./opentui-examples"
-  elif [ -f "./opentui-examples.exe" ]; then
-    EXEC_NAME="./opentui-examples.exe"
-  else
-    printf "${RED}Error: Executable not found after extraction${NC}\n"
-    ls -la
-    exit 1
-  fi
-else
-  EXEC_NAME="./opentui-examples.exe"
-fi
-
-printf "${GREEN}✓ OpenTUI Examples installed successfully!${NC}\n"
-echo ""
-printf "${BLUE}To run the examples, execute:${NC}\n"
-if [ "$OS" = "windows" ]; then
-  printf "  ${GREEN}.\\\\opentui-examples.exe${NC}\n"
-else
-  printf "  ${GREEN}./opentui-examples${NC}\n"
-fi
-echo ""