feat: add withGuide option (#409)

Author: 43081j

.changeset/tall-keys-allow.md

@@ -0,0 +1,6 @@
+---
+"@clack/prompts": patch
+"@clack/core": patch
+---
+
+Add a new `withGuide` option to all prompts to disable the default clack border

packages/core/src/utils/settings.ts

@@ -9,6 +9,7 @@ interface InternalClackSettings {
 		cancel: string;
 		error: string;
 	};
+	withGuide: boolean;
 }
 
 export const settings: InternalClackSettings = {
@@ -27,6 +28,7 @@ export const settings: InternalClackSettings = {
 		cancel: 'Canceled',
 		error: 'Something went wrong',
 	},
+	withGuide: true,
 };
 
 export interface ClackSettings {
@@ -54,6 +56,8 @@ export interface ClackSettings {
 		 */
 		error?: string;
 	};
+
+	withGuide?: boolean;
 }
 
 export function updateSettings(updates: ClackSettings) {
@@ -81,6 +85,10 @@ export function updateSettings(updates: ClackSettings) {
 			settings.messages.error = messages.error;
 		}
 	}
+
+	if (updates.withGuide !== undefined) {
+		settings.withGuide = updates.withGuide !== false;
+	}
 }
 
 /**

packages/core/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src"]
+  "include": ["src", "test"]
 }

packages/prompts/src/box.ts

@@ -1,5 +1,5 @@
 import type { Writable } from 'node:stream';
-import { getColumns } from '@clack/core';
+import { getColumns, settings } from '@clack/core';
 import stringWidth from 'fast-string-width';
 import { wrapAnsi } from 'fast-wrap-ansi';
 import {
@@ -35,7 +35,6 @@ export interface BoxOptions extends CommonOptions {
 	titlePadding?: number;
 	contentPadding?: number;
 	rounded?: boolean;
-	includePrefix?: boolean;
 	formatBorder?: (text: string) => string;
 }
 
@@ -68,7 +67,8 @@ export const box = (message = '', title = '', opts?: BoxOptions) => {
 	const titlePadding = opts?.titlePadding ?? 1;
 	const contentPadding = opts?.contentPadding ?? 2;
 	const width = opts?.width === undefined || opts.width === 'auto' ? 1 : Math.min(1, opts.width);
-	const linePrefix = opts?.includePrefix ? `${S_BAR} ` : '';
+	const hasGuide = (opts?.withGuide ?? settings.withGuide) !== false;
+	const linePrefix = !hasGuide ? '' : `${S_BAR} `;
 	const formatBorder = opts?.formatBorder ?? defaultFormatBorder;
 	const symbols = (opts?.rounded ? roundedSymbols : squareSymbols).map(formatBorder);
 	const hSymbol = formatBorder(S_BAR_H);

packages/prompts/src/common.ts

@@ -71,4 +71,5 @@ export interface CommonOptions {
 	input?: Readable;
 	output?: Writable;
 	signal?: AbortSignal;
+	withGuide?: boolean;
 }

packages/prompts/src/log.ts

@@ -1,3 +1,4 @@
+import { settings } from '@clack/core';
 import color from 'picocolors';
 import {
 	type CommonOptions,
@@ -23,25 +24,32 @@ export const log = {
 			secondarySymbol = color.gray(S_BAR),
 			output = process.stdout,
 			spacing = 1,
+			withGuide,
 		}: LogMessageOptions = {}
 	) => {
 		const parts: string[] = [];
+		const hasGuide = (withGuide ?? settings.withGuide) !== false;
+		const spacingString = !hasGuide ? '' : secondarySymbol;
+		const prefix = !hasGuide ? '' : `${symbol}  `;
+		const secondaryPrefix = !hasGuide ? '' : `${secondarySymbol}  `;
+
 		for (let i = 0; i < spacing; i++) {
-			parts.push(`${secondarySymbol}`);
+			parts.push(spacingString);
 		}
+
 		const messageParts = Array.isArray(message) ? message : message.split('\n');
 		if (messageParts.length > 0) {
 			const [firstLine, ...lines] = messageParts;
 			if (firstLine.length > 0) {
-				parts.push(`${symbol}  ${firstLine}`);
+				parts.push(`${prefix}${firstLine}`);
 			} else {
-				parts.push(symbol);
+				parts.push(hasGuide ? '' : symbol);
 			}
 			for (const ln of lines) {
 				if (ln.length > 0) {
-					parts.push(`${secondarySymbol}  ${ln}`);
+					parts.push(`${secondaryPrefix}${ln}`);
 				} else {
-					parts.push(secondarySymbol);
+					parts.push(hasGuide ? '' : secondarySymbol);
 				}
 			}
 		}

packages/prompts/src/text.ts

@@ -1,4 +1,4 @@
-import { TextPrompt } from '@clack/core';
+import { settings, TextPrompt } from '@clack/core';
 import color from 'picocolors';
 import { type CommonOptions, S_BAR, S_BAR_END, symbol } from './common.js';
 
@@ -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 hasGuide = (opts?.withGuide ?? settings.withGuide) !== false;
+			const titlePrefix = `${hasGuide ? `${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,25 @@ 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 = hasGuide ? `${color.yellow(S_BAR)}  ` : '';
+					const errorPrefixEnd = hasGuide ? 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 = hasGuide ? 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 = hasGuide ? color.gray(S_BAR) : '';
+					return `${title}${cancelPrefix}${valueText}${value.trim() ? `\n${cancelPrefix}` : ''}`;
+				}
+				default: {
+					const defaultPrefix = hasGuide ? `${color.cyan(S_BAR)}  ` : '';
+					const defaultPrefixEnd = hasGuide ? 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>;