Update Storybook to 6.5 (elastic#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

@@ -484,23 +484,26 @@
     "@microsoft/api-extractor": "7.18.19",
     "@octokit/rest": "^16.35.0",
     "@percy/agent": "^0.28.6",
-    "@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/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/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.19.0",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^12.1.5",
@@ -612,6 +615,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": "^16.9.1",
     "@types/react-virtualized": "^9.18.7",
     "@types/read-pkg": "^4.0.0",
@@ -803,6 +807,7 @@
     "proxy": "^2.1.1",
     "q": "^1.5.1",
     "react-test-renderer": "^16.14.0",
+    "react-textarea-autosize": "^8.3.4",
     "read-pkg": "^5.2.0",
     "regenerate": "^1.4.0",
     "resolve": "^1.7.1",

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

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

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/src/register.tsx → 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/src/state.ts → x-pack/plugins/canvas/storybook/addon/state.ts

@@ -15,18 +15,11 @@ import { isFunction } from 'lodash';
 import { EVENTS } from './constants';
 
 // @ts-expect-error untyped local
-import { appReady } from '../../../public/state/middleware/app_ready';
-// @ts-expect-error untyped local
-import { resolvedArgs } from '../../../public/state/middleware/resolved_args';
-
-// @ts-expect-error untyped local
-import { getRootReducer } from '../../../public/state/reducers';
+import { getRootReducer } from '../../public/state/reducers';
 
 // @ts-expect-error Untyped local
-import { getDefaultWorkpad } from '../../../public/state/defaults';
-// @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/src/types.ts → 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

@@ -67,6 +67,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

@@ -22,8 +22,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 } });