@topcli/prompts 1.0.1 → 1.2.0

package/README.md

@@ -27,20 +27,15 @@ $ yarn add @topcli/prompts
 You can locally run `node ./demo.js`
 
 ```js
-import { prompt, confirm, select } from '@topcli/prompts';
+import { question, confirm, select } from "@topcli/prompts";
 
-const kTestRunner = ['node', 'tap', 'tape', 'vitest', 'mocha', 'ava'];
+const kTestRunner = ["node", "tap", "tape", "vitest", "mocha", "ava"];
 
-const name = await prompt('Project name ?');
-const runner = await select('Choose a test runner', {
-  choices: kTestRunner,
-  maxVisible: 5
-});
-const isCLI = await confirm('Your project is a CLI ?', {
-  initial: true
-});
+const name = await question("Project name ?", { defaultValue: "foo" });
+const runner = await select("Choose a test runner", { choices: kTestRunner, maxVisible: 5 });
+const isCLI = await confirm("Your project is a CLI ?", { initial: true });
 
-console.log(name, runner, isCLI);^
+console.log(name, runner, isCLI);
 ```
 
 ## API
@@ -100,6 +95,7 @@ Boolean prompt, return `options.initial` if user input is different from "y"/"ye
 
 ```ts
 export interface PromptOptions {
+  defaultValue?: string;
   validators?: {
     validate: (input: string) => boolean;
     error: (input: string) => string;
@@ -140,6 +136,7 @@ export interface ConfirmOptions {
       <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/thomas-gentilhomme/"><img src="https://avatars.githubusercontent.com/u/4438263?v=4?s=100" width="100px;" alt="Gentilhomme"/><br /><sub><b>Gentilhomme</b></sub></a><br /><a href="https://github.com/TopCli/prompts/pulls?q=is%3Apr+reviewed-by%3Afraxken" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://tonygo.dev"><img src="https://avatars0.githubusercontent.com/u/22824417?v=4?s=100" width="100px;" alt="Tony Gorez"/><br /><sub><b>Tony Gorez</b></sub></a><br /><a href="https://github.com/TopCli/prompts/pulls?q=is%3Apr+reviewed-by%3Atony-go" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://sofiand.github.io/portfolio-client/"><img src="https://avatars.githubusercontent.com/u/39944043?v=4?s=100" width="100px;" alt="Yefis"/><br /><sub><b>Yefis</b></sub></a><br /><a href="https://github.com/TopCli/prompts/commits?author=SofianD" title="Code">💻</a> <a href="https://github.com/TopCli/prompts/commits?author=SofianD" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://justie.dev"><img src="https://avatars.githubusercontent.com/u/7118300?v=4?s=100" width="100px;" alt="Ben"/><br /><sub><b>Ben</b></sub></a><br /><a href="https://github.com/TopCli/prompts/commits?author=JUSTIVE" title="Documentation">📖</a> <a href="#maintenance-JUSTIVE" title="Maintenance">🚧</a></td>
     </tr>
   </tbody>
 </table>

package/index.d.ts

@@ -1,4 +1,11 @@
-export interface PromptOptions {
+export interface QuestionOptions {
+  stdin?: NodeJS.ReadStream & {
+    fd: 0;
+  };
+  stdout?: NodeJS.WriteStream & {
+    fd: 1;
+  };
+  defaultValue?: string;
   validators?: Validator[];
 }
 
@@ -23,7 +30,7 @@ export interface ConfirmOptions {
   initial?: boolean;
 }
 
-export function question(message: string, options?: PromptOptions): Promise<string>;
+export function question(message: string, options?: QuestionOptions): Promise<string>;
 export function select(message: string, options: SelectOptions): Promise<string>;
 export function confirm(message: string, options?: ConfirmOptions): Promise<boolean>;
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@topcli/prompts",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Node.js user input library for command-line interfaces.",
   "scripts": {
-    "test": "node --loader=esmock --test ./test/**.test.js",
+    "test": "node --no-warnings=ExperimentalWarning --loader=esmock --test test/",
     "coverage": "c8 -r html npm run test",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
@@ -24,13 +24,15 @@
   "type": "module",
   "devDependencies": {
     "@nodesecure/eslint-config": "^1.7.0",
-    "c8": "^7.13.0",
-    "eslint": "^8.38.0",
-    "esmock": "^2.1.0"
+    "@types/node": "^20.4.5",
+    "c8": "^8.0.0",
+    "eslint": "^8.44.0",
+    "esmock": "^2.3.1"
   },
   "dependencies": {
-    "ansi-styles": "^6.2.1",
-    "strip-ansi": "^7.0.1"
+    "is-unicode-supported": "^1.3.0",
+    "kleur": "^4.1.5",
+    "strip-ansi": "^7.1.0"
   },
   "engines": {
     "node": ">=14"

package/src/confirm-prompt.js

@@ -2,13 +2,31 @@
 import { EOL } from "node:os";
 
 // Import Third-party Dependencies
-import ansi from "ansi-styles";
+import kleur from "kleur";
 
 // Import Internal Dependencies
 import { AbstractPrompt } from "./abstract-prompt.js";
 import { SYMBOLS } from "./constants.js";
 
+// CONSTANTS
+const kToggleKeys = new Set([
+  "left",
+  "right",
+  "tab",
+  "q",
+  "a",
+  "d",
+  "h",
+  "j",
+  "k",
+  "l",
+  "space"
+]);
+
 export class ConfirmPrompt extends AbstractPrompt {
+  #boundKeyPressEvent;
+  #boundExitEvent;
+
   constructor(message, options = {}) {
     const {
       stdin = process.stdin,
@@ -17,55 +35,83 @@ export class ConfirmPrompt extends AbstractPrompt {
     } = options;
     super(message, stdin, stdout);
 
-    const Yes = `${ansi.bold.open}Yes${ansi.bold.close}`;
-    const No = `${ansi.bold.open}No${ansi.bold.close}`;
-    const tip = initial ? `${Yes}/no` : `yes/${No}`;
-
     this.initial = initial;
+    this.selectedValue = initial;
+  }
+
+  #getHint() {
+    const Yes = kleur.bold().underline().cyan("Yes");
+    const No = kleur.bold().underline().cyan("No");
+
+    return this.selectedValue ? `${Yes}/No` : `Yes/${No}`;
+  }
+
+  #render() {
+    this.write(this.#getQuestionQuery());
   }
 
   #question() {
     return new Promise((resolve) => {
       const questionQuery = this.#getQuestionQuery();
 
-      this.rl.question(questionQuery,
-        (answer) => {
-          this.history.push(questionQuery + answer);
+      this.write(questionQuery);
+
+      this.#boundKeyPressEvent = this.#onKeypress.bind(this, resolve);
+      this.stdin.on("keypress", this.#boundKeyPressEvent);
 
-          resolve(answer);
-        }
-      );
+      this.#boundExitEvent = this.#onProcessExit.bind(this);
+      process.once("exit", this.#boundExitEvent);
     });
   }
 
-  #getQuestionQuery() {
-    const query = `${ansi.bold.open}${SYMBOLS.QuestionMark} ${this.message}${ansi.bold.close}`;
+  #onKeypress(resolve, value, key) {
+    this.stdin.pause();
+    this.stdout.moveCursor(-this.#getQuestionQuery().length, 0);
+    this.stdout.clearScreenDown(() => this.stdin.resume());
+
+    if (key.name === "return") {
+      resolve(this.selectedValue);
+
+      return;
+    }
 
-    return `${query} ${ansi.grey.open}(${this.initial ? "Yes/no" : "yes/No"})${ansi.grey.close} `;
+    if (kToggleKeys.has(key.name)) {
+      this.selectedValue = !this.selectedValue;
+    }
+
+    this.#render();
   }
 
-  #onQuestionAnswer() {
-    this.clearLastLine();
-    this.write(`${this.answer ? SYMBOLS.Tick : SYMBOLS.Cross} ${this.message}${EOL}`);
+  #onProcessExit() {
+    this.stdin.off("keypress", this.#boundKeyPressEvent);
   }
 
-  #validateResult(result) {
-    if (typeof result !== "string") {
-      return false;
-    }
+  #getQuestionQuery() {
+    const query = kleur.bold(`${SYMBOLS.QuestionMark} ${this.message}`);
 
-    return ["y", "yes", "no", "n"].includes(result.toLowerCase());
+    return `${query} ${this.#getHint()}`;
+  }
+
+  #onQuestionAnswer() {
+    this.clearLastLine();
+    this.write(`${this.selectedValue ? SYMBOLS.Tick : SYMBOLS.Cross} ${kleur.bold(this.message)}${EOL}`);
   }
 
   async confirm() {
+    this.write(SYMBOLS.HideCursor);
+
     try {
-      const result = await this.#question();
-      this.answer = this.#validateResult(result) ? ["y", "yes"].includes(result.toLocaleLowerCase()) : this.initial;
+      await this.#question();
       this.#onQuestionAnswer();
 
-      return this.answer;
+      return this.selectedValue;
     }
     finally {
+      this.write(SYMBOLS.ShowCursor);
+
+      this.#onProcessExit();
+      process.off("exit", this.#boundExitEvent);
+
       this.destroy();
     }
   }

package/src/constants.js

@@ -1,17 +1,31 @@
 // Import Third-party Dependencies
-import ansi from "ansi-styles";
+import kleur from "kleur";
+import isUnicodeSupported from "is-unicode-supported";
 
-const kPointer = `${ansi.gray.open}›${ansi.gray.close}`;
+const kMainSymbols = {
+  tick: "✔",
+  cross: "✖",
+  pointer: "›",
+  previous: "⭡",
+  next: "⭣"
+};
+const kFallbackSymbols = {
+  tick: "√",
+  cross: "×",
+  pointer: ">",
+  previous: "↑",
+  next: "↓"
+};
+const kSymbols = isUnicodeSupported() ? kMainSymbols : kFallbackSymbols;
+const kPointer = kleur.gray(kSymbols.pointer);
 
 export const SYMBOLS = {
-  QuestionMark: `${ansi.blue.open}?${ansi.blue.close}`,
-  Tick: `${ansi.green.open}✔${ansi.green.close}`,
-  Cross: `${ansi.red.open}✖${ansi.red.close}`,
+  QuestionMark: kleur.blue().bold("?"),
+  Tick: kleur.green().bold(kSymbols.tick),
+  Cross: kleur.red().bold(kSymbols.cross),
   Pointer: kPointer,
-  Active: `${ansi.reset.open}${kPointer}`,
-  Inactive: `${ansi.gray.open}`,
-  Previous: "⭡",
-  Next: "⭣",
+  Previous: kSymbols.previous,
+  Next: kSymbols.next,
   ShowCursor: "\x1B[?25h",
   HideCursor: "\x1B[?25l"
 };

package/src/question-prompt.js

@@ -2,8 +2,7 @@
 import { EOL } from "node:os";
 
 // Import Third-party Dependencies
-import ansi from "ansi-styles";
-import stripAnsi from "strip-ansi";
+import kleur from "kleur";
 
 // Import Internal Dependencies
 import { AbstractPrompt } from "./abstract-prompt.js";
@@ -13,12 +12,22 @@ export class QuestionPrompt extends AbstractPrompt {
   #validators;
 
   constructor(message, options = {}) {
-    const { stdin = process.stdin, stdout = process.stdout, validators = [] } = options;
+    const {
+      stdin = process.stdin,
+      stdout = process.stdout,
+      defaultValue,
+      validators = []
+    } = options;
+
     super(message, stdin, stdout);
 
+    if (defaultValue && typeof defaultValue !== "string") {
+      throw new TypeError("defaultValue must be a string");
+    }
+
+    this.defaultValue = defaultValue;
+    this.tip = this.defaultValue ? ` (${this.defaultValue})` : "";
     this.#validators = validators;
-    this.questionPrefix = `${ansi.bold.open}${SYMBOLS.QuestionMark} `;
-    this.questionSuffix = `${ansi.bold.close} `;
     this.questionSuffixError = "";
   }
 
@@ -35,19 +44,19 @@ export class QuestionPrompt extends AbstractPrompt {
   }
 
   #getQuestionQuery() {
-    return `${this.questionPrefix}${this.message}${this.questionSuffix}${this.questionSuffixError}`;
+    return `${kleur.bold(`${SYMBOLS.QuestionMark} ${this.message}${this.tip}`)} ${this.questionSuffixError}`;
   }
 
   #setQuestionSuffixError(error) {
-    const suffix = `${ansi.red.open}[${error}]${ansi.red.close} `;
+    const suffix = kleur.red(`[${error}] `);
     this.questionSuffixError = suffix;
   }
 
   #writeAnswer() {
-    const prefix = `${ansi.bold.open}${this.answer ? SYMBOLS.Tick : SYMBOLS.Cross}`;
-    const suffix = `${ansi.yellow.close}${ansi.bold.close}${EOL}`;
+    const prefix = this.answer ? SYMBOLS.Tick : SYMBOLS.Cross;
+    const answer = kleur.yellow(this.answer ?? "");
 
-    this.write(`${prefix} ${this.message} ${SYMBOLS.Pointer} ${ansi.yellow.open}${this.answer ?? ""}${suffix}`);
+    this.write(`${prefix} ${kleur.bold(this.message)} ${SYMBOLS.Pointer} ${answer}${EOL}`);
   }
 
   #onQuestionAnswer() {
@@ -69,6 +78,10 @@ export class QuestionPrompt extends AbstractPrompt {
   async question() {
     this.answer = await this.#question();
 
+    if (this.answer === "" && this.defaultValue) {
+      this.answer = this.defaultValue;
+    }
+
     this.#onQuestionAnswer();
 
     while (this.answer?.constructor.name === "Promise") {

package/src/select-prompt.js

@@ -2,7 +2,7 @@
 import { EOL } from "node:os";
 
 // Import Third-party Dependencies
-import ansi from "ansi-styles";
+import kleur from "kleur";
 
 // Import Internal Dependencies
 import { AbstractPrompt } from "./abstract-prompt.js";
@@ -82,6 +82,7 @@ export class SelectPrompt extends AbstractPrompt {
 
     for (let choiceIndex = startIndex; choiceIndex < endIndex; choiceIndex++) {
       const choice = this.#getFormattedChoice(choiceIndex);
+      const isChoiceSelected = choiceIndex === this.activeIndex;
       const showPreviousChoicesArrow = startIndex > 0 && choiceIndex === startIndex;
       const showNextChoicesArrow = endIndex < this.choices.length && choiceIndex === endIndex - 1;
 
@@ -93,20 +94,21 @@ export class SelectPrompt extends AbstractPrompt {
         prefixArrow = SYMBOLS.Next;
       }
 
-      const prefix = `${prefixArrow}${choiceIndex === this.activeIndex ? `${SYMBOLS.Active} ` : `${SYMBOLS.Inactive}  `}`;
+      const prefix = `${prefixArrow}${isChoiceSelected ? `${SYMBOLS.Pointer} ` : "  "}`;
       const formattedLabel = choice.label.padEnd(
         this.longestChoice < 10 ? this.longestChoice : 0
       );
       const formattedDescription = choice.description ? ` - ${choice.description}` : "";
-      const str = `${prefix}${formattedLabel}${formattedDescription}${ansi.reset.open}${EOL}`;
+      const color = isChoiceSelected ? kleur.white().bold : kleur.gray;
+      const str = color(`${prefix}${formattedLabel}${formattedDescription}${EOL}`);
 
       this.write(str);
     }
   }
 
   #showAnsweredQuestion(choice) {
-    const prefix = `${ansi.bold.open}${SYMBOLS.Tick} ${this.message} ${SYMBOLS.Pointer}`;
-    const formattedChoice = `${ansi.yellow.open}${choice.label ?? choice}${ansi.reset.open}`;
+    const prefix = `${SYMBOLS.Tick} ${kleur.bold(this.message)} ${SYMBOLS.Pointer}`;
+    const formattedChoice = kleur.yellow(choice.label ?? choice);
 
     this.write(`${prefix} ${formattedChoice}${EOL}`);
   }
@@ -175,6 +177,6 @@ export class SelectPrompt extends AbstractPrompt {
   }
 
   #showQuestion() {
-    this.write(`${ansi.bold.open}${SYMBOLS.QuestionMark} ${this.message}${ansi.bold.close}${EOL}`);
+    this.write(`${SYMBOLS.QuestionMark} ${kleur.bold(this.message)}${EOL}`);
   }
 }