From 618d30af919697cfe0445e8c6904195b21ea515f Mon Sep 17 00:00:00 2001
From: Dhaya <154633+dhayab@users.noreply.github.com>
Date: Fri, 20 May 2022 16:24:45 +0200
Subject: [PATCH] feat(templates): various improvements (#572)

Co-authored-by: Fabien Motte <contact@fabienmotte.com>
---
 e2e/__snapshots__/templates.test.js.snap      | 73 +++++++++++++------
 .../src/app/app.component.html.hbs            |  5 +-
 src/templates/InstantSearch.js/index.html.hbs |  5 +-
 src/templates/InstantSearch.js/src/app.js.hbs | 18 +++--
 .../React InstantSearch Hooks/src/App.tsx.hbs |  2 +
 .../React InstantSearch/public/index.html     |  2 +-
 .../React InstantSearch/src/App.js.hbs        | 14 +++-
 .../Vue InstantSearch with Vue 3/index.html   |  2 +-
 .../Vue InstantSearch with Vue 3/src/App.vue  | 11 ++-
 .../Vue InstantSearch/public/index.html       |  2 +-
 src/templates/Vue InstantSearch/src/App.vue   | 24 ++++--
 11 files changed, 111 insertions(+), 47 deletions(-)

diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap
index 1b2ec9e8f..8a3d7c44e 100644
--- a/e2e/__snapshots__/templates.test.js.snap
+++ b/e2e/__snapshots__/templates.test.js.snap
@@ -319,10 +319,15 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.htm
 
 <div class=\\"container\\">
   <ais-instantsearch [config]=\\"config\\">
+    <ais-configure [searchParameters]=\\"{ hitsPerPage: 8 }\\"></ais-configure>
     <div class=\\"search-panel\\">
       <div class=\\"search-panel__filters\\">
-        <ais-refinement-list attribute=\\"facet1\\"></ais-refinement-list>
-        <ais-refinement-list attribute=\\"facet2\\"></ais-refinement-list>
+        <ais-panel header=\\"facet1\\">
+          <ais-refinement-list attribute=\\"facet1\\"></ais-refinement-list>
+        </ais-panel>
+        <ais-panel header=\\"facet2\\">
+          <ais-refinement-list attribute=\\"facet2\\"></ais-refinement-list>
+        </ais-panel>
       </div>
 
       <div class=\\"search-panel__results\\">
@@ -3084,7 +3089,7 @@ exports[`Templates InstantSearch.js File content: index.html 1`] = `
 
   <link rel=\\"shortcut icon\\" href=\\"./favicon.png\\">
 
-  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
+  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\">
   <link rel=\\"stylesheet\\" href=\\"./src/index.css\\">
   <link rel=\\"stylesheet\\" href=\\"./src/app.css\\">
 
@@ -3113,10 +3118,9 @@ exports[`Templates InstantSearch.js File content: index.html 1`] = `
       <div class=\\"search-panel__results\\">
         <div id=\\"searchbox\\"></div>
         <div id=\\"hits\\"></div>
+        <div id=\\"pagination\\"></div>
       </div>
     </div>
-
-    <div id=\\"pagination\\"></div>
   </div>
 
   <script src=\\"https://cdn.jsdelivr.net/npm/algoliasearch@4.10.5/dist/algoliasearch-lite.umd.js\\"></script>
@@ -3234,25 +3238,30 @@ search.addWidgets([
     },
   }),
   instantsearch.widgets.configure({
-    facets: ['*'],
-    maxValuesPerFacet: 20,
+    hitsPerPage: 8,
   }),
   instantsearch.widgets.dynamicWidgets({
     container: '#dynamic-widgets',
     fallbackWidget({ container, attribute }) {
-      return instantsearch.widgets.refinementList({
+      return instantsearch.widgets.panel({ templates: { header: attribute } })(
+        instantsearch.widgets.refinementList
+      )({
         container,
         attribute,
       });
     },
     widgets: [
       container =>
-        instantsearch.widgets.refinementList({
+        instantsearch.widgets.panel({
+          templates: { header: 'facet1' },
+        })(instantsearch.widgets.refinementList)({
           container,
           attribute: 'facet1',
         }),
       container =>
-        instantsearch.widgets.refinementList({
+        instantsearch.widgets.panel({
+          templates: { header: 'facet2' },
+        })(instantsearch.widgets.refinementList)({
           container,
           attribute: 'facet2',
         }),
@@ -5611,7 +5620,7 @@ exports[`Templates React InstantSearch File content: public/index.html 1`] = `
     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://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
+  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\">
 
   <title>react-instantsearch-app</title>
 </head>
@@ -5713,10 +5722,11 @@ exports[`Templates React InstantSearch File content: src/App.js 1`] = `
 import algoliasearch from 'algoliasearch/lite';
 import {
   InstantSearch,
+  Configure,
   Hits,
   SearchBox,
-  Configure,
   DynamicWidgets,
+  Panel,
   RefinementList,
   Pagination,
   Highlight,
@@ -5743,12 +5753,16 @@ function App() {
 
       <div className=\\"container\\">
         <InstantSearch searchClient={searchClient} indexName=\\"indexName\\">
+          <Configure hitsPerPage={8} />
           <div className=\\"search-panel\\">
             <div className=\\"search-panel__filters\\">
-              <Configure facets={['*']} maxValuesPerFacet={20} />
               <DynamicWidgets fallbackWidget={RefinementList}>
-                <RefinementList attribute=\\"facet1\\" />
-                <RefinementList attribute=\\"facet2\\" />
+                <Panel header=\\"facet1\\">
+                  <RefinementList attribute=\\"facet1\\" />
+                </Panel>
+                <Panel header=\\"facet2\\">
+                  <RefinementList attribute=\\"facet2\\" />
+                </Panel>
               </DynamicWidgets>
             </div>
 
@@ -6025,6 +6039,7 @@ em {
 exports[`Templates React InstantSearch Hooks File content: src/App.tsx 1`] = `
 "import algoliasearch from 'algoliasearch/lite';
 import {
+  Configure,
   DynamicWidgets,
   Highlight,
   Hits,
@@ -6062,6 +6077,7 @@ export function App() {
 
       <div className=\\"container\\">
         <InstantSearch searchClient={searchClient} indexName=\\"indexName\\">
+          <Configure hitsPerPage={8} />
           <div className=\\"search-panel\\">
             <div className=\\"search-panel__filters\\">
               <DynamicWidgets fallback={RefinementList}>
@@ -8176,7 +8192,7 @@ exports[`Templates Vue InstantSearch File content: public/index.html 1`] = `
       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://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
+    <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\">
     <title>vue-instantsearch-app</title>
   </head>
   <body>
@@ -8208,12 +8224,18 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
 
     <div class=\\"container\\">
       <ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
+        <ais-configure :hits-per-page.camel=\\"8\\" />
         <div class=\\"search-panel\\">
           <div class=\\"search-panel__filters\\">
-            <ais-configure :facets=\\"['*']\\" :max-values-per-facet.camel=\\"20\\" />
             <ais-dynamic-widgets>
-              <ais-refinement-list attribute=\\"facet1\\" />
-              <ais-refinement-list attribute=\\"facet2\\" />
+              <ais-panel>
+                <template v-slot:header>facet1</template>
+                <ais-refinement-list attribute=\\"facet1\\" />
+              </ais-panel>
+              <ais-panel>
+                <template v-slot:header>facet2</template>
+                <ais-refinement-list attribute=\\"facet2\\" />
+              </ais-panel>
             </ais-dynamic-widgets>
           </div>
 
@@ -8443,7 +8465,7 @@ exports[`Templates Vue InstantSearch with Vue 3 File content: index.html 1`] = `
       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://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
+    <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\">
     <title>vue-instantsearch-app</title>
   </head>
   <body>
@@ -8487,11 +8509,18 @@ exports[`Templates Vue InstantSearch with Vue 3 File content: src/App.vue 1`] =
 
     <div class=\\"container\\">
       <ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
+        <ais-configure :hits-per-page.camel=\\"8\\" />
         <div class=\\"search-panel\\">
           <div class=\\"search-panel__filters\\">
             <ais-dynamic-widgets>
-              <ais-refinement-list attribute=\\"facet1\\" />
-              <ais-refinement-list attribute=\\"facet2\\" />
+              <ais-panel>
+                <template v-slot:header>facet1</template>
+                <ais-refinement-list attribute=\\"facet1\\" />
+              </ais-panel>
+              <ais-panel>
+                <template v-slot:header>facet2</template>
+                <ais-refinement-list attribute=\\"facet2\\" />
+              </ais-panel>
             </ais-dynamic-widgets>
           </div>
 
diff --git a/src/templates/Angular InstantSearch/src/app/app.component.html.hbs b/src/templates/Angular InstantSearch/src/app/app.component.html.hbs
index 71d94515c..4ec69e8d4 100644
--- a/src/templates/Angular InstantSearch/src/app/app.component.html.hbs	
+++ b/src/templates/Angular InstantSearch/src/app/app.component.html.hbs	
@@ -12,11 +12,14 @@
 
 <div class="container">
   <ais-instantsearch [config]="config">
+    <ais-configure [searchParameters]="{ hitsPerPage: 8 }"></ais-configure>
     <div class="search-panel">
       {{#if attributesForFaceting}}
       <div class="search-panel__filters">
         {{#each attributesForFaceting}}
-        <ais-refinement-list attribute="{{this}}"></ais-refinement-list>
+        <ais-panel header="{{this}}">
+          <ais-refinement-list attribute="{{this}}"></ais-refinement-list>
+        </ais-panel>
         {{/each}}
       </div>
 
diff --git a/src/templates/InstantSearch.js/index.html.hbs b/src/templates/InstantSearch.js/index.html.hbs
index 10bc9cf39..17dc67309 100644
--- a/src/templates/InstantSearch.js/index.html.hbs
+++ b/src/templates/InstantSearch.js/index.html.hbs
@@ -8,7 +8,7 @@
 
   <link rel="shortcut icon" href="./favicon.png">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
   <link rel="stylesheet" href="./src/index.css">
   <link rel="stylesheet" href="./src/app.css">
 
@@ -43,10 +43,9 @@
       <div class="search-panel__results">
         <div id="searchbox"></div>
         <div id="hits"></div>
+        <div id="pagination"></div>
       </div>
     </div>
-
-    <div id="pagination"></div>
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.10.5/dist/algoliasearch-lite.umd.js"></script>
diff --git a/src/templates/InstantSearch.js/src/app.js.hbs b/src/templates/InstantSearch.js/src/app.js.hbs
index 6e1725b51..c70e08aac 100644
--- a/src/templates/InstantSearch.js/src/app.js.hbs
+++ b/src/templates/InstantSearch.js/src/app.js.hbs
@@ -31,22 +31,26 @@ search.addWidgets([
     },
     {{/if}}
   }),
-  {{#if flags.dynamicWidgets}}
   instantsearch.widgets.configure({
-    facets: ['*'],
-    maxValuesPerFacet: 20,
+    hitsPerPage: 8,
   }),
+  {{#if flags.dynamicWidgets}}
   instantsearch.widgets.dynamicWidgets({
     container: '#dynamic-widgets',
     fallbackWidget({ container, attribute }) {
-      return instantsearch.widgets.refinementList({
+      return instantsearch.widgets.panel({ templates: { header: attribute } })(
+        instantsearch.widgets.refinementList
+      )({
         container,
         attribute,
       });
     },
     widgets: [
       {{#each attributesForFaceting}}
-      container => instantsearch.widgets.refinementList({
+      container =>
+        instantsearch.widgets.panel({
+          templates: { header: '{{this}}' },
+        })(instantsearch.widgets.refinementList)({
           container,
           attribute: '{{this}}',
         }),
@@ -55,7 +59,9 @@ search.addWidgets([
   }),
   {{else}}
   {{#each attributesForFaceting}}
-  instantsearch.widgets.refinementList({
+  instantsearch.widgets.panel({
+    templates: { header: '{{this}}' },
+  })(instantsearch.widgets.refinementList)({
     container: '#{{this}}-list',
     attribute: '{{this}}',
   }),
diff --git a/src/templates/React InstantSearch Hooks/src/App.tsx.hbs b/src/templates/React InstantSearch Hooks/src/App.tsx.hbs
index 4859e2d4d..4d2d9782c 100644
--- a/src/templates/React InstantSearch Hooks/src/App.tsx.hbs	
+++ b/src/templates/React InstantSearch Hooks/src/App.tsx.hbs	
@@ -1,5 +1,6 @@
 import algoliasearch from 'algoliasearch/lite';
 import {
+  Configure,
   {{#if flags.dynamicWidgets}}
   DynamicWidgets,
   {{#unless attributesForFaceting}}
@@ -46,6 +47,7 @@ export function App() {
 
       <div className="container">
         <InstantSearch searchClient={searchClient} indexName="{{indexName}}">
+          <Configure hitsPerPage={8} />
           <div className="search-panel">
             <div className="search-panel__filters">
               {{#if flags.dynamicWidgets}}
diff --git a/src/templates/React InstantSearch/public/index.html b/src/templates/React InstantSearch/public/index.html
index d7ae1321e..7070d16c8 100644
--- a/src/templates/React InstantSearch/public/index.html	
+++ b/src/templates/React InstantSearch/public/index.html	
@@ -13,7 +13,7 @@
     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://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
 
   <title>{{name}}</title>
 </head>
diff --git a/src/templates/React InstantSearch/src/App.js.hbs b/src/templates/React InstantSearch/src/App.js.hbs
index bab15fa6f..19e196a09 100644
--- a/src/templates/React InstantSearch/src/App.js.hbs	
+++ b/src/templates/React InstantSearch/src/App.js.hbs	
@@ -2,14 +2,16 @@ import React from 'react';
 import algoliasearch from 'algoliasearch/lite';
 import {
   InstantSearch,
+  Configure,
   Hits,
   SearchBox,
   {{#if flags.dynamicWidgets}}
-  Configure,
   DynamicWidgets,
+  Panel,
   RefinementList,
   {{else}}
   {{#if attributesForFaceting}}
+  Panel,
   RefinementList,
   {{/if}}
   {{/if}}
@@ -40,18 +42,22 @@ function App() {
 
       <div className="container">
         <InstantSearch searchClient={searchClient} indexName="{{indexName}}">
+          <Configure hitsPerPage={8} />
           <div className="search-panel">
             <div className="search-panel__filters">
               {{#if flags.dynamicWidgets}}
-              <Configure facets={['*']} maxValuesPerFacet={20} />
               <DynamicWidgets fallbackWidget={RefinementList}>
                 {{#each attributesForFaceting}}
-                <RefinementList attribute="{{this}}" />
+                <Panel header="{{this}}">
+                  <RefinementList attribute="{{this}}" />
+                </Panel>
                 {{/each}}
               </DynamicWidgets>
               {{else}}
               {{#each attributesForFaceting}}
-              <RefinementList attribute="{{this}}" />
+              <Panel header="{{this}}">
+                <RefinementList attribute="{{this}}" />
+              </Panel>
               {{/each}}
               {{/if}}
             </div>
diff --git a/src/templates/Vue InstantSearch with Vue 3/index.html b/src/templates/Vue InstantSearch with Vue 3/index.html
index 24a0d477d..bd11cfdc8 100644
--- a/src/templates/Vue InstantSearch with Vue 3/index.html	
+++ b/src/templates/Vue InstantSearch with Vue 3/index.html	
@@ -9,7 +9,7 @@
       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://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
     <title>{{name}}</title>
   </head>
   <body>
diff --git a/src/templates/Vue InstantSearch with Vue 3/src/App.vue b/src/templates/Vue InstantSearch with Vue 3/src/App.vue
index f0a1d94e0..3aeca314d 100644
--- a/src/templates/Vue InstantSearch with Vue 3/src/App.vue	
+++ b/src/templates/Vue InstantSearch with Vue 3/src/App.vue	
@@ -17,17 +17,24 @@
         :search-client="searchClient"
         index-name="{{indexName}}"
       >
+        <ais-configure :hits-per-page.camel="8" />
         <div class="search-panel">
           <div class="search-panel__filters">
             {{#if flags.dynamicWidgets}}
             <ais-dynamic-widgets>
               {{#each attributesForFaceting}}
-              <ais-refinement-list attribute="{{this}}" />
+              <ais-panel>
+                <template v-slot:header>{{this}}</template>
+                <ais-refinement-list attribute="{{this}}" />
+              </ais-panel>
               {{/each}}
             </ais-dynamic-widgets>
             {{else}}
             {{#each attributesForFaceting}}
-            <ais-refinement-list attribute="{{this}}" />
+            <ais-panel>
+              <template v-slot:header>{{this}}</template>
+              <ais-refinement-list attribute="{{this}}" />
+            </ais-panel>
             {{/each}}
             {{/if}}
           </div>
diff --git a/src/templates/Vue InstantSearch/public/index.html b/src/templates/Vue InstantSearch/public/index.html
index ec6630c54..7a05d9758 100644
--- a/src/templates/Vue InstantSearch/public/index.html	
+++ b/src/templates/Vue InstantSearch/public/index.html	
@@ -9,7 +9,7 @@
       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://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
     <title>{{name}}</title>
   </head>
   <body>
diff --git a/src/templates/Vue InstantSearch/src/App.vue b/src/templates/Vue InstantSearch/src/App.vue
index 2086dee52..e53808d0c 100644
--- a/src/templates/Vue InstantSearch/src/App.vue	
+++ b/src/templates/Vue InstantSearch/src/App.vue	
@@ -15,19 +15,28 @@
     </header>
 
     <div class="container">
-      <ais-instant-search :search-client="searchClient" index-name="{{indexName}}">
+      <ais-instant-search
+        :search-client="searchClient"
+        index-name="{{indexName}}"
+      >
+        <ais-configure :hits-per-page.camel="8" />
         <div class="search-panel">
           <div class="search-panel__filters">
             {{#if flags.dynamicWidgets}}
-            <ais-configure :facets="['*']" :max-values-per-facet.camel="20" />
             <ais-dynamic-widgets>
               {{#each attributesForFaceting}}
-              <ais-refinement-list attribute="{{this}}" />
+              <ais-panel>
+                <template v-slot:header>{{this}}</template>
+                <ais-refinement-list attribute="{{this}}" />
+              </ais-panel>
               {{/each}}
             </ais-dynamic-widgets>
             {{else}}
             {{#each attributesForFaceting}}
-            <ais-refinement-list attribute="{{this}}" />
+            <ais-panel>
+              <template v-slot:header>{{this}}</template>
+              <ais-refinement-list attribute="{{this}}" />
+            </ais-panel>
             {{/each}}
             {{/if}}
           </div>
@@ -41,7 +50,10 @@
               <template slot="item" slot-scope="{ item }">
                 <article>
                   <h1>
-                    <ais-highlight :hit="item" attribute="{{attributesToDisplay.[0]}}" />
+                    <ais-highlight
+                      :hit="item"
+                      attribute="{{attributesToDisplay.[0]}}"
+                    />
                   </h1>
                   {{#each attributesToDisplay}}
                   {{#unless @first}}
@@ -54,7 +66,7 @@
               </template>
             </ais-hits>
             {{else}}
-            <ais-hits/>
+            <ais-hits />
             {{/if}}
 
             <div class="pagination">