/
preview.tsx
104 lines (95 loc) · 3.12 KB
/
preview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React, { useEffect, useState } from 'react';
import { addons } from '@storybook/preview-api';
import { Preview } from '@storybook/react';
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' },
});
const darkTheme = createTheme({
palette: { mode: 'dark' },
});
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
decorators: [
(Story, context) => {
const [isDark, setDark] = useState(true);
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 = theme.palette.background.default;
}
return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
}, [theme]);
useEffect(() => {
if (process.env.NODE_ENV === 'development') return;
const script = document.createElement('script');
script.src = 'https://plausible.io/js/script.js';
script.setAttribute('data-domain', 'material-react-table.dev');
script.defer = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Typography
sx={{
pb: '0.5rem',
color: useDarkMode() ? '#fff' : '#666',
}}
variant="subtitle2"
>
Looking for the main docs site? Click{' '}
<Link
href="https://www.material-react-table.com"
target="_blank"
rel="noopener"
>
here.
</Link>
</Typography>
<Typography
variant="subtitle2"
sx={{
pb: '1rem',
color: useDarkMode() ? '#fff' : '#666',
}}
>
View Source code for these examples in the code tab below or{' '}
<Link
href="https://github.com/KevinVandy/material-react-table/tree/v2/packages/material-react-table/stories/features"
target="_blank"
>
here on GitHub.
</Link>
</Typography>
<Story {...context} />
</LocalizationProvider>
</ThemeProvider>
);
},
],
};
export default preview;