@rlabs-inc/create-tui 0.1.5 → 0.2.0

package/templates/minimal/src/main.ts

@@ -0,0 +1,24 @@
+/**
+ * {{PROJECT_NAME}} - TUI Application
+ *
+ * Entry point for your TUI application.
+ * Run with: bun run dev
+ */
+
+import { mount, keyboard } from '@rlabs-inc/tui'
+import { App } from './App'
+
+async function main() {
+  // Mount the application in fullscreen mode
+  const cleanup = await mount(
+    () => App(),
+    { mode: 'fullscreen', mouse: true }
+  )
+
+  // Global keyboard shortcuts
+  keyboard.onKey(['q', 'Q', 'Escape'], () => {
+    cleanup()
+  })
+}
+
+main().catch(console.error)

package/templates/minimal/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "types": ["bun-types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/src/commands/create.ts

@@ -1,282 +0,0 @@
-/**
- * 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 (q or Ctrl+C)
-  keyboard.on((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">
-  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 />
-  <text variant="muted">Press Q to quit</text>
-</box>
-`
-
-const COUNTER_TUI = `<script lang="ts">
-  const count = signal(0)
-
-  keyboard.onKey(['+', '=', 'ArrowUp'], () => count.value++)
-  keyboard.onKey(['-', '_', 'ArrowDown'], () => count.value--)
-  keyboard.onKey('r', () => count.value = 0)
-</script>
-
-<box
-  border={1}
-  borderColor={t.primary}
-  padding={1}
-  flexDirection="column"
-  alignItems="center"
-  gap={1}
->
-  <text fg={t.accent}>Counter</text>
-  <text fg={t.textBright}>{count}</text>
-  <text fg={t.textMuted}>[+/-] change  [r] reset</text>
-</box>
-`

package/src/index.ts

@@ -1,75 +0,0 @@
-#!/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.4'
-
-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

@@ -1,132 +0,0 @@
-/**
- * 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))}`
-}