@topcli/prompts 0.1.0 → 0.1.1

package/README.md

@@ -43,10 +43,24 @@ console.log(name, runner, isCLI)
 ### `prompt()`
 
 ```ts
-prompt(message: string): Promise<string>
+prompt(message: string, options?: PromptOptions): Promise<string>
 ```
 
 Simple prompt, similar to `rl.question()` with an improved UI.
+Use `options.validators` to handle user input.
+
+**Example**
+
+```js
+const packageName = await prompt('Package name', {
+  validators: [
+    {
+      validate: (value) => !existsSync(join(process.cwd(), value)),
+      error: (value) => `Folder ${value} already exists`
+    }
+  ]
+})
+```
 
 ### `select()`
 
@@ -67,6 +81,14 @@ Boolean prompt, return `options.initial` if user input is different from "y"/"ye
 
 ## Interfaces
 
+```ts
+export interface PromptOptions {
+  validators?: {
+    validate: (input: string) => boolean;
+    error: (input: string) => string;
+  }[];
+}
+```
 ```ts
 export interface Choice {
   value: any;

package/index.d.ts

@@ -1,3 +1,10 @@
+export interface PromptOptions {
+  validators?: {
+    validate: (input: string) => boolean;
+    error: (input: string) => string;
+  }[];
+}
+
 export interface Choice {
   value: any;
   label: string;
@@ -14,6 +21,6 @@ export interface ConfirmOptions {
   initial?: boolean;
 }
 
-export function prompt(message: string): Promise<string>;
+export function prompt(message: string, options?: PromptOptions): Promise<string>;
 export function select(message: string, options: SelectOptions): Promise<string>;
 export function confirm(message: string, options?: ConfirmOptions): Promise<string>;

package/index.js

@@ -3,8 +3,8 @@ import { ConfirmPrompt } from "./src/confirm-prompt.js";
 import { SelectPrompt } from "./src/select-prompt.js";
 import { TextPrompt } from "./src/text-prompt.js";
 
-export async function prompt(message) {
-  const textPrompt = new TextPrompt(message);
+export async function prompt(message, options = {}) {
+  const textPrompt = new TextPrompt(message, options);
 
   return textPrompt.question();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topcli/prompts",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Node.js user input library for command-line interfaces.",
   "scripts": {
     "test": "node --loader=esmock --test ./test/**.test.js",
@@ -26,12 +26,11 @@
     "@nodesecure/eslint-config": "^1.7.0",
     "c8": "^7.13.0",
     "eslint": "^8.38.0",
-    "esmock": "^2.1.0",
-    "snazzy": "^9.0.0",
-    "strip-ansi": "^7.0.1"
+    "esmock": "^2.1.0"
   },
   "dependencies": {
-    "ansi-styles": "^6.2.1"
+    "ansi-styles": "^6.2.1",
+    "strip-ansi": "^7.0.1"
   },
   "engines": {
     "node": ">=14"

package/src/abstract-prompt.js

@@ -1,6 +1,10 @@
 // Import Node.js Dependencies
+import { EOL } from "node:os";
 import { createInterface } from "node:readline";
 
+// Import Third-party Dependencies
+import stripAnsi from "strip-ansi";
+
 export class AbstractPrompt {
   constructor(message, input = process.stdin, output = process.stdout) {
     if (this.constructor === AbstractPrompt) {
@@ -14,6 +18,7 @@ export class AbstractPrompt {
     this.stdin = input;
     this.stdout = output;
     this.message = message;
+    this.history = [];
 
     if (this.stdout.isTTY) {
       this.stdin.setRawMode(true);
@@ -21,9 +26,25 @@ export class AbstractPrompt {
     this.rl = createInterface({ input, output });
   }
 
+  write(data) {
+    const formattedData = stripAnsi(data).replace(EOL, "");
+    if (formattedData) {
+      this.history.push(formattedData);
+    }
+
+    return this.stdout.write(data);
+  }
+
   clearLastLine() {
-    this.stdout.moveCursor(0, -1);
-    this.stdout.clearLine();
+    const lastLine = this.history.pop();
+    if (!lastLine) {
+      return;
+    }
+
+    const lastLineRows = Math.ceil(stripAnsi(lastLine).length / this.stdout.columns);
+
+    this.stdout.moveCursor(0, -lastLineRows);
+    this.stdout.clearScreenDown();
   }
 
   destroy() {

package/src/confirm-prompt.js

@@ -8,35 +8,45 @@ import ansi from "ansi-styles";
 import { AbstractPrompt } from "./abstract-prompt.js";
 import { SYMBOLS } from "./constants.js";
 
-const kDefaultConfirmOptions = { initial: false };
-
 export class ConfirmPrompt extends AbstractPrompt {
-  #question;
-
-  // eslint-disable-next-line max-params
-  constructor(message, options = {}, stdin = process.stdin, stdout = process.stdout) {
+  constructor(message, options = {}) {
+    const {
+      stdin = process.stdin,
+      stdout = process.stdout,
+      initial = false
+    } = options;
     super(message, stdin, stdout);
 
-    const { initial } = { ...kDefaultConfirmOptions, ...options };
     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.#question = new Promise((resolve) => {
-      const question = `\
-      ${ansi.bold.open}${SYMBOLS.QuestionMark} ${message}${ansi.bold.close}  ${ansi.grey.open}(${tip})${ansi.grey.close} `;
-      this.rl.question.bind(this.rl)(question,
+  }
+
+  #question() {
+    return new Promise((resolve) => {
+      const questionQuery = this.#getQuestionQuery();
+
+      this.rl.question(questionQuery,
         (answer) => {
+          this.history.push(questionQuery + answer);
+
           resolve(answer);
         }
       );
     });
   }
 
+  #getQuestionQuery() {
+    const query = `${ansi.bold.open}${SYMBOLS.QuestionMark} ${this.message}${ansi.bold.close}`;
+
+    return `${query} ${ansi.grey.open}(${this.initial ? "Yes/no" : "yes/No"})${ansi.grey.close} `;
+  }
+
   #onQuestionAnswer() {
     this.clearLastLine();
-    this.stdout.write(`${this.answer ? SYMBOLS.Tick : SYMBOLS.Cross} ${this.message}${EOL}`);
+    this.write(`${this.answer ? SYMBOLS.Tick : SYMBOLS.Cross} ${this.message}${EOL}`);
   }
 
   #validateResult(result) {
@@ -49,7 +59,7 @@ export class ConfirmPrompt extends AbstractPrompt {
 
   async confirm() {
     try {
-      const result = await this.#question;
+      const result = await this.#question();
       this.answer = this.#validateResult(result) ? ["y", "yes"].includes(result.toLocaleLowerCase()) : this.initial;
       this.#onQuestionAnswer();
 

package/src/select-prompt.js

@@ -11,8 +11,17 @@ import { SYMBOLS } from "./constants.js";
 export class SelectPrompt extends AbstractPrompt {
   activeIndex = 0;
 
-  // eslint-disable-next-line max-params
-  constructor(message, options, stdin = process.stdin, stdout = process.stdout) {
+  get choices() {
+    return this.options.choices;
+  }
+
+  constructor(message, options) {
+    const {
+      stdin = process.stdin,
+      stdout = process.stdout,
+      choices
+    } = options ?? {};
+
     super(message, stdin, stdout);
 
     if (!options) {
@@ -21,14 +30,12 @@ export class SelectPrompt extends AbstractPrompt {
     }
 
     this.options = options;
-    const { choices } = options;
 
     if (!choices?.length) {
       this.destroy();
       throw new TypeError("Missing required param: choices");
     }
 
-    this.choices = choices;
     this.longestChoice = Math.max(...choices.map((choice) => {
       if (typeof choice === "string") {
         return choice.length;
@@ -47,60 +54,92 @@ export class SelectPrompt extends AbstractPrompt {
     }));
   }
 
-  async select() {
-    this.stdout.write(SYMBOLS.HideCursor);
-    this.stdout.write(`${ansi.bold.open}${SYMBOLS.QuestionMark} ${this.message}${ansi.bold.close}${EOL}`);
-
-    let lastRender = null;
-    const render = (initialRender = false, { reset } = {}) => {
-      function getVisibleChoices(currentIndex, total, maxVisible) {
-        let startIndex = Math.min(total - maxVisible, currentIndex - Math.floor(maxVisible / 2));
-        if (startIndex < 0) {
-          startIndex = 0;
-        }
+  #getFormattedChoice(choiceIndex) {
+    const choice = this.choices[choiceIndex];
 
-        const endIndex = Math.min(startIndex + maxVisible, total);
+    if (typeof choice === "string") {
+      return { value: choice, label: choice };
+    }
+
+    return choice;
+  }
+
+  #getVisibleChoices() {
+    const maxVisible = this.options.maxVisible || 8;
+    let startIndex = Math.min(this.choices.length - maxVisible, this.activeIndex - Math.floor(maxVisible / 2));
+    if (startIndex < 0) {
+      startIndex = 0;
+    }
 
-        return { startIndex, endIndex };
+    const endIndex = Math.min(startIndex + maxVisible, this.choices.length);
+
+    return { startIndex, endIndex };
+  }
+
+  #showChoices() {
+    const { startIndex, endIndex } = this.#getVisibleChoices();
+    this.lastRender = { startIndex, endIndex };
+
+    for (let choiceIndex = startIndex; choiceIndex < endIndex; choiceIndex++) {
+      const choice = this.#getFormattedChoice(choiceIndex);
+      const showPreviousChoicesArrow = startIndex > 0 && choiceIndex === startIndex;
+      const showNextChoicesArrow = endIndex < this.choices.length && choiceIndex === endIndex - 1;
+
+      let prefixArrow = " ";
+      if (showPreviousChoicesArrow) {
+        prefixArrow = SYMBOLS.Previous;
       }
+      else if (showNextChoicesArrow) {
+        prefixArrow = SYMBOLS.Next;
+      }
+
+      const prefix = `${prefixArrow}${choiceIndex === this.activeIndex ? `${SYMBOLS.Active} ` : `${SYMBOLS.Inactive}  `}`;
+      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 { startIndex, endIndex } = getVisibleChoices(this.activeIndex, this.choices.length, this.options.maxVisible || 8);
+      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}`;
+
+    this.write(`${prefix} ${formattedChoice}${EOL}`);
+  }
+
+  async select() {
+    this.write(SYMBOLS.HideCursor);
+    this.#showQuestion();
+
+    const render = (options = {}) => {
+      const {
+        initialRender = false,
+        clearRender = false
+      } = options;
 
       if (!initialRender) {
-        const linesToClear = lastRender.endIndex - lastRender.startIndex;
-        this.stdout.moveCursor(0, -linesToClear);
-        this.stdout.clearScreenDown();
+        let linesToClear = this.lastRender.endIndex - this.lastRender.startIndex;
+        while (linesToClear > 0) {
+          this.clearLastLine();
+          linesToClear--;
+        }
       }
 
-      if (reset) {
-        this.clearLastLine(this.stdout);
-        this.clearLastLine(this.stdout);
+      if (clearRender) {
+        this.stdout.moveCursor(0, -2);
+        this.stdout.clearScreenDown();
 
         return;
       }
 
-      lastRender = { startIndex, endIndex };
-
-      for (let i = startIndex; i < endIndex; i++) {
-        const choice = typeof this.choices[i] === "string" ? { value: this.choices[i], label: this.choices[i] } : this.choices[i];
-        const showPreviousChoicesArrow = startIndex > 0 && i === startIndex;
-        const showNextChoicesArrow = endIndex < this.choices.length && i === endIndex - 1;
-        let prefixArrow = " ";
-        if (showPreviousChoicesArrow) {
-          prefixArrow = SYMBOLS.Previous;
-        }
-        else if (showNextChoicesArrow) {
-          prefixArrow = SYMBOLS.Next;
-        }
-        const prefix = `${prefixArrow}${i === this.activeIndex ? `${SYMBOLS.Active} ` : `${SYMBOLS.Inactive}  `}`;
-        const str = `${prefix}${choice.label.padEnd(
-          this.longestChoice < 10 ? this.longestChoice : 0
-        )}${choice.description ? ` - ${choice.description}` : ""}${ansi.reset.open}${EOL}`;
-        this.stdout.write(str);
-      }
+      this.#showChoices();
     };
 
-    render(true);
+    render({ initialRender: true });
 
     return new Promise((resolve) => {
       const onKeypress = (value, key) => {
@@ -115,17 +154,18 @@ export class SelectPrompt extends AbstractPrompt {
         else if (key.name === "return") {
           this.stdin.off("keypress", onKeypress);
 
-          render(false, { reset: true });
+          render({ clearRender: true });
+
           const currentChoice = this.choices[this.activeIndex];
           const value = currentChoice.value ?? currentChoice;
+
           if (!this.options.ignoreValues?.includes(value)) {
-            const prefix = `${ansi.bold.open}${SYMBOLS.Tick} ${this.message} ${SYMBOLS.Pointer}`;
-            const choice = `${ansi.yellow.open}${currentChoice.label ?? currentChoice}${ansi.reset.open}`;
-            this.stdout.write(`${prefix} ${choice}${EOL}`);
+            this.#showAnsweredQuestion(currentChoice);
           }
 
-          this.stdout.write(SYMBOLS.ShowCursor);
+          this.write(SYMBOLS.ShowCursor);
           this.destroy();
+
           resolve(value);
         }
       };
@@ -133,4 +173,8 @@ export class SelectPrompt extends AbstractPrompt {
       this.stdin.on("keypress", onKeypress);
     });
   }
+
+  #showQuestion() {
+    this.write(`${ansi.bold.open}${SYMBOLS.QuestionMark} ${this.message}${ansi.bold.close}${EOL}`);
+  }
 }

package/src/text-prompt.js

@@ -3,41 +3,81 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import ansi from "ansi-styles";
+import stripAnsi from "strip-ansi";
 
 // Import Internal Dependencies
 import { AbstractPrompt } from "./abstract-prompt.js";
 import { SYMBOLS } from "./constants.js";
 
 export class TextPrompt extends AbstractPrompt {
-  #question;
+  #validators;
 
-  constructor(message, stdin = process.stdin, stdout = process.stdout) {
+  constructor(message, options = {}) {
+    const { stdin = process.stdin, stdout = process.stdout, validators = [] } = options;
     super(message, stdin, stdout);
 
-    this.#question = new Promise((resolve) => {
-      this.rl.question(`${ansi.bold.open}${SYMBOLS.QuestionMark} ${message}${ansi.bold.close} `, (answer) => {
+    this.#validators = validators;
+    this.questionPrefix = `${ansi.bold.open}${SYMBOLS.QuestionMark} `;
+    this.questionSuffix = `${ansi.bold.close} `;
+    this.questionSuffixError = "";
+  }
+
+  #question() {
+    return new Promise((resolve) => {
+      const questionQuery = this.#getQuestionQuery();
+
+      this.rl.question(questionQuery, (answer) => {
+        this.history.push(questionQuery + answer);
+
         resolve(answer);
       });
     });
   }
 
-  #onQuestionAnswer() {
-    this.clearLastLine();
+  #getQuestionQuery() {
+    return `${this.questionPrefix}${this.message}${this.questionSuffix}${this.questionSuffixError}`;
+  }
+
+  #setQuestionSuffixError(error) {
+    const suffix = `${ansi.red.open}[${error}]${ansi.red.close} `;
+    this.questionSuffixError = suffix;
+  }
+
+  #writeAnswer() {
     const prefix = `${ansi.bold.open}${this.answer ? SYMBOLS.Tick : SYMBOLS.Cross}`;
     const suffix = `${ansi.yellow.close}${ansi.bold.close}${EOL}`;
-    this.stdout.write(`${prefix} ${this.message} ${SYMBOLS.Pointer} ${ansi.yellow.open}${this.answer ?? ""}${suffix}`);
+
+    this.write(`${prefix} ${this.message} ${SYMBOLS.Pointer} ${ansi.yellow.open}${this.answer ?? ""}${suffix}`);
   }
 
-  async question() {
-    try {
-      this.answer = await this.#question;
+  #onQuestionAnswer() {
+    this.clearLastLine();
 
-      this.#onQuestionAnswer();
+    for (const validator of this.#validators) {
+      if (!validator.validate(this.answer)) {
+        const error = validator.error(this.answer);
+        this.#setQuestionSuffixError(error);
+        this.answer = this.#question();
 
-      return this.answer;
+        return;
+      }
     }
-    finally {
-      this.destroy();
+
+    this.#writeAnswer();
+  }
+
+  async question() {
+    this.answer = await this.#question();
+
+    this.#onQuestionAnswer();
+
+    while (this.answer?.constructor.name === "Promise") {
+      this.answer = await this.answer;
+      this.#onQuestionAnswer();
     }
+
+    this.destroy();
+
+    return this.answer;
   }
 }