CLI: Replace inquirer with prompts

app/react/package.json

@@ -60,7 +60,7 @@
     "global": "^4.3.2",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
-    "react-dev-utils": "^10.0.0",
+    "react-dev-utils": "^11.0.1",
     "react-docgen-typescript-plugin": "^0.6.2",
     "react-refresh": "^0.8.3",
     "regenerator-runtime": "^0.13.7",
@@ -70,6 +70,7 @@
   "devDependencies": {
     "@storybook/client-api": "6.2.0-alpha.2",
     "@types/node": "^14.0.10",
+    "@types/prompts": "^2.0.0",
     "@types/webpack": "^4.41.24"
   },
   "peerDependencies": {

lib/cli/package.json

@@ -59,10 +59,10 @@
     "fs-extra": "^9.0.0",
     "get-port": "^5.1.1",
     "globby": "^11.0.0",
-    "inquirer": "^7.0.0",
     "jscodeshift": "^0.6.3",
     "json5": "^2.1.1",
     "leven": "^3.1.0",
+    "prompts": "^2.0.0",
     "puppeteer-core": "^2.0.0",
     "shelljs": "^0.8.4",
     "strip-json-comments": "^3.0.1",
@@ -72,6 +72,7 @@
     "@storybook/client-api": "6.2.0-alpha.2",
     "@types/cross-spawn": "^6.0.1",
     "@types/inquirer": "^6.5.0",
+    "@types/prompts": "^2.0.0",
     "@types/puppeteer-core": "^2.0.0",
     "@types/semver": "^7.2.0",
     "@types/shelljs": "^0.8.7",

lib/cli/src/initiate.ts

@@ -1,6 +1,6 @@
 import { UpdateNotifier, IPackage } from 'update-notifier';
 import chalk from 'chalk';
-import inquirer from 'inquirer';
+import prompts from 'prompts';
 import { detect, isStorybookInstalled, detectLanguage } from './detect';
 import {
   installableProjectTypes,
@@ -112,13 +112,13 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
       case ProjectType.REACT_NATIVE: {
         return (options.yes
           ? Promise.resolve({ server: true })
-          : (inquirer.prompt([
+          : (prompts([
               {
                 type: 'confirm',
                 name: 'server',
                 message:
                   'Do you want to install dependencies necessary to run Storybook server? You can manually do it later by install @storybook/react-native-server',
-                default: false,
+                initial: false,
               },
             ]) as Promise<{ server: boolean }>)
         )
@@ -244,22 +244,24 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
 const projectTypeInquirer = async (options: { yes?: boolean }) => {
   const manualAnswer = options.yes
     ? true
-    : await inquirer.prompt([
+    : await prompts([
         {
           type: 'confirm',
           name: 'manual',
           message: 'Do you want to manually choose a Storybook project type to install?',
-          default: false,
         },
       ]);
 
   if (manualAnswer !== true && manualAnswer.manual) {
-    const frameworkAnswer = await inquirer.prompt([
+    const frameworkAnswer = await prompts([
       {
         type: 'list',
         name: 'manualFramework',
         message: 'Please choose a project type from the following list:',
-        choices: installableProjectTypes.map((type) => type.toUpperCase()),
+        choices: installableProjectTypes.map((type) => ({
+          title: type,
+          value: type.toUpperCase(),
+        })),
       },
     ]);
     return installStorybook(frameworkAnswer.manualFramework, options);

lib/core/package.json

@@ -107,7 +107,6 @@
     "glob-promise": "^3.4.0",
     "global": "^4.3.2",
     "html-webpack-plugin": "^4.2.1",
-    "inquirer": "^7.0.0",
     "interpret": "^2.0.0",
     "ip": "^1.1.5",
     "json5": "^2.1.1",
@@ -119,9 +118,10 @@
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
     "pretty-hrtime": "^1.0.3",
+    "prompts": "^2.0.0",
     "qs": "^6.6.0",
     "raw-loader": "^4.0.1",
-    "react-dev-utils": "^10.0.0",
+    "react-dev-utils": "^11.0.1",
     "read-pkg-up": "^7.0.0",
     "regenerator-runtime": "^0.13.7",
     "resolve-from": "^5.0.0",

lib/core/src/server/build-dev.ts

@@ -8,7 +8,7 @@ import semver from '@storybook/semver';
 import dedent from 'ts-dedent';
 import Table from 'cli-table3';
 import prettyTime from 'pretty-hrtime';
-import inquirer from 'inquirer';
+import prompts from 'prompts';
 import detectFreePort from 'detect-port';
 
 import { Stats } from 'webpack';
@@ -255,9 +255,9 @@ export async function buildDevStandalone(
     ]);
 
     if (!options.ci && !options.smokeTest && options.port != null && port !== options.port) {
-      const { shouldChangePort } = await inquirer.prompt({
+      const { shouldChangePort } = await prompts({
         type: 'confirm',
-        default: true,
+        initial: true,
         name: 'shouldChangePort',
         message: `Port ${options.port} is not available. Would you like to run Storybook on port ${port} instead?`,
       });

package.json

@@ -127,6 +127,7 @@
     "@types/lodash": "^4.14.150",
     "@types/node": "^14.0.10",
     "@types/node-cleanup": "^2.1.1",
+    "@types/prompts": "^2.0.0",
     "@types/semver": "^7.1.0",
     "@types/serve-static": "^1.13.3",
     "@types/shelljs": "^0.8.7",
@@ -166,7 +167,6 @@
     "glob": "^7.1.3",
     "http-server": "^0.12.3",
     "husky": "^4.0.10",
-    "inquirer": "^7.0.0",
     "jest": "^26.0.0",
     "jest-emotion": "^10.0.17",
     "jest-environment-jsdom": "^26.0.0",
@@ -188,6 +188,7 @@
     "npmlog": "^4.1.2",
     "p-limit": "^2.3.0",
     "prettier": "~2.0.5",
+    "prompts": "^2.0.0",
     "raf": "^3.4.0",
     "regenerator-runtime": "^0.13.7",
     "remark": "^12.0.0",

scripts/bootstrap.js

@@ -8,7 +8,7 @@ const { maxConcurrentTasks } = require('./utils/concurrency');
 const { checkDependenciesAndRun, spawn } = require('./utils/cli-utils');
 
 function run() {
-  const inquirer = require('inquirer');
+  const prompts = require('prompts');
   const program = require('commander');
   const chalk = require('chalk');
   const log = require('npmlog');
@@ -157,60 +157,58 @@ function run() {
     tasks[key].value = program[tasks[key].option.replace('--', '')] || program.all;
   });
 
-  const createSeparator = (input) => `- ${input}${' ---------'.substr(0, 12)}`;
+  const createSeparator = (input) => ({
+    title: `- ${input}${' ---------'.substr(0, 12)}`,
+    disabled: true,
+  });
 
   const choices = Object.values(groups)
     .map((l) =>
       l.map((key) => ({
-        name: tasks[key].name,
-        checked: tasks[key].defaultValue,
+        value: tasks[key].name,
+        title: tasks[key].name,
+        selected: tasks[key].defaultValue,
       }))
     )
-    .reduce(
-      (acc, i, k) =>
-        acc.concat(new inquirer.Separator(createSeparator(Object.keys(groups)[k]))).concat(i),
-      []
-    );
+    .reduce((acc, i, k) => acc.concat(createSeparator(Object.keys(groups)[k])).concat(i), []);
 
   let selection;
   if (
     !Object.keys(tasks)
       .map((key) => tasks[key].value)
       .filter(Boolean).length
   ) {
-    selection = inquirer
-      .prompt([
-        {
-          type: 'checkbox',
-          message: 'Select the bootstrap activities',
-          name: 'todo',
-          pageSize: Object.keys(tasks).length + Object.keys(groups).length,
-          choices,
-        },
-      ])
+    selection = prompts([
+      {
+        type: 'multiselect',
+        message: 'Select the bootstrap activities',
+        name: 'todo',
+        warn: ' ',
+        pageSize: Object.keys(tasks).length + Object.keys(groups).length,
+        choices,
+      },
+    ])
       .then(({ todo }) =>
         todo.map((name) => tasks[Object.keys(tasks).find((i) => tasks[i].name === name)])
       )
       .then((list) => {
         if (list.find((i) => i === tasks.reset)) {
-          return inquirer
-            .prompt([
-              {
-                type: 'confirm',
-                message: `${chalk.red(
-                  'DESTRUCTIVE'
-                )} deletes node_modules, files not present in git ${chalk.underline(
-                  'will get trashed'
-                )}, except for .idea and .vscode, ${chalk.cyan('Continue?')}`,
-                name: 'sure',
-              },
-            ])
-            .then(({ sure }) => {
-              if (sure) {
-                return list;
-              }
-              throw new Error('problem is between keyboard and chair');
-            });
+          return prompts([
+            {
+              type: 'confirm',
+              message: `${chalk.red(
+                'DESTRUCTIVE'
+              )} deletes node_modules, files not present in git ${chalk.underline(
+                'will get trashed'
+              )}, except for .idea and .vscode, ${chalk.cyan('Continue?')}`,
+              name: 'sure',
+            },
+          ]).then(({ sure }) => {
+            if (sure) {
+              return list;
+            }
+            throw new Error('problem is between keyboard and chair');
+          });
         }
         return list;
       });

scripts/build-package.js

@@ -19,7 +19,7 @@ const getStorybookPackages = () => {
 };
 
 function run() {
-  const inquirer = require('inquirer');
+  const prompts = require('prompts');
   const program = require('commander');
   const chalk = require('chalk');
   const log = require('npmlog');
@@ -53,11 +53,6 @@ function run() {
     ...packageTasks,
   };
 
-  const groups = {
-    'mode (leave unselected if you just want to build)': ['watch'],
-    packages,
-  };
-
   const main = program.version('5.0.0').option('--all', `build everything ${chalk.gray('(all)')}`);
 
   Object.keys(tasks)
@@ -70,51 +65,39 @@ function run() {
     tasks[key].value = containsFlag || program.all;
   });
 
-  const createSeparator = (input) => `- ${input}${' ---------'.substr(0, 12)}`;
-
-  const choices = Object.values(groups)
-    .map((l) =>
-      l.map((key) => ({
-        name: (tasks[key] && tasks[key].name) || key,
-        checked: (tasks[key] && tasks[key].defaultValue) || false,
-      }))
-    )
-    .reduce(
-      (acc, i, k) =>
-        acc.concat(new inquirer.Separator(createSeparator(Object.keys(groups)[k]))).concat(i),
-      []
-    );
-
   let selection;
   let watchMode = false;
   if (
     !Object.keys(tasks)
       .map((key) => tasks[key].value)
       .filter(Boolean).length
   ) {
-    const ui = new inquirer.ui.BottomBar();
-    ui.log.write(
-      chalk.yellow(
-        'You can also run directly with package name like `yarn build core`, or `yarn build --all` for all packages!'
-      )
-    );
-
-    selection = inquirer
-      .prompt([
-        {
-          type: 'checkbox',
-          message: 'Select the packages to build',
-          name: 'todo',
-          pageSize: terminalSize.height - 3, // 3 lines for extra info
-          choices,
-        },
-      ])
-      .then(({ todo }) => {
-        watchMode = todo.includes('watch');
-        return todo
-          .filter((name) => name !== 'watch') // remove watch option as it served its purpose
-          .map((name) => tasks[Object.keys(tasks).find((i) => tasks[i].name === name)]);
-      });
+    selection = prompts([
+      {
+        type: 'toggle',
+        name: 'mode',
+        message: 'Start in watch mode',
+        initial: false,
+        active: 'yes',
+        inactive: 'no',
+      },
+      {
+        type: 'autocompleteMultiselect',
+        message: 'Select the packages to build',
+        name: 'todo',
+        hint:
+          'You can also run directly with package name like `yarn build core`, or `yarn build --all` for all packages!',
+        optionsPerPage: terminalSize.height - 3, // 3 lines for extra info
+        choices: packages.map((key) => ({
+          value: key,
+          title: tasks[key].name || key,
+          selected: (tasks[key] && tasks[key].defaultValue) || false,
+        })),
+      },
+    ]).then(({ mode, todo }) => {
+      watchMode = mode;
+      return todo.map((key) => tasks[key]);
+    });
   } else {
     // hits here when running yarn build --packagename
     watchMode = process.argv.includes('--watch');
@@ -132,7 +115,6 @@ function run() {
       } else {
         const packageNames = list
           // filters out watch command if --watch is used
-          .filter((key) => key.name !== 'watch')
           .map((key) => key.suffix)
           .filter(Boolean);