@nan0web/ui-cli 1.1.0 → 2.0.0

package/src/index.js

@@ -1,53 +1,92 @@
-import { CancelError } from "@nan0web/ui/core"
-
-import CLiInputAdapter from "./InputAdapter.js"
-import OutputAdapter from "./OutputAdapter.js"
-import CLI from "./CLI.js"
-import Command from "./Command.js"
-import CommandError from "./CommandError.js"
-import CommandMessage from "./CommandMessage.js"
-import CommandParser from "./CommandParser.js"
-import CommandHelp from "./CommandHelp.js"
-export { str2argv } from "./utils/parse.js"
+import CLiInputAdapter from './InputAdapter.js'
+import OutputAdapter from './OutputAdapter.js'
+import { CancelError } from '@nan0web/ui/core'
+import CLI from './CLI.js'
+import CommandParser from './CommandParser.js'
 
-export {
-	select,
-	next,
-	pause,
-	createInput,
-	ask,
-	Input,
-} from "./ui/index.js"
+// V2 Component Exports
+import { render } from './core/render.js'
+
+// Views
+import { Alert } from './components/view/Alert.js'
+import { Badge } from './components/view/Badge.js'
+import { Table } from './components/view/Table.js'
+import { Breadcrumbs, Tabs, Steps } from './components/view/Nav.js'
+import { Toast } from './components/view/Toast.js'
 
-/** @typedef {import("./CommandHelp.js").CommandHelpField} CommandHelpField */
+// Prompts
+import { Select } from './components/prompt/Select.js'
+import { Input } from './components/prompt/Input.js'
+import { Password } from './components/prompt/Password.js'
+import { Confirm } from './components/prompt/Confirm.js'
+import { Multiselect } from './components/prompt/Multiselect.js'
+import { Mask } from './components/prompt/Mask.js'
+import { Autocomplete } from './components/prompt/Autocomplete.js'
+import { Slider } from './components/prompt/Slider.js'
+import { Toggle } from './components/prompt/Toggle.js'
+import { DateTime } from './components/prompt/DateTime.js'
+import { Next } from './components/prompt/Next.js'
+import { Pause } from './components/prompt/Pause.js'
+import { Tree } from './components/prompt/Tree.js'
+import { Spinner } from './components/prompt/Spinner.js'
+import { ProgressBar } from './components/prompt/ProgressBar.js'
 
+// Legacy utils still needed for internal logic or compat
+export { createInput, ask, text } from './ui/input.js'
+export { select } from './ui/select.js'
+export { confirm } from './ui/confirm.js'
+export { next } from './ui/next.js'
+export { multiselect } from './ui/multiselect.js'
+export { mask } from './ui/mask.js'
+export { table } from './ui/table.js'
+export { autocomplete } from './ui/autocomplete.js'
+export { pause } from './ui/next.js'
+export { alert } from './ui/alert.js'
+export { badge } from './ui/badge.js'
+export { toast } from './ui/toast.js'
+export { spinner } from './ui/spinner.js'
+export { progress } from './ui/progress.js'
+export { breadcrumbs, tabs, steps } from './ui/nav.js'
+export { tree } from './ui/tree.js'
+export { datetime } from './ui/date-time.js'
+export { toggle } from './ui/toggle.js'
+export { slider } from './ui/slider.js'
+
+// Public V2 API
 export {
-	CLI,
+	// Core
+	render,
 	CLiInputAdapter,
 	CancelError,
-	OutputAdapter,
 
-	/** @deprecated */
-	Command,
-	/** @deprecated */
-	CommandError,
-	/** @deprecated */
-	CommandMessage,
+	// Components
+	Alert,
+	Badge,
+	Table,
+	Breadcrumbs,
+	Tabs,
+	Steps,
+	Toast,
+	Select,
+	Input,
+	Password,
+	Confirm,
+	Multiselect,
+	Mask,
+	Autocomplete,
+	Slider,
+	Toggle,
+	DateTime,
+	Next,
+	Pause,
+	Tree,
+	Spinner,
+	ProgressBar,
 
+	// Tools
+	CLI,
 	CommandParser,
-	CommandHelp,
+	OutputAdapter,
 }
 
-/* New public API */
-export { generateForm } from "./ui/form.js"
-
-export const renderers = new Map([
-	[
-		"UIProcess",
-		data => {
-			return `${data.title || "Process"}: ${data.status || "running"}`
-		},
-	],
-])
-
 export default CLiInputAdapter

package/src/test/PlaygroundTest.js

@@ -8,13 +8,13 @@
  */
 
 /* eslint-disable no-use-before-define */
-import { spawn } from "node:child_process"
-import event, { EventContext } from "@nan0web/event"
+import { spawn } from 'node:child_process'
+import event, { EventContext } from '@nan0web/event'
 
 /**
  * @typedef {object} PlaygroundTestConfig
  * @property {NodeJS.ProcessEnv} env Environment variables for the child process.
- * @property {{ includeDebugger?: boolean }} [config={}] Configuration options.
+ * @property {{ includeDebugger?: boolean, includeEmptyLines?: boolean, feedStdin?: boolean }} [config={}] Configuration options.
  */
 
 /**
@@ -33,7 +33,7 @@ export default class PlaygroundTest {
 	#bus
 	/**
 	 * @param {NodeJS.ProcessEnv} env Environment variables for the child process.
-	 * @param {{ includeDebugger?: boolean, includeEmptyLines?: boolean }} [config={}] Configuration options.
+	 * @param {{ includeDebugger?: boolean, includeEmptyLines?: boolean, feedStdin?: boolean }} [config={}] Configuration options.
 	 */
 	constructor(env, config = {}) {
 		this.env = env
@@ -41,6 +41,7 @@ export default class PlaygroundTest {
 		/** @type {boolean} Include debugger lines in output (default: false). */
 		this.includeDebugger = config.includeDebugger ?? false
 		this.incldeEmptyLines = config.includeEmptyLines ?? false
+		this.feedStdin = config.feedStdin ?? true
 	}
 
 	/**
@@ -66,18 +67,18 @@ export default class PlaygroundTest {
 	 */
 	filterDebugger(str) {
 		if (this.includeDebugger) return str
-		const words = ["debugger", "https://nodejs.org/en/docs/inspector"]
+		const words = ['debugger', 'https://nodejs.org/en/docs/inspector']
 		return str
-			.split("\n")
-			.filter(s => !words.some(w => s.toLowerCase().includes(w)))
-			.join("\n")
+			.split('\n')
+			.filter((s) => !words.some((w) => s.toLowerCase().includes(w)))
+			.join('\n')
 	}
 	/**
 	 * Slice lines from stdout or stderr.
 	 */
 	slice(target, start, end) {
-		const txt = (this.recentResult?.[target] ?? "")
-		return txt.split("\n").slice(start, end)
+		const txt = this.recentResult?.[target] ?? ''
+		return txt.split('\n').slice(start, end)
 	}
 	/**
 	 * Write the answer sequence to the child process **asynchronously**,
@@ -89,18 +90,20 @@ export default class PlaygroundTest {
 		const raw = this.env.PLAY_DEMO_SEQUENCE
 		if (!raw) return
 
-		const sequence = raw.split(",").map(s => s.trim()).filter(Boolean)
+		const sequence = raw.split(',').map((s) => s.trim())
+		// Allow empty strings to signify "Enter" (default)
 		if (sequence.length === 0) return
 
-		if (child.stdin) child.stdin.setDefaultEncoding("utf-8")
+		if (child.stdin) child.stdin.setDefaultEncoding('utf-8')
 
 		const writeNext = (idx) => {
 			if (idx >= sequence.length) {
 				try {
 					child.stdin?.end()
-				} catch (_) { }
+				} catch (_) {}
 				return
 			}
+			// Use 200ms delay for rock-solid stability across all platforms.
 			setTimeout(() => {
 				try {
 					if (!child.killed && child.stdin?.writable) {
@@ -108,7 +111,7 @@ export default class PlaygroundTest {
 						writeNext(idx + 1)
 					}
 				} catch (_) {
-					// Silently swallow EPIPE and stop feeding.
+					// Silently swallow EPIPE
 				}
 			}, 200)
 		}
@@ -119,33 +122,42 @@ export default class PlaygroundTest {
 	 *
 	 * @param {string[]} [args=["play/main.js"]] Arguments passed to the node process.
 	 */
-	async run(args = ["play/main.js"]) {
-		const child = spawn("node", args, {
+	async run(args = ['play/main.js']) {
+		// Optimization: if we have --demo or --lang in env equivalent, let's use them directly
+		// But for now, we follow the args passed.
+		const child = spawn(process.execPath, args, {
 			env: this.env,
-			stdio: ["pipe", "pipe", "pipe"],
+			stdio: ['pipe', 'pipe', 'pipe'],
 		})
 
-		this.#feedSequence(child)
+		if (this.feedStdin) {
+			this.#feedSequence(child)
+		}
 
-		let stdout = ""
+		let stdout = ''
 		for await (const chunk of child.stdout) {
 			stdout += chunk.toString()
-			this.emit("stdout", { chunk })
+			await this.emit('stdout', { chunk })
 		}
 
-		let stderr = ""
+		let stderr = ''
 		for await (const chunk of child.stderr) {
 			const clean = this.filterDebugger(chunk.toString())
 			stderr += clean
-			this.emit("stderr", { chunk, clean })
+			this.emit('stderr', { chunk, clean })
 		}
 
-		const exitCode = await new Promise(resolve => child.on("close", resolve))
+		const exitCode = await new Promise((resolve) => child.on('close', resolve))
 
 		// Trim leading whitespace from every line – the test suite expects raw
 		// output without logger prefixes or indentation.
-		const normalize = txt => this.incldeEmptyLines ? txt
-			: txt.split("\n").filter(row => row.trim() !== "").join("\n")
+		const normalize = (txt) =>
+			this.incldeEmptyLines
+				? txt
+				: txt
+						.split('\n')
+						.filter((row) => row.trim() !== '')
+						.join('\n')
 
 		this.recentResult = {
 			stdout: normalize(stdout),

package/src/test/index.js

@@ -1,7 +1,5 @@
-import PlaygroundTest from "./PlaygroundTest.js"
+import PlaygroundTest from './PlaygroundTest.js'
 
-export {
-	PlaygroundTest,
-}
+export { PlaygroundTest }
 
 export default PlaygroundTest

package/src/ui/alert.js

@@ -0,0 +1,58 @@
+/**
+ * Alert component – displays a prominent message box.
+ *
+ * @module ui/alert
+ */
+
+import Logger from '@nan0web/log'
+import { beep } from './input.js'
+
+/**
+ * Renders an alert box and optionally plays a sound.
+ *
+ * @param {string} message - Message content.
+ * @param {'info'|'success'|'warning'|'error'} [variant='info']
+ * @param {Object} [options]
+ * @param {string} [options.title] - Optional title.
+ * @param {boolean} [options.sound=false] - Play beep sound.
+ * @returns {string} Styled message block.
+ */
+export function alert(message, variant = 'info', options = {}) {
+	const { title, sound = variant === 'error' || variant === 'warning' } = options
+
+	if (sound) beep()
+
+	const colors = {
+		info: Logger.CYAN,
+		success: Logger.GREEN,
+		warning: Logger.YELLOW,
+		error: Logger.RED,
+	}
+
+	const color = colors[variant] || Logger.WHITE
+	const icon =
+		{
+			info: 'ℹ',
+			success: '✔',
+			warning: '⚠',
+			error: '✖',
+		}[variant] || '•'
+
+	const lines = String(message || '').split('\n')
+	const maxLineLen = Math.max(title ? String(title).length + 4 : 0, ...lines.map((l) => l.length))
+	const len = Math.max(60, maxLineLen + 4)
+	const border = Logger.style('━'.repeat(len), { color })
+
+	let out = ''
+	out += `\n${border}\n`
+	if (title) {
+		out += Logger.style(` ${icon} ${title} `, { color }) + '\n'
+		out += Logger.style('─'.repeat(len) + '\n', { color: Logger.DIM })
+	}
+	lines.forEach((line) => {
+		out += '   ' + Logger.style(line.trim(), { color }) + '\n'
+	})
+	out += `${border}\n`
+
+	return out
+}

package/src/ui/autocomplete.js

@@ -0,0 +1,86 @@
+/**
+ * Autocomplete module - provides a searchable selection list.
+ *
+ * @module ui/autocomplete
+ */
+
+import prompts from 'prompts'
+import { CancelError } from '@nan0web/ui/core'
+import Logger from '@nan0web/log'
+
+/**
+ * Highlights the matching part of the text based on the query.
+ * @param {string} text
+ * @param {string} query
+ * @returns {string}
+ */
+function highlight(text, query) {
+	if (!query) return text
+	const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+	const regex = new RegExp(`(${escapedQuery})`, 'gi')
+	return text.replace(regex, `${Logger.MAGENTA}$1${Logger.RESET}`)
+}
+
+/**
+ * Renders a searchable selection list.
+ *
+ * @param {Object} input
+ * @param {string} [input.message] - Prompt message.
+ * @param {string} [input.title] - Alternative prompt title.
+ * @param {Array|Function} input.options - List of options or async function to fetch them.
+ * @param {number} [input.limit=10] - Max visible items.
+ * @returns {Promise<{index:number,value:any,cancelled:boolean}>}
+ */
+export async function autocomplete(input) {
+	const { message, title, options: initOptions, limit = 30 } = input
+
+	let choices = []
+	const fetch = async (query = '') => {
+		let currentOptions = typeof initOptions === 'function' ? await initOptions(query) : initOptions
+
+		// Normalize Map or Array
+		if (currentOptions instanceof Map) {
+			currentOptions = Array.from(currentOptions.entries()).map(([value, label]) => ({
+				label,
+				value,
+			}))
+		}
+
+		const filtered = currentOptions.filter((el) => {
+			const label = typeof el === 'string' ? el : el.title || el.label || ''
+			return label.toLowerCase().includes(query.toLowerCase())
+		})
+
+		return filtered.map((el) => {
+			const label = typeof el === 'string' ? el : el.title || el.label
+			const value = typeof el === 'string' ? el : el.value
+			return {
+				title: highlight(label, query),
+				value: value,
+			}
+		})
+	}
+
+	choices = await fetch('')
+
+	const response = await prompts(
+		{
+			type: 'autocomplete',
+			name: 'value',
+			message: message || title,
+			limit,
+			choices: choices,
+			suggest: (input, choices) => fetch(input),
+		},
+		{
+			onCancel: () => {
+				throw new CancelError()
+			},
+		}
+	)
+
+	const finalChoices = typeof initOptions === 'function' ? await fetch('') : choices
+	const index = finalChoices.findIndex((c) => c.value === response.value)
+
+	return { index, value: response.value, cancelled: false }
+}

package/src/ui/badge.js

@@ -0,0 +1,35 @@
+/**
+ * Badge component – displays a small status label.
+ *
+ * @module ui/badge
+ */
+
+import Logger from '@nan0web/log'
+
+/**
+ * Renders a status badge.
+ *
+ * @param {string} label - Text to display.
+ * @param {'info'|'success'|'warning'|'error'|'neutral'} [variant='neutral']
+ * @returns {string} Styled string.
+ */
+export function badge(label, variant = 'neutral') {
+	const colors = {
+		info: { bg: 'BLUE', fg: 'WHITE' }, // Use keys compatible with Logger lookup if possible, or Logger constants
+		success: { bg: 'GREEN', fg: 'BLACK' },
+		warning: { bg: 'YELLOW', fg: 'BLACK' },
+		error: { bg: 'RED', fg: 'WHITE' },
+		neutral: { bg: 'WHITE', fg: 'BLACK' },
+	}
+
+	// Logger.style expects bgColor name or code.
+	// Logger.BG_BLUE is a code.
+	// But Logger.style implementation tries `Logger['BG_' + bgColor.toUpperCase()]`.
+	// So if I pass 'BLUE', it looks for BG_BLUE.
+	// If I pass Logger.BG_BLUE (the code), it uses it as raw.
+
+	// Let's use string keys 'BLUE', etc.
+
+	const style = colors[variant] || colors.neutral
+	return Logger.style(` ${label} `, { color: Logger[style.fg] || style.fg, bgColor: style.bg })
+}

package/src/ui/confirm.js

@@ -0,0 +1,49 @@
+/**
+ * Confirm module – simple Yes/No prompt.
+ * @module ui/confirm
+ */
+import prompts from 'prompts'
+import { CancelError } from '@nan0web/ui/core'
+import { validateString, validateBoolean, validateFunction } from '../core/PropValidation.js'
+
+/**
+ * @param {Object} config
+ * @param {string} config.message
+ * @param {boolean} [config.initial=true] - Default value (true=Yes, false=No)
+ * @param {Function} [config.format] - Output value formatter
+ * @param {string} [config.active] - Label for "Yes" state
+ * @param {string} [config.inactive] - Label for "No" state
+ * @param {Function} [config.t] - Optional translation function.
+ * @returns {Promise<{value:boolean, cancelled:boolean}>}
+ */
+export async function confirm(config) {
+	// Validation
+	validateString(config.message, 'message', 'Confirm', true)
+	validateBoolean(config.initial, 'initial', 'Confirm')
+	validateFunction(config.format, 'format', 'Confirm')
+	validateString(config.active, 'active', 'Confirm')
+	validateString(config.inactive, 'inactive', 'Confirm')
+	validateFunction(config.t, 't', 'Confirm')
+
+	const { message, initial = true, format, t = (k) => k } = config
+	const active = config.active || t('yes')
+	const inactive = config.inactive || t('no')
+
+	const response = await prompts(
+		{
+			type: 'toggle',
+			name: 'value',
+			message,
+			initial,
+			format,
+			active,
+			inactive,
+		},
+		{
+			onCancel: () => {
+				throw new CancelError()
+			},
+		}
+	)
+	return { value: response.value, cancelled: false }
+}

package/src/ui/date-time.js

@@ -0,0 +1,45 @@
+/**
+ * Date/Time Picker module.
+ * @module ui/date-time
+ */
+import prompts from 'prompts'
+import { CancelError } from '@nan0web/ui/core'
+
+/**
+ * Prompt user for a date or time.
+ *
+ * @param {Object} config
+ * @param {string} config.message
+ * @param {Date} [config.initial]
+ * @param {string} [config.mask] - Optional mask (e.g. 'YYYY-MM-DD HH:mm')
+ * @param {Function} [config.t] - Optional translation function.
+ * @returns {Promise<{value:Date, cancelled:boolean}>}
+ */
+export async function datetime(config) {
+	const { message, initial: rawInitial = new Date(), mask, t = (k) => k } = config
+	const initial = rawInitial instanceof Date ? rawInitial : new Date(rawInitial)
+
+	try {
+		const result = await prompts(
+			{
+				type: 'date',
+				name: 'value',
+				message: t(message),
+				initial,
+				mask: mask || undefined,
+			},
+			{
+				onCancel: () => {
+					throw new CancelError()
+				},
+			}
+		)
+
+		return { value: result.value, cancelled: false }
+	} catch (err) {
+		if (err instanceof CancelError) {
+			return { value: initial, cancelled: true }
+		}
+		throw err
+	}
+}