Predictive Search UI Component

Author: antoinegrant

Diff for: packages/theme-predictive-search-component/README.md

@@ -0,0 +1,57 @@
+## Description
+
+A component that controls the state of a predictive search UI.
+
+## Example
+
+```js
+const predictivesearch = new PredictiveSearch({
+  selectors: {
+    input: '[data-predictive-search-input="header"]',
+    reset: '[data-predictive-search-reset="header"]',
+    result: '[data-predictive-search-result="header"]'
+  },
+  resultTemplateFct: data => {
+    return `
+      <div class="predictive-search">
+        <ul class="predictive-search__list">
+          ${products.map(
+            product => `
+            <li>
+              <img src="${product.image}" alt="${product.title}" />
+              <span>${produtc.title}</span>
+            </li>
+          `
+          )}
+        </ul>
+      </div>
+    `;
+  },
+  onInputFocus: nodes => {
+    // You can get a reference to active target
+    console.log(nodes.input.id); //-> input
+    console.log(nodes.submit.id); //-> submit
+    console.log(nodes.result.id); //-> result
+  },
+  onInputKeyup: nodes => {
+    return true; // This will allow the event callback to execute
+  },
+  onInputBlur: nodes => {
+    return false; // This will prevent the event callback to execute
+  },
+  onInputClear: nodes => {},
+  onBeforeKill: nodes => {},
+  onBeforeOpen: nodes => {},
+  onOpen: nodes => {},
+  onBeforeClose: nodes => {},
+  onClose: nodes => {},
+  onKill: nodes => {}
+});
+
+// Public methods
+predictivesearch.open();
+predictivesearch.close();
+predictivesearch.kill();
+```
+
+---

Diff for: packages/theme-predictive-search-component/__fixtures__/search_as_you_type_the_calling.json

@@ -0,0 +1,26 @@
+{
+  "query": "The Calling",
+  "resources": {
+    "results": {
+      "products": [
+        {
+          "title": "The Calling",
+          "body": "<p>The Calling</p>",
+          "handle": "calling",
+          "image": "https://cdn.shopify.com/...",
+          "url": "/products/calling?variant_id=1",
+          "price": "3099",
+          "variants": [
+            {
+              "title": "Large / Angry Dolphin",
+              "url": "https://www.evil-bikes.com/products/calling",
+              "image": "https://cdn.shopify.com/...",
+              "price": "3099",
+              "compare_at_price": "4099"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

Diff for: packages/theme-predictive-search-component/__fixtures__/search_as_you_type_the_following.json

@@ -0,0 +1,26 @@
+{
+  "query": "The Following",
+  "resources": {
+    "results": {
+      "products": [
+        {
+          "title": "The Following",
+          "body": "<p>The Following</p>",
+          "handle": "following",
+          "image": "https://cdn.shopify.com/...",
+          "url": "/products/following?variant_id=1",
+          "price": "3099.00",
+          "variants": [
+            {
+              "title": "Large / Angry Dolphin",
+              "url": "https://www.evil-bikes.com/products/following",
+              "image": "https://cdn.shopify.com/...",
+              "price": "3099.00",
+              "compare_at_price": "4099.00"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

Diff for: packages/theme-predictive-search-component/__tests__/.eslintrc

@@ -0,0 +1,19 @@
+{
+  "root": true,
+  "extends": [
+    "plugin:shopify/esnext",
+    "plugin:shopify/node",
+    "plugin:shopify/prettier"
+  ],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "globals": {
+    "page": true
+  },
+  "rules": {
+    "shopify/strict-component-boundaries": "off",
+    "babel/object-curly-spacing": 0
+  }
+}