feat(core+prompts): Add suggestion + path prompt (bombshell-dev#314)

Author: MacFJA

.changeset/curvy-seals-sit.md

@@ -0,0 +1,6 @@
+---
+"@clack/prompts": minor
+"@clack/core": minor
+---
+
+Adds suggestion and path prompts

examples/basic/package.json

@@ -13,6 +13,7 @@
     "stream": "jiti ./stream.ts",
     "progress": "jiti ./progress.ts",
     "spinner": "jiti ./spinner.ts",
+    "path": "jiti ./path.ts",
     "spinner-ci": "npx cross-env CI=\"true\" jiti ./spinner-ci.ts",
     "spinner-timer": "jiti ./spinner-timer.ts",
     "task-log": "jiti ./task-log.ts"

examples/basic/path.ts

@@ -0,0 +1,13 @@
+import * as p from '@clack/prompts';
+
+async function demo() {
+	p.intro('path start...');
+
+	const path = await p.path({
+		message: 'Read file',
+	});
+
+	p.outro('path stop...');
+}
+
+void demo();

packages/core/src/index.ts

@@ -1,4 +1,4 @@
-export type { ClackState as State } from './types.js';
+export type { ClackState as State, ValueWithCursorPart } from './types.js';
 export type { ClackSettings } from './utils/settings.js';
 
 export { default as ConfirmPrompt } from './prompts/confirm.js';
@@ -10,5 +10,6 @@ export { default as SelectPrompt } from './prompts/select.js';
 export { default as SelectKeyPrompt } from './prompts/select-key.js';
 export { default as TextPrompt } from './prompts/text.js';
 export { default as AutocompletePrompt } from './prompts/autocomplete.js';
+export { default as SuggestionPrompt } from './prompts/suggestion.js';
 export { block, isCancel, getColumns } from './utils/index.js';
 export { updateSettings, settings } from './utils/settings.js';

packages/core/src/prompts/prompt.ts

@@ -26,7 +26,7 @@ export default class Prompt {
 	protected output: Writable;
 	private _abortSignal?: AbortSignal;
 
-	private rl: ReadLine | undefined;
+	protected rl: ReadLine | undefined;
 	private opts: Omit<PromptOptions<Prompt>, 'render' | 'input' | 'output'>;
 	private _render: (context: Omit<Prompt, 'prompt'>) => string | undefined;
 	private _track = false;

packages/core/src/prompts/suggestion.ts

@@ -0,0 +1,114 @@
+import color from 'picocolors';
+import type { ValueWithCursorPart } from '../types.js';
+import Prompt, { type PromptOptions } from './prompt.js';
+
+interface SuggestionOptions extends PromptOptions<SuggestionPrompt> {
+	suggest: (value: string) => Array<string>;
+	initialValue: string;
+}
+
+export default class SuggestionPrompt extends Prompt {
+	value: string;
+	protected suggest: (value: string) => Array<string>;
+	private selectionIndex = 0;
+	private nextItems: Array<string> = [];
+
+	constructor(opts: SuggestionOptions) {
+		super(opts);
+
+		this.value = opts.initialValue;
+		this.suggest = opts.suggest;
+		this.getNextItems();
+		this.selectionIndex = 0;
+		this._cursor = this.value.length;
+
+		this.on('cursor', (key) => {
+			switch (key) {
+				case 'up':
+					this.selectionIndex = Math.max(
+						0,
+						this.selectionIndex === 0 ? this.nextItems.length - 1 : this.selectionIndex - 1
+					);
+					break;
+				case 'down':
+					this.selectionIndex =
+						this.nextItems.length === 0 ? 0 : (this.selectionIndex + 1) % this.nextItems.length;
+					break;
+			}
+		});
+		this.on('key', (key, info) => {
+			if (info.name === 'tab' && this.nextItems.length > 0) {
+				const delta = this.nextItems[this.selectionIndex].substring(this.value.length);
+				this.value = this.nextItems[this.selectionIndex];
+				this.rl?.write(delta);
+				this._cursor = this.value.length;
+				this.selectionIndex = 0;
+				this.getNextItems();
+			}
+		});
+		this.on('value', () => {
+			this.getNextItems();
+		});
+	}
+
+	get displayValue(): Array<ValueWithCursorPart> {
+		const result: Array<ValueWithCursorPart> = [];
+		if (this._cursor > 0) {
+			result.push({
+				text: this.value.substring(0, this._cursor),
+				type: 'value',
+			});
+		}
+		if (this._cursor < this.value.length) {
+			result.push({
+				text: this.value.substring(this._cursor, this._cursor + 1),
+				type: 'cursor_on_value',
+			});
+			const left = this.value.substring(this._cursor + 1);
+			if (left.length > 0) {
+				result.push({
+					text: left,
+					type: 'value',
+				});
+			}
+			if (this.suggestion.length > 0) {
+				result.push({
+					text: this.suggestion,
+					type: 'suggestion',
+				});
+			}
+			return result;
+		}
+		if (this.suggestion.length === 0) {
+			result.push({
+				text: '\u00A0',
+				type: 'cursor_on_value',
+			});
+			return result;
+		}
+		result.push(
+			{
+				text: this.suggestion[0],
+				type: 'cursor_on_suggestion',
+			},
+			{
+				text: this.suggestion.substring(1),
+				type: 'suggestion',
+			}
+		);
+		return result;
+	}
+
+	get suggestion(): string {
+		return this.nextItems[this.selectionIndex]?.substring(this.value.length) ?? '';
+	}
+
+	private getNextItems(): void {
+		this.nextItems = this.suggest(this.value).filter((item) => {
+			return item.startsWith(this.value) && item !== this.value;
+		});
+		if (this.selectionIndex > this.nextItems.length) {
+			this.selectionIndex = 0;
+		}
+	}
+}

packages/core/src/types.ts

@@ -21,3 +21,11 @@ export interface ClackEvents {
 	confirm: (value?: boolean) => void;
 	finalize: () => void;
 }
+
+/**
+ * Display a value
+ */
+export interface ValueWithCursorPart {
+	text: string;
+	type: 'value' | 'cursor_on_value' | 'suggestion' | 'cursor_on_suggestion';
+}