chore: add upobjectcard story, routerdecorator, link upobject story

webui/src/stories/RouterDecorator.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Router } from "svelte-navigator";
+  import type { NavigatorHistory } from "svelte-navigator";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  const nullHistory: NavigatorHistory = {
+    location: {
+      _key: "",
+      state: {},
+      pathname: "",
+      search: "",
+      hash: "",
+    },
+    listen: () => {
+      return () => {};
+    },
+    navigate: (to: string | number) => {
+      dispatch("navigate", to);
+    },
+  };
+</script>
+
+<Router history={nullHistory} primary={false}>
+  <slot />
+</Router>

webui/src/stories/UpObject.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/svelte";
 import UpObject from "../components/display/UpObject.svelte";
 import { videoAddress } from "./common";
+import RouterDecorator from "./RouterDecorator.svelte";
 
 const address = videoAddress;
 
@@ -8,11 +9,17 @@ const meta: Meta<UpObject> = {
   title: "Display/UpObject",
   component: UpObject,
   tags: ["autodocs"],
+  args: {
+    address,
+  },
   argTypes: {
     address: {
       defaultValue: address,
       name: "Address",
-      type: "string"
+      type: "string",
+    },
+    onResolved: {
+      action: "resolved",
     },
   },
 };
@@ -21,20 +28,23 @@ export default meta;
 type Story = StoryObj<UpObject>;
 
 // More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
-export const Plain: Story = {
-  args: {address}
-};
+export const Plain: Story = {};
 
 export const WithLabels: Story = {
   args: {
-    address,
     labels: ["Label 1", "Label B", "Label III"],
   },
 };
 
+export const Link: Story = {
+  args: {
+    link: true,
+  },
+  decorators: [() => RouterDecorator],
+};
+
 export const Banner: Story = {
   args: {
-    address,
     banner: true,
   },
 };

webui/src/stories/UpObjectCard.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/svelte";
+import UpObjectCard from "../components/display/UpObjectCard.svelte";
+import { imageAddress } from "./common";
+import RouterDecorator from "./RouterDecorator.svelte";
+
+const address = imageAddress;
+
+const meta: Meta<UpObjectCard> = {
+  title: "Display/UpObjectCard",
+  component: UpObjectCard,
+  tags: ["autodocs"],
+  args: {
+    address,
+  },
+  argTypes: {
+    address: {
+      defaultValue: address,
+      name: "Address",
+      type: "string",
+    },
+  },
+  decorators: [() => RouterDecorator]
+};
+
+export default meta;
+type Story = StoryObj<UpObjectCard>;
+
+export const Plain: Story = {};
+
+export const WithLabels: Story = {
+  args: {
+    labels: ["Label 1", "Label B", "Label III"],
+  },
+};