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

Upgrade to Storybook 6 and attempt to use the declarative configuration.

The goals of this PR (as part of Kibana's Storybook roadmap, are:

Upgrade to Storybook 6
Still allow running Storybooks with yarn storybook plugin_name
Use the declarative configuration to (hopefully) make the configuration simpler to use an easier to understand, as well as avoiding deprecation warnings and loss of future compatibility
The ways in which what I have so far differs from how we do things today are:

In the alias configuration it takes a path to a storybook configuration directory instead of the storybook.js file from before
Each plugin (it doesn't have to be a plugin; can be any directory) has a .storybook/main.js (the aliases file in @kbn/storybook specifies these locations) where they can define their Storybook configuration. You can require('@kbn/storybook').defaultConfig to get defaults and override them
@kbn/storybook has a preset that can provide Webpack and Babel configuration and Storybook parameters and decorators
Instead of dynamically creating the list of stories to import, we define them in the globs of the stories property in .storybook/main.js.
Do not build a DLL. We are using @kbn/ui-shared-deps as externals. Startup time is not quite as fast but still acceptable.
Other things done in this PR:

Allow default exports in .stories. to allow for Common Story Format CSF stories
Add guard in Webpack configuration needed for overriding CSS rules
Update filename casing check to allow for files with required names in Storybook
Clean up observability stories
Rename *.examples.tsx and *.story.tsx to *.stories.tsx

* Storybook 6 and config changes (#75357)

Upgrade to Storybook 6 and attempt to use the declarative configuration.

The goals of this PR (as part of Kibana's Storybook roadmap, are:

Upgrade to Storybook 6
Still allow running Storybooks with yarn storybook plugin_name
Use the declarative configuration to (hopefully) make the configuration simpler to use an easier to understand, as well as avoiding deprecation warnings and loss of future compatibility
The ways in which what I have so far differs from how we do things today are:

In the alias configuration it takes a path to a storybook configuration directory instead of the storybook.js file from before
Each plugin (it doesn't have to be a plugin; can be any directory) has a .storybook/main.js (the aliases file in @kbn/storybook specifies these locations) where they can define their Storybook configuration. You can require('@kbn/storybook').defaultConfig to get defaults and override them
@kbn/storybook has a preset that can provide Webpack and Babel configuration and Storybook parameters and decorators
Instead of dynamically creating the list of stories to import, we define them in the globs of the stories property in .storybook/main.js.
Do not build a DLL. We are using @kbn/ui-shared-deps as externals. Startup time is not quite as fast but still acceptable.
Other things done in this PR:

Allow default exports in .stories. to allow for Common Story Format CSF stories
Add guard in Webpack configuration needed for overriding CSS rules
Update filename casing check to allow for files with required names in Storybook
Clean up observability stories
Rename *.examples.tsx and *.story.tsx to *.stories.tsx

Co-authored-by: Tyler Smalley <[email protected]>

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