From 3c019484ce177f7f22bf79252c2645ed960fd5f4 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 9 Jan 2020 09:48:15 -0800
Subject: [PATCH] feat(palimpsest): add ComponentSearch using fuse.js

---
 .../src/containers/ComponentSearch.svelte     | 66 +++++++++++++++++++
 palimpsest/src/data/component-registry.js     |  8 +++
 2 files changed, 74 insertions(+)
 create mode 100644 palimpsest/src/containers/ComponentSearch.svelte
 create mode 100644 palimpsest/src/data/component-registry.js

diff --git a/palimpsest/src/containers/ComponentSearch.svelte b/palimpsest/src/containers/ComponentSearch.svelte
new file mode 100644
index 00000000..cdf11437
--- /dev/null
+++ b/palimpsest/src/containers/ComponentSearch.svelte
@@ -0,0 +1,66 @@
+<script>
+  import { link, location } from 'svelte-spa-router';
+  import { Search } from 'carbon-components-svelte';
+  import Fuse from 'fuse.js';
+  import components from '../data/component-registry';
+
+  const fuse = new Fuse(components, { shouldSort: false, keys: ['name'] });
+
+  let value = '';
+
+  $: results = value.length > 1 ? fuse.search(value) : components;
+</script>
+
+<style>
+  ul {
+    padding: 0.5rem 0;
+  }
+
+  li {
+    display: flex;
+  }
+
+  .bx--link {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0.375rem 1rem;
+    color: var(--cds-text-01);
+    text-decoration: none;
+  }
+
+  .bx--link:focus {
+    z-index: 1;
+  }
+
+  .bx--link:hover {
+    background-color: var(--cds-ui-03);
+    color: var(--cds-text-01);
+  }
+
+  .bx--link.current {
+    background-color: var(--cds-ui-03);
+    font-weight: 600;
+  }
+
+  .bx--link.current:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0.25rem;
+    height: 100%;
+    background-color: var(--cds-interactive-01);
+  }
+</style>
+
+<Search small id="search-components" labelText="Components" bind:value />
+<ul>
+  {#each results as { name }, i (name)}
+    <li>
+      <a class="bx--link" class:current={$location === `/c/${name}`} href={`/c/${name}`} use:link>
+        {name}
+      </a>
+    </li>
+  {/each}
+</ul>
diff --git a/palimpsest/src/data/component-registry.js b/palimpsest/src/data/component-registry.js
new file mode 100644
index 00000000..8fab1bb4
--- /dev/null
+++ b/palimpsest/src/data/component-registry.js
@@ -0,0 +1,8 @@
+const components = [
+  { name: 'CodeSnippet' },
+  { name: 'DataTable' },
+  { name: 'Dropdown' },
+  { name: 'MultiSelect' }
+];
+
+export default components;