add ink

apps/cli/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space
+indent_size = 2

apps/cli/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

apps/cli/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

apps/cli/.prettierignore

@@ -0,0 +1 @@
+dist

apps/cli/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "cli",
+	"version": "0.0.0",
+	"license": "MIT",
+	"bin": "dist/cli.js",
+	"type": "module",
+	"engines": {
+		"node": ">=16"
+	},
+	"scripts": {
+		"build": "tsc",
+		"dev": "tsc --watch",
+		"start": "bun watch.ts",
+		"typecheck": "tsc --noEmit",
+		"test": "prettier --check . && xo && ava",
+		"lint": "biome check --write .",
+		"lint:check": "biome check .",
+		"format": "biome format --write .",
+		"format:check": "biome format ."
+	},
+	"files": [
+		"dist"
+	],
+	"dependencies": {
+		"ink": "^4.1.0",
+		"meow": "^11.0.0",
+		"react": "^19.1.1"
+	},
+	"devDependencies": {
+		"@sindresorhus/tsconfig": "^3.0.1",
+		"@types/react": "^19.1.11",
+		"@vdemedes/prettier-config": "^2.0.1",
+		"ava": "^5.2.0",
+		"chalk": "^5.6.2",
+		"chokidar": "^3.5.3",
+		"eslint-config-xo-react": "^0.27.0",
+		"eslint-plugin-react": "^7.32.2",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"ink-testing-library": "^3.0.0",
+		"prettier": "^2.8.7",
+		"typescript": "^5.9.3",
+		"xo": "^0.53.1"
+	},
+	"ava": {
+		"extensions": {
+			"ts": "module",
+			"tsx": "module"
+		}
+	},
+	"xo": {
+		"extends": "xo-react",
+		"prettier": true,
+		"rules": {
+			"react/prop-types": "off"
+		}
+	},
+	"prettier": "@vdemedes/prettier-config"
+}

apps/cli/readme.md

@@ -0,0 +1,25 @@
+# cli
+
+> This readme is automatically generated by [create-ink-app](https://github.com/vadimdemedes/create-ink-app)
+
+## Install
+
+```bash
+$ npm install --global cli
+```
+
+## CLI
+
+```
+$ cli --help
+
+  Usage
+    $ cli
+
+  Options
+    --name  Your name
+
+  Examples
+    $ cli --name=Jane
+    Hello, Jane
+```

apps/cli/source/app.tsx

@@ -0,0 +1,63 @@
+import { Box, Text, useApp, useInput } from "ink";
+import React, { useEffect, useState } from "react";
+
+type Props = {
+	name: string | undefined;
+};
+
+export default function App({ name = "Stranger" }: Props) {
+	const [counter, setCounter] = useState(0);
+	const [input, setInput] = useState("");
+	const { exit } = useApp();
+
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setCounter((c) => c + 1);
+		}, 1000);
+
+		return () => clearInterval(timer);
+	}, []);
+
+	useInput((input, key) => {
+		if (key.escape || (key.ctrl && input === "c")) {
+			exit();
+		}
+
+		if (key.return) {
+			setInput("");
+		} else if (key.backspace || key.delete) {
+			setInput((prev) => prev.slice(0, -1));
+		} else if (!key.ctrl && !key.meta) {
+			setInput((prev) => prev + input);
+		}
+	});
+
+	return (
+		<Box
+			flexDirection="column"
+			padding={1}
+			borderStyle="round"
+			borderColor="red"
+		>
+			<Text>
+				👋 Welcome,{" "}
+				<Text color="red" bold>
+					{name}
+				</Text>
+				! 🚀
+			</Text>
+			<Text color="green">⏱️ Runtime: {counter}s</Text>
+			<Box marginTop={1}>
+				<Text>
+					Type something:{" "}
+					<Text color="yellow" bold>
+						{input}
+					</Text>
+				</Text>
+			</Box>
+			<Box marginTop={1}>
+				<Text dimColor>Press ESC or Ctrl+C to exit</Text>
+			</Box>
+		</Box>
+	);
+}

apps/cli/source/cli.tsx

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+import React from "react";
+import { render } from "ink";
+import meow from "meow";
+import App from "./app.js";
+
+const cli = meow(
+	`
+		Usage
+		  $ cli
+
+		Options
+			--name  Your name
+
+		Examples
+		  $ cli --name=Jane
+		  Hello, Jane
+	`,
+	{
+		importMeta: import.meta,
+		flags: {
+			name: {
+				type: "string",
+			},
+		},
+	},
+);
+
+render(<App name={cli.flags.name} />);

apps/cli/test.js

@@ -0,0 +1,17 @@
+import React from "react";
+import chalk from "chalk";
+import test from "ava";
+import { render } from "ink-testing-library";
+import App from "./source/app.js";
+
+test("greet unknown user", (t) => {
+	const { lastFrame } = render(<App />);
+
+	t.is(lastFrame(), `Hello, ${chalk.green("Stranger")}`);
+});
+
+test("greet user with a name", (t) => {
+	const { lastFrame } = render(<App name="Jane" />);
+
+	t.is(lastFrame(), `Hello, ${chalk.green("Jane")}`);
+});

apps/cli/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "@sindresorhus/tsconfig",
+	"compilerOptions": {
+		"outDir": "dist",
+		"skipLibCheck": true,
+		"types": []
+	},
+	"include": ["source"]
+}

apps/cli/watch.ts

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+import { spawn, type ChildProcess } from "node:child_process";
+import chokidar from "chokidar";
+
+let child: ChildProcess | null = null;
+
+function startApp() {
+	if (child) {
+		child.kill();
+	}
+
+	console.log("\x1b[36m[watch] Starting app...\x1b[0m");
+	child = spawn("node", ["dist/cli.js"], {
+		stdio: "inherit",
+		shell: false,
+	});
+
+	child.on("exit", (code) => {
+		if (code !== null && code !== 0 && code !== 130) {
+			console.log(`\x1b[33m[watch] App exited with code ${code}\x1b[0m`);
+		}
+	});
+}
+
+const watcher = chokidar.watch("dist/**/*", {
+	ignoreInitial: false,
+	persistent: true,
+});
+
+watcher.on("ready", () => {
+	console.log("\x1b[36m[watch] Watching dist/ for changes...\x1b[0m");
+	startApp();
+});
+
+watcher.on("change", (path) => {
+	console.log(`\x1b[36m[watch] File changed: ${path}\x1b[0m`);
+	startApp();
+});
+
+process.on("SIGINT", () => {
+	if (child) {
+		child.kill();
+	}
+	process.exit(0);
+});