Update Storybook to 6.5 (#139334)

* Update Storybook to 6.5

* Add @types/react-syntax-highlighter

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* fix type error

* include some deduping and patch version bumping to encourage yarn to do the right thing

* fix path to canvas addon

* remove addon build

* fix some type issues

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* 6.5.12

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: spalger <spencer@elastic.co>

package.json

@@ -748,25 +748,26 @@
     "@mapbox/vector-tile": "1.3.1",
     "@octokit/rest": "^16.35.0",
     "@openpgp/web-stream-tools": "^0.0.10",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-controls": "^6.4.22",
-    "@storybook/addon-docs": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-a11y": "^6.5.12",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-controls": "^6.5.12",
+    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storyshots": "^6.4.22",
-    "@storybook/addons": "^6.4.22",
-    "@storybook/api": "^6.4.22",
-    "@storybook/client-api": "^6.4.22",
-    "@storybook/components": "^6.4.22",
-    "@storybook/core": "^6.4.22",
-    "@storybook/core-common": "^6.4.22",
-    "@storybook/core-events": "^6.4.22",
-    "@storybook/node-logger": "^6.4.22",
-    "@storybook/preview-web": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@storybook/testing-react": "^1.2.4",
-    "@storybook/theming": "^6.4.22",
+    "@storybook/addon-storyshots": "^6.5.12",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/api": "^6.5.12",
+    "@storybook/client-api": "^6.5.12",
+    "@storybook/components": "^6.5.12",
+    "@storybook/core": "^6.5.12",
+    "@storybook/core-common": "^6.5.12",
+    "@storybook/core-events": "^6.5.12",
+    "@storybook/node-logger": "^6.5.12",
+    "@storybook/preview-web": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/react-docgen-typescript-plugin": "^1.0.1",
+    "@storybook/testing-react": "^1.3.0",
+    "@storybook/theming": "^6.5.12",
     "@testing-library/dom": "^8.12.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.5",
@@ -1198,6 +1199,7 @@
     "@types/react-router": "^5.1.7",
     "@types/react-router-config": "^5.0.2",
     "@types/react-router-dom": "^5.1.5",
+    "@types/react-syntax-highlighter": "^15.4.0",
     "@types/react-test-renderer": "^17.0.2",
     "@types/react-virtualized": "^9.21.21",
     "@types/react-vis": "^1.11.9",
@@ -1384,6 +1386,7 @@
     "q": "^1.5.1",
     "raw-loader": "^3.1.0",
     "react-test-renderer": "^17.0.2",
+    "react-textarea-autosize": "^8.3.4",
     "regenerate": "^1.4.0",
     "resolve": "^1.22.0",
     "rxjs-marbles": "^7.0.1",

packages/kbn-ambient-storybook-types/BUILD.bazel

@@ -31,6 +31,11 @@ NPM_MODULE_EXTRA_FILES = [
 #    "@npm//name-of-package"
 #    eg. "@npm//lodash"
 RUNTIME_DEPS = [
+  # Storybook react doesn't depend on these types even though their types use
+  # them, so we depend on them in this package and import them to make sure that they
+  # are available to users of the ambient types
+  "@npm//react-textarea-autosize",
+  "@npm//@storybook/react-docgen-typescript-plugin",
 ]
 
 js_library(

packages/kbn-storybook/src/lib/register.ts

@@ -21,7 +21,7 @@ addons.setConfig({
   showPanel: false,
   isFullscreen: false,
   panelPosition: 'bottom',
-  isToolshown: true,
+  showToolbar: true,
 });
 
 registerThemeSwitcherAddon();

src/plugins/discover/.storybook/discover.webpack.ts

@@ -10,5 +10,4 @@ import { defaultConfig, StorybookConfig } from '@kbn/storybook';
 export const discoverStorybookConfig: StorybookConfig = {
   ...defaultConfig,
   stories: ['../**/*.stories.tsx'],
-  addons: [...(defaultConfig.addons || []), './addon/target/register'],
 };

x-pack/plugins/apm/public/components/shared/stacktrace/context.tsx

@@ -138,7 +138,7 @@ export function Context({ stackframe, codeLanguage, isLibraryFrame }: Props) {
             style={xcode}
             PreTag={Line}
             CodeTag={Code}
-            customStyle={{ padding: null, overflowX: null }}
+            customStyle={{ padding: undefined, overflowX: undefined }}
           >
             {line}
           </SyntaxHighlighter>

x-pack/plugins/canvas/storybook/addon/babel.config.js

@@ -1,11 +0,0 @@
-/*
- * 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.
- */
-
-module.exports = {
-  presets: ['@kbn/babel-preset/webpack_preset'],
-  plugins: ['@babel/plugin-proposal-class-properties'],
-};

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

@@ -44,6 +44,6 @@ addons.setConfig({
   showPanel: true,
   isFullscreen: false,
   panelPosition: 'bottom',
-  isToolshown: true,
+  showToolbar: true,
   selectedPanel: PANEL_ID,
 });

x-pack/plugins/canvas/storybook/addon/scripts/build.js

@@ -1,67 +0,0 @@
-/*
- * 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.
- */
-
-const { resolve } = require('path');
-
-const del = require('del');
-const supportsColor = require('supports-color');
-const { withProcRunner } = require('@kbn/dev-proc-runner');
-const { run } = require('@kbn/dev-cli-runner');
-
-const ROOT_DIR = resolve(__dirname, '..');
-const BUILD_DIR = resolve(ROOT_DIR, 'target');
-
-const padRight = (width, str) =>
-  str.length >= width ? str : `${str}${' '.repeat(width - str.length)}`;
-
-run(
-  async ({ log, flags }) => {
-    await withProcRunner(log, async (proc) => {
-      if (!flags.watch) {
-        log.info('Deleting old output');
-        await del(BUILD_DIR);
-      }
-
-      const cwd = ROOT_DIR;
-      const env = { process };
-
-      if (supportsColor.stdout) {
-        env.FORCE_COLOR = 'true';
-      }
-
-      log.info(`Starting babel and typescript${flags.watch ? ' in watch mode' : ''}`);
-      await proc.run(padRight(10, `babel`), {
-        cmd: 'babel',
-        args: [
-          'src',
-          '--config-file',
-          require.resolve('../babel.config.js'),
-          '--out-dir',
-          BUILD_DIR,
-          '--extensions',
-          '.ts,.js,.tsx',
-          '--copy-files',
-          ...(flags.watch ? ['--watch'] : ['--quiet']),
-        ],
-        wait: true,
-        env,
-        cwd,
-      });
-
-      log.success('Complete');
-    });
-  },
-  {
-    description: 'Simple build tool for Canvas Storybook addon',
-    flags: {
-      boolean: ['watch'],
-      help: `
-        --watch            Run in watch mode
-      `,
-    },
-  }
-);

x-pack/plugins/canvas/storybook/addon/state.ts

@@ -14,11 +14,11 @@ import { isFunction } from 'lodash';
 import { EVENTS } from './constants';
 
 // @ts-expect-error untyped local
-import { getRootReducer } from '../../../public/state/reducers';
+import { getRootReducer } from '../../public/state/reducers';
 
 // @ts-expect-error Untyped local
-import { getInitialState as getState } from '../../../public/state/initial_state';
-import { State } from '../../../types';
+import { getInitialState as getState } from '../../public/state/initial_state';
+import { State } from '../../types';
 
 export const getInitialState: () => State = () => getState();
 export const getMiddleware = () => applyMiddleware(thunkMiddleware);

x-pack/plugins/canvas/storybook/addon/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../../../../tsconfig.base.json",
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": [
-    "target"
-  ],
-  "compilerOptions": {
-    "declaration": false,
-  }
-}

x-pack/plugins/canvas/storybook/addon/types.ts

@@ -6,7 +6,7 @@
  */
 
 import { Action } from 'redux';
-import { State } from '../../../types';
+import { State } from '../../types';
 
 export interface RecordedPayload {
   previousState: State;

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

@@ -66,6 +66,6 @@ export const canvasWebpack = {
 
 export const canvasStorybookConfig: StorybookConfig = {
   ...defaultConfig,
-  addons: [...(defaultConfig.addons || []), './addon/target/register'],
+  addons: [...(defaultConfig.addons || []), require.resolve('./addon/register')],
   ...mergeWebpackFinal(canvasWebpack),
 };

x-pack/plugins/canvas/storybook/decorators/redux_decorator.tsx

@@ -18,8 +18,8 @@ import { elementsRegistry } from '../../public/lib/elements_registry';
 import { image } from '../../canvas_plugin_src/elements/image';
 elementsRegistry.register(image);
 
-import { getInitialState, getReducer, getMiddleware, patchDispatch } from '../addon/src/state';
-export { ADDON_ID, ACTIONS_PANEL_ID } from '../addon/src/constants';
+import { getInitialState, getReducer, getMiddleware, patchDispatch } from '../addon/state';
+export { ADDON_ID, ACTIONS_PANEL_ID } from '../addon/constants';
 
 export interface Params {
   workpad?: CanvasWorkpad;

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

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { ACTIONS_PANEL_ID } from './addon/src/constants';
+import { ACTIONS_PANEL_ID } from './addon/constants';
 
 export * from './decorators';
-export { ACTIONS_PANEL_ID } from './addon/src/constants';
+export { ACTIONS_PANEL_ID } from './addon/constants';
 
 export const getAddonPanelParameters = () => ({ options: { selectedPanel: ACTIONS_PANEL_ID } });