feat: show checkedName for selected checkbox options

.github/workflows/main.yml

@@ -124,12 +124,23 @@ jobs:
       - name: Pack the monorepo modules
         run: |
           mkdir -p /tmp/artifacts
+          yarn workspace @repo/tsconfig pack --out /tmp/artifacts/tsconfig.tgz
           yarn workspace @inquirer/core pack --out /tmp/artifacts/inquirer-core.tgz
-          yarn workspace @inquirer/prompts pack --out /tmp/artifacts/inquirer-prompts.tgz
           yarn workspace @inquirer/figures pack --out /tmp/artifacts/inquirer-figures.tgz
           yarn workspace @inquirer/type pack --out /tmp/artifacts/inquirer-type.tgz
           yarn workspace @inquirer/ansi pack --out /tmp/artifacts/inquirer-ansi.tgz
-          yarn workspace @repo/tsconfig pack --out /tmp/artifacts/tsconfig.tgz
+          yarn workspace @inquirer/external-editor pack --out /tmp/artifacts/external-editor.tgz
+          yarn workspace @inquirer/prompts pack --out /tmp/artifacts/inquirer-prompts.tgz
+          yarn workspace @inquirer/checkbox pack --out /tmp/artifacts/inquirer-checkbox.tgz
+          yarn workspace @inquirer/confirm pack --out /tmp/artifacts/inquirer-confirm.tgz
+          yarn workspace @inquirer/editor pack --out /tmp/artifacts/inquirer-editor.tgz
+          yarn workspace @inquirer/expand pack --out /tmp/artifacts/inquirer-expand.tgz
+          yarn workspace @inquirer/input pack --out /tmp/artifacts/inquirer-input.tgz
+          yarn workspace @inquirer/number pack --out /tmp/artifacts/inquirer-number.tgz
+          yarn workspace @inquirer/password pack --out /tmp/artifacts/inquirer-password.tgz
+          yarn workspace @inquirer/rawlist pack --out /tmp/artifacts/inquirer-rawlist.tgz
+          yarn workspace @inquirer/search pack --out /tmp/artifacts/inquirer-search.tgz
+          yarn workspace @inquirer/select pack --out /tmp/artifacts/inquirer-select.tgz
       - name: Extract @inquirer/demo to an isolated project & build
         run: |
           cur_dir=$(pwd)
@@ -140,10 +151,21 @@ jobs:
           yarn set version stable
           yarn add --dev @repo/tsconfig@file:/tmp/artifacts/tsconfig.tgz
           yarn set resolution @inquirer/core@npm:* file:/tmp/artifacts/inquirer-core.tgz
-          yarn set resolution @inquirer/prompts@npm:* file:/tmp/artifacts/inquirer-prompts.tgz
           yarn set resolution @inquirer/figures@npm:* file:/tmp/artifacts/inquirer-figures.tgz
           yarn set resolution @inquirer/ansi@npm:* file:/tmp/artifacts/inquirer-ansi.tgz
+          yarn set resolution @inquirer/external-editor@npm:* file:/tmp/artifacts/external-editor.tgz
           yarn set resolution @inquirer/type@npm:* file:/tmp/artifacts/inquirer-type.tgz
+          yarn set resolution @inquirer/prompts@npm:* file:/tmp/artifacts/inquirer-prompts.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/checkbox@npm:* file:/tmp/artifacts/inquirer-checkbox.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/confirm@npm:* file:/tmp/artifacts/inquirer-confirm.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/editor@npm:* file:/tmp/artifacts/inquirer-editor.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/expand@npm:* file:/tmp/artifacts/inquirer-expand.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/input@npm:* file:/tmp/artifacts/inquirer-input.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/number@npm:* file:/tmp/artifacts/inquirer-number.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/password@npm:* file:/tmp/artifacts/inquirer-password.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/rawlist@npm:* file:/tmp/artifacts/inquirer-rawlist.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/search@npm:* file:/tmp/artifacts/inquirer-search.tgz
+          yarn set resolution @inquirer/prompts/@inquirer/select@npm:* file:/tmp/artifacts/inquirer-select.tgz
           yarn install
           yarn tsc
 

packages/checkbox/README.md

@@ -104,6 +104,7 @@ The `Choice` object is typed as
 type Choice<Value> = {
   value: Value;
   name?: string;
+  checkedName?: string;
   description?: string;
   short?: string;
   checked?: boolean;
@@ -115,6 +116,7 @@ Here's each property:
 
 - `value`: The value is what will be returned by `await checkbox()`.
 - `name`: This is the string displayed in the choice list.
+- `checkedName`: Alternative `name` (or format) displayed when the choice is checked.
 - `description`: Option for a longer description string that'll appear under the list when the cursor highlight a given choice.
 - `short`: Once the prompt is done (press enter), we'll use `short` if defined to render next to the question. By default we'll use `name`.
 - `checked`: If `true`, the option will be checked by default.

packages/checkbox/checkbox.test.ts

@@ -1279,5 +1279,53 @@ describe('checkbox prompt', () => {
       events.keypress('enter');
       await expect(answer).resolves.toEqual(['three']);
     });
+
+    it('displays checkedName when option is selected', async () => {
+      const choices = [
+        { name: 'npm', value: 'npm', checkedName: 'Node Package Manager' },
+        { name: 'yarn', value: 'yarn', checkedName: 'Yet Another Resource Negotiator' },
+        new Separator(),
+        { name: 'jspm', value: 'jspm' },
+        { name: 'pnpm', value: 'pnpm', disabled: '(pnpm is not available)' },
+      ];
+
+      const { answer, events, getScreen } = await render(checkbox, {
+        message: 'Select package managers',
+        choices,
+      });
+
+      expect(getScreen()).toMatchInlineSnapshot(`
+        "? Select package managers (Press <space> to select, <a> to toggle all, <i> to
+        invert selection, and <enter> to proceed)
+        ❯◯ npm
+         ◯ yarn
+         ──────────────
+         ◯ jspm
+        - pnpm (pnpm is not available)"
+      `);
+
+      events.keypress('space');
+      expect(getScreen()).toMatchInlineSnapshot(`
+        "? Select package managers
+        ❯◉ Node Package Manager
+         ◯ yarn
+         ──────────────
+         ◯ jspm
+        - pnpm (pnpm is not available)"
+      `);
+      events.keypress('down');
+      events.keypress('space');
+      expect(getScreen()).toMatchInlineSnapshot(`
+        "? Select package managers
+         ◉ Node Package Manager
+        ❯◉ Yet Another Resource Negotiator
+         ──────────────
+         ◯ jspm
+        - pnpm (pnpm is not available)"
+      `);
+      events.keypress('enter');
+      await expect(answer).resolves.toEqual(['npm', 'yarn']);
+      expect(getScreen()).toMatchInlineSnapshot(`"✔ Select package managers npm, yarn"`);
+    });
   });
 });

packages/checkbox/src/index.ts

@@ -62,6 +62,7 @@ const checkboxTheme: CheckboxTheme = {
 type Choice<Value> = {
   value: Value;
   name?: string;
+  checkedName?: string;
   description?: string;
   short?: string;
   disabled?: boolean | string;
@@ -72,6 +73,7 @@ type Choice<Value> = {
 type NormalizedChoice<Value> = {
   value: Value;
   name: string;
+  checkedName: string;
   description?: string;
   short: string;
   disabled: boolean | string;
@@ -131,6 +133,7 @@ function normalizeChoices<Value>(
         value: choice as Value,
         name: choice,
         short: choice,
+        checkedName: choice,
         disabled: false,
         checked: false,
       };
@@ -141,6 +144,7 @@ function normalizeChoices<Value>(
       value: choice.value,
       name,
       short: choice.short ?? name,
+      checkedName: choice.checkedName ?? name,
       disabled: choice.disabled ?? false,
       checked: choice.checked ?? false,
     };
@@ -264,9 +268,10 @@ export default createPrompt(
         }
 
         const checkbox = item.checked ? theme.icon.checked : theme.icon.unchecked;
+        const name = item.checked ? item.checkedName : item.name;
         const color = isActive ? theme.style.highlight : (x: string) => x;
         const cursor = isActive ? theme.icon.cursor : ' ';
-        return color(`${cursor}${checkbox} ${item.name}`);
+        return color(`${cursor}${checkbox} ${name}`);
       },
       pageSize,
       loop,

packages/demo/src/demos/checkbox.ts

@@ -53,6 +53,22 @@ const demo = async () => {
     ],
   });
   console.log('Answer:', answer);
+
+  answer = await checkbox({
+    message: 'Select a package manager (custom checked name)',
+    choices: [
+      { name: 'npm', value: 'npm', checkedName: 'Node Package Manager' },
+      { name: 'yarn', value: 'yarn', checkedName: 'Yet Another Resource Negotiator' },
+      new Separator(),
+      { name: 'jspm', value: 'jspm' },
+      {
+        name: 'pnpm',
+        value: 'pnpm',
+        disabled: '(pnpm is not available)',
+      },
+    ],
+  });
+  console.log('Answer:', answer);
 };
 
 if (import.meta.url.startsWith('file:')) {