Composite storybook

packages/kbn-storybook/README.md

@@ -5,6 +5,7 @@ This package provides ability to add [Storybook](https://storybook.js.org/) to a
 - [Kibana Storybook](#kibana-storybook)
   - [Setup Instructions](#setup-instructions)
   - [Customizing configuration](#customizing-configuration)
+  - [Composite Storybook](#composite-storybook)
 
 ## Setup Instructions
 
@@ -39,3 +40,9 @@ This package provides ability to add [Storybook](https://storybook.js.org/) to a
 
 The `defaultConfig` object provided by the @kbn/storybook package should be all you need to get running, but you can
 override this in your .storybook/main.js. Using [Storybook's configuration options](https://storybook.js.org/docs/react/configure/overview).
+
+## Composite Storybook
+
+The [composite directory](./composite) contains a Storybook configuration that is used to build a Storybook using [Storybook Composition](https://storybook.js.org/docs/react/workflows/storybook-composition). This can be ran and built with `yarn storybook composite` (with `--site` to build the static site.)
+
+The URLs of the composite site are in [/src/dev/aliases.ts](/src/dev/aliases.ts),

packages/kbn-storybook/composite/.storybook/main.js

@@ -0,0 +1,22 @@
+const { defaultConfig } = require('@kbn/storybook');
+const { storybookAliases } = require('../../../../src/dev/storybook/aliases');
+
+const urlAliases = {
+  dashboard_enhanced: 'dashboard-enhanced',
+};
+const urlSuffix = 'nlsmith.vercel.app';
+
+const refs = Object.entries(storybookAliases).reduce((prev, [id, options]) => {
+  if (id !== 'composite') {
+    prev[id] = { title: options.title || id, url: `https://${urlAliases[id] || id}.${urlSuffix}` };
+  }
+  return prev;
+}, {});
+
+// console.log({ refs });
+// process.exit(0);
+module.exports = {
+  ...defaultConfig,
+  refs,
+  stories: [],
+};

src/dev/storybook/aliases.ts

@@ -18,13 +18,14 @@
  */
 
 export const storybookAliases = {
-  apm: 'x-pack/plugins/apm/.storybook',
-  canvas: 'x-pack/plugins/canvas/storybook',
-  codeeditor: 'src/plugins/kibana_react/public/code_editor/.storybook',
-  dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
-  embeddable: 'src/plugins/embeddable/.storybook',
-  infra: 'x-pack/plugins/infra/.storybook',
-  security_solution: 'x-pack/plugins/security_solution/.storybook',
-  ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
-  observability: 'x-pack/plugins/observability/.storybook',
+  apm: { configDir: 'x-pack/plugins/apm/.storybook' },
+  canvas: { configDir: 'x-pack/plugins/canvas/storybook' },
+  codeeditor: { configDir: 'src/plugins/kibana_react/public/code_editor/.storybook' },
+  composite: { configDir: 'packages/kbn-storybook/composite/.storybook' },
+  dashboard_enhanced: { configDir: 'x-pack/plugins/dashboard_enhanced/.storybook' },
+  embeddable: { configDir: 'src/plugins/embeddable/.storybook' },
+  infra: { configDir: 'x-pack/plugins/infra/.storybook' },
+  security_solution: { configDir: 'x-pack/plugins/security_solution/.storybook' },
+  ui_actions_enhanced: { configDir: 'x-pack/plugins/ui_actions_enhanced/.storybook' },
+  observability: { configDir: 'x-pack/plugins/observability/.storybook' },
 };

src/dev/storybook/run_storybook_cli.ts

@@ -46,7 +46,7 @@ run(
       throw createFlagError(`Unknown alias [${alias}]`);
     }
 
-    const configDir = (storybookAliases as any)[alias];
+    const configDir = (storybookAliases as any)[alias].configDir;
 
     log.verbose('Loading Storybook:', configDir);