Skip to content

Commit 1efdaba

Browse files
committed
storybook 8 upgrade
1 parent 2ab7649 commit 1efdaba

File tree

12 files changed

+1896
-2683
lines changed

12 files changed

+1896
-2683
lines changed

apps/mantine-react-table-docs/next.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ const nextConfig = {
99
},
1010
async redirects() {
1111
return [
12+
{
13+
source: '/docs/guides/customize-components',
14+
destination: '/docs/guides/customize-component-styles',
15+
permanent: true,
16+
},
1217
{
1318
source: '/docs/guides/table-event-listeners',
1419
destination: '/docs/guides/event-listeners',

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,46 +13,46 @@
1313
"sitemap": "pnpm docs:sitemap"
1414
},
1515
"dependencies": {
16-
"@docsearch/js": "3.5.2",
16+
"@docsearch/js": "3.6.0",
1717
"@faker-js/faker": "^8.4.1",
1818
"@fortawesome/fontawesome-svg-core": "^6.5.1",
1919
"@fortawesome/free-solid-svg-icons": "^6.5.1",
2020
"@fortawesome/react-fontawesome": "^0.2.0",
21-
"@mantine/code-highlight": "7.6.0",
22-
"@mantine/core": "7.6.0",
23-
"@mantine/dates": "7.6.0",
24-
"@mantine/hooks": "7.6.0",
25-
"@mantine/modals": "7.6.0",
21+
"@mantine/code-highlight": "7.6.2",
22+
"@mantine/core": "7.6.2",
23+
"@mantine/dates": "7.6.2",
24+
"@mantine/hooks": "7.6.2",
25+
"@mantine/modals": "7.6.2",
2626
"@mdx-js/loader": "^3.0.1",
2727
"@mdx-js/react": "^3.0.1",
28-
"@next/mdx": "^14.1.0",
29-
"@tabler/icons-react": "2.47.0",
30-
"@tanstack/react-query": "^5.24.1",
28+
"@next/mdx": "^14.1.4",
29+
"@tabler/icons-react": "3.1.0",
30+
"@tanstack/react-query": "^5.28.4",
3131
"@types/mdx": "^2.0.11",
3232
"clsx": "^2.1.0",
3333
"dayjs": "^1.11.10",
34-
"export-to-csv": "^1.2.3",
34+
"export-to-csv": "^1.2.4",
3535
"jspdf": "^2.5.1",
3636
"jspdf-autotable": "^3.8.2",
3737
"mantine-react-table": "workspace:*",
38-
"next": "14.1.0",
38+
"next": "14.1.4",
3939
"next-sitemap": "^4.2.3",
4040
"react": "18.2.0",
4141
"react-dom": "18.2.0"
4242
},
4343
"devDependencies": {
44-
"@types/node": "^20.11.20",
45-
"@types/react": "^18.2.58",
46-
"@types/react-dom": "^18.2.19",
47-
"@typescript-eslint/eslint-plugin": "^7.0.2",
48-
"@typescript-eslint/parser": "^7.0.2",
44+
"@types/node": "^20.11.30",
45+
"@types/react": "^18.2.67",
46+
"@types/react-dom": "^18.2.22",
47+
"@typescript-eslint/eslint-plugin": "^7.3.1",
48+
"@typescript-eslint/parser": "^7.3.1",
4949
"eslint": "8.57.0",
50-
"eslint-config-next": "14.1.0",
50+
"eslint-config-next": "14.1.4",
5151
"next-plausible": "^3.12.0",
52-
"postcss": "^8.4.35",
52+
"postcss": "^8.4.37",
5353
"postcss-preset-mantine": "^1.13.0",
5454
"postcss-simple-vars": "^7.0.1",
5555
"raw-loader": "^4.0.2",
56-
"typescript": "5.3.3"
56+
"typescript": "5.4.2"
5757
}
5858
}

apps/mantine-react-table-docs/pages/index.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import Link from 'next/link';
2-
import {
3-
Alert,
4-
Anchor,
5-
Box,
6-
Button,
7-
Stack,
8-
Text,
9-
Title,
10-
} from '@mantine/core';
2+
import { Alert, Anchor, Box, Button, Stack, Text, Title } from '@mantine/core';
113
import { IconChevronRight, IconInfoCircle } from '@tabler/icons-react';
124
import { HomeCards } from '../components/mdx/HomeCards';
135
import { LinkCards } from '../components/mdx/LinkCards';

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
},
2828
"devDependencies": {
2929
"prettier": "^3.2.5",
30-
"turbo": "^1.12.4"
30+
"turbo": "^1.12.5"
3131
},
3232
"engines": {
3333
"node": ">=16.0.0"
Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
1-
import { StorybookConfig } from '@storybook/react-vite';
1+
import type { StorybookConfig } from '@storybook/react-vite';
2+
3+
import { join, dirname } from 'path';
4+
5+
/**
6+
* This function is used to resolve the absolute path of a package.
7+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
8+
*/
9+
function getAbsolutePath(value: string): any {
10+
return dirname(require.resolve(join(value, 'package.json')));
11+
}
212
const config: StorybookConfig = {
3-
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
13+
stories: [
14+
'../stories/**/*.mdx',
15+
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
16+
],
417
addons: [
5-
'@storybook/addon-links',
6-
'@storybook/addon-essentials',
7-
'@storybook/addon-interactions',
8-
'@storybook/addon-a11y',
9-
'storybook-dark-mode',
10-
{
11-
name: '@storybook/addon-storysource',
12-
options: {
13-
loaderOptions: {
14-
injectStoryParameters: false,
15-
prettierConfig: { printWidth: 40, singleQuote: false },
16-
},
17-
},
18-
},
18+
getAbsolutePath('@storybook/addon-links'),
19+
getAbsolutePath('@storybook/addon-essentials'),
20+
getAbsolutePath('@storybook/addon-interactions'),
21+
getAbsolutePath('@storybook/addon-a11y'),
22+
getAbsolutePath('@storybook/addon-storysource'),
23+
getAbsolutePath('storybook-dark-mode'),
1924
],
2025
framework: {
21-
name: '@storybook/react-vite',
26+
name: getAbsolutePath('@storybook/react-vite'),
2227
options: {},
2328
},
2429
docs: {
2530
autodocs: 'tag',
2631
},
32+
typescript: {
33+
reactDocgen: 'react-docgen-typescript',
34+
},
2735
};
2836
export default config;

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useEffect, useState } from 'react';
2+
import { addons } from '@storybook/preview-api';
23
import { Preview } from '@storybook/react';
3-
import { useDarkMode } from 'storybook-dark-mode';
4+
import { useDarkMode, DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
45
import {
56
Anchor,
67
ColorSchemeScript,
@@ -15,6 +16,8 @@ import '@mantine/dates/styles.css'; //if using mantine date picker features
1516
import 'mantine-contextmenu/styles.css';
1617
import { ContextMenuProvider } from 'mantine-contextmenu';
1718

19+
const channel = addons.getChannel();
20+
1821
const preview: Preview = {
1922
parameters: {
2023
actions: { argTypesRegex: '^on[A-Z].*' },
@@ -27,7 +30,6 @@ const preview: Preview = {
2730
},
2831
decorators: [
2932
(Story, context) => {
30-
const colorScheme = useDarkMode() ? 'dark' : 'light';
3133
const [primaryColor, setPrimaryColor] = useState<string>('blue');
3234
const mantineColors = [
3335
'dark',
@@ -46,15 +48,20 @@ const preview: Preview = {
4648
'orange',
4749
];
4850

51+
const [isDark, setDark] = useState(false);
52+
const colorScheme = isDark ? 'dark' : 'light';
53+
4954
useEffect(() => {
5055
const sbRoot = document.getElementsByClassName(
5156
'sb-show-main',
5257
)[0] as HTMLElement;
58+
channel.on(DARK_MODE_EVENT_NAME, setDark);
5359
if (sbRoot) {
5460
sbRoot.style.backgroundColor =
5561
colorScheme === 'dark' ? '#333' : '#fff';
5662
}
57-
}, [useDarkMode()]);
63+
return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
64+
}, [isDark]);
5865

5966
useEffect(() => {
6067
if (process.env.NODE_ENV === 'development') return;
@@ -72,7 +79,7 @@ const preview: Preview = {
7279
return (
7380
<MantineProvider
7481
forceColorScheme={colorScheme}
75-
theme={{ colorScheme, primaryColor }}
82+
theme={{ primaryColor }}
7683
>
7784
<ContextMenuProvider>
7885
<ColorSchemeScript forceColorScheme={colorScheme} />

packages/mantine-react-table/package.json

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -79,62 +79,63 @@
7979
"storybook:dev": "storybook dev -p 6007"
8080
},
8181
"devDependencies": {
82-
"@babel/core": "^7.23.9",
83-
"@babel/preset-react": "^7.23.3",
82+
"@babel/core": "^7.24.3",
83+
"@babel/preset-react": "^7.24.1",
8484
"@faker-js/faker": "^8.4.1",
85-
"@mantine/core": "7.6.0",
86-
"@mantine/dates": "7.6.0",
87-
"@mantine/hooks": "7.6.0",
85+
"@mantine/core": "7.6.2",
86+
"@mantine/dates": "7.6.2",
87+
"@mantine/hooks": "7.6.2",
8888
"@rollup/plugin-babel": "^6.0.4",
8989
"@rollup/plugin-node-resolve": "^15.2.3",
9090
"@rollup/plugin-typescript": "^11.1.6",
91-
"@size-limit/preset-small-lib": "^11.0.2",
92-
"@storybook/addon-a11y": "^7.6.17",
93-
"@storybook/addon-essentials": "^7.6.17",
94-
"@storybook/addon-interactions": "^7.6.17",
95-
"@storybook/addon-links": "^7.6.17",
96-
"@storybook/addon-storysource": "^7.6.17",
97-
"@storybook/blocks": "^7.6.17",
98-
"@storybook/react": "^7.6.17",
99-
"@storybook/react-vite": "^7.6.17",
91+
"@size-limit/preset-small-lib": "^11.1.1",
92+
"@storybook/addon-a11y": "^8.0.2",
93+
"@storybook/addon-essentials": "^8.0.2",
94+
"@storybook/addon-interactions": "^8.0.2",
95+
"@storybook/addon-links": "^8.0.2",
96+
"@storybook/addon-storysource": "^8.0.2",
97+
"@storybook/blocks": "^8.0.2",
98+
"@storybook/preview-api": "^8.0.2",
99+
"@storybook/react": "^8.0.2",
100+
"@storybook/react-vite": "^8.0.2",
100101
"@storybook/testing-library": "^0.2.2",
101-
"@tabler/icons-react": "2.47.0",
102-
"@types/node": "^20.11.20",
103-
"@types/react": "^18.2.58",
104-
"@types/react-dom": "^18.2.19",
105-
"@typescript-eslint/eslint-plugin": "^7.0.2",
106-
"@typescript-eslint/parser": "^7.0.2",
102+
"@tabler/icons-react": "3.1.0",
103+
"@types/node": "^20.11.30",
104+
"@types/react": "^18.2.67",
105+
"@types/react-dom": "^18.2.22",
106+
"@typescript-eslint/eslint-plugin": "^7.3.1",
107+
"@typescript-eslint/parser": "^7.3.1",
107108
"@vitejs/plugin-react": "^4.2.1",
108109
"clsx": "^2.1.0",
109110
"dayjs": "^1.11.10",
110111
"eslint": "^8.57.0",
111-
"eslint-plugin-perfectionist": "^2.5.0",
112-
"mantine-contextmenu": "^7.5.0",
113-
"postcss": "^8.4.35",
112+
"eslint-plugin-perfectionist": "^2.7.0",
113+
"mantine-contextmenu": "^7.6.2",
114+
"postcss": "^8.4.37",
114115
"postcss-preset-mantine": "^1.13.0",
115116
"postcss-simple-vars": "^7.0.1",
116117
"prop-types": "^15.8.1",
117118
"react": "^18.2.0",
118119
"react-dom": "^18.2.0",
119120
"react-is": "^18.2.0",
120-
"rollup": "^4.12.0",
121+
"rollup": "^4.13.0",
121122
"rollup-plugin-copy": "^3.5.0",
122123
"rollup-plugin-delete": "^2.0.0",
123124
"rollup-plugin-dts": "^6.1.0",
124125
"rollup-plugin-peer-deps-external": "^2.2.4",
125126
"rollup-plugin-postcss": "^4.0.2",
126-
"size-limit": "^11.0.2",
127-
"storybook": "^7.6.17",
128-
"storybook-dark-mode": "^3.0.3",
127+
"size-limit": "^11.1.1",
128+
"storybook": "^8.0.2",
129+
"storybook-dark-mode": "^4.0.1",
129130
"tslib": "^2.6.2",
130-
"typescript": "^5.3.3",
131+
"typescript": "^5.4.2",
131132
"typescript-plugin-css-modules": "^5.1.0",
132-
"vite": "^5.1.4"
133+
"vite": "^5.2.2"
133134
},
134135
"dependencies": {
135136
"@tanstack/match-sorter-utils": "8.11.8",
136-
"@tanstack/react-table": "8.12.0",
137-
"@tanstack/react-virtual": "3.1.2"
137+
"@tanstack/react-table": "8.14.0",
138+
"@tanstack/react-virtual": "3.2.0"
138139
},
139140
"peerDependencies": {
140141
"@mantine/core": "^7.6",

packages/mantine-react-table/src/components/body/MRT_TableBody.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import {
1919
} from '../../types';
2020
import { parseFromValuesOrFunc } from '../../utils/utils';
2121

22-
export interface MRT_TableBodyProps<TData extends MRT_RowData> extends TableTbodyProps {
22+
export interface MRT_TableBodyProps<TData extends MRT_RowData>
23+
extends TableTbodyProps {
2324
columnVirtualizer?: MRT_ColumnVirtualizer;
2425
table: MRT_TableInstance<TData>;
2526
tableProps: Partial<TableProps>;

packages/mantine-react-table/src/utils/displayColumn.utils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
MRT_ColumnDef,
2+
type MRT_ColumnDef,
33
type MRT_DefinedTableOptions,
44
type MRT_DisplayColumnIds,
55
type MRT_Localization,

packages/mantine-react-table/stories/Playground.stories.tsx

Lines changed: 0 additions & 55 deletions
This file was deleted.

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -286,13 +286,7 @@ export const GroupingColumnsSetState = () => {
286286
]);
287287
}, []);
288288

289-
return (
290-
<MantineReactTable
291-
columns={columns}
292-
data={data}
293-
enableGrouping
294-
/>
295-
);
289+
return <MantineReactTable columns={columns} data={data} enableGrouping />;
296290
};
297291

298292
export const ColumnGroupingDropZoneAlwaysVisible = () => {

0 commit comments

Comments
 (0)