feat: add withBorder to text input

Author: 43081j

packages/prompts/src/text.ts

@@ -20,7 +20,9 @@ export const text = (opts: TextOptions) => {
 		signal: opts.signal,
 		input: opts.input,
 		render() {
-			const title = `${color.gray(S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
+			const withBorder = opts.withBorder !== false;
+			const titlePrefix = withBorder ? `${color.gray(S_BAR)}\n${symbol(this.state)}  ` : '';
+			const title = `${titlePrefix}${opts.message}\n`;
 			const placeholder = opts.placeholder
 				? color.inverse(opts.placeholder[0]) + color.dim(opts.placeholder.slice(1))
 				: color.inverse(color.hidden('_'));
@@ -30,20 +32,26 @@ export const text = (opts: TextOptions) => {
 			switch (this.state) {
 				case 'error': {
 					const errorText = this.error ? `  ${color.yellow(this.error)}` : '';
-					return `${title.trim()}\n${color.yellow(S_BAR)}  ${userInput}\n${color.yellow(
-						S_BAR_END
-					)}${errorText}\n`;
+					const errorPrefix = withBorder ? `${color.yellow(S_BAR)}  ` : '';
+					const errorPrefixEnd = withBorder ? color.yellow(S_BAR_END) : '';
+					return `${title.trim()}\n${errorPrefix}${userInput}\n${errorPrefixEnd}${errorText}\n`;
 				}
 				case 'submit': {
 					const valueText = value ? `  ${color.dim(value)}` : '';
-					return `${title}${color.gray(S_BAR)}${valueText}`;
+					const submitPrefix = withBorder ? color.gray(S_BAR) : '';
+					return `${title}${submitPrefix}${valueText}`;
 				}
 				case 'cancel': {
 					const valueText = value ? `  ${color.strikethrough(color.dim(value))}` : '';
-					return `${title}${color.gray(S_BAR)}${valueText}${value.trim() ? `\n${color.gray(S_BAR)}` : ''}`;
+					const cancelPrefix = withBorder ? color.gray(S_BAR) : '';
+					return `${title}${cancelPrefix}${valueText}${value.trim() ? `\n${cancelPrefix}` : ''}`;
+				}
+				default: {
+					const defaultPrefix = withBorder ? `${color.cyan(S_BAR)}  ` : '';
+					const defaultPrefixEnd = withBorder ? color.cyan(S_BAR_END) : '';
+					color.cyan(S_BAR_END);
+					return `${title}${defaultPrefix}${userInput}\n${defaultPrefixEnd}\n`;
 				}
-				default:
-					return `${title}${color.cyan(S_BAR)}  ${userInput}\n${color.cyan(S_BAR_END)}\n`;
 			}
 		},
 	}).prompt() as Promise<string | symbol>;

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

@@ -263,6 +263,23 @@ exports[`text (isCI = false) > validation errors render and clear 1`] = `
 ]
 `;
 
+exports[`text (isCI = false) > withBorder: false removes borders 1`] = `
+[
+  "<cursor.hide>",
+  "foo
+_
+
+",
+  "<cursor.backward count=999><cursor.up count=3>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`text (isCI = true) > can be aborted by a signal 1`] = `
 [
   "<cursor.hide>",
@@ -525,3 +542,20 @@ exports[`text (isCI = true) > validation errors render and clear 1`] = `
   "<cursor.show>",
 ]
 `;
+
+exports[`text (isCI = true) > withBorder: false removes borders 1`] = `
+[
+  "<cursor.hide>",
+  "foo
+_
+
+",
+  "<cursor.backward count=999><cursor.up count=3>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "",
+  "
+",
+  "<cursor.show>",
+]
+`;

packages/prompts/test/text.test.ts

@@ -205,4 +205,19 @@ describe.each(['true', 'false'])('text (isCI = %s)', (isCI) => {
 		expect(prompts.isCancel(value)).toBe(true);
 		expect(output.buffer).toMatchSnapshot();
 	});
+
+	test('withBorder: false removes borders', async () => {
+		const result = prompts.text({
+			message: 'foo',
+			withBorder: false,
+			input,
+			output,
+		});
+
+		input.emit('keypress', '', { name: 'return' });
+
+		await result;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
 });