feat: prompt.validate error support

Author: orochaa

.changeset/moody-hairs-learn.md

@@ -0,0 +1,6 @@
+---
+'@clack/prompts': patch
+'@clack/core': patch
+---
+
+Add Error support for validate function

packages/core/src/prompts/prompt.ts

@@ -13,7 +13,7 @@ export interface PromptOptions<Self extends Prompt> {
 	render(this: Omit<Self, 'prompt'>): string | undefined;
 	placeholder?: string;
 	initialValue?: any;
-	validate?: ((value: any) => string | undefined) | undefined;
+	validate?: ((value: any) => string | Error | undefined) | undefined;
 	input?: Readable;
 	output?: Writable;
 	debug?: boolean;
@@ -183,7 +183,7 @@ export default class Prompt {
 			if (this.opts.validate) {
 				const problem = this.opts.validate(this.value);
 				if (problem) {
-					this.error = problem;
+					this.error = problem instanceof Error ? problem.message : problem;
 					this.state = 'error';
 					this.rl.write(this.value);
 				}

packages/prompts/src/index.ts

@@ -100,7 +100,7 @@ export interface TextOptions {
 	placeholder?: string;
 	defaultValue?: string;
 	initialValue?: string;
-	validate?: (value: string) => string | undefined;
+	validate?: (value: string) => string | Error | undefined;
 }
 export const text = (opts: TextOptions) => {
 	return new TextPrompt({
@@ -117,9 +117,9 @@ export const text = (opts: TextOptions) => {
 
 			switch (this.state) {
 				case 'error':
-					return `${title.trim()}\n${color.yellow(S_BAR)}  ${value}\n${color.yellow(
-						S_BAR_END
-					)}  ${color.yellow(this.error)}\n`;
+					return `${title.trim()}\n${color.yellow(
+						S_BAR
+					)}  ${value}\n${color.yellow(S_BAR_END)}  ${color.yellow(this.error)}\n`;
 				case 'submit':
 					return `${title}${color.gray(S_BAR)}  ${color.dim(this.value || opts.placeholder)}`;
 				case 'cancel':
@@ -136,7 +136,7 @@ export const text = (opts: TextOptions) => {
 export interface PasswordOptions {
 	message: string;
 	mask?: string;
-	validate?: (value: string) => string | undefined;
+	validate?: (value: string) => string | Error | undefined;
 }
 export const password = (opts: PasswordOptions) => {
 	return new PasswordPrompt({
@@ -149,15 +149,15 @@ export const password = (opts: PasswordOptions) => {
 
 			switch (this.state) {
 				case 'error':
-					return `${title.trim()}\n${color.yellow(S_BAR)}  ${masked}\n${color.yellow(
-						S_BAR_END
-					)}  ${color.yellow(this.error)}\n`;
+					return `${title.trim()}\n${color.yellow(
+						S_BAR
+					)}  ${masked}\n${color.yellow(S_BAR_END)}  ${color.yellow(this.error)}\n`;
 				case 'submit':
 					return `${title}${color.gray(S_BAR)}  ${color.dim(masked)}`;
 				case 'cancel':
-					return `${title}${color.gray(S_BAR)}  ${color.strikethrough(color.dim(masked ?? ''))}${
-						masked ? `\n${color.gray(S_BAR)}` : ''
-					}`;
+					return `${title}${color.gray(S_BAR)}  ${color.strikethrough(
+						color.dim(masked ?? '')
+					)}${masked ? `\n${color.gray(S_BAR)}` : ''}`;
 				default:
 					return `${title}${color.cyan(S_BAR)}  ${value}\n${color.cyan(S_BAR_END)}\n`;
 			}
@@ -279,9 +279,9 @@ export const selectKey = <Value extends string>(opts: SelectOptions<Value>) => {
 				option.hint ? color.dim(`(${option.hint})`) : ''
 			}`;
 		}
-		return `${color.gray(color.bgWhite(color.inverse(` ${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({
@@ -297,9 +297,10 @@ export const selectKey = <Value extends string>(opts: SelectOptions<Value>) => {
 						'selected'
 					)}`;
 				case 'cancel':
-					return `${title}${color.gray(S_BAR)}  ${opt(this.options[0], 'cancelled')}\n${color.gray(
-						S_BAR
-					)}`;
+					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'))
@@ -465,9 +466,9 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 			return `${color.strikethrough(color.dim(label))}`;
 		}
 		if (state === 'active-selected') {
-			return `${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${label} ${
-				option.hint ? color.dim(`(${option.hint})`) : ''
-			}`;
+			return `${color.dim(prefix)}${color.green(
+				S_CHECKBOX_SELECTED
+			)} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`;
 		}
 		if (state === 'submitted') {
 			return `${color.dim(label)}`;
@@ -583,9 +584,9 @@ export const note = (message = '', title = '') => {
 	const msg = lines
 		.map(
 			(ln) =>
-				`${color.gray(S_BAR)}  ${color.dim(ln)}${' '.repeat(len - strip(ln).length)}${color.gray(
-					S_BAR
-				)}`
+				`${color.gray(S_BAR)}  ${color.dim(ln)}${' '.repeat(
+					len - strip(ln).length
+				)}${color.gray(S_BAR)}`
 		)
 		.join('\n');
 	process.stdout.write(
@@ -759,7 +760,9 @@ export interface PromptGroupOptions<T> {
 	 * Control how the group can be canceled
 	 * if one of the prompts is canceled.
 	 */
-	onCancel?: (opts: { results: Prettify<Partial<PromptGroupAwaitedReturn<T>>> }) => void;
+	onCancel?: (opts: {
+		results: Prettify<Partial<PromptGroupAwaitedReturn<T>>>;
+	}) => void;
 }
 
 type Prettify<T> = {