111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
import {StorybookConfig} from '@storybook/angular';
|
|
import * as path from 'path';
|
|
|
|
const config: StorybookConfig = {
|
|
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)', './stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
|
|
addons: [
|
|
'@storybook/addon-links',
|
|
'@storybook/addon-docs',
|
|
// '@storybook/addon-viewport',
|
|
// Removed deprecated addons:
|
|
// '@storybook/addon-backgrounds' - no longer exists in Storybook 9.0+
|
|
// '@storybook/addon-controls' - no longer exists in Storybook 9.0+
|
|
// ... autres addons
|
|
],
|
|
framework: {
|
|
name: '@storybook/angular',
|
|
options: {}
|
|
},
|
|
webpackFinal: async (config) => {
|
|
if (config.module?.rules) {
|
|
// Support MDX
|
|
config.module.rules.push({
|
|
test: /\.mdx?$/,
|
|
use: [{loader: require.resolve('@mdx-js/loader')}],
|
|
});
|
|
|
|
// Support fonts amélioré
|
|
config.module.rules.push({
|
|
test: /\.(woff|woff2|eot|ttf|otf)$/,
|
|
type: 'asset/resource',
|
|
generator: {filename: 'fonts/[name].[contenthash][ext]'},
|
|
});
|
|
|
|
// Support for remixicon font files specifically
|
|
config.module.rules.push({
|
|
test: /remixicon.*\.(woff|woff2|eot|ttf|svg)$/,
|
|
type: 'asset/resource',
|
|
generator: {filename: 'fonts/[name].[contenthash][ext]'},
|
|
});
|
|
|
|
// Add CSS loader rule to handle @font-face declarations
|
|
config.module.rules.push({
|
|
test: /\.css$/,
|
|
use: [
|
|
'style-loader',
|
|
{
|
|
loader: 'css-loader',
|
|
options: {
|
|
url: true
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// NOUVELLE SOLUTION : Configurer css-loader pour gérer les URLs
|
|
const scssRules = config.module.rules.filter(rule => {
|
|
if (rule && typeof rule === 'object' && 'test' in rule && rule.test) {
|
|
const testString = rule.test.toString();
|
|
return testString.includes('scss') || testString.includes('sass');
|
|
}
|
|
return false;
|
|
});
|
|
|
|
scssRules.forEach(rule => {
|
|
if (rule && typeof rule === 'object' && 'use' in rule && Array.isArray(rule.use)) {
|
|
const cssLoaderIndex = rule.use.findIndex((loader: any) => {
|
|
if (typeof loader === 'string') {
|
|
return loader.includes('css-loader');
|
|
}
|
|
return loader && loader.loader && loader.loader.includes('css-loader');
|
|
});
|
|
|
|
if (cssLoaderIndex !== -1) {
|
|
const cssLoader = rule.use[cssLoaderIndex] as any;
|
|
if (typeof cssLoader === 'object' && cssLoader.options) {
|
|
cssLoader.options.url = {
|
|
filter: (url: string) => {
|
|
// Skip problematic URLs with complex relative paths
|
|
if (url.includes('../../../../my-workspace/')) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
};
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Alias
|
|
if (!config.resolve) config.resolve = {};
|
|
if (!config.resolve.alias) config.resolve.alias = {};
|
|
|
|
config.resolve.alias['~src'] = path.resolve(__dirname, '../src');
|
|
config.resolve.alias['sae-lib'] = path.resolve(__dirname, '../../my-workspace/projects/sae-lib');
|
|
|
|
// Ajouter un alias pour remixicon
|
|
config.resolve.alias['remixicon'] = path.resolve(__dirname, '../node_modules/remixicon');
|
|
|
|
// Modules resolution
|
|
if (!config.resolve.modules) config.resolve.modules = [];
|
|
config.resolve.modules.push(path.resolve(__dirname, '../node_modules'));
|
|
|
|
config.resolve.symlinks = true;
|
|
|
|
return config;
|
|
}
|
|
};
|
|
|
|
export default config;
|