Migrate storybook to 6.2.9 (microsoft#18693)

#### Pull request checklist

- [x] Addresses an existing issue: Fixes microsoft#18142
- [x] Include a change request file using `$ yarn change`

#### Description of changes

Author: TristanWatanabe

.storybook/main.js

@@ -43,6 +43,10 @@ module.exports = /** @type {Pick<StorybookConfig,'addons' |'stories' |'webpackFi
 
     return config;
   },
+
+  core: {
+    builder: 'webpack5',
+  },
 });
 
 /**
@@ -65,7 +69,7 @@ function overrideDefaultBabelLoader(rules) {
   }
 
   const loaderIdx = rule.use.findIndex(loaderConfig => {
-    return /** @type {LoaderObjectDef} */ (loaderConfig).loader === 'babel-loader';
+    return /** @type {LoaderObjectDef} */ (loaderConfig).loader.includes('babel-loader');
   });
 
   const loader = /** @type {LoaderObjectDef}*/ (rule.use[loaderIdx]);

apps/vr-tests/.eslintrc.json

@@ -4,6 +4,7 @@
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/jsx-no-bind": "off",
-    "deprecation/deprecation": "off"
+    "deprecation/deprecation": "off",
+    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
   }
 }

apps/vr-tests/.storybook/preview.js

@@ -43,21 +43,7 @@ setAddon({
   },
 });
 
-/**
- * @type {import('@storybook/react').Meta['decorators']}
- */
-export const decorators = [removeCanvasInlineStyles];
-
-/**
- * Temporary solution to remove inline styles injected by new default SB layout (https://storybook.js.org/docs/react/configure/story-layout)
- * TODO - remove this once we migrate to SB 6.1
- * @see https://github.com/storybookjs/storybook/issues/12041#issuecomment-717177177
- * @param {Parameters<import('@storybook/react').Meta['decorators'][number]>[0]} Story
- */
-function removeCanvasInlineStyles(Story) {
-  document.body.removeAttribute('style');
-  return createElement(Story);
-}
+export const parameters = { layout: 'none' };
 
 // For static storybook per https://github.com/screener-io/screener-storybook#testing-with-static-storybook-app
 if (typeof window === 'object') {

apps/vr-tests/package.json

@@ -36,9 +36,6 @@
     "@fluentui/react-theme": "^9.0.0-alpha.17",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
-    "@storybook/addons": "6.0.28",
-    "@storybook/channels": "6.0.28",
-    "@storybook/react": "6.0.28",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
     "csstype": "^2.6.7",

apps/vr-tests/src/utilities/FabricDecorator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DecoratorFunction } from '@storybook/addons';
-import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types';
 
 export const FabricDecorator: DecoratorFunction<StoryFnReactReturnType> = story => (
   <div style={{ display: 'flex' }}>

apps/vr-tests/src/utilities/FluentProviderDecorator.tsx

@@ -1,7 +1,7 @@
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 import { DecoratorFunction } from '@storybook/addons';
-import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types';
 import * as React from 'react';
 
 export const FluentProviderDecorator: DecoratorFunction<StoryFnReactReturnType> = story => (

apps/vr-tests/src/utilities/index.ts

@@ -8,7 +8,7 @@ export interface IStoryConfig {
   rtl?: boolean;
 }
 
-declare module '@storybook/addons/dist/types' {
+declare module '@storybook/addons/dist/ts3.9/types' {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   interface StoryApi<StoryFnReturnType = unknown> {
     /** adds a story, but via VR Tests' addon which auto adds variants like RTL */

change/@fluentui-react-examples-5f8fef9b-5486-4d10-8ed5-527cbd34ff54.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: replace class with className in mdx file",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-b4500fa5-f7e2-4745-833e-e7baa00c779f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "react-popver: fix Default story issue caused by storybook migration",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -52,7 +52,7 @@
     "rename-package": "node -r ./scripts/ts-node-register ./scripts/rename-package.ts",
     "run:published": "node ./scripts/monorepo/runPublished.js",
     "runto:lerna": "node ./scripts/monorepo/runTo.js",
-    "satisfied": "satisfied --skip-invalid --ignore \"sass|@testing-library|vue\"",
+    "satisfied": "satisfied --skip-invalid --ignore \"angular|sass|svelte|@testing-library|vue\"",
     "scrub": "node ./scripts/scrub.js",
     "start": "node scripts/start.js",
     "start:legacy": "yarn workspace @fluentui/public-docsite-resources start",
@@ -84,16 +84,16 @@
     "@nrwl/node": "12.1.0",
     "@nrwl/tao": "12.1.0",
     "@nrwl/workspace": "12.1.0",
-    "@storybook/addon-a11y": "6.0.28",
-    "@storybook/addon-actions": "6.0.28",
-    "@storybook/addon-docs": "6.0.28",
-    "@storybook/addon-essentials": "6.0.28",
-    "@storybook/addon-info": "6.0.0-alpha.2",
-    "@storybook/addon-knobs": "6.0.28",
-    "@storybook/addons": "6.0.28",
-    "@storybook/channels": "6.0.28",
-    "@storybook/core": "6.0.28",
-    "@storybook/react": "6.0.28",
+    "@storybook/addon-a11y": "6.2.9",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-docs": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-knobs": "6.2.9",
+    "@storybook/addons": "6.2.9",
+    "@storybook/channels": "6.2.9",
+    "@storybook/core": "6.2.9",
+    "@storybook/react": "6.2.9",
+    "@storybook/builder-webpack5": "6.2.9",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "10.4.9",
     "@testing-library/react-hooks": "5.0.3",

packages/react-examples/.storybook/main.js

@@ -25,6 +25,21 @@ export default {
       loader: path.resolve(__dirname, 'preview-loader.js'),
     });
 
-    return customConfig;
+    return {
+      ...customConfig,
+      resolve: {
+        ...customConfig.resolve,
+        // @ts-ignore
+        fallback: {
+          crypto: require.resolve('crypto-browserify'),
+          stream: require.resolve('stream-browserify'),
+          vm: require.resolve('vm-browserify'),
+        },
+      },
+    };
+  },
+
+  core: {
+    builder: 'webpack5',
   },
 };

packages/react-examples/.storybook/preview.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { configure, addParameters, addDecorator } from '@storybook/react';
 import 'cypress-storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { withPerformance } from 'storybook-addon-performance';
 import { withFluentProvider, withKeytipLayer, withStrictMode } from '@fluentui/storybook';
 
@@ -21,7 +20,6 @@ const storyOrder = [
   'Migrations/Flex/Overview',
 ];
 
-addDecorator(withInfo);
 addDecorator(withPerformance);
 addCustomDecorators();
 

packages/react-examples/jest.config.js

@@ -5,6 +5,10 @@ const config = createConfig({
   setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
 
   snapshotSerializers: [resolveMergeStylesSerializer()],
+
+  moduleNameMapper: {
+    '@storybook/addon-docs/blocks$': '@storybook/addon-docs/dist/cjs/blocks',
+  },
 });
 
 module.exports = config;

packages/react-examples/src/react-components/FluentUIComponents/Introduction.stories.mdx

@@ -4,16 +4,16 @@ import './intro.css';
 
 <Meta title="Concepts/Introduction" />
 
-<h1 class="fluent">Fluent UI React vNext</h1>
+<h1 className="fluent">Fluent UI React vNext</h1>
 
 <img src="./fluentui-banner2.jpg" alt="Hello3" />
 
 > **⚠ NOT PRODUCTION READY COMPONENTS - API SURFACES MAY CHANGE WITHOUT NOTICE**
 
 ---
 
-<h2 class="fluent">Overview</h2>
-<div class="fluent-text">
+<h2 className="fluent">Overview</h2>
+<div className="fluent-text">
 
 Fluent UI vNext is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: `@fluentui/react` and `@fluentui/react-northstar`.
 
@@ -27,6 +27,6 @@ Each component is designed adhere to following attributes:
 
 </div>
 
-<h2 class="fluent">Questions?</h2>
+<h2 className="fluent">Questions?</h2>
 
 Reach out to the Fluent UI React team on [Github](https://github.com/microsoft/fluentui)

packages/react-popover/src/Popover.stories.tsx

@@ -31,10 +31,6 @@ export const Default = (props: PopoverProps) => (
 // @FIXME - remove manually specified argTypes once `react-components` package will use new storybook setup(DX)
 // https://github.com/microsoft/fluentui/issues/18514
 Default.argTypes = {
-  open: {
-    defaultValue: false,
-    control: 'boolean',
-  },
   openOnContext: {
     defaultValue: false,
     control: 'boolean',

packages/storybook/package.json

@@ -27,9 +27,9 @@
     "@fluentui/react-storybook": "^9.0.0-alpha.0",
     "@fluentui/react": "^8.23.7",
     "@fluentui/theme": "^2.1.4",
-    "@storybook/addon-knobs": "6.0.28",
-    "@storybook/addon-essentials": "6.0.28",
-    "@storybook/addons": "6.0.28",
+    "@storybook/addon-knobs": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addons": "6.2.9",
     "@fluentui/azure-themes": "^8.1.41",
     "@fluentui/theme-samples": "^8.1.41",
     "tslib": "^2.1.0"

scripts/storybook/webpack.config.js

@@ -59,11 +59,17 @@ module.exports = (/** @type {webpack.Configuration} */ config) => {
     },
     {
       test: /\.(gif|jpg|jpeg|png|svg)$/,
-      loader: 'file-loader?name=[name].[ext]',
+      loader: 'file-loader',
+      options: {
+        name: '[name].[ext]',
+      },
     },
     {
       test: /\.(woff|woff2|ttf)$/,
-      loader: 'file-loader?name=[name].[ext]',
+      loader: 'file-loader',
+      options: {
+        name: '[name].[ext]',
+      },
     },
     {
       test: /\.md$/,

scripts/tasks/storybook.ts

@@ -49,9 +49,10 @@ function getCommonOptions(): StorybookCommonOptions {
   console.log(`node heap limit = ${require('v8').getHeapStatistics().heap_size_limit / (1024 * 1024)} MB`);
 
   const localConfigDir = path.join(process.cwd(), '.storybook');
+  const localStaticDir = path.join(process.cwd(), 'static');
 
   return {
-    staticDir: [path.join(process.cwd(), 'static')],
+    staticDir: fs.existsSync(localStaticDir) ? [localStaticDir] : [],
     configDir: fs.existsSync(localConfigDir)
       ? localConfigDir
       : path.join(findGitRoot(), 'packages/react-examples/.storybook'),