@rlabs-inc/create-tui 0.1.6 → 0.2.0

package/README.md

@@ -0,0 +1,129 @@
+# @rlabs-inc/create-tui
+
+Scaffold professional TUI Framework applications with a single command.
+
+## Quick Start
+
+```bash
+# Create a new project interactively
+bunx @rlabs-inc/create-tui my-app
+
+# Or use a specific template
+bunx @rlabs-inc/create-tui my-app --template counter
+```
+
+## Templates
+
+### minimal
+
+A clean starting point with essential structure.
+
+```
+my-app/
+├── src/
+│   └── main.ts
+├── package.json
+└── tsconfig.json
+```
+
+**Features:**
+- Basic fullscreen app with theme support
+- Keyboard handling (quit with q/Escape)
+- Ready for your components
+
+### counter
+
+Interactive counter showcase demonstrating reactive state management.
+
+```
+my-app/
+├── src/
+│   ├── main.ts
+│   ├── App.ts
+│   ├── components/
+│   │   ├── Counter.ts
+│   │   ├── CounterPanel.ts
+│   │   ├── Header.ts
+│   │   └── HistoryPanel.ts
+│   └── state/
+│       └── counters.ts
+├── package.json
+└── tsconfig.json
+```
+
+**Features:**
+- Fine-grained reactivity with signals
+- Template primitives (`each`, `show`)
+- Focus management with Tab navigation
+- Auto-scroll in history panel
+- Theme switching (12+ themes)
+- Variant styling
+
+### dashboard
+
+Full system monitor-style dashboard with multiple panels.
+
+```
+my-app/
+├── src/
+│   ├── main.ts
+│   ├── App.ts
+│   ├── components/
+│   │   ├── Header.ts
+│   │   ├── Sidebar.ts
+│   │   ├── MetricsPanel.ts
+│   │   ├── TrafficPanel.ts
+│   │   ├── LogsPanel.ts
+│   │   └── Footer.ts
+│   └── state/
+│       ├── metrics.ts
+│       ├── logs.ts
+│       └── theme.ts
+├── package.json
+└── tsconfig.json
+```
+
+**Features:**
+- Complex multi-panel layout
+- Real-time metric simulation
+- Activity logging with levels (info, warn, error, success)
+- Auto-scrolling log panel
+- Flexbox layout with grow/shrink
+- Theme switching
+
+## CLI Options
+
+```
+Usage: create-tui <project-name> [options]
+
+Options:
+  -t, --template <name>  Template to use (minimal, counter, dashboard)
+  --skip-install         Skip running bun install
+  -h, --help             Show help
+  -v, --version          Show version
+```
+
+## After Scaffolding
+
+```bash
+cd my-app
+bun run dev    # Start development
+```
+
+## Framework Features Showcased
+
+| Feature | minimal | counter | dashboard |
+|---------|---------|---------|-----------|
+| Signals & Reactivity | ✓ | ✓ | ✓ |
+| Theme System | ✓ | ✓ | ✓ |
+| Keyboard Handling | ✓ | ✓ | ✓ |
+| Focus Management | - | ✓ | ✓ |
+| `each()` Primitive | - | ✓ | ✓ |
+| `show()` Primitive | - | ✓ | - |
+| Auto-scroll | - | ✓ | ✓ |
+| Variant Styling | - | ✓ | ✓ |
+| Multi-panel Layout | - | ✓ | ✓ |
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,221 @@
+#!/usr/bin/env bun
+// @bun
+
+// src/cli.ts
+function parseArgs(args) {
+  const result = {
+    help: false,
+    version: false
+  };
+  let i = 0;
+  while (i < args.length) {
+    const arg = args[i];
+    if (arg === "-h" || arg === "--help") {
+      result.help = true;
+    } else if (arg === "-v" || arg === "--version") {
+      result.version = true;
+    } else if (arg === "-t" || arg === "--template") {
+      result.template = args[++i];
+    } else if (arg === "--skip-install") {
+      result.skipInstall = true;
+    } else if (!arg.startsWith("-") && !result.projectName) {
+      result.projectName = arg;
+    }
+    i++;
+  }
+  return result;
+}
+
+// src/scaffold.ts
+import { existsSync, mkdirSync, readdirSync, statSync, readFileSync, writeFileSync } from "fs";
+import { join, dirname } from "path";
+var {spawn } = globalThis.Bun;
+async function scaffold(options) {
+  const { projectName, template, skipInstall } = options;
+  const targetDir = join(process.cwd(), projectName);
+  console.log();
+  console.log(`  Creating project: ${projectName}`);
+  console.log(`  Template: ${template}`);
+  console.log();
+  if (existsSync(targetDir)) {
+    const files = readdirSync(targetDir);
+    if (files.length > 0) {
+      throw new Error(`Directory "${projectName}" already exists and is not empty`);
+    }
+  } else {
+    mkdirSync(targetDir, { recursive: true });
+  }
+  const templatesDir = findTemplatesDir();
+  const templateDir = join(templatesDir, template);
+  if (!existsSync(templateDir)) {
+    throw new Error(`Template "${template}" not found at ${templateDir}`);
+  }
+  console.log("  Copying template files...");
+  copyDir(templateDir, targetDir, projectName);
+  if (!skipInstall) {
+    console.log("  Installing dependencies...");
+    await runCommand("bun", ["install"], targetDir);
+  }
+  console.log();
+  console.log(`  Done! Your project is ready.`);
+  console.log();
+  console.log(`  Next steps:`);
+  console.log(`    cd ${projectName}`);
+  if (skipInstall) {
+    console.log(`    bun install`);
+  }
+  console.log(`    bun run dev`);
+  console.log();
+}
+function findTemplatesDir() {
+  const devPath = join(dirname(import.meta.dir), "templates");
+  if (existsSync(devPath)) {
+    return devPath;
+  }
+  const pkgPath = join(dirname(dirname(import.meta.dir)), "templates");
+  if (existsSync(pkgPath)) {
+    return pkgPath;
+  }
+  throw new Error("Could not find templates directory");
+}
+function copyDir(src, dest, projectName) {
+  const entries = readdirSync(src);
+  for (const entry of entries) {
+    const srcPath = join(src, entry);
+    const destPath = join(dest, entry);
+    const stat = statSync(srcPath);
+    if (stat.isDirectory()) {
+      mkdirSync(destPath, { recursive: true });
+      copyDir(srcPath, destPath, projectName);
+    } else {
+      let content = readFileSync(srcPath, "utf-8");
+      content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+      writeFileSync(destPath, content);
+    }
+  }
+}
+async function runCommand(command, args, cwd) {
+  const proc = spawn({
+    cmd: [command, ...args],
+    cwd,
+    stdout: "inherit",
+    stderr: "inherit"
+  });
+  const exitCode = await proc.exited;
+  if (exitCode !== 0) {
+    throw new Error(`Command "${command} ${args.join(" ")}" failed with exit code ${exitCode}`);
+  }
+}
+
+// src/interactive.ts
+import * as readline from "readline";
+var TEMPLATES = ["minimal", "counter", "dashboard"];
+async function runInteractive(existingName, existingTemplate) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  const question = (prompt) => {
+    return new Promise((resolve) => {
+      rl.question(prompt, (answer) => {
+        resolve(answer.trim());
+      });
+    });
+  };
+  console.log();
+  console.log("  @rlabs-inc/create-tui");
+  console.log("  Create TUI Framework applications");
+  console.log();
+  let projectName = existingName;
+  if (!projectName) {
+    projectName = await question("  Project name: ");
+    if (!projectName) {
+      projectName = "my-tui-app";
+    }
+  }
+  let template = existingTemplate;
+  if (!template) {
+    console.log();
+    console.log("  Available templates:");
+    console.log("    1. minimal   - Bare bones project structure");
+    console.log("    2. counter   - Classic reactive counter example");
+    console.log("    3. dashboard - Multi-component layout showcase");
+    console.log();
+    const choice = await question("  Select template (1-3) [1]: ");
+    const index = parseInt(choice, 10) - 1;
+    if (index >= 0 && index < TEMPLATES.length) {
+      template = TEMPLATES[index];
+    } else {
+      template = "minimal";
+    }
+  }
+  rl.close();
+  return {
+    projectName,
+    template,
+    skipInstall: false
+  };
+}
+
+// src/index.ts
+var TEMPLATES2 = ["minimal", "counter", "dashboard"];
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help) {
+    printHelp();
+    process.exit(0);
+  }
+  if (args.version) {
+    console.log("0.2.0");
+    process.exit(0);
+  }
+  let options;
+  if (!args.projectName || !args.template) {
+    options = await runInteractive(args.projectName, args.template);
+  } else {
+    if (!TEMPLATES2.includes(args.template)) {
+      console.error(`
+Error: Unknown template "${args.template}"`);
+      console.error(`Available templates: ${TEMPLATES2.join(", ")}
+`);
+      process.exit(1);
+    }
+    options = {
+      projectName: args.projectName,
+      template: args.template,
+      skipInstall: args.skipInstall ?? false
+    };
+  }
+  await scaffold(options);
+}
+function printHelp() {
+  console.log(`
+  @rlabs-inc/create-tui
+
+  Create TUI Framework applications with professional project structure.
+
+  Usage:
+    bunx @rlabs-inc/create-tui [project-name] [options]
+
+  Options:
+    -t, --template <name>  Template to use (minimal, counter, dashboard)
+    --skip-install         Skip dependency installation
+    -h, --help             Show this help message
+    -v, --version          Show version number
+
+  Examples:
+    bunx @rlabs-inc/create-tui my-app
+    bunx @rlabs-inc/create-tui my-app --template counter
+    bunx @rlabs-inc/create-tui my-app -t dashboard --skip-install
+
+  Templates:
+    minimal     Bare bones project structure
+    counter     Classic reactive counter example
+    dashboard   Multi-component layout showcase
+`);
+}
+main().catch((err) => {
+  console.error(`
+Error:`, err.message);
+  process.exit(1);
+});

package/package.json

@@ -1,16 +1,28 @@
 {
   "name": "@rlabs-inc/create-tui",
-  "version": "0.1.6",
-  "description": "Create TUI Framework applications - The Terminal UI Framework for TypeScript/Bun",
+  "version": "0.2.0",
+  "description": "Create TUI Framework applications with a single command",
   "type": "module",
   "bin": {
-    "create-tui": "./src/index.ts"
+    "create-tui": "./dist/index.js"
   },
   "files": [
-    "src"
+    "dist",
+    "templates"
   ],
   "scripts": {
-    "dev": "bun run src/index.ts"
+    "dev": "bun run src/index.ts",
+    "build": "bun build src/index.ts --outfile dist/index.js --target bun",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@rlabs-inc/tui": "latest",
+    "@rlabs-inc/signals": "latest"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5.0.0"
   },
   "keywords": [
     "tui",
@@ -23,18 +35,11 @@
     "typescript",
     "reactive"
   ],
-  "author": "Rusty & Watson",
+  "author": "RLabs Inc",
   "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"
+    "url": "https://github.com/rlabs-inc/create-tui"
   },
-  "publishConfig": {
-    "access": "public"
-  }
+  "homepage": "https://github.com/rlabs-inc/tui"
 }

package/templates/counter/README.md

@@ -0,0 +1,88 @@
+# {{PROJECT_NAME}}
+
+A reactive counter showcase demonstrating TUI Framework's fine-grained reactivity.
+
+## Features
+
+- Multiple independent counters with different variants
+- Theme switching between 12+ built-in themes
+- Keyboard navigation and focus management
+- Reactive derived state (totals, averages)
+- Component composition patterns
+
+## Getting Started
+
+```bash
+# Install dependencies
+bun install
+
+# Run the application
+bun run dev
+```
+
+## Controls
+
+| Key | Action |
+|-----|--------|
+| `Tab` | Focus next counter |
+| `Shift+Tab` | Focus previous counter |
+| `+` / `=` | Increment focused counter |
+| `-` | Decrement focused counter |
+| `r` | Reset focused counter |
+| `R` | Reset all counters |
+| `t` | Cycle through themes |
+| `q` / `Escape` | Quit |
+
+## Project Structure
+
+```
+{{PROJECT_NAME}}/
+├── src/
+│   ├── main.ts              # Entry point
+│   ├── App.ts               # Root component with layout
+│   ├── state/
+│   │   └── counters.ts      # Counter state management
+│   └── components/
+│       ├── Counter.ts       # Individual counter component
+│       ├── CounterPanel.ts  # Panel with multiple counters
+│       ├── StatsPanel.ts    # Statistics display
+│       ├── Header.ts        # App header
+│       └── KeyBindings.ts   # Help panel
+├── package.json
+└── README.md
+```
+
+## Key Concepts Demonstrated
+
+### Signals & Derived State
+
+```typescript
+const counter = signal(0)
+const doubled = derived(() => counter.value * 2)
+```
+
+### Theme Variants
+
+```typescript
+box({
+  variant: 'primary',  // Uses theme's primary color
+  children: () => { ... }
+})
+```
+
+### Focus Management
+
+```typescript
+import { focusManager } from '@rlabs-inc/tui'
+
+// Register focusable component
+input({ ... })  // Auto-registers
+
+// Navigate focus
+keyboard.onKey('Tab', () => focusManager.next())
+```
+
+## Learn More
+
+- [TUI Framework](https://github.com/rlabs-inc/tui)
+- [Signals Library](https://github.com/rlabs-inc/signals)

package/templates/counter/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{PROJECT_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",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@rlabs-inc/tui": "latest",
+    "@rlabs-inc/signals": "latest"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/counter/src/App.ts

@@ -0,0 +1,65 @@
+/**
+ * Root Application Component
+ *
+ * Layout structure:
+ * - Header (app title + theme indicator)
+ * - Main area:
+ *   - Left: Counter panel with focusable counters
+ *   - Right: Stats panel + scrollable history
+ * - Footer (key bindings)
+ */
+
+import { box, text, t, BorderStyle } from '@rlabs-inc/tui'
+import { Header } from './components/Header'
+import { CounterPanel } from './components/CounterPanel'
+import { StatsPanel } from './components/StatsPanel'
+import { HistoryPanel } from './components/HistoryPanel'
+import { KeyBindings } from './components/KeyBindings'
+
+export function App() {
+  box({
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    children: () => {
+      // Header
+      Header()
+
+      // Main content area
+      box({
+        grow: 1,
+        flexDirection: 'row',
+        padding: 1,
+        gap: 1,
+        children: () => {
+          // Left panel: Counters
+          box({
+            width: '50%',
+            flexDirection: 'column',
+            gap: 1,
+            children: () => {
+              CounterPanel()
+            },
+          })
+
+          // Right panel: Stats + History
+          box({
+            grow: 1,
+            flexDirection: 'column',
+            gap: 1,
+            children: () => {
+              // Statistics
+              StatsPanel()
+
+              // History with auto-scroll
+              HistoryPanel()
+            },
+          })
+        },
+      })
+
+      // Footer: Key bindings
+      KeyBindings()
+    },
+  })
+}

package/templates/counter/src/components/Counter.ts

@@ -0,0 +1,78 @@
+/**
+ * Counter Component
+ *
+ * Individual counter with focus support and variant styling.
+ * Demonstrates:
+ * - Focus management integration
+ * - Variant-based theming
+ * - Reactive value display
+ */
+
+import { derived } from '@rlabs-inc/signals'
+import { box, text, t, BorderStyle, Attr, getVariantStyle } from '@rlabs-inc/tui'
+import type { Counter as CounterState } from '../state/counters'
+
+interface CounterProps {
+  counter: CounterState
+  focused: boolean
+}
+
+export function Counter({ counter, focused }: CounterProps) {
+  // Get variant colors
+  const variantStyle = getVariantStyle(counter.variant)
+
+  box({
+    border: focused ? BorderStyle.DOUBLE : BorderStyle.SINGLE,
+    borderColor: focused ? t.primary : t.border,
+    padding: 1,
+    bg: focused ? t.surface : undefined,
+    children: () => {
+      // Counter name with variant indicator
+      box({
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        children: () => {
+          text({
+            content: counter.name,
+            fg: focused ? t.primary : t.text,
+            attrs: focused ? Attr.BOLD : 0,
+          })
+          box({
+            width: 2,
+            height: 1,
+            bg: variantStyle.bg,
+          })
+        },
+      })
+
+      // Value display - large and centered
+      box({
+        alignItems: 'center',
+        padding: 1,
+        children: () => {
+          text({
+            content: derived(() => {
+              const val = counter.value.value
+              return val >= 0 ? `+${val}` : `${val}`
+            }),
+            fg: derived(() =>
+              counter.value.value >= 0 ? t.success.value : t.error.value
+            ),
+            attrs: Attr.BOLD,
+          })
+        },
+      })
+
+      // Focus indicator
+      box({
+        alignItems: 'center',
+        children: () => {
+          text({
+            content: focused ? '[+/-] to change' : '',
+            fg: t.textDim,
+          })
+        },
+      })
+    },
+  })
+}