Update Storybook updates to v6.5.10 (#49793)

* Update Storybook updates to v6.5.6

* refactor(storybook): fix up dependencies and webpack configs

* chore(storybook): bump to 6.5.7

* chore(yarn): refresh lock file

* chore(storybook): bump storybook to 6.5.10

* refactor(storybook): update configuration to use babel, tidy webpack config, clean dependencies

* chore(storybook): bump to 6.5.12

* chore(storybook): bump storybook-dark-mode to 1.1.2

* chore(storybook): workaround resolving storybook-docs addon for yarn pnp

* refactor(storybook): remove preview-head.html in favour of global theme styles

* chore(storybook): patch storybook-dark-mode to work with SB 6.5.x and yarn PnP

* feat(storybook): move to using MDXv2

* fix(icon): make sure icon story doesn't disappear offscreen and is scrollable

* chore(grafana-ui): clean up dependencies related to storybook

* feat(storybook): enable webpack5 filesystem cache

* feat(storybook): replace babel with esbuild

* fix(emotionperftest): fix jsx pragma for esbuild

* fix(emotionperftest): force jsxRuntime to classic so esbuild and babel compile without error

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

.gitignore

@@ -125,6 +125,7 @@ pkg/cmd/grafana-server/__debug_bin
 !.yarn/patches/*.patch
 
 # Ignoring frontend packages specifics
+/packages/grafana-ui/.yarn/.cache
 /packages/**/dist
 /packages/**/compiled
 /packages/**/.rpt2_cache

.yarnrc.yml

@@ -3,41 +3,39 @@ enableTelemetry: false
 nodeLinker: pnp
 
 packageExtensions:
-  "@mdx-js/loader@1.6.22":
+  '@storybook/addon-docs@6.5.12':
     peerDependencies:
-      react: 17.0.1
+      '@babel/core': ^7.0.0
-  "@npmcli/run-script@4.1.3":
+      '@storybook/manager-webpack5': 6.5.12
+      'webpack': 5.74.0
+  '@storybook/addon-essentials@6.5.12':
+    peerDependencies:
+      '@storybook/components': 6.5.12
+      '@storybook/core-events': 6.5.12
+      '@storybook/manager-webpack5': 6.5.12
+      '@storybook/theming': 6.5.12
+  '@storybook/core-server@6.5.12':
+    peerDependencies:
+      '@babel/core': ^7.0.0
+  '@storybook/core@6.5.12':
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@storybook/manager-webpack5': 6.5.12
+  '@storybook/csf-tools@6.5.12':
+    peerDependencies:
+      '@babel/core': ^7.0.0
+  '@storybook/mdx2-csf@0.0.3':
     dependencies:
-      which: ^2.0.2
+      '@babel/types': ^7.14.8
-  "@storybook/addon-docs@6.4.21":
+  '@storybook/react@6.5.12':
     peerDependencies:
-      "@storybook/manager-webpack5": 6.4.21
+      '@storybook/manager-webpack5': 6.5.12
-  "@storybook/addon-essentials@6.4.21":
+  '@storybook/addon-knobs@6.4.0':
-    peerDependencies:
+    dependencies:
-      "@storybook/components": 6.4.21
+      '@storybook/client-api': '*'
-      "@storybook/core-events": 6.4.21
-      "@storybook/manager-webpack5": 6.4.21
-      "@storybook/theming": 6.4.21
-  "@storybook/core-server@6.4.21":
-    peerDependencies:
-      "@babel/core": ^7.0.0
-  "@storybook/core@6.4.21":
-    peerDependencies:
-      "@babel/core": ^7.0.0
-      "@storybook/manager-webpack5": 6.4.21
-  "@storybook/csf-tools@6.4.21":
-    peerDependencies:
-      "@babel/core": ^7.0.0
-  "@storybook/react@6.4.21":
-    peerDependencies:
-      "@storybook/manager-webpack5": 6.4.21
   doctrine@3.0.0:
     dependencies:
       assert: 2.0.0
-  moveable@0.30.0:
-    dependencies:
-      "@daybrush/utils": 1.7.0
-      framework-utils: ^1.1.0
   rc-time-picker@3.7.3:
     peerDependencies:
       react: 17.0.1
@@ -49,33 +47,22 @@ packageExtensions:
   react-compat-css-styled@1.0.8:
     dependencies:
       react-simple-compat: 1.2.2
-  react-compat-moveable@0.18.0:
-    dependencies:
-      "@egjs/agent": ^2.2.1
-      "@egjs/children-differ": ^1.0.1
-      "@scena/matrix": 1.1.1
-      css-to-mat: ^1.0.3
-      gesto: ^1.9.0
-      overlap-area: ^1.0.0
-      react-simple-compat: 1.2.2
-    peerDependencies:
-      framework-utils: ^1.1.0
   react-docgen-typescript-loader@3.7.2:
     peerDependencies:
       webpack: 4.41.5
   react-icons@2.2.7:
     peerDependencies:
-      prop-types: "*"
+      prop-types: '*'
   react-resizable@3.0.4:
     peerDependencies:
       react-dom: 17.0.1
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
+    spec: '@yarnpkg/plugin-typescript'
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+    spec: '@yarnpkg/plugin-interactive-tools'
   - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
-    spec: "https://mskelton.dev/yarn-outdated/v2"
+    spec: 'https://mskelton.dev/yarn-outdated/v2'
 
 yarnPath: .yarn/releases/yarn-3.2.3.cjs

package.json

@@ -411,9 +411,11 @@
     "@rushstack/node-core-library": "3.53.0",
     "@rushstack/rig-package": "0.3.13",
     "@rushstack/ts-command-line": "4.12.1",
-    "@storybook/react/webpack": "5.74.0",
+    "@storybook/builder-webpack5/webpack": "5.74.0",
+    "@storybook/manager-webpack5/webpack": "5.74.0",
     "node-fetch": "2.6.7",
-    "slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch"
+    "slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch",
+    "storybook-dark-mode@1.1.2": "patch:storybook-dark-mode@npm%3A1.1.2#./.yarn/patches/storybook-dark-mode-npm-1.1.2-ecc4605688.patch"
   },
   "workspaces": {
     "packages": [

packages/grafana-ui/.storybook/main.ts

@@ -1,40 +1,76 @@
 const path = require('path');
-const { ProvidePlugin } = require('webpack');
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
 
-const stories = ['../src/**/*.story.{js,jsx,ts,tsx,mdx}'];
+const stories = ['../src/**/*.story.@(tsx|mdx)'];
 
 if (process.env.NODE_ENV !== 'production') {
-  stories.push('../src/**/*.story.internal.{js,jsx,ts,tsx,mdx}');
+  stories.push('../src/**/*.story.internal.@(tsx|mdx)');
 }
 
-module.exports = {
+const mainConfig = {
-  stories: stories,
+  stories,
   addons: [
+    {
+      // work around docs 6.5.x not resolving correctly with yarn PnP
+      name: path.dirname(require.resolve('@storybook/addon-docs/package.json')),
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+      },
+    },
     {
       name: '@storybook/addon-essentials',
       options: {
         backgrounds: false,
+        // work around docs 6.5.x not resolving correctly with yarn PnP
+        docs: false,
       },
     },
     '@storybook/addon-a11y',
     '@storybook/addon-knobs',
+    {
+      name: '@storybook/preset-scss',
+      options: {
+        styleLoaderOptions: {
+          // this is required for theme switching .use() and .unuse()
+          injectType: 'lazyStyleTag',
+        },
+        cssLoaderOptions: {
+          url: false,
+          importLoaders: 2,
+        },
+      },
+    },
     '@storybook/addon-storysource',
     'storybook-dark-mode',
+    {
+      // replace babel-loader in manager and preview with esbuild-loader
+      name: 'storybook-addon-turbo-build',
+      options: {
+        optimizationLevel: 3,
+      },
+    },
   ],
+  core: {
+    builder: {
+      name: 'webpack5',
+      options: {
+        fsCache: true,
+      },
+    },
+  },
+  features: {
+    previewMdx2: true,
+  },
+  framework: '@storybook/react',
+  logLevel: 'debug',
+  reactOptions: {
+    fastRefresh: true,
+  },
   staticDirs: [
     { from: '../../../public/fonts', to: '/fonts' },
     { from: '../../../public/img', to: '/public/img' },
     { from: '../../../public/lib', to: '/public/lib' },
   ],
-  reactOptions: {
-    fastRefresh: true,
-  },
-  core: {
-    builder: 'webpack5',
-  },
   typescript: {
     check: true,
     reactDocgen: 'react-docgen-typescript',
@@ -46,126 +82,24 @@ module.exports = {
       savePropValueAsString: true,
     },
   },
-  webpackFinal: async (config: any, { configType }: any) => {
+  webpackFinal: async (config: any) => {
-    const isProductionBuild = configType === 'PRODUCTION';
+    // expose jquery as a global so jquery plugins don't break at runtime.
-
+    config.module.rules.push({
-    // remove svg from default storybook webpack 5 config so we can use `raw-loader`
+      test: require.resolve('jquery'),
-    config.module.rules = config.module.rules.map((rule: any) => {
+      loader: 'expose-loader',
-      if (
+      options: {
-        String(rule.test) ===
+        exposes: ['$', 'jQuery'],
-        String(/\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/)
+      },
-      ) {
-        return {
-          ...rule,
-          test: /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
-        };
-      }
-
-      return rule;
     });
 
-    config.module.rules = [
+    // use the raw-loader for SVGS for compatibility with grafana/ui Icon component.
-      ...(config.module.rules || []),
+    config.module.rules.push({
-      {
+      test: /(unicons|mono|custom)[\\/].*\.svg$/,
-        test: /\.tsx?$/,
+      type: 'asset/source',
-        use: [
+    });
-          {
-            loader: require.resolve('ts-loader'),
-            options: {
-              transpileOnly: true,
-              configFile: path.resolve(__dirname, 'tsconfig.json'),
-            },
-          },
-        ],
-        exclude: /node_modules/,
-        include: [path.resolve(__dirname, '../../../public/'), path.resolve(__dirname, '../../../packages/')],
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          {
-            loader: 'style-loader',
-            options: { injectType: 'lazyStyleTag' },
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              url: false,
-              importLoaders: 2,
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: false,
-              postcssOptions: {
-                config: path.resolve(__dirname + '../../../../scripts/webpack/postcss.config.js'),
-              },
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: false,
-            },
-          },
-        ],
-      },
-      // for pre-caching SVGs as part of the JS bundles
-      {
-        test: /\.svg$/,
-        use: 'raw-loader',
-      },
-      {
-        test: require.resolve('jquery'),
-        loader: 'expose-loader',
-        options: {
-          exposes: ['$', 'jQuery'],
-        },
-      },
-    ];
-
-    if (isProductionBuild) {
-      config.optimization = {
-        nodeEnv: 'production',
-        moduleIds: 'deterministic',
-        runtimeChunk: 'single',
-        splitChunks: {
-          chunks: 'all',
-          minChunks: 1,
-          cacheGroups: {
-            vendors: {
-              test: /[\\/]node_modules[\\/].*[jt]sx?$/,
-              chunks: 'initial',
-              priority: -10,
-              reuseExistingChunk: true,
-              enforce: true,
-            },
-            default: {
-              priority: -20,
-              chunks: 'all',
-              test: /.*[jt]sx?$/,
-              reuseExistingChunk: true,
-            },
-          },
-        },
-        minimize: isProductionBuild,
-        minimizer: isProductionBuild
-          ? [new TerserPlugin({ parallel: false, exclude: /monaco/ }), new CssMinimizerPlugin()]
-          : [],
-      };
-    }
-
-    config.resolve.alias['@grafana/ui'] = path.resolve(__dirname, '..');
-
-    // Silence "export not found" webpack warnings with transpileOnly
-    // https://github.com/TypeStrong/ts-loader#transpileonly
-    config.plugins.push(
-      new FilterWarningsPlugin({
-        exclude: /export .* was not found in/,
-      })
-    );
 
     return config;
   },
 };
+
+module.exports = mainConfig;

packages/grafana-ui/.storybook/manager.ts

@@ -0,0 +1,9 @@
+import { addons } from '@storybook/addons';
+import { GrafanaDark } from './storybookTheme';
+
+addons.setConfig({
+  sidebar: {
+    showRoots: false,
+  },
+  theme: GrafanaDark,
+});

packages/grafana-ui/.storybook/preview-head.html

@@ -1,6 +0,0 @@
-<!-- Make sure iframe dom elements fill all available space for background consistency -->
-<style>
-  #root {
-    height: 100%;
-  }
-</style>

packages/grafana-ui/.storybook/preview.ts

@@ -9,13 +9,12 @@ import '../../../public/vendor/flot/jquery.flot.crosshair';
 import '../../../public/vendor/flot/jquery.flot.dashes';
 import '../../../public/vendor/flot/jquery.flot.gauge';
 import { withTheme } from '../src/utils/storybook/withTheme';
+import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
 // @ts-ignore
 import lightTheme from '../../../public/sass/grafana.light.scss';
 // @ts-ignore
 import darkTheme from '../../../public/sass/grafana.dark.scss';
 import { GrafanaLight, GrafanaDark } from './storybookTheme';
-import addons from '@storybook/addons';
-import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
 
 const handleThemeChange = (theme: any) => {
   if (theme !== 'light') {
@@ -27,23 +26,21 @@ const handleThemeChange = (theme: any) => {
   }
 };
 
-addons.setConfig({
-  showRoots: false,
-  theme: GrafanaDark,
-});
-
 export const decorators = [withTheme(handleThemeChange)];
 
 export const parameters = {
-  docs: {
+  actions: { argTypesRegex: '^on[A-Z].*' },
-    container: ThemedDocsContainer,
-  },
   darkMode: {
     dark: GrafanaDark,
     light: GrafanaLight,
   },
+  docs: {
+    container: ThemedDocsContainer,
+  },
+  knobs: {
+    disable: true,
+  },
   layout: 'fullscreen',
-  actions: { argTypesRegex: '^on[A-Z].*' },
   options: {
     showPanel: true,
     panelPosition: 'right',
@@ -56,7 +53,4 @@ export const parameters = {
       order: ['Docs Overview', ['Intro']],
     },
   },
-  knobs: {
-    disable: true,
-  },
 };

packages/grafana-ui/.storybook/tsconfig.json

@@ -4,7 +4,6 @@
     "noUnusedLocals": false,
     "outDir": "compiled"
   },
-  "exclude": ["../dist/**/*"],
   "extends": "../tsconfig.json",
-  "include": ["../src/**/*.ts", "../src/**/*.tsx", "../../../public/app/types/svg.d.ts"]
+  "include": ["../src/**/*.ts*", "../../../public/app/types/svg.d.ts"]
 }

packages/grafana-ui/package.json

@@ -110,21 +110,23 @@
     "@grafana/tsconfig": "^1.2.0-rc1",
     "@mdx-js/react": "1.6.22",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "@storybook/addon-a11y": "6.4.21",
+    "@storybook/addon-a11y": "6.5.12",
-    "@storybook/addon-actions": "6.4.21",
+    "@storybook/addon-actions": "6.5.12",
-    "@storybook/addon-docs": "6.4.21",
+    "@storybook/addon-docs": "6.5.12",
-    "@storybook/addon-essentials": "6.4.21",
+    "@storybook/addon-essentials": "6.5.12",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storysource": "6.4.21",
+    "@storybook/addon-storysource": "6.5.12",
-    "@storybook/addons": "6.4.21",
+    "@storybook/addons": "6.5.12",
-    "@storybook/api": "6.4.21",
+    "@storybook/api": "6.5.12",
-    "@storybook/builder-webpack5": "6.4.21",
+    "@storybook/builder-webpack5": "6.5.12",
-    "@storybook/client-api": "6.4.21",
+    "@storybook/client-api": "6.5.12",
-    "@storybook/components": "6.4.21",
+    "@storybook/components": "6.5.12",
-    "@storybook/core-events": "6.4.21",
+    "@storybook/core-events": "6.5.12",
-    "@storybook/manager-webpack5": "6.4.21",
+    "@storybook/manager-webpack5": "6.5.12",
-    "@storybook/react": "6.4.21",
+    "@storybook/mdx2-csf": "0.0.3",
-    "@storybook/theming": "6.4.21",
+    "@storybook/preset-scss": "1.0.3",
+    "@storybook/react": "6.5.12",
+    "@storybook/theming": "6.5.12",
     "@swc/helpers": "0.4.3",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.4",
@@ -163,19 +165,14 @@
     "@types/tinycolor2": "1.4.3",
     "@types/uuid": "8.3.4",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
-    "babel-loader": "8.2.5",
     "common-tags": "1.8.2",
     "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "4.1.0",
     "csstype": "3.1.0",
     "enzyme": "3.11.0",
     "esbuild": "0.15.7",
     "expose-loader": "4.0.0",
     "mock-raf": "1.0.1",
-    "postcss": "8.4.14",
-    "postcss-loader": "7.0.1",
     "process": "^0.11.10",
-    "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
@@ -187,13 +184,11 @@
     "rollup-plugin-node-externals": "^4.1.0",
     "rollup-plugin-svg-import": "^1.6.0",
     "sass-loader": "13.0.2",
-    "storybook-dark-mode": "1.1.0",
+    "storybook-addon-turbo-build": "1.1.0",
+    "storybook-dark-mode": "1.1.2",
     "style-loader": "3.3.1",
-    "terser-webpack-plugin": "5.3.3",
-    "ts-loader": "8.4.0",
     "typescript": "4.8.2",
-    "webpack": "5.74.0",
+    "webpack": "5.74.0"
-    "webpack-filter-warnings-plugin": "1.2.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",

packages/grafana-ui/src/components/Icon/Icon.story.tsx

@@ -72,6 +72,8 @@ export const IconsOverview = () => {
       className={css`
         display: flex;
         flex-direction: column;
+        height: 100%;
+        overflow: auto;
         width: 100%;
       `}
     >

packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx

@@ -1,6 +1,7 @@
-/** @jsxImportSource @emotion/react */
+/** @jsxRuntime classic */
-
+/** @jsx jsx */
 import { css, cx } from '@emotion/css';
+import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { Profiler, ProfilerOnRenderCallback, useState, FC } from 'react';
 

packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx

@@ -1,6 +1,6 @@
 // This is a temporary workaround to allow theme switching storybook docs
 // see https://github.com/storybookjs/storybook/issues/10523 for further details
-import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { DocsContainer } from '@storybook/addon-docs';
 import React from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 

packages/grafana-ui/src/utils/storybook/withTheme.tsx

@@ -20,6 +20,7 @@ const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassTheme
     width: 100%;
     padding: 20px;
     display: flex;
+    height: 100%;
     min-height: 100%;
     background: ${theme.colors.background.primary};
   }`;