chore: upgrade to storybook 8 (#546)

Author: dmytrokirpa

.storybook/copied-from-fluentui-core/components/FluentDocsPage.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import {
   DocsContext,
-  ArgsTable,
+  ArgTypes,
   Description,
   Stories,
   type DocsContextProps,
 } from '@storybook/addon-docs';
-import type { SBEnumType, PreparedStory, Renderer } from '@storybook/types';
+import type {
+  SBEnumType,
+  PreparedStory,
+  Renderer,
+} from '@storybook/core-common';
 import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import type { JSXElement } from '@fluentui/react-components';
 import { InfoFilled } from '@fluentui/react-icons';
@@ -90,7 +94,7 @@ const RenderArgsTable = ({
   const styles = useStyles();
   return hideArgsTable ? null : (
     <>
-      <ArgsTable of={primaryStory.component} />
+      <ArgTypes />
       {primaryStory.argTypes.as &&
         primaryStory.argTypes.as?.type?.name === 'enum' && (
           <div className={styles.nativeProps}>

.storybook/main.ts

@@ -2,13 +2,29 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: [],
-  addons: ['@storybook/addon-docs', '@nx/react/plugins/storybook'],
+
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-docs',
+    '@nx/react/plugins/storybook',
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          injectStoryParameters: true,
+        },
+      },
+    },
+    '@storybook/addon-webpack5-compiler-babel',
+  ],
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  docs: {
-    autodocs: true,
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 };
 

.storybook/preview.tsx

@@ -16,6 +16,7 @@ const preview: Preview = {
       </FluentProvider>
     ),
   ],
+
   parameters: {
     viewMode: 'docs',
     controls: {
@@ -27,6 +28,8 @@ const preview: Preview = {
       page: FluentDocsPage,
     },
   },
+
+  tags: ['autodocs'],
 };
 
 export default preview;

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

@@ -0,0 +1,6 @@
+<style>
+  /* Hide the "Create Story" button next to the search field. */
+  .sidebar-container .search-field + div {
+    display: none !important;
+  }
+</style>

apps/docsite/.storybook/preview.tsx

@@ -14,6 +14,7 @@ const preview: Preview = {
       },
     },
   },
+  tags: ['autodocs'],
 };
 
 export default preview;

package.json

@@ -34,7 +34,7 @@
     "@fluentui/react-migration-v8-v9": "^9.9.4",
     "@fluentui/react-shared-contexts": "^9.24.1",
     "@fluentui/scheme-utilities": "^8.3.58",
-    "@fluentui/storybook-llms-extractor": "^0.0.2",
+    "@fluentui/storybook-llms-extractor": "^0.0.3",
     "@griffel/shadow-dom": "~0.2.0",
     "@nx/devkit": "21.3.10",
     "@nx/eslint": "21.3.10",
@@ -51,15 +51,16 @@
     "@playwright/experimental-ct-react": "1.49.1",
     "@playwright/experimental-ct-react17": "1.49.1",
     "@rnx-kit/eslint-plugin": "0.8.6",
-    "@storybook/addon-docs": "7.6.20",
-    "@storybook/addon-essentials": "7.6.20",
-    "@storybook/addon-interactions": "7.6.20",
-    "@storybook/addon-themes": "7.6.20",
-    "@storybook/core-common": "7.6.20",
-    "@storybook/core-events": "7.6.20",
-    "@storybook/core-server": "7.6.20",
-    "@storybook/preview-api": "7.6.20",
-    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/addon-docs": "8.6.14",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-interactions": "8.6.14",
+    "@storybook/addon-themes": "8.6.14",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/core-common": "8.6.14",
+    "@storybook/core-events": "8.6.14",
+    "@storybook/core-server": "8.6.14",
+    "@storybook/preview-api": "8.6.14",
+    "@storybook/react-webpack5": "8.6.14",
     "@stylistic/eslint-plugin": "3.1.0",
     "@swc-node/register": "1.10.10",
     "@swc/cli": "0.7.8",
@@ -97,7 +98,7 @@
     "react-window": "^1.8.10",
     "scheduler": "0.23.0",
     "semver": "^7.5.2",
-    "storybook": "7.6.20",
+    "storybook": "8.6.14",
     "stylelint": "^15.10.3",
     "syncpack": "^9.8.6",
     "ts-node": "10.9.2",

packages/azure-theme/.storybook/preview.tsx

@@ -5,6 +5,7 @@ import rootPreview from '../../../.storybook/preview';
 
 const preview: Preview = {
   ...rootPreview,
+  tags: ['autodocs'],
 };
 
 export default preview;

packages/houdini-utils/.storybook/preview.tsx

@@ -5,6 +5,7 @@ import rootPreview from '../../../.storybook/preview';
 
 const preview: Preview = {
   ...rootPreview,
+  tags: ['autodocs'],
 };
 
 export default preview;

packages/nx-plugin/src/generators/configure-storybook/files/.storybook/preview.tsx.template

@@ -5,6 +5,7 @@ import rootPreview from '<%= rootOffset %>/.storybook/preview';
 
 const preview: Preview = {
   ...rootPreview,
+  tags: ['autodocs'],
 };
 
 export default preview;

packages/nx-plugin/src/generators/configure-storybook/generator.spec.ts

@@ -128,6 +128,7 @@ describe('configure-storybook generator', () => {
 
       const preview: Preview = {
         ...rootPreview,
+        tags: ['autodocs'],
       };
 
       export default preview;