chore(deps): upgrade storybook from 8.6 to 10.3

ui/.storybook/main.ts

@@ -1,6 +1,9 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { createRequire } from 'module';
 import * as path from 'path';
 
+const require = createRequire(import.meta.url);
+
 const config: StorybookConfig = {
     stories: [
         {
@@ -18,18 +21,13 @@ const config: StorybookConfig = {
     ],
     addons: [
         '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/addon-interactions',
         '@storybook/addon-a11y',
         '@kickstartds/storybook-addon-jsonschema',
     ],
     framework: {
         name: '@storybook/react-vite',
         options: {},
     },
-    core: {
-        builder: '@storybook/builder-vite', // 👈 The builder enabled here.
-    },
     staticDirs: ['../src/public', './assets'],
     viteFinal: async (config) => {
         const { mergeConfig } = await import('vite');
@@ -41,10 +39,10 @@ const config: StorybookConfig = {
                 alias: {
                     ...alias,
                     'msw/native': require.resolve(
-                        path.resolve(__dirname, '../node_modules/msw/lib/native/index.mjs')
+                        path.resolve(import.meta.dirname, '../node_modules/msw/lib/native/index.mjs')
                     ),
                     'msw/node': require.resolve(
-                        path.resolve(__dirname, '../node_modules/msw/lib/node/index.mjs')
+                        path.resolve(import.meta.dirname, '../node_modules/msw/lib/node/index.mjs')
                     ),
                 },
                 optimizeDeps: {

ui/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import { serverHandlers } from '../src/mocks/server-handlers';
 import { http, HttpResponse } from 'msw';

ui/.storybook/withControlGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Decorator } from '@storybook/react';
+import { Decorator } from '@storybook/react-vite';
 import { ControlGroupWrapper } from '../src/components/ControlWrapper/ControlWrapper';
 
 export const withControlGroup: Decorator = (StoryFn, { name }) => {

ui/.storybook/withSplunkTheme.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { createGlobalStyle } from 'styled-components';
-import { Decorator } from '@storybook/react';
+import { Decorator } from '@storybook/react-vite';
 import { AnimationToggleProvider } from '@splunk/react-ui/AnimationToggle';
 import { SplunkThemeProvider } from '@splunk/themes';
 import { BrowserRouter as Router } from 'react-router-dom';

ui/package.json

@@ -46,7 +46,6 @@
     "@splunk/themes": "^1.2.0",
     "@splunk/ui-utils": "^1.10.0",
     "@splunk/visualization-context": "^28.4.0",
-    "@storybook/test": "^8.6.15",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^15.0.7",
     "@vitejs/plugin-react": "^4.7.0",
@@ -79,15 +78,12 @@
     "@rollup/plugin-commonjs": "^29.0.2",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@storybook/addon-a11y": "^8.6.18",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.18",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/builder-vite": "^8.6.18",
-    "@storybook/react": "^8.6.18",
-    "@storybook/react-vite": "^8.6.18",
-    "@storybook/test-runner": "^0.23.0",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-links": "^10.3.3",
+    "@storybook/builder-vite": "^10.3.3",
+    "@storybook/react": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@storybook/test-runner": "^0.24.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^15.0.7",
@@ -118,7 +114,7 @@
     "eslint-plugin-prettier": "^4.2.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.12.0 ",
+    "eslint-plugin-storybook": "^10.3.3",
     "eslint-plugin-testing-library": "^7.16.2",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
@@ -130,7 +126,7 @@
     "prettier": "^2.8.8",
     "querystring-es3": "^0.2.1",
     "rollup-plugin-license": "^3.7.0",
-    "storybook": "^8.6.18",
+    "storybook": "^10.3.3",
     "style-loader": "^4.0.0",
     "stylelint": "^14.16.1",
     "ts-node": "^10.9.2",

ui/src/CustomEntity/User.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { z } from 'zod';
 import BaseFormView from '../components/BaseFormView/BaseFormView';

ui/src/CustomEntity/generateGlobalConfig.ts

@@ -1,4 +1,4 @@
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import { GlobalConfig, Mode } from '../publicApi';
 import { StandardPages } from '../types/components/shareableTypes';
 import { Platforms } from '../types/globalConfig/pages';

ui/src/components/AcceptModal/stories/AcceptModal.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 import AcceptModal from '../AcceptModal';
 
 const meta = {

ui/src/components/BaseFormView/stories/BaseFormView.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn, userEvent, within } from 'storybook/test';
 
 import BaseFormView from '../BaseFormView';
 import {

ui/src/components/CheckBoxComponent/stories/CheckBoxComponent.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import CheckBoxComponent from '../CheckBoxComponent';
 import { withControlGroup } from '../../../../.storybook/withControlGroup';
 

ui/src/components/CheckboxGroup/stories/CheckboxGroup.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 import CheckboxGroup from '../CheckboxGroup';
 import { MODE_CREATE, MODE_EDIT } from '../../../constants/modes';
 import { withControlGroup } from '../../../../.storybook/withControlGroup';

ui/src/components/CheckboxGroup/stories/CheckboxGroupInputPage.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect } from 'storybook/test';
 import BaseFormView from '../../BaseFormView/BaseFormView';
 import { setUnifiedConfig } from '../../../util/util';
 import { serverHandlers } from '../mocks/checkboxGroupMocks';

ui/src/components/CheckboxTree/stories/CheckboxTree.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 import CheckboxTree from '../CheckboxTree';
 import { MODE_CREATE, MODE_EDIT } from '../../../constants/modes';
 import { withControlGroup } from '../../../../.storybook/withControlGroup';

ui/src/components/CheckboxTree/stories/CheckboxTreeInputPage.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect } from 'storybook/test';
 import BaseFormView from '../../BaseFormView/BaseFormView';
 import { setUnifiedConfig } from '../../../util/util';
 import { serverHandlers } from '../mocks/CheckboxTreeMocks';

ui/src/components/ControlWrapper/stories/ControlWrapper.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import ControlWrapper from '../ControlWrapper';
 
 const meta = {

ui/src/components/DatePickerComponent/stories/DatePickerComponent.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 import DatePickerComponent from '../DatePickerComponent';
 

ui/src/components/DeleteModal/stories/DeleteModal.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import DeleteModal from '../DeleteModal';
 import { getGlobalConfigMock } from '../../../mocks/globalConfigMock';
 import { setUnifiedConfig } from '../../../util/util';

ui/src/components/DownloadButton/stories/DownloadButton.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import DownloadButton from '../DownloadButton';
 
 const meta = {

ui/src/components/EntityModal/stories/EntityModal.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import EntityModal from '../EntityModal';
 import { setUnifiedConfig } from '../../../util/util';
 import { getGlobalConfigMock } from '../../../mocks/globalConfigMock';

ui/src/components/EntityPage/stories/EntityPage.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import EntityPage from '../EntityPage';
 import { setUnifiedConfig } from '../../../util/util';
 import { getGlobalConfigMock } from '../../../mocks/globalConfigMock';

ui/src/components/ErrorBoundary/stories/ErrorBoundary.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import ErrorBoundary from '../ErrorBoundary';
 import { getGlobalConfigMock } from '../../../mocks/globalConfigMock';

ui/src/components/ErrorModal/stories/ErrorModal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import ErrorModal from '../ErrorModal';
 
 const meta = {

ui/src/components/FileInputComponent/stories/FileInputComponent.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 import FileInputComponent from '../FileInputComponent';
 import { withControlGroup } from '../../../../.storybook/withControlGroup';
 

ui/src/components/Footer/stories/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import Footer from '../Footer';
 import { getGlobalConfigMock } from '../../../mocks/globalConfigMock';

ui/src/components/Group/stories/Group.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import Group from '../Group';
 

ui/src/components/HelpLinkComponent/stories/HelpLinkComponent.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import HelpLinkComponent from '../HelpLinkComponent';
 import { withControlGroup } from '../../../../.storybook/withControlGroup';
 

ui/src/components/MarkdownMessage/stories/MarkdownMessage.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import MarkdownMessage from '../MarkdownMessage';
 
 const meta = {

ui/src/components/MenuInput/stories/MenuInput.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState, useEffect } from 'react';
 import { z } from 'zod';
-import { fn, userEvent, waitFor, within } from '@storybook/test';
+import { fn, userEvent, waitFor, within } from 'storybook/test';
 import MenuInput from '../MenuInput';
 import { setUnifiedConfig } from '../../../util/util';
 import { GlobalConfig, GlobalConfigSchema } from '../../../types/globalConfig/globalConfig';

ui/src/components/MultiInputComponent/stories/MultiInputComponent.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 
 import MultiInputComponent from '../MultiInputComponent';

ui/src/components/RadioComponent/stories/RadioComponent.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 import RadioComponent from '../RadioComponent';
 import { withControlGroup } from '../../../../.storybook/withControlGroup';
 

ui/src/components/SingleInputComponent/stories/SingleInputComponent.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 import SingleInputComponent from '../SingleInputComponent';
 import { setUnifiedConfig } from '../../../util/util';

ui/src/components/SubDescription/stories/SubDescription.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import SubDescription from '../SubDescription';
 
 const meta = {

ui/src/components/TextAreaComponent/stories/TextAreaComponent.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import TextAreaComponent from '../TextAreaComponent';
 import { withControlGroup } from '../../../../.storybook/withControlGroup';
 

ui/src/components/TextComponent/stories/TextComponent.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import TextComponent from '../TextComponent';
 import { withControlGroup } from '../../../../.storybook/withControlGroup';
 

ui/src/components/table/stories/TableWrapper.stories.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 
 import { setUnifiedConfig } from '../../../util/util';
 import { GlobalConfig } from '../../../types/globalConfig/globalConfig';

ui/src/pages/Configuration/stories/ConfigurationPage.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import { http, HttpResponse } from 'msw';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect } from 'storybook/test';
 import { setUnifiedConfig } from '../../../util/util';
 import globalConfig from './globalConfig.json';
 import ConfigurationPage from '../ConfigurationPage';

ui/src/pages/Dashboard/stories/DashboardPage.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { waitForElementToBeRemoved, within } from '@storybook/test';
+import { waitForElementToBeRemoved, within } from 'storybook/test';
 import DashboardPage from '../DashboardPage';
 
 import { DASHBOARD_JSON_MOCKS } from '../tests/mockJs';

ui/src/pages/Input/stories/InputPage.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import { http, HttpResponse } from 'msw';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect } from 'storybook/test';
 import { setUnifiedConfig } from '../../../util/util';
 import globalConfig from './globalConfig.json';
 import InputPage from '../InputPage';

ui/src/pages/stories/GlobalConfigPlayground.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import SplunkThemeProvider from '@splunk/themes/SplunkThemeProvider';
 import TabBar, { TabBarChangeHandler } from '@splunk/react-ui/TabBar';
 import React, { useCallback, useState } from 'react';