web3toybox.com/.storybook/main.ts

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;