feat(react-instantsearch): add Carousel layout component

examples/react/getting-started/index.html

@@ -9,15 +9,6 @@
 
     <link rel="shortcut icon" href="favicon.png" />
 
-    <!--
-      Do not use @8 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/js/#load-the-styles
-    -->
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/satellite-min.css"
-    />
-
     <title>React InstantSearch — Getting started</title>
   </head>
 

examples/react/getting-started/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "algoliasearch": "4.23.2",
     "instantsearch.js": "4.73.4",
+    "instantsearch.css": "8.4.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-instantsearch": "7.12.4"

examples/react/getting-started/products.html

@@ -9,15 +9,6 @@
 
     <link rel="shortcut icon" href="favicon.png" />
 
-    <!--
-      Do not use @8 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/js/#load-the-styles
-    -->
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/satellite-min.css"
-    />
-
     <title>React InstantSearch — Getting started</title>
   </head>
 

examples/react/getting-started/src/App.css

@@ -61,7 +61,7 @@ em {
   flex: 3;
 }
 
-.searchbox {
+#searchbox {
   margin-bottom: 2rem;
 }
 
@@ -87,16 +87,10 @@ em {
   flex-shrink: 0;
 }
 
-.ais-TrendingItems-list,
-.ais-RelatedProducts-list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1rem;
-}
-
 .ais-TrendingItems-item,
 .ais-RelatedProducts-item {
   align-items: start;
+  height: 100%;
 }
 
 .ais-TrendingItems-item img,
@@ -113,3 +107,50 @@ em {
   height: 100%;
   justify-content: space-between;
 }
+
+.ais-TrendingItems-item h2,
+.ais-RelatedProducts-item h2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.2;
+}
+
+.ais-Carousel-item {
+  padding: 0.5rem;
+}
+
+.ais-Carousel-list {
+  margin: -0.5rem;
+  grid-auto-columns: calc(22% - 0.5rem);
+}
+
+.ais-Carousel::before,
+.ais-Carousel::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0.5rem;
+  display: block;
+  background: rgb(255, 255, 255);
+  content: '';
+}
+
+.ais-Carousel::before {
+  left: -0.5rem;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.ais-Carousel::after {
+  right: -0.5rem;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+}

examples/react/getting-started/src/App.tsx

@@ -10,11 +10,13 @@ import {
   RefinementList,
   SearchBox,
   TrendingItems,
+  Carousel,
 } from 'react-instantsearch';
 
 import { Panel } from './Panel';
 
 import './App.css';
+import 'instantsearch.css/themes/satellite.css';
 
 const searchClient = algoliasearch(
   'latency',
@@ -58,7 +60,11 @@ export function App() {
                 <Pagination />
               </div>
               <div>
-                <TrendingItems itemComponent={ItemComponent} limit={4} />
+                <TrendingItems
+                  itemComponent={ItemComponent}
+                  limit={6}
+                  layoutComponent={Carousel}
+                />
               </div>
             </div>
           </div>

examples/react/getting-started/src/Product.tsx

@@ -6,9 +6,11 @@ import {
   Hits,
   InstantSearch,
   RelatedProducts,
+  Carousel,
 } from 'react-instantsearch';
 
 import './App.css';
+import 'instantsearch.css/themes/satellite.css';
 
 const searchClient = algoliasearch(
   'latency',
@@ -48,7 +50,8 @@ export function Product({ pid }: { pid: string }) {
             itemComponent={ItemComponent}
             emptyComponent={() => <></>}
             objectIDs={[pid]}
-            limit={4}
+            limit={6}
+            layoutComponent={Carousel}
           />
         </InstantSearch>
       </div>

packages/instantsearch-ui-components/src/types/Recommend.ts

@@ -40,7 +40,7 @@ export type RecommendTranslations = {
 
 export type RecommendLayoutProps<
   TItem extends RecordWithObjectID,
-  TTranslations extends Record<string, string>,
+  TTranslations extends Partial<Record<string, string>>,
   TClassNames extends Record<string, string>
 > = {
   classNames: TClassNames;
@@ -57,7 +57,8 @@ export type RecommendLayoutProps<
 
 export type RecommendComponentProps<
   TObject,
-  TComponentProps extends Record<string, unknown> = Record<string, unknown>
+  TComponentProps extends Record<string, unknown> = Record<string, unknown>,
+  TLayoutTranslations extends Record<string, string> = Record<string, string>
 > = {
   itemComponent?: (
     props: RecommendItemComponentProps<RecordWithObjectID<TObject>> &
@@ -75,7 +76,7 @@ export type RecommendComponentProps<
   layout?: (
     props: RecommendLayoutProps<
       RecordWithObjectID<TObject>,
-      Required<RecommendTranslations>,
+      Partial<TLayoutTranslations>,
       Record<string, string>
     > &
       TComponentProps

packages/react-instantsearch/src/index.ts

@@ -1,2 +1,3 @@
 export * from 'react-instantsearch-core';
 export * from './widgets';
+export * from './templates';

packages/react-instantsearch/src/templates/Carousel.tsx

@@ -0,0 +1,36 @@
+import {
+  createCarouselComponent,
+  generateCarouselId,
+} from 'instantsearch-ui-components';
+import React, { createElement, Fragment, useRef } from 'react';
+
+import type {
+  CarouselProps as CarouselUiProps,
+  Pragma,
+} from 'instantsearch-ui-components';
+
+const CarouselUiComponent = createCarouselComponent({
+  createElement: createElement as Pragma,
+  Fragment,
+});
+
+export type CarouselProps<TObject extends Record<string, unknown>> = Omit<
+  CarouselUiProps<TObject>,
+  'listRef' | 'nextButtonRef' | 'previousButtonRef' | 'carouselIdRef'
+>;
+
+export function Carousel<TObject extends Record<string, unknown>>(
+  props: CarouselProps<TObject>
+) {
+  const carouselRefs: Pick<
+    CarouselUiProps<TObject>,
+    'listRef' | 'nextButtonRef' | 'previousButtonRef' | 'carouselIdRef'
+  > = {
+    listRef: useRef(null),
+    nextButtonRef: useRef(null),
+    previousButtonRef: useRef(null),
+    carouselIdRef: useRef(generateCarouselId()),
+  };
+
+  return <CarouselUiComponent {...carouselRefs} {...props} />;
+}