[canvas] Refactor Storybook from bespoke to standard configuration (#…

…101962) (#102589)

Co-authored-by: Clint Andrew Hall <clint.hall@elastic.co>

packages/kbn-storybook/package.json

@@ -11,6 +11,6 @@
   "scripts": {
     "build": "../../node_modules/.bin/tsc",
     "kbn:bootstrap": "yarn build",
-    "watch": "yarn build --watch"
+    "kbn:watch": "yarn build --watch"
   }
 }

packages/kbn-storybook/webpack.config.ts

@@ -71,11 +71,12 @@ export default function ({ config: storybookConfig }: { config: Configuration })
       ],
     },
     resolve: {
-      // Tell Webpack about the scss extension
-      extensions: ['.scss'],
+      extensions: ['.js', '.ts', '.tsx', '.json'],
+      mainFields: ['browser', 'main'],
       alias: {
         core_app_image_assets: resolve(REPO_ROOT, 'src/core/public/core_app/images'),
       },
+      symlinks: false,
     },
     stats,
   };

test/scripts/jenkins_storybook.sh

@@ -2,9 +2,6 @@
 
 source src/dev/ci_setup/setup_env.sh
 
-cd "$XPACK_DIR/plugins/canvas"
-node scripts/storybook --dll
-
 cd "$KIBANA_DIR"
 
 yarn storybook --site apm

x-pack/package.json

@@ -7,7 +7,6 @@
   "scripts": {
     "github-checks-reporter": "../node_modules/.bin/github-checks-reporter",
     "kbn": "node ../scripts/kbn",
-    "kbn:bootstrap": "node plugins/canvas/scripts/storybook --clean",
     "start": "node ../scripts/kibana --dev",
     "build": "node --preserve-symlinks ../node_modules/.bin/gulp build",
     "test:jest": "node ../scripts/jest"

x-pack/plugins/canvas/CONTRIBUTING.md

@@ -113,27 +113,4 @@ Canvas uses [Storybook](https://storybook.js.org) to test and develop components
 
 ### Using Storybook
 
-The Canvas Storybook instance can be started by running `node scripts/storybook` from the Canvas root directory.  It has a number of options:
-
-```
-node scripts/storybook
-
-  Storybook runner for Canvas.
-
-  Options:
-    --clean            Forces a clean of the Storybook DLL and exits.
-    --dll              Cleans and builds the Storybook dependency DLL and exits.
-    --stats            Produces a Webpack stats file.
-    --site             Produces a site deployment of this Storybook.
-    --verbose, -v      Log verbosely
-    --debug            Log debug messages (less than verbose)
-    --quiet            Only log errors
-    --silent           Don't log anything
-    --help             Show this message
-```
-
-### What about `kbn-storybook`?
-
-Canvas wants to move to the Kibana Storybook instance as soon as feasible.  There are few tweaks Canvas makes to Storybook, so we're actively working with the maintainers to make that migration successful.
-
-In the meantime, people can test our progress by running `node scripts/storybook_new` from the Canvas root.
+The Canvas Storybook instance can be started by running `yarn storybook canvas` from the Kibana root directory.

x-pack/plugins/canvas/shareable_runtime/README.mdx

@@ -153,7 +153,7 @@ You can test this functionality in a number of ways. The easiest would be:
 
 ### Run the Canvas Storybook
 
-From `/canvas`: `node scripts/storybook`
+From `/kibana`: `yarn storybook canvas`
 
 ### Run the Jest Tests
 

x-pack/plugins/canvas/storybook/addon/src/register.tsx

@@ -9,6 +9,8 @@ import React from 'react';
 import { addons, types } from '@storybook/addons';
 import { AddonPanel } from '@storybook/components';
 import { STORY_CHANGED } from '@storybook/core-events';
+import { create } from '@storybook/theming';
+import { PANEL_ID } from '@storybook/addon-actions';
 
 import { ADDON_ID, EVENTS, ACTIONS_PANEL_ID } from './constants';
 import { Panel } from './panel';
@@ -32,3 +34,16 @@ addons.register(ADDON_ID, (api) => {
     },
   });
 });
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Canvas Storybook',
+    brandUrl: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas',
+  }),
+  showPanel: true,
+  isFullscreen: false,
+  panelPosition: 'bottom',
+  isToolshown: true,
+  selectedPanel: PANEL_ID,
+});

x-pack/plugins/canvas/storybook/constants.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import path from 'path';
+
+export const KIBANA_ROOT = path.resolve(__dirname, '../../../..');

x-pack/plugins/canvas/storybook/main.ts

@@ -5,23 +5,58 @@
  * 2.0.
  */
 
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { existsSync } = require('fs');
-const { join } = require('path');
+import { resolve } from 'path';
+import webpackMerge from 'webpack-merge';
+import { defaultConfig } from '@kbn/storybook';
 
-// Check for DLL if we're not running in Jest
-if (
-  !existsSync(join(__dirname, '../../../../built_assets/canvas_storybook_dll/manifest.json')) &&
-  !process.env.JEST_WORKER_ID
-) {
-  // eslint-disable-next-line no-console
-  console.error(
-    'No DLL found. Run `node scripts/storybook --dll` from the Canvas plugin directory.'
-  );
-  process.exit(1);
-}
+import type { Configuration } from 'webpack';
+
+import { KIBANA_ROOT } from './constants';
+
+const canvasWebpack = {
+  module: {
+    rules: [
+      // Enable CSS Modules in Storybook (Shareable Runtime)
+      {
+        test: /\.module\.s(a|c)ss$/,
+        loader: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2,
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              path: resolve(KIBANA_ROOT, 'src/optimize/postcss.config.js'),
+            },
+          },
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
+      // Exclude large-dependency, troublesome or irrelevant modules.
+      {
+        test: [
+          resolve(KIBANA_ROOT, 'x-pack/plugins/canvas/public/components/embeddable_flyout'),
+          resolve(KIBANA_ROOT, 'x-pack/plugins/reporting/public'),
+          resolve(KIBANA_ROOT, 'src/plugins/kibana_legacy/public/angular'),
+          resolve(KIBANA_ROOT, 'src/plugins/kibana_legacy/public/paginate'),
+        ],
+        use: 'null-loader',
+      },
+    ],
+  },
+};
 
 module.exports = {
-  stories: ['../**/*.stories.tsx'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-knobs', './addon/target/register'],
+  ...defaultConfig,
+  addons: [...(defaultConfig.addons || []), './addon/target/register'],
+  webpackFinal: (config: Configuration) => webpackMerge(config, canvasWebpack),
 };