53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
|
import type { StorybookConfig } from '@storybook/nextjs';
|
||
|
|
import path from 'path';
|
||
|
|
import TsConfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
|
||
|
|
|
||
|
|
const config: StorybookConfig = {
|
||
|
|
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||
|
|
webpackFinal: async (config: any) => {
|
||
|
|
config.module = config.module || {};
|
||
|
|
config.module.rules = config.module.rules || [];
|
||
|
|
config.resolve.plugins = config.resolve.plugins || [];
|
||
|
|
|
||
|
|
// This modifies the existing image rule to exclude .svg files
|
||
|
|
// since you want to handle those files with @svgr/webpack
|
||
|
|
const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
|
||
|
|
if (imageRule) {
|
||
|
|
imageRule['exclude'] = /\.svg$/;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Configure .svg files to be loaded with @svgr/webpack
|
||
|
|
config.module.rules.push({
|
||
|
|
test: /\.svg$/,
|
||
|
|
use: ['@svgr/webpack'],
|
||
|
|
});
|
||
|
|
|
||
|
|
config.resolve.plugins = config.resolve.plugins || [];
|
||
|
|
config.resolve.plugins.push(
|
||
|
|
new TsConfigPathsPlugin({
|
||
|
|
configFile: path.resolve(__dirname, "../tsconfig.json"),
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
return config;
|
||
|
|
},
|
||
|
|
addons: [
|
||
|
|
'@storybook/addon-links',
|
||
|
|
'@storybook/addon-essentials',
|
||
|
|
'@storybook/addon-onboarding',
|
||
|
|
'@storybook/addon-interactions',
|
||
|
|
{
|
||
|
|
name: '@storybook/addon-styling',
|
||
|
|
options: {},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
framework: {
|
||
|
|
name: '@storybook/nextjs',
|
||
|
|
options: {},
|
||
|
|
},
|
||
|
|
docs: {
|
||
|
|
autodocs: 'tag',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
export default config;
|