fix(deps): update ui-kit to v3 (major) (#3904)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Germain Bergeron <gbergeron@coveo.com>

packages/website/package.json

@@ -8,11 +8,12 @@
         "lintfix": "../../node_modules/.bin/prettier --write \"**/*.{scss,ts,tsx,js,jsx,json,md,yml,html}\" && ../../node_modules/.bin/eslint \"**/*.{ts,tsx}\" --fix",
         "mantine:fetch": "ts-node --project ./bin/tsconfig.json ./bin/index.ts",
         "preview": "vite preview",
-        "start": "vite"
+        "start": "vite",
+        "type-check": "tsc --noEmit"
     },
     "dependencies": {
-        "@coveo/atomic-react": "2.14.2",
-        "@coveo/headless": "2.80.2",
+        "@coveo/atomic-react": "3.1.3",
+        "@coveo/headless": "3.1.3",
         "@coveord/plasma-components-props-analyzer": "workspace:*",
         "@coveord/plasma-mantine": "workspace:*",
         "@coveord/plasma-react-icons": "workspace:*",

packages/website/src/building-blocs/ResultList.tsx

@@ -1,11 +1,5 @@
-import {
-    AtomicQuerySummary,
-    AtomicSearchInterface,
-    ResultList as HeadlessResultList,
-    Result,
-    SearchEngine,
-    loadClickAnalyticsActions,
-} from '@coveo/atomic-react';
+import {AtomicQuerySummary, AtomicSearchInterface} from '@coveo/atomic-react';
+import {loadClickAnalyticsActions, Result, ResultList as HeadlessResultList, SearchEngine} from '@coveo/headless';
 import {Box, Container, Stack} from '@coveord/plasma-mantine';
 import {FunctionComponent, useEffect, useState} from 'react';
 import {Tile, TileProps} from '../building-blocs/Tile';
@@ -26,11 +20,13 @@ export const ResultList: FunctionComponent<ResultListProps> = ({controller, engi
     return (
         <>
             {!state.hasResults && !state.isLoading ? (
-                <Box w="100%">
-                    <AtomicSearchInterface engine={engine}>
-                        <NoSearchResultTemplate engine={engine} query={query} />
-                    </AtomicSearchInterface>
-                </Box>
+                <Container size="xl" className="home" pt="150">
+                    <Box w="100%">
+                        <AtomicSearchInterface engine={engine}>
+                            <NoSearchResultTemplate engine={engine} query={query} />
+                        </AtomicSearchInterface>
+                    </Box>
+                </Container>
             ) : (
                 <Container size="xl" className="home" pt="150">
                     <Stack gap="md" flex="1">

packages/website/src/pages/Search.tsx

@@ -4,7 +4,7 @@ import {
     loadQueryActions,
     loadSearchActions,
     loadSearchAnalyticsActions,
-} from '@coveo/atomic-react';
+} from '@coveo/headless';
 import {useContext} from 'react';
 import {ResultList} from '../building-blocs/ResultList';
 import {EngineContext} from '../search/engine/EngineContext';

packages/website/src/search/NoSearchResult.tsx

@@ -1,5 +1,5 @@
-import {buildHistoryManager, HistoryManager, HistoryManagerState, SearchEngine} from '@coveo/atomic-react';
-import {Button} from '@coveord/plasma-mantine';
+import {buildHistoryManager, HistoryManager, HistoryManagerState, SearchEngine} from '@coveo/headless';
+import {Button, Group, Header, Image, Stack, Text} from '@coveord/plasma-mantine';
 import {FunctionComponent, useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import results_empty_state from '../assets/results_empty_state.png';
@@ -19,15 +19,10 @@ export const NoSearchResultTemplate: FunctionComponent<NoResultTemplateProps> =
     useEffect(() => historyManager.subscribe(() => setState(historyManager.state)), []);
 
     return (
-        <div className="grid item-center">
-            <img className="mt3 mb3" src={results_empty_state} />
-            <div className="grid item-center">
-                <span className="h4-book mb1 nowrap">
-                    We couldn’t find anything for <span className="h4"> “{query}”</span>
-                </span>
-                <span className="h6-subdued mb3 nowrap">
-                    You may want to try using different keywords, or checking for spelling mistakes.
-                </span>
+        <Group justify="center">
+            <Stack align="flex-start">
+                <Header variant="secondary">We couldn’t find anything for “{query}”</Header>
+                <Text>You may want to try using different keywords, or checking for spelling mistakes.</Text>
                 <Button
                     onClick={async () => {
                         if (state.past.length !== 0) {
@@ -39,7 +34,8 @@ export const NoSearchResultTemplate: FunctionComponent<NoResultTemplateProps> =
                 >
                     Clear search
                 </Button>
-            </div>
-        </div>
+            </Stack>
+            <Image maw={300} src={results_empty_state} />
+        </Group>
     );
 };

packages/website/src/search/engine/Engine.ts

@@ -1,9 +1,8 @@
-import {buildSearchEngine, getOrganizationEndpoints} from '@coveo/atomic-react';
+import {buildSearchEngine} from '@coveo/headless';
 
 export const searchEngine = () =>
     buildSearchEngine({
         configuration: {
-            organizationEndpoints: getOrganizationEndpoints('pwsadimtnwqkrvyrbxjuocz2g6m'),
             organizationId: 'pwsadimtnwqkrvyrbxjuocz2g6m',
             accessToken: 'xx4dfa233d-3c49-4ade-b07a-e85277a23e9b',
             analytics: {enabled: true, deviceId: 'dummyDeviceId', userDisplayName: 'anonymous'},

packages/website/src/search/engine/EngineContext.ts

@@ -1,4 +1,4 @@
-import {SearchEngine} from '@coveo/atomic-react';
+import {SearchEngine} from '@coveo/headless';
 import {createContext} from 'react';
 
 export const EngineContext = createContext<SearchEngine | null>(null);

packages/website/src/search/engine/EngineProvider.tsx

@@ -1,4 +1,4 @@
-import {loadFieldActions} from '@coveo/atomic-react';
+import {loadFieldActions} from '@coveo/headless';
 import {FunctionComponent, PropsWithChildren, useEffect} from 'react';
 
 import {searchEngine} from './Engine';