feat(@clack/core,@clack/prompts): path prompt

.changeset/fresh-grapes-rule.md

@@ -0,0 +1,5 @@
+---
+'@clack/core': minor
+---
+
+Feat PathPrompt

.changeset/modern-eggs-laugh.md

@@ -0,0 +1,5 @@
+---
+'@clack/prompts': minor
+---
+
+Feat path prompt

examples/basic/file-selection.ts

@@ -0,0 +1,15 @@
+import * as p from '@clack/prompts';
+
+(async () => {
+	const path = await p.path({
+		message: 'Pick a file:',
+		onlyShowDir: false,
+		initialValue: process.cwd(),
+		maxItems: 15,
+	});
+	if (p.isCancel(path)) {
+		p.cancel('File selection canceled');
+		process.exit(0);
+	}
+	p.outro(path);
+})();

examples/basic/package.json

@@ -10,7 +10,8 @@
   },
   "scripts": {
     "start": "jiti ./index.ts",
-    "spinner": "jiti ./spinner.ts"
+    "spinner": "jiti ./spinner.ts",
+    "file": "jiti ./file-selection.ts"
   },
   "devDependencies": {
     "jiti": "^1.17.0"

package.json

@@ -24,7 +24,7 @@
     "organize-imports-cli": "^0.10.0",
     "prettier": "^2.8.4",
     "typescript": "^4.9.5",
-    "unbuild": "^1.1.2"
+    "unbuild": "1.1.2"
   },
   "packageManager": "[email protected]",
   "volta": {

packages/core/src/index.ts

@@ -2,6 +2,7 @@ export { default as ConfirmPrompt } from './prompts/confirm';
 export { default as GroupMultiSelectPrompt } from './prompts/group-multiselect';
 export { default as MultiSelectPrompt } from './prompts/multi-select';
 export { default as PasswordPrompt } from './prompts/password';
+export { default as PathPrompt } from './prompts/path';
 export { default as Prompt, isCancel } from './prompts/prompt';
 export type { State } from './prompts/prompt';
 export { default as SelectPrompt } from './prompts/select';

packages/core/src/prompts/path.ts

@@ -0,0 +1,151 @@
+import { readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import Prompt, { PromptOptions } from './prompt';
+
+interface PathNode {
+	name: string;
+	children: PathNode[] | undefined;
+}
+
+interface PathOptions extends PromptOptions<PathPrompt> {
+	onlyShowDir?: boolean;
+}
+
+export default class PathPrompt extends Prompt {
+	private cursorMap: number[];
+	private onlyShowDir: boolean;
+	public root: PathNode;
+
+	public get option() {
+		let aux: PathNode = this.root;
+		for (let i = 0; i < this.cursorMap.length; i++) {
+			if (aux.children && aux.children[this.cursorMap[i]]) {
+				aux = aux.children[this.cursorMap[i]];
+			} else {
+				break;
+			}
+		}
+		return {
+			index: this.cursorMap[this.cursorMap.length - 1] ?? 0,
+			depth: this.cursorMap.length,
+			node: aux,
+		};
+	}
+
+	public get options(): PathNode[] {
+		let aux: PathNode = this.root;
+		let options: PathNode[] = [this.root];
+		for (let i = 0; i < this.cursorMap.length; i++) {
+			if (aux.children && aux.children[this.cursorMap[i]]) {
+				options = options.concat(aux.children);
+				aux = aux.children[this.cursorMap[i]];
+			} else {
+				options = options.concat(aux.children ?? []);
+			}
+		}
+		return options;
+	}
+
+	public get cursor(): number {
+		return this.cursorMap.reduce((a, b) => a + b, 0);
+	}
+
+	private get _node(): PathNode[] {
+		let aux: PathNode = this.root;
+		let options: PathNode[] = [];
+		for (const index of this.cursorMap) {
+			if (aux.children?.[index]) {
+				options = aux.children;
+				aux = aux.children[index];
+			} else {
+				break;
+			}
+		}
+		return options;
+	}
+
+	private get _value(): string {
+		const value: string[] = [];
+		let option: PathNode = this.root;
+		for (const index of this.cursorMap) {
+			if (option.children?.[index]) {
+				option = option.children[index];
+				value.push(option.name);
+			}
+		}
+		return resolve(this.root.name, ...value);
+	}
+
+	private _changeValue() {
+		this.value = this._value;
+	}
+
+	private mapDir(path: string): PathNode[] {
+		return readdirSync(path, { withFileTypes: true })
+			.map((item) => ({
+				name: item.name,
+				children: item.isDirectory() ? [] : undefined,
+			}))
+			.filter((node) => {
+				return this.onlyShowDir ? !!node.children : true;
+			});
+	}
+
+	constructor(opts: PathOptions) {
+		super(opts, false);
+
+		this.onlyShowDir = opts.onlyShowDir ?? false;
+		const cwd = opts.initialValue ?? process.cwd();
+		this.root = {
+			name: cwd,
+			children: this.mapDir(cwd),
+		};
+		this.cursorMap = [0];
+		this._changeValue();
+
+		this.on('cursor', (key) => {
+			switch (key) {
+				case 'up':
+					if (this.cursorMap.length) {
+						this.cursorMap = [
+							...this.cursorMap.slice(0, -1),
+							this.option.index > 0 ? this.option.index - 1 : this._node.length - 1,
+						];
+					}
+					break;
+				case 'down':
+					if (this.cursorMap.length) {
+						this.cursorMap = [
+							...this.cursorMap.slice(0, -1),
+							this.option.index < this._node.length - 1 ? this.option.index + 1 : 0,
+						];
+					}
+					break;
+				case 'right':
+					if (this.option.node.children) {
+						const children = this.mapDir(this._value);
+						this.option.node.children = children;
+						this.cursorMap = children.length ? [...this.cursorMap, 0] : this.cursorMap;
+						this.emit('resize');
+					}
+					break;
+				case 'left':
+					const prevCursor = this.cursorMap;
+					this.cursorMap = this.cursorMap.slice(0, -1);
+					if (this.option.node.children?.length && this.cursorMap.length) {
+						this.option.node.children = [];
+						this.emit('resize');
+					} else if (prevCursor.length === 0) {
+						const cwd = resolve(this.root.name, '..');
+						this.root = {
+							name: cwd,
+							children: this.mapDir(cwd),
+						};
+						this.emit('resize');
+					}
+					break;
+			}
+			this._changeValue();
+		});
+	}
+}

packages/core/src/prompts/prompt.ts

@@ -106,6 +106,7 @@ export default class Prompt {
 		this.input.on('keypress', this.onKeypress);
 		setRawMode(this.input, true);
 		this.output.on('resize', this.render);
+		this.on('resize', this.render);
 
 		this.render();
 

packages/prompts/src/index.ts

@@ -5,10 +5,11 @@ import {
 	isCancel,
 	MultiSelectPrompt,
 	PasswordPrompt,
+	PathPrompt,
 	SelectKeyPrompt,
 	SelectPrompt,
 	State,
-	TextPrompt,
+	TextPrompt
 } from '@clack/core';
 import isUnicodeSupported from 'is-unicode-supported';
 import color from 'picocolors';
@@ -168,6 +169,104 @@ export const confirm = (opts: ConfirmOptions) => {
 	}).prompt() as Promise<boolean | symbol>;
 };
 
+interface PathNode {
+	name: string;
+	children: PathNode[] | undefined;
+}
+
+export interface PathOptions {
+	message: string;
+	/**
+	 * @default process.cwd() // current working dir
+	 */
+	initialValue?: string;
+	maxItems?: number;
+	onlyShowDir?: boolean;
+}
+
+export const path = (opts: PathOptions) => {
+	const opt = (node: PathNode, state: boolean, depth: number): string => {
+		return [
+			color.cyan(S_BAR),
+			' '.repeat(depth + 2),
+			state ? color.green(S_RADIO_ACTIVE) : color.dim(S_RADIO_INACTIVE),
+			' ',
+			node.name,
+			node.children ? (node.children.length ? ` v` : ` >`) : undefined,
+		].join('');
+	};
+
+	let slidingWindowLocation = 0;
+
+	return new PathPrompt({
+		initialValue: opts.initialValue,
+		onlyShowDir: opts.onlyShowDir,
+		render() {
+			const option = this.option;
+			const map = (node: PathNode, index: number = 0, depth: number = 0): string => {
+				const state =
+					option.index === index && option.depth === depth && option.node.name === node.name;
+				return node.children && node.children.length
+					? [
+							opt(node, state, depth),
+							node.children.map((_node, i) => map(_node, i, depth + 1)).join('\n'),
+					  ].join('\n')
+					: opt(node, state, depth);
+			};
+
+			const title = [color.gray(S_BAR), `${symbol(this.state)}  ${opts.message}`].join('\n');
+
+			switch (this.state) {
+				case 'submit':
+					return [title, `${color.gray(S_BAR)}  ${color.dim(this.value)}`].join('\n');
+				case 'cancel':
+					return [
+						title,
+						`${color.gray(S_BAR)}  ${color.dim(color.strikethrough(this.value))}`,
+					].join('\n');
+				default:
+					const maxItems = opts.maxItems === undefined ? Infinity : Math.max(opts.maxItems, 5);
+					if (this.cursor >= slidingWindowLocation + maxItems - 4) {
+						slidingWindowLocation = Math.max(
+							Math.min(this.cursor - maxItems + 4, this.options.length - maxItems),
+							0
+						);
+					} else if (this.cursor < slidingWindowLocation + 2) {
+						slidingWindowLocation = Math.max(this.cursor - 2, 0);
+					}
+
+					const shouldRenderTopEllipsis =
+						maxItems < this.options.length && slidingWindowLocation > 0;
+					const shouldRenderBottomEllipsis =
+						maxItems < this.options.length &&
+						slidingWindowLocation + maxItems < this.options.length;
+
+					const dots = `${color.cyan(S_BAR)}  ${color.dim('...')}`;
+
+					return [
+						title,
+						map(this.root)
+							.split(/\n/g)
+							.slice(slidingWindowLocation, slidingWindowLocation + maxItems)
+							.map((option, i, arr) => {
+								if (i === 0 && shouldRenderTopEllipsis) {
+									return dots;
+								} else if (i === arr.length - 1 && shouldRenderBottomEllipsis) {
+									return dots;
+								} else {
+									return option;
+								}
+							}),
+						,
+						color.cyan(S_BAR_END),
+					]
+						.flat()
+						.join('\n');
+			}
+		},
+	}).prompt();
+};
+
 type Primitive = Readonly<string | boolean | number>;
 
 type Option<Value> = Value extends Primitive