@topcli/prompts 1.1.0 → 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
@@ -141,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,10 @@
-export interface PromptOptions {
+export interface QuestionOptions {
+  stdin?: NodeJS.ReadStream & {
+    fd: 0;
+  };
+  stdout?: NodeJS.WriteStream & {
+    fd: 1;
+  };
   defaultValue?: string;
   validators?: Validator[];
 }
@@ -24,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.1.0",
+  "version": "1.2.0",
   "description": "Node.js user input library for command-line interfaces.",
   "scripts": {
-    "test": "node --loader=esmock --test test/",
+    "test": "node --no-warnings=ExperimentalWarning --loader=esmock --test test/",
     "coverage": "c8 -r html npm run test",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
@@ -24,14 +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": {
     "is-unicode-supported": "^1.3.0",
     "kleur": "^4.1.5",
-    "strip-ansi": "^7.0.1"
+    "strip-ansi": "^7.1.0"
   },
   "engines": {
     "node": ">=14"

package/src/confirm-prompt.js

@@ -8,7 +8,25 @@ import kleur from "kleur";
 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 = kleur.bold("Yes");
-    const No = kleur.bold("No");
-    this.tip = kleur.gray(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);
     });
   }
 
+  #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;
+    }
+
+    if (kToggleKeys.has(key.name)) {
+      this.selectedValue = !this.selectedValue;
+    }
+
+    this.#render();
+  }
+
+  #onProcessExit() {
+    this.stdin.off("keypress", this.#boundKeyPressEvent);
+  }
+
   #getQuestionQuery() {
     const query = kleur.bold(`${SYMBOLS.QuestionMark} ${this.message}`);
 
-    return `${query} ${this.tip} `;
+    return `${query} ${this.#getHint()}`;
   }
 
   #onQuestionAnswer() {
     this.clearLastLine();
-    this.write(`${this.answer ? SYMBOLS.Tick : SYMBOLS.Cross} ${kleur.bold(this.message)}${EOL}`);
-  }
-
-  #validateResult(result) {
-    if (typeof result !== "string") {
-      return false;
-    }
-
-    return ["y", "yes", "no", "n"].includes(result.toLowerCase());
+    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();
     }
   }