feat: add select-key option (#59)

Author: natemoo-re

.changeset/four-guests-give.md

@@ -0,0 +1,6 @@
+---
+'@clack/prompts': minor
+'@clack/core': minor
+---
+
+Adds a `selectKey` prompt type

examples/basic/index.ts

@@ -1,6 +1,6 @@
 import * as p from '@clack/prompts';
-import color from 'picocolors';
 import { setTimeout } from 'node:timers/promises';
+import color from 'picocolors';
 
 async function main() {
 	console.clear();

packages/core/src/index.ts

@@ -4,5 +4,6 @@ export { default as PasswordPrompt } from './prompts/password';
 export { default as Prompt, isCancel } from './prompts/prompt';
 export type { State } from './prompts/prompt';
 export { default as SelectPrompt } from './prompts/select';
+export { default as SelectKeyPrompt } from './prompts/select-key';
 export { default as TextPrompt } from './prompts/text';
 export { block } from './utils';

packages/core/src/prompts/prompt.ts

@@ -162,6 +162,9 @@ export default class Prompt {
 		if (char && (char.toLowerCase() === 'y' || char.toLowerCase() === 'n')) {
 			this.emit('confirm', char.toLowerCase() === 'y');
 		}
+		if (char) {
+			this.emit('key', char.toLowerCase());
+		}
 
 		if (key?.name === 'return') {
 			if (this.opts.validate) {

packages/core/src/prompts/select-key.ts

@@ -0,0 +1,27 @@
+import Prompt, { PromptOptions } from './prompt';
+
+interface SelectKeyOptions<T extends { value: any }> extends PromptOptions<SelectKeyPrompt<T>> {
+	options: T[];
+}
+export default class SelectKeyPrompt<T extends { value: any }> extends Prompt {
+	options: T[];
+	cursor: number = 0;
+
+	constructor(opts: SelectKeyOptions<T>) {
+		super(opts, false);
+
+		this.options = opts.options;
+		const keys = this.options.map(({ value: [initial] }) => initial?.toLowerCase());
+		this.cursor = Math.max(keys.indexOf(opts.initialValue), 0);
+
+		this.on('key', (key) => {
+			if (!keys.includes(key)) return;
+			const value = this.options.find(({ value: [initial] }) => initial?.toLowerCase() === key);
+			if (value) {
+				this.value = value.value;
+				this.state = 'submit';
+				this.emit('submit');
+			}
+		});
+	}
+}

packages/prompts/src/index.ts

@@ -4,6 +4,7 @@ import {
 	isCancel,
 	MultiSelectPrompt,
 	PasswordPrompt,
+	SelectKeyPrompt,
 	SelectPrompt,
 	State,
 	TextPrompt,
@@ -216,6 +217,54 @@ export const select = <Options extends Option<Value>[], Value extends Primitive>
 	}).prompt() as Promise<Options[number]['value'] | symbol>;
 };
 
+export const selectKey = <Options extends Option<Value>[], Value extends string>(
+	opts: SelectOptions<Options, Value>
+) => {
+	const opt = (
+		option: Options[number],
+		state: 'inactive' | 'active' | 'selected' | 'cancelled' = 'inactive'
+	) => {
+		const label = option.label ?? String(option.value);
+		if (state === 'selected') {
+			return `${color.dim(label)}`;
+		} else if (state === 'cancelled') {
+			return `${color.strikethrough(color.dim(label))}`;
+		} else if (state === 'active') {
+			return `${color.bgCyan(color.gray(` ${option.value} `))} ${label} ${
+				option.hint ? color.dim(`(${option.hint})`) : ''
+			}`;
+		}
+		return `${color.gray(color.bgWhite(color.inverse(` ${option.value} `)))} ${label} ${
+			option.hint ? color.dim(`(${option.hint})`) : ''
+		}`;
+	};
+
+	return new SelectKeyPrompt({
+		options: opts.options,
+		initialValue: opts.initialValue,
+		render() {
+			const title = `${color.gray(S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
+
+			switch (this.state) {
+				case 'submit':
+					return `${title}${color.gray(S_BAR)}  ${opt(
+						this.options.find((opt) => opt.value === this.value)!,
+						'selected'
+					)}`;
+				case 'cancel':
+					return `${title}${color.gray(S_BAR)}  ${opt(this.options[0], 'cancelled')}\n${color.gray(
+						S_BAR
+					)}`;
+				default: {
+					return `${title}${color.cyan(S_BAR)}  ${this.options
+						.map((option, i) => opt(option, i === this.cursor ? 'active' : 'inactive'))
+						.join(`\n${color.cyan(S_BAR)}  `)}\n${color.cyan(S_BAR_END)}\n`;
+				}
+			}
+		},
+	}).prompt() as Promise<Options[number]['value'] | symbol>;
+};
+
 export interface MultiSelectOptions<Options extends Option<Value>[], Value extends Primitive> {
 	message: string;
 	options: Options;