build: storybook init

webui/.eslintrc.cjs

@@ -1,33 +1,34 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true,
+    es2021: true
   },
-  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",
-    sourceType: "module",
+    sourceType: "module"
   },
   plugins: ["svelte3", "@typescript-eslint"],
-  overrides: [
-    {
-      files: ["*.svelte"],
-      processor: "svelte3/svelte3",
-    },
-  ],
+  overrides: [{
+    files: ["*.svelte"],
+    processor: "svelte3/svelte3"
+  }],
   rules: {
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
-    ],
-    "no-console": ["error", { allow: ["debug", "warn", "error"] }],
+    "@typescript-eslint/no-unused-vars": ["warn", {
+      argsIgnorePattern: "^_",
+      varsIgnorePattern: "^_"
+    }],
+    "no-console": ["error", {
+      allow: ["debug", "warn", "error"]
+    }]
   },
   settings: {
-    "svelte3/typescript": true, // load TypeScript as peer dependency
-    "svelte3/ignore-warnings": (w) => w.code == "unused-export-let",
+    "svelte3/typescript": true,
+    // load TypeScript as peer dependency
+    "svelte3/ignore-warnings": w => w.code == "unused-export-let"
   },
   globals: {
-    NodeJS: true,
-  },
-};
+    NodeJS: true
+  }
+};

webui/.storybook/main.ts

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

webui/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

webui/.storybook/preview.js

@@ -0,0 +1,11 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+import "../src/styles/main.scss";

webui/package.json

@@ -9,9 +9,20 @@
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "lint": "eslint src",
-    "clean": "rm -frv dist public/vendor"
+    "clean": "rm -frv dist public/vendor",
+    "storybook": "npm-run-all -p -r storybook:serve storybook:upend",
+    "storybook:serve": "storybook dev -p 6006",
+    "storybook:upend": "cargo run -- ../example_vault --bind 127.0.0.1:8099 --no-browser",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.0-beta.30",
+    "@storybook/addon-interactions": "^7.0.0-beta.30",
+    "@storybook/addon-links": "^7.0.0-beta.30",
+    "@storybook/blocks": "^7.0.0-beta.30",
+    "@storybook/svelte": "^7.0.0-beta.30",
+    "@storybook/svelte-vite": "^7.0.0-beta.30",
+    "@storybook/testing-library": "^0.0.13",
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
     "@types/d3": "^7.4.0",
@@ -24,7 +35,12 @@
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
     "eslint": "^8.30.0",
+    "eslint-plugin-storybook": "^0.6.10",
     "eslint-plugin-svelte3": "^4.0.0",
+    "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0-beta.30",
     "svelte": "^3.55.0",
     "svelte-check": "^2.10.3",
     "svelte-preprocess": "^5.0.0",

webui/src/stories/UpObject.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/svelte";
+import UpObject from "../components/display/UpObject.svelte";
+import { videoAddress } from "./common";
+
+const address = videoAddress;
+
+const meta: Meta<UpObject> = {
+  title: "Display/UpObject",
+  component: UpObject,
+  tags: ["autodocs"],
+  argTypes: {
+    address: {
+      defaultValue: address,
+      name: "Address",
+      type: "string"
+    },
+  },
+};
+
+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 WithLabels: Story = {
+  args: {
+    address,
+    labels: ["Label 1", "Label B", "Label III"],
+  },
+};
+
+export const Banner: Story = {
+  args: {
+    address,
+    banner: true,
+  },
+};

webui/src/stories/common.ts

@@ -0,0 +1 @@
+export const videoAddress = "zQmeQHYJRniFnkFhG8fDNKQmwqHJW9rLyhX5WCnoDtg7wWa";