@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/data-explorer.mjs

@@ -0,0 +1,482 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useCallback, useDeferredValue, useMemo, useState } from "react";
+import { Box, Divider, Kbd, Lead, ListView, Muted, Text, TextInput, createTerm, render, useApp, useBoxRect, useInput } from "silvery";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region apps/data-explorer.tsx
+/**
+* Data Explorer — Process Table Example
+*
+* A process explorer with a searchable, scrollable table demonstrating:
+* - Table-like display with responsive column widths via useBoxRect()
+* - TextInput for live search/filter with useDeferredValue
+* - ListView for smooth scrolling through 500+ rows
+* - Keyboard navigation with j/k and vim-style jumps
+* - Color-coded status indicators
+*
+* Usage: bun run examples/apps/data-explorer.tsx
+*
+* Controls:
+*   j/k or Up/Down  - Navigate rows
+*   d/u             - Half-page down/up
+*   g/G             - Jump to first/last
+*   /               - Toggle search mode
+*   Esc             - Exit search / quit
+*   q               - Quit (when not searching)
+*/
+const meta = {
+	name: "Data Explorer",
+	description: "Process explorer table with search, ListView, and responsive column widths",
+	features: [
+		"useBoxRect()",
+		"TextInput",
+		"useInput()",
+		"responsive layout",
+		"useDeferredValue"
+	]
+};
+const PROCESS_NAMES = [
+	"node",
+	"python3",
+	"nginx",
+	"redis-server",
+	"postgres",
+	"docker",
+	"sshd",
+	"systemd",
+	"cron",
+	"rsyslogd",
+	"webpack",
+	"vite",
+	"chrome",
+	"firefox",
+	"code",
+	"vim",
+	"tmux",
+	"bash",
+	"zsh",
+	"containerd",
+	"kubelet",
+	"etcd",
+	"coredns",
+	"flannel",
+	"prometheus",
+	"grafana",
+	"elasticsearch",
+	"kibana",
+	"logstash",
+	"rabbitmq",
+	"kafka",
+	"zookeeper",
+	"consul",
+	"vault",
+	"haproxy",
+	"traefik",
+	"envoy",
+	"istio-proxy",
+	"jaeger",
+	"mysql",
+	"mongo",
+	"cassandra",
+	"clickhouse",
+	"influxdb",
+	"jenkins",
+	"gitlab-runner",
+	"buildkitd",
+	"registry",
+	"cadvisor",
+	"node-exporter",
+	"alertmanager",
+	"telegraf",
+	"bun",
+	"deno",
+	"esbuild",
+	"swc",
+	"turbo",
+	"pnpm"
+];
+const USERS = [
+	"root",
+	"www-data",
+	"postgres",
+	"redis",
+	"node",
+	"admin",
+	"deploy",
+	"monitor"
+];
+const STATUSES = [
+	"running",
+	"sleeping",
+	"stopped",
+	"zombie"
+];
+function seededRandom(seed) {
+	let s = seed;
+	return () => {
+		s = s * 1664525 + 1013904223 & 2147483647;
+		return s / 2147483647;
+	};
+}
+function formatUptime(seconds) {
+	if (seconds < 60) return `${seconds}s`;
+	if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
+	if (seconds < 86400) return `${Math.floor(seconds / 3600)}h${Math.floor(seconds % 3600 / 60)}m`;
+	return `${Math.floor(seconds / 86400)}d${Math.floor(seconds % 86400 / 3600)}h`;
+}
+function generateProcesses(count) {
+	const rng = seededRandom(42);
+	const processes = [];
+	for (let i = 0; i < count; i++) {
+		const nameBase = PROCESS_NAMES[Math.floor(rng() * PROCESS_NAMES.length)];
+		const name = rng() > .6 ? `${nameBase}:${Math.floor(rng() * 20)}` : nameBase;
+		const status = rng() < .7 ? "running" : STATUSES[Math.floor(rng() * STATUSES.length)];
+		processes.push({
+			pid: 1e3 + i,
+			name,
+			cpu: status === "running" ? Math.round(rng() * 1e3) / 10 : 0,
+			mem: Math.round(rng() * 500) / 10,
+			status,
+			user: USERS[Math.floor(rng() * USERS.length)],
+			threads: 1 + Math.floor(rng() * 64),
+			uptime: formatUptime(Math.floor(rng() * 864e3))
+		});
+	}
+	return processes.sort((a, b) => b.cpu - a.cpu);
+}
+const ALL_PROCESSES = generateProcesses(600);
+const STATUS_COLORS = {
+	running: "$success",
+	sleeping: "$muted",
+	stopped: "$warning",
+	zombie: "$error"
+};
+const STATUS_ICONS = {
+	running: "▶",
+	sleeping: "◌",
+	stopped: "■",
+	zombie: "☠"
+};
+/** Column layout helper -- computes column widths based on available space */
+function useColumns(totalWidth) {
+	return useMemo(() => {
+		const pidW = 6;
+		const cpuW = 7;
+		const memW = 7;
+		const statusW = 10;
+		const threadsW = 5;
+		const uptimeW = 8;
+		const userW = 10;
+		const fixed = pidW + cpuW + memW + statusW + threadsW + uptimeW + userW + 8;
+		return {
+			pidW,
+			nameW: Math.max(10, totalWidth - fixed),
+			cpuW,
+			memW,
+			statusW,
+			userW,
+			threadsW,
+			uptimeW
+		};
+	}, [totalWidth]);
+}
+function TableHeader({ width }) {
+	const cols = useColumns(width);
+	return /* @__PURE__ */ jsx(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ jsxs(Text, {
+			bold: true,
+			color: "$muted",
+			children: [
+				"PID".padEnd(cols.pidW),
+				"NAME".padEnd(cols.nameW),
+				"CPU%".padStart(cols.cpuW),
+				"MEM%".padStart(cols.memW),
+				"  ",
+				"STATUS".padEnd(cols.statusW),
+				"USER".padEnd(cols.userW),
+				"THR".padStart(cols.threadsW),
+				"  ",
+				"UPTIME".padStart(cols.uptimeW)
+			]
+		})
+	});
+}
+function ProcessRow({ proc, isSelected, width }) {
+	const cols = useColumns(width);
+	const cpuColor = proc.cpu > 80 ? "$error" : proc.cpu > 40 ? "$warning" : "$success";
+	const memColor = proc.mem > 40 ? "$warning" : "$muted";
+	const displayName = proc.name.length > cols.nameW - 1 ? proc.name.slice(0, cols.nameW - 2) + "…" : proc.name;
+	return /* @__PURE__ */ jsxs(Box, {
+		paddingX: 1,
+		backgroundColor: isSelected ? "$primary" : void 0,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: isSelected ? "$primary-fg" : "$muted",
+				children: String(proc.pid).padEnd(cols.pidW)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				bold: isSelected,
+				color: isSelected ? "$primary-fg" : void 0,
+				children: displayName.padEnd(cols.nameW)
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: isSelected ? "$primary-fg" : cpuColor,
+				children: [proc.cpu.toFixed(1).padStart(cols.cpuW - 1), "%"]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: isSelected ? "$primary-fg" : memColor,
+				children: [proc.mem.toFixed(1).padStart(cols.memW - 1), "%"]
+			}),
+			/* @__PURE__ */ jsx(Text, { children: "  " }),
+			/* @__PURE__ */ jsxs(Text, {
+				color: isSelected ? "$primary-fg" : STATUS_COLORS[proc.status],
+				children: [
+					STATUS_ICONS[proc.status],
+					" ",
+					proc.status.padEnd(cols.statusW - 2)
+				]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: isSelected ? "$primary-fg" : "$muted",
+				children: proc.user.padEnd(cols.userW)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: isSelected ? "$primary-fg" : "$muted",
+				children: String(proc.threads).padStart(cols.threadsW)
+			}),
+			/* @__PURE__ */ jsx(Text, { children: "  " }),
+			/* @__PURE__ */ jsx(Text, {
+				color: isSelected ? "$primary-fg" : "$muted",
+				children: proc.uptime.padStart(cols.uptimeW)
+			})
+		]
+	});
+}
+function SummaryBar({ processes, query }) {
+	const stats = useMemo(() => {
+		let running = 0;
+		let totalCpu = 0;
+		let totalMem = 0;
+		for (const p of processes) {
+			if (p.status === "running") running++;
+			totalCpu += p.cpu;
+			totalMem += p.mem;
+		}
+		return {
+			running,
+			totalCpu: totalCpu.toFixed(1),
+			totalMem: totalMem.toFixed(1)
+		};
+	}, [processes]);
+	return /* @__PURE__ */ jsxs(Box, {
+		paddingX: 1,
+		gap: 2,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: processes.length
+			}),
+			/* @__PURE__ */ jsx(Muted, { children: "processes" }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$success",
+				bold: true,
+				children: stats.running
+			}),
+			/* @__PURE__ */ jsx(Muted, { children: "running" }),
+			/* @__PURE__ */ jsx(Muted, { children: "|" }),
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$primary",
+				children: [
+					"CPU: ",
+					stats.totalCpu,
+					"%"
+				]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$warning",
+				children: [
+					"MEM: ",
+					stats.totalMem,
+					"%"
+				]
+			}),
+			query && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Muted, { children: "|" }), /* @__PURE__ */ jsxs(Text, {
+				dim: true,
+				children: [
+					"filter: \"",
+					query,
+					"\""
+				]
+			})] })
+		]
+	});
+}
+/** Inner component that reads the flex container's height */
+function ProcessListArea({ processes, cursor, width }) {
+	const { height } = useBoxRect();
+	return /* @__PURE__ */ jsx(ListView, {
+		items: processes,
+		height,
+		estimateHeight: 1,
+		scrollTo: cursor,
+		overscan: 5,
+		renderItem: (proc, index) => /* @__PURE__ */ jsx(ProcessRow, {
+			proc,
+			isSelected: index === cursor,
+			width
+		}, proc.pid)
+	});
+}
+function DataExplorer() {
+	const { exit } = useApp();
+	const { width } = useBoxRect();
+	const [cursor, setCursor] = useState(0);
+	const [searchMode, setSearchMode] = useState(false);
+	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
+	const filtered = useMemo(() => {
+		if (!deferredQuery) return ALL_PROCESSES;
+		const q = deferredQuery.toLowerCase();
+		return ALL_PROCESSES.filter((p) => p.name.toLowerCase().includes(q) || p.user.toLowerCase().includes(q) || p.status.includes(q) || String(p.pid).includes(q));
+	}, [deferredQuery]);
+	const listHeight = useMemo(() => Math.max(5, filtered.length), [filtered.length]);
+	const halfPage = Math.max(1, Math.floor(listHeight / 4));
+	const effectiveCursor = Math.min(cursor, Math.max(0, filtered.length - 1));
+	const handleSearchSubmit = useCallback(() => {
+		setSearchMode(false);
+	}, []);
+	useInput(useCallback((input, key) => {
+		if (searchMode) {
+			if (key.escape) {
+				setSearchMode(false);
+				return;
+			}
+			return;
+		}
+		if (input === "q" || key.escape) {
+			exit();
+			return;
+		}
+		if (input === "/") {
+			setSearchMode(true);
+			return;
+		}
+		if (input === "j" || key.downArrow) setCursor((c) => Math.min(filtered.length - 1, c + 1));
+		if (input === "k" || key.upArrow) setCursor((c) => Math.max(0, c - 1));
+		if (input === "d" || key.pageDown) setCursor((c) => Math.min(filtered.length - 1, c + halfPage));
+		if (input === "u" || key.pageUp) setCursor((c) => Math.max(0, c - halfPage));
+		if (input === "g" || key.home) setCursor(0);
+		if (input === "G" || key.end) setCursor(filtered.length - 1);
+		if (key.backspace && query) {
+			setQuery("");
+			setCursor(0);
+		}
+	}, [
+		searchMode,
+		exit,
+		filtered.length,
+		halfPage,
+		query
+	]));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(SummaryBar, {
+				processes: filtered,
+				query: deferredQuery
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				children: searchMode ? /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Text, {
+					color: "$primary",
+					bold: true,
+					children: ["/", " "]
+				}), /* @__PURE__ */ jsx(TextInput, {
+					value: query,
+					onChange: (v) => {
+						setQuery(v);
+						setCursor(0);
+					},
+					onSubmit: handleSearchSubmit,
+					prompt: "",
+					isActive: searchMode
+				})] }) : query ? /* @__PURE__ */ jsxs(Muted, { children: [
+					"filter: ",
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: query
+					}),
+					" (backspace to clear, / to edit)"
+				] }) : /* @__PURE__ */ jsxs(Muted, { children: [
+					"Press ",
+					/* @__PURE__ */ jsx(Kbd, { children: "/" }),
+					" to search"
+				] })
+			}),
+			/* @__PURE__ */ jsx(TableHeader, { width }),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ jsx(Divider, {})
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexGrow: 1,
+				flexDirection: "column",
+				children: filtered.length > 0 ? /* @__PURE__ */ jsx(ProcessListArea, {
+					processes: filtered,
+					cursor: effectiveCursor,
+					width
+				}) : /* @__PURE__ */ jsx(Box, {
+					paddingX: 1,
+					justifyContent: "center",
+					children: /* @__PURE__ */ jsxs(Lead, { children: [
+						"No processes match \"",
+						deferredQuery,
+						"\""
+					] })
+				})
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				paddingX: 1,
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ jsxs(Muted, { children: [
+					/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
+					" navigate ",
+					/* @__PURE__ */ jsx(Kbd, { children: "d/u" }),
+					" half-page ",
+					/* @__PURE__ */ jsx(Kbd, { children: "g/G" }),
+					" start/end ",
+					/* @__PURE__ */ jsx(Kbd, { children: "/" }),
+					" search ",
+					/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
+					" ",
+					"quit"
+				] }), /* @__PURE__ */ jsxs(Muted, { children: [
+					effectiveCursor + 1,
+					"/",
+					filtered.length
+				] })]
+			})
+		]
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const term = _usingCtx$1.u(createTerm());
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
+			meta,
+			controls: "j/k navigate  d/u half-page  g/G start/end  / search  Esc/q quit",
+			children: /* @__PURE__ */ jsx(DataExplorer, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { DataExplorer, main, meta };