[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
feat: add unicode fallbacks
Nate Moore
(Feb 14, 2023, 10:03 AM -0600)
1d4cec88
d366a1f6
+34
-22
+1
packages/prompts/package.json
+1
packages/prompts/package.json
+26
-22
packages/prompts/src/index.ts
+26
-22
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
+
7
11
const symbol = (state: State) => {
8
12
switch (state) {
9
13
case "initial":
10
14
case "active":
11
-
return color.cyan("●");
15
+
return color.cyan(unicode ? "●" : "$");
12
16
case "cancel":
13
-
return color.red("■");
17
+
return color.red(unicode ? "■" : "x");
14
18
case "error":
15
-
return color.yellow("▲");
19
+
return color.yellow(unicode ? "▲" : "x");
16
20
case "submit":
17
-
return color.green("○");
21
+
return color.green(unicode ? "○" : "$");
18
22
}
19
23
};
20
24
21
-
const barStart = "┌";
22
-
const bar = "│";
23
-
const barEnd = "└";
25
+
const barStart = unicode ? "┌" : "|";
26
+
const bar = unicode ? "│" : "|";
27
+
const barEnd = unicode ? "└" : "|";
24
28
25
29
export interface TextOptions {
26
30
message: string;
···
92
96
default: {
93
97
return `${title}${color.cyan(bar)} ${
94
98
this.value
95
-
? `${color.green("●")} ${active}`
96
-
: `${color.dim("○")} ${color.dim(active)}`
99
+
? `${color.green(unicode ? "●" : ">")} ${active}`
100
+
: `${color.dim(unicode ? "○" : " ")} ${color.dim(active)}`
97
101
} ${color.dim("/")} ${
98
102
!this.value
99
-
? `${color.green("●")} ${inactive}`
100
-
: `${color.dim("○")} ${color.dim(inactive)}`
103
+
? `${color.green(unicode ? "●" : ">")} ${inactive}`
104
+
: `${color.dim(unicode ? "○" : " ")} ${color.dim(inactive)}`
101
105
}\n${color.cyan(barEnd)}\n`;
102
106
}
103
107
}
···
124
128
) => {
125
129
const label = option.label ?? option.value;
126
130
if (state === "active") {
127
-
return `${color.green("●")} ${label} ${
131
+
return `${color.green(unicode ? "●" : '>')} ${label} ${
128
132
option.hint ? color.dim(`(${option.hint})`) : ""
129
133
}`;
130
134
} else if (state === "selected") {
···
132
136
} else if (state === "cancelled") {
133
137
return `${color.strikethrough(color.dim(label))}`;
134
138
}
135
-
return `${color.dim("○")} ${color.dim(label)}`;
139
+
return `${color.dim(unicode ? "○" : '-')} ${color.dim(label)}`;
136
140
};
137
141
138
142
return new SelectPrompt({
···
170
174
const opt = (option: Options[number], state: 'inactive' | 'active' | 'selected' | 'active-selected' | 'submitted' | 'cancelled') => {
171
175
const label = option.label ?? option.value;
172
176
if (state === 'active') {
173
-
return `${color.cyan('◻')} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
177
+
return `${color.cyan(unicode ? '◻' : ">")} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
174
178
} else if (state === 'selected') {
175
-
return `${color.green('◼')} ${color.dim(label)}`
179
+
return `${color.green(unicode ? '◼' : "+")} ${color.dim(label)}`
176
180
} else if (state === 'cancelled') {
177
181
return `${color.strikethrough(color.dim(label))}`;
178
182
} else if (state === 'active-selected') {
179
-
return `${color.green('◼')} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
183
+
return `${color.green(unicode ? '◼' : "+")} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
180
184
} else if (state === 'submitted') {
181
185
return `${color.dim(label)}`;
182
186
}
183
-
return `${color.dim('◻')} ${color.dim(label)}`;
187
+
return `${color.dim(unicode ? '◻' : "-")} ${color.dim(label)}`;
184
188
}
185
189
186
190
return new MultiSelectPrompt({
···
239
243
return ln.length > sum ? ln.length : sum
240
244
}, 0) + 2;
241
245
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`);
246
+
process.stdout.write(`${color.gray(bar)}\n${color.green(unicode ? '○' : '$')} ${color.reset(title)} ${color.gray((unicode ? '─' : '-').repeat(len - title.length - 1) + (unicode ? '╮' : '+'))}\n${msg}\n${color.gray((unicode ? '├' : '+') + (unicode ? '─' : '-').repeat(len + 2) + (unicode ? '╯' : '+'))}\n`);
243
247
};
244
248
245
249
export const cancel = (message = "") => {
···
256
260
);
257
261
};
258
262
259
-
const arc = [
263
+
const arc = unicode ? [
260
264
'◒', '◐', '◓', '◑'
261
-
]
265
+
] : ['.','o','O','0']
262
266
263
267
export const spinner = () => {
264
268
let unblock: () => void;
265
269
let loop: NodeJS.Timer;
266
270
const frames = arc;
267
-
const delay = 80;
271
+
const delay = unicode ? 80 : 120;
268
272
return {
269
273
start(message = "") {
270
274
message = message.replace(/\.?\.?\.$/, "");
···
289
293
process.stdout.write(erase.down(2));
290
294
clearInterval(loop);
291
295
process.stdout.write(
292
-
`${color.gray(bar)}\n${color.green("○")} ${message}\n`
296
+
`${color.gray(bar)}\n${color.green(unicode ? "○" : '$')} ${message}\n`
293
297
);
294
298
unblock();
295
299
},
+7
pnpm-lock.yaml
+7
pnpm-lock.yaml
···
43
43
packages/prompts:
44
44
specifiers:
45
45
'@clack/core': workspace:^0.1.3
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
49
50
dependencies:
50
51
'@clack/core': link:../core
52
+
is-unicode-supported: 1.3.0
51
53
picocolors: 1.0.0
52
54
sisteransi: 1.0.5
53
55
devDependencies:
···
1991
1993
gopd: 1.0.1
1992
1994
has-tostringtag: 1.0.0
1993
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'}
2000
+
dev: false
1994
2001
1995
2002
/is-weakref/1.0.2:
1996
2003
resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}