feat(react-instantsearch): add Carousel layout component (#6321)

algolia · Aug 19, 2024 · 41b0c96 · 41b0c96
1 parent 62b6e4b
commit 41b0c96
Show file tree

Hide file tree

Showing 25 changed files with 1,570 additions and 55 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -22,7 +22,7 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "64 kB"
+      "maxSize": "64.5 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",

diff --git a/examples/react/getting-started/index.html b/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>
 

diff --git a/examples/react/getting-started/package.json b/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"

diff --git a/examples/react/getting-started/products.html b/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>
 

diff --git a/examples/react/getting-started/src/App.css b/examples/react/getting-started/src/App.css
@@ -87,16 +87,22 @@ 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 {
+  background: none !important;
+  align-items: stretch !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+}
+
+.ais-TrendingItems-item > div,
+.ais-RelatedProducts-item > div {
   align-items: start;
+  background: #fff;
+  align-items: center;
+  padding: 1.5rem;
+  display: flex;
+  box-shadow: 0 0 0 1px #23263b0d, 0 1px 3px #23263b26;
 }
 
 .ais-TrendingItems-item img,
@@ -113,3 +119,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 !important;
+}
+
+.ais-Carousel-list {
+  margin: -0.5rem !important;
+  grid-auto-columns: calc(22% - 0.5rem) !important;
+}
+
+.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%
+  );
+}
diff --git a/examples/react/getting-started/src/App.tsx b/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>
@@ -92,12 +98,14 @@ function HitComponent({ hit }: { hit: HitType }) {
 
 function ItemComponent({ item }: { item: Hit }) {
   return (
-    <article>
-      <div>
-        <img src={item.image} />
-        <h2>{item.name}</h2>
-      </div>
-      <a href={`/products.html?pid=${item.objectID}`}>See product</a>
-    </article>
+    <div>
+      <article>
+        <div>
+          <img src={item.image} />
+          <h2>{item.name}</h2>
+        </div>
+        <a href={`/products.html?pid=${item.objectID}`}>See product</a>
+      </article>
+    </div>
   );
 }
diff --git a/examples/react/getting-started/src/Product.tsx b/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>
@@ -76,12 +79,14 @@ function HitComponent({ hit }: { hit: HitType }) {
 
 function ItemComponent({ item }: { item: HitType }) {
   return (
-    <article>
-      <div>
-        <img src={item.image} />
-        <h2>{item.name}</h2>
-      </div>
-      <a href={`/products.html?pid=${item.objectID}`}>See product</a>
-    </article>
+    <div>
+      <article>
+        <div>
+          <img src={item.image} />
+          <h2>{item.name}</h2>
+        </div>
+        <a href={`/products.html?pid=${item.objectID}`}>See product</a>
+      </article>
+    </div>
   );
 }
diff --git a/packages/instantsearch-ui-components/src/components/FrequentlyBoughtTogether.tsx b/packages/instantsearch-ui-components/src/components/FrequentlyBoughtTogether.tsx
@@ -93,7 +93,6 @@ export function createFrequentlyBoughtTogetherComponent({
 
         <Layout
           classNames={cssClasses}
-          translations={translations}
           itemComponent={ItemComponent}
           items={items}
           sendEvent={sendEvent}

diff --git a/packages/instantsearch-ui-components/src/components/LookingSimilar.tsx b/packages/instantsearch-ui-components/src/components/LookingSimilar.tsx
@@ -90,7 +90,6 @@ export function createLookingSimilarComponent({
 
         <Layout
           classNames={cssClasses}
-          translations={translations}
           itemComponent={ItemComponent}
           items={items}
           sendEvent={sendEvent}

diff --git a/packages/instantsearch-ui-components/src/components/RelatedProducts.tsx b/packages/instantsearch-ui-components/src/components/RelatedProducts.tsx
@@ -90,7 +90,6 @@ export function createRelatedProductsComponent({
 
         <Layout
           classNames={cssClasses}
-          translations={translations}
           itemComponent={ItemComponent}
           items={items}
           sendEvent={sendEvent}

diff --git a/packages/instantsearch-ui-components/src/components/TrendingItems.tsx b/packages/instantsearch-ui-components/src/components/TrendingItems.tsx
@@ -90,7 +90,6 @@ export function createTrendingItemsComponent({
 
         <Layout
           classNames={cssClasses}
-          translations={translations}
           itemComponent={ItemComponent}
           items={items}
           sendEvent={sendEvent}

diff --git a/packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx b/packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx
@@ -2,19 +2,14 @@
 
 import type {
   RecommendClassNames,
-  RecommendTranslations,
   RecordWithObjectID,
   Renderer,
   RecommendLayoutProps,
 } from '../../types';
 
 export function createListComponent({ createElement }: Renderer) {
   return function List<TItem extends RecordWithObjectID>(
-    userProps: RecommendLayoutProps<
-      TItem,
-      RecommendTranslations,
-      Partial<RecommendClassNames>
-    >
+    userProps: RecommendLayoutProps<TItem, Partial<RecommendClassNames>>
   ) {
     const {
       classNames = {},

diff --git a/packages/instantsearch-ui-components/src/types/Recommend.ts b/packages/instantsearch-ui-components/src/types/Recommend.ts
@@ -40,7 +40,6 @@ export type RecommendTranslations = {
 
 export type RecommendLayoutProps<
   TItem extends RecordWithObjectID,
-  TTranslations extends Record<string, string>,
   TClassNames extends Record<string, string>
 > = {
   classNames: TClassNames;
@@ -51,7 +50,6 @@ export type RecommendLayoutProps<
       TComponentProps
   ) => JSX.Element;
   items: TItem[];
-  translations: TTranslations;
   sendEvent: SendEventForHits;
 };
 
@@ -75,7 +73,6 @@ export type RecommendComponentProps<
   layout?: (
     props: RecommendLayoutProps<
       RecordWithObjectID<TObject>,
-      Required<RecommendTranslations>,
       Record<string, string>
     > &
       TComponentProps

diff --git a/packages/react-instantsearch/src/components/Carousel.tsx b/packages/react-instantsearch/src/components/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} />;
+}