feat: Implement transformItems API (#3042)

* feat(infinite-hits): implement `transformItems` * feat(hits): implement `transformItems` * feat(breadcrumb): implement `transformItems` * feat(hierarchical-menu): implement `transformItems` * feat(menu): implement `transformItems` * feat(menu-select): implement `transformItems` * feat(refinement-list): implement `transformItems` * feat(geo-search): implement `transformItems` * feat(sort-by): implement `transformItems` * feat(hits-per-page): implement `transformItems` * feat(current-refined-values): implement `transformItems` * feat(numeric-refinement-list): implement `transformItems` * feat(numeric-selector): implement `transformItems` * refactor(hits): use default identity function for `transformItems` * refactor(infinite-hits): use default identity function for `transformItems` * test(hits-per-page): migrate to Jest * test(menu): migrate to Jest * test(numeric-refinement-list): migrate to Jest * test(sort-by-selector): migrate to Jest * test(infinite-hits): migrate to Jest * test(refinement-list): migrate to Jest * test(hits): migrate to Jest * test(hierarchical-menu): migrate to Jest * test(current-refined-values): migrate to Jest and remove Lodash imports * test(refinement-list): update snapshots
algolia · Aug 7, 2018 · 1510a94 · 1510a94
1 parent d0ba9a2
commit 1510a94
Show file tree

Hide file tree

Showing 70 changed files with 2,908 additions and 705 deletions.
diff --git a/dev/app/builtin/stories/breadcrumb.stories.js b/dev/app/builtin/stories/breadcrumb.stories.js
@@ -135,5 +135,40 @@ export default () => {
           })
         );
       })
+    )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        container.innerHTML = `
+          <div id="hierarchicalMenu"></div>
+          <div id="breadcrumb"></div>
+        `;
+
+        window.search.addWidget(
+          instantsearch.widgets.breadcrumb({
+            container: '#breadcrumb',
+            attributes: [
+              'hierarchicalCategories.lvl0',
+              'hierarchicalCategories.lvl1',
+              'hierarchicalCategories.lvl2',
+            ],
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                name: `${item.name} (transformed)`,
+              })),
+          })
+        );
+
+        // Custom Widget to toggle refinement
+        window.search.addWidget({
+          init({ helper }) {
+            helper.toggleRefinement(
+              'hierarchicalCategories.lvl0',
+              'Cameras & Camcorders > Digital Cameras'
+            );
+          },
+        });
+      })
     );
 };
diff --git a/dev/app/builtin/stories/current-refined-values.stories.js b/dev/app/builtin/stories/current-refined-values.stories.js
@@ -80,5 +80,30 @@ export default () => {
           },
         }
       )
+    )
+    .add(
+      'with transformed items',
+      wrapWithHits(
+        container => {
+          window.search.addWidget(
+            instantsearch.widgets.currentRefinedValues({
+              container,
+              clearsQuery: true,
+              transformItems: items =>
+                items.map(item => ({
+                  ...item,
+                  name: `${item.name} (transformed)`,
+                })),
+            })
+          );
+        },
+        {
+          searchParameters: {
+            disjunctiveFacetsRefinements: { brand: ['Apple', 'Samsung'] },
+            disjunctiveFacets: ['brand'],
+            numericRefinements: { price: { '>=': [100] } },
+          },
+        }
+      )
     );
 };
diff --git a/dev/app/builtin/stories/geo-search.stories.js b/dev/app/builtin/stories/geo-search.stories.js
@@ -61,6 +61,30 @@ export default () => {
           })
         );
 
+        start();
+      })
+    )
+  ).add(
+    'with transformed items',
+    wrapWithHitsAndConfiguration((container, start) =>
+      injectGoogleMaps(() => {
+        container.style.height = '600px';
+
+        window.search.addWidget(
+          instantsearch.widgets.geoSearch({
+            googleReference: window.google,
+            container,
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                _geoloc: {
+                  lat: item._geoloc.lat + 2,
+                  lng: item._geoloc.lng + 2,
+                },
+              })),
+          })
+        );
+
         start();
       })
     )

diff --git a/dev/app/builtin/stories/hierarchical-menu.stories.js b/dev/app/builtin/stories/hierarchical-menu.stories.js
@@ -84,5 +84,25 @@ export default () => {
           })
         );
       })
+    )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.hierarchicalMenu({
+            container,
+            attributes: [
+              'hierarchicalCategories.lvl0',
+              'hierarchicalCategories.lvl1',
+              'hierarchicalCategories.lvl2',
+            ],
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+              })),
+          })
+        );
+      })
     );
 };
diff --git a/dev/app/builtin/stories/hits-per-page-selector.stories.js b/dev/app/builtin/stories/hits-per-page-selector.stories.js
@@ -37,5 +37,25 @@ export default () => {
           })
         );
       })
+    )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.hitsPerPageSelector({
+            container,
+            items: [
+              { value: 3, label: '3 per page' },
+              { value: 5, label: '5 per page' },
+              { value: 10, label: '10 per page' },
+            ],
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+              })),
+          })
+        );
+      })
     );
 };
diff --git a/dev/app/builtin/stories/hits.stories.js b/dev/app/builtin/stories/hits.stories.js
@@ -14,6 +14,21 @@ export default () => {
         window.search.addWidget(instantsearch.widgets.hits({ container }));
       })
     )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.hits({
+            container,
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                name: `${item.name} (transformed)`,
+              })),
+          })
+        );
+      })
+    )
     .add(
       'with highlighted array',
       wrapWithHits(

diff --git a/dev/app/builtin/stories/infinite-hits.stories.js b/dev/app/builtin/stories/infinite-hits.stories.js
@@ -44,5 +44,24 @@ export default () => {
           })
         );
       })
+    )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.infiniteHits({
+            container,
+            showMoreLabel: 'Show more',
+            templates: {
+              item: '{{name}}',
+            },
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                name: `${item.name} (transformed)`,
+              })),
+          })
+        );
+      })
     );
 };
diff --git a/dev/app/builtin/stories/menu.stories.js b/dev/app/builtin/stories/menu.stories.js
@@ -19,6 +19,22 @@ export default () => {
         );
       })
     )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.menu({
+            container,
+            attributeName: 'categories',
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+              })),
+          })
+        );
+      })
+    )
     .add(
       'with show more and header',
       wrapWithHits(container => {

diff --git a/dev/app/builtin/stories/numeric-refinement-list.stories.js b/dev/app/builtin/stories/numeric-refinement-list.stories.js
@@ -7,32 +7,66 @@ import { wrapWithHits } from '../../utils/wrap-with-hits.js';
 const stories = storiesOf('NumericRefinementList');
 
 export default () => {
-  stories.add(
-    'default',
-    wrapWithHits(container => {
-      window.search.addWidget(
-        instantsearch.widgets.numericRefinementList({
-          container,
-          attributeName: 'price',
-          operator: 'or',
-          options: [
-            { name: 'All' },
-            { end: 4, name: 'less than 4' },
-            { start: 4, end: 4, name: '4' },
-            { start: 5, end: 10, name: 'between 5 and 10' },
-            { start: 10, name: 'more than 10' },
-          ],
-          cssClasses: {
-            header: 'facet-title',
-            link: 'facet-value',
-            count: 'facet-count pull-right',
-            active: 'facet-active',
-          },
-          templates: {
-            header: 'Numeric refinement list (price)',
-          },
-        })
-      );
-    })
-  );
+  stories
+    .add(
+      'default',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.numericRefinementList({
+            container,
+            attributeName: 'price',
+            operator: 'or',
+            options: [
+              { name: 'All' },
+              { end: 4, name: 'less than 4' },
+              { start: 4, end: 4, name: '4' },
+              { start: 5, end: 10, name: 'between 5 and 10' },
+              { start: 10, name: 'more than 10' },
+            ],
+            cssClasses: {
+              header: 'facet-title',
+              link: 'facet-value',
+              count: 'facet-count pull-right',
+              active: 'facet-active',
+            },
+            templates: {
+              header: 'Numeric refinement list (price)',
+            },
+          })
+        );
+      })
+    )
+    .add(
+      'with transformed hits',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.numericRefinementList({
+            container,
+            attributeName: 'price',
+            operator: 'or',
+            options: [
+              { name: 'All' },
+              { end: 4, name: 'less than 4' },
+              { start: 4, end: 4, name: '4' },
+              { start: 5, end: 10, name: 'between 5 and 10' },
+              { start: 10, name: 'more than 10' },
+            ],
+            cssClasses: {
+              header: 'facet-title',
+              link: 'facet-value',
+              count: 'facet-count pull-right',
+              active: 'facet-active',
+            },
+            templates: {
+              header: 'Numeric refinement list (price)',
+            },
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+              })),
+          })
+        );
+      })
+    );
 };
diff --git a/dev/app/builtin/stories/numeric-selector.stories.js b/dev/app/builtin/stories/numeric-selector.stories.js
@@ -45,4 +45,29 @@ export default () => {
       );
     })
   );
+  stories.add(
+    'with transformed items',
+    wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.numericSelector({
+          container,
+          operator: '=',
+          attributeName: 'rating',
+          options: [
+            { label: 'No rating selected', value: undefined },
+            { label: 'Rating: 5', value: 5 },
+            { label: 'Rating: 4', value: 4 },
+            { label: 'Rating: 3', value: 3 },
+            { label: 'Rating: 2', value: 2 },
+            { label: 'Rating: 1', value: 1 },
+          ],
+          transformItems: items =>
+            items.map(item => ({
+              ...item,
+              label: `${item.label} (transformed)`,
+            })),
+        })
+      );
+    })
+  );
 };