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