From 9d7e42e7f859058fb15c6ca1ff3112d114c67e2f Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Mon, 18 Mar 2024 15:00:26 -0500 Subject: [PATCH] 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 --- .gitignore | 2 + apps/material-react-table-docs/package.json | 30 +- apps/test-cra/package.json | 6 +- apps/test-remix/package.json | 24 +- apps/test-vite/package.json | 18 +- packages/material-react-table/.eslintrc | 30 +- .../material-react-table/.storybook/main.ts | 44 +- .../.storybook/preview.tsx | 20 +- packages/material-react-table/package.json | 61 +- .../buttons/MRT_EditActionButtons.tsx | 4 +- .../components/inputs/MRT_SelectCheckbox.tsx | 2 +- .../stories/Playground.stories.tsx | 55 - .../features/Virtualization.stories.tsx | 2 +- pnpm-lock.yaml | 3826 ++++++----------- 14 files changed, 1566 insertions(+), 2558 deletions(-) delete mode 100644 packages/material-react-table/stories/Playground.stories.tsx diff --git a/.gitignore b/.gitignore index 094ec8218..91e8680dd 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,5 @@ yarn-error.log* # turbo .turbo + +*storybook.log \ No newline at end of file diff --git a/apps/material-react-table-docs/package.json b/apps/material-react-table-docs/package.json index cdf9b2443..255a7fcbb 100644 --- a/apps/material-react-table-docs/package.json +++ b/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,20 +22,20 @@ "@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", @@ -43,14 +43,14 @@ "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" diff --git a/apps/test-cra/package.json b/apps/test-cra/package.json index 0d51a2f53..b4c083cd8 100644 --- a/apps/test-cra/package.json +++ b/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", diff --git a/apps/test-remix/package.json b/apps/test-remix/package.json index 819eb3066..0f5a1698c 100755 --- a/apps/test-remix/package.json +++ b/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" }, diff --git a/apps/test-vite/package.json b/apps/test-vite/package.json index 96c373676..96c4e958c 100644 --- a/apps/test-vite/package.json +++ b/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" } } diff --git a/packages/material-react-table/.eslintrc b/packages/material-react-table/.eslintrc index 9dc129dbb..ff66e0a9e 100644 --- a/packages/material-react-table/.eslintrc +++ b/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/" + ], +} \ No newline at end of file diff --git a/packages/material-react-table/.storybook/main.ts b/packages/material-react-table/.storybook/main.ts index 2983e2ade..ecf9c3996 100644 --- a/packages/material-react-table/.storybook/main.ts +++ b/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; diff --git a/packages/material-react-table/.storybook/preview.tsx b/packages/material-react-table/.storybook/preview.tsx index 05f949c33..bc6d35bce 100644 --- a/packages/material-react-table/.storybook/preview.tsx +++ b/packages/material-react-table/.storybook/preview.tsx @@ -1,7 +1,7 @@ -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'; @@ -9,6 +9,8 @@ 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 ( - + =11.11", @@ -117,7 +120,7 @@ "dependencies": { "@tanstack/match-sorter-utils": "8.11.8", "@tanstack/react-table": "8.13.2", - "@tanstack/react-virtual": "3.1.3", + "@tanstack/react-virtual": "3.2.0", "highlight-words": "1.2.2" } -} \ No newline at end of file +} diff --git a/packages/material-react-table/src/components/buttons/MRT_EditActionButtons.tsx b/packages/material-react-table/src/components/buttons/MRT_EditActionButtons.tsx index 30d0d2c1a..d802d175e 100644 --- a/packages/material-react-table/src/components/buttons/MRT_EditActionButtons.tsx +++ b/packages/material-react-table/src/components/buttons/MRT_EditActionButtons.tsx @@ -105,8 +105,8 @@ export const MRT_EditActionButtons = ({ {isSaving ? : } @@ -119,10 +119,10 @@ export const MRT_EditActionButtons = ({ {localization.cancel}