feat: allow for linking between stories

In order to link between stories in Storybook I need to add some
attribute to elements, so that the events are prevented and navigation
can be handled by Storybook.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

.prettierignore

@@ -6,6 +6,7 @@ node_modules
 .env
 .env.*
 !.env.example
+/storybook-static
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

src/lib/components/organisms/LoginForm.svelte

@@ -15,6 +15,11 @@
 	 * Available servers for signin
 	 */
 	export let servers: Array = [];
+
+	/**
+	 * Allow for linking stories in Storybook.
+	 */
+	export let sb = '';
 </script>
 
 <form class="space-y-4" name="login" method="POST" action="?/login">
@@ -50,7 +55,7 @@
 			{$_(i18n.reset)}
 		</a>
 	</div>
-	<button type="submit" class="w-full btn variant-filled-primary">
+	<button type="submit" class="w-full btn variant-filled-primary" data-sb-kind={sb}>
 		{$_(i18n.submit)}
 	</button>
 </form>

src/lib/components/templates/Login.svelte

@@ -7,6 +7,10 @@
 	 * Form handling by SvelteKit
 	 */
 	export let form: unknown = null;
+
+	/**
+	 * Translation keys to enable reuse
+	 */
 	const i18n = {
 		fields: {
 			account: {
@@ -27,6 +31,12 @@
 			missing: 'page.login.form.validation.missing'
 		}
 	};
+
+	/**
+	 * Allow for linking stories in Storybook.
+	 */
+	export let sb = '';
+
 	const servers = {
 		'1': 'fig.fr33domlover.site',
 		'2': 'grape.fr33domlover.site',
@@ -38,6 +48,6 @@
 	<div class="space-y-10">
 		<h1 class="h1 font-bold">{$_('page.login.heading')}</h1>
 		<p>{$_('page.login.intro')}</p>
-		<LoginForm {form} {i18n} {servers} />
+		<LoginForm {form} {i18n} {sb} {servers} />
 	</div>
 </div>

src/lib/components/templates/Profile.svelte

@@ -13,6 +13,11 @@
 	 * Required context for populating the template.
 	 */
 	export let data: ProfileData = null;
+
+	/**
+	 * Allow for linking stories in Storybook.
+	 */
+	export let sb = '';
 </script>
 
 <section class="w-full mx-auto flex px-8 pt-8">
@@ -60,7 +65,7 @@
 					values: {
 						addElementOpen: '<a class="anchor" href="#">',
 						addElementClose: '</a>',
-						importElementOpen: '<a class="anchor" href="/projects/import/">',
+						importElementOpen: `<a class="anchor" href="/projects/import/" data-sb-kind=${sb}>`,
 						importElementClose: '</a>'
 					}
 				})}