From 0e68e3ba91d76374798a5801b7b7c4d036c567ce Mon Sep 17 00:00:00 2001
From: Vaillant Samuel <samuel.vllnt@gmail.com>
Date: Mon, 1 Jul 2019 09:56:32 +0200
Subject: [PATCH 1/2] chore(storybook): export default hits template

---
 .storybook/playgrounds/default.ts | 40 ++++++++++++++++---------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/.storybook/playgrounds/default.ts b/.storybook/playgrounds/default.ts
index 2ec862def4..fd1153f638 100644
--- a/.storybook/playgrounds/default.ts
+++ b/.storybook/playgrounds/default.ts
@@ -1,5 +1,25 @@
 import instantsearch from '../../src/index';
 
+export const hitsItemTemplate = `
+<div
+  class="hits-image"
+  style="background-image: url({{image}})"
+></div>
+<article>
+  <header>
+    <strong>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</strong>
+  </header>
+  <p>
+    {{#helpers.snippet}}{ "attribute": "description" }{{/helpers.snippet}}
+  </p>
+  <footer>
+    <p>
+      <strong>{{price}}$</strong>
+    </p>
+  </footer>
+</article>
+`;
+
 function instantSearchPlayground({
   search,
   leftPanel,
@@ -93,25 +113,7 @@ function instantSearchPlayground({
     instantsearch.widgets.hits({
       container: hits,
       templates: {
-        item: `
-<div
-  class="hits-image"
-  style="background-image: url({{image}})"
-></div>
-<article>
-  <header>
-    <strong>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</strong>
-  </header>
-  <p>
-    {{#helpers.snippet}}{ "attribute": "description" }{{/helpers.snippet}}
-  </p>
-  <footer>
-    <p>
-      <strong>{{price}}$</strong>
-    </p>
-  </footer>
-</article>
-          `,
+        item: hitsItemTemplate,
       },
       cssClasses: {
         item: 'hits-item',

From 4d39da2431ba03e12134f52190821bcdec638310 Mon Sep 17 00:00:00 2001
From: Vaillant Samuel <samuel.vllnt@gmail.com>
Date: Mon, 1 Jul 2019 09:58:12 +0200
Subject: [PATCH 2/2] chore(storybook): add index stories

---
 stories/index.stories.ts | 106 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 stories/index.stories.ts

diff --git a/stories/index.stories.ts b/stories/index.stories.ts
new file mode 100644
index 0000000000..915628bea3
--- /dev/null
+++ b/stories/index.stories.ts
@@ -0,0 +1,106 @@
+import { storiesOf } from '@storybook/html';
+import { withHits, withLifecycle } from '../.storybook/decorators';
+import { hitsItemTemplate } from '../.storybook/playgrounds/default';
+
+storiesOf('Index', module)
+  .add(
+    'default',
+    withHits(({ search, container, instantsearch }) => {
+      const instantSearchPriceAscTitle = document.createElement('h3');
+      instantSearchPriceAscTitle.innerHTML =
+        '<code>instant_search_price_asc</code>';
+      const instantSearchPriceAscHits = document.createElement('div');
+      const instantSearchPriceAsc = document.createElement('div');
+
+      container.appendChild(instantSearchPriceAscTitle);
+      container.appendChild(instantSearchPriceAsc);
+      container.appendChild(instantSearchPriceAscHits);
+
+      const instantSearchRatingAscTitle = document.createElement('h3');
+      instantSearchRatingAscTitle.innerHTML =
+        '<code>instant_search_rating_asc</code>';
+      const instantSearchRatingAsc = document.createElement('div');
+      const instantSearchRatingAscHits = document.createElement('div');
+
+      container.appendChild(instantSearchRatingAscTitle);
+      container.appendChild(instantSearchRatingAsc);
+      container.appendChild(instantSearchRatingAscHits);
+
+      search.addWidgets([
+        instantsearch.widgets
+          .index({ indexName: 'instant_search_price_asc' })
+          .addWidgets([
+            instantsearch.widgets.configure({
+              // @TODO: remove once we support inheritance of SearchParameters
+              attributesToSnippet: ['description'],
+              hitsPerPage: 2,
+            }),
+            instantsearch.widgets.hits({
+              container: instantSearchPriceAscHits,
+              templates: {
+                item: hitsItemTemplate,
+              },
+              cssClasses: {
+                item: 'hits-item',
+              },
+            }),
+          ]),
+
+        instantsearch.widgets
+          .index({ indexName: 'instant_search_rating_asc' })
+          .addWidgets([
+            instantsearch.widgets.configure({
+              // @TODO: remove once we support inheritance of SearchParameters
+              attributesToSnippet: ['description'],
+              hitsPerPage: 1,
+            }),
+            instantsearch.widgets.hits({
+              container: instantSearchRatingAscHits,
+              templates: {
+                item: hitsItemTemplate,
+              },
+              cssClasses: {
+                item: 'hits-item',
+              },
+            }),
+          ]),
+      ]);
+    })
+  )
+  .add(
+    'with add/remove',
+    withHits(({ search, container, instantsearch }) => {
+      const lifecycle = document.createElement('div');
+      const preview = document.createElement('div');
+
+      container.appendChild(lifecycle);
+      container.appendChild(preview);
+
+      const instantSearchPriceAscHits = document.createElement('div');
+      const instantSearchPriceAsc = document.createElement('div');
+
+      preview.appendChild(instantSearchPriceAsc);
+      preview.appendChild(instantSearchPriceAscHits);
+
+      withLifecycle(search, lifecycle, () =>
+        instantsearch.widgets
+          .index({ indexName: 'instant_search_price_asc' })
+          .addWidgets([
+            instantsearch.widgets.configure({
+              // @TODO: remove once we support inheritance of SearchParameters
+              attributesToSnippet: ['description'],
+              hitsPerPage: 2,
+            }),
+            instantsearch.widgets.hits({
+              container: instantSearchPriceAscHits,
+              templates: {
+                item: hitsItemTemplate,
+              },
+              cssClasses: {
+                item: 'hits-item',
+              },
+            }),
+          ])
+      );
+    })
+  );