From 82c49d65cbecd4561ea2279a7447f3f67d5c4fcf Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Wed, 12 Feb 2020 11:26:43 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20--site=20flat=20to?=
 =?UTF-8?q?=20Sotrybook=20CLI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/kbn-storybook/index.js               | 46 +++++++++++++++----
 .../kbn-storybook/lib/webpack.dll.config.js   |  2 +-
 src/dev/storybook/run_storybook_cli.ts        |  3 +-
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/packages/kbn-storybook/index.js b/packages/kbn-storybook/index.js
index 78e2cf7f5073b..ecd8ab0588f71 100644
--- a/packages/kbn-storybook/index.js
+++ b/packages/kbn-storybook/index.js
@@ -24,13 +24,14 @@ const { first } = require('rxjs/operators');
 const storybook = require('@storybook/react/standalone');
 const { run } = require('@kbn/dev-utils');
 const { generateStorybookEntry } = require('./lib/storybook_entry');
-const { REPO_ROOT, CURRENT_CONFIG } = require('./lib/constants');
+const { REPO_ROOT, CURRENT_CONFIG, ASSET_DIR } = require('./lib/constants');
 const { buildDll } = require('./lib/dll');
 
 exports.runStorybookCli = config => {
   const { name, storyGlobs } = config;
   run(
     async ({ flags, log, procRunner }) => {
+      const { site } = flags;
       log.debug('Global config:\n', require('./lib/constants'));
 
       const currentConfig = JSON.stringify(config, null, 2);
@@ -45,6 +46,35 @@ exports.runStorybookCli = config => {
         procRunner,
       });
 
+      // Generate Storybook entry file for Webpack.
+      const subj = new Rx.ReplaySubject(1);
+      generateStorybookEntry({ log, storyGlobs }).subscribe(subj);
+      await subj.pipe(first()).toPromise();
+
+      const configDir = join(__dirname, 'storybook_config');
+      const storybookOptions = {
+        mode: 'dev',
+        configDir,
+      };
+
+      if (site) {
+        log.success(`Generating "${name}" Storybook static build`);
+        /*
+        await procRunner.run('build sass', {
+          cmd: process.execPath,
+          args: ['scripts/build_sass'],
+          cwd: REPO_ROOT,
+          wait: /scss bundles created/,
+        });
+        */
+        storybook({
+          ...storybookOptions,
+          mode: 'static',
+          outputDir: join(ASSET_DIR, name),
+        });
+        return;
+      }
+
       // Build sass and continue when initial build complete
       await procRunner.run('watch sass', {
         cmd: process.execPath,
@@ -53,10 +83,7 @@ exports.runStorybookCli = config => {
         wait: /scss bundles created/,
       });
 
-      const subj = new Rx.ReplaySubject(1);
-      generateStorybookEntry({ log, storyGlobs }).subscribe(subj);
-
-      await subj.pipe(first()).toPromise();
+      log.info('Starting Storybook');
 
       await Promise.all([
         // route errors
@@ -64,23 +91,24 @@ exports.runStorybookCli = config => {
 
         new Promise(() => {
           // storybook never completes, so neither will this promise
-          const configDir = join(__dirname, 'storybook_config');
           log.debug('Config dir:', configDir);
           storybook({
-            mode: 'dev',
+            ...storybookOptions,
             port: 9001,
-            configDir,
           });
         }),
       ]);
     },
     {
       flags: {
-        boolean: ['rebuildDll'],
+        boolean: ['rebuildDll', 'site'],
       },
       description: `
         Run the storybook examples for ${name}
       `,
+      help: `
+        --site             Create a static build of Storybook.
+      `,
     }
   );
 };
diff --git a/packages/kbn-storybook/lib/webpack.dll.config.js b/packages/kbn-storybook/lib/webpack.dll.config.js
index bc871fab471b2..8219c07692ba4 100644
--- a/packages/kbn-storybook/lib/webpack.dll.config.js
+++ b/packages/kbn-storybook/lib/webpack.dll.config.js
@@ -24,7 +24,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { DLL_NAME, REPO_ROOT, DLL_DIST_DIR } = require('./constants');
 
 // This is the Webpack config for the DLL of CSS and JS assets that are
-// not expected to change during development.  This saves compile and run
+// not expected to change during development. This saves compile and run
 // times considerably.
 module.exports = {
   context: REPO_ROOT,
diff --git a/src/dev/storybook/run_storybook_cli.ts b/src/dev/storybook/run_storybook_cli.ts
index 0f7dc40ceef0b..03c1741fffc9a 100644
--- a/src/dev/storybook/run_storybook_cli.ts
+++ b/src/dev/storybook/run_storybook_cli.ts
@@ -69,9 +69,10 @@ run(
     flags: {
       default: {},
       string: [],
-      boolean: ['clean'],
+      boolean: ['clean', 'site'],
       help: `
       --clean            Clean Storybook build folder.
+      --site             Create a static build of Storybook.
     `,
     },
   }