URL params hydration slider + textInput

packages/lib/sdk/src/utils/svelte/storybookURLWatcher.js

@@ -0,0 +1,31 @@
+export let displayedStoryURL = window.location.href; // The string that updates
+
+const updateURL = () => {
+	const newURL = window.location.href;
+	if (newURL !== displayedStoryURL) {
+		displayedStoryURL = newURL; // Update the variable
+
+		// Try forcing Storybook to recognize the change
+		const iframe = document.querySelector('iframe');
+		if (iframe) {
+			iframe.src = iframe.src; // Force reload
+		}
+	}
+};
+
+export const initStorybookURLWatcher = () => {
+	const pushState = history.pushState;
+	const replaceState = history.replaceState;
+
+	history.pushState = function () {
+		pushState.apply(history, arguments);
+		updateURL();
+	};
+
+	history.replaceState = function () {
+		replaceState.apply(history, arguments);
+		updateURL();
+	};
+
+	window.addEventListener('popstate', updateURL);
+};

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.stories.svelte

@@ -257,8 +257,13 @@
 
 	Current Value: {$inputStore[args.name]}
 	<div>URL: {storyIframeURL}</div>
-	<button on:click={() => window.open(storyIframeURL, '_blank')}>Go to Link</button></Story
->
+	<button
+		class="mt-4 p-1 border bg-info/60 hover:bg-info/40 active:bg-info/20 rounded-md text-sm
+
+	"
+		on:click={() => window.open(storyIframeURL, '_blank')}>Go to URL</button
+	>
+</Story>
 
 <Story
 	name="URL Params Query-Based Entries - Text"
@@ -290,6 +295,13 @@
 	</div>
 
 	Current Value: {$inputStore['buttonGroup_A']}
+	<div>URL: {storyIframeURL}</div>
+	<button
+		class="mt-4 p-1 border bg-info/60 hover:bg-info/40 active:bg-info/20 rounded-md text-sm
+
+	"
+		on:click={() => window.open(storyIframeURL, '_blank')}>Go to URL</button
+	>
 
 	<div class="mb-8">
 		<ButtonGroup {...args} data={undefined} name="buttonGroup_B">
@@ -302,4 +314,11 @@
 
 	Current Value: {$inputStore['buttonGroup_B']}
 	<div class="mt-4">URL: {storyIframeURL}</div>
+	<div>URL: {storyIframeURL}</div>
+	<button
+		class="mt-4 p-1 border bg-info/60 hover:bg-info/40 active:bg-info/20 rounded-md text-sm
+
+	"
+		on:click={() => window.open(storyIframeURL, '_blank')}>Go to URL</button
+	>
 </Story>

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.svelte

@@ -62,8 +62,6 @@
 		// }
 	}, readonly(valueStore));
 
-	$: console.log('valueStore', $valueStore);
-
 	/////
 	// Query-Related Things
 	/////

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroupItem.svelte

@@ -32,10 +32,6 @@
 	let _default = false;
 	export { _default as default };
 
-	// if (_default) {
-	// 	update({ valueLabel, value });
-	// }
-
 	if (
 		$buttonGroupDefaultValue?.toString() === value.toString() ||
 		defaultValue?.toString() === value.toString()

packages/ui/core-components/src/lib/atoms/inputs/slider/Slider.stories.svelte

@@ -30,6 +30,35 @@
 	LIMIT 10`,
 		query
 	);
+
+	let storyIframeURL = '';
+
+	const updateURL = () => {
+		storyIframeURL = window.location.href;
+
+		// Try forcing Storybook to recognize the change
+		const iframe = document.querySelector('iframe');
+		if (iframe) {
+			iframe.src = iframe.src; // Force reload
+		}
+	};
+
+	(function () {
+		const pushState = history.pushState;
+		const replaceState = history.replaceState;
+
+		history.pushState = function () {
+			pushState.apply(history, arguments);
+			updateURL();
+		};
+
+		history.replaceState = function () {
+			replaceState.apply(history, arguments);
+			updateURL();
+		};
+
+		window.addEventListener('popstate', updateURL);
+	})();
 </script>
 
 <Template let:args>
@@ -139,3 +168,13 @@
 		min: '0'
 	}}
 />
+<Story name="URL params">
+	<Slider name="URLParams" title="update url params" />
+	<div class="mt-4">URL: {storyIframeURL}</div>
+	<button
+		class="mt-4 p-1 border bg-info/60 hover:bg-info/40 active:bg-info/20 rounded-md text-sm
+
+	"
+		on:click={() => window.open(storyIframeURL, '_blank')}>Go to URL</button
+	>
+</Story>

packages/ui/core-components/src/lib/atoms/inputs/slider/_Slider.svelte

@@ -60,7 +60,7 @@
 	export let description = undefined;
 
 	export let data = null;
-	
+
 	/** @type {[number]} */
 	let value;
 	// const updateUrl = useUrlParams(name, (v) => {
@@ -103,9 +103,14 @@
 		}
 	}
 
-		// Keep inputs in sync
-		$inputs[name] = value;
-		updateUrlParam(name, value);
+	// Keep inputs in sync
+	$inputs[name] = value;
+
+	// URL params hydration
+	hydrateFromUrlParam(name, (v) => {
+		value = [v] ?? [defaultValue];
+	});
+	$: updateUrlParam(name, value);
 
 	const renderSize = (size) => {
 		const sizeMap = {
@@ -164,13 +169,13 @@
 					'No data provided. If you referenced a query result, check that the name is correct.'
 				);
 			} else {
-				hydrateFromUrlParam(name,value, defaultValue, (v) => {
-						value = [v] ?? [defaultValue];
-					});
-				if($page.url.searchParams.has(name)){
-					value = [$page.url.searchParams.get(name)]
+				hydrateFromUrlParam(name, value, defaultValue, (v) => {
+					value = [v] ?? [defaultValue];
+				});
+				if ($page.url.searchParams.has(name)) {
+					value = [$page.url.searchParams.get(name)];
 				}
-					initialized = true;
+				initialized = true;
 			}
 		} catch (e) {
 			error = e.message;
@@ -193,9 +198,7 @@
 					{title}:
 				{/if}
 			</span>
-			<span class="text-xs">
-				{fmt ? formatValue(value, format_object) : value}</span
-			>
+			<span class="text-xs"> {fmt ? formatValue(value, format_object) : value}</span>
 		</p>
 		<SliderShadcn {min} {max} {step} {sizeClass} bind:value />
 		{#if showMaxMin}

packages/ui/core-components/src/lib/atoms/inputs/text/TextInput.stories.svelte

@@ -13,7 +13,43 @@
 	import TextInput from './TextInput.svelte';
 	// From layout.js
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+	// import {
+	// 	displayedStoryURL,
+	// 	initStorybookURLWatcher
+	// } from '/home/kylew/projects/evidence/evidence/packages/lib/sdk/src/utils/svelte/storybookURLWatcher.js';
+
 	const inputStore = getInputContext();
+
+	// initStorybookURLWatcher(); // Start watching for URL changes
+
+	let storyIframeURL = '';
+
+	const updateURL = () => {
+		storyIframeURL = window.location.href;
+
+		// Try forcing Storybook to recognize the change
+		const iframe = document.querySelector('iframe');
+		if (iframe) {
+			iframe.src = iframe.src; // Force reload
+		}
+	};
+
+	(function () {
+		const pushState = history.pushState;
+		const replaceState = history.replaceState;
+
+		history.pushState = function () {
+			pushState.apply(history, arguments);
+			updateURL();
+		};
+
+		history.replaceState = function () {
+			replaceState.apply(history, arguments);
+			updateURL();
+		};
+
+		window.addEventListener('popstate', updateURL);
+	})();
 </script>
 
 <Template let:args>
@@ -32,3 +68,8 @@
 </Template>
 
 <Story name="Default" />
+
+<Story name="URL Params">
+	<TextInput name="URLParams" title="update url params" />
+	<div class="mt-4">URL: {storyIframeURL}</div>
+</Story>