rh_styleguide/.storybook/main.js

Styleguide for Region Halland

const path = require('path');

module.exports = {
	stories: ['../docs/**/*.stories.tsx'],
	addons: [
		'@storybook/addon-backgrounds/register',
		'@storybook/addon-a11y/register',
		'@storybook/addon-actions/register',
		'@storybook/addon-knobs/register',
		'@storybook/addon-storysource',
		'@storybook/addon-viewport/register',
		'@storybook/preset-typescript',
		'@whitespace/storybook-addon-html/register',
	],
	webpackFinal: async (config, { configType }) => {
		config.resolve = {
			modules: ['node_modules'],
			extensions: [
				'.web.js',
				'.js',
				'.json',
				'.web.jsx',
				'.jsx',
				'ts',
				'tsx',
			],
			alias: {
				'react-native': 'react-native-web',
			},
		};

		config.module.rules.push({
			test: /\.css$/i,
			loaders: [
				{
					loader: 'postcss-loader',
					options: {
						sourceMap: true,
						config: {
							path: './.storybook/',
						},
					},
				},
			],
			include: path.resolve(__dirname, '../src/css/'),
		});

		config.module.rules.push({
			test: /\.stories\.tsx?$/,
			loaders: [
				{
					loader: require.resolve('@storybook/source-loader'),
					options: {
						parser: 'typescript',

						prettierConfig: path.resolve(
							__dirname,
							'/../.prettierrc',
						),
					},
				},
			],
			enforce: 'pre',
		});

		config.module.rules.push({
			test: /\.(ts|tsx)$/,
			use: [
				{
					loader: require.resolve('ts-loader'),
				},
			],
		});
		config.resolve.extensions.push('.ts', '.tsx');

		return config;
	},
};