115 lines
3.4 KiB
JavaScript
115 lines
3.4 KiB
JavaScript
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
|
|
const path = require("path");
|
|
|
|
const config = {
|
|
stories: [
|
|
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
|
|
"../components/**/*.stories.@(js|jsx|ts|tsx)",
|
|
"../app/**/*.stories.@(js|jsx|ts|tsx)",
|
|
],
|
|
addons: [
|
|
"@storybook/addon-links",
|
|
"@storybook/addon-essentials",
|
|
"@storybook/addon-interactions",
|
|
"msw-storybook-addon",
|
|
],
|
|
staticDirs: ["../public"],
|
|
framework: {
|
|
name: "@storybook/react-webpack5",
|
|
options: {},
|
|
},
|
|
docs: {
|
|
autodocs: false,
|
|
},
|
|
webpackFinal: async (config) => {
|
|
config.resolve = config.resolve || {};
|
|
config.resolve.alias = {
|
|
...(config.resolve.alias || {}),
|
|
"next/link": path.resolve(__dirname, "mocks/next-link.js"),
|
|
"next/image": path.resolve(__dirname, "mocks/next-image.js"),
|
|
"next/router": path.resolve(__dirname, "mocks/next-router.js"),
|
|
"next/navigation": path.resolve(__dirname, "mocks/next-navigation.js"),
|
|
"next/headers": path.resolve(__dirname, "mocks/next-headers.js"),
|
|
"next/cache": path.resolve(__dirname, "mocks/next-cache.js"),
|
|
};
|
|
config.resolve.fallback = {
|
|
...(config.resolve.fallback || {}),
|
|
https: false,
|
|
http: false,
|
|
querystring: false,
|
|
fs: false,
|
|
net: false,
|
|
tls: false,
|
|
};
|
|
|
|
// Ensure TS/TSX in stories compiles under the React Webpack5 framework.
|
|
config.module = config.module || {};
|
|
config.module.rules = [
|
|
...(config.module.rules || []),
|
|
{
|
|
test: /\.(js|jsx)$/,
|
|
exclude: /node_modules/,
|
|
use: [
|
|
{
|
|
loader: require.resolve("babel-loader"),
|
|
options: {
|
|
presets: [
|
|
require.resolve("@babel/preset-env"),
|
|
[require.resolve("@babel/preset-react"), { runtime: "automatic" }],
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
test: /\.(ts|tsx)$/,
|
|
exclude: /node_modules/,
|
|
use: [
|
|
{
|
|
loader: require.resolve("babel-loader"),
|
|
options: {
|
|
presets: [
|
|
require.resolve("@babel/preset-env"),
|
|
[require.resolve("@babel/preset-react"), { runtime: "automatic" }],
|
|
require.resolve("@babel/preset-typescript"),
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
// Keep absolute url() references in CSS (served from /public) instead of trying to resolve them.
|
|
const disableCssUrlResolve = (rule) => {
|
|
if (!rule) return;
|
|
if (Array.isArray(rule.oneOf)) {
|
|
rule.oneOf.forEach(disableCssUrlResolve);
|
|
}
|
|
if (Array.isArray(rule.use)) {
|
|
rule.use.forEach((useEntry) => {
|
|
if (
|
|
useEntry &&
|
|
typeof useEntry === "object" &&
|
|
useEntry.loader &&
|
|
useEntry.loader.includes("css-loader")
|
|
) {
|
|
useEntry.options = { ...(useEntry.options || {}), url: false };
|
|
}
|
|
});
|
|
}
|
|
};
|
|
(config.module.rules || []).forEach(disableCssUrlResolve);
|
|
|
|
config.resolve.extensions = config.resolve.extensions || [".js", ".jsx"];
|
|
if (!config.resolve.extensions.includes(".ts")) {
|
|
config.resolve.extensions.push(".ts");
|
|
}
|
|
if (!config.resolve.extensions.includes(".tsx")) {
|
|
config.resolve.extensions.push(".tsx");
|
|
}
|
|
return config;
|
|
},
|
|
};
|
|
|
|
module.exports = config;
|