@swr-data-lab/components 1.13.0 → 1.13.2

package/src/Select/Select.stories.svelte

@@ -1,205 +0,0 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Select from './Select.svelte';
-	import FormLabel from '../FormLabel/FormLabel.svelte';
-	import StoryTemplate from './SelectStoriesTemplate.svelte';
-	import jobsData from './mock_data/jobs.json';
-
-	const { Story } = defineMeta({
-		title: 'Form/Select',
-		component: Select
-	});
-</script>
-
-<script lang="ts">
-	import { userEvent, within, expect } from 'storybook/test';
-	import { type SelectItem } from './Select.types';
-	let selectedItem: SelectItem | undefined = undefined;
-</script>
-
-<Story
-	name="Simple"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Select');
-
-		await step('Clicking an option selects that item', async () => {
-			await userEvent.click(select);
-			await userEvent.click(canvas.getByText('Cake'));
-			expect(selectedItem).toEqual({ value: 'cake', label: 'Cake' });
-		});
-
-		await step('Entering a complete label selects that item', async () => {
-			await userEvent.type(select, 'Chocolate{enter}');
-			expect(selectedItem).toEqual({ value: 'chocolate', label: 'Chocolate' });
-		});
-
-		await step('Entering a unique part of a label selects the matching item', async () => {
-			await userEvent.type(select, 'Ice{enter}');
-			expect(selectedItem).toEqual({ value: 'ice-cream', label: 'Ice Cream' });
-		});
-
-		await step('Tapping the clear button clears the input', async () => {
-			const clearButton = document.querySelector('.clear-select');
-			await userEvent.click(clearButton);
-			expect(selectedItem).toEqual(undefined);
-		});
-	}}
->
-	<StoryTemplate
-		bind:selectedItem
-		args={{
-			inputId: 'select',
-			clearable: true,
-			items: [
-				{ value: 'chocolate', label: 'Chocolate' },
-				{ value: 'cake', label: 'Cake' },
-				{ value: 'ice-cream', label: 'Ice Cream' }
-			]
-		}}
-	/>
-</Story>
-
-<Story name="Grouped" asChild>
-	<StoryTemplate
-		bind:selectedItem
-		args={{
-			items: [
-				{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
-				{ value: 'pizza', label: 'Pizza', group: 'Savory' },
-				{ value: 'cake', label: 'Cake', group: 'Sweet' },
-				{ value: 'chips', label: 'Chips', group: 'Savory' },
-				{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
-			]
-		}}
-	/>
-</Story>
-
-<Story
-	name="Grouped (group header selectable)"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Select');
-
-		await step('Clicking an option header selects that header item', async () => {
-			await userEvent.click(select);
-			await userEvent.click(canvas.getByText('Savory'));
-			expect(selectedItem).toEqual({
-				groupHeader: true,
-				id: 'Savory',
-				label: 'Savory',
-				selectable: true,
-				value: 'Savory'
-			});
-		});
-
-		await step('Entering a label text selects its group header', async () => {
-			await userEvent.type(select, 'Chocolate{enter}');
-			expect(selectedItem).toEqual({
-				groupHeader: true,
-				id: 'Sweet',
-				label: 'Sweet',
-				selectable: true,
-				value: 'Sweet'
-			});
-		});
-	}}
->
-	<StoryTemplate
-		bind:selectedItem
-		args={{
-			inputId: 'job-select',
-			placeholder: 'Ihr Beruf',
-			groupHeaderSelectable: true,
-			items: [
-				{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
-				{ value: 'pizza', label: 'Pizza', group: 'Savory' },
-				{ value: 'cake', label: 'Cake', group: 'Sweet' },
-				{ value: 'chips', label: 'Chips', group: 'Savory' },
-				{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
-			]
-		}}
-	/>
-</Story>
-
-<Story
-	name="Custom items"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Berufe');
-
-		await step('Render custom list item with the supplied data', async () => {
-			await userEvent.type(select, 'Journalismus');
-			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');
-		});
-
-		await step('Entering an item\'s "title" selects that item', async () => {
-			await userEvent.type(select, 'Tierpflege{enter}');
-			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');
-		});
-	}}
->
-	<StoryTemplate>
-		{#snippet demoComponent()}
-			<FormLabel htmlFor="job-select">Berufe</FormLabel>
-			<Select
-				bind:value={selectedItem}
-				inputId="job-select"
-				placeholder="z.B. Taxifahrer/in"
-				items={jobsData
-					.sort((a, b) => a.label.localeCompare(b.label))
-					.map((item) => ({
-						value: item.value,
-						label: `${item.label}: ${item.add_on}`, // used for filtering
-						details: {
-							title: item.label, // used for display
-							addon: item.add_on // used for display
-						}
-					}))}
-				groupHeaderSelectable={false}
-			>
-				<div slot="item" let:item class="custom-item">
-					<h4 class="custom-item-title" data-testid="custom-item-title">
-						{item.details.title}
-					</h4>
-					<p class="custom-item-addon" data-testid="custom-item-addon">{item.details.addon}</p>
-				</div>
-				<div slot="selection" let:selection class="selection">
-					{selection.details.title}
-				</div>
-			</Select>
-		{/snippet}
-	</StoryTemplate>
-</Story>
-
-<style>
-	.custom-item {
-		font-size: 0.9rem;
-		margin-top: 0.2rem;
-	}
-
-	.custom-item-title {
-		margin: 0 0 0 -0.8rem;
-		padding: 0;
-		line-height: 1.4;
-	}
-
-	.custom-item-addon {
-		margin: 0 0 0 -0.8rem;
-		padding: 0;
-		line-height: 1;
-		opacity: 0.6;
-		font-size: 0.8rem;
-	}
-</style>

package/src/Select/Select.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import Select from 'svelte-select';
-	import { type SelectItem } from './Select.types';
-
-	interface SelectProps {
-		/**
-		 * The input field's ID. Should be unique across the page.
-		 */
-		inputId: string;
-		/**
-		 * The input field's placeholder text
-		 */
-		placeholder: string;
-		/**
-		 * The list of select options
-		 */
-		items: SelectItem[];
-		/**
-		 * Define custom item groupings. By default items are grouped by their `group` key
-		 */
-		groupBy?: ((item: SelectItem) => string) | undefined;
-		/**
-		 * Whether group names should be selectable
-		 */
-		groupHeaderSelectable?: boolean;
-		clearable?: boolean;
-		value: SelectItem | undefined;
-	}
-
-	let {
-		inputId = 'select',
-		placeholder = 'Bitte auswählen',
-		items = [],
-		groupBy,
-		groupHeaderSelectable = false,
-		clearable = true,
-		value = $bindable(undefined)
-	}: SelectProps = $props();
-
-	const groupByFn = groupBy || ((item: SelectItem) => item.group as string);
-</script>
-
-<div class="container">
-	<Select
-		{items}
-		groupBy={items.length > 0 && items.every((item) => item.group) ? groupByFn : undefined}
-		id={inputId}
-		{placeholder}
-		{groupHeaderSelectable}
-		{clearable}
-		class="container"
-		bind:value
-	>
-		<div class="item" slot="item" let:item>
-			<slot name="item" {item}>
-				{item.label}
-			</slot>
-		</div>
-		<div class="selection" slot="selection" let:selection>
-			<slot name="selection" {selection}>
-				{selection.label}
-			</slot>
-		</div>
-	</Select>
-</div>
-
-<style lang="scss">
-	.item {
-		font-family: var(--swr-sans);
-		color: var(--violet-dark-5);
-	}
-	.selection {
-		font-family: var(--swr-sans);
-		color: var(--violet-dark-5);
-	}
-</style>

package/src/Select/SelectStoriesTemplate.svelte

@@ -1,31 +0,0 @@
-<script>
-	import Select from './Select.svelte';
-	import FormLabel from '../FormLabel/FormLabel.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	let { args = null, selectedItem = $bindable(), demoComponent = null } = $props();
-</script>
-
-<DesignTokens>
-	{#if demoComponent}
-		{@render demoComponent()}
-	{:else}
-		<FormLabel htmlFor={args.inputId}>Select</FormLabel>
-		<Select {...args} bind:value={selectedItem} />
-	{/if}
-</DesignTokens>
-
-{#if selectedItem}
-	<pre class="output">
-value = {JSON.stringify(selectedItem, null, ' ')}</pre>
-{/if}
-
-<style>
-	.output {
-		display: block;
-		margin-top: 1rem;
-		padding: 1rem;
-		background: #fcfaff;
-		color: rgb(18, 69, 139);
-	}
-</style>

package/src/Switcher/Switcher.stories.svelte

@@ -1,44 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Switcher from './Switcher.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { userEvent, within, expect } from 'storybook/test';
-
-	const { Story } = defineMeta({
-		title: 'Form/Switcher',
-		component: Switcher
-	});
-</script>
-
-<Story name="Two Options" asChild>
-	<DesignTokens>
-		<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
-	</DesignTokens>
-</Story>
-
-<Story
-	name="Four Options"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		await step('Clicking selects the expected option', async () => {
-			const optionA = canvas.getByLabelText('Apples');
-			const optionB = canvas.getByLabelText('Bananas');
-			await userEvent.click(optionA);
-			expect(optionA).toBeChecked();
-			expect(optionB).not.toBeChecked();
-			await userEvent.click(optionB);
-			expect(optionB).toBeChecked();
-			expect(optionA).not.toBeChecked();
-		});
-	}}
->
-	<DesignTokens>
-		<Switcher
-			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
-			value="Oranges"
-			label="Label"
-			size="small"
-		/>
-	</DesignTokens>
-</Story>

package/src/Switcher/Switcher.svelte

@@ -1,130 +0,0 @@
-<script lang="ts">
-	import FormLabel from '../FormLabel/FormLabel.svelte';
-
-	interface SwitcherProps {
-		/**
-		 * Human-readable label
-		 */
-		label: string;
-		/**
-		 * Available options
-		 */
-		options: string[];
-		/**
-		 * Display size
-		 */
-		size?: 'default' | 'small';
-		/**
-		 * The currently-selected option
-		 */
-		value: string | null;
-	}
-
-	let { label, options, size = 'default', value = $bindable(null) }: SwitcherProps = $props();
-
-	const groupId = $props.id();
-	const groupName = 'select-' + groupId;
-
-	function optionToID(o: string) {
-		return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
-	}
-</script>
-
-<fieldset class="container" class:small={size === 'small'}>
-	<FormLabel as="legend">{label}</FormLabel>
-	<ul>
-		{#each options as o (o)}
-			<li class:is-selected={o === value}>
-				<label for={optionToID(o)}>
-					{o}
-				</label>
-				<input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
-			</li>
-		{/each}
-	</ul>
-</fieldset>
-
-<style lang="scss">
-	@use '../styles/base.scss';
-
-	fieldset {
-		border: 0;
-		font-family: var(--swr-sans);
-	}
-
-	ul {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-		padding: 0;
-		margin: 0;
-		border: 1px solid currentColor;
-		background: white;
-		border-radius: var(--br-small);
-
-		@media (min-width: base.$bp-s) {
-			flex-flow: row;
-		}
-
-		&:focus-within,
-		&:active {
-			outline: 2px solid var(--blue-light-2);
-		}
-	}
-	li {
-		display: contents;
-		&:last-child label {
-			border-right: 0;
-			border-bottom: 0;
-		}
-	}
-	input {
-		position: absolute;
-		left: -999px;
-	}
-	.small label {
-		font-size: var(--fs-small-1);
-		height: 2.25em;
-		padding: 0 0.65em;
-	}
-	label {
-		font-size: var(--fs-base);
-		line-height: 1;
-		white-space: nowrap;
-		padding: 0 1em;
-		cursor: pointer;
-		margin: 0;
-		align-items: center;
-		display: flex;
-		color: currentColor;
-		position: relative;
-		transition: var(--fast);
-		text-underline-offset: 0.2em;
-		border-bottom: 1px solid currentColor;
-		height: 2.25em;
-		@media (min-width: base.$bp-s) {
-			justify-content: center;
-			padding: 0 1em;
-			flex-basis: 0;
-			flex-grow: 1;
-			border-right: 1px solid currentColor;
-			border-bottom: 0;
-		}
-		@media (min-width: base.$bp-s) {
-			height: 2.5em;
-		}
-		&:hover,
-		&:focus-visible {
-			text-decoration: underline;
-		}
-		.is-selected & {
-			background: rgb(247, 247, 247);
-			font-weight: 600;
-			box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
-			@media (min-width: base.$bp-s) {
-				box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
-			}
-		}
-	}
-</style>

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

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

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import maplibre, { type ControlPosition } 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 maplibre.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/GeocoderControl/GeocoderAPIs.ts

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

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