From abfa67075926015e9003fcd7bf2e2c6bab7cca31 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
 tile layer 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..2ad69c94 100644
--- a/.storybook/decorators.tsx
+++ b/.storybook/decorators.tsx
@@ -10,6 +10,7 @@ import {
   DEFAULT_COMPONENT_TREE,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
+  DEFAULT_MAP_TILE_LAYERS,
   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,
+        getMapTileLayers: async () => DEFAULT_MAP_TILE_LAYERS,
         theme,
         getFormComponents: () => context?.args?.componentTree || defaultComponentTree,
         getValidatorPlugins: async () => {
diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx
index 15f3ce89..6aba7ed3 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_MAP_TILE_LAYERS,
 } 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}
+    getMapTileLayers={async () => DEFAULT_MAP_TILE_LAYERS}
     serverUploadLimit="50MB"
     getDocumentTypes={async () => DEFAULT_DOCUMENT_TYPES}
     getConfidentialityLevels={async () => CONFIDENTIALITY_LEVELS}
diff --git a/src/tests/sharedUtils.tsx b/src/tests/sharedUtils.tsx
index 05fb07b4..9ca5b713 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, MapTileLayer, 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_MAP_TILE_LAYERS: MapTileLayer[] = [
+  {
+    identifier: 'brt',
+    url: 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:28992/{z}/{x}/{y}.png',
+    label: 'BRT',
+  },
+  {
+    identifier: 'luchtfoto',
+    url: 'https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/Actueel_orthoHR/EPSG:28992/{z}/{x}/{y}.png',
+    label: 'Luchtfoto',
+  },
+];
+
 export function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }