@fairyhunter13/opentui-core 0.1.91 → 0.1.92

package/src/examples/text-node-demo.ts

@@ -1,416 +0,0 @@
-#!/usr/bin/env bun
-
-import {
-  CliRenderer,
-  createCliRenderer,
-  TextRenderable,
-  BoxRenderable,
-  t,
-  bold,
-  underline,
-  green,
-  yellow,
-  cyan,
-} from "../index.js"
-import { TextNodeRenderable } from "../renderables/TextNode.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let mainContainer: BoxRenderable | null = null
-let demoText: TextRenderable | null = null
-let instructionsText: TextRenderable | null = null
-let statusText: TextRenderable | null = null
-let updateInterval: Timer | null = null
-
-function clearUpdateInterval(): void {
-  if (updateInterval) {
-    clearInterval(updateInterval)
-    updateInterval = null
-  }
-}
-
-export function run(renderer: CliRenderer): void {
-  renderer.setBackgroundColor("#0d1117")
-
-  mainContainer = new BoxRenderable(renderer, {
-    id: "mainContainer",
-    width: 88,
-    height: 32,
-    backgroundColor: "#161b22",
-    zIndex: 1,
-    borderColor: "#50565d",
-    title: "TextNode Demo",
-    titleAlignment: "center",
-    border: true,
-  })
-  renderer.root.add(mainContainer)
-
-  // Create the main demo text area
-  demoText = new TextRenderable(renderer, {
-    id: "demoText",
-    width: 60,
-    height: 20,
-    zIndex: 2,
-    fg: "#f0f6fc",
-  })
-  mainContainer.add(demoText)
-
-  // Create instructions
-  instructionsText = new TextRenderable(renderer, {
-    id: "instructions",
-    content: t`${bold(cyan("TextNode Demo"))}
-${yellow("•")} Press ${green("1-4")} to see different examples
-${yellow("•")} Press ${green("SPACE")} to toggle dynamic updates
-${yellow("•")} Press ${green("R")} to reset demo
-${yellow("•")} Press ${green("ESC")} to exit
-
-${underline("Current:")} Example 1 - Basic TextNode Creation`,
-    fg: "#c9d1d9",
-  })
-  mainContainer.add(instructionsText)
-
-  // Create status area
-  statusText = new TextRenderable(renderer, {
-    id: "status",
-    content: "Ready - Press 1-4 for examples",
-    width: 84,
-    height: 3,
-    fg: "#58a6ff",
-  })
-  mainContainer.add(statusText)
-
-  // Initialize with first example
-  showExample1()
-
-  // Set up keyboard controls
-  renderer.keyInput.on("keypress", (event) => {
-    const key = event.sequence
-    if (key === "1") {
-      showExample1()
-    } else if (key === "2") {
-      showExample2()
-    } else if (key === "3") {
-      showExample3()
-    } else if (key === "4") {
-      showExample4()
-    } else if (key === " ") {
-      toggleDynamicUpdates()
-    } else if (key === "r" || key === "R") {
-      resetDemo()
-    }
-  })
-}
-
-function showExample1(): void {
-  if (!demoText) return
-
-  // Clear any running intervals
-  clearUpdateInterval()
-
-  // Clear existing TextNodes
-  demoText.clear()
-
-  // Example 1: Basic TextNode Creation
-  const titleNode = TextNodeRenderable.fromString("Basic TextNode Demo", {
-    fg: "#58a6ff",
-    attributes: 1, // bold
-  })
-
-  const subtitleNode = TextNodeRenderable.fromString("\n\nCreating individual TextNodes with different styles:", {
-    fg: "#8b949e",
-  })
-
-  const redNode = TextNodeRenderable.fromString("\n\nRed Text", {
-    fg: "#ff7b72",
-  })
-
-  const blueNode = TextNodeRenderable.fromString(" | Blue Text", {
-    fg: "#79c0ff",
-  })
-
-  const greenNode = TextNodeRenderable.fromString(" | Green Text", {
-    fg: "#56d364",
-  })
-
-  const yellowNode = TextNodeRenderable.fromString(" | Yellow Background", {
-    fg: "#000000",
-    bg: "#d29922",
-  })
-
-  // Create a container node that holds all the styled nodes
-  const containerNode = TextNodeRenderable.fromNodes([
-    titleNode,
-    subtitleNode,
-    redNode,
-    blueNode,
-    greenNode,
-    yellowNode,
-  ])
-
-  // Add to TextRenderable
-  demoText.add(containerNode)
-
-  updateInstructions(
-    "Example 1 - Basic TextNode Creation",
-    "Creating individual TextNodes with different colors and styles",
-  )
-}
-
-function showExample2(): void {
-  if (!demoText) return
-
-  // Clear any running intervals
-  clearUpdateInterval()
-
-  // Clear existing TextNodes
-  demoText.clear()
-
-  // Example 2: Nested TextNode Composition
-  const titleNode = TextNodeRenderable.fromString("Nested Composition Demo", {
-    fg: "#58a6ff",
-    attributes: 1, // bold
-  })
-
-  const introNode = TextNodeRenderable.fromString("\n\nBuilding complex text by nesting TextNodes:", {
-    fg: "#8b949e",
-  })
-
-  // Create nested structure
-  const codeBlock = TextNodeRenderable.fromString(
-    "\n\nfunction calculateTotal(items) {\n  return items.reduce((sum, item) => {\n    return sum + item.price;\n  }, 0);\n}",
-    {
-      fg: "#f0f6fc",
-      bg: "#0d1117",
-    },
-  )
-
-  const commentNode = TextNodeRenderable.fromString("\n\n// This is a nested comment", {
-    fg: "#8b949e",
-  })
-
-  const highlightNode = TextNodeRenderable.fromString(" with ", {
-    fg: "#79c0ff",
-    attributes: 1, // bold
-  })
-
-  const highlightNode2 = TextNodeRenderable.fromString("highlighting", {
-    fg: "#ff7b72",
-    attributes: 4, // underline
-  })
-
-  // Create a sentence that combines multiple styled parts
-  const sentenceNode = TextNodeRenderable.fromNodes([
-    TextNodeRenderable.fromString("\n\nThis demonstrates ", { fg: "#c9d1d9" }),
-    highlightNode,
-    TextNodeRenderable.fromString("and ", { fg: "#c9d1d9" }),
-    highlightNode2,
-    TextNodeRenderable.fromString(" within the same text flow.", { fg: "#c9d1d9" }),
-  ])
-
-  // Create the main container
-  const containerNode = TextNodeRenderable.fromNodes([titleNode, introNode, codeBlock, commentNode, sentenceNode])
-
-  demoText.add(containerNode)
-
-  updateInstructions(
-    "Example 2 - Nested TextNode Composition",
-    "Building complex text structures by composing TextNodes together",
-  )
-}
-
-function showExample3(): void {
-  if (!demoText) return
-
-  // Clear any existing intervals before setting up new ones
-  clearUpdateInterval()
-
-  // Clear existing TextNodes
-  demoText.clear()
-
-  // Example 3: Dynamic TextNode Updates
-  const titleNode = TextNodeRenderable.fromString("Dynamic Updates Demo", {
-    fg: "#58a6ff",
-    attributes: 1, // bold
-  })
-
-  const introNode = TextNodeRenderable.fromString("\n\nTextNodes can be updated dynamically:", {
-    fg: "#8b949e",
-  })
-
-  const counterNode = TextNodeRenderable.fromString(`\n\nCounter: 0`, {
-    fg: "#56d364",
-    attributes: 1, // bold
-  })
-
-  const statusNode = TextNodeRenderable.fromString("\n\nStatus: Idle", {
-    fg: "#79c0ff",
-  })
-
-  const progressNode = TextNodeRenderable.fromString("\n\nProgress: [          ]", {
-    fg: "#d29922",
-  })
-
-  // Store references to nodes that will be updated
-  const containerNode = TextNodeRenderable.fromNodes([titleNode, introNode, counterNode, statusNode, progressNode])
-
-  demoText.add(containerNode)
-
-  // Set up dynamic updates for this example
-  let example3Counter = 0
-  const maxCount = 20
-
-  updateInterval = setInterval(() => {
-    if (!demoText || !containerNode) return
-
-    example3Counter++
-    if (example3Counter > maxCount) {
-      example3Counter = 0
-    }
-
-    // Update counter node
-    counterNode.children = [`\n\nCounter: ${example3Counter}`]
-
-    // Update status based on counter
-    const status = example3Counter < 5 ? "Starting" : example3Counter < 15 ? "Running" : "Finishing"
-    statusNode.children = [`\n\nStatus: ${status}`]
-
-    // Update progress bar
-    const progress = Math.floor((example3Counter / maxCount) * 10)
-    const progressBar = "█".repeat(progress).padEnd(10, "░")
-    progressNode.children = [`\n\nProgress: [${progressBar}]`]
-
-    // TextRenderable will automatically update from TextNode changes
-  }, 100)
-
-  updateInstructions(
-    "Example 3 - Dynamic TextNode Updates",
-    "TextNodes can be modified and the changes reflected in real-time",
-  )
-}
-
-function showExample4(): void {
-  if (!demoText) return
-
-  // Clear any running intervals
-  clearUpdateInterval()
-
-  // Clear existing TextNodes
-  demoText.clear()
-
-  // Example 4: Complex Document Structure
-  const titleNode = TextNodeRenderable.fromString("Complex Document Demo", {
-    fg: "#58a6ff",
-    attributes: 1, // bold
-  })
-
-  const introNode = TextNodeRenderable.fromString("\n\nBuilding a complete document with TextNodes:", {
-    fg: "#8b949e",
-  })
-
-  // Document sections
-  const headerNode = TextNodeRenderable.fromString("\n\n📋 Project Status Report", {
-    fg: "#ffffff",
-    attributes: 1, // bold
-  })
-
-  const section1Node = TextNodeRenderable.fromNodes([
-    TextNodeRenderable.fromString("\n\n🚀 ", { fg: "#56d364" }),
-    TextNodeRenderable.fromString("Progress", { fg: "#58a6ff", attributes: 1 }),
-    TextNodeRenderable.fromString(": 85% complete", { fg: "#c9d1d9" }),
-  ])
-
-  const section2Node = TextNodeRenderable.fromNodes([
-    TextNodeRenderable.fromString("\n\n⚠️  ", { fg: "#d29922" }),
-    TextNodeRenderable.fromString("Issues", { fg: "#ff7b72", attributes: 1 }),
-    TextNodeRenderable.fromString(": 2 minor issues found", { fg: "#c9d1d9" }),
-  ])
-
-  const section3Node = TextNodeRenderable.fromNodes([
-    TextNodeRenderable.fromString("\n\n✅ ", { fg: "#56d364" }),
-    TextNodeRenderable.fromString("Next Steps", { fg: "#58a6ff", attributes: 1 }),
-    TextNodeRenderable.fromString(": Code review and testing", { fg: "#c9d1d9" }),
-  ])
-
-  const footerNode = TextNodeRenderable.fromString("\n\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━", {
-    fg: "#30363d",
-  })
-
-  const signatureNode = TextNodeRenderable.fromString("\nGenerated by OpenTUI TextNode Demo", {
-    fg: "#8b949e",
-    attributes: 2, // italic
-  })
-
-  // Combine all sections into the final document
-  const documentNode = TextNodeRenderable.fromNodes([
-    titleNode,
-    introNode,
-    headerNode,
-    section1Node,
-    section2Node,
-    section3Node,
-    footerNode,
-    signatureNode,
-  ])
-
-  demoText.add(documentNode)
-
-  updateInstructions(
-    "Example 4 - Complex Document Structure",
-    "Creating complete documents by composing multiple styled TextNode sections",
-  )
-}
-
-function toggleDynamicUpdates(): void {
-  if (updateInterval) {
-    clearUpdateInterval()
-    updateStatus("Dynamic updates stopped")
-  } else {
-    // Restart Example 3 if we're not already on it
-    showExample3()
-    updateStatus("Dynamic updates started")
-  }
-}
-
-function resetDemo(): void {
-  clearUpdateInterval()
-  showExample1()
-  updateStatus("Demo reset")
-}
-
-function updateInstructions(title: string, description: string): void {
-  if (!instructionsText) return
-
-  instructionsText.content = t`${bold(cyan("TextNode Demo"))}
-${yellow("•")} Press ${green("1-4")} to see different examples
-${yellow("•")} Press ${green("SPACE")} to toggle dynamic updates
-${yellow("•")} Press ${green("R")} to reset demo
-${yellow("•")} Press ${green("ESC")} to exit
-
-${underline("Current:")} ${title}
-${description}`
-}
-
-function updateStatus(message: string): void {
-  if (!statusText) return
-  statusText.content = message
-}
-
-export function destroy(renderer: CliRenderer): void {
-  clearUpdateInterval()
-
-  mainContainer?.destroyRecursively()
-  mainContainer = null
-  demoText = null
-  instructionsText = null
-  statusText = null
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    targetFps: 30,
-    enableMouseMovement: true,
-    exitOnCtrlC: true,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-  // renderer.start()
-}