Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(@clack/prompts): add disabled option to select and multiselect prompts #161

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat(@clack/prompts): add disabled option to select and multiselect prompts #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
49cf08b
feat: select prompt disabled option
Mist3rBru Aug 28, 2023
0e6ce60
feat: multiselect prompt disabled option
Mist3rBru Aug 28, 2023
68bc495
Merge branch 'main' of https://github.com/natemoo-re/clack into selec…
Mist3rBru Aug 31, 2023
2740d3f
chore: add changeset
Mist3rBru Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/little-horses-sort.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clack/prompts': patch
---

feat: add `disabled` option to `select` and `multiselect` prompts
9 changes: 7 additions & 2 deletions examples/basic/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,23 @@ async function main() {
{ value: 'rust', label: 'Rust' },
{ value: 'go', label: 'Go' },
{ value: 'python', label: 'Python' },
{ value: 'coffee', label: 'CoffeeScript', hint: 'oh no' },
{ value: 'coffee', label: 'CoffeeScript', disabled: true, hint: 'oh no' },
],
}),
tools: () =>
p.multiselect({
message: 'Select additional tools.',
initialValues: ['prettier', 'eslint'],
maxItems: 5,
options: [
{ value: 'prettier', label: 'Prettier', hint: 'recommended' },
{ value: 'eslint', label: 'ESLint', hint: 'recommended' },
{ value: 'stylelint', label: 'Stylelint' },
{ value: 'gh-action', label: 'GitHub Action' },
{ value: 'gh-action', label: 'GitHub Actions' },
{ value: 'changeset', label: 'Changeset', disabled: true },
{ value: 'mocha', label: 'Mocha', disabled: true },
{ value: 'jest', label: 'Jest' },
{ value: 'vitest', label: 'Vitest' },
],
}),
install: () =>
Expand Down
117 changes: 73 additions & 44 deletions packages/prompts/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
SelectKeyPrompt,
SelectPrompt,
State,
TextPrompt
TextPrompt,
} from '@clack/core';
import isUnicodeSupported from 'is-unicode-supported';
import color from 'picocolors';
Expand Down Expand Up @@ -209,23 +209,28 @@ type Option<Value> = Value extends Primitive
? { value: Value; label?: string; hint?: string }
: { value: Value; label: string; hint?: string };

type DisableableOption<Value> = Option<Value> & { disabled?: boolean };

export interface SelectOptions<Value> {
message: string;
options: Option<Value>[];
options: DisableableOption<Value>[];
initialValue?: Value;
maxItems?: number;
}

export const select = <Value>(opts: SelectOptions<Value>) => {
const opt = (option: Option<Value>, state: 'inactive' | 'active' | 'selected' | 'cancelled') => {
const opt = (
option: DisableableOption<Value>,
state: 'inactive' | 'active' | 'selected' | 'cancelled'
) => {
const label = option.label ?? String(option.value);
switch (state) {
case 'selected':
return `${color.dim(label)}`;
case 'active':
return `${color.green(S_RADIO_ACTIVE)} ${label} ${
option.hint ? color.dim(`(${option.hint})`) : ''
}`;
return `${
option.disabled ? color.dim(S_RADIO_ACTIVE) : color.green(S_RADIO_ACTIVE)
} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`;
case 'cancelled':
return `${color.strikethrough(color.dim(label))}`;
default:
Expand All @@ -236,6 +241,11 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
return new SelectPrompt({
options: opts.options,
initialValue: opts.initialValue,
validate(value) {
if (this.options.find((o) => o.value === value)?.disabled) {
return 'Selected option is disabled.';
}
},
render() {
const title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}\n`;

Expand All @@ -247,6 +257,15 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
this.options[this.cursor],
'cancelled'
)}\n${color.gray(S_BAR)}`;
case 'error':
return `${title}${color.yellow(S_BAR)} ${limitOptions({
cursor: this.cursor,
options: this.options,
maxItems: opts.maxItems,
style: (item, active) => opt(item, active ? 'active' : 'inactive'),
}).join(`\n${color.yellow(S_BAR)} `)}\n${color.yellow(S_BAR_END)} ${color.yellow(
this.error
)}\n`;
default: {
return `${title}${color.cyan(S_BAR)} ${limitOptions({
cursor: this.cursor,
Expand Down Expand Up @@ -308,34 +327,38 @@ export const selectKey = <Value extends string>(opts: SelectOptions<Value>) => {

export interface MultiSelectOptions<Value> {
message: string;
options: Option<Value>[];
options: DisableableOption<Value>[];
initialValues?: Value[];
maxItems?: number;
required?: boolean;
cursorAt?: Value;
}
export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
const opt = (
option: Option<Value>,
option: DisableableOption<Value>,
state: 'inactive' | 'active' | 'selected' | 'active-selected' | 'submitted' | 'cancelled'
) => {
const label = option.label ?? String(option.value);
if (state === 'active') {
return `${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${
option.hint ? color.dim(`(${option.hint})`) : ''
}`;
} else if (state === 'selected') {
return `${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
} else if (state === 'cancelled') {
return `${color.strikethrough(color.dim(label))}`;
} else if (state === 'active-selected') {
return `${color.green(S_CHECKBOX_SELECTED)} ${label} ${
option.hint ? color.dim(`(${option.hint})`) : ''
}`;
} else if (state === 'submitted') {
return `${color.dim(label)}`;
switch (state) {
case 'active':
return `${
option.disabled ? color.dim(S_CHECKBOX_ACTIVE) : color.cyan(S_CHECKBOX_ACTIVE)
} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`;
case 'selected':
return `${
option.disabled ? color.dim(S_CHECKBOX_SELECTED) : color.green(S_CHECKBOX_SELECTED)
} ${color.dim(label)}`;
case 'cancelled':
return `${color.strikethrough(color.dim(label))}`;
case 'active-selected':
return `${
option.disabled ? color.dim(S_CHECKBOX_SELECTED) : color.green(S_CHECKBOX_SELECTED)
} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`;
case 'submitted':
return `${color.dim(label)}`;
default:
return `${color.dim(S_CHECKBOX_INACTIVE)} ${color.dim(label)}`;
}
return `${color.dim(S_CHECKBOX_INACTIVE)} ${color.dim(label)}`;
};

return new MultiSelectPrompt({
Expand All @@ -344,19 +367,33 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
required: opts.required ?? true,
cursorAt: opts.cursorAt,
validate(selected: Value[]) {
if (this.required && selected.length === 0)
if (this.required && selected.length === 0) {
return `Please select at least one option.\n${color.reset(
color.dim(
`Press ${color.gray(color.bgWhite(color.inverse(' space ')))} to select, ${color.gray(
color.bgWhite(color.inverse(' enter '))
)} to submit`
)
)}`;
}
const disabledOptions = opts.options
.map((option) => {
if (selected.includes(option.value) && option.disabled) {
return option.label ?? option.value;
}
return undefined;
})
.filter(Boolean);
if (disabledOptions.length) {
return `${disabledOptions.join(', ')} ${
disabledOptions.length > 1 ? 'options are' : 'option is'
} disabled.`;
}
},
render() {
let title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}\n`;
let title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}`;

const styleOption = (option: Option<Value>, active: boolean) => {
const styleOption = (option: DisableableOption<Value>, active: boolean) => {
const selected = this.value.includes(option.value);
if (active && selected) {
return opt(option, 'active-selected');
Expand All @@ -369,7 +406,7 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {

switch (this.state) {
case 'submit': {
return `${title}${color.gray(S_BAR)} ${
return `${title}\n${color.gray(S_BAR)} ${
this.options
.filter(({ value }) => this.value.includes(value))
.map((option) => opt(option, 'submitted'))
Expand All @@ -381,34 +418,26 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
.filter(({ value }) => this.value.includes(value))
.map((option) => opt(option, 'cancelled'))
.join(color.dim(', '));
return `${title}${color.gray(S_BAR)} ${
return `${title}\n${color.gray(S_BAR)} ${
label.trim() ? `${label}\n${color.gray(S_BAR)}` : ''
}`;
}
case 'error': {
const footer = this.error
.split('\n')
.map((ln, i) =>
i === 0 ? `${color.yellow(S_BAR_END)} ${color.yellow(ln)}` : ` ${ln}`
i === 0 ? `${color.yellow(S_BAR_END)} ${color.yellow(ln)}` : `${color.hidden('-')} ${ln}`
)
.join('\n');
return (
title +
color.yellow(S_BAR) +
' ' +
limitOptions({
options: this.options,
cursor: this.cursor,
maxItems: opts.maxItems,
style: styleOption,
}).join(`\n${color.yellow(S_BAR)} `) +
'\n' +
footer +
'\n'
);
return `${title}\n${color.yellow(S_BAR)} ${limitOptions({
options: this.options,
cursor: this.cursor,
maxItems: opts.maxItems,
style: styleOption,
}).join(`\n${color.yellow(S_BAR)} `)}\n${footer}\n`;
}
default: {
return `${title}${color.cyan(S_BAR)} ${limitOptions({
return `${title}\n${color.cyan(S_BAR)} ${limitOptions({
options: this.options,
cursor: this.cursor,
maxItems: opts.maxItems,
Expand Down
Loading