Skip to content

Commit

Permalink
Storybook 8 upgrade (#1047)
Browse files Browse the repository at this point in the history
* try to upgrade to storybook 8

* fix storybook ts gen

* Lint and Prettier

* fix mui type issue

---------

Co-authored-by: KevinVandy <kevinvandy@users.noreply.github.com>
  • Loading branch information
KevinVandy and KevinVandy committed Mar 18, 2024
1 parent 8de777f commit 9d7e42e
Show file tree
Hide file tree
Showing 14 changed files with 1,566 additions and 2,558 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Expand Up @@ -39,3 +39,5 @@ yarn-error.log*

# turbo
.turbo

*storybook.log
30 changes: 15 additions & 15 deletions apps/material-react-table-docs/package.json
Expand Up @@ -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",
Expand All @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions apps/test-cra/package.json
Expand Up @@ -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",
Expand Down
24 changes: 12 additions & 12 deletions apps/test-remix/package.json
Expand Up @@ -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"
},
Expand Down
18 changes: 9 additions & 9 deletions apps/test-vite/package.json
Expand Up @@ -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"
}
}
30 changes: 24 additions & 6 deletions packages/material-react-table/.eslintrc
Expand Up @@ -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",
Expand Down Expand Up @@ -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": {
Expand All @@ -54,5 +68,9 @@
],
},
"root": true,
"ignorePatterns": ["dist/", "locales/", "node_modules/"],
}
"ignorePatterns": [
"dist/",
"locales/",
"node_modules/"
],
}
44 changes: 27 additions & 17 deletions 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;
20 changes: 12 additions & 8 deletions 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' },
});
Expand All @@ -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;
Expand All @@ -55,7 +59,7 @@ const preview: Preview = {
}, []);

return (
<ThemeProvider theme={defaultTheme}>
<ThemeProvider theme={theme}>
<CssBaseline />
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Typography
Expand Down

0 comments on commit 9d7e42e

Please sign in to comment.