gutenberg/storybook/main.js at trunk · WordPress/gutenberg · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/**
 * External dependencies
 */
const path = require( 'path' );
const DefinePlugin = require( 'webpack' ).DefinePlugin;

/**
 * WordPress dependencies
 */
const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );

const scssLoaders = ( { isLazy } ) => [
	{
		loader: 'style-loader',
		options: { injectType: isLazy ? 'lazyStyleTag' : 'styleTag' },
	},
	'css-loader',
	{
		loader: 'postcss-loader',
		options: {
			postcssOptions: {
				ident: 'postcss',
				plugins: postcssPlugins,
			},
		},
	},
	'sass-loader',
];

const stories = [
	process.env.NODE_ENV !== 'test' && './stories/**/*.story.@(js|tsx)',
	process.env.NODE_ENV !== 'test' && './stories/**/*.mdx',
	'../packages/block-editor/src/**/stories/*.story.@(js|tsx|mdx)',
	'../packages/components/src/**/stories/*.story.@(js|tsx)',
	'../packages/components/src/**/stories/*.mdx',
	'../packages/icons/src/**/stories/*.story.@(js|tsx|mdx)',
	'../packages/edit-site/src/**/stories/*.story.@(js|tsx|mdx)',
	'../packages/dataviews/src/**/stories/*.story.@(js|tsx|mdx)',
].filter( Boolean );

module.exports = {
	core: {
		disableTelemetry: true,
	},
	stories,
	staticDirs: [ './static' ],
	addons: [
		{
			name: '@storybook/addon-docs',
			options: { configureJSX: true },
		},
		'@storybook/addon-controls',
		'@storybook/addon-viewport',
		'@storybook/addon-a11y',
		'@storybook/addon-toolbars',
		'@storybook/addon-actions',
		'@storybook/addon-webpack5-compiler-babel',
		'storybook-source-link',
		'@geometricpanda/storybook-addon-badges',
	],
	framework: {
		name: '@storybook/react-webpack5',
		options: {},
	},
	docs: {},
	typescript: {
		reactDocgen: 'react-docgen-typescript',
	},
	webpackFinal: async ( config ) => {
		return {
			...config,
			module: {
				...config.module,
				rules: [
					...config.module.rules,
					{
						test: /\/stories\/.+\.story\.(j|t)sx?$/,
						use: [
							{
								// Adds a `sourceLink` parameter to the story metadata, based on the file path
								loader: path.resolve(
									__dirname,
									'./webpack/source-link-loader.js'
								),
							},
							{
								// Reads `tags` from the story metadata and copies them to `badges`
								loader: path.resolve(
									__dirname,
									'./webpack/copy-tags-to-badges.js'
								),
							},
						],
						enforce: 'post',
					},
					{
						test: /\.scss$/,
						exclude: /\.lazy\.scss$/,
						use: scssLoaders( { isLazy: false } ),
						include: path.resolve( __dirname ),
					},
					{
						test: /\.lazy\.scss$/,
						use: scssLoaders( { isLazy: true } ),
						include: path.resolve( __dirname ),
					},
				],
			},
			plugins: [
				...config.plugins,
				new DefinePlugin( {
					// Ensures that `@wordpress/warning` can properly detect dev mode.
					'globalThis.SCRIPT_DEBUG': JSON.stringify(
						process.env.NODE_ENV === 'development'
					),
				} ),
			],
		};
	},
};