docs(headless SSR): add tabs to ssr samples (#4303)

https://coveord.atlassian.net/browse/CDX-1588

packages/samples/headless-ssr/app-router/src/app/react/page.tsx

@@ -3,6 +3,7 @@ import ResultList from '@/common/components/react/result-list';
 import SearchBox from '@/common/components/react/search-box';
 import {SearchPageProvider} from '@/common/components/react/search-page';
 import SearchParameterManager from '@/common/components/react/search-parameter-manager';
+import TabManager from '@/common/components/react/tab-manager';
 import {
   fetchStaticState,
   setNavigatorContextProvider,
@@ -62,6 +63,7 @@ export default async function Search(url: {
     >
       <SearchParameterManager />
       <SearchBox />
+      <TabManager />
       <ResultList />
       <AuthorFacet />
     </SearchPageProvider>

packages/samples/headless-ssr/common/components/common/search-engine-config.ts

@@ -9,6 +9,8 @@ import {
   defineSearchBox,
   defineContext,
   defineSearchParameterManager,
+  defineTabManager,
+  defineTab,
 } from '@coveo/headless/ssr';
 
 export const config = {
@@ -23,7 +25,27 @@ export const config = {
     context: defineContext(),
     searchBox: defineSearchBox(),
     resultList: defineResultList(),
-    authorFacet: defineFacet({options: {facetId: 'author-1', field: 'author'}}),
+    tabManager: defineTabManager(),
+    tabAll: defineTab({
+      options: {id: 'all', expression: ''},
+      initialState: {isActive: true},
+    }),
+    tabCountries: defineTab({
+      options: {
+        id: 'countries',
+        expression: '@source="Coveo Sample - Atlas"',
+      },
+    }),
+    tabVideos: defineTab({
+      options: {id: 'videos', expression: '@filetype=YouTubeVideo'},
+    }),
+    authorFacet: defineFacet({
+      options: {
+        facetId: 'author-1',
+        field: 'author',
+        tabs: {included: ['all', 'videos']},
+      },
+    }),
     searchParameterManager: defineSearchParameterManager(),
   },
 } satisfies SearchEngineDefinitionOptions<

packages/samples/headless-ssr/common/components/common/tab-manager.tsx

@@ -0,0 +1,15 @@
+import {TabManager as TabManagerController} from '@coveo/headless/ssr';
+
+interface TabManagerCommonProps {
+  controller: Omit<TabManagerController, 'state' | 'subscribe'> | undefined;
+  value: string;
+  children: React.ReactNode;
+}
+
+export default function TabManagerCommon({
+  controller,
+  value,
+  children,
+}: TabManagerCommonProps) {
+  return <div role="tablist">{children}</div>;
+}

packages/samples/headless-ssr/common/components/common/tab.tsx

@@ -0,0 +1,32 @@
+import {Tab, TabManager, TabState} from '@coveo/headless/ssr';
+
+interface TabCommonProps {
+  state: TabState;
+  methods: Omit<Tab, 'state' | 'subscribe'> | undefined;
+  activeTab: string;
+  tabName: string;
+  tabLabel: string;
+}
+
+export default function TabCommon({
+  state,
+  methods,
+  activeTab,
+  tabName,
+  tabLabel,
+}: TabCommonProps) {
+  function handleClickTab() {
+    if (activeTab !== tabName) methods?.select();
+  }
+
+  return (
+    <button
+      role="tab"
+      aria-selected={state.isActive}
+      key={tabName}
+      onClick={() => handleClickTab()}
+    >
+      {state.isActive ? <strong>{tabLabel}</strong> : tabLabel}
+    </button>
+  );
+}

packages/samples/headless-ssr/common/components/generic/facet.tsx

@@ -1,16 +1,22 @@
-import {FacetState, Facet as FacetController} from '@coveo/headless/ssr';
+import {
+  FacetState,
+  Facet as FacetController,
+  TabManager,
+} from '@coveo/headless/ssr';
 import {useEffect, useState, FunctionComponent} from 'react';
 import FacetCommon from '../common/facet';
 
 interface FacetProps {
   title: string;
   staticState: FacetState;
+  tabManager?: TabManager;
   controller?: FacetController;
 }
 
 export const Facet: FunctionComponent<FacetProps> = ({
   title,
   staticState,
+  tabManager,
   controller,
 }) => {
   const [state, setState] = useState(staticState);
@@ -20,6 +26,10 @@ export const Facet: FunctionComponent<FacetProps> = ({
     [controller]
   );
 
+  if (!state.enabled) {
+    return;
+  }
+
   return (
     <FacetCommon
       title={title}

packages/samples/headless-ssr/common/components/generic/search-page.tsx

@@ -13,6 +13,8 @@ import {HydrationMetadata} from '../common/hydration-metadata';
 import {Facet} from './facet';
 import {ResultList} from './result-list';
 import {SearchBox} from './search-box';
+import {Tab} from './tab';
+import {TabManager} from './tabs-manager';
 
 export default function SearchPage({
   staticState,
@@ -59,10 +61,37 @@ export default function SearchPage({
         staticState={staticState.controllers.searchBox.state}
         controller={hydratedState?.controllers.searchBox}
       />
+      <TabManager
+        staticState={staticState.controllers.tabManager.state}
+        controller={hydratedState?.controllers.tabManager}
+      >
+        <Tab
+          staticState={staticState.controllers.tabAll.state}
+          controller={hydratedState?.controllers.tabAll}
+          tabManager={hydratedState?.controllers.tabManager}
+          tabName={'all'}
+          tabLabel={'All'}
+        ></Tab>
+        <Tab
+          staticState={staticState.controllers.tabCountries.state}
+          controller={hydratedState?.controllers.tabCountries}
+          tabManager={hydratedState?.controllers.tabManager}
+          tabName={'countries'}
+          tabLabel={'Countries'}
+        ></Tab>
+        <Tab
+          staticState={staticState.controllers.tabVideos.state}
+          controller={hydratedState?.controllers.tabVideos}
+          tabManager={hydratedState?.controllers.tabManager}
+          tabName={'videos'}
+          tabLabel={'Videos'}
+        ></Tab>
+      </TabManager>
       <Facet
         title="Author"
         staticState={staticState.controllers.authorFacet.state}
         controller={hydratedState?.controllers.authorFacet}
+        tabManager={hydratedState?.controllers.tabManager}
       />
       <ResultList
         staticState={staticState.controllers.resultList.state}

packages/samples/headless-ssr/common/components/generic/tab.tsx

@@ -0,0 +1,36 @@
+import {Tab as TabController, TabManager, TabState} from '@coveo/headless/ssr';
+import {useEffect, useState, FunctionComponent} from 'react';
+import TabCommon from '../common/tab';
+
+interface TabProps {
+  staticState: TabState;
+  controller?: TabController;
+  tabManager?: TabManager;
+  tabName: string;
+  tabLabel: string;
+}
+
+export const Tab: FunctionComponent<TabProps> = ({
+  staticState,
+  controller,
+  tabManager,
+  tabName,
+  tabLabel,
+}) => {
+  const [state, setState] = useState(staticState);
+
+  useEffect(
+    () => controller?.subscribe(() => setState({...controller.state})),
+    [controller]
+  );
+
+  return (
+    <TabCommon
+      state={state}
+      methods={controller}
+      activeTab={tabManager?.state.activeTab ?? ''}
+      tabName={tabName}
+      tabLabel={tabLabel}
+    />
+  );
+};

packages/samples/headless-ssr/common/components/generic/tabs-manager.tsx

@@ -0,0 +1,33 @@
+import {
+  TabManagerState,
+  TabManager as TabManagerController,
+} from '@coveo/headless-react/ssr';
+import {useEffect, useState, FunctionComponent} from 'react';
+import TabManagerCommon from '../common/tab-manager';
+
+interface TabManagerProps {
+  staticState: TabManagerState;
+  controller?: TabManagerController;
+  children: React.ReactNode;
+}
+
+export const TabManager: FunctionComponent<TabManagerProps> = ({
+  staticState,
+  controller,
+  children,
+}: TabManagerProps) => {
+  const [state, setState] = useState(staticState);
+
+  useEffect(
+    () => controller?.subscribe?.(() => setState({...controller.state})),
+    [controller]
+  );
+
+  return (
+    <TabManagerCommon
+      controller={controller}
+      value={state.activeTab}
+      children={children}
+    />
+  );
+};

packages/samples/headless-ssr/common/components/react/facets.tsx

@@ -6,6 +6,10 @@ import FacetCommon from '../common/facet';
 export const AuthorFacet = () => {
   const {state, methods} = useAuthorFacet();
 
+  if (!state.enabled) {
+    return;
+  }
+
   return (
     <FacetCommon
       title="Author"

packages/samples/headless-ssr/common/components/react/tab-manager.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import {useTabManager} from '../../lib/react/engine';
+import TabManagerCommon from '../common/tab-manager';
+import Tab from './tab';
+
+export default function TabManager() {
+  const {state, methods} = useTabManager();
+
+  return (
+    <TabManagerCommon controller={methods} value={state.activeTab}>
+      <Tab tabName={'all'} tabLabel="All"></Tab>
+      <Tab tabName={'countries'} tabLabel="Countries"></Tab>
+      <Tab tabName={'videos'} tabLabel="Videos"></Tab>
+    </TabManagerCommon>
+  );
+}

packages/samples/headless-ssr/common/components/react/tab.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import {TabManager} from '@coveo/headless-react/ssr';
+import {
+  useTabAll,
+  useTabCountries,
+  useTabManager,
+  useTabVideos,
+} from '../../lib/react/engine';
+import TabCommon from '../common/tab';
+
+export default function Tab({
+  tabName,
+  tabLabel,
+}: {
+  tabName: string;
+  tabLabel: string;
+}) {
+  const tabManager = useTabManager();
+
+  let controller;
+
+  if (tabName === 'all') {
+    controller = useTabAll;
+  } else if (tabName === 'countries') {
+    controller = useTabCountries;
+  } else if (tabName === 'videos') {
+    controller = useTabVideos;
+  } else {
+    throw new Error(`Unknown tab: ${tabName}`);
+  }
+
+  const {state, methods} = controller();
+
+  return (
+    <TabCommon
+      state={state}
+      methods={methods}
+      activeTab={tabManager.state.activeTab}
+      tabName={tabName}
+      tabLabel={tabLabel}
+    />
+  );
+}

packages/samples/headless-ssr/common/lib/react/engine.ts

@@ -18,6 +18,10 @@ export const {
 export const {
   useResultList,
   useSearchBox,
+  useTabManager,
+  useTabAll,
+  useTabCountries,
+  useTabVideos,
   useAuthorFacet,
   useSearchParameterManager,
 } = engineDefinition.controllers;

packages/samples/headless-ssr/cypress/e2e/smoke.cy.ts

@@ -12,15 +12,15 @@ const msgSelector = '#hydrated-msg';
 const timestampSelector = '#timestamp';
 const resultListSelector = '.result-list li';
 const searchBoxSelector = '.search-box input';
-const routes = ['generic', 'react'] as const;
+const routes = ['generic?tab=all', 'react?tab=all'] as const;
 
 const isPageDev =
   process.env.NODE_ENV === 'development' &&
   Cypress.env('NEXTJS_ROUTER') === 'pages';
 
 // Note: Thresholds might need to be adjusted as the page tested changes (e.g. more components are added etc)
 const vitals: Record<(typeof routes)[number], Cypress.ReportWebVitalsConfig> = {
-  generic: {
+  'generic?tab=all': {
     thresholds: {
       fcp: isPageDev ? 2000 : 200,
       lcp: isPageDev ? 2000 : 200,
@@ -30,7 +30,7 @@ const vitals: Record<(typeof routes)[number], Cypress.ReportWebVitalsConfig> = {
       inp: 400,
     },
   },
-  react: {
+  'react?tab=all': {
     thresholds: {
       fcp: isPageDev ? 2000 : 400,
       lcp: isPageDev ? 2000 : 400,