storybook 8 upgrade

KevinVandy · Mar 20, 2024 · 1efdaba · 1efdaba
1 parent 2ab7649
commit 1efdaba
Show file tree

Hide file tree

Showing 12 changed files with 1,896 additions and 2,683 deletions.
diff --git a/apps/mantine-react-table-docs/next.config.js b/apps/mantine-react-table-docs/next.config.js
@@ -9,6 +9,11 @@ const nextConfig = {
   },
   async redirects() {
     return [
+      {
+        source: '/docs/guides/customize-components',
+        destination: '/docs/guides/customize-component-styles',
+        permanent: true,
+      },
       {
         source: '/docs/guides/table-event-listeners',
         destination: '/docs/guides/event-listeners',

diff --git a/apps/mantine-react-table-docs/package.json b/apps/mantine-react-table-docs/package.json
@@ -13,46 +13,46 @@
     "sitemap": "pnpm docs:sitemap"
   },
   "dependencies": {
-    "@docsearch/js": "3.5.2",
+    "@docsearch/js": "3.6.0",
     "@faker-js/faker": "^8.4.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mantine/code-highlight": "7.6.0",
-    "@mantine/core": "7.6.0",
-    "@mantine/dates": "7.6.0",
-    "@mantine/hooks": "7.6.0",
-    "@mantine/modals": "7.6.0",
+    "@mantine/code-highlight": "7.6.2",
+    "@mantine/core": "7.6.2",
+    "@mantine/dates": "7.6.2",
+    "@mantine/hooks": "7.6.2",
+    "@mantine/modals": "7.6.2",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.1.0",
-    "@tabler/icons-react": "2.47.0",
-    "@tanstack/react-query": "^5.24.1",
+    "@next/mdx": "^14.1.4",
+    "@tabler/icons-react": "3.1.0",
+    "@tanstack/react-query": "^5.28.4",
     "@types/mdx": "^2.0.11",
     "clsx": "^2.1.0",
     "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",
     "mantine-react-table": "workspace:*",
-    "next": "14.1.0",
+    "next": "14.1.4",
     "next-sitemap": "^4.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.20",
-    "@types/react": "^18.2.58",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.1.0",
+    "eslint-config-next": "14.1.4",
     "next-plausible": "^3.12.0",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.37",
     "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1",
     "raw-loader": "^4.0.2",
-    "typescript": "5.3.3"
+    "typescript": "5.4.2"
   }
 }
diff --git a/apps/mantine-react-table-docs/pages/index.tsx b/apps/mantine-react-table-docs/pages/index.tsx
@@ -1,13 +1,5 @@
 import Link from 'next/link';
-import {
-  Alert,
-  Anchor,
-  Box,
-  Button,
-  Stack,
-  Text,
-  Title,
-} from '@mantine/core';
+import { Alert, Anchor, Box, Button, Stack, Text, Title } from '@mantine/core';
 import { IconChevronRight, IconInfoCircle } from '@tabler/icons-react';
 import { HomeCards } from '../components/mdx/HomeCards';
 import { LinkCards } from '../components/mdx/LinkCards';

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "prettier": "^3.2.5",
-    "turbo": "^1.12.4"
+    "turbo": "^1.12.5"
   },
   "engines": {
     "node": ">=16.0.0"

diff --git a/packages/mantine-react-table/.storybook/main.ts b/packages/mantine-react-table/.storybook/main.ts
@@ -1,28 +1,36 @@
-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-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    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/mantine-react-table/.storybook/preview.tsx b/packages/mantine-react-table/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 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 {
   Anchor,
   ColorSchemeScript,
@@ -15,6 +16,8 @@ import '@mantine/dates/styles.css'; //if using mantine date picker features
 import 'mantine-contextmenu/styles.css';
 import { ContextMenuProvider } from 'mantine-contextmenu';
 
+const channel = addons.getChannel();
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -27,7 +30,6 @@ const preview: Preview = {
   },
   decorators: [
     (Story, context) => {
-      const colorScheme = useDarkMode() ? 'dark' : 'light';
       const [primaryColor, setPrimaryColor] = useState<string>('blue');
       const mantineColors = [
         'dark',
@@ -46,15 +48,20 @@ const preview: Preview = {
         'orange',
       ];
 
+      const [isDark, setDark] = useState(false);
+      const colorScheme = isDark ? 'dark' : 'light';
+
       useEffect(() => {
         const sbRoot = document.getElementsByClassName(
           'sb-show-main',
         )[0] as HTMLElement;
+        channel.on(DARK_MODE_EVENT_NAME, setDark);
         if (sbRoot) {
           sbRoot.style.backgroundColor =
             colorScheme === 'dark' ? '#333' : '#fff';
         }
-      }, [useDarkMode()]);
+        return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
+      }, [isDark]);
 
       useEffect(() => {
         if (process.env.NODE_ENV === 'development') return;
@@ -72,7 +79,7 @@ const preview: Preview = {
       return (
         <MantineProvider
           forceColorScheme={colorScheme}
-          theme={{ colorScheme, primaryColor }}
+          theme={{ primaryColor }}
         >
           <ContextMenuProvider>
             <ColorSchemeScript forceColorScheme={colorScheme} />

diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json
@@ -79,62 +79,63 @@
     "storybook:dev": "storybook dev -p 6007"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
     "@faker-js/faker": "^8.4.1",
-    "@mantine/core": "7.6.0",
-    "@mantine/dates": "7.6.0",
-    "@mantine/hooks": "7.6.0",
+    "@mantine/core": "7.6.2",
+    "@mantine/dates": "7.6.2",
+    "@mantine/hooks": "7.6.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@size-limit/preset-small-lib": "^11.0.2",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-storysource": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
+    "@size-limit/preset-small-lib": "^11.1.1",
+    "@storybook/addon-a11y": "^8.0.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/addon-storysource": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/preview-api": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-vite": "^8.0.2",
     "@storybook/testing-library": "^0.2.2",
-    "@tabler/icons-react": "2.47.0",
-    "@types/node": "^20.11.20",
-    "@types/react": "^18.2.58",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@tabler/icons-react": "3.1.0",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "eslint": "^8.57.0",
-    "eslint-plugin-perfectionist": "^2.5.0",
-    "mantine-contextmenu": "^7.5.0",
-    "postcss": "^8.4.35",
+    "eslint-plugin-perfectionist": "^2.7.0",
+    "mantine-contextmenu": "^7.6.2",
+    "postcss": "^8.4.37",
     "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^4.12.0",
+    "rollup": "^4.13.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "size-limit": "^11.0.2",
-    "storybook": "^7.6.17",
-    "storybook-dark-mode": "^3.0.3",
+    "size-limit": "^11.1.1",
+    "storybook": "^8.0.2",
+    "storybook-dark-mode": "^4.0.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.1.4"
+    "vite": "^5.2.2"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.8",
-    "@tanstack/react-table": "8.12.0",
-    "@tanstack/react-virtual": "3.1.2"
+    "@tanstack/react-table": "8.14.0",
+    "@tanstack/react-virtual": "3.2.0"
   },
   "peerDependencies": {
     "@mantine/core": "^7.6",

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBody.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBody.tsx
@@ -19,7 +19,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_TableBodyProps<TData extends MRT_RowData> extends TableTbodyProps {
+export interface MRT_TableBodyProps<TData extends MRT_RowData>
+  extends TableTbodyProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
   tableProps: Partial<TableProps>;

diff --git a/packages/mantine-react-table/src/utils/displayColumn.utils.ts b/packages/mantine-react-table/src/utils/displayColumn.utils.ts
@@ -1,5 +1,5 @@
 import {
-  MRT_ColumnDef,
+  type MRT_ColumnDef,
   type MRT_DefinedTableOptions,
   type MRT_DisplayColumnIds,
   type MRT_Localization,

diff --git a/packages/mantine-react-table/stories/Playground.stories.tsx b/packages/mantine-react-table/stories/Playground.stories.tsx
diff --git a/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx b/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx
@@ -286,13 +286,7 @@ export const GroupingColumnsSetState = () => {
     ]);
   }, []);
 
-  return (
-    <MantineReactTable
-      columns={columns}
-      data={data}
-      enableGrouping
-    />
-  );
+  return <MantineReactTable columns={columns} data={data} enableGrouping />;
 };
 
 export const ColumnGroupingDropZoneAlwaysVisible = () => {