Feat: Slippy Map Components

.prettierrc

@@ -4,5 +4,12 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

README.md

@@ -22,11 +22,11 @@ There are three parts to this repository:
 
 ## Notes
 
--   Steps 2 - 5 in the proposed workflow above should (?) be automated
--   The **[pjax hydration bug](https://github.com/SWRdata/pjax-sveltekit/issues/3)** is solved in `mock-sveltekit` using a [server hook](https://github.com/SWRdata/components/blob/main/mock-sveltekit/src/hooks.server.js), as [suggested here](https://github.com/sveltejs/kit/issues/10411).
--   **Style encapsulation** between our news apps and the SWR.de website is implemented using SvelteKit's [Custom Elements API](https://svelte.dev/docs/custom-elements-api) following the pattern [developed here](https://github.com/SWRdata/pjax-sveltekit/issues/1). This doesn't support [declarative shadow DOM](https://web.dev/articles/declarative-shadow-dom), which means our apps will in effect be client-side rendered, but this...
-    -   is an acceptable tradeoff
-    -   may [change in Svelte 5](https://github.com/sveltejs/svelte/pull/10721)
+- Steps 2 - 5 in the proposed workflow above should (?) be automated
+- The **[pjax hydration bug](https://github.com/SWRdata/pjax-sveltekit/issues/3)** is solved in `mock-sveltekit` using a [server hook](https://github.com/SWRdata/components/blob/main/mock-sveltekit/src/hooks.server.js), as [suggested here](https://github.com/sveltejs/kit/issues/10411).
+- **Style encapsulation** between our news apps and the SWR.de website is implemented using SvelteKit's [Custom Elements API](https://svelte.dev/docs/custom-elements-api) following the pattern [developed here](https://github.com/SWRdata/pjax-sveltekit/issues/1). This doesn't support [declarative shadow DOM](https://web.dev/articles/declarative-shadow-dom), which means our apps will in effect be client-side rendered, but this...
+  - is an acceptable tradeoff
+  - may [change in Svelte 5](https://github.com/sveltejs/svelte/pull/10721)
 
 ## NPM Release Workflow
 
@@ -40,15 +40,15 @@ Merges into the main branch are protected and require a pull request review.
 
 [Semantic Release](https://github.com/semantic-release/) automatically:
 
--   analyzes commits and bumps the version (major, minor, or patch).
--   publishes the package to the [NPM registry](https://www.npmjs.com/package/@swr-data-lab/components).
--   pushes the release to GitHub with a tag reflecting the NPM package version.
+- analyzes commits and bumps the version (major, minor, or patch).
+- publishes the package to the [NPM registry](https://www.npmjs.com/package/@swr-data-lab/components).
+- pushes the release to GitHub with a tag reflecting the NPM package version.
 
 Only merges following [conventional commits](https://www.conventionalcommits.org/) will trigger a new release. Summary:
 
--   PATCH version bump: Commit message "fix: ..."
--   MINOR version bump: Commit message "feat: ..."
--   MAJOR version bump: Commit message "<type>!: ..." or include "BREAKING CHANGE: ..." in the footer
+- PATCH version bump: Commit message "fix: ..."
+- MINOR version bump: Commit message "feat: ..."
+- MAJOR version bump: Commit message "<type>!: ..." or include "BREAKING CHANGE: ..." in the footer
 
 For further questions, refer to the [Semantic Release Docs (FAQ)](https://semantic-release.gitbook.io/semantic-release/support/faq).
 

components/.storybook/blocks/Mermaid.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Mermaid as MdxMermaid } from 'mdx-mermaid/Mermaid';
+
+export default function Mermaid({ chart }) {
+	if (!chart) {
+		return null;
+	}
+	return React.createElement(MdxMermaid, { chart });
+}

components/.storybook/main.ts

@@ -2,27 +2,33 @@ import { dirname, join } from 'path';
 import type { StorybookConfig } from '@storybook/sveltekit';
 
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
+	if (process.platform.includes('win')) {
+		return value;
+	} else {
+		return dirname(require.resolve(join(value, 'package.json')));
+	}
 }
 
 const config: StorybookConfig = {
-  stories: [
-    '../src/**/*.stories.@(js|ts|svelte)',
-    '../src/**/*.mdx'
-  ],
+	stories: ['../src/**/*.stories.@(js|ts|svelte)', '../src/**/*.mdx'],
+	addons: [
+		{
+			name: getAbsolutePath('@storybook/addon-svelte-csf'),
+			options: {
+				legacyTemplate: true
+			}
+		},
+		getAbsolutePath('@storybook/addon-links'),
+		getAbsolutePath('@chromatic-com/storybook'),
+		getAbsolutePath('@storybook/addon-vitest'),
+		getAbsolutePath('@storybook/addon-docs')
+	],
+	framework: {
+		name: getAbsolutePath('@storybook/sveltekit'),
+		options: {}
+	},
 
-  addons: [{
-    name: getAbsolutePath("@storybook/addon-svelte-csf"),
-    options: {
-      legacyTemplate: true
-    }
-  }, getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@chromatic-com/storybook'), getAbsolutePath('@storybook/addon-vitest'), getAbsolutePath("@storybook/addon-docs")],
-  framework: {
-    name: getAbsolutePath("@storybook/sveltekit"),
-    options: {}
-  },
-
-  docs: {}
+	docs: {}
 };
 
 export default config;

components/.storybook/preview.ts

@@ -1,18 +1,47 @@
-import type { Preview } from "@storybook/sveltekit";
+import type { Preview } from '@storybook/sveltekit';
 
 const preview: Preview = {
-  parameters: {
-    options: {
-      storySort: { order: ['About', 'Design Tokens', "Typography", ["Headline", "Copy", "Caption"], "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] },
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-  tags: ["autodocs"],
+	parameters: {
+		options: {
+			storySort: {
+				order: [
+					'About',
+					'Design Tokens',
+					'Typography',
+					['Headline', 'Copy', 'Caption'],
+					'Display',
+					'Chart',
+					['ChartHeader'],
+					'Maplibre',
+					[
+						'Map',
+						'MapStyle',
+						'Source',
+						'Layer',
+						'Control',
+						[
+							'ScaleControl',
+							'GeoCoderControl',
+							'AttributionControl',
+							'NavigationControl',
+							'MapControl'
+						],
+						'Style',
+						'Tooltip'
+					],
+					'Form',
+					'Deprecated'
+				]
+			}
+		},
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	},
+	tags: ['autodocs']
 };
 
 export default preview;

components/package.json

@@ -1,70 +1,74 @@
 {
-  "name": "@swr-data-lab/components",
-  "description": "SWR Data Lab component library",
-  "author": "SWR Data Lab",
-  "publishConfig": {
-    "access": "restricted"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "storybook": "storybook dev -p 6006",
-    "start": "storybook dev -p 6006",
-    "build-storybook": "storybook build --disable-telemetry",
-    "test-storybook": "vitest run --project=storybook",
-    "test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
-    "semantic-release": "semantic-release"
-  },
-  "dependencies": {
-    "svelte-select": "^5.8.3"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.0-next.6",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.1",
-    "@storybook/addon-docs": "^9.0.0-beta.11",
-    "@storybook/addon-links": "^9.0.0-beta.11",
-    "@storybook/addon-svelte-csf": "^5.0.0-next.30",
-    "@storybook/addon-vitest": "^9.0.0-beta.11",
-    "@storybook/sveltekit": "^9.0.0-beta.11",
-    "@storybook/test-runner": "^0.23.0-next.1",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@vitest/browser": "^3.1.1",
-    "@vitest/coverage-v8": "^3.1.1",
-    "concurrently": "^9.0.1",
-    "http-server": "^14.1.1",
-    "playwright": "^1.51.1",
-    "sass-embedded": "^1.78.0",
-    "semantic-release": "^24.1.2",
-    "storybook": "^9.0.0-beta.11",
-    "svelte": "^5.23.0",
-    "svelte-check": "^4.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^6.0.0",
-    "vitest": "^3.1.1",
-    "wait-on": "^8.0.1"
-  },
-  "type": "module",
-  "release": {
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/npm"
-    ]
-  },
-  "exports": {
-    ".": {
-      "svelte": "./src/index.js"
-    }
-  },
-  "version": "1.0.6",
-  "overrides": {
-    "storybook": "$storybook"
-  }
+	"name": "@swr-data-lab/components",
+	"description": "SWR Data Lab component library",
+	"author": "SWR Data Lab",
+	"publishConfig": {
+		"access": "restricted"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"storybook": "storybook dev -p 6006",
+		"start": "storybook dev -p 6006",
+		"build-storybook": "storybook build --disable-telemetry",
+		"test-storybook": "vitest run --project=storybook",
+		"test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
+		"semantic-release": "semantic-release"
+	},
+	"dependencies": {
+		"@maplibre/maplibre-gl-geocoder": "^1.8.0",
+		"@versatiles/style": "^5.6.0",
+		"maplibre-gl": "^5.5.0",
+		"svelte-select": "^5.8.3"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^4.0.0-next.6",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/git": "^10.0.1",
+		"@semantic-release/npm": "^12.0.1",
+		"@storybook/addon-docs": "^9.0.0-beta.11",
+		"@storybook/addon-links": "^9.0.0-beta.11",
+		"@storybook/addon-svelte-csf": "^5.0.0-next.30",
+		"@storybook/addon-vitest": "^9.0.0-beta.11",
+		"@storybook/sveltekit": "^9.0.0-beta.11",
+		"@storybook/test-runner": "^0.23.0-next.1",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@vitest/browser": "^3.1.1",
+		"@vitest/coverage-v8": "^3.1.1",
+		"concurrently": "^9.0.1",
+		"http-server": "^14.1.1",
+		"mdx-mermaid": "^2.0.3",
+		"playwright": "^1.51.1",
+		"sass-embedded": "^1.78.0",
+		"semantic-release": "^24.1.2",
+		"storybook": "^9.0.0-beta.11",
+		"svelte": "^5.23.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^6.0.0",
+		"vitest": "^3.1.1",
+		"wait-on": "^8.0.1"
+	},
+	"type": "module",
+	"release": {
+		"plugins": [
+			"@semantic-release/commit-analyzer",
+			"@semantic-release/release-notes-generator",
+			"@semantic-release/npm"
+		]
+	},
+	"exports": {
+		".": {
+			"svelte": "./src/index.js"
+		}
+	},
+	"version": "1.0.6",
+	"overrides": {
+		"storybook": "$storybook"
+	}
 }

components/src/DesignTokens/Tokens.ts

@@ -2,10 +2,10 @@ interface ColourMap {
 	[index: string]: ColourPalette | ColourList;
 }
 interface ColourPalette {
-	[index: string]: string
+	[index: string]: string;
 }
 interface ColourList {
-	[index: number]: string
+	[index: number]: string;
 }
 
 const shades: ColourMap = {
@@ -142,9 +142,13 @@ const shades: ColourMap = {
 		dark5: '#1D0B40'
 	},
 	gray: {
+		light5: 'hsl(225, 2%, 95%)',
 		light3: 'hsl(225, 2%, 77%)',
 		base: 'hsl(227, 2%, 50%)',
-		dark3: 'hsl(236, 2%, 34%)'
+		dark2: 'hsl(236, 2%, 38%)',
+		dark3: 'hsl(236, 2%, 32%)',
+		dark4: 'hsl(236, 2%, 22%)',
+		dark5: 'hsl(236, 2%, 5%)'
 	}
 };
 
@@ -164,18 +168,17 @@ const scales: ColourMap = {
 	forest_plum: [...Object.values(shades.forest).reverse(), ...Object.values(shades.plum)]
 };
 
-
 const typography = {
 	wide: {
 		sizes: {
-			"fs-small-3": "0.75rem",
-			"fs-small-2": "0.875rem",
-			"fs-small-1": "1rem",
-			"fs-base": "1.25rem",
-			"fs-large-1": "1.5rem",
-			"fs-large-2": "2rem",
-			"fs-large-3": "2.5rem",
-			"fs-large-4": "3.5rem"
+			'fs-small-3': '0.75rem',
+			'fs-small-2': '0.875rem',
+			'fs-small-1': '1rem',
+			'fs-base': '1.25rem',
+			'fs-large-1': '1.5rem',
+			'fs-large-2': '2rem',
+			'fs-large-3': '2.5rem',
+			'fs-large-4': '3.5rem'
 		}
 	}
 };

components/src/Select/Select.stories.svelte

@@ -136,17 +136,17 @@
 			expect(canvas.getByTestId('custom-item-title').innerText).toEqual('Journalismus');
 			expect(canvas.getByTestId('custom-item-addon').innerText).toContain('Redakteur/in');
 			await userEvent.type(select, '{enter}');
-			expect(selectedItem.details.title).toEqual('Journalismus');
+			expect(selectedItem?.details.title).toEqual('Journalismus');
 		});
 
 		await step('Entering an item\'s "title" selects that item', async () => {
 			await userEvent.type(select, 'Tierpflege{enter}');
-			expect(selectedItem.details.title).toEqual('Tierpflege');
+			expect(selectedItem?.details.title).toEqual('Tierpflege');
 		});
 
 		await step('Entering an item\'s "addon" selects that item', async () => {
 			await userEvent.type(select, 'Zirkuskünstler{enter}');
-			expect(selectedItem.details.title).toEqual('Schauspiel und Tanz');
+			expect(selectedItem?.details.title).toEqual('Schauspiel und Tanz');
 		});
 	}}
 >