@redocly/theme 0.57.0-next.0 → 0.57.0-next.2

package/src/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath.tsx

@@ -24,7 +24,7 @@ export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPat
         leftContent={
           <Label>
             <MethodTag color={method.toLowerCase()}>{method}</MethodTag>
-            {path}
+            <PathLabel>{path}</PathLabel>
           </Label>
         }
         withSeparator={false}
@@ -36,7 +36,10 @@ export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPat
 const MethodTag = styled(HttpTag)`
   width: auto;
   justify-content: start;
-  margin-right: var(--spacing-xxs);
+`;
+
+const PathLabel = styled.label`
+  margin-left: var(--spacing-xxs);
 `;
 
 const LinksWrapper = styled.div`
@@ -51,6 +54,7 @@ const LinksWrapper = styled.div`
 
 const Label = styled.div`
   display: flex;
+  width: 100%;
 `;
 
 const Heading = styled.h2`

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.tsx

@@ -11,6 +11,7 @@ export type CatalogEntityRelationsProps = {
   entitiesCatalogConfig: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   initialRelations: BffCatalogRelatedEntityList;
+  initialFilter?: string;
   searchQuery: string;
   setSearchQuery: (query: string) => void;
 };
@@ -29,10 +30,15 @@ export function CatalogEntityRelations({
 }: CatalogEntityRelationsProps): JSX.Element | null {
   const { useCatalogSort, useFetchCatalogEntitiesRelations } = useThemeHooks();
   const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
-  const [filter, setFilter] = useState<string>(ENTITY_DEFAULT_FILTERS[entity.type] ?? '');
+  const [filter, setFilter] = useState<string>();
 
   const { items: relations, query } = useFetchCatalogEntitiesRelations(
-    { entityKey: entity.key, search: searchQuery, sort: sortOption ?? undefined, filter },
+    {
+      entityKey: entity.key,
+      search: searchQuery,
+      sort: sortOption ?? undefined,
+      filter: filter ?? ENTITY_DEFAULT_FILTERS[entity.type],
+    },
     initialRelations,
   );
 

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -2,16 +2,11 @@ import React, { JSX } from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
 import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
-import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
-import {
-  CatalogColumn,
-  CatalogTableView,
-} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
-import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
-import { CatalogEntitiesEmptyState } from '@redocly/theme/components/Catalog/CatalogEntitiesEmptyState';
+
+import { CatalogEntityRelationsTableContent } from './CatalogEntityRelationsTableContent';
 
 export type CatalogEntityRelationsTableProps = {
   entity: BffCatalogEntity;
@@ -53,41 +48,27 @@ export function CatalogEntityRelationsTable({
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable">
       {heading && <Heading>{heading}</Heading>}
-      {(searchQuery || relations.length > 0) && (
-        <CatalogActionsRow
-          searchQuery={searchQuery}
-          setSearchQuery={setSearchQuery}
-          sortOption={sortOption}
-          setSortOption={setSortOption}
-          style={{ marginBottom: '12px' }}
-        />
-      )}
-      <HighlightContext.Provider value={[searchQuery]}>
-        {relations.length > 0 ? (
-          <CatalogTableView
-            entities={relations}
-            entitiesCatalogConfig={entitiesCatalogConfig}
-            catalogConfig={catalogConfig}
-            columns={columns}
-            setSortOption={setSortOption}
-            currentSortOption={sortOption}
-            handleSortClick={handleSortClick}
-            isColumnSorted={isColumnSorted}
-            style={{ marginTop: 0 }}
-          />
-        ) : (
-          <CatalogEntitiesEmptyState listType={listType} />
-        )}
-      </HighlightContext.Provider>
-      {shouldShowLoadMore && (
-        <LoadMore
-          icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}
-          onClick={query.fetchNextPage}
-          disabled={query.isFetchingNextPage}
-          blinking={query.isFetchingNextPage}
-          label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
-        />
-      )}
+      <CatalogActionsRow
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        sortOption={sortOption}
+        setSortOption={setSortOption}
+        style={{ marginBottom: '12px' }}
+      />
+      <CatalogEntityRelationsTableContent
+        entitiesCatalogConfig={entitiesCatalogConfig}
+        catalogConfig={catalogConfig}
+        relations={relations}
+        query={query}
+        searchQuery={searchQuery}
+        columns={columns}
+        setSortOption={setSortOption}
+        sortOption={sortOption}
+        handleSortClick={handleSortClick}
+        isColumnSorted={isColumnSorted}
+        shouldShowLoadMore={shouldShowLoadMore}
+        listType={listType}
+      />
     </div>
   );
 }

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.tsx

@@ -0,0 +1,76 @@
+import React, { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
+import { BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
+import {
+  CatalogColumn,
+  CatalogTableView,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { CatalogEntitiesEmptyState } from '@redocly/theme/components/Catalog/CatalogEntitiesEmptyState';
+
+export type CatalogEntityRelationsTableContentProps = {
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  relations: BffCatalogRelatedEntity[];
+  query: {
+    fetchNextPage: () => void;
+    isFetchingNextPage: boolean;
+  };
+  searchQuery: string;
+  columns: CatalogColumn<BffCatalogRelatedEntity>[];
+  sortOption: SortOption | null;
+  setSortOption: (sortOption: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  shouldShowLoadMore: boolean;
+  listType?: 'default' | 'team';
+};
+
+export function CatalogEntityRelationsTableContent({
+  entitiesCatalogConfig,
+  catalogConfig,
+  relations,
+  query,
+  searchQuery,
+  columns,
+  setSortOption,
+  sortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+  listType,
+}: CatalogEntityRelationsTableContentProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent">
+      <HighlightContext.Provider value={[searchQuery]}>
+        {relations.length > 0 ? (
+          <CatalogTableView
+            entities={relations}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            columns={columns}
+            setSortOption={setSortOption}
+            currentSortOption={sortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            style={{ marginTop: 0 }}
+          />
+        ) : (
+          <CatalogEntitiesEmptyState listType={listType} />
+        )}
+      </HighlightContext.Provider>
+      {shouldShowLoadMore && (
+        <LoadMore
+          icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}
+          onClick={query.fetchNextPage}
+          disabled={query.isFetchingNextPage}
+          blinking={query.isFetchingNextPage}
+          label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -88,7 +88,7 @@ export function CatalogEntityTeamRelations({
       <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
-            key={`members-${relations.length}-${relations.map((r) => r.id).join(',')}`}
+            key="members-table"
             entity={entity}
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
@@ -111,7 +111,7 @@ export function CatalogEntityTeamRelations({
           onClick={() => setFilter('-type:user')}
         >
           <CatalogEntityDefaultRelations
-            key={`related-${relations.length}-${relations.map((r) => r.id).join(',')}`}
+            key="related-entities-table"
             entity={entity}
             relations={relations}
             query={query}

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -11,14 +11,15 @@ import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon'
 export type CatalogEntityIconProps = {
   entityType: string;
   defaultColor?: boolean;
+  forceColor?: string;
 };
 
 const getIconColor = (entityType: EntityType) => `var(--catalog-entity-icon-color-${entityType})`;
 
-const getEntityIcon = ({ entityType, defaultColor }: CatalogEntityIconProps) => {
-  const iconColor = defaultColor
-    ? `var(--catalog-entity-icon-color)`
-    : getIconColor(entityType as EntityType);
+const getEntityIcon = ({ entityType, defaultColor, forceColor }: CatalogEntityIconProps) => {
+  const iconColor =
+    forceColor ??
+    (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType as EntityType));
 
   const entityIconMap: Record<EntityType, JSX.Element> = {
     service: <CodeIcon color={iconColor} />,
@@ -36,8 +37,9 @@ const getEntityIcon = ({ entityType, defaultColor }: CatalogEntityIconProps) =>
 export function CatalogEntityIcon({
   entityType,
   defaultColor = false,
+  forceColor,
 }: CatalogEntityIconProps): JSX.Element {
-  const icon = getEntityIcon({ entityType, defaultColor });
+  const icon = getEntityIcon({ entityType, defaultColor, forceColor });
 
   if (!icon) {
     throw new Error(`Unhandled entity type: ${entityType}`);

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -101,7 +101,7 @@ export const CatalogTableViewRow = <T extends BaseEntity>({
       key={entity.id}
       $columnsWidths={columns.map((column) => column.width || '1fr')}
       $columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
-      to={getEntityDetailsLink()}
+      to={getEntityDetailsLink() + '?search='}
       style={{ color: 'var(--catalog-page-wrapper-text-color)' }}
       data-component-name="Catalog/CatalogTableView/CatalogTableViewRow"
     >

package/src/components/Catalog/variables.ts

@@ -382,4 +382,46 @@ export const catalog = css`
 
   --catalog-avatar-bg-color: #ededf2;
   // @tokens End
+
+  /**
+    * @tokens Catalog entity relations node
+    */
+  --catalog-entity-relations-node-padding-vertical: 10px;
+  --catalog-entity-relations-node-padding-horizontal: 14px;
+  --catalog-entity-relations-node-padding: var(--catalog-entity-relations-node-padding-vertical) var(--catalog-entity-relations-node-padding-horizontal);
+  --catalog-entity-relations-node-gap: 8px;
+  --catalog-entity-relations-node-border-radius: 10px;
+
+  --catalog-entity-relations-node-bg-color: var(--layer-color);
+  --catalog-entity-relations-node-text-color: var(--catalog-card-text-color);
+
+  --catalog-entity-relations-node-border-color: var(--border-color-secondary);
+  --catalog-entity-relations-node-border-width: var(--border-width);
+  --catalog-entity-relations-node-border-style: var(--border-style);
+
+  --catalog-entity-relations-node-font-weight: var(--font-weight-regular);
+  --catalog-entity-relations-node-font-weight-root: 600;
+
+  --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
+  --catalog-entity-relations-node-root-text-color: #ffffff;
+  --catalog-entity-relations-node-root-icon-color: #ffffff;
+  // @tokens End
+
+  /**
+    * @tokens Catalog entity relations edge
+    */
+  --catalog-entity-relations-edge-label-bg-color: var(--layer-color);
+  --catalog-entity-relations-edge-label-text-color: var(--catalog-card-text-color);
+  --catalog-entity-relations-edge-label-border-color: var(--border-color-secondary);
+  --catalog-entity-relations-edge-label-border-width: var(--border-width);
+  --catalog-entity-relations-edge-label-border-style: var(--border-style);
+  --catalog-entity-relations-edge-label-border-radius: 10px;
+
+  --catalog-entity-relations-edge-label-padding-vertical: 2px;
+  --catalog-entity-relations-edge-label-padding-horizontal: 8px;
+  --catalog-entity-relations-edge-label-padding: var(--catalog-entity-relations-edge-label-padding-vertical) var(--catalog-entity-relations-edge-label-padding-horizontal);
+
+  --catalog-entity-relations-edge-label-font-size: 12px;
+  --catalog-entity-relations-edge-label-line-height: 1.2;
+  // @tokens End
 `;

package/src/components/CatalogClassic/CatalogClassicVirtualizedGroups.tsx

@@ -106,6 +106,7 @@ export function CatalogClassicVirtualizedGroups({
       return ESTIMATED_CARD_HEIGHT;
     },
     overscan: 5,
+    enabled: shouldVirtualize,
   });
 
   useEffect(() => {
@@ -117,27 +118,29 @@ export function CatalogClassicVirtualizedGroups({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filters, filterTerm, size.width, shouldVirtualize]);
 
+  const renderRow = (rowData: VirtualRowData) => {
+    if (rowData.type === 'header') {
+      return (
+        <SSRHeaderRow key={rowData.key}>
+          <CatalogSeparatorLabel>{rowData.groupTitle}</CatalogSeparatorLabel>
+          <CounterTag borderless>{rowData.groupCount}</CounterTag>
+        </SSRHeaderRow>
+      );
+    }
+
+    return (
+      <SSRGridRow key={rowData.key}>
+        {rowData.items.map((item) => (
+          <CatalogClassicCard key={item.link} item={item} />
+        ))}
+      </SSRGridRow>
+    );
+  };
+
   if (!isClient) {
     return (
       <div ref={parentRef} data-component-name="CatalogClassic/CatalogClassicVirtualizedGroups">
-        {flatRows.slice(0, 15).map((rowData) => {
-          if (rowData.type === 'header') {
-            return (
-              <SSRHeaderRow key={rowData.key}>
-                <CatalogSeparatorLabel>{rowData.groupTitle}</CatalogSeparatorLabel>
-                <CounterTag borderless>{rowData.groupCount}</CounterTag>
-              </SSRHeaderRow>
-            );
-          }
-
-          return (
-            <SSRGridRow key={rowData.key}>
-              {rowData.items.map((item) => (
-                <CatalogClassicCard key={item.link} item={item} />
-              ))}
-            </SSRGridRow>
-          );
-        })}
+        {flatRows.slice(0, 15).map((rowData) => renderRow(rowData))}
         <LoadingWrapper>
           <SpinnerLoader color="var(--catalog-classic-description-text-color)" size="20px" />
         </LoadingWrapper>
@@ -145,6 +148,14 @@ export function CatalogClassicVirtualizedGroups({
     );
   }
 
+  if (!shouldVirtualize) {
+    return (
+      <div ref={parentRef} data-component-name="CatalogClassic/CatalogClassicVirtualizedGroups">
+        {flatRows.map((rowData) => renderRow(rowData))}
+      </div>
+    );
+  }
+
   return (
     <div ref={parentRef} data-component-name="CatalogClassic/CatalogClassicVirtualizedGroups">
       <div

package/src/core/constants/catalog.ts

@@ -57,3 +57,16 @@ export const reverseRelationMap: Record<EntityRelationType, EntityRelationType>
   triggers: 'triggeredBy',
   triggeredBy: 'triggers',
 } as const;
+
+export enum GraphHandleType {
+  Target = 'target',
+  Source = 'source',
+}
+
+export enum GraphCustomNodeType {
+  CatalogEntity = 'catalogEntity',
+}
+
+export enum GraphCustomEdgeType {
+  CatalogEdge = 'catalogEdge',
+}

package/src/core/hooks/__mocks__/search/use-recent-searches.ts

@@ -1,4 +1,6 @@
-export const useRecentSearches = jest.fn(() => {
+import { vi } from 'vitest';
+
+export const useRecentSearches = vi.fn(() => {
   const items = ['test'];
   return {
     items,

package/src/core/hooks/__mocks__/search/use-search-filter.ts

@@ -1,4 +1,6 @@
-export const useSearchFilter = jest.fn(() => {
+import { vi } from 'vitest';
+
+export const useSearchFilter = vi.fn(() => {
   return {
     isFilterOpen: false,
     onFacetReset: () => {},

package/src/core/hooks/__mocks__/search/use-suggested-pages.ts

@@ -1,4 +1,6 @@
-export const useSuggestedPages = jest.fn(() => {
+import { vi } from 'vitest';
+
+export const useSuggestedPages = vi.fn(() => {
   return [
     {
       link: '/',

package/src/core/hooks/__mocks__/use-controlled-state.ts

@@ -1 +1,3 @@
-export const useControlledState = () => [false, jest.fn()];
+import { vi } from 'vitest';
+
+export const useControlledState = () => [false, vi.fn()];

package/src/core/hooks/__mocks__/use-input-key-commands.ts

@@ -1,3 +1,5 @@
-export const useInputKeyCommands = jest.fn(() => ({
-  onKeyDown: jest.fn(),
+import { vi } from 'vitest';
+
+export const useInputKeyCommands = vi.fn(() => ({
+  onKeyDown: vi.fn(),
 }));

package/src/core/hooks/__mocks__/use-mobile-menu.ts

@@ -1 +1,3 @@
-export const useMobileMenu = () => [false, jest.fn];
+import { vi } from 'vitest';
+
+export const useMobileMenu = () => [false, vi.fn()];

package/src/core/hooks/__mocks__/use-theme-config.ts

@@ -1,4 +1,6 @@
-export const useThemeConfig = jest.fn(() => ({
+import { vi } from 'vitest';
+
+export const useThemeConfig = vi.fn(() => ({
   userMenu: {
     items: [],
   },

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -1,6 +1,8 @@
-export const useThemeHooks = jest.fn(() => ({
-  useTranslate: jest.fn(() => ({
-    translate: jest.fn((key: string, defaultValue: string) =>
+import { vi } from 'vitest';
+
+export const useThemeHooks = vi.fn(() => ({
+  useTranslate: vi.fn(() => ({
+    translate: vi.fn((key: string, defaultValue: string) =>
       defaultValue
         ? typeof defaultValue !== 'string'
           ? (defaultValue as any).defaultValue
@@ -8,21 +10,21 @@ export const useThemeHooks = jest.fn(() => ({
         : key,
     ),
   })),
-  useTelemetry: jest.fn(() => ({
-    send: jest.fn(),
+  useTelemetry: vi.fn(() => ({
+    send: vi.fn(),
   })),
-  useBreadcrumbs: jest.fn().mockReturnValue([]),
-  usePageSharedData: jest.fn().mockReturnValue({}),
-  useCatalogClassic: jest.fn(() => ({
+  useBreadcrumbs: vi.fn().mockReturnValue([]),
+  usePageSharedData: vi.fn().mockReturnValue({}),
+  useCatalogClassic: vi.fn(() => ({
     groups: [],
     filters: [],
     filterTerm: '',
-    setFilterTerm: jest.fn(),
+    setFilterTerm: vi.fn(),
   })),
-  useL10n: jest.fn(() => ({
-    changeLanguage: jest.fn(),
+  useL10n: vi.fn(() => ({
+    changeLanguage: vi.fn(),
   })),
-  useL10nConfig: jest.fn(() => ({
+  useL10nConfig: vi.fn(() => ({
     currentLocale: 'en',
     defaultLocale: 'en',
     locales: [
@@ -31,42 +33,42 @@ export const useThemeHooks = jest.fn(() => ({
       { code: 'uk', name: 'Ukraine' },
     ],
   })),
-  usePreloadHistory: jest.fn(() => ({
-    push: jest.fn(),
+  usePreloadHistory: vi.fn(() => ({
+    push: vi.fn(),
   })),
-  useCurrentProduct: jest.fn(),
-  useProducts: jest.fn(() => []),
-  useSearch: jest.fn(() => ({
-    query: jest.fn().mockReturnValue(''),
-    setQuery: jest.fn(),
+  useCurrentProduct: vi.fn(),
+  useProducts: vi.fn(() => []),
+  useSearch: vi.fn(() => ({
+    query: vi.fn().mockReturnValue(''),
+    setQuery: vi.fn(),
     items: [],
     isLoading: false,
   })),
-  useAiSearch: jest.fn(() => ({
-    askQuestion: jest.fn(),
+  useAiSearch: vi.fn(() => ({
+    askQuestion: vi.fn(),
     references: [],
   })),
-  useFacetQuery: jest.fn(() => ({
+  useFacetQuery: vi.fn(() => ({
     searchFacet: null,
-    setSearchFacet: jest.fn(),
-    setSearchFacetQuery: jest.fn(),
+    setSearchFacet: vi.fn(),
+    setSearchFacetQuery: vi.fn(),
   })),
-  useMarkdownText: jest.fn(() => {
+  useMarkdownText: vi.fn(() => {
     return null;
   }),
-  useUserMenu: jest.fn(() => ({
+  useUserMenu: vi.fn(() => ({
     userData: {
       isAuthenticated: true,
       name: 'test-name',
       email: 'test-email@test.xyz',
       picture: 'picture',
     },
-    handleLogout: jest.fn(),
+    handleLogout: vi.fn(),
     loginUrl: 'https://login.redoc.ly',
     hasDeveloperOnboarding: true,
   })),
-  usePageVersions: jest.fn(),
-  useSidebarItems: jest.fn().mockReturnValue({
+  usePageVersions: vi.fn(),
+  useSidebarItems: vi.fn().mockReturnValue({
     currentItems: [
       {
         label: 'Item',
@@ -77,14 +79,14 @@ export const useThemeHooks = jest.fn(() => ({
         label: 'Item',
       },
     ],
-    popDrilldownState: jest.fn(),
-    pushDrilldownState: jest.fn(),
+    popDrilldownState: vi.fn(),
+    pushDrilldownState: vi.fn(),
   }),
-  useSidebarSiblingsData: jest.fn(),
-  useSubmitFeedback: jest.fn(() => ({
-    submitFeedback: jest.fn(),
+  useSidebarSiblingsData: vi.fn(),
+  useSubmitFeedback: vi.fn(() => ({
+    submitFeedback: vi.fn(),
   })),
-  useLoadAndNavigate: jest.fn(),
-  usePageProps: jest.fn().mockReturnValue({}),
-  usePageData: jest.fn().mockReturnValue(null),
+  useLoadAndNavigate: vi.fn(),
+  usePageProps: vi.fn().mockReturnValue({}),
+  usePageData: vi.fn().mockReturnValue(null),
 }));

package/src/core/hooks/__mocks__/use-time-ago.ts

@@ -1,3 +1,5 @@
-export const useTimeAgo = jest.fn(() => ({
+import { vi } from 'vitest';
+
+export const useTimeAgo = vi.fn(() => ({
   format: () => '5 days ago',
 }));