build(deps): update storybook monorepo to v7 (major)

package.json

@@ -8,8 +8,8 @@
     "build": "pnpm website build",
     "build:client": "pnpm client update-openapi && pnpm client build",
     "design": "pnpm --filter=@bangumi/design",
-    "design:doc": "pnpm design storybook",
-    "design:build-doc": "pnpm design build-storybook",
+    "design:doc": "pnpm design dev",
+    "design:build-doc": "pnpm design build",
     "dev": "pnpm dev:csr",
     "dev:csr": "pnpm website dev",
     "dev:ssr": "pnpm server dev",
@@ -53,9 +53,6 @@
     "@actions/core": "^1.10.0",
     "@actions/exec": "^1.1.1",
     "@actions/github": "^5.1.1",
-    "@babel/core": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-typescript": "^7.21.4",
     "@octokit/openapi-types": "^16.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",

packages/design/.storybook/main.ts

@@ -1,16 +1,25 @@
 import { dirname } from 'node:path';
 
-import type { StorybookViteConfig } from '@storybook/builder-vite';
+import type { StorybookConfig } from '@storybook/react-vite';
 import svgr from 'vite-plugin-svgr';
 
-const config: StorybookViteConfig = {
+export default {
   stories: [
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
     '../../icons/index.stories.tsx',
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
   viteFinal: (viteConfig) => {
     if (!viteConfig.build) {
       viteConfig.build = { sourcemap: true };
@@ -32,8 +41,4 @@ const config: StorybookViteConfig = {
     viteConfig.plugins.push(svgr());
     return viteConfig;
   },
-  core: {
-    builder: '@storybook/builder-vite',
-  },
-};
-export default config;
+} satisfies StorybookConfig;

packages/design/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.light,
+});

packages/design/.storybook/preview.ts

@@ -1,14 +1,20 @@
 import 'reset-css';
 import './global.css';
 
-import type { Parameters as StoryParameters } from '@storybook/react';
+import type { Preview } from '@storybook/react';
+import { themes } from '@storybook/theming';
 
-export const parameters: StoryParameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+export default {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    docs: {
+      theme: themes.light,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
   },
-};
+} satisfies Preview;

packages/design/.storybook/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../../tsconfig.json",
-  "compilerOptions": { "module": "commonjs" }
+  "compilerOptions": { "module": "ESNext" }
 }

packages/design/components/Button/button.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
@@ -7,7 +7,7 @@ import { ArrowRightCircle } from '@bangumi/icons';
 import type { ButtonLinkProps, ButtonProps } from '.';
 import Button from '.';
 
-const storyMeta: ComponentMeta<typeof Button> = {
+const storyMeta: Meta<typeof Button> = {
   title: 'modern/Button',
   component: Button,
   subcomponents: { 'Button.Link': Button.Link },
@@ -27,7 +27,7 @@ const storyMeta: ComponentMeta<typeof Button> = {
 
 export default storyMeta;
 
-const Template: Story<ButtonProps> = (args) => {
+const Template: StoryFn<ButtonProps> = (args) => {
   return <Button {...args}>{args.children ?? 'Click Me!'}</Button>;
 };
 
@@ -106,7 +106,7 @@ Disabled.args = {
   children: 'Disabled',
 };
 
-const ButtonLinkTemplate: Story<ButtonLinkProps> = (args) => {
+const ButtonLinkTemplate: StoryFn<ButtonLinkProps> = (args) => {
   return (
     <MemoryRouter>
       <Button.Link {...args}>{args.children}</Button.Link>

packages/design/package.json

@@ -14,10 +14,13 @@
     "@bangumi/client": "workspace:0.0.0",
     "@bangumi/icons": "workspace:0.0.0",
     "@bangumi/utils": "workspace:0.0.0",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-vite": "^0.4.2",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/builder-vite": "^7.0.2",
+    "@storybook/manager-api": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-vite": "^7.0.2",
+    "@storybook/theming": "^7.0.2",
     "@testing-library/react": "^14.0.0",
     "@types/lodash": "^4.14.192",
     "@types/react": "^18.0.31",
@@ -28,13 +31,14 @@
     "msw": "~1.2.1",
     "react-hook-form": "^7.43.9",
     "react-router-dom": "^6.10.0",
+    "storybook": "^7.0.2",
     "typescript": "^5.0.3",
     "vite": "^4.2.1",
     "vite-plugin-svgr": "^2.4.0"
   },
   "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",

packages/icons/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { UnreadableCodeError } from '@bangumi/utils';
@@ -11,7 +11,7 @@ type IComponent = React.FC<
   }
 >;
 
-const componentMeta: ComponentMeta<IComponent> = {
+const componentMeta: Meta<IComponent> = {
   title: 'Icons',
   subcomponents: Icons,
   decorators: [
@@ -46,7 +46,7 @@ const componentMeta: ComponentMeta<IComponent> = {
 export default componentMeta;
 
 /* eslint-disable react/prop-types */
-const Template: Story<{ height: number; width: number; style: React.CSSProperties }> = ({
+const Template: StoryFn<{ height: number; width: number; style: React.CSSProperties }> = ({
   height,
   width,
   style,

packages/icons/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@bangumi/utils": "workspace:0.0.0",
-    "@storybook/react": "^6.5.16",
+    "@storybook/react": "^7.0.2",
     "@types/react": "^18.0.31",
     "typescript": "^5.0.3"
   }