@swr-data-lab/components 1.11.3 → 1.12.0

package/.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 });
+}

package/.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;

package/.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;

package/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.11.3",
-  "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.12.0",
+	"overrides": {
+		"storybook": "$storybook"
+	}
 }

package/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'
 		}
 	}
 };

package/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');
 		});
 	}}
 >

package/src/Switcher/Switcher.svelte

@@ -60,6 +60,7 @@
 		padding: 0;
 		margin: 0;
 		border: 1px solid currentColor;
+		background: white;
 		border-radius: var(--br-small);
 
 		@media (min-width: base.$bp-s) {

package/src/index.js

@@ -10,3 +10,15 @@ export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';
 export { default as ChartFooter } from './ChartFooter/ChartFooter.svelte';
 export { default as Middot } from './Middot/Middot.svelte';
 export { default as FormLabel } from './FormLabel/FormLabel.svelte';
+
+export { default as Map } from './maplibre/Map/Map.svelte';
+export { SWRDataLabLight } from './maplibre/MapStyle';
+export { default as MapControl } from './maplibre/MapControl/MapControl.svelte';
+export { default as AttributionControl } from './maplibre/AttributionControl/AttributionControl.svelte';
+export { default as GeoCoderControl } from './maplibre/GeoCoderControl/GeoCoderControl.svelte';
+export { default as NavigationControl } from './maplibre/NavigationControl/NavigationControl.svelte';
+export { default as ScaleControl } from './maplibre/ScaleControl/ScaleControl.svelte';
+export { default as VectorLayer } from './maplibre/VectorLayer/VectorLayer.svelte';
+export { default as VectorTileSource } from './maplibre/VectorTileSource/VectorTileSource.svelte';
+export { default as Tooltip } from './maplibre/Tooltip/Tooltip.svelte';
+export { default as WithLinkLocation } from './maplibre/WithLinkLocation/WithLinkLocation.svelte';

package/src/maplibre/AttributionControl/AttributionControl.stories.svelte

@@ -0,0 +1,29 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import AttributionControl from './AttributionControl.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import Map from '../Map/Map.svelte';
+	import { SWRDataLabLight } from '../MapStyle';
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Control/AttributionControl',
+		component: AttributionControl
+	});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens>
+		<div class="container">
+			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<AttributionControl customAttribution="SWR Data Lab" position="bottom-left" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 500px;
+		height: 300px;
+	}
+</style>

package/src/maplibre/AttributionControl/AttributionControl.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { type ControlPosition, AttributionControl } from 'maplibre-gl';
+	import MapControl from '../MapControl/MapControl.svelte';
+
+	interface AttributionControlProps {
+		position?: ControlPosition;
+		customAttribution?: string;
+	}
+	const { position = 'bottom-right', customAttribution }: AttributionControlProps = $props();
+</script>
+
+<MapControl
+	{position}
+	control={new AttributionControl({
+		customAttribution,
+		compact: false
+	})}
+/>
+
+<style>
+	:global {
+		.maplibregl-ctrl.maplibregl-ctrl-attrib {
+			font-size: var(--fs-small-3);
+			letter-spacing: 0.005em;
+			word-spacing: 0.005em;
+			font-family: var(--swr-sans);
+		}
+		.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
+			display: block;
+		}
+		.maplibregl-ctrl-attrib-button {
+			display: none;
+		}
+
+		.maplibregl-ctrl-attrib a {
+			color: inherit;
+			text-decoration: none;
+			text-underline-offset: 0.2em;
+		}
+		.maplibregl-ctrl-attrib a:hover {
+			color: inherit;
+			text-decoration: underline;
+		}
+	}
+</style>

package/src/maplibre/AttributionControl/index.js

@@ -0,0 +1,2 @@
+import AttributionControl from './AttributionControl.svelte';
+export default AttributionControl;

package/src/maplibre/GeocoderControl/GeocoderAPIs.ts

@@ -0,0 +1,49 @@
+import {
+	type CarmenGeojsonFeature,
+	type MaplibreGeocoderApi,
+	type MaplibreGeocoderApiConfig,
+	type MaplibreGeocoderFeatureResults
+} from '@maplibre/maplibre-gl-geocoder';
+
+export class MaptilerGeocoderAPI implements MaplibreGeocoderApi {
+	key: string;
+
+	constructor(key: string) {
+		this.key = key;
+	}
+
+	async forwardGeocode(config: MaplibreGeocoderApiConfig): Promise<MaplibreGeocoderFeatureResults> {
+		const result: MaplibreGeocoderFeatureResults = {
+			type: 'FeatureCollection',
+			features: []
+		};
+		try {
+			const response = await fetch(
+				`https://api.maptiler.com/geocoding/${config.query}.json?country=${config.countries}&language=${config.language}&key=${this.key}`
+			);
+			const geojson = await response.json();
+			for (const feature of geojson.features) {
+				const res: CarmenGeojsonFeature = {
+					type: 'Feature',
+					id: feature.id,
+					place_type: ['place'],
+					place_name: feature.place_name,
+					language: feature.properties.display_name,
+					text: feature.text,
+					bbox: feature.bbox,
+					geometry: {
+						type: 'Point',
+						coordinates: feature.center
+					},
+					properties: {
+						text: feature.text
+					}
+				};
+				result.features.push(res);
+			}
+		} catch (e) {
+			console.error(`Failed to forwardGeocode with error: ${e}`);
+		}
+		return result;
+	}
+}

package/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte

@@ -0,0 +1,78 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { within, expect } from 'storybook/test';
+
+	import GeocoderControl from './GeocoderControl.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import Map from '../Map/Map.svelte';
+
+	import { SWRDataLabLight } from '../MapStyle';
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Control/GeoCoderControl',
+		component: GeocoderControl
+	});
+</script>
+
+<Story
+	asChild
+	name="Default"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const containerEl = canvas.getByTestId('map-container');
+
+		await step('Geocoder control renders', async () => {
+			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
+			expect(el).toBeTruthy();
+		});
+		await step('Localised placeholder text renders', async () => {
+			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder input');
+			expect(el).toHaveAttribute('placeholder', 'Suche');
+		});
+	}}
+>
+	<DesignTokens>
+		<div class="container">
+			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+<Story
+	asChild
+	name="Custom placeholder text"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const containerEl = canvas.getByTestId('map-container');
+
+		await step('Geocoder control renders', async () => {
+			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
+			expect(el).toBeTruthy();
+		});
+		await step('Custom placeholder text renders', async () => {
+			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder input');
+			expect(el).toHaveAttribute('placeholder', 'My placeholder text');
+		});
+	}}
+>
+	<DesignTokens>
+		<div class="container">
+			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<GeocoderControl
+					placeholder="My placeholder text"
+					languages="de"
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 500px;
+		height: 300px;
+	}
+</style>