Storybook: Migrate from version 7 to 10 (#31994)

pharret31 · web-flow · commit 4d079f5b8a7e · 2025-12-17T15:18:55.000+01:00
diff --git a/apps/react-storybook/.storybook/main.ts b/apps/react-storybook/.storybook/main.ts
@@ -1,6 +1,9 @@
+import { createRequire } from "node:module";
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import path from 'path';
 
+const require = createRequire(import.meta.url);
+
 const getAbsolutePath = (packageName: string): any =>
     path.dirname(require.resolve(path.join(packageName, 'package.json')));
 
@@ -9,22 +12,26 @@ const config: StorybookConfig = {
     "../stories/**/*.mdx",
     "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
+
   addons: [
     getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@storybook/addon-docs")
   ],
+
   framework: {
     name: getAbsolutePath("@storybook/react-webpack5"),
     options: {
-      builder: {
-        useSWC: true,
-      },
+      builder: {},
     },
   },
-  docs: {
-    autodocs: "tag",
-  },
+
+  docs: {},
+
   staticDirs: ['../stories/assets', '../node_modules/devextreme/dist'],
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
 };
 export default config;
diff --git a/apps/react-storybook/.storybook/preview.tsx b/apps/react-storybook/.storybook/preview.tsx
@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-webpack5';
 
 import { ThemeDecorator, themeToolbarItems, compact } from './themes/themes';
 
diff --git a/apps/react-storybook/.storybook/themes/themes.tsx b/apps/react-storybook/.storybook/themes/themes.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Decorator } from '@storybook/react';
+import { Decorator } from '@storybook/react-webpack5';
 import './styles.css';
 
 export const themeToolbarItems = [
diff --git a/apps/react-storybook/package.json b/apps/react-storybook/package.json
@@ -19,20 +19,17 @@
     "openai": "4.73.1"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-links": "10.1.4",
-    "@storybook/blocks": "8.6.14",
-    "@storybook/react": "10.1.4",
-    "@storybook/react-webpack5": "10.1.4",
-    "@storybook/test": "8.6.14",
+    "@storybook/addon-docs": "10.1.9",
+    "@storybook/addon-links": "10.1.9",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react-webpack5": "10.1.9",
     "@types/react": "18.0.0",
     "@types/react-dom": "18.0.0",
     "http-server": "14.1.1",
     "prop-types": "15.8.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",
-    "storybook": "10.1.4",
-    "typescript": "4.9.5"
+    "storybook": "10.1.9",
+    "typescript": "^5.9.3"
   }
 }
diff --git a/apps/react-storybook/stories/card_view/CardView.stories.tsx b/apps/react-storybook/stories/card_view/CardView.stories.tsx
@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 
 import dxCardView from "devextreme/ui/card_view";
 import { wrapDxWithReact } from "../utils";
 import { store } from "./data";
 import { generatedData } from "./generatedData";
 import { renderFooter } from "./templates";
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 const CardView = wrapDxWithReact(dxCardView);
 
diff --git a/apps/react-storybook/stories/card_view/parts/Card.stories.tsx b/apps/react-storybook/stories/card_view/parts/Card.stories.tsx
@@ -1,4 +1,4 @@
-import type {Meta, StoryObj} from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 
 import dxCardView from "devextreme/ui/card_view";
 import { wrapDxWithReact } from "../../utils";
diff --git a/apps/react-storybook/stories/card_view/parts/Toolbar.stories.tsx b/apps/react-storybook/stories/card_view/parts/Toolbar.stories.tsx
@@ -1,4 +1,4 @@
-import type {Meta, StoryObj} from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 
 import dxCardView from "devextreme/ui/card_view";
 import { wrapDxWithReact } from "../../utils";
diff --git a/apps/react-storybook/stories/chat/Chat.stories.tsx b/apps/react-storybook/stories/chat/Chat.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { Chat, ChatTypes } from 'devextreme-react/chat'
 import { Button, Toast } from 'devextreme-react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import DataSource from 'devextreme/data/data_source';
 import CustomStore from 'devextreme/data/custom_store';
 import {
diff --git a/apps/react-storybook/stories/examples/common/CustomConfigurationComponents.stories.tsx b/apps/react-storybook/stories/examples/common/CustomConfigurationComponents.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from "react";
 
 import DataGrid, {
diff --git a/apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx b/apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React, { useCallback, useState } from "react";
 import { countries, generateData } from './data';
 
diff --git a/apps/react-storybook/stories/examples/piechart/PieChart.stories.tsx b/apps/react-storybook/stories/examples/piechart/PieChart.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 import PieChart, {
     Series,
diff --git a/apps/react-storybook/stories/examples/selectbox/SelectBox.stories.tsx b/apps/react-storybook/stories/examples/selectbox/SelectBox.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import React, { useCallback, useState } from 'react';
 import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
diff --git a/apps/react-storybook/stories/htmleditor/HtmlEditor.stories.tsx b/apps/react-storybook/stories/htmleditor/HtmlEditor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { HtmlEditor, Toolbar, Item, IHtmlEditorOptions, IItemProps } from 'devextreme-react/html-editor';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { defaultToolbarItems, fullToolbarItems } from './data';
 import { AIIntegration } from 'devextreme/artifacts/npm/devextreme/common/ai-integration';
 
diff --git a/apps/react-storybook/stories/informer/Informer.stories.tsx b/apps/react-storybook/stories/informer/Informer.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import dxInformer from 'devextreme/ui/informer';
 import { wrapDxWithReact } from '../utils';
 
diff --git a/apps/react-storybook/stories/menu/Menu.stories.tsx b/apps/react-storybook/stories/menu/Menu.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Menu, MenuTypes } from 'devextreme-react/menu';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { menuItems } from './data';
 
 const meta: Meta<typeof Menu> = {
diff --git a/apps/react-storybook/stories/scheduler/SchedulerAppointmentForm.stories.tsx b/apps/react-storybook/stories/scheduler/SchedulerAppointmentForm.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import dxScheduler from "devextreme/ui/scheduler";
 import { wrapDxWithReact } from "../utils";
 import { data, resources, resourcesWithIcons } from "./data";
diff --git a/apps/react-storybook/stories/scheduler/SchedulerFormCustomization.stories.tsx b/apps/react-storybook/stories/scheduler/SchedulerFormCustomization.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React, { useRef } from "react";
 import dxScheduler from "devextreme/ui/scheduler";
 import type { Properties } from "devextreme/ui/scheduler";
diff --git a/apps/react-storybook/stories/scheduler/SchedulerToolbar.stories.tsx b/apps/react-storybook/stories/scheduler/SchedulerToolbar.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import dxScheduler from "devextreme/ui/scheduler";
 import { wrapDxWithReact } from "../utils";
 import { assignees } from "./data";
diff --git a/apps/react-storybook/stories/speech_to_text/SpeechToText.stories.tsx b/apps/react-storybook/stories/speech_to_text/SpeechToText.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import dxSpeechToText from 'devextreme/ui/speech_to_text';
 import { wrapDxWithReact } from '../utils';
 
diff --git a/apps/react-storybook/stories/splitter/Splitter.stories.tsx b/apps/react-storybook/stories/splitter/Splitter.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Splitter, Item} from 'devextreme-react/splitter'
-import type {Meta, StoryObj} from '@storybook/react';
+import { Splitter, Item } from 'devextreme-react/splitter'
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import DataGridSample from './samples/DataGrid';
 import SchedulerSample from './samples/Scheduler';
diff --git a/apps/react-storybook/stories/stepper/Stepper.stories.tsx b/apps/react-storybook/stories/stepper/Stepper.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stepper, Item, IStepperOptions, IItemProps } from 'devextreme-react/stepper'
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { defaultItems, itemsWithTitle, itemsWithIcon, itemsWithIconAndTitle } from './data';
 import SingleFormIntegrationExample from './samples/formIntegration/SingleFormIntegration';
diff --git a/apps/react-storybook/stories/tree_list/TreeList.stories.tsx b/apps/react-storybook/stories/tree_list/TreeList.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 
 import dxTreeList from 'devextreme/ui/tree_list';
 import { wrapDxWithReact } from '../utils';
diff --git a/apps/react-storybook/tsconfig.json b/apps/react-storybook/tsconfig.json
@@ -2,6 +2,10 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "resolveJsonModule": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "types": [
+      "node",
+      "jest"
+    ]
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Preview } from '@storybook/react';`
	`1`	`+import type { Preview } from '@storybook/react-webpack5';`
`2`	`2`
`3`	`3`	`import { ThemeDecorator, themeToolbarItems, compact } from './themes/themes';`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type {Meta, StoryObj} from "@storybook/react";`
	`1`	`+import type { Meta, StoryObj } from "@storybook/react-webpack5";`
`2`	`2`
`3`	`3`	`import dxCardView from "devextreme/ui/card_view";`
`4`	`4`	`import { wrapDxWithReact } from "../../utils";`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Meta, StoryObj } from '@storybook/react';`
	`1`	`+import type { Meta, StoryObj } from '@storybook/react-webpack5';`
`2`	`2`	`import React from "react";`
`3`	`3`
`4`	`4`	`import DataGrid, {`