Add changeset-like prompts, changeset demo

.changeset/dull-boats-drum.md

@@ -0,0 +1,6 @@
+---
+'@clack/prompts': minor
+'@clack/core': patch
+---
+
+add `groupMultiselect` prompt

.changeset/tasty-comics-warn.md

@@ -0,0 +1,5 @@
+---
+'@clack/core': minor
+---
+
+Add `GroupMultiSelect` prompt

examples/changesets/index.ts

@@ -0,0 +1,83 @@
+import * as p from '@clack/prompts';
+import { setTimeout } from 'node:timers/promises';
+import color from 'picocolors';
+
+function onCancel() {
+	p.cancel('Operation cancelled.');
+	process.exit(0);
+}
+
+async function main() {
+	console.clear();
+
+	await setTimeout(1000);
+
+	p.intro(`${color.bgCyan(color.black(' changesets '))}`);
+
+	const changeset = await p.group(
+		{
+			packages: () =>
+				p.groupMultiselect({
+					message: 'Which packages would you like to include?',
+					options: {
+						'changed packages': [
+							{ value: '@scope/a' },
+							{ value: '@scope/b' },
+							{ value: '@scope/c' },
+						],
+						'unchanged packages': [
+							{ value: '@scope/x' },
+							{ value: '@scope/y' },
+							{ value: '@scope/z' },
+						]
+					}
+				}),
+			major: ({ results }) => {
+				const packages = results.packages ?? [];
+				return p.multiselect({
+					message: `Which packages should have a ${color.red('major')} bump?`,
+					options: packages.map(value => ({ value })),
+					required: false,
+				})
+			},
+			minor: ({ results }) => {
+				const packages = results.packages ?? [];
+				const major = Array.isArray(results.major) ? results.major : [];
+				const possiblePackages = packages.filter(pkg => !major.includes(pkg))
+				if (possiblePackages.length === 0) return;
+				return p.multiselect({
+					message: `Which packages should have a ${color.yellow('minor')} bump?`,
+					options: possiblePackages.map(value => ({ value })),
+					required: false
+				})
+			},
+			patch: async ({ results }) => {
+				const packages = results.packages ?? [];
+				const major = Array.isArray(results.major) ? results.major : [];
+				const minor = Array.isArray(results.minor) ? results.minor : [];
+				const possiblePackages = packages.filter(pkg => !major.includes(pkg) && !minor.includes(pkg));
+				if (possiblePackages.length === 0) return;
+				let note = possiblePackages.join('\n');
+
+				p.log.step(`These packages will have a ${color.green('patch')} bump.\n${color.dim(note)}`);
+				return possiblePackages
+			}
+		},
+		{
+			onCancel
+		}
+	);
+
+	const message = await p.text({
+		placeholder: 'Summary',
+		message: 'Please enter a summary for this change'
+	})
+
+	if (p.isCancel(message)) {
+		return onCancel()
+	}
+
+	p.outro(`Changeset added! ${color.underline(color.cyan('.changeset/orange-crabs-sing.md'))}`);
+}
+
+main().catch(console.error);

examples/changesets/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@example/changesets",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "@clack/core": "workspace:*",
+    "@clack/prompts": "workspace:*",
+    "picocolors": "^1.0.0"
+  },
+  "scripts": {
+    "start": "jiti ./index.ts"
+  },
+  "devDependencies": {
+    "jiti": "^1.17.0"
+  }
+}

examples/changesets/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

package.json

@@ -8,6 +8,7 @@
     "build:core": "pnpm --filter @clack/core run build",
     "build:prompts": "pnpm --filter @clack/prompts run build",
     "start": "pnpm --filter @example/basic run start",
+    "dev": "pnpm --filter @example/changesets run start",
     "format": "pnpm run format:code",
     "format:code": "prettier -w . --cache",
     "format:imports": "organize-imports-cli ./packages/*/tsconfig.json",

packages/core/src/index.ts

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

packages/core/src/prompts/group-multiselect.ts

@@ -0,0 +1,70 @@
+import Prompt, { PromptOptions } from './prompt';
+
+interface GroupMultiSelectOptions<T extends { value: any }> extends PromptOptions<GroupMultiSelectPrompt<T>> {
+	options: Record<string, T[]>;
+	initialValues?: T['value'][];
+	required?: boolean;
+	cursorAt?: T['value'];
+}
+export default class GroupMultiSelectPrompt<T extends { value: any }> extends Prompt {
+	options: (T & { group: string | boolean })[];
+	cursor: number = 0;
+
+	getGroupItems(group: string): T[] {
+		return this.options.filter(o => o.group === group);
+	}
+
+	isGroupSelected(group: string) {
+		const items = this.getGroupItems(group);
+		return items.every(i => this.value.includes(i.value));
+	}
+
+	private toggleValue() {
+		const item = this.options[this.cursor];
+		if (item.group === true) {
+			const group = item.value;
+			const groupedItems = this.getGroupItems(group);
+			if (this.isGroupSelected(group)) {
+				this.value = this.value.filter((v: string) => groupedItems.findIndex(i => i.value === v) === -1);
+			} else {
+				this.value = [...this.value, ...groupedItems.map(i => i.value)];
+			}
+			this.value = Array.from(new Set(this.value));
+		} else {
+			const selected = this.value.includes(item.value);
+			this.value = selected
+				? this.value.filter((v: T['value']) => v !== item.value)
+				: [...this.value, item.value];
+		}
+	}
+
+	constructor(opts: GroupMultiSelectOptions<T>) {
+		super(opts, false);
+		const { options } = opts;
+		this.options = Object.entries(options).flatMap(([key, option]) => [
+	{ value: key, group: true, label: key },
+	...option.map((opt) => ({ ...opt, group: key })),
+])
+		this.value = [...(opts.initialValues ?? [])];
+		this.cursor = Math.max(
+			this.options.findIndex(({ value }) => value === opts.cursorAt),
+			0
+		);
+
+		this.on('cursor', (key) => {
+			switch (key) {
+				case 'left':
+				case 'up':
+					this.cursor = this.cursor === 0 ? this.options.length - 1 : this.cursor - 1;
+					break;
+				case 'down':
+				case 'right':
+					this.cursor = this.cursor === this.options.length - 1 ? 0 : this.cursor + 1;
+					break;
+				case 'space':
+					this.toggleValue();
+					break;
+			}
+		});
+	}
+}

packages/core/src/prompts/multi-select.ts

@@ -14,6 +14,11 @@ export default class MultiSelectPrompt<T extends { value: any }> extends Prompt
 		return this.options[this.cursor].value;
 	}
 
+	private toggleAll() {
+		const allSelected = this.value.length === this.options.length;
+		this.value = allSelected ? [] : this.options.map(v => v.value);
+	}
+
 	private toggleValue() {
 		const selected = this.value.includes(this._value);
 		this.value = selected
@@ -30,6 +35,11 @@ export default class MultiSelectPrompt<T extends { value: any }> extends Prompt
 			this.options.findIndex(({ value }) => value === opts.cursorAt),
 			0
 		);
+		this.on('key', (char) => {
+			if (char === 'a') {
+				this.toggleAll()
+			}
+		})
 
 		this.on('cursor', (key) => {
 			switch (key) {