chore(deps): update storybook monorepo to v9 (major) (#1876)

* chore(deps): update storybook monorepo to v9

* Updates

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>

packages/redux-devtools-ui/.storybook/main.ts

@@ -11,26 +11,11 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
+  addons: [getAbsolutePath('@storybook/addon-onboarding')],
-    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
-    getAbsolutePath('@storybook/addon-onboarding'),
-    getAbsolutePath('@storybook/addon-links'),
-    {
-      name: getAbsolutePath('@storybook/addon-essentials'),
-      options: {
-        backgrounds: false,
-      },
-    },
-    getAbsolutePath('@chromatic-com/storybook'),
-    getAbsolutePath('@storybook/addon-interactions'),
-  ],
   framework: {
-    name: getAbsolutePath('@storybook/react-webpack5'),
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
   staticDirs: ['../fonts'],
 };
 export default config;

packages/redux-devtools-ui/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 
 import { Container } from '../src';
 import { listSchemes, listThemes } from '../src/utils/theme';

packages/redux-devtools-ui/package.json

@@ -64,16 +64,8 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@chromatic-com/storybook": "^3.2.6",
+    "@storybook/addon-onboarding": "^9.0.2",
-    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react-vite": "^9.0.2",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/addon-webpack5-compiler-swc": "3.0.0",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/test": "^8.6.14",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -91,7 +83,7 @@
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "rimraf": "^6.0.1",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.2",
     "styled-components": "^5.3.11",
     "stylelint": "^16.19.1",
     "stylelint-config-standard": "^38.0.0",
@@ -99,7 +91,7 @@
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^29.3.4",
     "typescript": "~5.8.3",
-    "webpack": "^5.99.9"
+    "vite": "^6.3.5"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

packages/redux-devtools-ui/src/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { MdFiberManualRecord } from 'react-icons/md';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Button from './';
 
 const meta: Meta = {

packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import ContextMenu from './';
 import { items } from './data';
 

packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Dialog from './';
 import { schema, uiSchema, formData } from '../Form/schema';
 

packages/redux-devtools-ui/src/Editor/Editor.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Editor from './';
 import { default as WithTabsComponent, WithTabsProps } from './WithTabs';
 

packages/redux-devtools-ui/src/Form/Form.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Form from './';
 import { schema, uiSchema, formData } from './schema';
 

packages/redux-devtools-ui/src/Notification/Notification.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Notification from './';
 
 const Container = styled.div`

packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import SegmentedControl from './';
 
 const Container = styled.div`

packages/redux-devtools-ui/src/Select/Select.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import Select from './';
 import { options } from './options';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 const Container = styled.div`
   display: flex;

packages/redux-devtools-ui/src/Slider/Slider.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Slider from './';
 
 const Container = styled.div`

packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Tabs from './';
 import { tabs, simple10Tabs } from './data';
 import { TabsProps } from './Tabs';

packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { MdPlayArrow } from 'react-icons/md';
 import { MdFiberManualRecord } from 'react-icons/md';
 import { MdKeyboardArrowLeft } from 'react-icons/md';

packages/redux-devtools-ui/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.react.base.json",
   "compilerOptions": {
     "outDir": "lib/types",
-    "types": ["node"]
+    "types": ["node"],
+    "skipLibCheck": true
   },
   "include": ["src"]
 }