diff --git a/.storybook/main.js b/.storybook/main.js
index b1e505c..ac044ac 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,4 +1,5 @@
const path = require("path");
+const webpack = require('webpack')
module.exports = {
"stories": [
@@ -16,5 +17,18 @@ module.exports = {
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
- presets: [path.resolve(__dirname, "./next.js")]
+ presets: [path.resolve(__dirname, "./next.js")],
+ // Allow to use Next/Image
+ webpackFinal: (config) => {
+ config.plugins.push(new webpack.DefinePlugin({
+ 'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
+ deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+ imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+ domains: [],
+ path: '/',
+ loader: 'default',
+ })
+ }))
+ return config
+ }
}
diff --git a/.storybook/mockNextImage.js b/.storybook/mockNextImage.js
new file mode 100644
index 0000000..5e164bc
--- /dev/null
+++ b/.storybook/mockNextImage.js
@@ -0,0 +1,17 @@
+// https://stackoverflow.com/a/64765638/7335674
+
+import * as nextImage from 'next/image'
+
+Object.defineProperty(nextImage, 'default', {
+ configurable: true,
+ value: (props) => {
+ return (
+
+
+
![]()
+
+
![]()
+