feat(recommend): introduce FrequentlyBoughtTogether UI component (#…

…6114)

Co-authored-by: Dhaya <154633+dhayab@users.noreply.github.com>
Co-authored-by: Aymeric Giraudet <aymeric.giraudet@algolia.com>
Co-authored-by: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>

.gitignore

@@ -30,6 +30,7 @@ scripts/*/CHANGELOG.md
 # private files
 .env
 .idea/
+.vscode/
 
 # Caches
 .eslintcache

babel.config.js

@@ -79,6 +79,9 @@ module.exports = (api) => {
             // false positive (babel doesn't know types)
             // this is actually only called on arrays
             'String.prototype.includes',
+
+            // false positive (spread)
+            'Object.getOwnPropertyDescriptors',
           ];
           if (defaultShouldInject && !exclude.includes(name)) {
             throw new Error(

bundlesize.config.json

@@ -26,7 +26,7 @@
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
-      "maxSize": "66.75 kB"
+      "maxSize": "67 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",

packages/instantsearch-ui-components/src/components/FrequentlyBoughtTogether.tsx

@@ -0,0 +1,85 @@
+/** @jsx createElement */
+
+import { cx } from '../lib';
+
+import { createDefaultHeaderComponent } from './recommend-shared/DefaultHeader';
+import { createListViewComponent } from './recommend-shared/ListView';
+
+import type {
+  RecommendTranslations,
+  Renderer,
+  ComponentProps,
+  RecommendComponentProps,
+} from '../types';
+
+export type FrequentlyBoughtTogetherProps<
+  TObject,
+  TComponentProps extends Record<string, unknown> = Record<string, unknown>
+> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
+
+export function createFrequentlyBoughtTogetherComponent({
+  createElement,
+  Fragment,
+}: Renderer) {
+  return function FrequentlyBoughtTogether<TObject>(
+    userProps: FrequentlyBoughtTogetherProps<TObject>
+  ) {
+    const {
+      classNames = {},
+      fallbackComponent: FallbackComponent = () => null,
+      headerComponent: HeaderComponent = createDefaultHeaderComponent({
+        createElement,
+        Fragment,
+      }),
+      itemComponent: ItemComponent,
+      view: View = createListViewComponent({ createElement, Fragment }),
+      items,
+      status,
+      translations: userTranslations,
+      sendEvent,
+      ...props
+    } = userProps;
+
+    const translations: Required<RecommendTranslations> = {
+      title: 'Frequently bought together',
+      sliderLabel: 'Frequently bought together products',
+      ...userTranslations,
+    };
+
+    if (items.length === 0 && status === 'idle') {
+      return <FallbackComponent />;
+    }
+
+    return (
+      <section
+        {...props}
+        className={cx('ais-FrequentlyBoughtTogether', classNames.root)}
+      >
+        <HeaderComponent
+          classNames={{
+            ...classNames,
+            title: cx('ais-FrequentlyBoughtTogether-title', classNames.title),
+          }}
+          recommendations={items}
+          translations={translations}
+        />
+
+        <View
+          classNames={{
+            ...classNames,
+            container: cx(
+              'ais-FrequentlyBoughtTogether-container',
+              classNames.container
+            ),
+            list: cx('ais-FrequentlyBoughtTogether-list', classNames.list),
+            item: cx('ais-FrequentlyBoughtTogether-item', classNames.item),
+          }}
+          translations={translations}
+          itemComponent={ItemComponent}
+          items={items}
+          sendEvent={sendEvent}
+        />
+      </section>
+    );
+  };
+}

packages/instantsearch-ui-components/src/components/Hits.tsx

@@ -1,13 +1,12 @@
 /** @jsx createElement */
 import { cx } from '../lib';
 
-import type { ComponentProps, Renderer } from '../types';
+import type { ComponentProps, Renderer, SendEventForHits } from '../types';
 
 // Should be imported from a shared package in the future
 type Hit = Record<string, unknown> & {
   objectID: string;
 };
-type SendEventForHits = (...props: unknown[]) => void;
 type Banner = {
   image: {
     urls: Array<{