@rlabs-inc/create-tui 0.1.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@rlabs-inc/create-tui",
+  "version": "0.1.0",
+  "description": "Create TUI Framework applications - The Terminal UI Framework for TypeScript/Bun",
+  "type": "module",
+  "bin": {
+    "create-tui": "./src/index.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "bun run src/index.ts"
+  },
+  "keywords": [
+    "tui",
+    "terminal",
+    "ui",
+    "cli",
+    "create",
+    "scaffold",
+    "bun",
+    "typescript",
+    "reactive"
+  ],
+  "author": "Rusty & Watson",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rlabs-inc/tui.git",
+    "directory": "packages/tui-cli"
+  },
+  "homepage": "https://github.com/rlabs-inc/tui",
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/commands/create.ts

@@ -0,0 +1,298 @@
+/**
+ * Create command - scaffold a new TUI Framework project
+ */
+
+import { mkdir, exists } from 'fs/promises'
+import { join, resolve, basename } from 'path'
+import { $ } from 'bun'
+import { c, symbols, box } from '../utils/colors'
+import { text, confirm, spinner } from '../utils/prompts'
+
+interface CreateOptions {
+  projectName?: string
+  template?: string
+}
+
+export async function create(options: CreateOptions) {
+  console.log()
+  console.log(box([
+    `${c.brightCyan(symbols.sparkle)} ${c.bold('Create TUI Project')} ${c.brightCyan(symbols.sparkle)}`,
+    '',
+    c.dim('Scaffold a new TUI Framework application'),
+  ], { padding: 1 }))
+  console.log()
+
+  // Get project name
+  let projectName = options.projectName
+
+  if (!projectName) {
+    projectName = await text({
+      message: 'Project name',
+      placeholder: 'my-tui-app',
+      defaultValue: 'my-tui-app',
+      validate: (value) => {
+        if (!value) return 'Project name is required'
+        if (!/^[a-z0-9-_]+$/i.test(value)) {
+          return 'Project name can only contain letters, numbers, dashes, and underscores'
+        }
+        return true
+      }
+    })
+  }
+
+  const projectPath = resolve(process.cwd(), projectName)
+  const displayName = basename(projectPath)
+
+  // Check if directory exists
+  if (await exists(projectPath)) {
+    const overwrite = await confirm({
+      message: `Directory ${c.bold(displayName)} already exists. Overwrite?`,
+      defaultValue: false
+    })
+
+    if (!overwrite) {
+      console.log(`${c.muted(symbols.cross)} Cancelled`)
+      return
+    }
+  }
+
+  console.log()
+
+  // Create project
+  const spin = spinner('Creating project structure...')
+
+  try {
+    // Create directories
+    await mkdir(join(projectPath, 'src', 'components'), { recursive: true })
+
+    // Write files using Bun.write (faster than fs.writeFile)
+    await Promise.all([
+      Bun.write(join(projectPath, 'package.json'), PACKAGE_JSON(displayName)),
+      Bun.write(join(projectPath, 'bunfig.toml'), BUNFIG_TOML),
+      Bun.write(join(projectPath, 'tsconfig.json'), TSCONFIG_JSON),
+      Bun.write(join(projectPath, '.gitignore'), GITIGNORE),
+      Bun.write(join(projectPath, 'README.md'), README(displayName)),
+      Bun.write(join(projectPath, 'src', 'main.ts'), MAIN_TS),
+      Bun.write(join(projectPath, 'src', 'App.tui'), APP_TUI),
+      Bun.write(join(projectPath, 'src', 'components', 'Counter.tui'), COUNTER_TUI),
+    ])
+
+    spin.stop('Project structure created')
+
+    // Install dependencies using Bun shell
+    const installSpin = spinner('Installing dependencies...')
+
+    try {
+      await $`cd ${projectPath} && bun install`.quiet()
+      installSpin.stop('Dependencies installed')
+    } catch {
+      installSpin.stop()
+      console.log(`${c.warning(symbols.bullet)} Run ${c.info('bun install')} manually to install dependencies`)
+    }
+
+    // Success!
+    console.log()
+    console.log(box([
+      `${c.success(symbols.check)} ${c.bold('Project created!')}`,
+      '',
+      `${c.dim('Next steps:')}`,
+      '',
+      `  ${c.muted('$')} ${c.info(`cd ${displayName}`)}`,
+      `  ${c.muted('$')} ${c.info('bun run dev')}`,
+      '',
+      c.dim('Happy hacking!'),
+    ], { title: ` ${symbols.star} Success `, padding: 1 }))
+    console.log()
+
+  } catch (error) {
+    spin.stop()
+    throw error
+  }
+}
+
+// Template files
+
+const PACKAGE_JSON = (name: string) => `{
+  "name": "${name}",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "bun run src/main.ts",
+    "build": "bun build src/main.ts --outfile dist/main.js --target bun"
+  },
+  "dependencies": {
+    "@rlabs-inc/tui": "latest",
+    "@rlabs-inc/signals": "latest"
+  },
+  "devDependencies": {
+    "@rlabs-inc/tui-compiler": "latest",
+    "@types/bun": "latest",
+    "typescript": "^5.0.0"
+  }
+}
+`
+
+const BUNFIG_TOML = `# TUI Framework configuration
+# The compiler plugin enables .tui file imports
+
+preload = ["@rlabs-inc/tui-compiler/register"]
+`
+
+const TSCONFIG_JSON = `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": true,
+    "types": ["bun-types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
+`
+
+const GITIGNORE = `# Dependencies
+node_modules/
+
+# Build output
+dist/
+
+# Environment
+.env
+.env.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Debug
+*.log
+`
+
+const README = (name: string) => `# ${name}
+
+A TUI Framework application.
+
+## Getting Started
+
+\`\`\`bash
+# Run in development
+bun run dev
+
+# Build for production
+bun run build
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+${name}/
+├── src/
+│   ├── main.ts           # Entry point
+│   ├── App.tui           # Root component
+│   └── components/       # Reusable components
+│       └── Counter.tui
+├── bunfig.toml           # Bun configuration (enables .tui compiler)
+├── package.json
+└── tsconfig.json
+\`\`\`
+
+## Learn More
+
+- [TUI Framework Documentation](https://github.com/rlabs-inc/tui)
+- [Signals Library](https://github.com/rlabs-inc/signals)
+`
+
+const MAIN_TS = `/**
+ * TUI Application Entry Point
+ */
+
+import '@rlabs-inc/tui-compiler/register'
+import { mount, keyboard } from '@rlabs-inc/tui'
+import App from './App.tui'
+
+async function main() {
+  // Mount the application
+  const cleanup = await mount(() => {
+    App()
+  })
+
+  // Handle exit
+  keyboard.onKey((event) => {
+    if (event.key === 'q' || (event.modifiers.ctrl && event.key === 'c')) {
+      cleanup().then(() => process.exit(0))
+    }
+  })
+}
+
+main().catch(console.error)
+`
+
+const APP_TUI = `<script lang="ts">
+  /**
+   * Root Application Component
+   */
+  import Counter from './components/Counter.tui'
+</script>
+
+<box
+  width="100%"
+  height="100%"
+  flexDirection="column"
+  justifyContent="center"
+  alignItems="center"
+  gap={2}
+>
+  <text variant="accent">Welcome to TUI Framework</text>
+  <Counter initialCount={0} />
+  <text variant="muted">Press Q to quit</text>
+</box>
+`
+
+const COUNTER_TUI = `<script lang="ts">
+  /**
+   * Counter Component
+   *
+   * A simple reactive counter to demonstrate TUI Framework basics.
+   */
+  import { keyboard } from '@rlabs-inc/tui'
+
+  export let initialCount: number = 0
+
+  const count = signal(initialCount)
+
+  // Handle keyboard input
+  keyboard.onKey((event) => {
+    if (event.key === 'ArrowUp' || event.key === '+') {
+      count.value++
+    }
+    if (event.key === 'ArrowDown' || event.key === '-') {
+      count.value--
+    }
+  })
+</script>
+
+<box
+  border={1}
+  padding={1}
+  flexDirection="column"
+  alignItems="center"
+  gap={1}
+>
+  <text>Count: {count}</text>
+  <text variant="muted">Use +/- or arrow keys</text>
+</box>
+`

package/src/index.ts

@@ -0,0 +1,75 @@
+#!/usr/bin/env bun
+/**
+ * create-tui - Create TUI Framework applications
+ *
+ * Usage:
+ *   bun create tui my-app
+ *   bunx create-tui my-app
+ *   npx create-tui my-app
+ */
+
+import { parseArgs } from 'util'
+import { c, symbols } from './utils/colors'
+import { create } from './commands/create'
+
+const VERSION = '0.1.0'
+
+const HELP = `
+${c.bold('@rlabs-inc/create-tui')} ${c.muted(`v${VERSION}`)}
+
+${c.dim('Create TUI Framework applications')}
+${c.dim('The Terminal UI Framework for TypeScript/Bun')}
+
+${c.bold('Usage:')}
+  ${c.info('bunx @rlabs-inc/create-tui')} ${c.muted('<project-name>')}
+  ${c.info('npx @rlabs-inc/create-tui')} ${c.muted('<project-name>')}
+
+${c.bold('Options:')}
+  ${c.muted('-h, --help')}       Show this help message
+  ${c.muted('-v, --version')}    Show version
+
+${c.bold('Examples:')}
+  ${c.dim('$')} ${c.info('bunx @rlabs-inc/create-tui')} my-app
+  ${c.dim('$')} ${c.info('bunx @rlabs-inc/create-tui')} dashboard
+
+${c.muted('Documentation: https://github.com/rlabs-inc/tui')}
+`
+
+async function main() {
+  try {
+    const { values, positionals } = parseArgs({
+      args: Bun.argv.slice(2),
+      options: {
+        help: { type: 'boolean', short: 'h' },
+        version: { type: 'boolean', short: 'v' },
+        template: { type: 'string', short: 't' },
+      },
+      allowPositionals: true,
+      strict: false,
+    })
+
+    // Help flag
+    if (values.help) {
+      console.log(HELP)
+      return
+    }
+
+    // Version flag
+    if (values.version) {
+      console.log(`${c.bold('@rlabs-inc/create-tui')} ${c.muted(`v${VERSION}`)}`)
+      return
+    }
+
+    // Get project name from positional args
+    const projectName = positionals[0]
+
+    // Run create command (will prompt for name if not provided)
+    await create({ projectName, template: values.template as string | undefined })
+
+  } catch (error: any) {
+    console.error(`${c.error(symbols.cross)} ${error.message}`)
+    process.exit(1)
+  }
+}
+
+main()

package/src/utils/colors.ts

@@ -0,0 +1,132 @@
+/**
+ * Terminal colors using Bun's built-in color API
+ *
+ * - Automatically respects NO_COLOR environment variable
+ * - Automatically detects terminal color support (16, 256, or 16m colors)
+ * - Uses semantic colors that work with any terminal theme
+ */
+
+const RESET = '\x1b[0m'
+
+// Helper to wrap text with ANSI color
+function colorize(text: string, color: string): string {
+  const ansi = Bun.color(color, 'ansi')
+  if (!ansi) return text
+  return `${ansi}${text}${RESET}`
+}
+
+// Style helpers
+function bold(text: string): string {
+  return `\x1b[1m${text}${RESET}`
+}
+
+function dim(text: string): string {
+  return `\x1b[2m${text}${RESET}`
+}
+
+function italic(text: string): string {
+  return `\x1b[3m${text}${RESET}`
+}
+
+function underline(text: string): string {
+  return `\x1b[4m${text}${RESET}`
+}
+
+// Semantic color helpers that work with any terminal theme
+export const c = {
+  // Emphasis
+  bold,
+  dim,
+  italic,
+  underline,
+
+  // Semantic colors using Bun.color for automatic terminal detection
+  success: (s: string) => colorize(s, '#22c55e'),  // Green
+  error: (s: string) => colorize(s, '#ef4444'),    // Red
+  warning: (s: string) => colorize(s, '#eab308'),  // Yellow
+  info: (s: string) => colorize(s, '#06b6d4'),     // Cyan
+  accent: (s: string) => colorize(s, '#a855f7'),   // Purple
+
+  // Muted text (gray)
+  muted: (s: string) => colorize(s, '#6b7280'),
+
+  // Bright variants
+  brightGreen: (s: string) => colorize(s, '#4ade80'),
+  brightCyan: (s: string) => colorize(s, '#22d3ee'),
+  brightYellow: (s: string) => colorize(s, '#facc15'),
+  brightMagenta: (s: string) => colorize(s, '#c084fc'),
+
+  // Custom color
+  color: (s: string, color: string) => colorize(s, color),
+}
+
+// Symbols that work in most terminals
+export const symbols = {
+  check: '\u2714',      // ✔
+  cross: '\u2718',      // ✘
+  arrow: '\u276F',      // ❯
+  bullet: '\u25CF',     // ●
+  line: '\u2500',       // ─
+  corner: '\u2514',     // └
+  tee: '\u251C',        // ├
+  vertical: '\u2502',   // │
+  star: '\u2605',       // ★
+  sparkle: '\u2728',    // ✨
+}
+
+// Strip ANSI codes for length calculation
+function stripAnsi(s: string): string {
+  return s.replace(/\x1b\[[0-9;]*m/g, '')
+}
+
+// Box drawing for beautiful output
+export function box(content: string[], options: { title?: string; padding?: number } = {}): string {
+  const padding = options.padding ?? 1
+  const maxWidth = Math.max(...content.map(l => stripAnsi(l).length), stripAnsi(options.title ?? '').length)
+  const width = maxWidth + padding * 2
+
+  const horizontal = symbols.line.repeat(width + 2)
+  const empty = `${symbols.vertical}${' '.repeat(width + 2)}${symbols.vertical}`
+  const pad = ' '.repeat(padding)
+
+  const lines: string[] = []
+
+  // Top border with optional title
+  if (options.title) {
+    const titleText = options.title
+    const strippedTitle = stripAnsi(titleText)
+    const leftPad = Math.floor((width + 2 - strippedTitle.length) / 2)
+    const rightPad = width + 2 - strippedTitle.length - leftPad
+    lines.push(`\u256D${symbols.line.repeat(leftPad)}${titleText}${symbols.line.repeat(rightPad)}\u256E`)
+  } else {
+    lines.push(`\u256D${horizontal}\u256E`)
+  }
+
+  // Top padding
+  for (let i = 0; i < padding; i++) lines.push(empty)
+
+  // Content
+  for (const line of content) {
+    const stripped = stripAnsi(line)
+    const rightPad = width - stripped.length - padding
+    lines.push(`${symbols.vertical}${pad}${line}${' '.repeat(Math.max(0, rightPad) + padding)}${symbols.vertical}`)
+  }
+
+  // Bottom padding
+  for (let i = 0; i < padding; i++) lines.push(empty)
+
+  // Bottom border
+  lines.push(`\u2570${horizontal}\u256F`)
+
+  return lines.join('\n')
+}
+
+// Spinner frames
+export const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+
+// Progress bar
+export function progressBar(percent: number, width = 20): string {
+  const filled = Math.round(width * percent)
+  const empty = width - filled
+  return `${c.success('\u2588'.repeat(filled))}${c.muted('\u2591'.repeat(empty))}`
+}

package/src/utils/prompts.ts

@@ -0,0 +1,273 @@
+/**
+ * Simple interactive prompts without external dependencies
+ *
+ * Uses raw mode to capture key presses for a smooth experience
+ */
+
+import { c, symbols } from './colors'
+
+const stdin = process.stdin
+const stdout = process.stdout
+
+// Read a line of input
+export async function text(options: {
+  message: string
+  placeholder?: string
+  defaultValue?: string
+  validate?: (value: string) => string | true
+}): Promise<string> {
+  const { message, placeholder, defaultValue, validate } = options
+
+  // Print prompt
+  stdout.write(`${c.success(symbols.arrow)} ${c.bold(message)}`)
+  if (defaultValue) {
+    stdout.write(` ${c.muted(`(${defaultValue})`)}`)
+  }
+  stdout.write(': ')
+
+  if (placeholder && !defaultValue) {
+    stdout.write(c.muted(placeholder))
+    stdout.write('\x1b[' + placeholder.length + 'D') // Move cursor back
+  }
+
+  return new Promise((resolve) => {
+    let buffer = ''
+    let placeholderCleared = false
+
+    const cleanup = () => {
+      stdin.setRawMode(false)
+      stdin.removeListener('data', onData)
+      stdin.pause()
+    }
+
+    const onData = (data: Buffer) => {
+      const char = data.toString()
+      const code = data[0]
+
+      // Clear placeholder on first input
+      if (!placeholderCleared && placeholder && buffer === '') {
+        stdout.write('\x1b[' + placeholder.length + 'D')
+        stdout.write(' '.repeat(placeholder.length))
+        stdout.write('\x1b[' + placeholder.length + 'D')
+        placeholderCleared = true
+      }
+
+      // Enter
+      if (code === 13) {
+        stdout.write('\n')
+        const result = buffer || defaultValue || ''
+
+        // Validate
+        if (validate) {
+          const validationResult = validate(result)
+          if (validationResult !== true) {
+            stdout.write(`${c.error(symbols.cross)} ${validationResult}\n`)
+            stdout.write(`${c.success(symbols.arrow)} ${c.bold(message)}: `)
+            buffer = ''
+            return
+          }
+        }
+
+        cleanup()
+        resolve(result)
+        return
+      }
+
+      // Ctrl+C
+      if (code === 3) {
+        stdout.write('\n')
+        cleanup()
+        process.exit(1)
+      }
+
+      // Backspace
+      if (code === 127) {
+        if (buffer.length > 0) {
+          buffer = buffer.slice(0, -1)
+          stdout.write('\b \b')
+        }
+        return
+      }
+
+      // Printable characters
+      if (code >= 32 && code < 127) {
+        buffer += char
+        stdout.write(char)
+      }
+    }
+
+    stdin.resume()
+    stdin.setRawMode(true)
+    stdin.on('data', onData)
+  })
+}
+
+// Select from options
+export async function select<T extends string>(options: {
+  message: string
+  options: { value: T; label: string; hint?: string }[]
+}): Promise<T> {
+  const { message, options: choices } = options
+  let selectedIndex = 0
+
+  const render = () => {
+    // Clear previous render
+    stdout.write('\x1b[?25l') // Hide cursor
+
+    for (let i = 0; i < choices.length; i++) {
+      const choice = choices[i]
+      const isSelected = i === selectedIndex
+      const prefix = isSelected ? c.success(symbols.arrow) : ' '
+      const label = isSelected ? c.bold(choice.label) : choice.label
+      const hint = choice.hint ? c.muted(` ${choice.hint}`) : ''
+
+      stdout.write(`  ${prefix} ${label}${hint}\n`)
+    }
+  }
+
+  stdout.write(`${c.success(symbols.arrow)} ${c.bold(message)}\n`)
+  render()
+
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      stdin.setRawMode(false)
+      stdin.removeListener('data', onData)
+      stdin.pause()
+      stdout.write('\x1b[?25h') // Show cursor
+    }
+
+    const onData = (data: Buffer) => {
+      const code = data[0]
+
+      // Ctrl+C
+      if (code === 3) {
+        stdout.write('\n')
+        cleanup()
+        process.exit(1)
+      }
+
+      // Up arrow or k
+      if ((data[0] === 27 && data[1] === 91 && data[2] === 65) || code === 107) {
+        selectedIndex = (selectedIndex - 1 + choices.length) % choices.length
+        // Move cursor up and re-render
+        stdout.write(`\x1b[${choices.length}A`)
+        render()
+        return
+      }
+
+      // Down arrow or j
+      if ((data[0] === 27 && data[1] === 91 && data[2] === 66) || code === 106) {
+        selectedIndex = (selectedIndex + 1) % choices.length
+        // Move cursor up and re-render
+        stdout.write(`\x1b[${choices.length}A`)
+        render()
+        return
+      }
+
+      // Enter
+      if (code === 13) {
+        cleanup()
+        // Clear the options
+        stdout.write(`\x1b[${choices.length}A`)
+        for (let i = 0; i < choices.length; i++) {
+          stdout.write('\x1b[2K\n')
+        }
+        stdout.write(`\x1b[${choices.length}A`)
+        stdout.write(`  ${c.muted(symbols.check)} ${choices[selectedIndex].label}\n`)
+        resolve(choices[selectedIndex].value)
+        return
+      }
+    }
+
+    stdin.resume()
+    stdin.setRawMode(true)
+    stdin.on('data', onData)
+  })
+}
+
+// Confirm yes/no
+export async function confirm(options: {
+  message: string
+  defaultValue?: boolean
+}): Promise<boolean> {
+  const { message, defaultValue = true } = options
+  const hint = defaultValue ? c.muted('[Y/n]') : c.muted('[y/N]')
+
+  stdout.write(`${c.success(symbols.arrow)} ${c.bold(message)} ${hint} `)
+
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      stdin.setRawMode(false)
+      stdin.removeListener('data', onData)
+      stdin.pause()
+    }
+
+    const onData = (data: Buffer) => {
+      const char = data.toString().toLowerCase()
+      const code = data[0]
+
+      // Ctrl+C
+      if (code === 3) {
+        stdout.write('\n')
+        cleanup()
+        process.exit(1)
+      }
+
+      // Enter (use default)
+      if (code === 13) {
+        stdout.write(defaultValue ? 'Yes' : 'No')
+        stdout.write('\n')
+        cleanup()
+        resolve(defaultValue)
+        return
+      }
+
+      // Y
+      if (char === 'y') {
+        stdout.write('Yes\n')
+        cleanup()
+        resolve(true)
+        return
+      }
+
+      // N
+      if (char === 'n') {
+        stdout.write('No\n')
+        cleanup()
+        resolve(false)
+        return
+      }
+    }
+
+    stdin.resume()
+    stdin.setRawMode(true)
+    stdin.on('data', onData)
+  })
+}
+
+// Spinner
+export function spinner(message: string): { stop: (finalMessage?: string) => void } {
+  const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+  let i = 0
+  let stopped = false
+
+  stdout.write('\x1b[?25l') // Hide cursor
+
+  const interval = setInterval(() => {
+    if (stopped) return
+    stdout.write(`\r${c.info(frames[i])} ${message}`)
+    i = (i + 1) % frames.length
+  }, 80)
+
+  return {
+    stop: (finalMessage?: string) => {
+      stopped = true
+      clearInterval(interval)
+      stdout.write('\r\x1b[K') // Clear line
+      if (finalMessage) {
+        stdout.write(`${c.success(symbols.check)} ${finalMessage}\n`)
+      }
+      stdout.write('\x1b[?25h') // Show cursor
+    }
+  }
+}