[7.x] Storybook 6 and config changes (#75357)

.eslintrc.js

@@ -392,6 +392,7 @@ module.exports = {
      */
     {
       files: [
+        '**/*.stories.tsx',
         'x-pack/test/apm_api_integration/**/*.ts',
         'x-pack/test/functional/apps/**/*.js',
         'x-pack/plugins/apm/**/*.js',

package.json

@@ -332,13 +332,16 @@
     "@types/styled-components": "^5.1.0",
     "@types/supertest": "^2.0.5",
     "@types/supertest-as-promised": "^2.0.38",
+    "@types/tapable": "^1.0.6",
     "@types/tar": "^4.0.3",
     "@types/testing-library__jest-dom": "^5.9.2",
     "@types/testing-library__react-hooks": "^3.4.0",
     "@types/type-detect": "^4.0.1",
     "@types/uuid": "^3.4.4",
     "@types/vinyl": "^2.0.4",
     "@types/vinyl-fs": "^2.4.11",
+    "@types/webpack": "^4.41.3",
+    "@types/webpack-env": "^1.15.2",
     "@types/zen-observable": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^3.10.0",
     "@typescript-eslint/parser": "^3.10.0",

packages/kbn-storybook/README.md

@@ -2,32 +2,40 @@
 
 This package provides ability to add [Storybook](https://storybook.js.org/) to any Kibana plugin.
 
-- [Setup Instructions](#setup-instructions)
-
+- [Kibana Storybook](#kibana-storybook)
+  - [Setup Instructions](#setup-instructions)
+  - [Customizing configuration](#customizing-configuration)
 
 ## Setup Instructions
 
-1. Add `storybook.js` launcher file to your plugin. For example, create a file at
-   `src/plugins/<plugin>/scripts/storybook.js`, with the following contents:
-
-   ```js
-   import { join } from 'path';
-
-   // eslint-disable-next-line
-   require('@kbn/storybook').runStorybookCli({
-     name: '<plugin>',
-     storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.examples.tsx')],
-   });
-   ```
-2. Add your plugin alias to `src/dev/storybook/aliases.ts` config.
-3. Create sample Storybook stories. For example, in your plugin create create a file at
-   `src/plugins/<plugin>/public/components/hello_world/__examples__/hello_world.examples.tsx` with
-   the following contents:
-
-   ```jsx
-   import * as React from 'react';
-   import { storiesOf } from '@storybook/react';
-
-   storiesOf('Hello world', module).add('default', () => <div>Hello world!</div>);
-   ```
-4. Launch Storybook with `yarn storybook <plugin>`.
+- Add a `.storybook/main.js` configuration file to your plugin. For example, create a file at
+  `src/plugins/<plugin>/.storybook/main.js`, with the following contents:
+
+  ```js
+  module.exports = require('@kbn/storybook').defaultConfig;
+  ```
+
+- Add your plugin alias to `src/dev/storybook/aliases.ts` config.
+- Create sample Storybook stories. For example, in your plugin create a file at
+  `src/plugins/<plugin>/public/components/hello_world/hello_world.stories.tsx` with
+  the following [Component Story Format](https://storybook.js.org/docs/react/api/csf) contents:
+
+  ```jsx
+  import { MyComponent } from './my_component';
+
+  export default {
+    component: MyComponent,
+    title: 'Path/In/Side/Navigation/ToComponent',
+  };
+
+  export function Example() {
+    return <MyComponent />;
+  }
+  ```
+
+- Launch Storybook with `yarn storybook <plugin>`, or build a static site with `yarn storybook --site <plugin>`.
+
+## Customizing configuration
+
+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).

packages/kbn-storybook/storybook_config/mocks/noop.js → packages/kbn-storybook/index.ts

@@ -17,4 +17,5 @@
  * under the License.
  */
 
-export default function () {}
+export { defaultConfig } from './lib/default_config';
+export { runStorybookCli } from './lib/run_storybook_cli';

src/plugins/kibana_react/public/code_editor/scripts/storybook.ts → packages/kbn-storybook/lib/constants.ts

@@ -17,10 +17,8 @@
  * under the License.
  */
 
-import { join } from 'path';
+import { resolve } from 'path';
+import { REPO_ROOT as KIBANA_ROOT } from '@kbn/dev-utils';
 
-// eslint-disable-next-line
-require('@kbn/storybook').runStorybookCli({
-  name: 'code-editor',
-  storyGlobs: [join(__dirname, '..', '*.examples.tsx')],
-});
+export const REPO_ROOT = KIBANA_ROOT;
+export const ASSET_DIR = resolve(KIBANA_ROOT, 'built_assets/storybook');

packages/kbn-storybook/storybook_config/middleware.js → packages/kbn-storybook/lib/default_config.ts

@@ -17,10 +17,12 @@
  * under the License.
  */
 
-const serve = require('serve-static');
-const path = require('path');
+import { StorybookConfig } from '@storybook/core/types';
 
-// Extend the Storybook Middleware to include a route to access Legacy UI assets
-module.exports = function (router) {
-  router.get('/ui', serve(path.resolve(__dirname, '../../../src/core/server/core_app/assets')));
+export const defaultConfig: StorybookConfig = {
+  addons: ['@kbn/storybook/preset', '@storybook/addon-knobs', '@storybook/addon-essentials'],
+  stories: ['../**/*.stories.tsx'],
+  typescript: {
+    reactDocgen: false,
+  },
 };

packages/kbn-storybook/lib/constants.js → packages/kbn-storybook/lib/register.ts

@@ -17,11 +17,19 @@
  * under the License.
  */
 
-const { resolve } = require('path');
-const { REPO_ROOT } = require('@kbn/utils');
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
 
-exports.ASSET_DIR = resolve(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';
+// This configures the "Manager", or main outer view of Storybook. It is an
+// addon that's loaded by the `managerEntries` part of the preset in ../preset.js.
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Kibana Storybook',
+    brandUrl: 'https://github.com/elastic/kibana/tree/master/packages/kbn-storybook',
+  }),
+  showPanel: false,
+  isFullscreen: false,
+  panelPosition: 'bottom',
+  isToolshown: true,
+});

packages/kbn-storybook/lib/run_storybook_cli.ts

@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+
+import { join } from 'path';
+import { logger } from '@storybook/node-logger';
+import buildStandalone from '@storybook/react/standalone';
+import { Flags, run } from '@kbn/dev-utils';
+import { distDir } from '@kbn/ui-shared-deps';
+import * as constants from './constants';
+
+// Convert the flags to a Storybook loglevel
+function getLogLevelFromFlags(flags: Flags) {
+  if (flags.debug) {
+    return 'silly';
+  }
+  if (flags.verbose) {
+    return 'verbose';
+  }
+  if (flags.quiet) {
+    return 'warn';
+  }
+  if (flags.silent) {
+    return 'silent';
+  }
+  return 'info';
+}
+
+export function runStorybookCli({ configDir, name }: { configDir: string; name: string }) {
+  run(
+    async ({ flags, log }) => {
+      log.debug('Global config:\n', constants);
+
+      const staticDir = [distDir];
+      const config: Record<string, any> = {
+        configDir,
+        mode: flags.site ? 'static' : 'dev',
+        port: 9001,
+        staticDir,
+      };
+      if (flags.site) {
+        config.outputDir = join(constants.ASSET_DIR, name);
+      }
+
+      logger.setLevel(getLogLevelFromFlags(flags));
+      await buildStandalone(config);
+
+      // Line is only reached when building the static version
+      if (flags.site) process.exit();
+    },
+    {
+      flags: {
+        boolean: ['site'],
+      },
+      description: `
+        Run the storybook examples for ${name}
+      `,
+    }
+  );
+}