Merge pull request #355 from MuckRock/storybook-updates

Storybook updates and fixes
MuckRock · Dec 7, 2023 · e3f7865 · e3f7865
2 parents 698e334 + a587fb0
commit e3f7865
Show file tree

Hide file tree

Showing 60 changed files with 809 additions and 843 deletions.
diff --git 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/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/AddOnListItem.demo.svelte b/src/addons/browser/stories/AddOnListItem.demo.svelte
diff --git 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/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/Filter.demo.svelte b/src/addons/browser/stories/Filter.demo.svelte
diff --git 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/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/SearchInput.demo.svelte b/src/addons/browser/stories/SearchInput.demo.svelte
diff --git 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/browser/stories/mockData.ts 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
@@ -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
@@ -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
@@ -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} />