web: storybook: Fixed loading inline svgs
This commit is contained in:
parent
ab2aff67a4
commit
60d608278f
@ -2,8 +2,8 @@ import { configure, addDecorator, addParameters } from '@storybook/react';
|
||||
import { withA11y } from '@storybook/addon-a11y';
|
||||
import { addReadme } from 'storybook-readme';
|
||||
import { withConsole } from '@storybook/addon-console';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import 'react-toastify/dist/ReactToastify.min.css';
|
||||
//import 'bootstrap/dist/css/bootstrap.css';
|
||||
//import 'react-toastify/dist/ReactToastify.min.css';
|
||||
/*
|
||||
This is a package to make Story panel load and decode all files stories
|
||||
Also, because of some internal usage, we cannot use the default babel config (for the library)
|
||||
@ -11,7 +11,7 @@ with this package.
|
||||
|
||||
In order to solve that, it's necessary a custom/simple .babelrc inside .storybook/ folder
|
||||
*/
|
||||
import requireContext from 'require-context.macro';
|
||||
//import requireContext from 'require-context.macro';
|
||||
|
||||
/* Add A11y panel */
|
||||
addDecorator(withA11y);
|
||||
@ -36,10 +36,12 @@ addParameters({
|
||||
});
|
||||
|
||||
/* automatically import all files ending in *.stories.js inside src folder */
|
||||
const req = requireContext('../src', true, /\.stories\.js$/);
|
||||
//const req = requireContext('../src', true, /\.stories\.js$/);
|
||||
//const req = require.context('../src', true, /\.stories\.js$/);
|
||||
const srcStories = require.context('../src', true, /\.stories\.js$/);
|
||||
function loadStories() {
|
||||
req.keys().forEach(filename => req(filename));
|
||||
//req.keys().forEach(filename => req(filename));
|
||||
srcStories.keys().forEach(filename => srcStories(filename));
|
||||
}
|
||||
|
||||
addDecorator((storyFn, context) => withConsole()(storyFn)(context));
|
||||
|
@ -1,67 +1,98 @@
|
||||
const path = require("path");
|
||||
const webpack = require('webpack'); //to access built-in plugins
|
||||
/*
|
||||
Code reference:
|
||||
https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
|
||||
*/
|
||||
const path = require('path');
|
||||
|
||||
// Export a function. Accept the base config as the only param.
|
||||
module.exports = async ({ config, mode }) => {
|
||||
// `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
|
||||
// You can change the configuration based on that.
|
||||
// 'PRODUCTION' is used when building the static version of storybook.
|
||||
const sourceFolders = [
|
||||
path.resolve(__dirname),
|
||||
path.resolve(__dirname, '../src'),
|
||||
];
|
||||
|
||||
/* ********* SASS *********
|
||||
If you want to work with sass, enable the following module:
|
||||
module.exports = ({ config }) => {
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.scss$/,
|
||||
loaders: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
// remove progress plugin
|
||||
// progress plugin outputs a lot of console logs, which makes
|
||||
// netlify build realllllllllllllllly slow.
|
||||
config.plugins = config.plugins.filter(
|
||||
plugin => plugin.constructor.name !== 'ProgressPlugin'
|
||||
);
|
||||
config.devtool = 'none'; // TODO: should we use something differen?
|
||||
} else {
|
||||
config.devtool = 'cheap-module-source-map'; // TODO: should we use something differen?
|
||||
}
|
||||
|
||||
config.devtool = 'cheap-module-source-map'; // TODO: should we use something differen?
|
||||
config.module.rules = [
|
||||
// Disable require.ensure as it's not a standard language feature.
|
||||
{ parser: { requireEnsure: false } },
|
||||
// add story source
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: { plugins: () => [require('autoprefixer')()] }
|
||||
},
|
||||
'sass-loader'
|
||||
],
|
||||
include: path.resolve(__dirname, '../')
|
||||
});
|
||||
|
||||
|
||||
and don't forget to install as devDependencies:
|
||||
|
||||
- style-loader
|
||||
- css-loader
|
||||
- postcss-loader
|
||||
- autoprefixer
|
||||
*/
|
||||
|
||||
/* resolver to make story panel work */
|
||||
config.resolve.alias = {
|
||||
"styled-components": path.resolve(
|
||||
__dirname,
|
||||
"../node_modules",
|
||||
"styled-components"
|
||||
)
|
||||
};
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.stories.js?$/,
|
||||
test: /\.stories\.js$/,
|
||||
loaders: [require.resolve('@storybook/addon-storysource/loader')],
|
||||
enforce: 'pre',
|
||||
});
|
||||
},
|
||||
// Process JS with Babel.
|
||||
{
|
||||
test: /\.js$/,
|
||||
include: sourceFolders,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
babelrc: false,
|
||||
compact: false,
|
||||
presets: [require.resolve('../scripts/get-babel-preset')],
|
||||
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
||||
// It enables caching results in ./node_modules/.cache/babel-loader/
|
||||
// directory for faster rebuilds.
|
||||
cacheDirectory: true,
|
||||
highlightCode: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// For svg icons, we want to get them transformed into React components
|
||||
// when we import them.
|
||||
{
|
||||
test: /\.react\.svg$/,
|
||||
include: sourceFolders,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
babelrc: false,
|
||||
presets: [require.resolve('../scripts/get-babel-preset')],
|
||||
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
||||
// It enables caching results in ./node_modules/.cache/babel-loader/
|
||||
// directory for faster rebuilds.
|
||||
cacheDirectory: true,
|
||||
highlightCode: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('@svgr/webpack'),
|
||||
options: {
|
||||
// NOTE: disable this and manually add `removeViewBox: false` in the SVGO plugins list
|
||||
// See related PR: https://github.com/smooth-code/svgr/pull/137
|
||||
icon: false,
|
||||
svgoConfig: {
|
||||
plugins: [
|
||||
{ removeViewBox: false },
|
||||
// Keeps ID's of svgs so they can be targeted with CSS
|
||||
{ cleanupIDs: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// Storybook uses a plugin to load and render markdown files.
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{ loader: require.resolve('html-loader') },
|
||||
{ loader: require.resolve('markdown-loader') },
|
||||
],
|
||||
}
|
||||
];
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.react.svg$/,
|
||||
loader: 'svg-inline-loader',
|
||||
});
|
||||
|
||||
config.plugins.push(
|
||||
new webpack.ProvidePlugin({
|
||||
"React": "react",
|
||||
}));
|
||||
|
||||
// Return the altered config
|
||||
return config;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user