Add stories for search bar

src/addons/stories/Popularity.stories.svelte

@@ -2,10 +2,6 @@
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import Popularity from "../Popularity.svelte";
 
-  const args = {
-    useCount: 100,
-  };
-
   export const meta = {
     title: "Add-Ons / Popularity",
     tags: ["autodocs"],

src/pages/app/SearchBar.svelte

@@ -1,22 +1,24 @@
 <script>
+  import { _ } from "svelte-i18n";
+  import { onMount, onDestroy } from "svelte";
+
   import SearchInput from "./SearchInput.svelte";
   import Button from "@/common/Button.svelte";
-  import { onMount, onDestroy } from "svelte";
 
   import {
     handleSearch,
     search as searchData,
     userSearchQuery,
-  } from "@/search/search";
+  } from "@/search/search.js";
   import { showSearchTips } from "@/manager/layout.js";
   import { router } from "@/router/router.js";
-  import { _ } from "svelte-i18n";
 
   export let search = "";
   export let example = false;
   export let compact = false;
   export let embed = false;
   export let dialog = false;
+
   let transformedQuery;
 
   function submitSearch() {
@@ -78,35 +80,37 @@
   {/if}
 </div>
 
-<style lang="scss">
+<style>
   .searchcontainer {
     margin: 0 0 20px 0;
+  }
 
-    @media only screen and (max-width: 720px) {
+  @media only screen and (max-width: 720px) {
+    .searchcontainer {
       margin: 0 0 30px 0;
     }
+  }
 
-    &.example {
-      margin: 0;
-    }
+  .searchcontainer.example {
+    margin: 0;
+  }
 
-    .info {
-      color: $gray;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: -3px;
+  .searchcontainer .info {
+    color: var(--gray);
+    font-size: 12px;
+    margin-left: 5px;
+    margin-top: -3px;
+  }
 
-      > span {
-        vertical-align: middle;
-        margin-right: 2px;
-      }
-    }
+  .searchcontainer .info > span {
+    vertical-align: middle;
+    margin-right: 2px;
+  }
 
-    :global(code) {
-      color: #8a8a8a;
-      border: solid 1px gainsboro;
-      padding: 0 2px;
-      border-radius: $radius;
-    }
+  .searchcontainer :global(code) {
+    color: #8a8a8a;
+    border: solid 1px gainsboro;
+    padding: 0 2px;
+    border-radius: var(--radius);
   }
 </style>

src/pages/app/SearchInput.svelte

@@ -1,10 +1,9 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { onMount } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte";
 
   import NoWhitespace from "@/common/NoWhitespace.svelte";
 
-  import emitter from "@/emit.js";
   import { highlight } from "@/search/parse.js";
   import { fieldValid, sortCompletions } from "@/search/searchFields.js";
   import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
@@ -22,6 +21,8 @@
   import searchIconSvg from "@/assets/search_icon.svg?raw";
   import closeInlineSvg from "@/assets/close_inline.svg?raw";
 
+  const dispatch = createEventDispatcher();
+
   const fieldAliases = {
     projects: "project",
     account: "user",
@@ -34,10 +35,6 @@
     return field;
   }
 
-  const emit = emitter({
-    search() {},
-  });
-
   export let value = "";
   export let example = false;
   export let compact = false;
@@ -508,7 +505,7 @@
 
     if (e.which == 13 || e.keyCode == 13) {
       // Search on enter
-      emit.search();
+      dispatch("search");
       e.preventDefault();
       return;
     }

src/pages/app/SearchLink.svelte

@@ -1,20 +1,19 @@
 <script>
   import { _ } from "svelte-i18n";
-  // SVG assets
-  import SearchIconSvg from "@/assets/search_icon.svg?raw";
+  import { Search16 } from "svelte-octicons";
 
   export let link = "";
 </script>
 
 <div class="link">
-  <a href={link} target="_blank"
-    >{@html SearchIconSvg}
+  <a href={link} target="_blank">
+    <Search16 />
     {$_("searchLink.search")}</a
   >
 </div>
 <div class="linkcontainer" />
 
-<style lang="scss">
+<style>
   .linkcontainer {
     background: white;
     position: absolute;
@@ -26,28 +25,27 @@
   }
 
   .link {
-    background: $faint-gray;
+    background: var(--faint-gray);
     display: inline-block;
     padding: 4px 19px 4px 11px;
-    border-radius: $radius;
+    border-radius: var(--radius);
     border: solid 1px gainsboro;
     margin: 0 -12px;
-    color: $secondary;
-
+    color: var(--secondary);
     margin-bottom: 6px;
+  }
 
-    :global(*) {
-      display: inline-block;
-      vertical-align: middle;
-    }
+  .link :global(*) {
+    display: inline-block;
+    vertical-align: middle;
+  }
 
-    :global(svg) {
-      padding-right: 5px;
-      padding-bottom: 1px;
-    }
+  .link :global(svg) {
+    padding-right: 5px;
+    padding-bottom: 1px;
+  }
 
-    &:hover {
-      text-decoration: underline;
-    }
+  .link:hover {
+    text-decoration: underline;
   }
 </style>

src/pages/app/stories/SearchBar.stories.svelte

@@ -0,0 +1,39 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import SearchBar from "../SearchBar.svelte";
+
+  export const meta = {
+    title: "App / Search / Search Bar",
+    component: SearchBar,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Template let:args>
+  <div class="container">
+    <SearchBar {...args} />
+  </div>
+</Template>
+
+<Story name="default" args={{ search: "project:example-project-123" }} />
+
+<Story
+  name="compact"
+  args={{ compact: true, search: "project:example-project-123" }}
+/>
+
+<Story
+  name="example"
+  args={{ example: true, search: "project:example-project-123" }}
+/>
+
+<Story
+  name="dialog"
+  args={{ dialog: true, search: "project:example-project-123" }}
+/>
+
+<style>
+  .container {
+    padding: 2em;
+  }
+</style>

src/pages/app/stories/SearchInput.stories.svelte

@@ -0,0 +1,22 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import SearchInput from "../SearchInput.svelte";
+
+  export const meta = {
+    title: "App / Search / Search Input",
+    component: SearchInput,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story name="default">
+  <div class="container">
+    <SearchInput value="project:example-project-123" />
+  </div>
+</Story>
+
+<style>
+  .container {
+    padding: 2em;
+  }
+</style>

src/pages/app/stories/SearchLink.stories.svelte

@@ -0,0 +1,14 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import SearchLink from "../SearchLink.svelte";
+
+  export const meta = {
+    title: "App / Search / Search Link",
+    component: SearchLink,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story name="default">
+  <SearchLink link="/" />
+</Story>