feat: add withGuide support to confirm prompt (#450)

Author: 43081j

.changeset/tasty-horses-lay.md

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

packages/prompts/src/confirm.ts

@@ -1,4 +1,4 @@
-import { ConfirmPrompt } from '@clack/core';
+import { ConfirmPrompt, settings } from '@clack/core';
 import color from 'picocolors';
 import {
 	type CommonOptions,
@@ -26,26 +26,33 @@ export const confirm = (opts: ConfirmOptions) => {
 		output: opts.output,
 		initialValue: opts.initialValue ?? true,
 		render() {
-			const title = `${color.gray(S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
+			const hasGuide = (opts.withGuide ?? settings.withGuide) !== false;
+			const title = `${hasGuide ? `${color.gray(S_BAR)}\n` : ''}${symbol(this.state)}  ${opts.message}\n`;
 			const value = this.value ? active : inactive;
 
 			switch (this.state) {
-				case 'submit':
-					return `${title}${color.gray(S_BAR)}  ${color.dim(value)}`;
-				case 'cancel':
-					return `${title}${color.gray(S_BAR)}  ${color.strikethrough(
+				case 'submit': {
+					const submitPrefix = hasGuide ? `${color.gray(S_BAR)}  ` : '';
+					return `${title}${submitPrefix}${color.dim(value)}`;
+				}
+				case 'cancel': {
+					const cancelPrefix = hasGuide ? `${color.gray(S_BAR)}  ` : '';
+					return `${title}${cancelPrefix}${color.strikethrough(
 						color.dim(value)
-					)}\n${color.gray(S_BAR)}`;
+					)}${hasGuide ? `\n${color.gray(S_BAR)}` : ''}`;
+				}
 				default: {
-					return `${title}${color.cyan(S_BAR)}  ${
+					const defaultPrefix = hasGuide ? `${color.cyan(S_BAR)}  ` : '';
+					const defaultPrefixEnd = hasGuide ? color.cyan(S_BAR_END) : '';
+					return `${title}${defaultPrefix}${
 						this.value
 							? `${color.green(S_RADIO_ACTIVE)} ${active}`
 							: `${color.dim(S_RADIO_INACTIVE)} ${color.dim(active)}`
 					} ${color.dim('/')} ${
 						!this.value
 							? `${color.green(S_RADIO_ACTIVE)} ${inactive}`
 							: `${color.dim(S_RADIO_INACTIVE)} ${color.dim(inactive)}`
-					}\n${color.cyan(S_BAR_END)}\n`;
+					}\n${defaultPrefixEnd}\n`;
 				}
 			}
 		},

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

@@ -53,6 +53,23 @@ exports[`confirm (isCI = false) > can set initialValue 1`] = `
 ]
 `;
 
+exports[`confirm (isCI = false) > global withGuide: false removes guide 1`] = `
+[
+  "<cursor.hide>",
+  "◆  foo
+● Yes / ○ No
+
+",
+  "<cursor.backward count=999><cursor.up count=3>",
+  "<erase.down>",
+  "◇  foo
+Yes",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`confirm (isCI = false) > left arrow moves to previous choice 1`] = `
 [
   "<cursor.hide>",
@@ -163,6 +180,23 @@ exports[`confirm (isCI = false) > right arrow moves to next choice 1`] = `
 ]
 `;
 
+exports[`confirm (isCI = false) > withGuide: false removes guide 1`] = `
+[
+  "<cursor.hide>",
+  "◆  foo
+● Yes / ○ No
+
+",
+  "<cursor.backward count=999><cursor.up count=3>",
+  "<erase.down>",
+  "◇  foo
+Yes",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`confirm (isCI = true) > can be aborted by a signal 1`] = `
 [
   "<cursor.hide>",
@@ -216,6 +250,23 @@ exports[`confirm (isCI = true) > can set initialValue 1`] = `
 ]
 `;
 
+exports[`confirm (isCI = true) > global withGuide: false removes guide 1`] = `
+[
+  "<cursor.hide>",
+  "◆  foo
+● Yes / ○ No
+
+",
+  "<cursor.backward count=999><cursor.up count=3>",
+  "<erase.down>",
+  "◇  foo
+Yes",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`confirm (isCI = true) > left arrow moves to previous choice 1`] = `
 [
   "<cursor.hide>",
@@ -325,3 +376,20 @@ exports[`confirm (isCI = true) > right arrow moves to next choice 1`] = `
   "<cursor.show>",
 ]
 `;
+
+exports[`confirm (isCI = true) > withGuide: false removes guide 1`] = `
+[
+  "<cursor.hide>",
+  "◆  foo
+● Yes / ○ No
+
+",
+  "<cursor.backward count=999><cursor.up count=3>",
+  "<erase.down>",
+  "◇  foo
+Yes",
+  "
+",
+  "<cursor.show>",
+]
+`;

packages/prompts/test/confirm.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'])('confirm (isCI = %s)', (isCI) => {
 
 	afterEach(() => {
 		vi.restoreAllMocks();
+		updateSettings({ withGuide: true });
 	});
 
 	test('renders message with choices', async () => {
@@ -150,4 +152,35 @@ describe.each(['true', 'false'])('confirm (isCI = %s)', (isCI) => {
 		expect(prompts.isCancel(value)).toBe(true);
 		expect(output.buffer).toMatchSnapshot();
 	});
+
+	test('withGuide: false removes guide', async () => {
+		const result = prompts.confirm({
+			message: 'foo',
+			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.confirm({
+			message: 'foo',
+			input,
+			output,
+		});
+
+		input.emit('keypress', '', { name: 'return' });
+
+		await result;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
 });