From 321dae4a47594af83269fa560b375965d7f35763 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 22 May 2022 15:09:39 +0200
Subject: fix: render all images unoptimized in Storybook

There is a bug with next/image and Storybook. I was manually adding
`unoptimized` to images. Instead we can use a workaround by adding an
extra config in Storybook `preview.js` file.
---
 .storybook/preview.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

(limited to '.storybook/preview.js')

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 344df2a..e30927b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,24 @@
 import '@styles/globals.scss';
+import * as NextImage from 'next/image';
 import { IntlProvider } from 'react-intl';
 
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props) =>
+    typeof props.src === 'string' ? (
+      <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />
+    ) : (
+      <OriginalNextImage {...props} unoptimized />
+    ),
+});
+
+Object.defineProperty(NextImage, '__esModule', {
+  configurable: true,
+  value: true,
+});
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
-- 
cgit v1.2.3