Update the examples to use writable stores instead of arrays for groups

Author: zxyctn

src/routes/components/facets/examples/FacetsGroupSelection.svelte

@@ -1,20 +1,12 @@
 <script lang="ts">
+	import { writable } from 'svelte/store';
+
 	import CodeContainer from '$docs/components/CodeContainer.svelte';
 	import Facets from '$lib/components/Facets/Facets.svelte';
 	import { facetsNoGroupSelectionData, facetsGroupSelectionSvelte } from '../data/codeBlocks';
 	import { groups } from '../data/data';
 
-	let selected = {
-		Mediums: [],
-		Genres: [],
-		Authors: []
-	};
-
-	let selectedGroups = {
-		Mediums: true,
-		Genres: false,
-		Authors: false
-	};
+	const groupsStore = writable(groups);
 </script>
 
 <div id="facetsGroupSelection">
@@ -23,6 +15,6 @@
 		svelte={facetsGroupSelectionSvelte}
 		data={facetsNoGroupSelectionData}
 	>
-		<Facets {groups} bind:selected bind:selectedGroups groupSelection open />
+		<Facets groups={groupsStore} groupSelection open on:change={(e) => console.log(e)} />
 	</CodeContainer>
 </div>

src/routes/components/facets/examples/FacetsNoGroupSelection.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
+	import { writable } from 'svelte/store';
+
 	import CodeContainer from '$docs/components/CodeContainer.svelte';
 	import Facets from '$lib/components/Facets/Facets.svelte';
 	import { facetsNoGroupSelectionData, facetsNoGroupSelectionSvelte } from '../data/codeBlocks';
 	import { groups } from '../data/data';
 
-	let selected = {
-		Mediums: [],
-		Genres: [],
-		Authors: []
-	};
+	const groupsStore = writable(groups);
 </script>
 
 <div id="facetsNoGroupSelection">
-	<CodeContainer title="No group selection, closed by default and all options displayed in UI" svelte={facetsNoGroupSelectionSvelte} data={facetsNoGroupSelectionData}>
-		<Facets {groups} bind:selected showAll />
+	<CodeContainer
+		title="No group selection, closed by default and all options displayed in UI"
+		svelte={facetsNoGroupSelectionSvelte}
+		data={facetsNoGroupSelectionData}
+	>
+		<Facets groups={groupsStore} showAll on:change={(e) => console.log(e)} />
 	</CodeContainer>
 </div>