Cli framework choice

lib/cli/bin/generate.js

@@ -23,7 +23,7 @@ program
   .option('-s --skip-install', 'Skip installing deps')
   .option('-N --use-npm', 'Use npm to install deps')
   .option('-p --parser <babel | babylon | flow>', 'jscodeshift parser')
-  .option('-h --html', 'Add storybook for HTML')
+  .option('-t --type <type>', 'Add Storybook for a specific project type')
   .action(options => initiate(options, pkg));
 
 program

lib/cli/lib/detect.js

@@ -101,7 +101,7 @@ function detectFramework(dependencies) {
   return false;
 }
 
-function isStorybookInstalled(dependencies, force) {
+export function isStorybookInstalled(dependencies, force) {
   if (!dependencies) {
     return false;
   }

lib/cli/lib/initiate.js

@@ -1,9 +1,10 @@
 import updateNotifier from 'update-notifier';
 import chalk from 'chalk';
-import detect from './detect';
+import inquirer from 'inquirer';
+import detect, { isStorybookInstalled } from './detect';
 import hasYarn from './has_yarn';
-import types from './project_types';
-import { commandLog, codeLog, paddedLog, installDeps } from './helpers';
+import types, { installableProjectTypes } from './project_types';
+import { commandLog, codeLog, paddedLog, installDeps, getPackageJson } from './helpers';
 import angularGenerator from '../generators/ANGULAR';
 import meteorGenerator from '../generators/METEOR';
 import reactGenerator from '../generators/REACT';
@@ -22,10 +23,7 @@ import riotGenerator from '../generators/RIOT';
 
 const logger = console;
 
-export default function(options, pkg) {
-  const welcomeMessage = 'storybook init - the simplest way to add a storybook to your project.';
-  logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
-
+const installStorybook = (projectType, options) => {
   const useYarn = Boolean(options.useNpm !== true) && hasYarn();
 
   const npmOptions = {
@@ -34,23 +32,6 @@ export default function(options, pkg) {
 
   const runStorybookCommand = 'storybook start';
 
-  // Update notify code.
-  updateNotifier({
-    pkg,
-    updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
-  }).notify();
-
-  let projectType;
-
-  const done = commandLog('Detecting project type');
-  try {
-    projectType = detect(options);
-  } catch (ex) {
-    done(ex.message);
-    process.exit(1);
-  }
-  done();
-
   const end = () => {
     if (!options.skipInstall) {
       installDeps(npmOptions);
@@ -73,7 +54,7 @@ export default function(options, pkg) {
         logger.log();
         paddedLog('There seems to be a storybook already available in this project.');
         paddedLog('Apply following command to force:\n');
-        codeLog(['storybook init -f']);
+        codeLog(['storybook init [options] -f']);
 
         // Add a new line for the clear visibility.
         logger.log();
@@ -176,17 +157,83 @@ export default function(options, pkg) {
           "Please make sure you are running the `storybook init` command in your project's root directory."
         );
         paddedLog(
-          'You can also install storybook for plain HTML snippets with `storybook init --html` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
+          'You can also install storybook for plain HTML snippets with `storybook init --type html` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
         );
 
         // Add a new line for the clear visibility.
         logger.log();
-        return Promise.resolve();
+        // eslint-disable-next-line no-use-before-define
+        return projectTypeInquirer(options);
     }
   };
 
   runGenerator().catch(ex => {
     logger.error(`\n     ${chalk.red(ex.stack)}`);
     process.exit(1);
   });
+};
+
+const projectTypeInquirer = async options => {
+  const manualAnswer = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'manual',
+      message: 'Do you want to manually choose a Storybook project type to install?',
+      default: false,
+    },
+  ]);
+
+  if (manualAnswer.manual) {
+    const frameworkAnswer = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'manualFramework',
+        message: 'Please choose a project type from the following list:',
+        choices: installableProjectTypes.map(type => type.toUpperCase()),
+      },
+    ]);
+    return installStorybook(frameworkAnswer.manualFramework, options);
+  }
+  return Promise.resolve();
+};
+
+export default function(options, pkg) {
+  const welcomeMessage = 'storybook init - the simplest way to add a storybook to your project.';
+  logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
+
+  // Update notify code.
+  updateNotifier({
+    pkg,
+    updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
+  }).notify();
+
+  let projectType;
+  const projectTypeProvided = options.type;
+  const infoText = projectTypeProvided
+    ? 'Installing Storybook for user specified project type'
+    : 'Detecting project type';
+  const done = commandLog(infoText);
+
+  try {
+    if (projectTypeProvided) {
+      if (installableProjectTypes.includes(options.type)) {
+        const storybookInstalled = isStorybookInstalled(getPackageJson(), options.force);
+        projectType = storybookInstalled ? types.ALREADY_HAS_STORYBOOK : options.type.toUpperCase();
+      } else {
+        done(`The provided project type was not recognized by Storybook.`);
+        logger.log(`\nThe project types currently supported by Storybook are:\n`);
+        installableProjectTypes.sort().forEach(framework => paddedLog(`- ${framework}`));
+        logger.log();
+        process.exit(1);
+      }
+    } else {
+      projectType = detect(options);
+    }
+  } catch (ex) {
+    done(ex.message);
+    process.exit(1);
+  }
+  done();
+
+  return installStorybook(projectType, options);
 }

lib/cli/lib/project_types.js

@@ -1,4 +1,4 @@
-export default {
+const projectTypes = {
   UNDETECTED: 'UNDETECTED',
   REACT_SCRIPTS: 'REACT_SCRIPTS',
   METEOR: 'METEOR',
@@ -18,3 +18,15 @@ export default {
   HTML: 'HTML',
   RIOT: 'RIOT',
 };
+
+export default projectTypes;
+
+const notInstallableProjectTypes = [
+  projectTypes.UNDETECTED,
+  projectTypes.ALREADY_HAS_STORYBOOK,
+  projectTypes.UPDATE_PACKAGE_ORGANIZATIONS,
+];
+
+export const installableProjectTypes = Object.values(projectTypes)
+  .filter(type => !notInstallableProjectTypes.includes(type))
+  .map(type => type.toLowerCase());

lib/cli/package.json

@@ -36,6 +36,7 @@
     "child-process-promise": "^2.2.1",
     "commander": "^2.17.0",
     "cross-spawn": "^6.0.5",
+    "inquirer": "^6.2.0",
     "jscodeshift": "^0.5.1",
     "json5": "^2.0.1",
     "merge-dirs": "^0.2.1",