Feat(@inquirer/prompts): Add number prompt package. fix #1383 (#1448)

Co-authored-by: Simon Boudrias <admin@simonboudrias.com>
SBoudrias · Jun 30, 2024 · 0b77c77 · 0b77c77
1 parent 90024ec
commit 0b77c77
Show file tree

Hide file tree

Showing 11 changed files with 716 additions and 5 deletions.
diff --git a/packages/demo/demos/number.mjs b/packages/demo/demos/number.mjs
@@ -0,0 +1,37 @@
+import * as url from 'node:url';
+import { number } from '@inquirer/prompts';
+
+const demo = async () => {
+  console.log(
+    'Answer:',
+    await number({
+      message: 'Enter your age?',
+    }),
+  );
+
+  console.log(
+    'Answer:',
+    await number({
+      message: 'Enter an integer or a decimal number?',
+      step: 'any',
+    }),
+  );
+
+  console.log(
+    'Answer:',
+    await number({
+      message: 'Enter a number between 5 and 8?',
+      min: 5,
+      max: 8,
+    }),
+  );
+};
+
+if (import.meta.url.startsWith('file:')) {
+  const modulePath = url.fileURLToPath(import.meta.url);
+  if (process.argv[1] === modulePath) {
+    demo();
+  }
+}
+
+export default demo;
diff --git a/packages/demo/index.mjs b/packages/demo/index.mjs
@@ -6,23 +6,25 @@ import confirmDemo from './demos/confirm.mjs';
 import editorDemo from './demos/editor.mjs';
 import expandDemo from './demos/expand.mjs';
 import inputDemo from './demos/input.mjs';
+import loaderDemo from './demos/loader.mjs';
+import numberDemo from './demos/number.mjs';
 import passwordDemo from './demos/password.mjs';
 import rawlistDemo from './demos/rawlist.mjs';
 import selectDemo from './demos/select.mjs';
 import timeoutDemo from './demos/timeout.mjs';
-import loaderDemo from './demos/loader.mjs';
 
 const demos = {
   checkbox: checkboxDemo,
   confirm: confirmDemo,
   editor: editorDemo,
   expand: expandDemo,
   input: inputDemo,
+  loader: loaderDemo,
+  number: numberDemo,
   password: passwordDemo,
   rawlist: rawlistDemo,
   select: selectDemo,
   timeout: timeoutDemo,
-  loader: loaderDemo,
 };
 
 async function askNextDemo() {
@@ -37,6 +39,7 @@ async function askNextDemo() {
       { name: 'Expand', value: 'expand' },
       { name: 'Rawlist', value: 'rawlist' },
       { name: 'Editor', value: 'editor' },
+      { name: 'Number', value: 'number' },
       { name: 'Advanced demos', value: 'advanced' },
       { name: "Exit (I'm done)", value: 'exit' },
     ],

diff --git a/packages/number/README.md b/packages/number/README.md
@@ -0,0 +1,57 @@
+# `@inquirer/number`
+
+Interactive free number input component for command line interfaces. Supports validation, filtering, transformation, etc.
+
+# Installation
+
+```sh
+npm install @inquirer/number
+
+yarn add @inquirer/number
+```
+
+# Usage
+
+```js
+import number from '@inquirer/number';
+
+const answer = await number({ message: 'Enter your age' });
+```
+
+## Options
+
+| Property | Type                                                                       | Required | Description                                                                                                                                                                                                                                                     |
+| -------- | -------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| message  | `string`                                                                   | yes      | The question to ask                                                                                                                                                                                                                                             |
+| default  | `number`                                                                   | no       | Default value if no answer is provided (clear it by pressing backspace)                                                                                                                                                                                         |
+| min      | `number`                                                                   | no       | The minimum value to accept for this input.                                                                                                                                                                                                                     |
+| max      | `number`                                                                   | no       | The maximum value to accept for this input.                                                                                                                                                                                                                     |
+| step     | `number \| 'any'`                                                          | no       | The step option is a number that specifies the granularity that the value must adhere to. Only values which are equal to the basis for stepping (min if specified) are valid. This value defaults to 1, meaning by default the prompt will only allow integers. |
+| required | `boolean`                                                                  | no       | Defaults to `false`. If set to true, `undefined` (empty) will not be accepted for this.                                                                                                                                                                         |
+| validate | `(number \| undefined) => boolean \| string \| Promise<boolean \| string>` | no       | On submit, validate the filtered answered content. When returning a string, it'll be used as the error message displayed to the user. Note: returning a rejected promise, we'll assume a code error happened and crash.                                         |
+| theme    | [See Theming](#Theming)                                                    | no       | Customize look of the prompt.                                                                                                                                                                                                                                   |
+
+## Theming
+
+You can theme a prompt by passing a `theme` object option. The theme object only need to includes the keys you wish to modify, we'll fallback on the defaults for the rest.
+
+```ts
+type Theme = {
+  prefix: string;
+  spinner: {
+    interval: number;
+    frames: string[];
+  };
+  style: {
+    answer: (text: string) => string;
+    message: (text: string) => string;
+    error: (text: string) => string;
+    defaultAnswer: (text: string) => string;
+  };
+};
+```
+
+# License
+
+Copyright (c) 2023 Simon Boudrias (twitter: [@vaxilart](https://twitter.com/Vaxilart))<br/>
+Licensed under the MIT license.