Storybook 8 upgrade (#1047)

* try to upgrade to storybook 8

* fix storybook ts gen

* Lint and Prettier

* fix mui type issue

---------

Co-authored-by: KevinVandy <[email protected]>

Author: KevinVandy

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 
 # turbo
 .turbo
+
+*storybook.log

apps/material-react-table-docs/package.json

@@ -13,7 +13,7 @@
     "sitemap": "pnpm docs:sitemap"
   },
   "dependencies": {
-    "@docsearch/js": "3.5.2",
+    "@docsearch/js": "3.6.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.4.1",
@@ -22,35 +22,35 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@mui/icons-material": "^5.15.12",
-    "@mui/material": "^5.15.12",
+    "@mui/icons-material": "^5.15.13",
+    "@mui/material": "^5.15.13",
     "@mui/x-charts": "^6.19.5",
-    "@mui/x-date-pickers": "^6.19.6",
-    "@next/mdx": "^14.1.2",
-    "@tanstack/react-query": "^5.25.0",
+    "@mui/x-date-pickers": "^6.19.7",
+    "@next/mdx": "^14.1.3",
+    "@tanstack/react-query": "^5.28.4",
     "@tanstack/react-table-devtools": "^8.13.2",
     "@types/mdx": "^2.0.11",
     "dayjs": "^1.11.10",
-    "export-to-csv": "^1.2.3",
+    "export-to-csv": "^1.2.4",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.8.2",
     "material-react-table": "workspace:*",
-    "next": "14.1.2",
+    "next": "14.1.3",
     "next-sitemap": "^4.2.3",
     "prism-react-renderer": "^2.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.20.1",
-    "@types/node": "^20.11.25",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.20",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@tanstack/eslint-plugin-query": "^5.27.7",
+    "@types/node": "^20.11.29",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.0",
+    "@typescript-eslint/parser": "^7.3.0",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.1.2",
+    "eslint-config-next": "14.1.3",
     "next-plausible": "^3.12.0",
     "raw-loader": "^4.0.2",
     "typescript": "5.4.2"

apps/test-cra/package.json

@@ -5,9 +5,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.12",
-    "@mui/material": "^5.15.12",
-    "@mui/x-date-pickers": "^6.19.6",
+    "@mui/icons-material": "^5.15.13",
+    "@mui/material": "^5.15.13",
+    "@mui/x-date-pickers": "^6.19.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",

apps/test-remix/package.json

@@ -12,23 +12,23 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.12",
-    "@mui/material": "^5.15.12",
-    "@mui/x-date-pickers": "^6.19.6",
-    "@remix-run/css-bundle": "^2.8.0",
-    "@remix-run/node": "^2.8.0",
-    "@remix-run/react": "^2.8.0",
-    "@remix-run/serve": "^2.8.0",
-    "isbot": "^5.1.1",
+    "@mui/icons-material": "^5.15.13",
+    "@mui/material": "^5.15.13",
+    "@mui/x-date-pickers": "^6.19.7",
+    "@remix-run/css-bundle": "^2.8.1",
+    "@remix-run/node": "^2.8.1",
+    "@remix-run/react": "^2.8.1",
+    "@remix-run/serve": "^2.8.1",
+    "isbot": "^5.1.2",
     "material-react-table": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.8.0",
-    "@remix-run/eslint-config": "^2.8.0",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.20",
+    "@remix-run/dev": "^2.8.1",
+    "@remix-run/eslint-config": "^2.8.1",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
     "eslint": "^8.57.0",
     "typescript": "^5.4.2"
   },

apps/test-vite/package.json

@@ -12,23 +12,23 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.12",
-    "@mui/material": "^5.15.12",
-    "@mui/x-date-pickers": "^6.19.6",
+    "@mui/icons-material": "^5.15.13",
+    "@mui/material": "^5.15.13",
+    "@mui/x-date-pickers": "^6.19.7",
     "material-react-table": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.20",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.0",
+    "@typescript-eslint/parser": "^7.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "typescript": "^5.4.2",
-    "vite": "^5.1.5"
+    "vite": "^5.1.6"
   }
 }

packages/material-react-table/.eslintrc

@@ -2,10 +2,15 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended",
     "plugin:perfectionist/recommended-natural",
   ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "mui-path-imports", "perfectionist"],
+  "plugins": [
+    "@typescript-eslint",
+    "mui-path-imports",
+    "perfectionist"
+  ],
   "rules": {
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": "off",
@@ -38,11 +43,20 @@
         ],
         "custom-groups": {
           "value": {
-            "react": ["react", "react-*"],
-            "storybook": ["@storybook/**"],
+            "react": [
+              "react",
+              "react-*"
+            ],
+            "storybook": [
+              "@storybook/**"
+            ],
             "tanstack": "@tanstack/**",
             "mui": "@mui/**",
-            "mrt": ["./MRT_**", "../**MRT_**", "../../src"],
+            "mrt": [
+              "./MRT_**",
+              "../**MRT_**",
+              "../../src"
+            ],
             "faker": "@faker/**",
           },
           "type": {
@@ -54,5 +68,9 @@
     ],
   },
   "root": true,
-  "ignorePatterns": ["dist/", "locales/", "node_modules/"],
-}
+  "ignorePatterns": [
+    "dist/",
+    "locales/",
+    "node_modules/"
+  ],
+}

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

@@ -1,28 +1,38 @@
-import { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-    'storybook-dark-mode',
-    {
-      name: '@storybook/addon-storysource',
-      options: {
-        loaderOptions: {
-          injectStoryParameters: false,
-          prettierConfig: { printWidth: 40, singleQuote: false },
-        },
-      },
-    },
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-storysource'),
+    getAbsolutePath('storybook-dark-mode'),
   ],
   framework: {
-    name: '@storybook/react-vite',
+    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,14 +1,16 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { addons } from '@storybook/preview-api';
 import { Preview } from '@storybook/react';
-import { useDarkMode } from 'storybook-dark-mode';
+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';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { CssBaseline } from '@mui/material';
 
+const channel = addons.getChannel();
+
 const lightTheme = createTheme({
   palette: { mode: 'light' },
 });
@@ -29,17 +31,19 @@ const preview: Preview = {
   },
   decorators: [
     (Story, context) => {
-      const defaultTheme = useDarkMode() ? darkTheme : lightTheme;
+      const [isDark, setDark] = useState(false);
+      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 =
-            defaultTheme.palette.background.default;
+          sbRoot.style.backgroundColor = theme.palette.background.default;
         }
-      }, [useDarkMode()]);
+        return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
+      }, [theme]);
 
       useEffect(() => {
         if (process.env.NODE_ENV === 'development') return;
@@ -55,7 +59,7 @@ const preview: Preview = {
       }, []);
 
       return (
-        <ThemeProvider theme={defaultTheme}>
+        <ThemeProvider theme={theme}>
           <CssBaseline />
           <LocalizationProvider dateAdapter={AdapterDayjs}>
             <Typography