From 1c1b224a711a5e32354589b205235072b8d6b363 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Thu, 21 Nov 2024 16:17:51 +0100
Subject: [PATCH] :white_check_mark: [open-formulieren/open-forms#2173] Map
 background configuration in storybook

---
 .storybook/decorators.tsx                         |  2 ++
 src/components/ComponentConfiguration.stories.tsx |  2 ++
 src/tests/sharedUtils.tsx                         | 15 ++++++++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/.storybook/decorators.tsx b/.storybook/decorators.tsx
index da0a0bd7..78f198e2 100644
--- a/.storybook/decorators.tsx
+++ b/.storybook/decorators.tsx
@@ -10,6 +10,7 @@ import {
   DEFAULT_COMPONENT_TREE,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
+  DEFAULT_LEAFLET_BACKGROUNDS,
   DEFAULT_PREFILL_ATTRIBUTES,
   DEFAULT_PREFILL_PLUGINS,
   DEFAULT_REGISTRATION_ATTRIBUTES,
@@ -74,6 +75,7 @@ export const BuilderContextDecorator: Decorator = (Story, context) => {
         uniquifyKey: key => key,
         supportedLanguageCodes: supportedLanguageCodes,
         richTextColors: DEFAULT_COLORS,
+        getLeafletMapBackgrounds: async () => DEFAULT_LEAFLET_BACKGROUNDS,
         theme,
         getFormComponents: () => context?.args?.componentTree || defaultComponentTree,
         getValidatorPlugins: async () => {
diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx
index 5e930ef4..f80a3db5 100644
--- a/src/components/ComponentConfiguration.stories.tsx
+++ b/src/components/ComponentConfiguration.stories.tsx
@@ -13,6 +13,7 @@ import {
   DEFAULT_COLORS,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
+  DEFAULT_LEAFLET_BACKGROUNDS,
 } from '@/tests/sharedUtils';
 import {AnyComponentSchema} from '@/types';
 
@@ -109,6 +110,7 @@ const Template: StoryFn<TemplateArgs> = ({
     getPrefillPlugins={async () => prefillPlugins}
     getPrefillAttributes={async (plugin: string) => prefillAttributes[plugin]}
     getFileTypes={async () => fileTypes}
+    getLeafletMapBackgrounds={async () => DEFAULT_LEAFLET_BACKGROUNDS}
     serverUploadLimit="50MB"
     getDocumentTypes={async () => DEFAULT_DOCUMENT_TYPES}
     getConfidentialityLevels={async () => CONFIDENTIALITY_LEVELS}
diff --git a/src/tests/sharedUtils.tsx b/src/tests/sharedUtils.tsx
index ce79183a..90af1b73 100644
--- a/src/tests/sharedUtils.tsx
+++ b/src/tests/sharedUtils.tsx
@@ -1,5 +1,5 @@
 // This module contains shared utilities and constants between Jest and Storybook.
-import type {DocumentTypeOption, SelectOption} from '@/context';
+import type {DocumentTypeOption, LeafletMapOption, SelectOption} from '@/context';
 import {ColorOption} from '@/registry/content/rich-text';
 import {AnyComponentSchema} from '@/types';
 
@@ -235,6 +235,19 @@ export const DEFAULT_COLORS: ColorOption[] = [
   },
 ];
 
+export const DEFAULT_LEAFLET_BACKGROUNDS: LeafletMapOption[] = [
+  {
+    identifier: 'default',
+    label: 'Default',
+    url: 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:28992/{z}/{x}/{y}.png',
+  },
+  {
+    identifier: 'infrared',
+    label: 'Infrared',
+    url: 'https://service.pdok.nl/hwh/luchtfotocir/wmts/v1_0/2016_ortho25IR/EPSG:28992/{z}/{x}/{y}.png',
+  },
+];
+
 export function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }