1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 20:39:08 +01:00
metamask-extension/.storybook/main.js
Maarten Zuidhoorn c341abaea6
Use Webpack 5 for Storybook (#16678)
* Fix storybook

* Update policies

* Bump all Storybook dependencies to the latest version

* Add Storybook dependencies to depcheck ignore list

* Update policy-override.json

* Fix SectionShape circular dependency

* Change policy override for eslint-scope

* Fix some Webpack build issues

* Add missing dependency

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
2022-11-29 19:23:36 +01:00

103 lines
2.6 KiB
JavaScript

const path = require('path');
const { ProvidePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { generateIconNames } = require('../development/generate-icon-names');
module.exports = {
core: {
builder: 'webpack5',
},
stories: [
'../ui/**/*.stories.js',
'../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',
],
staticDirs: ['../app', './images'],
// Uses babel.config.js settings and prevents "Missing class properties transform" error
babel: async (options) => ({ overrides: options.overrides }),
// Sets env variables https://storybook.js.org/docs/react/configure/environment-variables/
env: async (config) => {
return {
...config,
// Creates the icon names environment variable for the component-library/icon/icon.js component
ICON_NAMES: await generateIconNames(),
};
},
webpackFinal: async (config) => {
config.context = process.cwd();
config.node = {
__filename: true,
};
config.resolve.alias['webextension-polyfill'] = require.resolve(
'./__mocks__/webextension-polyfill.js',
);
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'),
_stream_transform: false,
};
config.module.strictExportPresence = true;
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
import: false,
url: false,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
implementation: require('sass'),
sassOptions: {
includePaths: ['ui/css/'],
},
},
},
],
});
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'],
}),
)
return config;
},
};