Upgrade to storybook 7 (#2464)

packages/extension/src/js/components/CloseButton.stories.tsx

@@ -3,11 +3,13 @@ import { Story, Meta } from '@storybook/react'
 
 import CloseButton, { CloseButtonProps } from './CloseButton'
 
-export default {
+const meta: Meta<typeof CloseButton> = {
   title: 'UI Components/CloseButton',
   component: CloseButton,
   argTypes: { disabled: { control: 'boolean' } },
-} as Meta
+}
+
+export default meta
 
 const Template: Story<CloseButtonProps> = (args) => <CloseButton {...args} />
 

packages/extension/src/js/components/Tab/Url.stories.tsx

@@ -3,7 +3,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'
 
 import Url, { UrlProps } from './Url'
 
-export default {
+const meta: Meta<typeof Url> = {
   title: 'UI Components/Url',
   component: Url,
   argTypes: {
@@ -14,7 +14,9 @@ export default {
     },
     duplicated: { control: 'boolean' },
   },
-} as Meta
+}
+
+export default meta
 
 const getHighlightNode = (url: string) => url
 

packages/storybook/.storybook/main.ts

@@ -0,0 +1,54 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+import fs from 'fs'
+import path from 'path'
+
+import { join, dirname } from 'path'
+
+const alias = {}
+const jsEntry = '../../extension/src/js'
+Object.assign(
+  alias,
+  ...fs
+    .readdirSync(path.join(__dirname, jsEntry), { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name)
+    .map((entry) => ({ [entry]: path.join(__dirname, jsEntry, entry) })),
+)
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  stories: [
+    '../../extension/src/**/*.mdx',
+    '../../extension/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  webpackFinal: (config) => {
+    if (config.resolve && config.resolve.alias) {
+      Object.assign(config.resolve.alias, alias)
+    }
+    return config
+  },
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

packages/storybook/.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      isToolshown: true,
+      storySort: {
+        order: ['Introduction', 'Changelog', 'UI Components'],
+      },
+    },
+  },
+}
+
+export default preview

packages/storybook/package.json

@@ -3,17 +3,27 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@storybook/addon-a11y": "7.6.3",
     "@storybook/addon-actions": "7.6.3",
     "@storybook/addon-essentials": "7.6.3",
     "@storybook/addon-links": "7.6.3",
-    "@storybook/builder-webpack5": "7.6.3",
-    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/addon-mdx-gfm": "7.6.3",
     "@storybook/react": "7.6.3",
+    "@storybook/react-webpack5": "7.6.3",
+    "@storybook/addon-interactions": "7.6.3",
+    "@storybook/addon-onboarding": "1.0.9",
+    "@storybook/blocks": "7.6.3",
+    "@storybook/test": "7.6.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "storybook": "7.6.3",
     "storybook-addon-performance": "0.17.1"
   }
 }