feat: add withGuide support to select prompt (#453)

Author: 43081j

.changeset/brave-monkeys-slide.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Add `withGuide` support to select prompt

packages/prompts/src/select.ts

@@ -1,4 +1,4 @@
-import { SelectPrompt, wrapTextWithPrefix } from '@clack/core';
+import { SelectPrompt, settings, wrapTextWithPrefix } from '@clack/core';
 import color from 'picocolors';
 import {
 	type CommonOptions,
@@ -113,6 +113,7 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
 		output: opts.output,
 		initialValue: opts.initialValue,
 		render() {
+			const hasGuide = (opts.withGuide ?? settings.withGuide) !== false;
 			const titlePrefix = `${symbol(this.state)}  `;
 			const titlePrefixBar = `${symbolBar(this.state)}  `;
 			const messageLines = wrapTextWithPrefix(
@@ -121,11 +122,11 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
 				titlePrefixBar,
 				titlePrefix
 			);
-			const title = `${color.gray(S_BAR)}\n${messageLines}\n`;
+			const title = `${hasGuide ? `${color.gray(S_BAR)}\n` : ''}${messageLines}\n`;
 
 			switch (this.state) {
 				case 'submit': {
-					const submitPrefix = `${color.gray(S_BAR)}  `;
+					const submitPrefix = hasGuide ? `${color.gray(S_BAR)}  ` : '';
 					const wrappedLines = wrapTextWithPrefix(
 						opts.output,
 						opt(this.options[this.cursor], 'selected'),
@@ -134,19 +135,20 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
 					return `${title}${wrappedLines}`;
 				}
 				case 'cancel': {
-					const cancelPrefix = `${color.gray(S_BAR)}  `;
+					const cancelPrefix = hasGuide ? `${color.gray(S_BAR)}  ` : '';
 					const wrappedLines = wrapTextWithPrefix(
 						opts.output,
 						opt(this.options[this.cursor], 'cancelled'),
 						cancelPrefix
 					);
-					return `${title}${wrappedLines}\n${color.gray(S_BAR)}`;
+					return `${title}${wrappedLines}${hasGuide ? `\n${color.gray(S_BAR)}` : ''}`;
 				}
 				default: {
-					const prefix = `${color.cyan(S_BAR)}  `;
+					const prefix = hasGuide ? `${color.cyan(S_BAR)}  ` : '';
+					const prefixEnd = hasGuide ? color.cyan(S_BAR_END) : '';
 					// Calculate rowPadding: title lines + footer lines (S_BAR_END + trailing newline)
 					const titleLineCount = title.split('\n').length;
-					const footerLineCount = 2; // S_BAR_END + trailing newline
+					const footerLineCount = hasGuide ? 2 : 1; // S_BAR_END + trailing newline (or just trailing newline)
 					return `${title}${prefix}${limitOptions({
 						output: opts.output,
 						cursor: this.cursor,
@@ -156,7 +158,7 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
 						rowPadding: titleLineCount + footerLineCount,
 						style: (item, active) =>
 							opt(item, item.disabled ? 'disabled' : active ? 'active' : 'inactive'),
-					}).join(`\n${prefix}`)}\n${color.cyan(S_BAR_END)}\n`;
+					}).join(`\n${prefix}`)}\n${prefixEnd}\n`;
 				}
 			}
 		},

packages/prompts/test/__snapshots__/select.test.ts.snap

@@ -181,6 +181,24 @@ exports[`select (isCI = false) > down arrow selects next option 1`] = `
 ]
 `;
 
+exports[`select (isCI = false) > global withGuide: false removes guide 1`] = `
+[
+  "<cursor.hide>",
+  "◆  foo
+● opt0
+○ opt1
+
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<erase.down>",
+  "◇  foo
+opt0",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`select (isCI = false) > handles mixed size re-renders 1`] = `
 [
   "<cursor.hide>",
@@ -363,6 +381,24 @@ exports[`select (isCI = false) > up arrow selects previous option 1`] = `
 ]
 `;
 
+exports[`select (isCI = false) > withGuide: false removes guide 1`] = `
+[
+  "<cursor.hide>",
+  "◆  foo
+● opt0
+○ opt1
+
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<erase.down>",
+  "◇  foo
+opt0",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`select (isCI = false) > wraps long cancelled message 1`] = `
 [
   "<cursor.hide>",
@@ -625,6 +661,24 @@ exports[`select (isCI = true) > down arrow selects next option 1`] = `
 ]
 `;
 
+exports[`select (isCI = true) > global withGuide: false removes guide 1`] = `
+[
+  "<cursor.hide>",
+  "◆  foo
+● opt0
+○ opt1
+
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<erase.down>",
+  "◇  foo
+opt0",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`select (isCI = true) > handles mixed size re-renders 1`] = `
 [
   "<cursor.hide>",
@@ -807,6 +861,24 @@ exports[`select (isCI = true) > up arrow selects previous option 1`] = `
 ]
 `;
 
+exports[`select (isCI = true) > withGuide: false removes guide 1`] = `
+[
+  "<cursor.hide>",
+  "◆  foo
+● opt0
+○ opt1
+
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<erase.down>",
+  "◇  foo
+opt0",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`select (isCI = true) > wraps long cancelled message 1`] = `
 [
   "<cursor.hide>",

packages/prompts/test/select.test.ts

@@ -1,3 +1,4 @@
+import { updateSettings } from '@clack/core';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 import * as prompts from '../src/index.js';
 import { MockReadable, MockWritable } from './test-utils.js';
@@ -23,6 +24,7 @@ describe.each(['true', 'false'])('select (isCI = %s)', (isCI) => {
 
 	afterEach(() => {
 		vi.restoreAllMocks();
+		updateSettings({ withGuide: true });
 	});
 
 	test('renders options and message', async () => {
@@ -305,6 +307,39 @@ describe.each(['true', 'false'])('select (isCI = %s)', (isCI) => {
 		expect(output.buffer).toMatchSnapshot();
 	});
 
+	test('withGuide: false removes guide', async () => {
+		const result = prompts.select({
+			message: 'foo',
+			options: [{ value: 'opt0' }, { value: 'opt1' }],
+			withGuide: false,
+			input,
+			output,
+		});
+
+		input.emit('keypress', '', { name: 'return' });
+
+		await result;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('global withGuide: false removes guide', async () => {
+		updateSettings({ withGuide: false });
+
+		const result = prompts.select({
+			message: 'foo',
+			options: [{ value: 'opt0' }, { value: 'opt1' }],
+			input,
+			output,
+		});
+
+		input.emit('keypress', '', { name: 'return' });
+
+		await result;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
+
 	test('correctly limits options with explicit multiline message', async () => {
 		output.rows = 12;