Add flag for building static storybook site (#58050)

* 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 <[email protected]> * Back out of percy-storybook integration Co-authored-by: Vadim Dalecky <[email protected]>
elastic · Feb 20, 2020 · 2623976 · 2623976
1 parent 4aedf2b
commit 2623976
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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.
     `,
     },
   }