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 <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

@@ -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}

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" />

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.
     `,
     },
   }