Hello world

First open source release of Campfire 🎉

app/javascript/lib/autocomplete/renderer.js

@@ -0,0 +1,40 @@
+export class Renderer {
+  renderAutocompletableSuggestions(autocompletables, options = {}) {
+    const { selectedAutocompletable } = options
+    let html = ""
+
+    autocompletables.forEach((autocompletable) => {
+      const isSelected = autocompletable === selectedAutocompletable
+      const multipleAttr = autocompletable.type === "group" ? "multiple" : ""
+      const selectedAriaSelectedAttrs = isSelected ? "selected aria-selected" : ""
+
+      html += `
+        <suggestion-option class="autocomplete__item flex align-center gap unpad" role="option" value="${autocompletable.value}" ${multipleAttr} ${selectedAriaSelectedAttrs}>
+          ${
+            autocompletable.pending
+              ? `Add <strong>${autocompletable.name}…</strong>`
+              : autocompletable.noResultsLabel
+              ? `<span class="txt--disable-truncate">${autocompletable.noResultsLabel}</span>`
+              : this.renderAutocompletable(autocompletable)
+          }
+        </suggestion-option>
+      `
+    })
+
+    return html
+  }
+
+  renderAutocompletable(autocompletable) {
+    const html = `
+      <button class="autocomplete__btn btn btn--borderless btn--transparent min-width flex-item-grow justify-start" data-value="${autocompletable.value}">
+        <span class="avatar">
+          <img src="${autocompletable.avatar_url}" class="automcomplete__avatar" role="presentation" />
+        </span>
+        <span class="autocompletable__name">${autocompletable.name}</span>
+        <a href="#" class="autocompletable__unselect" aria-label="Remove ${autocompletable.name}" data-behavior="unselect_autocompletable">×</a>
+      </button>
+    `
+
+    return html
+  }
+}