94 lines
2.0 KiB
TypeScript
94 lines
2.0 KiB
TypeScript
import { StorybookConfig } from '@storybook/react-webpack5';
|
|
|
|
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
|
|
import { Configuration } from 'webpack';
|
|
import postcss from 'postcss';
|
|
|
|
const config: StorybookConfig = {
|
|
stories: ['../app/**/*.stories.@(ts|tsx)'],
|
|
addons: [
|
|
'@storybook/addon-links',
|
|
'@storybook/addon-essentials',
|
|
{
|
|
name: '@storybook/addon-styling',
|
|
options: {
|
|
cssLoaderOptions: {
|
|
importLoaders: 1,
|
|
modules: {
|
|
localIdentName: '[path][name]__[local]',
|
|
auto: true,
|
|
exportLocalsConvention: 'camelCaseOnly',
|
|
},
|
|
},
|
|
postCss: {
|
|
implementation: postcss,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
webpackFinal: (config) => {
|
|
const rules = config?.module?.rules || [];
|
|
|
|
const imageRule = rules.find((rule) => {
|
|
const test = (rule as { test: RegExp }).test;
|
|
|
|
if (!test) {
|
|
return false;
|
|
}
|
|
|
|
return test.test('.svg');
|
|
}) as { [key: string]: any };
|
|
|
|
imageRule.exclude = /\.svg$/;
|
|
|
|
rules.unshift({
|
|
test: /\.svg$/i,
|
|
type: 'asset',
|
|
resourceQuery: {
|
|
not: [/c/],
|
|
}, // exclude react component if *.svg?url
|
|
});
|
|
|
|
rules.unshift({
|
|
test: /\.svg$/i,
|
|
issuer: /\.(js|ts)(x)?$/,
|
|
resourceQuery: /c/,
|
|
// *.svg?c
|
|
use: [
|
|
{
|
|
loader: '@svgr/webpack',
|
|
options: {
|
|
icon: true,
|
|
},
|
|
},
|
|
],
|
|
});
|
|
return {
|
|
...config,
|
|
resolve: {
|
|
...config.resolve,
|
|
plugins: [
|
|
...(config.resolve?.plugins || []),
|
|
new TsconfigPathsPlugin({
|
|
extensions: config.resolve?.extensions,
|
|
}),
|
|
],
|
|
},
|
|
module: {
|
|
...config.module,
|
|
rules,
|
|
},
|
|
} satisfies Configuration;
|
|
},
|
|
staticDirs: ['./public'],
|
|
typescript: {
|
|
reactDocgen: 'react-docgen-typescript',
|
|
},
|
|
framework: {
|
|
name: '@storybook/react-webpack5',
|
|
options: {},
|
|
},
|
|
};
|
|
|
|
export default config;
|