refactor: use svelte storybook format

replace plain typescript storybook format with svelte using
addon-svelte-csf

this requires running test-storybook with --json-index flag. see:
 - https://github.com/storybookjs/addon-svelte-csf/issues/65
 - https://github.com/storybookjs/test-runner/issues/80

.storybook/main.ts

@@ -1,8 +1,9 @@
 import type { StorybookConfig } from "@storybook/sveltekit";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)"],
   addons: [
+    "@storybook/addon-svelte-csf",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",

package.json

@@ -10,7 +10,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook",
+    "test-storybook": "test-storybook --index-json",
     "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2\""
   },
   "devDependencies": {
@@ -18,6 +18,7 @@
     "@storybook/addon-essentials": "^7.4.5",
     "@storybook/addon-interactions": "^7.4.5",
     "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-svelte-csf": "^4.0.9",
     "@storybook/blocks": "^7.4.5",
     "@storybook/svelte": "^7.4.5",
     "@storybook/sveltekit": "^7.4.5",

src/lib/components/Navbar.stories.ts

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-import Navbar from '$lib/components/navbar.svelte';
-
-// More on how to set up stories at: https://storybook.js.org/docs/svelte/writing-stories/introduction
-const meta = {
-  title: 'Navbar',
-  component: Navbar,
-  tags: ['autodocs'],
-  argTypes: {
-    nip07plugin: { control: 'boolean' },
-  },
-} satisfies Meta<Navbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/svelte/writing-stories/args
-export const Default: Story = {
-  args: {
-  },
-};
-
-export const NoNIP07: Story = {
-  args: {
-    nip07plugin: false,
-  },
-};
-
-export const NIP07Exists: Story = {
-  args: {
-    nip07plugin: true,
-  },
-};

src/lib/components/navbar.stories.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" context="module">
+    import type { Meta } from "@storybook/svelte";
+    import Navbar from "$lib/components/navbar.svelte";
+    import { Story, Template } from "@storybook/addon-svelte-csf";
+
+    export const meta: Meta<Navbar> = {
+        title: "Navbar",
+        component: Navbar,
+        tags: ["autodocs"],
+    };
+</script>
+
+<Template let:args>
+    <Navbar {...args} />
+</Template>
+
+<Story name="Default" />
+
+<Story name="NoNIP07" args={{ nip07plugin: false }} />
+
+<Story name="NIP07Exists" args={{ nip07plugin: true }} />