Storybook upgrade to v9

package.json

@@ -32,4 +32,4 @@
     "node": ">=16.0.0"
   },
   "packageManager": "[email protected]"
-}
+}

packages/material-react-table/.storybook/main.ts

@@ -14,22 +14,20 @@ const config: StorybookConfig = {
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
+
   addons: [
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-storysource'),
-    getAbsolutePath('storybook-dark-mode'),
+    // getAbsolutePath('storybook-dark-mode'),
   ],
+
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
-  },
+  }
 };
 export default config;

packages/material-react-table/.storybook/preview.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { addons } from '@storybook/preview-api';
-import { Preview } from '@storybook/react';
-import { useDarkMode, DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+import { useEffect, useState } from 'react';
+import { addons } from 'storybook/preview-api';
+import { Preview } from '@storybook/react-vite';
+// import { useDarkMode, DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
@@ -34,16 +34,16 @@ const preview: Preview = {
       const [isDark, setDark] = useState(true);
       const theme = isDark ? darkTheme : lightTheme;
 
-      useEffect(() => {
-        const sbRoot = document.getElementsByClassName(
-          'sb-show-main',
-        )[0] as HTMLElement;
-        channel.on(DARK_MODE_EVENT_NAME, setDark);
-        if (sbRoot) {
-          sbRoot.style.backgroundColor = theme.palette.background.default;
-        }
-        return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
-      }, [theme]);
+      // useEffect(() => {
+      //   const sbRoot = document.getElementsByClassName(
+      //     'sb-show-main',
+      //   )[0] as HTMLElement;
+      //   channel.on(DARK_MODE_EVENT_NAME, setDark);
+      //   if (sbRoot) {
+      //     sbRoot.style.backgroundColor = theme.palette.background.default;
+      //   }
+      //   return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
+      // }, [theme]);
 
       useEffect(() => {
         if (process.env.NODE_ENV === 'development') return;
@@ -65,7 +65,7 @@ const preview: Preview = {
             <Typography
               sx={{
                 pb: '0.5rem',
-                color: useDarkMode() ? '#fff' : '#666',
+                // color: useDarkMode() ? '#fff' : '#666',
               }}
               variant="subtitle2"
             >
@@ -82,7 +82,7 @@ const preview: Preview = {
               variant="subtitle2"
               sx={{
                 pb: '1rem',
-                color: useDarkMode() ? '#fff' : '#666',
+                // color: useDarkMode() ? '#fff' : '#666',
               }}
             >
               View Source code for these examples in the code tab below or{' '}

packages/material-react-table/package.json

@@ -70,14 +70,9 @@
     "@mui/x-date-pickers": "^7.23.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.1.6",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-storysource": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@storybook/addon-a11y": "^9.0.16",
+    "@storybook/addon-links": "^9.0.16",
+    "@storybook/react-vite": "^9.0.16",
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
@@ -87,7 +82,7 @@
     "eslint": "^9.17.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "eslint-plugin-perfectionist": "^4.4.0",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^9.0.16",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-is": "^19.0.0",
@@ -97,7 +92,7 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.1.6",
-    "storybook": "^8.4.7",
+    "storybook": "^9.0.16",
     "storybook-dark-mode": "^4.0.2",
     "tslib": "^2.8.1",
     "typescript": "5.7.2",

packages/material-react-table/stories/features/Aggregation.stories.tsx

@@ -6,7 +6,7 @@ import {
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Aggregation Examples',

packages/material-react-table/stories/features/CellActions.stories.tsx

@@ -4,7 +4,7 @@ import Divider from '@mui/material/Divider';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { MRT_ActionMenuItem } from '../../src/components/menus/MRT_ActionMenuItem';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Cell Action Examples',

packages/material-react-table/stories/features/ClickToCopy.stories.tsx

@@ -4,7 +4,7 @@ import {
   useMaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Click to Copy Examples',

packages/material-react-table/stories/features/ColumnActions.stories.tsx

@@ -2,7 +2,7 @@ import Divider from '@mui/material/Divider';
 import MenuItem from '@mui/material/MenuItem';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Column Action Examples',

packages/material-react-table/stories/features/ColumnDragging.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Column Dragging Examples',

packages/material-react-table/stories/features/ColumnGrouping.stories.tsx

@@ -5,7 +5,7 @@ import {
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Column Grouping Examples',

packages/material-react-table/stories/features/ColumnHiding.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Column Hiding Examples',

packages/material-react-table/stories/features/ColumnOrdering.stories.tsx

@@ -5,7 +5,7 @@ import {
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Column Ordering Examples',

packages/material-react-table/stories/features/ColumnPinning.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Column Pinning Examples',

packages/material-react-table/stories/features/ColumnResizing.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Column Resizing Examples',

packages/material-react-table/stories/features/Creating.stories.tsx

@@ -9,7 +9,7 @@ import {
   MRT_Row,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 import { MenuItem, Select } from '@mui/material';
 
 const meta: Meta = {

packages/material-react-table/stories/features/DensePadding.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Dense Padding Examples',

packages/material-react-table/stories/features/DetailPanel.stories.tsx

@@ -1,6 +1,6 @@
 import { MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Detail Panel Examples',

packages/material-react-table/stories/features/Editing.stories.tsx

@@ -7,7 +7,7 @@ import {
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Editing Examples',

packages/material-react-table/stories/features/Filtering.stories.tsx

@@ -9,7 +9,7 @@ import {
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Filtering Examples',

packages/material-react-table/stories/features/FullScreen.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Full Screen Examples',

packages/material-react-table/stories/features/HeaderGroups.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Header Groups Examples',

packages/material-react-table/stories/features/LayoutMode.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Layout Mode Examples',

packages/material-react-table/stories/features/Loading.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Loading Examples',

packages/material-react-table/stories/features/Memod.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Button from '@mui/material/Button';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Memo Mode Examples',

packages/material-react-table/stories/features/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Pagination Examples',

packages/material-react-table/stories/features/RowActions.stories.tsx

@@ -8,7 +8,7 @@ import IconButton from '@mui/material/IconButton';
 import MenuItem from '@mui/material/MenuItem';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Row Actions Examples',

packages/material-react-table/stories/features/RowDragging.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Row Dragging Examples',

packages/material-react-table/stories/features/RowNumbers.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Button from '@mui/material/Button';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Row Number Examples',

packages/material-react-table/stories/features/RowOrdering.stories.tsx

@@ -5,7 +5,7 @@ import {
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Row Ordering Examples',

packages/material-react-table/stories/features/RowPinning.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Button from '@mui/material/Button';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Row Pinning Examples',

packages/material-react-table/stories/features/Search.stories.tsx

@@ -1,6 +1,6 @@
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 import { useState } from 'react';
 
 const meta: Meta = {

packages/material-react-table/stories/features/Selection.stories.tsx

@@ -11,7 +11,7 @@ import {
   useMaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Selection Examples',

packages/material-react-table/stories/features/Sorting.stories.tsx

@@ -5,7 +5,7 @@ import {
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Sorting Examples',

packages/material-react-table/stories/features/SubRowTree.stories.tsx

@@ -2,7 +2,7 @@ import { ThemeProvider, useTheme } from '@mui/material/styles';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { MRT_Localization_HE } from '../../src/locales/he';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Sub Row Tree Examples',

packages/material-react-table/stories/features/Toolbar.stories.tsx

@@ -11,7 +11,7 @@ import {
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 const meta: Meta = {
   title: 'Features/Toolbar Examples',