feat(templates): update Autocomplete.js template to Satellite (algoli…

…a/create-instantsearch-app#450)
algolia · Jun 4, 2020 · 2175aef · 2175aef
1 parent 2319242
commit 2175aef
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 88 deletions.
diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap
@@ -1041,6 +1041,11 @@ exports[`Templates Autocomplete.js File content: index.html 1`] = `
 
   <link rel=\\"stylesheet\\" href=\\"./src/index.css\\">
   <link rel=\\"stylesheet\\" href=\\"./src/app.css\\">
+  <!--
+    Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
+    https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
+  -->
+  <link rel=\\"stylesheet\\" href=\\"https://unpkg.com/instantsearch.css@7/themes/satellite-min.css\\" />
 
   <title>autocomplete.js-app</title>
 </head>
@@ -1057,9 +1062,9 @@ exports[`Templates Autocomplete.js File content: index.html 1`] = `
 
   <div class=\\"container\\">
     <div class=\\"container-app\\">
-      <div id=\\"searchBox\\">
-        <form role=\\"search\\">
-          <input type=\\"search\\" placeholder=\\"Search placeholder\\" />
+      <div id=\\"searchBox\\" class=\\"ais-SearchBox\\">
+        <form role=\\"search\\" class=\\"ais-SearchBox-form\\">
+          <input type=\\"search\\" placeholder=\\"Search placeholder\\" class=\\"ais-SearchBox-input\\" />
         </form>
       </div>
     </div>
@@ -1098,8 +1103,7 @@ exports[`Templates Autocomplete.js File content: package.json 1`] = `
   \\"scripts\\": {
     \\"start\\": \\"parcel index.html --port 3000\\",
     \\"build\\": \\"parcel build index.html\\",
-    \\"lint\\": \\"eslint .\\",
-    \\"lint:fix\\": \\"npm run lint -- --fix\\"
+    \\"lint\\": \\"eslint .\\"
   },
   \\"partialDependencies\\": {
     \\"autocomplete.js\\": \\"0.0.1\\"
@@ -1109,13 +1113,13 @@ exports[`Templates Autocomplete.js File content: package.json 1`] = `
 
 exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
 ".header {
-  display: flex;
   align-items: center;
-  min-height: 50px;
-  padding: 0.5rem 1rem;
   background-image: linear-gradient(73deg, #3369e7, #1cc7d0);
   color: #fff;
+  display: flex;
   margin-bottom: 1rem;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
 }
 
 .header a {
@@ -1128,7 +1132,7 @@ exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
   font-weight: normal;
 }
 
-.header-title::after {
+.header-subtitle::before {
   content: ' ▸ ';
   padding: 0 0.5rem;
 }
@@ -1138,15 +1142,23 @@ exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
 }
 
 .container {
-  max-width: 1200px;
   margin: 0 auto;
+  max-width: 460px;
   padding: 1rem;
 }
 
 #searchBox {
   margin-bottom: 2rem;
 }
 
+.ais-SearchBox-form:before {
+  z-index: 1;
+}
+
+.ais-SearchBox-input {
+  min-height: 2.5rem;
+}
+
 .algolia-autocomplete {
   width: 100%;
 }
@@ -1156,38 +1168,34 @@ exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
   width: 100%;
 }
 
-.algolia-autocomplete .aa-input {
-  padding: 12px;
-  font: inherit;
-  border-radius: 2px;
-  border: 1px solid rgba(150, 150, 150, 0.16);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
-}
-
 .algolia-autocomplete .aa-hint {
   color: #999;
 }
 
 .algolia-autocomplete .aa-dropdown-menu {
-  width: 100%;
   background-color: #fff;
   border: 1px solid rgba(150, 150, 150, 0.16);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
+    0 8px 16px -4px rgba(35, 38, 59, 0.25);
+  margin-top: 5px;
+  width: 100%;
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
-  font-weight: bold;
+  color: #23263b;
   cursor: pointer;
-  padding: 12px;
+  font-weight: bold;
+  padding: 0.5rem 1rem;
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
-  font-weight: normal;
   font-style: normal;
+  font-weight: normal;
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
-  background-color: rgba(150, 150, 150, 0.16);
+  background-color: #f5f5fa;
 }"
 `;
 
@@ -1198,31 +1206,36 @@ import autocomplete from 'autocomplete.js';
 const client = algoliasearch('appId', 'apiKey');
 const index = client.initIndex('indexName');
 
-autocomplete('#searchBox input[type=search]', { hint: false }, [
+autocomplete(
+  '#searchBox input[type=search]',
   {
-    source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
-    displayKey: 'attribute1',
-    templates: {
-      suggestion(suggestion) {
-        return suggestion._highlightResult.attribute1.value;
+    hint: false,
+    debug: process.env.NODE_ENV === 'development',
+  },
+  [
+    {
+      source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
+      displayKey: 'attribute1',
+      templates: {
+        suggestion(suggestion) {
+          return suggestion._highlightResult.attribute1.value;
+        },
       },
     },
-  },
-]).on('autocomplete:selected', (event, suggestion, dataset) => {
+  ]
+).on('autocomplete:selected', (event, suggestion, dataset) => {
+  // eslint-disable-next-line no-console
   console.log({ suggestion, dataset });
 });"
 `;
 
 exports[`Templates Autocomplete.js File content: src/index.css 1`] = `
-"body,
-h1 {
-  margin: 0;
-  padding: 0;
-}
-
-body {
+"body {
+  background-color: #fcfcfd;
+  color: #333;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  margin: 0;
 }"
 `;
 

diff --git a/scripts/release-templates.js b/scripts/release-templates.js
@@ -70,8 +70,14 @@ async function build() {
           (await getLatestLibraryVersion({ libraryName, supportedVersion })),
         appId: 'latency',
         apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
-        indexName: 'instant_search',
-        attributesToDisplay: ['name', 'description'],
+        indexName:
+          libraryName === 'autocomplete.js'
+            ? 'instant_search_demo_query_suggestions'
+            : 'instant_search',
+        attributesToDisplay:
+          libraryName === 'autocomplete.js'
+            ? ['query']
+            : ['name', 'description'],
         attributesForFaceting: ['brand'],
         installation: false,
         silent: true,

diff --git a/src/templates/Autocomplete.js/index.html.hbs b/src/templates/Autocomplete.js/index.html.hbs
@@ -11,6 +11,11 @@
 
   <link rel="stylesheet" href="./src/index.css">
   <link rel="stylesheet" href="./src/app.css">
+  <!--
+    Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
+    https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
+  -->
+  <link rel="stylesheet" href="https://unpkg.com/instantsearch.css@7/themes/satellite-min.css" />
 
   <title>{{name}}</title>
 </head>
@@ -27,9 +32,9 @@
 
   <div class="container">
     <div class="container-app">
-      <div id="searchBox">
-        <form role="search">
-          <input type="search" placeholder="{{searchPlaceholder}}" />
+      <div id="searchBox" class="ais-SearchBox">
+        <form role="search" class="ais-SearchBox-form">
+          <input type="search" placeholder="{{searchPlaceholder}}" class="ais-SearchBox-input" />
         </form>
       </div>
     </div>

diff --git a/src/templates/Autocomplete.js/package.json b/src/templates/Autocomplete.js/package.json
@@ -6,20 +6,20 @@
   "scripts": {
     "start": "parcel index.html --port 3000",
     "build": "parcel build index.html",
-    "lint": "eslint .",
-    "lint:fix": "npm run lint -- --fix"
+    "lint": "eslint ."
   },
   "dependencies": {
-    "algoliasearch": "3.30.0",
+    "algoliasearch": "3.35.1",
     "autocomplete.js": "{{libraryVersion}}"
   },
   "devDependencies": {
     "babel-eslint": "10.0.2",
-    "eslint": "5.7.0",
-    "eslint-config-algolia": "13.2.3",
-    "eslint-config-prettier": "3.6.0",
-    "eslint-plugin-import": "2.19.1",
+    "eslint": "6.8.0",
+    "eslint-config-algolia": "15.0.0",
+    "eslint-config-prettier": "6.10.0",
+    "eslint-plugin-import": "2.20.1",
     "eslint-plugin-prettier": "3.1.2",
+    "eslint-plugin-eslint-comments": "3.1.2",
     "parcel-bundler": "1.12.4",
     "prettier": "1.19.1"
   }

diff --git a/src/templates/Autocomplete.js/src/app.css b/src/templates/Autocomplete.js/src/app.css
@@ -1,11 +1,11 @@
 .header {
-  display: flex;
   align-items: center;
-  min-height: 50px;
-  padding: 0.5rem 1rem;
   background-image: linear-gradient(73deg, #3369e7, #1cc7d0);
   color: #fff;
+  display: flex;
   margin-bottom: 1rem;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
 }
 
 .header a {
@@ -18,7 +18,7 @@
   font-weight: normal;
 }
 
-.header-title::after {
+.header-subtitle::before {
   content: ' ▸ ';
   padding: 0 0.5rem;
 }
@@ -28,15 +28,23 @@
 }
 
 .container {
-  max-width: 1200px;
   margin: 0 auto;
+  max-width: 460px;
   padding: 1rem;
 }
 
 #searchBox {
   margin-bottom: 2rem;
 }
 
+.ais-SearchBox-form:before {
+  z-index: 1;
+}
+
+.ais-SearchBox-input {
+  min-height: 2.5rem;
+}
+
 .algolia-autocomplete {
   width: 100%;
 }
@@ -46,36 +54,32 @@
   width: 100%;
 }
 
-.algolia-autocomplete .aa-input {
-  padding: 12px;
-  font: inherit;
-  border-radius: 2px;
-  border: 1px solid rgba(150, 150, 150, 0.16);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
-}
-
 .algolia-autocomplete .aa-hint {
   color: #999;
 }
 
 .algolia-autocomplete .aa-dropdown-menu {
-  width: 100%;
   background-color: #fff;
   border: 1px solid rgba(150, 150, 150, 0.16);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
+    0 8px 16px -4px rgba(35, 38, 59, 0.25);
+  margin-top: 5px;
+  width: 100%;
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
-  font-weight: bold;
+  color: #23263b;
   cursor: pointer;
-  padding: 12px;
+  font-weight: bold;
+  padding: 0.5rem 1rem;
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
-  font-weight: normal;
   font-style: normal;
+  font-weight: normal;
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
-  background-color: rgba(150, 150, 150, 0.16);
+  background-color: #f5f5fa;
 }
diff --git a/src/templates/Autocomplete.js/src/app.js.hbs b/src/templates/Autocomplete.js/src/app.js.hbs
@@ -4,20 +4,28 @@ import autocomplete from 'autocomplete.js';
 const client = algoliasearch('{{appId}}', '{{apiKey}}');
 const index = client.initIndex('{{indexName}}');
 
-autocomplete('#searchBox input[type=search]', { hint: false }, [
+autocomplete(
+  '#searchBox input[type=search]',
   {
-    source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
-    displayKey: '{{attributesToDisplay.[0]}}',
-    templates: {
-      suggestion(suggestion) {
-        {{#if attributesToDisplay.[0]}}
-        return suggestion._highlightResult.{{attributesToDisplay.[0]}}.value;
-        {{else}}
-        return JSON.stringify(suggestion);
-        {{/if}}
+    hint: false,
+    debug: process.env.NODE_ENV === 'development',
+  },
+  [
+    {
+      source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
+      displayKey: '{{attributesToDisplay.[0]}}',
+      templates: {
+        suggestion(suggestion) {
+          {{#if attributesToDisplay.[0]}}
+          return suggestion._highlightResult.{{attributesToDisplay.[0]}}.value;
+          {{else}}
+          return JSON.stringify(suggestion);
+          {{/if}}
+        },
       },
     },
-  },
-]).on('autocomplete:selected', (event, suggestion, dataset) => {
+  ]
+).on('autocomplete:selected', (event, suggestion, dataset) => {
+  // eslint-disable-next-line no-console
   console.log({ suggestion, dataset });
 });