From a380b7c1415ca37b27f016bb0c06af7621d532cf Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 28 Nov 2023 15:55:34 -0500
Subject: [PATCH 1/4] Removes *.demo.svelte files

Since we updated to Svelte4 and the newest version of `@storybook/addon-svelte-csf`, we no longer have to avoid composed components in our stories.
---
 src/addons/browser/SearchInput.svelte         |  2 +-
 .../browser/stories/AddOnListItem.demo.svelte | 20 ----------
 .../stories/AddOnListItem.stories.svelte      | 26 ++++++++-----
 src/addons/browser/stories/Filter.demo.svelte | 10 -----
 .../browser/stories/Filter.stories.svelte     | 26 +++++++------
 .../browser/stories/SearchInput.demo.svelte   |  7 ----
 .../stories/SearchInput.stories.svelte        | 27 ++++++++------
 src/addons/dispatch/stories/Form.demo.svelte  | 20 ----------
 .../dispatch/stories/Form.stories.svelte      | 36 ++++++++++++------
 .../dispatch/stories/Header.demo.svelte       | 16 --------
 .../dispatch/stories/Header.stories.svelte    | 28 +++++++++-----
 .../sidebar/stories/ListItem.demo.svelte      | 22 -----------
 .../sidebar/stories/ListItem.stories.svelte   | 37 +++++++++++++------
 .../sidebar/stories/Sidebar.demo.svelte       | 15 --------
 .../sidebar/stories/Sidebar.stories.svelte    | 31 ++++++++++------
 src/addons/stories/Drawer.demo.svelte         | 20 ----------
 src/addons/stories/Drawer.stories.svelte      | 32 +++++++++++-----
 src/addons/stories/Paginator.demo.svelte      | 25 -------------
 src/addons/stories/Paginator.stories.svelte   | 35 +++++++++++++-----
 19 files changed, 183 insertions(+), 252 deletions(-)
 delete mode 100644 src/addons/browser/stories/AddOnListItem.demo.svelte
 delete mode 100644 src/addons/browser/stories/Filter.demo.svelte
 delete mode 100644 src/addons/browser/stories/SearchInput.demo.svelte
 delete mode 100644 src/addons/dispatch/stories/Form.demo.svelte
 delete mode 100644 src/addons/dispatch/stories/Header.demo.svelte
 delete mode 100644 src/addons/sidebar/stories/ListItem.demo.svelte
 delete mode 100644 src/addons/sidebar/stories/Sidebar.demo.svelte
 delete mode 100644 src/addons/stories/Drawer.demo.svelte
 delete mode 100644 src/addons/stories/Paginator.demo.svelte

diff --git a/src/addons/browser/SearchInput.svelte b/src/addons/browser/SearchInput.svelte
index f7267b519..25fa1fa38 100644
--- a/src/addons/browser/SearchInput.svelte
+++ b/src/addons/browser/SearchInput.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script lang="ts" context="module">
   import { _ } from "svelte-i18n";
   import { writable } from "svelte/store";
 
diff --git a/src/addons/browser/stories/AddOnListItem.demo.svelte b/src/addons/browser/stories/AddOnListItem.demo.svelte
deleted file mode 100644
index c7b841315..000000000
--- a/src/addons/browser/stories/AddOnListItem.demo.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { action } from "@storybook/addon-actions";
-
-  import AddOnListItem from "../AddOnListItem.svelte";
-
-  export let args = {};
-
-  const onClick = action("Click");
-</script>
-
-<style>
-  .container {
-    max-width: 32rem;
-    border: 1px solid #eee;
-  }
-</style>
-
-<div class="container">
-  <AddOnListItem {...args} on:click={onClick} />
-</div>
diff --git a/src/addons/browser/stories/AddOnListItem.stories.svelte b/src/addons/browser/stories/AddOnListItem.stories.svelte
index 83dd12775..5f2700708 100644
--- a/src/addons/browser/stories/AddOnListItem.stories.svelte
+++ b/src/addons/browser/stories/AddOnListItem.stories.svelte
@@ -1,8 +1,7 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import AddOnListItem from "../AddOnListItem.svelte";
-  import AddOnListItemDemo from "./AddOnListItem.demo.svelte";
 
   const addon = {
     active: false,
@@ -16,16 +15,25 @@
   };
 
   const args = { addon };
+
+  export const meta = {
+    title: "Add-Ons / Browser / Components / List Item",
+    component: AddOnListItem,
+    parameters: { layout: "centered" },
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Browser / Components / List Item"
-  component={AddOnListItem}
-  parameters={{ layout: "centered" }}
-/>
+<style>
+  .container {
+    max-width: 32rem;
+    border: 1px solid #eee;
+  }
+</style>
 
 <Template let:args>
-  <AddOnListItemDemo {args} />
+  <div class="container">
+    <AddOnListItem {...args} />
+  </div>
 </Template>
 
 <Story name="Default" {args} />
diff --git a/src/addons/browser/stories/Filter.demo.svelte b/src/addons/browser/stories/Filter.demo.svelte
deleted file mode 100644
index 87152cd23..000000000
--- a/src/addons/browser/stories/Filter.demo.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-  import Filter from "../Filter.svelte";
-  import Star from "../../../common/icons/Star.svelte";
-
-  export let args = {};
-</script>
-
-<Filter {...args}>
-  <Star slot="icon" />
-</Filter>
diff --git a/src/addons/browser/stories/Filter.stories.svelte b/src/addons/browser/stories/Filter.stories.svelte
index 761d63654..a3495d976 100644
--- a/src/addons/browser/stories/Filter.stories.svelte
+++ b/src/addons/browser/stories/Filter.stories.svelte
@@ -1,22 +1,24 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Filter from "../Filter.svelte";
-  import FilterDemo from "./Filter.demo.svelte";
+  import Star from "../../../common/icons/Star.svelte";
 
   let args = { selected: false, name: "Pinned" };
-</script>
 
-<Meta
-  title="Add-Ons / Browser / Components / Filter"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Filter}
-  argTypes={{ selected: { control: "boolean" } }}
-/>
+  export const meta = {
+    title: "Add-Ons / Browser / Components / Filter",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: Filter,
+    argTypes: { selected: { control: "boolean" } },
+  };
+</script>
 
 <Template let:args>
-  <FilterDemo {args} />
+  <Filter {...args}>
+    <Star slot="icon" />
+  </Filter>
 </Template>
 
 <Story name="Default" {args} />
diff --git a/src/addons/browser/stories/SearchInput.demo.svelte b/src/addons/browser/stories/SearchInput.demo.svelte
deleted file mode 100644
index 8d7170d8e..000000000
--- a/src/addons/browser/stories/SearchInput.demo.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import SearchInput, { query } from "../SearchInput.svelte";
-</script>
-
-<SearchInput />
-
-<p>Query: {$query}</p>
diff --git a/src/addons/browser/stories/SearchInput.stories.svelte b/src/addons/browser/stories/SearchInput.stories.svelte
index 13214b2ca..bea38ae14 100644
--- a/src/addons/browser/stories/SearchInput.stories.svelte
+++ b/src/addons/browser/stories/SearchInput.stories.svelte
@@ -1,17 +1,20 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import SearchInput from "../SearchInput.svelte";
-  import SearchInputDemo from "./SearchInput.demo.svelte";
+
+  const args = {};
+
+  export const meta = {
+    title: "Add-Ons / Browser / Components / Search",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: SearchInput,
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Browser / Components / Search"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={SearchInput}
-/>
+<Template let:args>
+  <SearchInput {...args} />
+</Template>
 
-<Story name="Search">
-  <SearchInputDemo />
-</Story>
+<Story name="Search" {args} />
diff --git a/src/addons/dispatch/stories/Form.demo.svelte b/src/addons/dispatch/stories/Form.demo.svelte
deleted file mode 100644
index ee4a2c97c..000000000
--- a/src/addons/dispatch/stories/Form.demo.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import Form, { values } from "../Form.svelte";
-
-  export let addon;
-</script>
-
-<h2>{addon.name}</h2>
-
-<Form
-  properties={addon.parameters.properties}
-  required={addon.parameters.required}
-  eventOptions={addon.parameters.eventOptions}
-/>
-
-<div class="values">
-  <h2>Data</h2>
-  <code>
-    {JSON.stringify($values, null, 2)}
-  </code>
-</div>
diff --git a/src/addons/dispatch/stories/Form.stories.svelte b/src/addons/dispatch/stories/Form.stories.svelte
index 5772eb221..b6c6ee3e3 100644
--- a/src/addons/dispatch/stories/Form.stories.svelte
+++ b/src/addons/dispatch/stories/Form.stories.svelte
@@ -1,20 +1,34 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
-  import Form from "../Form.svelte";
-  import FormDemo from "./Form.demo.svelte";
+  import Form, { values } from "../Form.svelte";
 
   import * as addons from "../../fixtures/addons.json";
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form"
-  component={Form}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form",
+    component: Form,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args={addon}>
-  <FormDemo {addon} />
+  <h2>{addon.name}</h2>
+  <Form
+    on:input
+    on:change
+    on:submit
+    on:reset
+    properties={addon.parameters.properties}
+    required={addon.parameters.required}
+    eventOptions={addon.parameters.eventOptions}
+  />
+  <div class="values">
+    <h2>Data</h2>
+    <code>
+      {JSON.stringify($values, null, 2)}
+    </code>
+  </div>
 </Template>
 
 <Story name="PDF Exporter" args={addons[0]} />
diff --git a/src/addons/dispatch/stories/Header.demo.svelte b/src/addons/dispatch/stories/Header.demo.svelte
deleted file mode 100644
index 1feb19ee2..000000000
--- a/src/addons/dispatch/stories/Header.demo.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import Header from "../Header.svelte";
-
-  export let addon;
-</script>
-
-<style>
-  .container {
-    max-width: 32rem;
-    margin: 0 auto;
-  }
-</style>
-
-<div class="container">
-  <Header {addon} />
-</div>
diff --git a/src/addons/dispatch/stories/Header.stories.svelte b/src/addons/dispatch/stories/Header.stories.svelte
index 645324f2b..4b4640dc2 100644
--- a/src/addons/dispatch/stories/Header.stories.svelte
+++ b/src/addons/dispatch/stories/Header.stories.svelte
@@ -1,21 +1,29 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Header from "../Header.svelte";
-  import HeaderDemo from "./Header.demo.svelte";
 
   import * as addons from "../../fixtures/addons.json";
+
+  export const meta = {
+    title: "Add-Ons / Dispatch / Header",
+    component: Header,
+    parameters: { layout: "centered" },
+    argTypes: { categories: { control: "object" } },
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Dispatch / Header"
-  component={Header}
-  parameters={{ layout: "centered" }}
-  argTypes={{ categories: { control: "object" } }}
-/>
+<style>
+  .container {
+    max-width: 32rem;
+    margin: 0 auto;
+  }
+</style>
 
 <Template let:args={addon}>
-  <HeaderDemo {addon} />
+  <div class="container">
+    <Header {addon} />
+  </div>
 </Template>
 
 <Story name="PDF Exporter" args={addons[0]} />
diff --git a/src/addons/sidebar/stories/ListItem.demo.svelte b/src/addons/sidebar/stories/ListItem.demo.svelte
deleted file mode 100644
index 199f6288d..000000000
--- a/src/addons/sidebar/stories/ListItem.demo.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import ListItem from "../ListItem.svelte";
-  import Pin from "../../../common/icons/Pin.svelte";
-
-  export let args = {};
-</script>
-
-<style>
-  .sidebar {
-    width: var(--sidebar-width);
-    background-color: var(--sidebar);
-  }
-  .icon {
-    fill: var(--highlight-orange);
-  }
-</style>
-
-<div class="sidebar">
-  <ListItem {...args}>
-    <span slot="icon" class="icon"><Pin /></span>
-  </ListItem>
-</div>
diff --git a/src/addons/sidebar/stories/ListItem.stories.svelte b/src/addons/sidebar/stories/ListItem.stories.svelte
index 27f3fbe73..87f6cb186 100644
--- a/src/addons/sidebar/stories/ListItem.stories.svelte
+++ b/src/addons/sidebar/stories/ListItem.stories.svelte
@@ -1,22 +1,37 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import ListItem from "../ListItem.svelte";
-  import ListItemDemo from "./ListItem.demo.svelte";
+  import Pin from "../../../common/icons/Pin.svelte";
+
+  let args = {};
+
+  export const meta = {
+    title: "Add-Ons / Sidebar / List Item",
+    parameters: { layout: "centered" },
+    component: ListItem,
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Sidebar / List Item"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={ListItem}
-/>
+<style>
+  .sidebar {
+    width: var(--sidebar-width);
+    background-color: var(--sidebar);
+  }
+  .icon {
+    fill: var(--highlight-orange);
+  }
+</style>
 
 <Template let:args>
-  <ListItemDemo {args} />
+  <div class="sidebar">
+    <ListItem {...args}>
+      <span slot="icon" class="icon"><Pin /></span>
+    </ListItem>
+  </div>
 </Template>
 
 <Story
-  name="ListItem"
+  name="Single"
   args={{
     href: "#addon/duckduckgrayduck/Empty-Page-Deletion",
     label: "Empty Page Deleter",
diff --git a/src/addons/sidebar/stories/Sidebar.demo.svelte b/src/addons/sidebar/stories/Sidebar.demo.svelte
deleted file mode 100644
index 5592587d6..000000000
--- a/src/addons/sidebar/stories/Sidebar.demo.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import Sidebar from "../Sidebar.svelte";
-</script>
-
-<style>
-  .sidebar {
-    padding: 1.5rem 0;
-    width: var(--sidebar-width);
-    background-color: var(--sidebar);
-  }
-</style>
-
-<div class="sidebar">
-  <Sidebar />
-</div>
diff --git a/src/addons/sidebar/stories/Sidebar.stories.svelte b/src/addons/sidebar/stories/Sidebar.stories.svelte
index 11fe663ca..d6daa2490 100644
--- a/src/addons/sidebar/stories/Sidebar.stories.svelte
+++ b/src/addons/sidebar/stories/Sidebar.stories.svelte
@@ -1,11 +1,10 @@
-<script>
+<script lang="ts" context="module">
   import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story } from "@storybook/addon-svelte-csf";
 
   import { baseApiUrl } from "../../../api/base.js";
   import activeAddons from "../../fixtures/addons-active.json";
   import Sidebar from "../Sidebar.svelte";
-  import SidebarDemo from "./Sidebar.demo.svelte";
 
   const mockUrl = new URL(`addons/`, baseApiUrl).toString();
 
@@ -13,15 +12,25 @@
   const data = rest.get(mockUrl, (req, res, ctx) =>
     res(ctx.json(activeAddons)),
   );
+
+  export const meta = {
+    title: "Add-Ons / Sidebar",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: Sidebar,
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Sidebar"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Sidebar}
-/>
+<style>
+  .sidebar {
+    padding: 1.5rem 0;
+    width: var(--sidebar-width);
+    background-color: var(--sidebar);
+  }
+</style>
 
-<Story name="Sidebar" parameters={{ msw: { handlers: [data] } }}>
-  <SidebarDemo />
+<Story name="Default" parameters={{ msw: { handlers: [data] } }}>
+  <div class="sidebar">
+    <Sidebar />
+  </div>
 </Story>
diff --git a/src/addons/stories/Drawer.demo.svelte b/src/addons/stories/Drawer.demo.svelte
deleted file mode 100644
index 2a127dc97..000000000
--- a/src/addons/stories/Drawer.demo.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import Drawer from "../Drawer.svelte";
-
-  export let args = { visible: true, anchor: "right" };
-</script>
-
-<style>
-  .content {
-    padding: 0 1em;
-    min-width: 24em;
-    margin: 0 auto;
-  }
-</style>
-
-<Drawer {...args}>
-  <div slot="content" class="content">
-    <h2>Drawer Contents</h2>
-    <p>Lorem ipsum dolor sit amet</p>
-  </div>
-</Drawer>
diff --git a/src/addons/stories/Drawer.stories.svelte b/src/addons/stories/Drawer.stories.svelte
index 7a806b815..a067dcd80 100644
--- a/src/addons/stories/Drawer.stories.svelte
+++ b/src/addons/stories/Drawer.stories.svelte
@@ -1,21 +1,33 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Drawer from "../Drawer.svelte";
-  import DrawerDemo from "./Drawer.demo.svelte";
 
   let args = { visible: true, anchor: "right" };
+
+  export const meta = {
+    component: Drawer,
+    title: "Add-Ons / Drawer",
+    tags: ["autodocs"],
+    parameters: { layout: "fullscreen" },
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Drawer"
-  tags={["autodocs"]}
-  parameters={{ layout: "fullscreen" }}
-  component={Drawer}
-/>
+<style>
+  .content {
+    padding: 0 1em;
+    min-width: 24em;
+    margin: 0 auto;
+  }
+</style>
 
 <Template let:args>
-  <DrawerDemo {args} />
+  <Drawer {...args}>
+    <div slot="content" class="content">
+      <h2>Drawer Contents</h2>
+      <p>Lorem ipsum dolor sit amet</p>
+    </div>
+  </Drawer>
 </Template>
 
 <Story name="Righthand" {args} />
diff --git a/src/addons/stories/Paginator.demo.svelte b/src/addons/stories/Paginator.demo.svelte
deleted file mode 100644
index c12b16f01..000000000
--- a/src/addons/stories/Paginator.demo.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-  import { action } from "@storybook/addon-actions";
-  import Paginator from "../Paginator.svelte";
-
-  export let args = {
-    has_next: true,
-    has_previous: true,
-  };
-</script>
-
-<style>
-  .container {
-    border: 1px solid gray;
-    padding: 1em;
-    width: 50vw;
-  }
-</style>
-
-<div class="container">
-  <Paginator
-    {...args}
-    on:next={action("Next")}
-    on:previous={action("Previous")}
-  />
-</div>
diff --git a/src/addons/stories/Paginator.stories.svelte b/src/addons/stories/Paginator.stories.svelte
index 95c363c8a..9e0bfba89 100644
--- a/src/addons/stories/Paginator.stories.svelte
+++ b/src/addons/stories/Paginator.stories.svelte
@@ -1,25 +1,40 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
 
   import Paginator from "../Paginator.svelte";
-  import PaginatorDemo from "./Paginator.demo.svelte";
 
   const args = {
     has_next: true,
     has_previous: true,
   };
+
+  export const meta = {
+    component: Paginator,
+    title: "Add-Ons / Paginator",
+    tags: ["autodocs"],
+    parameters: {
+      layout: "centered",
+    },
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Paginator"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Paginator}
-/>
+<style>
+  .container {
+    border: 1px solid gray;
+    padding: 1em;
+    width: 50vw;
+  }
+</style>
 
 <Template let:args>
-  <PaginatorDemo {args} />
+  <div class="container">
+    <Paginator
+      {...args}
+      on:next={action("Next")}
+      on:previous={action("Previous")}
+    />
+  </div>
 </Template>
 
 <Story name="Default" {args} />

From 8909d11d50a46cb65e1f4f04c07c5077fcee928e Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 5 Dec 2023 13:34:05 -0500
Subject: [PATCH 2/4] Consolidates data handling functions

---
 .../runs/stories/History.stories.svelte       | 66 ++++++++----------
 src/addons/runs/stories/Runs.stories.svelte   | 30 ++++----
 .../runs/stories/Scheduled.stories.svelte     | 68 ++++++++-----------
 src/addons/runs/stories/mockData.ts           | 38 +++++++++++
 4 files changed, 110 insertions(+), 92 deletions(-)
 create mode 100644 src/addons/runs/stories/mockData.ts

diff --git a/src/addons/runs/stories/History.stories.svelte b/src/addons/runs/stories/History.stories.svelte
index 113453e1d..b872da25f 100644
--- a/src/addons/runs/stories/History.stories.svelte
+++ b/src/addons/runs/stories/History.stories.svelte
@@ -1,46 +1,38 @@
-<script context="module">
-  import { rest } from "msw";
-  import runListFixture from "../../fixtures/run-list.json";
-  import { baseApiUrl } from "../../../api/base";
-
-  const mockUrl = new URL(`/api/addon_runs/*`, baseApiUrl).toString();
-  /* Mock Request Handlers */
-  const data = rest.get(mockUrl, (req, res, ctx) =>
-    res(ctx.json(runListFixture)),
-  );
-  const loading = rest.get(mockUrl, (req, res, ctx) =>
-    res(ctx.delay("infinite")),
-  );
-  const error = rest.get(mockUrl, (req, res, ctx) =>
-    res(
-      ctx.status(400, "Ambiguous Error"),
-      ctx.json("Something went horribly wrong."),
-    ),
-  );
-  const empty = rest.get(mockUrl, (req, res, ctx) =>
-    res(ctx.json({ next: null, previous: null, results: [] })),
-  );
-  export const handlers = { data, loading, error, empty };
-</script>
-
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import History from "../History.svelte";
+  import { history } from "./mockData";
 
   const args = {};
-</script>
 
-<Meta
-  title="Add-Ons / Runs / History"
-  component={History}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Runs / History",
+    component: History,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <History {...args} />
 </Template>
 
-<Story name="Success" {args} parameters={{ msw: { handlers: [data] } }} />
-<Story name="Loading" {args} parameters={{ msw: { handlers: [loading] } }} />
-<Story name="Error" {args} parameters={{ msw: { handlers: [error] } }} />
-<Story name="Empty" {args} parameters={{ msw: { handlers: [empty] } }} />
+<Story
+  name="Success"
+  {args}
+  parameters={{ msw: { handlers: [history.data] } }}
+/>
+<Story
+  name="Loading"
+  {args}
+  parameters={{ msw: { handlers: [history.loading] } }}
+/>
+<Story
+  name="Error"
+  {args}
+  parameters={{ msw: { handlers: [history.error] } }}
+/>
+<Story
+  name="Empty"
+  {args}
+  parameters={{ msw: { handlers: [history.empty] } }}
+/>
diff --git a/src/addons/runs/stories/Runs.stories.svelte b/src/addons/runs/stories/Runs.stories.svelte
index 5db6df21f..c2470e4b3 100644
--- a/src/addons/runs/stories/Runs.stories.svelte
+++ b/src/addons/runs/stories/Runs.stories.svelte
@@ -1,19 +1,17 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { history, scheduled } from "./mockData";
   import Runs from "../Runs.svelte";
 
-  import { handlers as historyHandlers } from "./History.stories.svelte";
-  import { handlers as scheduledHandlers } from "./Scheduled.stories.svelte";
-
   const args = { visible: true };
-</script>
 
-<Meta
-  title="Add-Ons / Runs"
-  tags={["autodocs"]}
-  parameters={{ layout: "fullscreen" }}
-  component={Runs}
-/>
+  export const meta = {
+    title: "Add-Ons / Runs",
+    tags: ["autodocs"],
+    parameters: { layout: "fullscreen" },
+    component: Runs,
+  };
+</script>
 
 <Template let:args>
   <Runs {...args} />
@@ -23,27 +21,27 @@
   name="Success"
   {args}
   parameters={{
-    msw: { handlers: [historyHandlers.data, scheduledHandlers.data] },
+    msw: { handlers: [history.data, scheduled.data] },
   }}
 />
 <Story
   name="Loading"
   {args}
   parameters={{
-    msw: { handlers: [historyHandlers.loading, scheduledHandlers.loading] },
+    msw: { handlers: [history.loading, scheduled.loading] },
   }}
 />
 <Story
   name="Error"
   {args}
   parameters={{
-    msw: { handlers: [historyHandlers.error, scheduledHandlers.error] },
+    msw: { handlers: [history.error, scheduled.error] },
   }}
 />
 <Story
   name="Empty"
   {args}
   parameters={{
-    msw: { handlers: [historyHandlers.empty, scheduledHandlers.empty] },
+    msw: { handlers: [history.empty, scheduled.empty] },
   }}
 />
diff --git a/src/addons/runs/stories/Scheduled.stories.svelte b/src/addons/runs/stories/Scheduled.stories.svelte
index 09c63e17e..890e623d1 100644
--- a/src/addons/runs/stories/Scheduled.stories.svelte
+++ b/src/addons/runs/stories/Scheduled.stories.svelte
@@ -1,49 +1,39 @@
-<script context="module">
-  import { rest } from "msw";
-  import eventsListFixture from "../../fixtures/event-list.json";
-  import { baseApiUrl } from "../../../api/base";
-
-  const mockUrl = new URL(`/api/addon_events/*`, baseApiUrl).toString();
-  /* Mock Request Handlers */
-  const data = rest.get(mockUrl, (req, res, ctx) =>
-    res(ctx.json(eventsListFixture)),
-  );
-  const loading = rest.get(mockUrl, (req, res, ctx) =>
-    res(ctx.delay("infinite")),
-  );
-  const error = rest.get(mockUrl, (req, res, ctx) =>
-    res(
-      ctx.status(400, "Ambiguous Error"),
-      ctx.json("Something went horribly wrong."),
-    ),
-  );
-  const empty = rest.get(mockUrl, (req, res, ctx) =>
-    res(ctx.json({ next: null, previous: null, results: [] })),
-  );
-  export const handlers = { data, loading, error, empty };
-</script>
-
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Scheduled from "../Scheduled.svelte";
+  import { scheduled } from "./mockData";
 
   const args = {};
-</script>
-
-<style></style>
 
-<Meta
-  title="Add-Ons / Runs / Scheduled"
-  component={Scheduled}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Runs / Scheduled",
+    component: Scheduled,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Scheduled {...args} />
 </Template>
 
-<Story name="Success" {args} parameters={{ msw: { handlers: [data] } }} />
-<Story name="Loading" {args} parameters={{ msw: { handlers: [loading] } }} />
-<Story name="Error" {args} parameters={{ msw: { handlers: [error] } }} />
-<Story name="Empty" {args} parameters={{ msw: { handlers: [empty] } }} />
+<Story
+  name="Success"
+  {args}
+  parameters={{ msw: { handlers: [scheduled.data] } }}
+/>
+<Story
+  name="Loading"
+  {args}
+  parameters={{ msw: { handlers: [scheduled.loading] } }}
+/>
+<Story
+  name="Error"
+  {args}
+  parameters={{ msw: { handlers: [scheduled.error] } }}
+/>
+<Story
+  name="Empty"
+  {args}
+  parameters={{ msw: { handlers: [scheduled.empty] } }}
+/>
diff --git a/src/addons/runs/stories/mockData.ts b/src/addons/runs/stories/mockData.ts
new file mode 100644
index 000000000..f32f49aa5
--- /dev/null
+++ b/src/addons/runs/stories/mockData.ts
@@ -0,0 +1,38 @@
+import { rest } from "msw";
+import { baseApiUrl } from "../../../api/base";
+import runListFixture from "../../fixtures/run-list.json";
+import eventsListFixture from "../../fixtures/event-list.json";
+
+const mockRunsUrl = new URL(`/api/addon_runs/*`, baseApiUrl).toString();
+export const history = {
+  data: rest.get(mockRunsUrl, (req, res, ctx) => res(ctx.json(runListFixture))),
+  loading: rest.get(mockRunsUrl, (req, res, ctx) => res(ctx.delay("infinite"))),
+  error: rest.get(mockRunsUrl, (req, res, ctx) =>
+    res(
+      ctx.status(400, "Ambiguous Error"),
+      ctx.json("Something went horribly wrong."),
+    ),
+  ),
+  empty: rest.get(mockRunsUrl, (req, res, ctx) =>
+    res(ctx.json({ next: null, previous: null, results: [] })),
+  ),
+};
+
+const mockEventsUrl = new URL(`/api/addon_events/*`, baseApiUrl).toString();
+export const scheduled = {
+  data: rest.get(mockEventsUrl, (req, res, ctx) =>
+    res(ctx.json(eventsListFixture)),
+  ),
+  loading: rest.get(mockEventsUrl, (req, res, ctx) =>
+    res(ctx.delay("infinite")),
+  ),
+  error: rest.get(mockEventsUrl, (req, res, ctx) =>
+    res(
+      ctx.status(400, "Ambiguous Error"),
+      ctx.json("Something went horribly wrong."),
+    ),
+  ),
+  empty: rest.get(mockEventsUrl, (req, res, ctx) =>
+    res(ctx.json({ next: null, previous: null, results: [] })),
+  ),
+};

From cb8117476b714dc5f79d9acfe80476e733672b9e Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 5 Dec 2023 15:33:46 -0500
Subject: [PATCH 3/4] Replace deprecated <Meta /> with object export

---
 .../browser/stories/AddOnList.stories.svelte  |  16 +--
 .../browser/stories/Browser.stories.svelte    |  53 ++++-----
 .../browser/stories/Filters.stories.svelte    |  18 +--
 src/addons/browser/stories/mockData.ts        |  21 ++++
 .../fields/stories/ArrayField.stories.svelte  |  16 +--
 .../fields/stories/Checkbox.stories.svelte    |  18 +--
 .../fields/stories/Number.stories.svelte      |  16 +--
 .../fields/stories/Text.stories.svelte        |  16 +--
 .../dispatch/stories/Dispatch.stories.svelte  |  18 +--
 .../dispatch/stories/Premium.stories.svelte   |  18 +--
 .../stories/ScheduledInset.stories.svelte     |  16 +--
 .../progress/stories/AddonRun.stories.svelte  |  22 ++--
 .../stories/AddonStatus.stories.svelte        |  25 ++--
 src/addons/progress/stories/mockData.ts       |  17 +++
 .../runs/stories/HistoryEvent.stories.svelte  |  16 ++-
 .../stories/ScheduledEvent.stories.svelte     |  16 ++-
 src/addons/stories/Popularity.stories.svelte  |  18 +--
 src/common/stories/Badge.stories.svelte       |  20 ++--
 src/common/stories/Dropdown.stories.svelte    |  18 +--
 src/common/stories/Pin.stories.svelte         |  20 ++--
 .../stories/AccountNavigation.stories.svelte  |  46 ++-----
 .../accounts/stories/HelpMenu.stories.svelte  |  16 +--
 .../stories/LanguageMenu.stories.svelte       |  16 +--
 .../stories/OrgMemberList.stories.svelte      |  39 ++----
 .../accounts/stories/OrgMenu.stories.svelte   |  92 ++------------
 .../stories/PremiumMenu.stories.svelte        |  16 +--
 .../accounts/stories/UserMenu.stories.svelte  |  16 +--
 src/pages/app/accounts/stories/mockData.ts    | 112 ++++++++++++++++++
 .../viewer/stories/Footer.stories.svelte      |  11 +-
 .../viewer/stories/Header.stories.svelte      |  11 +-
 .../viewer/stories/Sidebar.stories.svelte     |  11 +-
 .../stories/SidebarAction.stories.svelte      |  11 +-
 .../stories/CreditMeter.stories.svelte        |  18 +--
 .../stories/Price.stories.svelte              |  19 +--
 .../stories/UpgradePrompt.stories.svelte      |  18 +--
 35 files changed, 433 insertions(+), 417 deletions(-)
 create mode 100644 src/addons/browser/stories/mockData.ts
 create mode 100644 src/addons/progress/stories/mockData.ts
 create mode 100644 src/pages/app/accounts/stories/mockData.ts

diff --git a/src/addons/browser/stories/AddOnList.stories.svelte b/src/addons/browser/stories/AddOnList.stories.svelte
index debb8b9e5..4317e2354 100644
--- a/src/addons/browser/stories/AddOnList.stories.svelte
+++ b/src/addons/browser/stories/AddOnList.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import defaultAddons from "../../fixtures/addons.json";
   import AddOnList from "../AddOnList.svelte";
@@ -9,13 +9,13 @@
     loading: false,
     error: null,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Browser / Components / List"
-  component={AddOnList}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Browser / Components / List",
+    component: AddOnList,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <AddOnList {...args} />
diff --git a/src/addons/browser/stories/Browser.stories.svelte b/src/addons/browser/stories/Browser.stories.svelte
index 8bd2eeb0f..1b2f368fd 100644
--- a/src/addons/browser/stories/Browser.stories.svelte
+++ b/src/addons/browser/stories/Browser.stories.svelte
@@ -1,41 +1,32 @@
-<script>
-  import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Browser from "../Browser.svelte";
-  import listFixture from "../../fixtures/addon-list.json";
-  import { baseApiUrl } from "../../../api/base.js";
 
   const args = { visible: true };
-  const mockUrl = new URL(`addons/`, baseApiUrl).toString();
-  /* Mock Request Handlers */
-  const data = rest.get(mockUrl, (req, res, ctx) => res(ctx.json(listFixture)));
-  const loading = rest.get(mockUrl, (req, res, ctx) =>
-    res(ctx.delay("infinite")),
-  );
-  const error = rest.get(mockUrl, (req, res, ctx) =>
-    res(
-      ctx.status(400, "Ambiguous Error"),
-      ctx.json("Something went horribly wrong."),
-    ),
-  );
-  const empty = rest.get(mockUrl, (req, res, ctx) =>
-    res(ctx.json({ next: null, previous: null, results: [] })),
-  );
-</script>
+  import { addons } from "./mockData";
 
-<Meta
-  title="Add-Ons / Browser"
-  tags={["autodocs"]}
-  parameters={{ layout: "fullscreen" }}
-  component={Browser}
-/>
+  export const meta = {
+    title: "Add-Ons / Browser",
+    tags: ["autodocs"],
+    parameters: { layout: "fullscreen" },
+    component: Browser,
+  };
+</script>
 
 <Template let:args>
   <Browser {...args} />
 </Template>
 
-<Story name="Success" {args} parameters={{ msw: { handlers: [data] } }} />
-<Story name="Loading" {args} parameters={{ msw: { handlers: [loading] } }} />
-<Story name="Error" {args} parameters={{ msw: { handlers: [error] } }} />
-<Story name="Empty" {args} parameters={{ msw: { handlers: [empty] } }} />
+<Story
+  name="Success"
+  {args}
+  parameters={{ msw: { handlers: [addons.data] } }}
+/>
+<Story
+  name="Loading"
+  {args}
+  parameters={{ msw: { handlers: [addons.loading] } }}
+/>
+<Story name="Error" {args} parameters={{ msw: { handlers: [addons.error] } }} />
+<Story name="Empty" {args} parameters={{ msw: { handlers: [addons.empty] } }} />
diff --git a/src/addons/browser/stories/Filters.stories.svelte b/src/addons/browser/stories/Filters.stories.svelte
index c9cde265f..89843d8db 100644
--- a/src/addons/browser/stories/Filters.stories.svelte
+++ b/src/addons/browser/stories/Filters.stories.svelte
@@ -1,17 +1,17 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Filters from "../Filters.svelte";
 
   const args = {};
-</script>
 
-<Meta
-  title="Add-Ons / Browser / Components / Filters"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Filters}
-/>
+  export const meta = {
+    title: "Add-Ons / Browser / Components / Filters",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: Filters,
+  };
+</script>
 
 <Template let:args>
   <Filters {...args} />
diff --git a/src/addons/browser/stories/mockData.ts b/src/addons/browser/stories/mockData.ts
new file mode 100644
index 000000000..b0991d3b5
--- /dev/null
+++ b/src/addons/browser/stories/mockData.ts
@@ -0,0 +1,21 @@
+import { rest } from "msw";
+import listFixture from "../../fixtures/addon-list.json";
+import { baseApiUrl } from "../../../api/base.js";
+
+const mockAddonUrl = new URL(`addons/`, baseApiUrl).toString();
+/* Mock Request Handlers */
+export const addons = {
+  data: rest.get(mockAddonUrl, (req, res, ctx) => res(ctx.json(listFixture))),
+  loading: rest.get(mockAddonUrl, (req, res, ctx) =>
+    res(ctx.delay("infinite")),
+  ),
+  error: rest.get(mockAddonUrl, (req, res, ctx) =>
+    res(
+      ctx.status(400, "Ambiguous Error"),
+      ctx.json("Something went horribly wrong."),
+    ),
+  ),
+  empty: rest.get(mockAddonUrl, (req, res, ctx) =>
+    res(ctx.json({ next: null, previous: null, results: [] })),
+  ),
+};
diff --git a/src/addons/dispatch/fields/stories/ArrayField.stories.svelte b/src/addons/dispatch/fields/stories/ArrayField.stories.svelte
index 90f456cdf..81ed19439 100644
--- a/src/addons/dispatch/fields/stories/ArrayField.stories.svelte
+++ b/src/addons/dispatch/fields/stories/ArrayField.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import ArrayField from "../ArrayField.svelte";
 
@@ -8,13 +8,13 @@
     title: "Array Field",
     description: "An array of items",
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form / Fields / Array Field"
-  component={ArrayField}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form / Fields / Array Field",
+    component: ArrayField,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <ArrayField {...args} />
diff --git a/src/addons/dispatch/fields/stories/Checkbox.stories.svelte b/src/addons/dispatch/fields/stories/Checkbox.stories.svelte
index fff18e57f..8f36492d0 100644
--- a/src/addons/dispatch/fields/stories/Checkbox.stories.svelte
+++ b/src/addons/dispatch/fields/stories/Checkbox.stories.svelte
@@ -1,22 +1,22 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Checkbox from "../Checkbox.svelte";
 
   let args = {
     name: "checkbox",
     title: "Checkbox",
-    description: "An array of items",
+    description: "Check to confirm",
     required: false,
     value: true,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form / Fields / Checkbox"
-  component={Checkbox}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form / Fields / Checkbox",
+    component: Checkbox,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Checkbox {...args} />
diff --git a/src/addons/dispatch/fields/stories/Number.stories.svelte b/src/addons/dispatch/fields/stories/Number.stories.svelte
index a894a9246..458dc2a29 100644
--- a/src/addons/dispatch/fields/stories/Number.stories.svelte
+++ b/src/addons/dispatch/fields/stories/Number.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Number from "../Number.svelte";
 
@@ -13,13 +13,13 @@
     min: "0",
     max: "2",
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form / Fields / Number"
-  component={Number}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form / Fields / Number",
+    component: Number,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Number {...args} />
diff --git a/src/addons/dispatch/fields/stories/Text.stories.svelte b/src/addons/dispatch/fields/stories/Text.stories.svelte
index 58c64ec3e..5ea1a3520 100644
--- a/src/addons/dispatch/fields/stories/Text.stories.svelte
+++ b/src/addons/dispatch/fields/stories/Text.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Text from "../Text.svelte";
 
@@ -10,13 +10,13 @@
     required: false,
     value: "Lorem ipsum dolor sit amet",
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form / Fields / Text"
-  component={Number}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form / Fields / Text",
+    component: Number,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Text {...args} />
diff --git a/src/addons/dispatch/stories/Dispatch.stories.svelte b/src/addons/dispatch/stories/Dispatch.stories.svelte
index a5b8f202b..1c96af231 100644
--- a/src/addons/dispatch/stories/Dispatch.stories.svelte
+++ b/src/addons/dispatch/stories/Dispatch.stories.svelte
@@ -1,9 +1,9 @@
-<script>
+<script lang="ts" context="module">
   import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Dispatch from "../Dispatch.svelte";
-  import * as addons from "../../fixtures/addons.json";
+  import addons from "../../fixtures/addons.json";
   import * as eventFixture from "../../fixtures/event.json";
   import { baseApiUrl } from "../../../api/base";
 
@@ -48,13 +48,13 @@
     addon: null,
     event: null,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch"
-  component={Dispatch}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch",
+    component: Dispatch,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Dispatch {...args} />
diff --git a/src/addons/dispatch/stories/Premium.stories.svelte b/src/addons/dispatch/stories/Premium.stories.svelte
index 2e3c9a06b..f8438b43e 100644
--- a/src/addons/dispatch/stories/Premium.stories.svelte
+++ b/src/addons/dispatch/stories/Premium.stories.svelte
@@ -1,9 +1,9 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Premium from "../Premium.svelte";
 
-  import * as addons from "../../fixtures/addons.json";
+  import addons from "../../fixtures/addons.json";
 
   const individualOrg = {
     id: 4,
@@ -44,13 +44,13 @@
     username: "lasser.allan",
     verified_journalist: true,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Premium"
-  component={Premium}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Premium",
+    component: Premium,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Premium {...args} />
diff --git a/src/addons/dispatch/stories/ScheduledInset.stories.svelte b/src/addons/dispatch/stories/ScheduledInset.stories.svelte
index df5210050..0763a5caa 100644
--- a/src/addons/dispatch/stories/ScheduledInset.stories.svelte
+++ b/src/addons/dispatch/stories/ScheduledInset.stories.svelte
@@ -1,16 +1,16 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import ScheduledInset from "../ScheduledInset.svelte";
   import addon from "../../fixtures/addon.json";
   import klaxon from "../../fixtures/klaxon-scheduled.json";
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Scheduled Inset"
-  component={ScheduledInset}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Scheduled Inset",
+    component: ScheduledInset,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <ScheduledInset addon={args.addon} events={args.events} open />
diff --git a/src/addons/progress/stories/AddonRun.stories.svelte b/src/addons/progress/stories/AddonRun.stories.svelte
index 76841576d..1ba4f569d 100644
--- a/src/addons/progress/stories/AddonRun.stories.svelte
+++ b/src/addons/progress/stories/AddonRun.stories.svelte
@@ -1,25 +1,17 @@
-<script>
-  import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import run from "../../fixtures/run.json";
-  import { baseApiUrl } from "../../../api/base";
   import AddonRun from "../AddonRun.svelte";
+  import { handlers } from "./mockData";
 
   const args = { run, compact: false };
 
-  const mockUpdateUrl = new URL("/api/addon_runs/:run/", baseApiUrl).toString();
-  const handlers = [
-    rest.patch(mockUpdateUrl, async (req, res, ctx) => {
-      const body = await req.json();
-      console.log(JSON.stringify(body));
-      return res(ctx.json({ ...run, ...body }));
-    }),
-    rest.delete(mockUpdateUrl, (req, res, ctx) => res(ctx.json({}))),
-  ];
+  export const meta = {
+    title: "Add-Ons / Progress / Run",
+    component: AddonRun,
+  };
 </script>
 
-<Meta title="Add-Ons / Progress / Run" component={AddonRun} />
-
 <Template let:args>
   <AddonRun {...args} />
 </Template>
diff --git a/src/addons/progress/stories/AddonStatus.stories.svelte b/src/addons/progress/stories/AddonStatus.stories.svelte
index 799038d63..9a00e367f 100644
--- a/src/addons/progress/stories/AddonStatus.stories.svelte
+++ b/src/addons/progress/stories/AddonStatus.stories.svelte
@@ -1,27 +1,16 @@
-<script>
-  import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
-  import runList from "../../fixtures/run-list.json";
-  import { baseApiUrl } from "../../../api/base";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import AddonStatus from "../AddonStatus.svelte";
+  import { handlers } from "./mockData";
 
   const args = {};
 
-  const mockListUrl = new URL("/api/addon_runs/", baseApiUrl).toString();
-  const mockUpdateUrl = new URL("/api/addon_runs/:run", baseApiUrl).toString();
-  const handlers = [
-    rest.get(mockListUrl, (req, res, ctx) => res(ctx.json(runList))),
-    rest.patch(mockUpdateUrl, async (req, res, ctx) => {
-      const body = await req.json();
-      console.log(JSON.stringify(body));
-      return res(ctx.json({ ...run, ...body }));
-    }),
-    rest.delete(mockUpdateUrl, (req, res, ctx) => res(ctx.json({}))),
-  ];
+  export const meta = {
+    title: "Add-Ons / Progress / Status",
+    component: AddonStatus,
+  };
 </script>
 
-<Meta title="Add-Ons / Progress / Status" component={AddonStatus} />
-
 <Template let:args>
   <AddonStatus {...args} />
 </Template>
diff --git a/src/addons/progress/stories/mockData.ts b/src/addons/progress/stories/mockData.ts
new file mode 100644
index 000000000..9ca9622fd
--- /dev/null
+++ b/src/addons/progress/stories/mockData.ts
@@ -0,0 +1,17 @@
+import { rest } from "msw";
+import { baseApiUrl } from "../../../api/base";
+import run from "../../fixtures/run.json";
+import runList from "../../fixtures/run-list.json";
+
+const mockListUrl = new URL("/api/addon_runs/", baseApiUrl).toString();
+const mockUpdateUrl = new URL("/api/addon_runs/:run", baseApiUrl).toString();
+
+export const handlers = [
+  rest.get(mockListUrl, (req, res, ctx) => res(ctx.json(runList))),
+  rest.patch(mockUpdateUrl, async (req, res, ctx) => {
+    const body = await req.json();
+    console.log(JSON.stringify(body));
+    return res(ctx.json({ ...run, ...body }));
+  }),
+  rest.delete(mockUpdateUrl, (req, res, ctx) => res(ctx.json({}))),
+];
diff --git a/src/addons/runs/stories/HistoryEvent.stories.svelte b/src/addons/runs/stories/HistoryEvent.stories.svelte
index 89d780887..b4179dcab 100644
--- a/src/addons/runs/stories/HistoryEvent.stories.svelte
+++ b/src/addons/runs/stories/HistoryEvent.stories.svelte
@@ -1,17 +1,15 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import run from "../../fixtures/run.json";
   import Event from "../HistoryEvent.svelte";
 
-  const args = { run };
+  export const meta = {
+    title: "Add-Ons / Runs / History / Event",
+    component: Event,
+    parameters: { layout: "centered" },
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Runs / History / Event"
-  component={Event}
-  parameters={{ layout: "centered" }}
-/>
-
 <Template let:args>
   <Event {...args} />
 </Template>
diff --git a/src/addons/runs/stories/ScheduledEvent.stories.svelte b/src/addons/runs/stories/ScheduledEvent.stories.svelte
index 23fa4c326..c96502f0f 100644
--- a/src/addons/runs/stories/ScheduledEvent.stories.svelte
+++ b/src/addons/runs/stories/ScheduledEvent.stories.svelte
@@ -1,17 +1,15 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import event from "../../fixtures/event.json";
   import Event from "../ScheduledEvent.svelte";
 
-  const args = { event };
+  export const meta = {
+    title: "Add-Ons / Runs / Scheduled / Event",
+    component: Event,
+    parameters: { layout: "centered" },
+  };
 </script>
 
-<Meta
-  title="Add-Ons / Runs / Scheduled / Event"
-  component={Event}
-  parameters={{ layout: "centered" }}
-/>
-
 <Template let:args>
   <Event {...args} />
 </Template>
diff --git a/src/addons/stories/Popularity.stories.svelte b/src/addons/stories/Popularity.stories.svelte
index af7c5ee2f..3aaea8fbc 100644
--- a/src/addons/stories/Popularity.stories.svelte
+++ b/src/addons/stories/Popularity.stories.svelte
@@ -1,18 +1,18 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import Popularity from "../Popularity.svelte";
 
   const args = {
     useCount: 100,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Popularity"
-  tags={["autodocs"]}
-  component={Popularity}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Popularity",
+    tags: ["autodocs"],
+    component: Popularity,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Popularity {...args} />
diff --git a/src/common/stories/Badge.stories.svelte b/src/common/stories/Badge.stories.svelte
index 19c55e58c..5486fb1f9 100644
--- a/src/common/stories/Badge.stories.svelte
+++ b/src/common/stories/Badge.stories.svelte
@@ -1,17 +1,17 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Badge from "../Badge.svelte";
   import BadgeDemo from "./Badge.demo.svelte";
-</script>
 
-<Meta
-  title="Common / Badge"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Badge}
-  argTypes={{ selected: { control: "boolean" } }}
-/>
+  export const meta = {
+    title: "Common / Badge",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: Badge,
+    argTypes: { selected: { control: "boolean" } },
+  };
+</script>
 
 <Template let:args>
   <BadgeDemo {...args} />
diff --git a/src/common/stories/Dropdown.stories.svelte b/src/common/stories/Dropdown.stories.svelte
index 874384486..1dfd0f273 100644
--- a/src/common/stories/Dropdown.stories.svelte
+++ b/src/common/stories/Dropdown.stories.svelte
@@ -1,17 +1,17 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Dropdown from "./Dropdown.demo.svelte";
 
   const args = {};
-</script>
 
-<Meta
-  title="Common / Dropdown"
-  tags={["autodocs"]}
-  component={Dropdown}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Common / Dropdown",
+    tags: ["autodocs"],
+    component: Dropdown,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Dropdown {...args} />
diff --git a/src/common/stories/Pin.stories.svelte b/src/common/stories/Pin.stories.svelte
index 5898168f0..ff7c88c1e 100644
--- a/src/common/stories/Pin.stories.svelte
+++ b/src/common/stories/Pin.stories.svelte
@@ -1,8 +1,8 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
 
-  import Pin from "@/common/Pin.svelte";
+  import Pin from "../../common/Pin.svelte";
 
   const args = {
     active: false,
@@ -10,14 +10,14 @@
   };
 
   const onClick = action("Click");
-</script>
 
-<Meta
-  title="Common / Pin"
-  tags={["autodocs"]}
-  component={Pin}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Common / Pin",
+    tags: ["autodocs"],
+    component: Pin,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Pin {...args} on:click={onClick} />
diff --git a/src/pages/app/accounts/stories/AccountNavigation.stories.svelte b/src/pages/app/accounts/stories/AccountNavigation.stories.svelte
index 952ed6fe3..e6d191937 100644
--- a/src/pages/app/accounts/stories/AccountNavigation.stories.svelte
+++ b/src/pages/app/accounts/stories/AccountNavigation.stories.svelte
@@ -1,47 +1,21 @@
 <script context="module" lang="ts">
-  import { rest } from "msw";
-  import { baseApiUrl } from "../../../../api/base.js";
-  import { mockInMyOrg } from "./OrgMemberList.stories.svelte";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import {
+    mockGetMe,
+    mockInMyOrg,
     mockGetOrgsList,
     mockChangeOrg,
     mockGetOrg,
-  } from "./OrgMenu.stories.svelte";
-  import getMeFixture from "../fixtures/getMe.json";
-
-  /* Mock Request Handlers */
-  const mockUrl = new URL(`users/me/`, baseApiUrl).toString();
-  export const mockGetMe = {
-    data: rest.get(mockUrl, (req, res, ctx) => res(ctx.json(getMeFixture))),
-    noOrgs: rest.get(mockUrl, (req, res, ctx) =>
-      res(ctx.json({ ...getMeFixture, organization: "4" })),
-    ),
-    orgAdmin: rest.get(mockUrl, (req, res, ctx) =>
-      res(
-        ctx.json({
-          ...getMeFixture,
-          admin_organizations: [...getMeFixture.admin_organizations, 1],
-        }),
-      ),
-    ),
-    loading: rest.get(mockUrl, (req, res, ctx) => res(ctx.delay("infinite"))),
-    error: rest.get(mockUrl, (req, res, ctx) =>
-      res(ctx.status(404, "Not Found"), ctx.json({ detail: "Not found." })),
-    ),
-  };
-</script>
-
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  } from "./mockData";
 
   import AccountNavigation from "../AccountNavigation.svelte";
-</script>
 
-<Meta
-  title="Account Navigation"
-  component={AccountNavigation}
-  parameters={{ layout: "fullscreen" }}
-/>
+  export const meta = {
+    title: "Account Navigation",
+    component: AccountNavigation,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
 
 <Template let:args>
   <AccountNavigation {...args} />
diff --git a/src/pages/app/accounts/stories/HelpMenu.stories.svelte b/src/pages/app/accounts/stories/HelpMenu.stories.svelte
index a5c365886..725e0c5d3 100644
--- a/src/pages/app/accounts/stories/HelpMenu.stories.svelte
+++ b/src/pages/app/accounts/stories/HelpMenu.stories.svelte
@@ -1,14 +1,14 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import HelpMenu from "../HelpMenu.svelte";
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Help"
-  component={HelpMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Help",
+    component: HelpMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <HelpMenu {...args} />
diff --git a/src/pages/app/accounts/stories/LanguageMenu.stories.svelte b/src/pages/app/accounts/stories/LanguageMenu.stories.svelte
index f6c45bf28..c5c53ca98 100644
--- a/src/pages/app/accounts/stories/LanguageMenu.stories.svelte
+++ b/src/pages/app/accounts/stories/LanguageMenu.stories.svelte
@@ -1,14 +1,14 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import LanguageMenu from "../LanguageMenu.svelte";
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Language"
-  component={LanguageMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Language",
+    component: LanguageMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <LanguageMenu {...args} />
diff --git a/src/pages/app/accounts/stories/OrgMemberList.stories.svelte b/src/pages/app/accounts/stories/OrgMemberList.stories.svelte
index faa081a90..de855b92d 100644
--- a/src/pages/app/accounts/stories/OrgMemberList.stories.svelte
+++ b/src/pages/app/accounts/stories/OrgMemberList.stories.svelte
@@ -1,40 +1,17 @@
 <script context="module" lang="ts">
-  import { rest } from "msw";
-  import { baseApiUrl } from "../../../../api/base.js";
-  import orgMembersFixture from "../fixtures/orgMembers.json";
-
-  /* Mock Request Handlers */
-  const mockUrl = new URL(`users/`, baseApiUrl).toString();
-  export const mockInMyOrg = {
-    data: rest.get(mockUrl, (req, res, ctx) =>
-      res(ctx.json(orgMembersFixture)),
-    ),
-    loading: rest.get(mockUrl, (req, res, ctx) => res(ctx.delay("infinite"))),
-    error: rest.get(mockUrl, (req, res, ctx) =>
-      res(
-        ctx.status(400, "Ambiguous Error"),
-        ctx.json("Something went horribly wrong."),
-      ),
-    ),
-    empty: rest.get(mockUrl, (req, res, ctx) =>
-      res(ctx.json({ next: null, previous: null, results: [] })),
-    ),
-  };
-</script>
-
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import OrgMemberList from "../OrgMemberList.svelte";
+  import { mockInMyOrg } from "./mockData";
 
   const args = { orgId: 1, myId: 4 };
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Org / Member List"
-  component={OrgMemberList}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Org / Member List",
+    component: OrgMemberList,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <OrgMemberList {...args} />
diff --git a/src/pages/app/accounts/stories/OrgMenu.stories.svelte b/src/pages/app/accounts/stories/OrgMenu.stories.svelte
index 4815e2270..e45bad87f 100644
--- a/src/pages/app/accounts/stories/OrgMenu.stories.svelte
+++ b/src/pages/app/accounts/stories/OrgMenu.stories.svelte
@@ -1,93 +1,27 @@
 <script context="module" lang="ts">
-  import { rest } from "msw";
-  import { baseApiUrl } from "../../../../api/base.js";
-  import { mockInMyOrg } from "./OrgMemberList.stories.svelte";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import orgListFixture from "../fixtures/orgList.json";
   import getMeFixture from "../fixtures/getMe.json";
 
-  /* Mock Request Handlers */
-  const mockGetOrgsUrl = new URL(`organizations/`, baseApiUrl).toString();
-  export const mockGetOrgsList = {
-    data: rest.get(mockGetOrgsUrl, (req, res, ctx) =>
-      res(ctx.json(orgListFixture)),
-    ),
-    loading: rest.get(mockGetOrgsUrl, (req, res, ctx) =>
-      res(ctx.delay("infinite")),
-    ),
-    error: rest.get(mockGetOrgsUrl, (req, res, ctx) =>
-      res(
-        ctx.status(400, "Ambiguous Error"),
-        ctx.json("Something went horribly wrong."),
-      ),
-    ),
-    empty: rest.get(mockGetOrgsUrl, (req, res, ctx) =>
-      res(
-        ctx.json({
-          next: null,
-          previous: null,
-          results: [orgListFixture.results[1]],
-        }),
-      ),
-    ),
-  };
-
-  const mockGetOrgUrl = new URL(`organizations/:id/*`, baseApiUrl).toString();
-  export const mockGetOrg = {
-    data: rest.get(mockGetOrgUrl, (req, res, ctx) =>
-      res(
-        ctx.json(
-          orgListFixture.results.find(
-            ({ id }) => id.toString() === req.params.id,
-          ),
-        ),
-      ),
-    ),
-    loading: rest.get(mockGetOrgUrl, (req, res, ctx) =>
-      res(ctx.delay("infinite")),
-    ),
-    error: rest.get(mockGetOrgUrl, (req, res, ctx) =>
-      res(
-        ctx.status(400, "Ambiguous Error"),
-        ctx.json("Something went horribly wrong."),
-      ),
-    ),
-    empty: rest.get(mockGetOrgUrl, (req, res, ctx) =>
-      res(ctx.json({ next: null, previous: null, results: [] })),
-    ),
-    free: rest.get(mockGetOrgUrl, (req, res, ctx) =>
-      res(
-        ctx.json({
-          ...orgListFixture.results.find(
-            ({ id }) => id.toString() === req.params.id,
-          ),
-          plan: "Free",
-        }),
-      ),
-    ),
-  };
-
-  const mockChangeOrgUrl = new URL(`users/me/`, baseApiUrl).toString();
-  export const mockChangeOrg = rest.patch(mockChangeOrgUrl, (req, res, ctx) =>
-    res(ctx.json(getMeFixture)),
-  );
-</script>
-
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
-
   import OrgMenu from "../OrgMenu.svelte";
+  import {
+    mockChangeOrg,
+    mockGetOrg,
+    mockGetOrgsList,
+    mockInMyOrg,
+  } from "./mockData";
 
   const args = {
     user: getMeFixture,
     org: orgListFixture.results[0],
   };
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Org"
-  component={OrgMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Org",
+    component: OrgMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <OrgMenu {...args} />
diff --git a/src/pages/app/accounts/stories/PremiumMenu.stories.svelte b/src/pages/app/accounts/stories/PremiumMenu.stories.svelte
index 66c9144fb..d6acd22d7 100644
--- a/src/pages/app/accounts/stories/PremiumMenu.stories.svelte
+++ b/src/pages/app/accounts/stories/PremiumMenu.stories.svelte
@@ -1,16 +1,16 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import PremiumMenu from "../PremiumMenu.svelte";
 
   import orgListFixture from "../fixtures/orgList.json";
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Premium"
-  component={PremiumMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Premium",
+    component: PremiumMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <PremiumMenu {...args} />
diff --git a/src/pages/app/accounts/stories/UserMenu.stories.svelte b/src/pages/app/accounts/stories/UserMenu.stories.svelte
index ea21b857e..d28f9f957 100644
--- a/src/pages/app/accounts/stories/UserMenu.stories.svelte
+++ b/src/pages/app/accounts/stories/UserMenu.stories.svelte
@@ -1,14 +1,14 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import UserMenu from "../UserMenu.svelte";
-</script>
 
-<Meta
-  title="Account Navigation / Menus / User"
-  component={UserMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / User",
+    component: UserMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <UserMenu {...args} />
diff --git a/src/pages/app/accounts/stories/mockData.ts b/src/pages/app/accounts/stories/mockData.ts
new file mode 100644
index 000000000..ae882717a
--- /dev/null
+++ b/src/pages/app/accounts/stories/mockData.ts
@@ -0,0 +1,112 @@
+import { rest } from "msw";
+import { baseApiUrl } from "../../../../api/base.js";
+import orgListFixture from "../fixtures/orgList.json";
+import getMeFixture from "../fixtures/getMe.json";
+import orgMembersFixture from "../fixtures/orgMembers.json";
+
+/* Mock Request Handlers */
+const mockMeUrl = new URL(`users/me/`, baseApiUrl).toString();
+export const mockGetMe = {
+  data: rest.get(mockMeUrl, (req, res, ctx) => res(ctx.json(getMeFixture))),
+  noOrgs: rest.get(mockMeUrl, (req, res, ctx) =>
+    res(ctx.json({ ...getMeFixture, organization: "4" })),
+  ),
+  orgAdmin: rest.get(mockMeUrl, (req, res, ctx) =>
+    res(
+      ctx.json({
+        ...getMeFixture,
+        admin_organizations: [...getMeFixture.admin_organizations, 1],
+      }),
+    ),
+  ),
+  loading: rest.get(mockMeUrl, (req, res, ctx) => res(ctx.delay("infinite"))),
+  error: rest.get(mockMeUrl, (req, res, ctx) =>
+    res(ctx.status(404, "Not Found"), ctx.json({ detail: "Not found." })),
+  ),
+};
+
+/* Mock Request Handlers */
+const mockUsersUrl = new URL(`users/`, baseApiUrl).toString();
+export const mockInMyOrg = {
+  data: rest.get(mockUsersUrl, (req, res, ctx) =>
+    res(ctx.json(orgMembersFixture)),
+  ),
+  loading: rest.get(mockUsersUrl, (req, res, ctx) =>
+    res(ctx.delay("infinite")),
+  ),
+  error: rest.get(mockUsersUrl, (req, res, ctx) =>
+    res(
+      ctx.status(400, "Ambiguous Error"),
+      ctx.json("Something went horribly wrong."),
+    ),
+  ),
+  empty: rest.get(mockUsersUrl, (req, res, ctx) =>
+    res(ctx.json({ next: null, previous: null, results: [] })),
+  ),
+};
+
+/* Mock Request Handlers */
+const mockGetOrgsUrl = new URL(`organizations/`, baseApiUrl).toString();
+export const mockGetOrgsList = {
+  data: rest.get(mockGetOrgsUrl, (req, res, ctx) =>
+    res(ctx.json(orgListFixture)),
+  ),
+  loading: rest.get(mockGetOrgsUrl, (req, res, ctx) =>
+    res(ctx.delay("infinite")),
+  ),
+  error: rest.get(mockGetOrgsUrl, (req, res, ctx) =>
+    res(
+      ctx.status(400, "Ambiguous Error"),
+      ctx.json("Something went horribly wrong."),
+    ),
+  ),
+  empty: rest.get(mockGetOrgsUrl, (req, res, ctx) =>
+    res(
+      ctx.json({
+        next: null,
+        previous: null,
+        results: [orgListFixture.results[1]],
+      }),
+    ),
+  ),
+};
+
+const mockGetOrgUrl = new URL(`organizations/:id/*`, baseApiUrl).toString();
+export const mockGetOrg = {
+  data: rest.get(mockGetOrgUrl, (req, res, ctx) =>
+    res(
+      ctx.json(
+        orgListFixture.results.find(
+          ({ id }) => id.toString() === req.params.id,
+        ),
+      ),
+    ),
+  ),
+  loading: rest.get(mockGetOrgUrl, (req, res, ctx) =>
+    res(ctx.delay("infinite")),
+  ),
+  error: rest.get(mockGetOrgUrl, (req, res, ctx) =>
+    res(
+      ctx.status(400, "Ambiguous Error"),
+      ctx.json("Something went horribly wrong."),
+    ),
+  ),
+  empty: rest.get(mockGetOrgUrl, (req, res, ctx) =>
+    res(ctx.json({ next: null, previous: null, results: [] })),
+  ),
+  free: rest.get(mockGetOrgUrl, (req, res, ctx) =>
+    res(
+      ctx.json({
+        ...orgListFixture.results.find(
+          ({ id }) => id.toString() === req.params.id,
+        ),
+        plan: "Free",
+      }),
+    ),
+  ),
+};
+
+const mockChangeOrgUrl = new URL(`users/me/`, baseApiUrl).toString();
+export const mockChangeOrg = rest.patch(mockChangeOrgUrl, (req, res, ctx) =>
+  res(ctx.json(getMeFixture)),
+);
diff --git a/src/pages/viewer/stories/Footer.stories.svelte b/src/pages/viewer/stories/Footer.stories.svelte
index 4f05c98b8..abc55f34c 100644
--- a/src/pages/viewer/stories/Footer.stories.svelte
+++ b/src/pages/viewer/stories/Footer.stories.svelte
@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Footer from "../Footer.svelte";
 
@@ -9,9 +9,12 @@
     embed: false,
     showFullscreen: false,
   };
-</script>
 
-<Meta title="Viewer / Footer" component={Footer} />
+  export const meta = {
+    title: "Viewer / Footer",
+    component: Footer,
+  };
+</script>
 
 <Template let:args>
   <Footer {...args} />
diff --git a/src/pages/viewer/stories/Header.stories.svelte b/src/pages/viewer/stories/Header.stories.svelte
index 0cf48aff6..57a0a640c 100644
--- a/src/pages/viewer/stories/Header.stories.svelte
+++ b/src/pages/viewer/stories/Header.stories.svelte
@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Header from "../Header.svelte";
 
@@ -14,9 +14,12 @@
     embed: false,
     disableControls: false,
   };
-</script>
 
-<Meta title="Viewer / Header" component={Header} />
+  export const meta = {
+    title: "Viewer / Header",
+    component: Header,
+  };
+</script>
 
 <Template let:args>
   <Header {...args} />
diff --git a/src/pages/viewer/stories/Sidebar.stories.svelte b/src/pages/viewer/stories/Sidebar.stories.svelte
index 1ec36f95b..1bf8344a1 100644
--- a/src/pages/viewer/stories/Sidebar.stories.svelte
+++ b/src/pages/viewer/stories/Sidebar.stories.svelte
@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Sidebar from "../Sidebar.svelte";
   import documentFixture from "../fixtures/document.json";
@@ -11,9 +11,12 @@
     signedIn: true,
     disableControls: false,
   };
-</script>
 
-<Meta title="Viewer / Sidebar" component={Sidebar} />
+  export const meta = {
+    title: "Viewer / Sidebar",
+    component: Sidebar,
+  };
+</script>
 
 <Template let:args>
   <Sidebar {...args} />
diff --git a/src/pages/viewer/stories/SidebarAction.stories.svelte b/src/pages/viewer/stories/SidebarAction.stories.svelte
index d7c2d0bb9..36519bb23 100644
--- a/src/pages/viewer/stories/SidebarAction.stories.svelte
+++ b/src/pages/viewer/stories/SidebarAction.stories.svelte
@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
 
   import SidebarAction from "../SidebarAction.svelte";
@@ -11,9 +11,12 @@
       "Leave a public, private or shared note, which can be embedded within an article.",
     disabled: false,
   };
-</script>
 
-<Meta title="Viewer / Sidebar / Action" component={SidebarAction} />
+  export const meta = {
+    title: "Viewer / Sidebar / Action",
+    component: SidebarAction,
+  };
+</script>
 
 <Template let:args>
   <SidebarAction {...args} />
diff --git a/src/premium-credits/stories/CreditMeter.stories.svelte b/src/premium-credits/stories/CreditMeter.stories.svelte
index b74241b48..a0da2b537 100644
--- a/src/premium-credits/stories/CreditMeter.stories.svelte
+++ b/src/premium-credits/stories/CreditMeter.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import CreditMeter from "../CreditMeter.svelte";
 
   let args = {
@@ -9,14 +9,14 @@
     label: "Org Allowance",
     helpText: "Monthly credits will reset in 2 weeks",
   };
-</script>
 
-<Meta
-  title="Premium Credits / Credit Meter"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={CreditMeter}
-/>
+  export const meta = {
+    title: "Premium Credits / Credit Meter",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: CreditMeter,
+  };
+</script>
 
 <Template let:args>
   <CreditMeter {...args} />
diff --git a/src/premium-credits/stories/Price.stories.svelte b/src/premium-credits/stories/Price.stories.svelte
index 8f1ac0ec1..6ebce8db3 100644
--- a/src/premium-credits/stories/Price.stories.svelte
+++ b/src/premium-credits/stories/Price.stories.svelte
@@ -1,14 +1,14 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import Price from "../Price.svelte";
-</script>
 
-<Meta
-  title="Premium Credits / Price"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Price}
-/>
+  export const meta = {
+    title: "Premium Credits",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: Price,
+  };
+</script>
 
 <Template let:args>
   <Price {...args} />
@@ -16,6 +16,7 @@
 
 <Story
   name="Price"
+  id="price"
   args={{
     value: 12375,
   }}
diff --git a/src/premium-credits/stories/UpgradePrompt.stories.svelte b/src/premium-credits/stories/UpgradePrompt.stories.svelte
index 96e2b0f3b..1ee75b81f 100644
--- a/src/premium-credits/stories/UpgradePrompt.stories.svelte
+++ b/src/premium-credits/stories/UpgradePrompt.stories.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts" context="module">
   import { _ } from "svelte-i18n";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import UpgradePrompt from "../UpgradePrompt.svelte";
 
   const args = {
@@ -8,14 +8,14 @@
       "This Premium Add-On uses AI to perform advanced analysis. Upgrade to a Professional account to utilize this and other powerful Add-Ons.",
     callToAction: "Start Free Trial",
   };
-</script>
 
-<Meta
-  title="Premium Credits / Upgrade Prompt"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={UpgradePrompt}
-/>
+  export const meta = {
+    title: "Premium Credits / Upgrade Prompt",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: UpgradePrompt,
+  };
+</script>
 
 <Template let:args>
   <UpgradePrompt {...args} />

From a587fb0ce3623ea88da69d484b9895437077f570 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 5 Dec 2023 15:43:45 -0500
Subject: [PATCH 4/4] Remove demo components for Badge and Dropdown

---
 src/common/stories/Badge.demo.svelte       | 12 ----
 src/common/stories/Badge.stories.svelte    |  6 +-
 src/common/stories/Dropdown.demo.svelte    | 67 ------------------
 src/common/stories/Dropdown.stories.svelte | 82 +++++++++++++++++++++-
 4 files changed, 84 insertions(+), 83 deletions(-)
 delete mode 100644 src/common/stories/Badge.demo.svelte
 delete mode 100644 src/common/stories/Dropdown.demo.svelte

diff --git a/src/common/stories/Badge.demo.svelte b/src/common/stories/Badge.demo.svelte
deleted file mode 100644
index 69f8136cc..000000000
--- a/src/common/stories/Badge.demo.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-  import Badge from "../Badge.svelte";
-  import Star from "../icons/Star.svelte";
-
-  export let label = "Badge";
-  export let badgeColor = undefined;
-  export let labelColor = undefined;
-</script>
-
-<Badge {label} {badgeColor} {labelColor}>
-  <Star slot="icon" />
-</Badge>
diff --git a/src/common/stories/Badge.stories.svelte b/src/common/stories/Badge.stories.svelte
index 5486fb1f9..26617e56d 100644
--- a/src/common/stories/Badge.stories.svelte
+++ b/src/common/stories/Badge.stories.svelte
@@ -2,7 +2,7 @@
   import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Badge from "../Badge.svelte";
-  import BadgeDemo from "./Badge.demo.svelte";
+  import Star from "../icons/Star.svelte";
 
   export const meta = {
     title: "Common / Badge",
@@ -14,7 +14,9 @@
 </script>
 
 <Template let:args>
-  <BadgeDemo {...args} />
+  <Badge {...args}>
+    <Star slot="icon" />
+  </Badge>
 </Template>
 
 <Story name="Light Color" args={{ label: "Featured", badgeColor: "yellow" }} />
diff --git a/src/common/stories/Dropdown.demo.svelte b/src/common/stories/Dropdown.demo.svelte
deleted file mode 100644
index beeefc42e..000000000
--- a/src/common/stories/Dropdown.demo.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-  import Dropdown, { closeDropdown } from "../Dropdown2.svelte";
-  import Menu from "../Menu.svelte";
-  import MenuTitle from "../MenuTitle.svelte";
-  import MenuItem from "../MenuItem.svelte";
-
-  export let position: string;
-  export let overlay: boolean;
-
-  let options = ["Option 1", "Option 2", "Option 3"];
-  let subOptions = ["Suboption A", "Suboption B", "Suboption C"];
-</script>
-
-<style>
-  .content {
-    border-radius: 3px;
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
-    padding: 0.5rem;
-  }
-</style>
-
-<Dropdown {position} {overlay} id="dropdown-1">
-  <MenuTitle label="Options" slot="title" />
-  <Menu>
-    {#each options as option}
-      <MenuItem on:click={() => closeDropdown("dropdown-1")}>{option}</MenuItem>
-    {/each}
-    <Dropdown overlay={false} id="dropdown-1-1">
-      <MenuTitle label="Option 4" slot="title" />
-      <Menu>
-        {#each subOptions as subOption}
-          <MenuItem on:click={() => closeDropdown("dropdown-1-1")}
-            >{subOption}</MenuItem
-          >
-        {/each}
-      </Menu>
-    </Dropdown>
-  </Menu>
-</Dropdown>
-
-<Dropdown {position} {overlay} id="dropdown-2">
-  <MenuTitle label="Content" slot="title" />
-  <div class="content">
-    <img
-      class="contentImg"
-      src="https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?auto=format&fit=crop&q=80&w=400&h=300&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-      alt="Placeholder"
-      height="300"
-      width="400"
-    />
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus id
-      metus vel euismod. Phasellus luctus, orci sit amet vestibulum tincidunt,
-      purus erat interdum ex, vel bibendum tortor justo sit amet lectus. Fusce
-      consequat, ligula non viverra auctor, velit nulla elementum lectus, nec
-      luctus felis libero a quam. In hac habitasse platea dictumst. Vivamus
-      euismod, purus non tincidunt blandit, erat augue dapibus metus, et aliquam
-      sapien elit ac orci. Integer ut justo nec justo vestibulum consectetur ut
-      non nisi. Sed vestibulum eget tortor eget tristique. Nulla facilisi. Cras
-      eget vehicula quam, id scelerisque ipsum. Nunc sagittis elit vitae justo
-      viverra, at condimentum lectus tristique. Integer nec malesuada purus.
-      Nullam eu bibendum libero.
-    </p>
-  </div>
-</Dropdown>
diff --git a/src/common/stories/Dropdown.stories.svelte b/src/common/stories/Dropdown.stories.svelte
index 1dfd0f273..4a83e7316 100644
--- a/src/common/stories/Dropdown.stories.svelte
+++ b/src/common/stories/Dropdown.stories.svelte
@@ -1,7 +1,10 @@
 <script lang="ts" context="module">
   import { Story, Template } from "@storybook/addon-svelte-csf";
 
-  import Dropdown from "./Dropdown.demo.svelte";
+  import Dropdown, { closeDropdown } from "../Dropdown2.svelte";
+  import Menu from "../Menu.svelte";
+  import MenuTitle from "../MenuTitle.svelte";
+  import MenuItem from "../MenuItem.svelte";
 
   const args = {};
 
@@ -10,11 +13,86 @@
     tags: ["autodocs"],
     component: Dropdown,
     parameters: { layout: "centered" },
+    argTypes: {
+      position: {
+        control: "select",
+        options: [
+          "left",
+          "center",
+          "right",
+          "top",
+          "bottom",
+          "top left",
+          "top center",
+          "top right",
+          "bottom left",
+          "bottom center",
+          "bottom right",
+        ],
+      },
+      border: { control: "boolean" },
+    },
   };
+  let options = ["Option 1", "Option 2", "Option 3"];
+  let subOptions = ["Suboption A", "Suboption B", "Suboption C"];
 </script>
 
+<style>
+  .content {
+    border-radius: 3px;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    padding: 0.5rem;
+  }
+</style>
+
 <Template let:args>
-  <Dropdown {...args} />
+  <Dropdown {...args} id="dropdown-1">
+    <MenuTitle label="Options" slot="title" />
+    <Menu>
+      {#each options as option}
+        <MenuItem on:click={() => closeDropdown("dropdown-1")}
+          >{option}</MenuItem
+        >
+      {/each}
+      <Dropdown overlay={false} id="dropdown-1-1">
+        <MenuTitle label="Option 4" slot="title" />
+        <Menu>
+          {#each subOptions as subOption}
+            <MenuItem on:click={() => closeDropdown("dropdown-1-1")}
+              >{subOption}</MenuItem
+            >
+          {/each}
+        </Menu>
+      </Dropdown>
+    </Menu>
+  </Dropdown>
+  <Dropdown {...args} id="dropdown-2">
+    <MenuTitle label="Content" slot="title" />
+    <div class="content">
+      <img
+        class="contentImg"
+        src="https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?auto=format&fit=crop&q=80&w=400&h=300&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Placeholder"
+        height="300"
+        width="400"
+      />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus id
+        metus vel euismod. Phasellus luctus, orci sit amet vestibulum tincidunt,
+        purus erat interdum ex, vel bibendum tortor justo sit amet lectus. Fusce
+        consequat, ligula non viverra auctor, velit nulla elementum lectus, nec
+        luctus felis libero a quam. In hac habitasse platea dictumst. Vivamus
+        euismod, purus non tincidunt blandit, erat augue dapibus metus, et
+        aliquam sapien elit ac orci. Integer ut justo nec justo vestibulum
+        consectetur ut non nisi. Sed vestibulum eget tortor eget tristique.
+        Nulla facilisi. Cras eget vehicula quam, id scelerisque ipsum. Nunc
+        sagittis elit vitae justo viverra, at condimentum lectus tristique.
+        Integer nec malesuada purus. Nullam eu bibendum libero.
+      </p>
+    </div>
+  </Dropdown>
 </Template>
 
 <Story name="Default" {args} />