📕 Storybook for everyone (take 2)

.eslintrc.js

@@ -53,6 +53,7 @@ module.exports = {
         'packages/kbn-test-subj-selector/**/*',
         'packages/kbn-test/**/*',
         'packages/kbn-eslint-import-resolver-kibana/**/*',
+        'packages/kbn-storybook/**/*',
         'src/legacy/server/saved_objects/**/*',
         'x-pack/legacy/plugins/apm/**/*',
         'x-pack/legacy/plugins/canvas/**/*',
@@ -247,6 +248,7 @@ module.exports = {
         'packages/kbn-ui-framework/**/*.js',
         'x-pack/**/*.js',
         'packages/kbn-interpreter/**/*.js',
+        'packages/kbn-storybook/**/*',
       ],
       rules: {
         'import/no-extraneous-dependencies': [

package.json

@@ -69,7 +69,8 @@
     "core:acceptApiChanges": "node scripts/check_core_api_changes.js --accept",
     "kbn:bootstrap": "yarn build:types && node scripts/register_git_hook",
     "spec_to_console": "node scripts/spec_to_console",
-    "backport-skip-ci": "backport --prDescription \"[skip-ci]\""
+    "backport-skip-ci": "backport --prDescription \"[skip-ci]\"",
+    "storybook": "node scripts/storybook"
   },
   "repository": {
     "type": "git",

packages/kbn-dev-utils/src/index.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export { withProcRunner } from './proc_runner';
+export { withProcRunner, ProcRunner } from './proc_runner';
 export { ToolingLog, ToolingLogTextWriter, pickLevelFromFlags } from './tooling_log';
 export { createAbsolutePathSerializer } from './serializers';
 export { CA_CERT_PATH, ES_KEY_PATH, ES_CERT_PATH } from './certs';

packages/kbn-dev-utils/src/proc_runner/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { withProcRunner } from './with_proc_runner';
+export { ProcRunner } from './proc_runner';

packages/kbn-dev-utils/src/run/run.ts

@@ -23,11 +23,13 @@ import exitHook from 'exit-hook';
 import { pickLevelFromFlags, ToolingLog } from '../tooling_log';
 import { createFlagError, isFailError } from './fail';
 import { Flags, getFlags, getHelp } from './flags';
+import { ProcRunner, withProcRunner } from '../proc_runner';
 
 type CleanupTask = () => void;
 type RunFn = (args: {
   log: ToolingLog;
   flags: Flags;
+  procRunner: ProcRunner;
   addCleanupTask: (task: CleanupTask) => void;
 }) => Promise<void> | void;
 
@@ -102,10 +104,13 @@ export async function run(fn: RunFn, options: Options = {}) {
     }
 
     try {
-      await fn({
-        log,
-        flags,
-        addCleanupTask: (task: CleanupTask) => cleanupTasks.push(task),
+      await withProcRunner(log, async procRunner => {
+        await fn({
+          log,
+          flags,
+          procRunner,
+          addCleanupTask: (task: CleanupTask) => cleanupTasks.push(task),
+        });
       });
     } finally {
       doCleanup();

packages/kbn-storybook/index.js

@@ -0,0 +1,90 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const fs = require('fs');
+const { join } = require('path');
+const mkdirp = require('mkdirp');
+const { promisify } = require('util');
+const Rx = require('rxjs');
+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 { buildDll } = require('./lib/dll');
+
+const mkdirpAsync = promisify(mkdirp);
+
+exports.runStorybookCli = config => {
+  const { name, storyGlobs } = config;
+  run(
+    async ({ flags, log, procRunner }) => {
+      log.info('Global config:\n', require('./lib/constants'));
+
+      const currentConfig = JSON.stringify(config, null, 2);
+      const currentConfigDir = join(CURRENT_CONFIG, '..');
+      await mkdirpAsync(currentConfigDir);
+      log.info('Writing currentConfig:\n', CURRENT_CONFIG + '\n', currentConfig);
+      await fs.promises.writeFile(CURRENT_CONFIG, `exports.currentConfig = ${currentConfig};`);
+
+      await buildDll({
+        rebuildDll: flags.rebuildDll,
+        log,
+        procRunner,
+      });
+
+      // Build sass and continue when initial build complete
+      await procRunner.run('watch sass', {
+        cmd: process.execPath,
+        args: ['scripts/build_sass', '--watch'],
+        cwd: REPO_ROOT,
+        wait: /scss bundles created/,
+      });
+
+      const subj = new Rx.ReplaySubject(1);
+      generateStorybookEntry({ log, storyGlobs }).subscribe(subj);
+
+      await subj.pipe(first()).toPromise();
+
+      await Promise.all([
+        // route errors
+        subj.toPromise(),
+
+        new Promise(() => {
+          // storybook never completes, so neither will this promise
+          const configDir = join(__dirname, 'storybook_config');
+          log.info('Config dir:', configDir);
+          storybook({
+            mode: 'dev',
+            port: 9001,
+            configDir,
+          });
+        }),
+      ]);
+    },
+    {
+      flags: {
+        boolean: ['rebuildDll'],
+      },
+      description: `
+        Run the storybook examples for ${name}
+      `,
+    }
+  );
+};

packages/kbn-storybook/lib/constants.js

@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const { resolve, dirname } = require('path');
+
+exports.REPO_ROOT = dirname(require.resolve('../../../package.json'));
+exports.ASSET_DIR = resolve(exports.REPO_ROOT, 'built_assets/storybook');
+exports.CURRENT_CONFIG = resolve(exports.ASSET_DIR, 'current.config.js');
+exports.STORY_ENTRY_PATH = resolve(exports.ASSET_DIR, 'stories.entry.js');
+exports.DLL_DIST_DIR = resolve(exports.ASSET_DIR, 'dll');
+exports.DLL_NAME = 'storybook_dll';

packages/kbn-storybook/lib/dll.js

@@ -0,0 +1,41 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const { resolve } = require('path');
+const { existsSync } = require('fs');
+
+const { REPO_ROOT, DLL_DIST_DIR } = require('./constants');
+
+exports.buildDll = async ({ rebuildDll, log, procRunner }) => {
+  if (rebuildDll) {
+    log.info('rebuilding dll');
+  } else if (!existsSync(resolve(DLL_DIST_DIR, 'dll.js'))) {
+    log.info('dll missing, rebuilding');
+  } else {
+    log.info('dll exists');
+    return;
+  }
+
+  await procRunner.run('build dll ', {
+    cmd: require.resolve('webpack/bin/webpack'),
+    args: ['--config', require.resolve('./webpack.dll.config.js')],
+    cwd: REPO_ROOT,
+    wait: true,
+  });
+};

packages/kbn-storybook/lib/storybook_entry.js

@@ -0,0 +1,89 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const { resolve, relative, dirname } = require('path');
+const Fs = require('fs');
+const Rx = require('rxjs');
+const { mergeMap, map, debounceTime } = require('rxjs/operators');
+const normalize = require('normalize-path');
+const { promisify } = require('util');
+
+const watch = require('glob-watcher');
+const mkdirp = require('mkdirp');
+const glob = require('fast-glob');
+
+const mkdirpAsync = promisify(mkdirp);
+const writeFileAsync = promisify(Fs.writeFile);
+
+const { REPO_ROOT, STORY_ENTRY_PATH } = require('./constants');
+const STORE_ENTRY_DIR = dirname(STORY_ENTRY_PATH);
+
+exports.generateStorybookEntry = ({ log, storyGlobs }) => {
+  const globs = ['built_assets/css/**/*.light.css', ...storyGlobs];
+  log.info('Storybook globs:\n', globs);
+  const norm = p => normalize(relative(STORE_ENTRY_DIR, p));
+
+  return Rx.defer(() =>
+    glob(globs, {
+      absolute: true,
+      cwd: REPO_ROOT,
+      onlyFiles: true,
+    })
+  ).pipe(
+    map(paths => {
+      log.info('Discovered Storybook entry points:\n', paths);
+      return new Set(paths.map(norm));
+    }),
+    mergeMap(
+      paths =>
+        new Rx.Observable(observer => {
+          observer.next(paths);
+
+          const chokidar = watch(globs, { cwd: REPO_ROOT })
+            .on('add', path => {
+              observer.next(paths.add(norm(resolve(REPO_ROOT, path))));
+            })
+            .on('unlink', path => {
+              observer.next(paths.delete(norm(resolve(REPO_ROOT, path))));
+            });
+
+          return () => {
+            chokidar.close();
+          };
+        })
+    ),
+    debounceTime(200),
+    mergeMap(async (paths, i) => {
+      await mkdirpAsync(STORE_ENTRY_DIR);
+
+      let content = '';
+      for (const path of paths) {
+        content += `require('${path}');\n`;
+      }
+
+      await writeFileAsync(STORY_ENTRY_PATH, content);
+
+      if (i === 0) {
+        log.info('%d paths written to entry file', paths.size);
+      } else {
+        log.info('entry file updated');
+      }
+    })
+  );
+};