[READ-ONLY] Mirror of https://github.com/bombshell-dev/clack. Effortlessly build beautiful command-line apps
bomb.sh/docs/clack/basics/getting-started/
cli
command-line
command-line-app
node
prompt
prompts
Merge branch 'main' of https://github.com/natemoo-re/clack into feat/defineGroup
Christian Preston
(Feb 16, 2023, 1:34 PM EST)
cf1e056a
e6e74371
+137
-73
+3
examples/basic/index.ts
+3
examples/basic/index.ts
···
40
40
name: 'type',
41
41
options: {
42
42
message: "Pick a project type.",
43
+
initialValue: 'ts',
43
44
options: [
44
45
{ value: "ts", label: "TypeScript" },
45
46
{ value: "js", label: "JavaScript" },
···
51
52
name: 'tools',
52
53
options: {
53
54
message: "Select additional tools.",
55
+
cursorAt: 'stylelint',
56
+
initialValue: ['eslint', 'gh-action'],
54
57
options: [
55
58
{ value: "prettier", label: "Prettier", hint: "recommended" },
56
59
{ value: "eslint", label: "ESLint" },
+7
packages/core/CHANGELOG.md
+7
packages/core/CHANGELOG.md
+1
-1
packages/core/package.json
+1
-1
packages/core/package.json
+4
-3
packages/core/src/prompts/multi-select.ts
+4
-3
packages/core/src/prompts/multi-select.ts
···
3
3
4
4
interface MultiSelectOptions<T extends { value: any }> extends PromptOptions<MultiSelectPrompt<T>> {
5
5
options: T[];
6
-
initialValue?: T['value'];
6
+
initialValue?: T['value'][];
7
+
cursorAt?: T['value']
7
8
}
8
9
export default class MultiSelectPrompt<T extends { value: any }> extends Prompt {
9
10
options: T[];
···
34
35
this.value = this.selectedValues;
35
36
})
36
37
this.options = opts.options;
37
-
this.cursor = this.options.findIndex(({ value }) => value === opts.initialValue);
38
-
this.selectedValues = []
38
+
this.cursor = this.options.findIndex(({ value }) => value === opts.cursorAt);
39
+
this.selectedValues = opts.initialValue || [];
39
40
if (this.cursor === -1) this.cursor = 0;
40
41
41
42
this.on('cursor', (key) => {
+1
packages/core/src/prompts/prompt.ts
+1
packages/core/src/prompts/prompt.ts
+14
packages/prompts/CHANGELOG.md
+14
packages/prompts/CHANGELOG.md
···
1
1
# @clack/prompts
2
2
3
+
## 0.3.0
4
+
5
+
### Minor Changes
6
+
7
+
- 493c592: Improve types for select/multiselect prompts. Numbers and booleans are now supported as the `value` option.
8
+
- 15558e3: Improved Windows/non-unicode support
9
+
10
+
### Patch Changes
11
+
12
+
- ca77da1: Fix multiselect initial value logic
13
+
- Updated dependencies [ca77da1]
14
+
- Updated dependencies [8aed606]
15
+
- @clack/core@0.1.4
16
+
3
17
## 0.2.2
4
18
5
19
### Patch Changes
+8
-4
packages/prompts/package.json
+8
-4
packages/prompts/package.json
···
1
1
{
2
2
"name": "@clack/prompts",
3
-
"version": "0.2.2",
3
+
"version": "0.3.0",
4
4
"type": "module",
5
5
"main": "./dist/index.cjs",
6
6
"module": "./dist/index.mjs",
···
52
52
"prepack": "unbuild"
53
53
},
54
54
"dependencies": {
55
-
"@clack/core": "workspace:^0.1.3",
55
+
"@clack/core": "workspace:^0.1.4",
56
56
"picocolors": "^1.0.0",
57
57
"sisteransi": "^1.0.5"
58
58
},
59
59
"devDependencies": {
60
-
"unbuild": "^1.1.1"
61
-
}
60
+
"unbuild": "^1.1.1",
61
+
"is-unicode-supported": "^1.3.0"
62
+
},
63
+
"bundledDependencies": [
64
+
"is-unicode-supported"
65
+
]
62
66
}
+91
-64
packages/prompts/src/index.ts
+91
-64
packages/prompts/src/index.ts
···
2
2
import { MultiSelectPrompt, TextPrompt, SelectPrompt, ConfirmPrompt, block } from "@clack/core";
3
3
import color from "picocolors";
4
4
import { cursor, erase } from "sisteransi";
5
+
import isUnicodeSupported from "is-unicode-supported";
6
+
5
7
export { isCancel } from "@clack/core";
6
8
9
+
const unicode = isUnicodeSupported();
10
+
const s = (c: string, fallback: string) => unicode ? c : fallback;
11
+
const S_STEP_ACTIVE = s("◆", "*");
12
+
const S_STEP_CANCEL = s("■", "x");
13
+
const S_STEP_ERROR = s("▲", "x");
14
+
const S_STEP_SUBMIT = s("◇", "o");
15
+
16
+
const S_BAR_START = s("┌", "T");
17
+
const S_BAR = s("│", "|");
18
+
const S_BAR_END = s("└", "—");
19
+
20
+
const S_RADIO_ACTIVE = s("●", ">");
21
+
const S_RADIO_INACTIVE = s("○", " ");
22
+
const S_CHECKBOX_ACTIVE = s("◻", "[•]");
23
+
const S_CHECKBOX_SELECTED = s("◼", "[+]");
24
+
const S_CHECKBOX_INACTIVE = s("◻", "[ ]");
25
+
26
+
const S_BAR_H = s('─', '-');
27
+
const S_CORNER_TOP_RIGHT = s('╮', '+');
28
+
const S_CONNECT_LEFT = s('├', '+');
29
+
const S_CORNER_BOTTOM_RIGHT = s('╯', '+');
30
+
7
31
const symbol = (state: State) => {
8
32
switch (state) {
9
33
case "initial":
10
34
case "active":
11
-
return color.cyan("●");
35
+
return color.cyan(S_STEP_ACTIVE);
12
36
case "cancel":
13
-
return color.red("■");
37
+
return color.red(S_STEP_CANCEL);
14
38
case "error":
15
-
return color.yellow("▲");
39
+
return color.yellow(S_STEP_ERROR);
16
40
case "submit":
17
-
return color.green("○");
41
+
return color.green(S_STEP_SUBMIT);
18
42
}
19
43
};
20
44
21
-
const barStart = "┌";
22
-
const bar = "│";
23
-
const barEnd = "└";
24
-
25
45
export interface TextOptions {
26
46
message: string;
27
47
placeholder?: string;
···
34
54
placeholder: opts.placeholder,
35
55
initialValue: opts.initialValue,
36
56
render() {
37
-
const title = `${color.gray(bar)}\n${symbol(this.state)} ${
57
+
const title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${
38
58
opts.message
39
59
}\n`;
40
60
const placeholder = opts.placeholder
···
46
66
switch (this.state) {
47
67
case "error":
48
68
return `${title.trim()}\n${color.yellow(
49
-
bar
50
-
)} ${value}\n${color.yellow(barEnd)} ${color.yellow(this.error)}\n`;
69
+
S_BAR
70
+
)} ${value}\n${color.yellow(S_BAR_END)} ${color.yellow(this.error)}\n`;
51
71
case "submit":
52
-
return `${title}${color.gray(bar)} ${color.dim(this.value)}`;
72
+
return `${title}${color.gray(S_BAR)} ${color.dim(this.value)}`;
53
73
case "cancel":
54
-
return `${title}${color.gray(bar)} ${color.strikethrough(
74
+
return `${title}${color.gray(S_BAR)} ${color.strikethrough(
55
75
color.dim(this.value)
56
-
)}${this.value.trim() ? "\n" + color.gray(bar) : ""}`;
76
+
)}${this.value.trim() ? "\n" + color.gray(S_BAR) : ""}`;
57
77
default:
58
-
return `${title}${color.cyan(bar)} ${value}\n${color.cyan(
59
-
barEnd
78
+
return `${title}${color.cyan(S_BAR)} ${value}\n${color.cyan(
79
+
S_BAR_END
60
80
)}\n`;
61
81
}
62
82
},
···
77
97
inactive,
78
98
initialValue: opts.initialValue ?? true,
79
99
render() {
80
-
const title = `${color.gray(bar)}\n${symbol(this.state)} ${
100
+
const title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${
81
101
opts.message
82
102
}\n`;
83
103
const value = this.value ? active : inactive;
84
104
85
105
switch (this.state) {
86
106
case "submit":
87
-
return `${title}${color.gray(bar)} ${color.dim(value)}`;
107
+
return `${title}${color.gray(S_BAR)} ${color.dim(value)}`;
88
108
case "cancel":
89
-
return `${title}${color.gray(bar)} ${color.strikethrough(
109
+
return `${title}${color.gray(S_BAR)} ${color.strikethrough(
90
110
color.dim(value)
91
-
)}\n${color.gray(bar)}`;
111
+
)}\n${color.gray(S_BAR)}`;
92
112
default: {
93
-
return `${title}${color.cyan(bar)} ${
113
+
return `${title}${color.cyan(S_BAR)} ${
94
114
this.value
95
-
? `${color.green("●")} ${active}`
96
-
: `${color.dim("○")} ${color.dim(active)}`
115
+
? `${color.green(S_RADIO_ACTIVE)} ${active}`
116
+
: `${color.dim(S_RADIO_INACTIVE)} ${color.dim(active)}`
97
117
} ${color.dim("/")} ${
98
118
!this.value
99
-
? `${color.green("●")} ${inactive}`
100
-
: `${color.dim("○")} ${color.dim(inactive)}`
101
-
}\n${color.cyan(barEnd)}\n`;
119
+
? `${color.green(S_RADIO_ACTIVE)} ${inactive}`
120
+
: `${color.dim(S_RADIO_INACTIVE)} ${color.dim(inactive)}`
121
+
}\n${color.cyan(S_BAR_END)}\n`;
102
122
}
103
123
}
104
124
},
105
125
}).prompt() as Promise<boolean | symbol>;
106
126
};
107
127
108
-
interface Option<Value extends Readonly<string>> {
128
+
type Primitive = Readonly<string | boolean | number>;
129
+
interface Option<Value extends Primitive> {
109
130
value: Value;
110
131
label?: string;
111
132
hint?: string;
112
133
}
113
-
export interface SelectOptions<Options extends Option<Value>[], Value extends Readonly<string>> {
134
+
export interface SelectOptions<Options extends Option<Value>[], Value extends Primitive> {
114
135
message: string;
115
136
options: Options;
116
137
initialValue?: Options[number]["value"];
117
138
}
118
-
export const select = <Options extends Option<Value>[], Value extends Readonly<string>>(
139
+
140
+
export interface MultiSelectOptions<Options extends Option<Value>[], Value extends Primitive> {
141
+
message: string;
142
+
options: Options;
143
+
initialValue?: Options[number]['value'][];
144
+
cursorAt?: Options[number]["value"]
145
+
}
146
+
147
+
export const select = <Options extends Option<Value>[], Value extends Primitive>(
119
148
opts: SelectOptions<Options, Value>
120
149
) => {
121
150
const opt = (
122
151
option: Options[number],
123
152
state: "inactive" | "active" | "selected" | "cancelled"
124
153
) => {
125
-
const label = option.label ?? option.value;
154
+
const label = option.label ?? String(option.value);
126
155
if (state === "active") {
127
-
return `${color.green("●")} ${label} ${
156
+
return `${color.green(S_RADIO_ACTIVE)} ${label} ${
128
157
option.hint ? color.dim(`(${option.hint})`) : ""
129
158
}`;
130
159
} else if (state === "selected") {
···
132
161
} else if (state === "cancelled") {
133
162
return `${color.strikethrough(color.dim(label))}`;
134
163
}
135
-
return `${color.dim("○")} ${color.dim(label)}`;
164
+
return `${color.dim(S_RADIO_INACTIVE)} ${color.dim(label)}`;
136
165
};
137
166
138
167
return new SelectPrompt({
139
168
options: opts.options,
140
169
initialValue: opts.initialValue,
141
170
render() {
142
-
const title = `${color.gray(bar)}\n${symbol(this.state)} ${
171
+
const title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${
143
172
opts.message
144
173
}\n`;
145
174
146
175
switch (this.state) {
147
176
case "submit":
148
-
return `${title}${color.gray(bar)} ${opt(
177
+
return `${title}${color.gray(S_BAR)} ${opt(
149
178
this.options[this.cursor],
150
179
"selected"
151
180
)}`;
152
181
case "cancel":
153
-
return `${title}${color.gray(bar)} ${opt(
182
+
return `${title}${color.gray(S_BAR)} ${opt(
154
183
this.options[this.cursor],
155
184
"cancelled"
156
-
)}\n${color.gray(bar)}`;
185
+
)}\n${color.gray(S_BAR)}`;
157
186
default: {
158
-
return `${title}${color.cyan(bar)} ${this.options
187
+
return `${title}${color.cyan(S_BAR)} ${this.options
159
188
.map((option, i) =>
160
189
opt(option, i === this.cursor ? "active" : "inactive")
161
190
)
162
-
.join(`\n${color.cyan(bar)} `)}\n${color.cyan(barEnd)}\n`;
191
+
.join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
163
192
}
164
193
}
165
194
},
166
195
}).prompt() as Promise<Options[number]['value'] | symbol>;
167
196
};
168
197
169
-
export const multiselect = <Options extends Option<Value>[], Value extends Readonly<string>>(opts: SelectOptions<Options, Value>) => {
198
+
export const multiselect = <Options extends Option<Value>[], Value extends Primitive>(opts: MultiSelectOptions<Options, Value>) => {
170
199
const opt = (option: Options[number], state: 'inactive' | 'active' | 'selected' | 'active-selected' | 'submitted' | 'cancelled') => {
171
-
const label = option.label ?? option.value;
200
+
const label = option.label ?? String(option.value);
172
201
if (state === 'active') {
173
-
return `${color.cyan('◻')} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
202
+
return `${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
174
203
} else if (state === 'selected') {
175
-
return `${color.green('◼')} ${color.dim(label)}`
204
+
return `${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`
176
205
} else if (state === 'cancelled') {
177
206
return `${color.strikethrough(color.dim(label))}`;
178
207
} else if (state === 'active-selected') {
179
-
return `${color.green('◼')} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
208
+
return `${color.green(S_CHECKBOX_SELECTED)} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
180
209
} else if (state === 'submitted') {
181
210
return `${color.dim(label)}`;
182
211
}
183
-
return `${color.dim('◻')} ${color.dim(label)}`;
212
+
return `${color.dim(S_CHECKBOX_INACTIVE)} ${color.dim(label)}`;
184
213
}
185
214
186
215
return new MultiSelectPrompt({
187
216
options: opts.options,
188
217
initialValue: opts.initialValue,
218
+
cursorAt: opts.cursorAt,
189
219
render() {
190
-
let title = `${color.gray(bar)}\n${symbol(this.state)} ${opts.message}\n`;
220
+
let title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}\n`;
191
221
192
222
switch (this.state) {
193
223
case 'submit': {
194
224
const selectedOptions = this.options.filter(option => this.selectedValues.some(selectedValue => selectedValue === option.value as any));
195
-
return `${title}${color.gray(bar)} ${selectedOptions.map((option, i) => opt(option, 'submitted')).join(color.dim(", "))}`;
225
+
return `${title}${color.gray(S_BAR)} ${selectedOptions.map((option, i) => opt(option, 'submitted')).join(color.dim(", "))}`;
196
226
};
197
227
case 'cancel': {
198
228
const selectedOptions = this.options.filter(option => this.selectedValues.some(selectedValue => selectedValue === option.value as any));
199
229
const label = selectedOptions.map((option, i) => opt(option, 'cancelled')).join(color.dim(", "));
200
-
return `${title}${color.gray(bar)} ${label.trim() ? `${label}\n${color.gray(bar)}` : ''}`
230
+
return `${title}${color.gray(S_BAR)} ${label.trim() ? `${label}\n${color.gray(S_BAR)}` : ''}`
201
231
};
202
232
case 'error': {
203
-
const footer = this.error.split('\n').map((ln, i) => i === 0 ? `${color.yellow(barEnd)} ${color.yellow(ln)}` : ` ${ln}`).join('\n');
204
-
return `${title}${color.yellow(bar)} ${this.options.map((option, i) => {
233
+
const footer = this.error.split('\n').map((ln, i) => i === 0 ? `${color.yellow(S_BAR_END)} ${color.yellow(ln)}` : ` ${ln}`).join('\n');
234
+
return `${title}${color.yellow(S_BAR)} ${this.options.map((option, i) => {
205
235
const isOptionSelected = this.selectedValues.includes(option.value as any);
206
236
const isOptionHovered = i === this.cursor;
207
237
if(isOptionHovered && isOptionSelected) {
···
211
241
return opt(option, 'selected');
212
242
}
213
243
return opt(option, isOptionHovered ? 'active' : 'inactive');
214
-
}).join(`\n${color.yellow(bar)} `)}\n${footer}\n`;
244
+
}).join(`\n${color.yellow(S_BAR)} `)}\n${footer}\n`;
215
245
}
216
246
default: {
217
-
return `${title}${color.cyan(bar)} ${this.options.map((option, i) => {
247
+
return `${title}${color.cyan(S_BAR)} ${this.options.map((option, i) => {
218
248
const isOptionSelected = this.selectedValues.includes(option.value as any);
219
249
const isOptionHovered = i === this.cursor;
220
250
if(isOptionHovered && isOptionSelected) {
···
224
254
return opt(option, 'selected');
225
255
}
226
256
return opt(option, isOptionHovered ? 'active' : 'inactive');
227
-
}).join(`\n${color.cyan(bar)} `)}\n${color.cyan(barEnd)}\n`;
257
+
}).join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
228
258
}
229
259
}
230
260
}
···
238
268
ln = strip(ln);
239
269
return ln.length > sum ? ln.length : sum
240
270
}, 0) + 2;
241
-
const msg = lines.map((ln) => `${color.gray(bar)} ${color.dim(ln)}${' '.repeat(len - strip(ln).length)}${color.gray(bar)}`).join('\n');
242
-
process.stdout.write(`${color.gray(bar)}\n${color.green('○')} ${color.reset(title)} ${color.gray('─'.repeat(len - title.length - 1) + '╮')}\n${msg}\n${color.gray('├' + '─'.repeat(len + 2) + '╯')}\n`);
271
+
const msg = lines.map((ln) => `${color.gray(S_BAR)} ${color.dim(ln)}${' '.repeat(len - strip(ln).length)}${color.gray(S_BAR)}`).join('\n');
272
+
process.stdout.write(`${color.gray(S_BAR)}\n${color.green(S_STEP_SUBMIT)} ${color.reset(title)} ${color.gray(S_BAR_H.repeat(len - title.length - 1) + S_CORNER_TOP_RIGHT)}\n${msg}\n${color.gray(S_CONNECT_LEFT + S_BAR_H.repeat(len + 2) + S_CORNER_BOTTOM_RIGHT)}\n`);
243
273
};
244
274
245
275
export const cancel = (message = "") => {
246
-
process.stdout.write(`${color.gray(barEnd)} ${color.red(message)}\n\n`);
276
+
process.stdout.write(`${color.gray(S_BAR_END)} ${color.red(message)}\n\n`);
247
277
};
248
278
249
279
export const intro = (title = "") => {
250
-
process.stdout.write(`${color.gray(barStart)} ${title}\n`);
280
+
process.stdout.write(`${color.gray(S_BAR_START)} ${title}\n`);
251
281
};
252
282
253
283
export const outro = (message = "") => {
254
284
process.stdout.write(
255
-
`${color.gray(bar)}\n${color.gray(barEnd)} ${message}\n\n`
285
+
`${color.gray(S_BAR)}\n${color.gray(S_BAR_END)} ${message}\n\n`
256
286
);
257
287
};
258
288
259
-
const arc = [
260
-
'◒', '◐', '◓', '◑'
261
-
]
289
+
const frames = unicode ? ['◒', '◐', '◓', '◑'] : ['•','o','O','0']
262
290
263
291
export const spinner = () => {
264
292
let unblock: () => void;
265
293
let loop: NodeJS.Timer;
266
-
const frames = arc;
267
-
const delay = 80;
294
+
const delay = unicode ? 80 : 120;
268
295
return {
269
296
start(message = "") {
270
297
message = message.replace(/\.?\.?\.$/, "");
271
298
unblock = block();
272
299
process.stdout.write(
273
-
`${color.gray(bar)}\n${color.magenta("○")} ${message}\n`
300
+
`${color.gray(S_BAR)}\n${color.magenta("○")} ${message}\n`
274
301
);
275
302
let i = 0;
276
303
let dot = 0;
···
289
316
process.stdout.write(erase.down(2));
290
317
clearInterval(loop);
291
318
process.stdout.write(
292
-
`${color.gray(bar)}\n${color.green("○")} ${message}\n`
319
+
`${color.gray(S_BAR)}\n${color.green(S_STEP_SUBMIT)} ${message}\n`
293
320
);
294
321
unblock();
295
322
},
+8
-1
pnpm-lock.yaml
+8
-1
pnpm-lock.yaml
···
42
42
43
43
packages/prompts:
44
44
specifiers:
45
-
'@clack/core': workspace:^0.1.3
45
+
'@clack/core': workspace:^0.1.4
46
+
is-unicode-supported: ^1.3.0
46
47
picocolors: ^1.0.0
47
48
sisteransi: ^1.0.5
48
49
unbuild: ^1.1.1
···
51
52
picocolors: 1.0.0
52
53
sisteransi: 1.0.5
53
54
devDependencies:
55
+
is-unicode-supported: 1.3.0
54
56
unbuild: 1.1.1
55
57
56
58
packages:
···
1990
1992
for-each: 0.3.3
1991
1993
gopd: 1.0.1
1992
1994
has-tostringtag: 1.0.0
1995
+
dev: true
1996
+
1997
+
/is-unicode-supported/1.3.0:
1998
+
resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
1999
+
engines: {node: '>=12'}
1993
2000
dev: true
1994
2001
1995
2002
/is-weakref/1.0.2: