feat: Implement transformItems API

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'
+            );
+          },
+        });
+      })
     );
 };

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] } },
+          },
+        }
+      )
     );
 };

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();
       })
     )

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)`,
+              })),
+          })
+        );
+      })
     );
 };

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)`,
+              })),
+          })
+        );
+      })
     );
 };

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(

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)`,
+              })),
+          })
+        );
+      })
     );
 };

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 => {

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)`,
+              })),
+          })
+        );
+      })
+    );
 };

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)`,
+            })),
+        })
+      );
+    })
+  );
 };