handle defaultValue prop

evidence-dev · Feb 11, 2025 · d9ae2e5 · d9ae2e5
1 parent 3fc393e
commit d9ae2e5
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 7 deletions.
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.svelte b/packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.svelte
@@ -33,6 +33,7 @@
 
 	/** @type {string | undefined} */
 	export let defaultValue = undefined;
+	$: console.log(defaultValue, 'defaultValue');
 
 	setContext('button-display', display);
 
@@ -46,11 +47,13 @@
 
 	const valueStore = writable(null);
 
-	hydrateFromUrlParam(name, (v) => (defaultValue = v));
+	hydrateFromUrlParam(name, (v) => {
+		if (v) {
+			defaultValue = v;
+		}
+	});
 	setContext('button-group-defaultValue', writable(defaultValue));
 
-	$: console.log(defaultValue, 'defaultValue');
-
 	// TODO: Use getInputSetter instead
 	setButtonGroupContext((v) => {
 		$valueStore = v;

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroupItem.svelte b/packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroupItem.svelte
@@ -34,7 +34,7 @@
 
 	if ($buttonGroupDefaultValue === value || defaultValue === value) {
 		update({ valueLabel, value });
-	} else if (_default && !buttonGroupDefaultValue) {
+	} else if (_default && !$buttonGroupDefaultValue) {
 		update({ valueLabel, value });
 	}
 </script>

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/checkbox/Checkbox.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/checkbox/Checkbox.stories.svelte
@@ -15,6 +15,35 @@
 	import Checkbox from './Checkbox.svelte';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	const inputStore = getInputContext();
+
+	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>
 
 <Story name="Base" let:args>
@@ -33,3 +62,17 @@
 	<Checkbox title="boolean true" defaultValue={true} name="boolean_true" {...args} />
 	<p>{$inputStore.boolean_true}</p>
 </Story>
+<Story name="URL Params" let:args>
+	<Checkbox title="string true" defaultValue="true" name="string_true_url" {...args} />
+	<p>{$inputStore.string_true}</p>
+	<Checkbox title="boolean true" defaultValue={true} name="boolean_true_url" {...args} />
+	<p>{$inputStore.boolean_true}</p>
+
+	<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>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/dropdown/Dropdown.svelte b/packages/ui/core-components/src/lib/atoms/inputs/dropdown/Dropdown.svelte
@@ -99,7 +99,11 @@
 			: [];
 
 	// hydrateFromUrlParam(name, (v) => (defaultValue = v));
-	hydrateFromUrlParam(name, (v) => (defaultValue = v));
+	hydrateFromUrlParam(name, (v) => {
+		if (v) {
+			defaultValue = v;
+		}
+	});
 
 	const state = dropdownOptionStore({
 		multiselect: multiple,

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/slider/Slider.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/slider/Slider.stories.svelte
@@ -169,7 +169,7 @@
 	}}
 />
 <Story name="URL params">
-	<Slider name="URLParams" title="update url params" />
+	<Slider name="URLParams" title="update url params" defaultValue={12} />
 	<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

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/slider/_Slider.svelte b/packages/ui/core-components/src/lib/atoms/inputs/slider/_Slider.svelte
@@ -106,8 +106,14 @@
 	$inputs[name] = value;
 
 	// URL params hydration
+	// hydrateFromUrlParam(name, (v) => {
+	// 	value = [v] ?? [defaultValue];
+	// });
+
 	hydrateFromUrlParam(name, (v) => {
-		value = [v] ?? [defaultValue];
+		if (v) {
+			value = [v];
+		}
 	});
 
 	$: if (value) {