dev: (re) add storybook

webui/.eslintrc.cjs

@@ -2,11 +2,12 @@
 module.exports = {
 	root: true,
 	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:svelte/recommended",
+        "prettier",
+        "plugin:storybook/recommended"
+    ],
 	parser: '@typescript-eslint/parser',
 	plugins: ['@typescript-eslint'],
 	parserOptions: {

webui/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions'
+	],
+	framework: {
+		name: '@storybook/sveltekit',
+		options: {}
+	},
+	docs: {
+		autodocs: 'tag'
+	},
+	viteFinal: (config) => {
+		config.server!.proxy = {
+			'/api': {
+				target: 'http://localhost:8099/'
+			}
+		};
+		return config;
+	}
+};
+export default config;

webui/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/svelte';
+import '../src/lib/styles/main.scss';
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	}
+};
+
+export default preview;

webui/package.json

@@ -10,9 +10,19 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+    "storybook": "concurrently \"npm run storybook:serve\" \"cargo run -- serve ../example_vault --clean --no-browser --reinitialize --rescan-mode mirror --bind 127.0.0.1:8099\"",
+		"storybook:serve": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
+		"@storybook/addon-essentials": "^7.6.16",
+		"@storybook/addon-interactions": "^7.6.16",
+		"@storybook/addon-links": "^7.6.16",
+		"@storybook/blocks": "^7.6.16",
+		"@storybook/svelte": "^7.6.16",
+		"@storybook/sveltekit": "^7.6.16",
+		"@storybook/test": "^7.6.16",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
@@ -21,9 +31,13 @@
 		"@typescript-eslint/parser": "^6.0.0",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-storybook": "^0.8.0",
 		"eslint-plugin-svelte": "^2.35.1",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"storybook": "^7.6.16",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",

webui/src/stories/BlobPreview.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import BlobPreview from '../lib/components/display/BlobPreview.svelte';
+import {
+	audioAddress,
+	imageAddress,
+	imageVerticalAddress,
+	stlAddress,
+	videoAddress,
+	videoVerticalAddress
+} from './common';
+
+const meta: Meta<BlobPreview> = {
+	title: 'Blobs/BlobPreview',
+	component: BlobPreview,
+	tags: ['autodocs'],
+	argTypes: {
+		onLoaded: {
+			action: 'loaded'
+		}
+	}
+};
+
+export default meta;
+type Story = StoryObj<BlobPreview>;
+
+export const Image: Story = {
+	args: { address: imageAddress }
+};
+
+export const ImageVertical: Story = {
+	args: { address: imageVerticalAddress }
+};
+
+export const Audio: Story = {
+	args: { address: audioAddress }
+};
+
+export const Video: Story = {
+	args: { address: videoAddress }
+};
+
+export const VideoVertical: Story = {
+	args: { address: videoVerticalAddress }
+};
+
+export const Model3d: Story = {
+	args: { address: stlAddress }
+};

webui/src/stories/BlobViewer.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import BlobViewer from '../lib/components/display/BlobViewer.svelte';
+import {
+	audioAddress,
+	imageAddress,
+	imageVerticalAddress,
+	stlAddress,
+	videoAddress,
+	videoVerticalAddress
+} from './common';
+
+const meta: Meta<BlobViewer> = {
+	title: 'Blobs/BlobViewer',
+	component: BlobViewer,
+	tags: ['autodocs'],
+	argTypes: {
+		detail: {
+			control: {
+				type: 'boolean'
+			}
+		}
+	}
+};
+
+export default meta;
+type Story = StoryObj<BlobViewer>;
+
+export const Image: Story = {
+	args: { address: imageAddress }
+};
+
+export const ImageVertical: Story = {
+	args: { address: imageVerticalAddress }
+};
+
+export const Audio: Story = {
+	args: { address: audioAddress }
+};
+
+export const Video: Story = {
+	args: { address: videoAddress }
+};
+
+export const VideoVertical: Story = {
+	args: { address: videoVerticalAddress }
+};
+
+export const Model3d: Story = {
+	args: { address: stlAddress }
+};

webui/src/stories/EntityList.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import EntityList from '../lib/components/widgets/EntityList.svelte';
+import { imageAddress, imageVerticalAddress, videoAddress, videoVerticalAddress } from './common';
+
+const meta: Meta<EntityList> = {
+	title: 'Widgets/EntityList',
+	component: EntityList,
+	tags: ['autodocs'],
+	args: {
+		entities: [imageAddress, imageVerticalAddress, videoAddress, videoVerticalAddress]
+	}
+};
+
+export default meta;
+type Story = StoryObj<EntityList>;
+
+export const Thumbnails: Story = {
+	args: {
+		thumbnails: true
+	}
+};
+
+export const Plain: Story = {
+	args: {
+		thumbnails: false
+	}
+};

webui/src/stories/FullscreenDecorator.svelte

@@ -0,0 +1,11 @@
+<slot />
+
+<style>
+  :global(body.sb-main-fullscreen) {
+    height: 100vh;
+  }
+
+  :global(#storybook-root) {
+    display: contents;
+  }
+</style>

webui/src/stories/Selector.stories.ts

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import Selector from '../lib/components/utils/Selector.svelte';
+
+const meta: Meta<Selector> = {
+	title: 'Widgets/Selector',
+	component: Selector,
+	tags: ['autodocs'],
+	argTypes: {
+		onInput: {
+			action: 'input'
+		},
+		onFocus: {
+			action: 'focus'
+		}
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	} as any
+};
+
+export default meta;
+type Story = StoryObj<Selector>;
+
+export const Attribute: Story = {
+	args: {
+		types: ['Attribute', 'NewAttribute']
+	}
+};
+
+export const AttributeInitial: Story = {
+	args: {
+		types: ['Attribute'],
+		initial: {
+			t: 'Attribute',
+			name: 'INITIAL_ATTR'
+		}
+	}
+};
+
+export const AllValues: Story = {
+	args: {
+		types: ['Attribute', 'NewAttribute', 'Address', 'NewAddress', 'String', 'Number']
+	}
+};
+
+export const Entities: Story = {
+	args: {
+		types: ['Address', 'NewAddress']
+	}
+};
+
+export const ExistingEntities: Story = {
+	args: {
+		types: ['Address']
+	}
+};
+
+export const Strings: Story = {
+	args: {
+		types: ['String']
+	}
+};
+
+export const StringInitial: Story = {
+	args: {
+		types: ['String'],
+		initial: {
+			t: 'String',
+			c: 'An Initial String.'
+		}
+	}
+};
+
+export const Numbers: Story = {
+	args: {
+		types: ['Number']
+	}
+};
+
+export const MultipleValues: Story = {
+	args: {
+		types: ['String', 'Number']
+	}
+};

webui/src/stories/UpObject.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import UpObject from '../lib/components/display/UpObject.svelte';
+import { videoAddress } from './common';
+
+const address = videoAddress;
+
+const meta: Meta<UpObject> = {
+	title: 'Display/UpObject',
+	component: UpObject,
+	tags: ['autodocs'],
+	args: {
+		address
+	},
+	argTypes: {
+		address: {
+			defaultValue: address,
+			name: 'Address',
+			type: 'string'
+		},
+		onResolved: {
+			action: 'resolved'
+		}
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	} as any
+};
+
+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 Default: Story = {};
+
+export const WithLabels: Story = {
+	args: {
+		labels: ['Label 1', 'Label B', 'Label III']
+	}
+};
+
+export const Link: Story = {
+	args: {
+		link: true
+	}
+};
+
+export const Banner: Story = {
+	args: {
+		banner: true
+	}
+};
+
+export const BannerWithLabels: Story = {
+	args: {
+		banner: true,
+		labels: ['Label 1', 'Label B', 'Label III']
+	}
+};

webui/src/stories/UpObjectCard.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import UpObjectCard from '../lib/components/display/UpObjectCard.svelte';
+import { imageAddress } from './common';
+
+const address = imageAddress;
+
+const meta: Meta<UpObjectCard> = {
+	title: 'Display/UpObjectCard',
+	component: UpObjectCard,
+	tags: ['autodocs'],
+	args: {
+		address
+	},
+	argTypes: {
+		address: {
+			defaultValue: address,
+			name: 'Address',
+			type: 'string'
+		}
+	}
+};
+
+export default meta;
+type Story = StoryObj<UpObjectCard>;
+
+export const Default: Story = {};
+
+export const WithLabels: Story = {
+	args: {
+		labels: ['Label 1', 'Label B', 'Label III']
+	}
+};
+
+export const WithoutThumbnail: Story = {
+	args: {
+		thumbnail: false
+	}
+};
+
+export const Small: Story = {
+	args: {
+		banner: false
+	}
+};

webui/src/stories/common.ts

@@ -0,0 +1,11 @@
+export const imageAddress = "zb2rhYSdmX5kD5vkUErWkmTpyhGugBX8WqBuLLQdgox8ztwwx";
+export const imageVerticalAddress =
+  "zb2rhmTC5cXbcQ3kgXkcksWWBbR4VrzU5L3S9kbyMPCicVy9L";
+
+export const audioAddress = "zb2rhj3LpjUDtka3WuygZJGcEbgmrEyjBY6Y6ya9PVVEkbkke";
+
+export const videoAddress = "zb2rhnhv2Me2ZWohSYp7kyf1KAQbZ1zsLficHsaWTgoex67iJ";
+export const videoVerticalAddress =
+  "zb2rhocWjf4rc39Wi7TDv6KaVxs2iTQqN6CVYR6m7M8AYgp9c";
+
+export const stlAddress = "zb2rhbprcQL38kifW8aMW8cvgWymtaBEe6fK9n3nzDum25Paf";