@swr-data-lab/components 1.13.0 → 1.13.1

package/package.json

@@ -1,23 +1,35 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
+	"version": "1.13.1",
 	"author": "SWR Data Lab",
+	"license": "UNLICENSED",
+	"type": "module",
 	"publishConfig": {
 		"access": "restricted"
 	},
+	"repository": {
+		"url": "https://github.com/SWRdata/components"
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package -i src && publint",
+		"prepublishOnly": "npm run package",
 		"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",
+		"sync": "svelte-kit sync",
 		"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"
 	},
+	"peerDependencies": {
+		"svelte": ">=5.0.0"
+	},
 	"dependencies": {
 		"@maplibre/maplibre-gl-geocoder": "^1.8.0",
 		"maplibre-gl": "^5.5.0",
@@ -36,6 +48,7 @@
 		"@storybook/test-runner": "^0.23.0-next.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.3.11",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@versatiles/style": "^5.6.0",
 		"@vitest/browser": "^3.1.1",
@@ -44,17 +57,22 @@
 		"http-server": "^14.1.1",
 		"mdx-mermaid": "^2.0.3",
 		"playwright": "^1.51.1",
-		"sass-embedded": "^1.78.0",
+		"publint": "^0.3.12",
+		"sass": "^1.89.0",
+		"sass-embedded": "^1.89.0",
 		"semantic-release": "^24.1.2",
 		"storybook": "^9.0.0-beta.11",
 		"svelte": "^5.23.0",
 		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.3",
 		"typescript": "^5.8.3",
 		"vite": "^6.0.0",
 		"vitest": "^3.1.1",
 		"wait-on": "^8.0.1"
 	},
-	"type": "module",
+	"overrides": {
+		"storybook": "$storybook"
+	},
 	"release": {
 		"plugins": [
 			"@semantic-release/commit-analyzer",
@@ -62,13 +80,18 @@
 			"@semantic-release/npm"
 		]
 	},
+	"files": [
+		"./dist",
+		"!./dist/**/*.test.*",
+		"!./dist/**/*.stories.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
 	"exports": {
 		".": {
-			"svelte": "./src/index.js"
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
 		}
-	},
-	"version": "1.13.0",
-	"overrides": {
-		"storybook": "$storybook"
 	}
 }

package/.storybook/blocks/Mermaid.jsx

@@ -1,9 +0,0 @@
-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

@@ -1,34 +0,0 @@
-import { dirname, join } from 'path';
-import type { StorybookConfig } from '@storybook/sveltekit';
-
-function getAbsolutePath(value: string): any {
-	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'],
-	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: {}
-};
-
-export default config;

package/.storybook/preview-head.html

@@ -1,13 +0,0 @@
-<style>
-	/* Load original SWR.de fonts for consistent component preview:  */
-	@font-face {
-		font-family: 'SWR-VAR-Text';
-		src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2')
-			format('woff2');
-	}
-	@font-face {
-		font-family: 'SWR-VAR-Sans';
-		src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2')
-			format('woff2');
-	}
-</style>

package/.storybook/preview.ts

@@ -1,47 +0,0 @@
-import type { Preview } from '@storybook/sveltekit';
-
-const preview: Preview = {
-	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/.storybook/vitest.setup.ts

@@ -1,9 +0,0 @@
-import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/sveltekit';
-import * as projectAnnotations from './preview';
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const project = setProjectAnnotations([projectAnnotations]);
-
-beforeAll(project.beforeAll);

package/src/Autocomplete/Autocomplete.svelte

@@ -1,237 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import Circle from '../assets/times-circle-solid.svg.svelte';
-	import Caption from '../Caption/Caption.svelte';
-
-	export let data = [];
-	export let query: string = '';
-	export let placeholder: string = 'Platzhalter';
-	export let label: string;
-	export let name: string;
-
-	const sortData = (a, b) => {
-		return a.value.localeCompare(b.value);
-	};
-
-	let listRef;
-	let inputRef;
-	let controlsRef;
-	const dispatch = createEventDispatcher();
-	const maxSuggestions = 100;
-
-	let highlightedItemIndex = -1;
-	$: suggestions = data.sort(sortData).slice(0, maxSuggestions);
-	$: isActive = false;
-
-	// Insert clicked item into search input,
-	// dispatch it as select event and close the dropdown
-	const handleItemClick = (index) => {
-		highlightedItemIndex = index;
-		setSelectedItem(suggestions[highlightedItemIndex]);
-	};
-
-	const setSelectedItem = (item) => {
-		query = item.value;
-		isActive = false;
-		dispatch('select', { item });
-	};
-
-	// Register keyboard events
-	const handleKeyDown = (e) => {
-		if (e.key === 'ArrowDown') {
-			e.preventDefault();
-			highlightedItemIndex =
-				highlightedItemIndex < suggestions.length - 1 ? highlightedItemIndex + 1 : 0;
-			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault();
-			highlightedItemIndex =
-				highlightedItemIndex > 0 ? highlightedItemIndex - 1 : suggestions.length - 1;
-			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-		} else if (e.key === 'Enter') {
-			if (highlightedItemIndex > -1) {
-				setSelectedItem(suggestions[highlightedItemIndex]);
-				isActive = false;
-			}
-		}
-	};
-
-	const handleClear = () => {
-		query = '';
-		inputRef.focus();
-		setSuggestions();
-		dispatch('select', {
-			item: null
-		});
-	};
-
-	const setSuggestions = () => {
-		suggestions = data
-			.filter((el) => {
-				return el.value.toLowerCase().startsWith(query.toLowerCase());
-			})
-			.slice(0, maxSuggestions)
-			.sort(sortData);
-	};
-
-	// update dropdown list if input value changes
-	const handleInput = () => {
-		isActive = true;
-		if (query.length === 0) {
-			suggestions = data;
-		} else {
-			setSuggestions();
-			highlightedItemIndex = -1;
-		}
-	};
-</script>
-
-<!--
-This component is used to display a list of suggestions for a given query. If an item is clicked or the enter key is pressed, the selected item will be returned by a custom select event.
-
-Data should be provided as array of objects. Each object contains the information for a dropdown entry:
-    - **value** *string* the text that is displayed in the input. Has to be unique!
-    - **label** *string* | *svelte component* | *array of svelte component and props object* text, html or component displayed in the dropdown list
-    - **details** *object* extra data needed by selection handler
-@component
--->
-
-<div class="autocomplete" class:active={isActive}>
-	<label for={name}>{label}</label>
-	<input
-		type="text"
-		{name}
-		{placeholder}
-		autocomplete="off"
-		autocorrect="off"
-		autocapitalize="off"
-		data-testid="autocomplete-input"
-		bind:this={inputRef}
-		bind:value={query}
-		on:keydown={handleKeyDown}
-		on:input={handleInput}
-		on:focus={() => {
-			isActive = true;
-		}}
-		on:blur={(e) => {
-			if (listRef.contains(e.relatedTarget)) {
-				window.setTimeout(() => {
-					isActive = false;
-				}, 100);
-			} else if (!controlsRef.contains(e.relatedTarget)) {
-				isActive = false;
-			}
-		}}
-	/>
-
-	<ul tabindex="-1" bind:this={listRef}>
-		{#each suggestions as item, i (item.value)}
-			<li>
-				<button
-					class={`item ${i === highlightedItemIndex ? 'active' : ''}`}
-					tabindex="-1"
-					type="button"
-					on:click={(e) => {
-						e.preventDefault();
-						handleItemClick(i);
-					}}
-				>
-					<Caption>
-						{item.label}
-					</Caption>
-				</button>
-			</li>
-		{/each}
-	</ul>
-	<div class="controls" bind:this={controlsRef}>
-		<button type="button" on:click={handleClear} class="clear" class:active={query.length > 0}>
-			<Circle />
-		</button>
-	</div>
-</div>
-
-<style lang="scss">
-	@use '../styles/base.scss';
-
-	.autocomplete {
-		position: relative;
-		display: block;
-		color: white;
-		display: flex;
-		flex-flow: column;
-
-		input {
-			@extend %form-input;
-			width: auto;
-		}
-
-		ul {
-			position: absolute;
-			top: 100%;
-			border: 1px solid currentColor;
-			background: var(--violet-dark-3);
-			border-bottom-left-radius: var(--br-small);
-			border-bottom-right-radius: var(--br-small);
-			border-top: 0;
-			left: 0;
-			right: 0;
-			max-height: 10rem;
-			overflow-y: scroll;
-			z-index: 1000;
-			opacity: 0;
-			transition: 100ms;
-			pointer-events: none;
-			&:empty {
-				box-shadow: none;
-			}
-
-			.item {
-				padding: 0.5em;
-				width: 100%;
-				background: transparent;
-				border: 0;
-				text-align: left;
-				color: currentColor;
-				border-bottom: 1px solid rgba(white, 0.25);
-				cursor: pointer;
-				&.active,
-				&:hover {
-					text-decoration: underline;
-					background-color: rgba(white, 0.05);
-				}
-			}
-		}
-
-		.clear {
-			position: absolute;
-			top: 50%;
-			right: 0.75rem;
-			width: 1.2rem;
-			height: 1.2rem;
-			background: transparent;
-			border: 0;
-			display: none;
-			color: white;
-			&.active {
-				display: block;
-			}
-			&:hover,
-			&:focus {
-				color: var(--red-base);
-				cursor: pointer;
-			}
-		}
-		&.active {
-			ul {
-				opacity: 1;
-				pointer-events: all;
-			}
-			input {
-				border-bottom-right-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-		}
-	}
-</style>

package/src/Button/Button.stories.svelte

@@ -1,21 +0,0 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Button from './Button.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Form/Button',
-		component: Button
-	});
-</script>
-
-<Story name="Basic" asChild>
-	<DesignTokens>
-		<Button label="This is a button label"></Button>
-	</DesignTokens>
-</Story>
-<Story name="Disabled" asChild>
-	<DesignTokens>
-		<Button disabled label="This button is disabled"></Button>
-	</DesignTokens>
-</Story>

package/src/Button/Button.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import Copy from '../Copy/Copy.svelte';
-
-	interface ButtonProps {
-		label: string;
-		as?: 'button' | 'a';
-		href?: string;
-		disabled?: boolean;
-		onclick?: (e: MouseEvent) => any | void;
-	}
-
-	const { as = 'button', label, href, disabled, onclick }: ButtonProps = $props();
-</script>
-
-{#if as === 'a'}
-	<a class="button" class:disabled {href}>
-		<Copy weight="bold">
-			{label}
-		</Copy>
-	</a>
-{:else}
-	<button class="button" {onclick} {disabled}>
-		<Copy weight="bold">
-			{label}
-		</Copy>
-	</button>
-{/if}
-
-<style lang="scss">
-	.button {
-		background: var(--violet-dark-3);
-		display: inline-flex;
-		align-items: center;
-		justify-self: flex-start;
-		padding: 0.45em 1.25em;
-		color: white;
-		border: 1px solid rgba(white, 0.1);
-		box-shadow: 0px 0px 10px rgba(black, 0.05);
-		border-radius: var(--br-small);
-		text-shadow: 0px 0px 5px rgba(black, 0.05);
-		text-decoration: none;
-		&:hover,
-		&:focus-visible {
-			text-decoration: underline;
-			text-underline-offset: 0.15em;
-		}
-		&.disabled,
-		&:disabled {
-			opacity: 0.5;
-		}
-	}
-</style>

package/src/Caption/Caption.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface CaptionProps {
-		weight?: 'regular' | 'bold';
-		children?: Snippet;
-	}
-	let { weight = 'regular', children }: CaptionProps = $props();
-</script>
-
-<div class={['container', weight]}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-
-<style lang="scss">
-	.container {
-		font-family: var(--swr-sans);
-		font-size: var(--fs-small-2);
-		line-height: 1;
-		letter-spacing: 0.0045em;
-	}
-
-	.bold {
-		font-weight: 585;
-		letter-spacing: 0;
-	}
-</style>

package/src/Card/Card.stories.svelte

@@ -1,19 +0,0 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Card from './Card.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Display/Card/Base',
-		component: Card
-	});
-</script>
-
-<Story name="Basic card" asChild>
-	<DesignTokens>
-		<Card>
-			<h1>Any content</h1>
-			<p>can be added to a basic <code>Card</code> component.</p>
-		</Card>
-	</DesignTokens>
-</Story>

package/src/Card/Card.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Copy from '../Copy/Copy.svelte';
-
-	interface CardProps {
-		children?: Snippet;
-	}
-
-	let { children }: CardProps = $props();
-</script>
-
-<div class="card">
-	{#if children}
-		<Copy>
-			{@render children()}
-		</Copy>
-	{/if}
-</div>
-
-<style lang="scss">
-	@use '../styles/base.scss';
-
-	.card {
-		color: white;
-		width: auto;
-		max-width: var(--app-max-width);
-		background: var(--violet-dark-5);
-		border-radius: var(--br-large);
-		padding: 1.5rem;
-		@media (min-width: base.$bp-m) {
-			padding: 2.5rem;
-		}
-	}
-</style>

package/src/ChartFooter/ChartFooter.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Logotype from '../Logotype/Logotype.svelte';
-	import Note from '../Note/Note.svelte';
-
-	interface ChartFooterProps {
-		layout: 'one-up' | 'two-up';
-		children?: Snippet;
-	}
-
-	let { layout = 'one-up', children }: ChartFooterProps = $props();
-</script>
-
-<footer class={`container ${layout}`}>
-	{#if children}
-		<Note>
-			{@render children()}
-		</Note>
-	{/if}
-	<Logotype />
-</footer>
-
-<style lang="scss">
-	@use '../styles/base.scss';
-
-	.container {
-		gap: 0.5rem;
-		:global(div) {
-			width: 100%;
-		}
-	}
-	.one-up {
-		display: flex;
-		flex-flow: column;
-		align-items: flex-start;
-	}
-	.two-up {
-		display: grid;
-		grid-template-columns: 1fr;
-		@media (min-width: base.$bp-s) {
-			grid-template-columns: 2.5fr 1fr;
-			align-items: last baseline;
-			justify-items: flex-end;
-		}
-	}
-</style>

package/src/Copy/Copy.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface CopyProps {
-		weight?: 'regular' | 'bold';
-		children?: Snippet;
-	}
-	let { weight = 'regular', children }: CopyProps = $props();
-</script>
-
-<div class={['container', weight]}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-
-<style lang="scss">
-	.container {
-		font-family: var(--swr-sans);
-		font-size: var(--fs-base);
-		letter-spacing: 0.005em;
-		line-height: 1.475;
-	}
-
-	.bold {
-		font-weight: 585;
-		letter-spacing: 0;
-	}
-</style>