@pablozaiden/terminatui 0.1.2 → 0.3.0-beta-1

package/guides/08-complete-application.md

@@ -149,12 +149,9 @@ export class NotificationService {
 Create `src/commands/add.ts`:
 
 ```typescript
-import React from "react";
-import { Text, Box } from "ink";
 import {
   Command,
   ConfigValidationError,
-  type AppContext,
   type OptionSchema,
   type OptionValues,
   type CommandResult,
@@ -192,15 +189,10 @@ export class AddCommand extends Command<typeof options, AddConfig> {
   readonly options = options;
   readonly displayName = "Add Task";
   readonly actionLabel = "Create Task";
-  readonly group = "Tasks";
-  readonly order = 1;
 
   private db = new Database();
 
-  override buildConfig(
-    _ctx: AppContext,
-    opts: OptionValues<typeof options>
-  ): AddConfig {
+  override buildConfig(opts: OptionValues<typeof options>): AddConfig {
     const title = (opts["title"] as string)?.trim();
     if (!title) {
       throw new ConfigValidationError("Task title cannot be empty", "title");
@@ -217,13 +209,11 @@ export class AddCommand extends Command<typeof options, AddConfig> {
     return { title, priority };
   }
 
-  async execute(ctx: AppContext, config: AddConfig): Promise<CommandResult> {
-    ctx.logger.debug(`Creating task: ${config.title}`);
-
+  async execute(config: AddConfig): Promise<CommandResult> {
     const task = await this.db.addTask(config.title, config.priority);
-    
-    const notifications = new NotificationService(ctx.logger);
-    notifications.taskAdded(task);
+
+    // (Example) optional: log to console or your own logger
+    console.log(`Created task: ${task.title}`);
 
     return {
       success: true,
@@ -231,52 +221,14 @@ export class AddCommand extends Command<typeof options, AddConfig> {
       message: `Created task: ${task.title} (${task.id})`,
     };
   }
-
-  override renderResult(result: CommandResult): React.ReactNode {
-    if (!result.success) {
-      return <Text color="red">✗ {result.message}</Text>;
-    }
-
-    const task = result.data as Task;
-    const priorityColor = {
-      high: "red",
-      medium: "yellow",
-      low: "green",
-    }[task.priority] as "red" | "yellow" | "green";
-
-    return (
-      <Box flexDirection="column" gap={1}>
-        <Text color="green">✓ Task Created</Text>
-        <Box>
-          <Text dimColor>ID: </Text>
-          <Text>{task.id}</Text>
-        </Box>
-        <Box>
-          <Text dimColor>Title: </Text>
-          <Text>{task.title}</Text>
-        </Box>
-        <Box>
-          <Text dimColor>Priority: </Text>
-          <Text color={priorityColor}>{task.priority}</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  override getClipboardContent(result: CommandResult): string | undefined {
-    return result.data?.id;
-  }
 }
 ```
 
 Create `src/commands/list.ts`:
 
 ```typescript
-import React from "react";
-import { Text, Box } from "ink";
 import {
   Command,
-  type AppContext,
   type OptionSchema,
   type OptionValues,
   type CommandResult,
@@ -311,27 +263,20 @@ export class ListCommand extends Command<typeof options, ListConfig> {
   readonly options = options;
   readonly displayName = "List Tasks";
   readonly actionLabel = "Show Tasks";
-  readonly group = "Tasks";
-  readonly order = 2;
 
   // Execute immediately when selected in TUI
   readonly immediateExecution = true;
 
   private db = new Database();
 
-  override buildConfig(
-    _ctx: AppContext,
-    opts: OptionValues<typeof options>
-  ): ListConfig {
+  override buildConfig(opts: OptionValues<typeof options>): ListConfig {
     return {
       filter: (opts["filter"] as ListConfig["filter"]) ?? "all",
       priority: opts["priority"] as Task["priority"] | undefined,
     };
   }
 
-  async execute(ctx: AppContext, config: ListConfig): Promise<CommandResult> {
-    ctx.logger.debug(`Listing tasks: filter=${config.filter}`);
-
+  async execute(config: ListConfig): Promise<CommandResult> {
     let tasks = await this.db.listTasks(config.filter);
 
     if (config.priority) {
@@ -344,49 +289,15 @@ export class ListCommand extends Command<typeof options, ListConfig> {
       message: `Found ${tasks.length} tasks`,
     };
   }
-
-  override renderResult(result: CommandResult): React.ReactNode {
-    const tasks = (result.data as Task[]) ?? [];
-
-    if (tasks.length === 0) {
-      return <Text dimColor>No tasks found</Text>;
-    }
-
-    const priorityColor = (p: string) =>
-      ({ high: "red", medium: "yellow", low: "green" })[p] as "red" | "yellow" | "green";
-
-    return (
-      <Box flexDirection="column" gap={1}>
-        <Text bold>Tasks ({tasks.length})</Text>
-        {tasks.map((task) => (
-          <Box key={task.id} gap={2}>
-            <Text dimColor>[{task.id}]</Text>
-            <Text color={task.status === "completed" ? "gray" : undefined}>
-              {task.status === "completed" ? "✓" : "○"} {task.title}
-            </Text>
-            <Text color={priorityColor(task.priority)}>{task.priority}</Text>
-          </Box>
-        ))}
-      </Box>
-    );
-  }
-
-  override getClipboardContent(result: CommandResult): string | undefined {
-    const tasks = result.data as Task[];
-    return tasks?.map((t) => `${t.id}: ${t.title}`).join("\n");
-  }
 }
 ```
 
 Create `src/commands/complete.ts`:
 
 ```typescript
-import React from "react";
-import { Text, Box } from "ink";
 import {
   Command,
   ConfigValidationError,
-  type AppContext,
   type OptionSchema,
   type OptionValues,
   type CommandResult,
@@ -414,15 +325,10 @@ export class CompleteCommand extends Command<typeof options, CompleteConfig> {
   readonly options = options;
   readonly displayName = "Complete Task";
   readonly actionLabel = "Mark Complete";
-  readonly group = "Tasks";
-  readonly order = 3;
 
   private db = new Database();
 
-  override buildConfig(
-    _ctx: AppContext,
-    opts: OptionValues<typeof options>
-  ): CompleteConfig {
+  override buildConfig(opts: OptionValues<typeof options>): CompleteConfig {
     const id = opts["id"] as string;
     if (!id?.trim()) {
       throw new ConfigValidationError("Task ID is required", "id");
@@ -430,11 +336,9 @@ export class CompleteCommand extends Command<typeof options, CompleteConfig> {
     return { id: id.trim() };
   }
 
-  async execute(ctx: AppContext, config: CompleteConfig): Promise<CommandResult> {
-    ctx.logger.debug(`Completing task: ${config.id}`);
-
+  async execute(config: CompleteConfig): Promise<CommandResult> {
     const task = await this.db.completeTask(config.id);
-    
+
     if (!task) {
       return {
         success: false,
@@ -442,8 +346,7 @@ export class CompleteCommand extends Command<typeof options, CompleteConfig> {
       };
     }
 
-    const notifications = new NotificationService(ctx.logger);
-    notifications.taskCompleted(task);
+    console.log(`Completed task: ${task.title}`);
 
     return {
       success: true,
@@ -451,34 +354,14 @@ export class CompleteCommand extends Command<typeof options, CompleteConfig> {
       message: `Completed: ${task.title}`,
     };
   }
-
-  override renderResult(result: CommandResult): React.ReactNode {
-    if (!result.success) {
-      return <Text color="red">✗ {result.message}</Text>;
-    }
-
-    const task = result.data as Task;
-    return (
-      <Box flexDirection="column">
-        <Text color="green">✓ Task Completed</Text>
-        <Text>{task.title}</Text>
-        <Text dimColor>
-          Completed at: {task.completedAt?.toLocaleString()}
-        </Text>
-      </Box>
-    );
-  }
 }
 ```
 
 Create `src/commands/stats.ts`:
 
 ```typescript
-import React from "react";
-import { Text, Box } from "ink";
 import {
   Command,
-  type AppContext,
   type OptionSchema,
   type CommandResult,
 } from "@pablozaiden/terminatui";
@@ -493,15 +376,11 @@ export class StatsCommand extends Command<typeof options> {
   readonly options = options;
   readonly displayName = "Statistics";
   readonly actionLabel = "Show Stats";
-  readonly group = "Analytics";
-  readonly order = 1;
   readonly immediateExecution = true;
 
   private db = new Database();
 
-  async execute(ctx: AppContext): Promise<CommandResult> {
-    ctx.logger.debug("Fetching statistics");
-
+  async execute(): Promise<CommandResult> {
     const stats = await this.db.getStats();
 
     return {
@@ -510,50 +389,6 @@ export class StatsCommand extends Command<typeof options> {
       message: `Total: ${stats.total}, Pending: ${stats.pending}, Completed: ${stats.completed}`,
     };
   }
-
-  override renderResult(result: CommandResult): React.ReactNode {
-    const stats = result.data as TaskStats;
-
-    const completionRate = stats.total > 0
-      ? Math.round((stats.completed / stats.total) * 100)
-      : 0;
-
-    return (
-      <Box flexDirection="column" gap={1}>
-        <Text bold>📊 Task Statistics</Text>
-        
-        <Box flexDirection="column">
-          <Box gap={2}>
-            <Text dimColor>Total:</Text>
-            <Text>{stats.total}</Text>
-          </Box>
-          <Box gap={2}>
-            <Text dimColor>Pending:</Text>
-            <Text color="yellow">{stats.pending}</Text>
-          </Box>
-          <Box gap={2}>
-            <Text dimColor>Completed:</Text>
-            <Text color="green">{stats.completed}</Text>
-          </Box>
-          <Box gap={2}>
-            <Text dimColor>Completion Rate:</Text>
-            <Text color={completionRate >= 50 ? "green" : "yellow"}>
-              {completionRate}%
-            </Text>
-          </Box>
-        </Box>
-
-        <Box flexDirection="column" marginTop={1}>
-          <Text bold>By Priority:</Text>
-          <Box gap={2}>
-            <Text color="red">High: {stats.byPriority.high}</Text>
-            <Text color="yellow">Medium: {stats.byPriority.medium}</Text>
-            <Text color="green">Low: {stats.byPriority.low}</Text>
-          </Box>
-        </Box>
-      </Box>
-    );
-  }
 }
 ```
 
@@ -647,7 +482,6 @@ bun start --verbose add "Debug task" --priority low
 | Display Names | `displayName = "Add Task"` |
 | Action Labels | `actionLabel = "Create Task"` |
 | Immediate Execution | `immediateExecution = true` |
-| Custom Results | `renderResult()` |
 | Clipboard Support | `getClipboardContent()` |
 
 ## What You Learned
@@ -655,7 +489,7 @@ bun start --verbose add "Debug task" --priority low
 - **Project Structure**: Organize code into commands, services, types
 - **Shared Services**: Database and notification services
 - **Command Groups**: Organize commands in TUI sidebar
-- **Full TUI Integration**: Custom rendering, clipboard, immediate execution
+- **Full TUI Integration**: Clipboard, immediate execution
 - **Lifecycle Hooks**: `onBeforeRun` and `onAfterRun`
 - **Production Patterns**: Error handling, validation, logging
 

package/guides/README.md

@@ -36,7 +36,7 @@ bun add @pablozaiden/terminatui
 
 # Create your first command
 cat > src/index.ts << 'EOF'
-import { Command, Application, type AppContext, type OptionSchema } from "@pablozaiden/terminatui";
+import { Command, Application, type OptionSchema } from "@pablozaiden/terminatui";
 
 const options = {
   name: { type: "string", description: "Your name" },
@@ -47,7 +47,7 @@ class HelloCommand extends Command<typeof options> {
   readonly description = "Say hello";
   readonly options = options;
 
-  async execute(ctx: AppContext, config: Record<string, unknown>) {
+  async execute(config: Record<string, unknown>) {
     const name = config["name"] ?? "World";
     console.log(`Hello, ${name}!`);
     return { success: true };
@@ -60,7 +60,11 @@ class MyCLI extends Application {
   }
 }
 
+// Recommended: let Terminatui read `Bun.argv.slice(2)`
 await new MyCLI().run();
+
+// For tests or programmatic invocation:
+// await new MyCLI().runFromArgs(["hello", "--name", "Developer"]);
 EOF
 
 # Run it
@@ -69,6 +73,6 @@ bun src/index.ts hello --name "Developer"
 
 ## Prerequisites
 
-- [Bun](https://bun.sh) or Node.js 18+
+- [Bun](https://bun.sh)
 - Basic TypeScript knowledge
 - Terminal/command-line familiarity

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/terminatui",
-  "version": "0.1.2",
+  "version": "0.3.0-beta-1",
   "description": "Terminal UI and Command Line Application Framework",
   "repository": {
     "url": "https://github.com/PabloZaiden/terminatui"
@@ -8,13 +8,6 @@
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./cli": "./src/cli/index.ts",
-    "./tui": "./src/tui/index.ts",
-    "./components": "./src/components/index.ts",
-    "./hooks": "./src/hooks/index.ts"
-  },
   "scripts": {
     "build": "bunx tsc --noEmit",
     "test": "bun test",
@@ -22,6 +15,9 @@
   },
   "dependencies": {
     "@opentui/react": "0.1.68",
+    "ink": "^6.6.0",
+    "ink-select-input": "^6.2.0",
+    "ink-text-input": "^6.0.0",
     "tslog": "^4.9.3"
   },
   "devDependencies": {