From 262397623725531b6d0c62f01cd241872289ce38 Mon Sep 17 00:00:00 2001
From: Poff Poffenberger <poffdeluxe@gmail.com>
Date: Thu, 20 Feb 2020 14:01:31 -0600
Subject: [PATCH] Add flag for building static storybook site (#58050)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Adding storybook static site generation and percy storybook script

* feat: 🎸 build each Storybook in own folder, add --site flag doc

* Add flags site tag for exiting process

Co-Authored-By: Vadim Dalecky <streamich@users.noreply.github.com>

* Back out of percy-storybook integration

Co-authored-by: Vadim Dalecky <streamich@users.noreply.github.com>
---
 packages/kbn-storybook/index.js                    | 14 +++++++++-----
 .../storybook_config/preview-head.html             |  4 ++--
 src/dev/storybook/run_storybook_cli.ts             |  4 +++-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/kbn-storybook/index.js b/packages/kbn-storybook/index.js
index 78e2cf7f5073b..353a273881343 100644
--- a/packages/kbn-storybook/index.js
+++ b/packages/kbn-storybook/index.js
@@ -24,7 +24,7 @@ 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, ASSET_DIR, CURRENT_CONFIG } = require('./lib/constants');
 const { buildDll } = require('./lib/dll');
 
 exports.runStorybookCli = config => {
@@ -62,21 +62,25 @@ exports.runStorybookCli = config => {
         // route errors
         subj.toPromise(),
 
-        new Promise(() => {
+        new Promise(async () => {
           // storybook never completes, so neither will this promise
           const configDir = join(__dirname, 'storybook_config');
           log.debug('Config dir:', configDir);
-          storybook({
-            mode: 'dev',
+          await storybook({
+            mode: flags.site ? 'static' : 'dev',
             port: 9001,
             configDir,
+            outputDir: flags.site ? join(ASSET_DIR, name) : undefined,
           });
+
+          // Line is only reached when building the static version
+          if (flags.site) process.exit();
         }),
       ]);
     },
     {
       flags: {
-        boolean: ['rebuildDll'],
+        boolean: ['rebuildDll', 'site'],
       },
       description: `
         Run the storybook examples for ${name}
diff --git a/packages/kbn-storybook/storybook_config/preview-head.html b/packages/kbn-storybook/storybook_config/preview-head.html
index bef08a5120a36..16754ad550da0 100644
--- a/packages/kbn-storybook/storybook_config/preview-head.html
+++ b/packages/kbn-storybook/storybook_config/preview-head.html
@@ -2,5 +2,5 @@
   This file is looked for by Storybook and included in the HEAD element
   if it exists.  This is how we load the DLL content into the Storybook UI.
 -->
-<script src="/dll.js"></script>
-<link href="/dll.css" rel="stylesheet" />
+<script src="./dll.js"></script>
+<link href="./dll.css" rel="stylesheet" />
diff --git a/src/dev/storybook/run_storybook_cli.ts b/src/dev/storybook/run_storybook_cli.ts
index 0f7dc40ceef0b..efb618a48cd6e 100644
--- a/src/dev/storybook/run_storybook_cli.ts
+++ b/src/dev/storybook/run_storybook_cli.ts
@@ -52,6 +52,7 @@ run(
 
     log.verbose('Loading Storybook:', absolute);
     process.chdir(join(absolute, '..', '..'));
+
     require(absolute);
   },
   {
@@ -69,9 +70,10 @@ run(
     flags: {
       default: {},
       string: [],
-      boolean: ['clean'],
+      boolean: ['clean', 'site'],
       help: `
       --clean            Clean Storybook build folder.
+      --site             Build static version of Storybook.
     `,
     },
   }