chore(deps): update storybook monorepo to v8 (major)

.storybook/main.ts

@@ -1,30 +1,24 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-import { mergeConfig } from 'vite';
-import svgr from 'vite-plugin-svgr';
 
 const config: StorybookConfig = {
-  stories: ['../www/**/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../www/**/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/react-vite',
-    options: {},
+    options: {
+      // ...
+    },
   },
   docs: {
     autodocs: 'tag',
   },
   staticDirs: ['../www/assets'],
-
-  async viteFinal(config) {
-    // Merge custom configuration into the default config
-    return mergeConfig(config, {
-      plugins: [svgr({ exportAsDefault: true })],
-    });
-  },
 };
 
 export default config;

.storybook/preview.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import type { Preview } from '@storybook/react';
+// import type { Preview } from '@storybook/react';
 import { Title, Subtitle, Description, Primary, ArgTypes, Stories } from '@storybook/blocks';
 import theme from './theme';
 
 import '../src/styles/bootstrap-custom.css';
 import '../www/storybook.css';
 
-const preview: Preview = {
+const preview = {
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

package.json

@@ -87,17 +87,17 @@
     "@babel/preset-react": "^7.24.1",
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-a11y": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.2.1",
     "axios": "^1.6.8",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
@@ -146,7 +146,7 @@
     "react-to-typescript-definitions": "^3.1.1",
     "rimraf": "^5.0.5",
     "seamless-immutable": "^7.1.4",
-    "storybook": "^7.4.5",
+    "storybook": "^8.0.5",
     "style-dictionary": "^3.9.2",
     "style-loader": "^3.3.4",
     "stylelint": "^16.3.1",
@@ -165,6 +165,7 @@
   "dependencies": {
     "@draft-js-plugins/editor": "^4.1.4",
     "@draft-js-plugins/mention": "^5.2.2",
+    "@storybook/addon-mdx-gfm": "^8.0.5",
     "@types/draft-js": "^0.11.18",
     "@types/react-datepicker": "^4.19.6",
     "@types/react-slick": "^0.23.13",

src/components/Button/Button.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import Button from './index';
 
-const meta = {
+const meta: Meta<typeof Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
@@ -30,7 +30,7 @@ const meta = {
     },
     round: { if: { arg: 'icon' } },
   },
-} satisfies Meta<typeof Button>;
+};
 
 export default meta;
 

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+
+export default defineConfig({
+  plugins: [react(), svgr({ exportAsDefault: true })],
+});

www/Contributing.stories.mdx → www/Contributing.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Getting Started/Contributing" />