chore: upgrade storybook to v8 (#35279)

Author: dmytrokirpa

.storybook/docs-root.css

@@ -36,13 +36,13 @@
 }
 
 #storybook-docs .sbdocs-img.featured-image {
-  max-width: 100%;
   margin: 48px 0;
   display: block;
+  border-radius: 24px;
 }
 
 #storybook-docs .sbdocs-img {
-  border-radius: 24px;
+  max-width: 100%;
 }
 
 #storybook-docs .sbdocs hr:not(.sbdocs-preview hr) {

.storybook/main.js

@@ -4,6 +4,8 @@ const fs = require('fs');
 const {
   loadWorkspaceAddon,
   registerTsPaths,
+  registerRules,
+  rules,
   processBabelLoaderOptions,
   getImportMappingsForExportToSandboxAddon,
 } = require('@fluentui/scripts-storybook');
@@ -15,17 +17,13 @@ const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-hea
 module.exports = /** @type {import('./types').StorybookConfig} */ ({
   stories: [],
   addons: [
-    // external custom addons
-
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-links',
-    'storybook-addon-performance',
     // https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
     '@storybook/addon-mdx-gfm',
 
     // internal monorepo custom addons
-
     /**  {@link file://./../packages/react-components/react-storybook-addon/package.json} */
     loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath }),
     /** {@link file://./../packages/react-components/react-storybook-addon-export-to-sandbox/package.json} */
@@ -43,6 +41,7 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({
     }),
   ],
   webpackFinal: config => {
+    registerRules({ config, rules: [rules.swcRule] });
     registerTsPaths({ config, configFile: tsConfigPath });
 
     if ((process.env.CI || process.env.TF_BUILD) && config.plugins) {
@@ -60,13 +59,9 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({
     options: {
       builder: {
         lazyCompilation: true,
-        useSWC: true,
       },
     },
   },
-  docs: {
-    autodocs: true,
-  },
   /**
    * Programmatically enhance previewHead as inheriting just static file `preview-head.html` doesn't work in monorepo
    * @see https://storybook.js.org/docs/addons/writing-presets#ui-configuration
@@ -76,28 +71,4 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
-
-  swc() {
-    return {
-      jsc: {
-        target: 'es2019',
-        parser: {
-          syntax: 'typescript',
-          tsx: true,
-          decorators: true,
-          dynamicImport: true,
-        },
-        transform: {
-          decoratorMetadata: true,
-          legacyDecorator: true,
-        },
-        keepClassNames: true,
-        externalHelpers: true,
-        loose: true,
-        minify: {
-          mangle: false,
-        },
-      },
-    };
-  },
 });

.storybook/types.d.ts

@@ -1,4 +1,7 @@
 import type { StorybookConfig as StorybookBaseConfig } from '@storybook/react-webpack5';
 
-export type StorybookConfig = StorybookBaseConfig &
-  Required<Pick<StorybookBaseConfig, 'stories' | 'addons' | 'webpackFinal'>>;
+export type StorybookConfig = Omit<StorybookBaseConfig, 'stories' | 'addons' | 'webpackFinal'> & {
+  stories: NonNullable<Exclude<StorybookBaseConfig['stories'], Function>>;
+  addons: NonNullable<Exclude<StorybookBaseConfig['addons'], Function>>;
+  webpackFinal: NonNullable<StorybookBaseConfig['webpackFinal']>;
+};

apps/chart-docsite/.storybook/preview.tsx

@@ -19,4 +19,6 @@ const preview: Preview & { parameters: import('@fluentui/react-storybook-addon')
   },
 };
 
+export const tags = ['autodocs'];
+
 export default preview;

apps/chart-docsite/.storybook/tsconfig.json

@@ -10,13 +10,5 @@
     "../../../node_modules/@nx/react/typings/image.d.ts"
   ],
   "exclude": ["../**/*.spec.ts", "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"],
-  "include": [
-    "../stories/**/*.stories.ts",
-    "../stories/**/*.stories.js",
-    "../stories/**/*.stories.jsx",
-    "../stories/**/*.stories.tsx",
-    "../stories/**/*.stories.mdx",
-    "*.ts",
-    "*.js"
-  ]
+  "include": ["*.tsx", "*.ts", "*.jsx", "*.js"]
 }

apps/public-docsite-v9/.storybook/docs-root-v9.css

@@ -2,7 +2,7 @@
 /* remove unnecessary padding now that theme switcher is not taking up space */
 #storybook-docs .sbdocs-wrapper {
   background: transparent !important;
-  padding-top: 0;
+  padding: 0 48px;
 }
 
 /* sb-show-main is missing during page transitions causing a page shift */
@@ -18,6 +18,7 @@
 .sb-preparing-story,
 .sb-preparing-docs,
 .sb-nopreview,
-.sb-errordisplay {
+.sb-errordisplay,
+.sidebar-container .search-field + div {
   display: none !important;
 }

apps/public-docsite-v9/.storybook/main.js

@@ -9,7 +9,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
   ...rootMain,
   stories: [
     ...rootMain.stories,
-    '../src/**/*.stories.mdx',
+    '../src/**/*.mdx',
     '../src/**/index.stories.@(ts|tsx)',
     ...getPackageStoriesGlob({ packageName: '@fluentui/react-components', callerPath: __dirname }),
     ...getPackageStoriesGlob({
@@ -37,7 +37,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     previewUrl: process.env.DEPLOY_PATH,
   },
   webpackFinal: (config, options) => {
-    const localConfig = /** @type config */ ({ ...rootMain.webpackFinal?.(config, options) });
+    const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) });
 
     // add your own webpack tweaks if needed
     registerTsPaths({ configFile: tsConfigAllPath, config: localConfig });

apps/public-docsite-v9/.storybook/manager-head.html

@@ -138,6 +138,10 @@
     color: #11100f !important;
   }
 
+  .sidebar-item a {
+    align-items: center !important;
+  }
+
   .sidebar-item[data-selected='true'] {
     font-weight: 600 !important;
     font-size: 14px !important;

apps/public-docsite-v9/.storybook/preview.js

@@ -2,7 +2,7 @@ import * as rootPreview from '../../../.storybook/preview';
 
 import './docs-root-v9.css';
 
-/** @type {NonNullable<import('@storybook/react').Story['decorators']>} */
+/** @type {NonNullable<import('@storybook/react').Decorator[]>} */
 export const decorators = rootPreview.decorators;
 
 /** @type {import("@fluentui/react-storybook-addon").FluentParameters & typeof rootPreview.parameters} */
@@ -56,3 +56,5 @@ export const parameters = {
     docs: true,
   },
 };
+
+export const tags = ['autodocs'];