[storybook] upgrade to 6.3.x (#119498) (#120048)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
# Conflicts:
#	packages/kbn-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap
#	packages/kbn-storybook/src/lib/theme_switcher.tsx
#	yarn.lock

package.json

@@ -70,6 +70,7 @@
     "yarn": "^1.21.1"
   },
   "resolutions": {
+    "**/@babel/runtime": "^7.16.3",
     "**/@types/node": "16.10.2",
     "**/chokidar": "^3.4.3",
     "**/deepmerge": "^4.2.2",
@@ -468,21 +469,22 @@
     "@microsoft/api-extractor": "7.18.19",
     "@octokit/rest": "^16.35.0",
     "@percy/agent": "^0.28.6",
-    "@storybook/addon-a11y": "^6.1.20",
-    "@storybook/addon-actions": "^6.1.20",
-    "@storybook/addon-docs": "^6.1.20",
-    "@storybook/addon-essentials": "^6.1.20",
-    "@storybook/addon-knobs": "^6.1.20",
-    "@storybook/addon-storyshots": "^6.1.20",
-    "@storybook/addons": "^6.1.20",
-    "@storybook/api": "^6.1.20",
-    "@storybook/components": "^6.1.20",
-    "@storybook/core": "^6.1.20",
-    "@storybook/core-events": "^6.1.20",
-    "@storybook/node-logger": "^6.1.20",
-    "@storybook/react": "^6.1.20",
-    "@storybook/testing-react": "^0.0.17",
-    "@storybook/theming": "^6.1.20",
+    "@storybook/addon-a11y": "^6.3.12",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-storyshots": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/api": "^6.3.12",
+    "@storybook/components": "^6.3.12",
+    "@storybook/core": "^6.3.12",
+    "@storybook/core-common": "^6.3.12",
+    "@storybook/core-events": "^6.3.12",
+    "@storybook/node-logger": "^6.3.12",
+    "@storybook/react": "^6.3.12",
+    "@storybook/testing-react": "^0.0.22",
+    "@storybook/theming": "^6.3.12",
     "@testing-library/dom": "^7.30.3",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
@@ -517,6 +519,7 @@
     "@types/elasticsearch": "^5.0.33",
     "@types/enzyme": "^3.10.8",
     "@types/eslint": "^7.28.0",
+    "@types/express": "^4.17.13",
     "@types/extract-zip": "^1.6.2",
     "@types/faker": "^5.1.5",
     "@types/fancy-log": "^1.3.1",
@@ -637,6 +640,7 @@
     "@types/write-pkg": "^3.1.0",
     "@types/xml-crypto": "^1.4.2",
     "@types/xml2js": "^0.4.5",
+    "@types/yargs": "^15.0.0",
     "@types/yauzl": "^2.9.1",
     "@types/zen-observable": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",

packages/kbn-storybook/BUILD.bazel

@@ -36,6 +36,7 @@ RUNTIME_DEPS = [
   "@npm//@storybook/api",
   "@npm//@storybook/components",
   "@npm//@storybook/core",
+  "@npm//@storybook/core-common",
   "@npm//@storybook/node-logger",
   "@npm//@storybook/react",
   "@npm//@storybook/theming",
@@ -53,9 +54,11 @@ TYPES_DEPS = [
   "@npm//@storybook/api",
   "@npm//@storybook/components",
   "@npm//@storybook/core",
+  "@npm//@storybook/core-common",
   "@npm//@storybook/node-logger",
   "@npm//@storybook/react",
   "@npm//@storybook/theming",
+  "@npm//@types/express", # necessary for storybook which is missing the types
   "@npm//@types/loader-utils",
   "@npm//@types/node",
   "@npm//@types/react",

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

@@ -7,7 +7,7 @@
  */
 
 import * as path from 'path';
-import { StorybookConfig } from '@storybook/core/types';
+import { StorybookConfig } from '@storybook/core-common';
 import { Configuration } from 'webpack';
 import webpackMerge from 'webpack-merge';
 import { REPO_ROOT } from './constants';
@@ -20,6 +20,9 @@ export const defaultConfig: StorybookConfig = {
   typescript: {
     reactDocgen: false,
   },
+  features: {
+    postcss: false,
+  },
   webpackFinal: (config, options) => {
     if (process.env.CI) {
       config.parallelism = 4;

packages/kbn-storybook/src/lib/theme_switcher.tsx

@@ -9,7 +9,10 @@
 import React from 'react';
 import { Icons, IconButton, TooltipLinkList, WithTooltip } from '@storybook/components';
 import { useGlobals } from '@storybook/api';
-import { Link } from '@storybook/components/dist/tooltip/TooltipLinkList';
+
+type PropsOf<T extends React.FC<any>> = T extends React.FC<infer P> ? P : never;
+type ArrayItem<T extends any[]> = T extends Array<infer I> ? I : never;
+type Link = ArrayItem<PropsOf<typeof TooltipLinkList>['links']>;
 
 const defaultTheme = 'v8.light';
 
@@ -22,7 +25,7 @@ export function ThemeSwitcher() {
   }
 
   function Menu({ onHide }: { onHide: () => void }) {
-    const links: Link[] = [
+    const links = [
       {
         id: 'v8.light',
         title: 'Amsterdam: Light',
@@ -33,16 +36,18 @@ export function ThemeSwitcher() {
       },
       { id: 'v7.light', title: 'Light' },
       { id: 'v7.dark', title: 'Dark' },
-    ].map((link) => ({
-      ...link,
-      onClick: (_event, item) => {
-        if (item.id !== selectedTheme) {
-          updateGlobals({ euiTheme: item.id });
-        }
-        onHide();
-      },
-      active: selectedTheme === link.id,
-    }));
+    ].map(
+      (link): Link => ({
+        ...link,
+        onClick: (_event, item) => {
+          if (item.id !== selectedTheme) {
+            updateGlobals({ euiTheme: item.id });
+          }
+          onHide();
+        },
+        active: selectedTheme === link.id,
+      })
+    );
 
     return <TooltipLinkList links={links} />;
   }

packages/kbn-storybook/src/typings.ts

@@ -16,3 +16,27 @@ declare module '@storybook/react/standalone';
 // See https://github.com/storybookjs/storybook/issues/11684
 declare module 'react-syntax-highlighter/dist/cjs/create-element';
 declare module 'react-syntax-highlighter/dist/cjs/prism-light';
+
+// Storybook uses this module and its types are defined in the source but not in the type output
+declare module 'file-system-cache' {
+  interface Options {
+    basePath?: string;
+    ns?: string | string[];
+    extension?: string;
+  }
+
+  class FileSystemCache {
+    constructor(options: Options);
+    path(key: string): string;
+    fileExists(key: string): Promise<boolean>;
+    ensureBasePath(): Promise<void>;
+    get(key: string, defaultValue?: any): Promise<any | typeof defaultValue>;
+    getSync(key: string, defaultValue?: any): any | typeof defaultValue;
+    set(key: string, value: any): Promise<{ path: string }>;
+    setSync(key: string, value: any): this;
+    remove(key: string): Promise<void>;
+    clear(): Promise<void>;
+    save(): Promise<{ paths: string[] }>;
+    load(): Promise<{ files: Array<{ path: string; value: any }> }>;
+  }
+}

packages/kbn-storybook/templates/index.ejs

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- This is a copy of the
-     [Storybook IFrame template](https://github.com/storybookjs/storybook/blob/7874ca357c6cb54f3f258dc61f6becae6783fba6/lib/core/src/server/templates/index.ejs).
+     [Storybook IFrame template](https://github.com/storybookjs/storybook/blob/337fdcd0fe7436b46bcca65145ff6db2affd780f/lib/core-common/src/templates/index.ejs).
      We use this one instead because we want to add the @kbn/ui-shared-deps-* tags here.
   -->
 <html lang="en">
@@ -37,23 +37,25 @@
     </style>
   </head>
   <body>
-    <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>
+    <% if (typeof bodyHtmlSnippet !== 'undefined') { %>
+      <%= bodyHtmlSnippet %>
+    <% } %>
 
     <div id="root"></div>
     <div id="docs-root"></div>
 
     <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
-    <script>
-      <% for (var varName in globals) { %>
-          <% if (globals[varName] != undefined) { %>
-            window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
-          <% } %>
-      <% } %>
-    </script>
-    <% } %> <% dlls.forEach(file => { %>
-    <script src="<%= file %>"></script>
-    <% }); %> <% files.js.forEach(file => { %>
-    <script src="<%= file %>"></script>
+      <script>
+        <% for (var varName in globals) { %>
+            <% if (globals[varName] != undefined) { %>
+              window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
+            <% } %>
+        <% } %>
+      </script>
+    <% } %>
+
+    <% files.js.forEach(file => { %>
+      <script src="<%= file %>"></script>
     <% }); %>
   </body>
 </html>

packages/kbn-ui-shared-deps-npm/webpack.config.js

@@ -56,6 +56,7 @@ module.exports = (_, argv) => {
         '@babel/runtime/helpers/interopRequireDefault',
         '@babel/runtime/helpers/interopRequireWildcard',
         '@babel/runtime/helpers/objectSpread2',
+        '@babel/runtime/helpers/objectWithoutProperties',
         '@babel/runtime/helpers/objectWithoutPropertiesLoose',
         '@babel/runtime/helpers/slicedToArray',
         '@babel/runtime/helpers/toArray',

src/plugins/presentation_util/public/__stories__/wait_for.tsx

@@ -9,13 +9,12 @@
 import React, { useState, useEffect, useRef, ReactElement } from 'react';
 import { act } from 'react-test-renderer';
 import { Story } from '@storybook/react';
-import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
 import { EuiLoadingSpinner } from '@elastic/eui';
 
 export const waitFor =
   (waitTarget: Promise<any>, spinner: ReactElement | null = <EuiLoadingSpinner />) =>
   (CurrentStory: Story) => {
-    const [storyComponent, setStory] = useState<StoryFnReactReturnType>();
+    const [storyComponent, setStory] = useState<ReactElement>();
     const componentIsMounted = useRef(false);
 
     useEffect(() => {

typings/index.d.ts

@@ -38,3 +38,27 @@ declare module 'react-syntax-highlighter/dist/cjs/prism-light';
 declare module 'monaco-editor/esm/vs/basic-languages/markdown/markdown';
 declare module 'monaco-editor/esm/vs/basic-languages/css/css';
 declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml';
+
+// Storybook uses this module and its types are defined in the source but not in the type output
+declare module 'file-system-cache' {
+  interface Options {
+    basePath?: string;
+    ns?: string | string[];
+    extension?: string;
+  }
+
+  class FileSystemCache {
+    constructor(options: Options);
+    path(key: string): string;
+    fileExists(key: string): Promise<boolean>;
+    ensureBasePath(): Promise<void>;
+    get(key: string, defaultValue?: any): Promise<any | typeof defaultValue>;
+    getSync(key: string, defaultValue?: any): any | typeof defaultValue;
+    set(key: string, value: any): Promise<{ path: string }>;
+    setSync(key: string, value: any): this;
+    remove(key: string): Promise<void>;
+    clear(): Promise<void>;
+    save(): Promise<{ paths: string[] }>;
+    load(): Promise<{ files: Array<{ path: string; value: any }> }>;
+  }
+}

x-pack/plugins/fleet/storybook/preview.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { addDecorator } from '@storybook/react';
-import { Title, Subtitle, Description, Primary, Stories } from '@storybook/addon-docs/blocks';
+import { Title, Subtitle, Description, Primary, Stories } from '@storybook/addon-docs';
 
 import { decorator } from './decorator';