2021-04-28 21:53:59 +02:00
|
|
|
const path = require('path');
|
2023-05-18 04:07:42 +02:00
|
|
|
const {
|
|
|
|
ProvidePlugin
|
|
|
|
} = require('webpack');
|
2021-04-28 21:53:59 +02:00
|
|
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
2023-05-18 04:07:42 +02:00
|
|
|
const {
|
|
|
|
generateIconNames
|
|
|
|
} = require('../development/generate-icon-names');
|
2020-02-26 14:34:59 +01:00
|
|
|
module.exports = {
|
2022-11-29 19:23:36 +01:00
|
|
|
core: {
|
2023-05-18 04:07:42 +02:00
|
|
|
disableTelemetry: true
|
2022-11-29 19:23:36 +01:00
|
|
|
},
|
2023-05-18 04:07:42 +02:00
|
|
|
features: {
|
|
|
|
buildStoriesJson: true
|
|
|
|
},
|
|
|
|
stories: ['../ui/**/*.stories.js', '../ui/**/*.stories.tsx', '../ui/**/*.stories.mdx', './*.stories.mdx'],
|
|
|
|
addons: ['@storybook/addon-essentials', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-knobs', './i18n-party-addon/register.js', 'storybook-dark-mode', '@whitespace/storybook-addon-html', '@storybook/addon-mdx-gfm'],
|
2022-09-07 00:58:22 +02:00
|
|
|
staticDirs: ['../app', './images'],
|
2021-10-29 19:22:07 +02:00
|
|
|
// Uses babel.config.js settings and prevents "Missing class properties transform" error
|
2023-05-18 04:07:42 +02:00
|
|
|
babel: async options => ({
|
|
|
|
overrides: options.overrides
|
|
|
|
}),
|
2022-09-20 19:15:14 +02:00
|
|
|
// Sets env variables https://storybook.js.org/docs/react/configure/environment-variables/
|
2023-05-18 04:07:42 +02:00
|
|
|
env: async config => {
|
2022-09-20 19:15:14 +02:00
|
|
|
return {
|
|
|
|
...config,
|
|
|
|
// Creates the icon names environment variable for the component-library/icon/icon.js component
|
2023-05-18 04:07:42 +02:00
|
|
|
ICON_NAMES: generateIconNames()
|
2022-09-20 19:15:14 +02:00
|
|
|
};
|
|
|
|
},
|
2023-05-18 04:07:42 +02:00
|
|
|
webpackFinal: async config => {
|
2021-10-29 19:22:07 +02:00
|
|
|
config.context = process.cwd();
|
2021-09-15 20:55:48 +02:00
|
|
|
config.node = {
|
2023-05-18 04:07:42 +02:00
|
|
|
__filename: true
|
2021-10-29 19:22:07 +02:00
|
|
|
};
|
2023-05-18 04:07:42 +02:00
|
|
|
config.resolve.alias['webextension-polyfill'] = require.resolve('../ui/__mocks__/webextension-polyfill.js');
|
2022-11-29 19:23:36 +01:00
|
|
|
config.resolve.fallback = {
|
|
|
|
child_process: false,
|
|
|
|
constants: false,
|
|
|
|
crypto: false,
|
|
|
|
fs: false,
|
|
|
|
http: false,
|
|
|
|
https: false,
|
|
|
|
os: false,
|
|
|
|
path: false,
|
|
|
|
stream: require.resolve('stream-browserify'),
|
2023-05-16 16:59:42 +02:00
|
|
|
zlib: false,
|
2023-05-18 04:07:42 +02:00
|
|
|
_stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'),
|
2022-11-29 19:23:36 +01:00
|
|
|
};
|
2021-04-28 21:53:59 +02:00
|
|
|
config.module.strictExportPresence = true;
|
2020-11-30 21:10:46 +01:00
|
|
|
config.module.rules.push({
|
|
|
|
test: /\.scss$/,
|
2023-05-18 04:07:42 +02:00
|
|
|
use: ['style-loader', {
|
|
|
|
loader: 'css-loader',
|
|
|
|
options: {
|
|
|
|
import: false,
|
|
|
|
url: false
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
loader: 'sass-loader',
|
|
|
|
options: {
|
|
|
|
sourceMap: true,
|
|
|
|
implementation: require('sass'),
|
|
|
|
sassOptions: {
|
|
|
|
includePaths: ['ui/css/']
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}]
|
2021-04-28 21:53:59 +02:00
|
|
|
});
|
2023-05-18 04:07:42 +02:00
|
|
|
config.plugins.push(new CopyWebpackPlugin({
|
|
|
|
patterns: [{
|
|
|
|
from: path.join('node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
|
|
|
|
to: path.join('fonts', 'fontawesome')
|
|
|
|
}]
|
|
|
|
}));
|
|
|
|
config.plugins.push(new ProvidePlugin({
|
|
|
|
Buffer: ['buffer', 'Buffer']
|
|
|
|
}));
|
2021-04-28 21:53:59 +02:00
|
|
|
return config;
|
2020-11-30 21:10:46 +01:00
|
|
|
},
|
2023-05-18 04:07:42 +02:00
|
|
|
docs: {
|
|
|
|
autodocs: true
|
|
|
|
},
|
|
|
|
framework: {
|
|
|
|
name: '@storybook/react-webpack5',
|
|
|
|
options: {}
|
|
|
|
}
|
2021-04-28 21:53:59 +02:00
|
|
|
};
|