-
Notifications
You must be signed in to change notification settings - Fork 1
/
preview.js
69 lines (66 loc) · 1.57 KB
/
preview.js
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
import React from 'react';
import { Global, ThemeProvider, css } from '@emotion/react';
import { Root, Fonts, defaultTheme } from '@csssr/core-design';
import { getTransformSource } from './utils/getTransformSource';
import stylesLayout from '../components/Layout/Layout.styles';
const customViewports = {
mobile: {
name: 'mobile.all 360px',
styles: {
width: '360px',
height: '640px',
},
},
tablet: {
name: 'tablet.all 1024px',
styles: {
width: '1024px',
height: '768px',
},
},
desktopM: {
name: 'desktop.m 1360px',
styles: {
width: '1360px',
height: '1000px',
},
},
desktopL: {
name: 'desktop.l 1920px',
styles: {
width: '1920px',
height: '1000px',
},
},
};
export const parameters = {
viewport: { viewports: customViewports },
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
docs: {
transformSource: (_src, storyContext) => {
const { args, kind } = storyContext;
return getTransformSource(kind, args);
},
},
};
export const decorators = [
(Story) => (
<Root>
<ThemeProvider theme={defaultTheme}>
<Fonts preset="blog" />
<Story />
<Global styles={stylesLayout} />
{/* Для переопределения стилей блога, иначе код code source в одну строку */}
<Global styles={css`code {
white-space: pre;
}`}/>
</ThemeProvider>
</Root>
),
];