-
Notifications
You must be signed in to change notification settings - Fork 14
/
preview.ts
97 lines (84 loc) · 2.42 KB
/
preview.ts
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
import type { Preview } from '@storybook/web-components';
import { extractArgTypes, extractComponentDescription } from '@kurbar/storybook-addon-docs-stencil';
import { format } from 'prettier';
import DocsLayout from './blocks/layout/layout';
import {
fullScreenUrlDecorator,
openFullScreenDemo,
prettierOptions,
resetComponents,
} from './helpers';
import './helpers/register-web-components';
import './addons/cypress-storybook/client';
import './styles/preview.scss';
import { SyntaxHighlighter } from '@storybook/components';
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
SyntaxHighlighter.registerLanguage('scss', scss);
export const SourceDarkMode = true;
const preview: Preview = {
decorators: [fullScreenUrlDecorator],
parameters: {
options: {
storySort: {
method: 'alphabetical',
order: [
'Home',
// Category - Getting Started
'Getting Started',
['Introduction', 'Angular', 'Compatibility', 'Packages', 'Changelogs', 'Migration Guide'],
// Category - Foundations
'Foundations',
[
'Typography',
'Color',
'Search for Icons',
'Layout',
['Breakpoints', 'Containers', 'Grid', 'Columns', 'TODOS'],
'Elevation',
'Accessibility',
],
// Category - Components
'Components',
// Category - Patterns
'Patterns',
['Metadata', 'Forms'],
// Category - Utilities
'Utilities',
// Category - Misc
'Misc',
['Migration Guide', 'Changelog', 'Versions'],
// Category - Snapshots (hidden)
'Snapshots',
],
},
},
docs: {
container: DocsLayout,
canvas: {
additionalActions: [
{
title: 'View full screen',
onClick: openFullScreenDemo,
},
],
},
source: {
excludeDecorators: true,
dark: SourceDarkMode,
transform: (snippet: string) => format(snippet, prettierOptions),
},
components: resetComponents,
extractArgTypes,
extractComponentDescription,
},
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
hideNoControlsWarning: true,
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};
export default preview;