algolia
diff --git a/‎examples/react/next-app-router-with-composition/.gitignore‎
Lines changed: 34 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/.gitignore‎
Lines changed: 34 additions & 0 deletions
diff --git a/‎examples/react/next-app-router-with-composition/.oxlintrc.json‎
Lines changed: 7 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/.oxlintrc.json‎
Lines changed: 7 additions & 0 deletions
diff --git a/‎examples/react/next-app-router-with-composition/app/Search.tsx‎
Lines changed: 173 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/app/Search.tsx‎
Lines changed: 173 additions & 0 deletions
diff --git a/‎examples/react/next-app-router-with-composition/app/favicon.ico‎
25.3 KB b/‎examples/react/next-app-router-with-composition/app/favicon.ico‎
25.3 KB
diff --git a/‎examples/react/next-app-router-with-composition/app/globals.css‎
Lines changed: 22 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/app/globals.css‎
Lines changed: 22 additions & 0 deletions
diff --git a/‎examples/react/next-app-router-with-composition/app/layout.tsx‎
Lines changed: 20 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/app/layout.tsx‎
Lines changed: 20 additions & 0 deletions
diff --git a/‎examples/react/next-app-router-with-composition/app/page.tsx‎
Lines changed: 13 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/app/page.tsx‎
Lines changed: 13 additions & 0 deletions
diff --git a/‎examples/react/next-app-router-with-composition/components/Panel.tsx‎
Lines changed: 19 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/components/Panel.tsx‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎examples/react/next-app-router-with-composition/eslint.config.js‎
Lines changed: 15 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/eslint.config.js‎
Lines changed: 15 additions & 0 deletions
diff --git a/‎examples/react/next-app-router-with-composition/lib/client.tsx‎
Lines changed: 9 additions & 0 deletions b/‎examples/react/next-app-router-with-composition/lib/client.tsx‎
Lines changed: 9 additions & 0 deletions
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
@@ -0,0 +1,7 @@
+{
+  "ignorePatterns": [
+    ".next",
+    "node_modules",
+    "next-env.d.ts"
+  ]
+}
@@ -0,0 +1,173 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Configure,
+  Feeds,
+  Highlight,
+  Hits,
+  Pagination,
+  SearchBox,
+  useFeeds,
+} from 'react-instantsearch';
+import { InstantSearchNext } from 'react-instantsearch-nextjs';
+
+import { Panel } from '../components/Panel';
+import { client } from '../lib/client';
+
+import type { Hit as AlgoliaHit } from 'instantsearch.js';
+
+const compositionID = 'comp1774447423386___products';
+
+export default function Search() {
+  return (
+    <InstantSearchNext
+      // @ts-expect-error compositionClient return type doesn't fully match SearchClient yet
+      searchClient={client}
+      compositionID={compositionID}
+      routing
+      insights={true}
+    >
+      <Configure hitsPerPage={20} />
+
+      <div className="Container">
+        <div>
+          <Panel header="Search">
+            <SearchBox placeholder="Product, brand, color, …" />
+          </Panel>
+        </div>
+
+        <div>
+          <TabbedFeeds />
+
+          <Pagination padding={2} showFirst={false} showLast={false} />
+        </div>
+      </div>
+    </InstantSearchNext>
+  );
+}
+
+function TabbedFeeds() {
+  const { feedIDs } = useFeeds({ searchScope: 'global' });
+  const [activeTab, setActiveTab] = useState<string | null>(null);
+  const current = activeTab ?? feedIDs[0] ?? null;
+
+  return (
+    <>
+      {feedIDs.length > 0 && (
+        <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+          {feedIDs.map((id) => (
+            <button
+              key={id}
+              style={{
+                padding: '8px 16px',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                background: id === current ? '#5468ff' : '#fff',
+                color: id === current ? '#fff' : '#333',
+                cursor: 'pointer',
+                fontWeight: id === current ? 'bold' : 'normal',
+              }}
+              onClick={() => setActiveTab(id)}
+            >
+              {id || 'All results'}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <Feeds
+        searchScope="global"
+        renderFeed={({ feedID }) => (
+          <div style={{ display: feedID === current ? undefined : 'none' }}>
+            <FeedHits feedID={feedID} />
+          </div>
+        )}
+      />
+    </>
+  );
+}
+
+function FeedHits({ feedID }: { feedID: string }) {
+  switch (feedID) {
+    case 'products':
+      return <Hits hitComponent={ProductHit} />;
+    case 'Fashion':
+      return <Hits hitComponent={FashionHit} />;
+    case 'Amazon':
+      return <Hits hitComponent={AmazonHit} />;
+    default:
+      return <Hits hitComponent={ProductHit} />;
+  }
+}
+
+type ProductHitType = AlgoliaHit<{
+  title: string;
+  author: string[];
+  largeImage: string;
+}>;
+
+function ProductHit({ hit }: { hit: ProductHitType }) {
+  return (
+    <article className="hit">
+      <header className="hit-image-container">
+        <img src={hit.largeImage} alt={hit.title} className="hit-image" />
+      </header>
+      <div className="hit-info-container">
+        <p className="hit-category">{hit.author?.join(', ')}</p>
+        <h1>
+          <Highlight attribute="title" highlightedTagName="mark" hit={hit} />
+        </h1>
+      </div>
+    </article>
+  );
+}
+
+type FashionHitType = AlgoliaHit<{
+  name: string;
+  image: string;
+  brand: string;
+  price: number;
+  currency: string;
+}>;
+
+function FashionHit({ hit }: { hit: FashionHitType }) {
+  return (
+    <article className="hit">
+      <header className="hit-image-container">
+        <img src={hit.image} alt={hit.name} className="hit-image" />
+      </header>
+      <div className="hit-info-container">
+        <p className="hit-category">{hit.brand}</p>
+        <h1>
+          <Highlight attribute="name" highlightedTagName="mark" hit={hit} />
+        </h1>
+        <p className="hit-description">
+          {hit.price} {hit.currency}
+        </p>
+      </div>
+    </article>
+  );
+}
+
+type AmazonHitType = AlgoliaHit<{
+  product_title: string;
+  product_brand: string;
+}>;
+
+function AmazonHit({ hit }: { hit: AmazonHitType }) {
+  return (
+    <article className="hit">
+      <div className="hit-info-container">
+        <p className="hit-category">{hit.product_brand}</p>
+        <h1>
+          <Highlight
+            attribute="product_title"
+            highlightedTagName="mark"
+            hit={hit}
+          />
+        </h1>
+      </div>
+    </article>
+  );
+}
@@ -0,0 +1,22 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+body {
+  padding: 0.5rem;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.Container {
+  display: grid;
+  align-items: flex-start;
+  grid-template-columns: minmax(min-content, 200px) 1fr;
+  gap: 0.5rem;
+}
@@ -0,0 +1,20 @@
+import './globals.css';
+import 'instantsearch.css/themes/satellite-min.css';
+import React from 'react';
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { responsesCache } from '../lib/client';
+
+import Search from './Search';
+
+export const dynamic = 'force-dynamic';
+
+export default function Page() {
+  responsesCache.clear();
+
+  return <Search />;
+}
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export function Panel({
+  children,
+  header,
+  footer,
+}: {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  return (
+    <div className="ais-Panel">
+      {header && <div className="ais-Panel-header">{header}</div>}
+      <div className="ais-Panel-body">{children}</div>
+      {footer && <div className="ais-Panel-footer">{footer}</div>}
+    </div>
+  );
+}
@@ -0,0 +1,15 @@
+const nextPlugin = require('eslint-config-next');
+
+module.exports = [
+  ...nextPlugin,
+  {
+    rules: {
+      // This rule is not able to find the `pages/` folder in the monorepo.
+      '@next/next/no-html-link-for-pages': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'spaced-comment': ['error', 'always', { markers: ['/', '/'] }],
+      // Allow accessing refs during render when using React's use() hook for suspending
+      'react-hooks/refs': 'off',
+    },
+  },
+];
@@ -0,0 +1,9 @@
+import { createMemoryCache } from '@algolia/client-common';
+import { compositionClient } from '@algolia/composition';
+
+export const responsesCache = createMemoryCache();
+export const client = compositionClient(
+  '9HILZG6EJK',
+  '65b3e0bb064c4172c4810fb2459bebd1',
+  { responsesCache }
+);