fix(AVO-3804): upgrade admin-core, and comp libs to esm

next.config.js

@@ -92,7 +92,6 @@ module.exports = withTM({
 			'react-hook-form': path.resolve('./node_modules/react-hook-form'),
 			'react-table': path.resolve('./node_modules/react-table'),
 			'react-datepicker': path.resolve('./node_modules/react-datepicker'),
-			'react-page-split': path.resolve('./node_modules/react-page-split'),
 			lodash$: path.resolve('./node_modules/lodash-es'),
 		};
 

package.json

@@ -40,26 +40,26 @@
   },
   "dependencies": {
     "@emotion/cache": "11.11.0",
-    "@flowplayer/player": "3.3.0",
+    "@flowplayer/player": "3.32.1",
     "@hookform/resolvers": "2.9.11",
-    "@meemoo/admin-core-ui": "4.7.2",
-    "@meemoo/react-components": "4.5.3",
+    "@meemoo/admin-core-ui": "5.1.11",
+    "@meemoo/react-components": "5.0.27",
     "@react-hook/resize-observer": "1.2.5",
     "@reduxjs/toolkit": "1.9.6",
     "@studiohyperdrive/pagination": "1.0.0",
-    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query": "5.90.7",
     "@types/openseadragon": "3.0.10",
-    "@viaa/avo2-components": "5.4.1",
-    "@viaa/avo2-types": "3.4.2",
+    "@viaa/avo2-components": "6.1.10",
+    "@viaa/avo2-types": "5.0.9",
     "autosize": "6.0.1",
     "blend-promise-utils": "1.29.2",
     "capture-stack-trace": "1.0.1",
     "clsx": "2.0.0",
     "copy-to-clipboard": "3.3.1",
     "cors": "2.8.5",
     "critters": "0.0.23",
-    "date-fns": "2.30.0",
-    "date-fns-tz": "2.0.0",
+    "date-fns": "3.6.0",
+    "date-fns-tz": "3.2.0",
     "file-saver": "2.0.5",
     "focus-trap-react": "8.11.0",
     "i": "^0.3.7",
@@ -85,20 +85,19 @@
     "react-datepicker": "4.21.0",
     "react-dom": "18.3.1",
     "react-highlight-words": "0.20.0",
-    "react-hook-form": "7.46.2",
+    "react-hook-form": "7.66.0",
     "react-infinite-scroll-component": "6.1.0",
     "react-masonry-css": "1.0.16",
     "react-modal": "3.14.4",
-    "react-page-split": "0.0.7",
     "react-perfect-scrollbar": "1.5.8",
     "react-popper": "2.3.0",
     "react-range": "1.8.14",
     "react-redux": "8.1.3",
-    "react-resizable-panels": "0.0.55",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-resizable-panels": "3.0.6",
+    "react-router": "7.9.1",
+    "react-router-dom": "7.9.1",
     "react-scrollbars-custom": "4.1.1",
-    "react-select": "5.7.4",
+    "react-select": "5.10.2",
     "react-table": "7.7.0",
     "react-to-string": "0.1.1",
     "react-toastify": "9.1.3",
@@ -176,7 +175,7 @@
     "postcss-preset-env": "7.0.1",
     "raf": "3.4.1",
     "redux-mock-store": "1.5.4",
-    "sass": "^1.66.1",
+    "sass": "1.93.3",
     "sass-loader": "12.4.0",
     "slice-ansi": "4.0.0",
     "style-loader": "3.3.1",

src/modules/account/const/my-history.const.tsx

@@ -1,19 +1,19 @@
-import { Button, OrderDirection } from '@meemoo/react-components';
-import type { MouseEvent } from 'react';
-import type { Column, UseSortByColumnOptions } from 'react-table';
-import { NumberParam, StringParam, withDefault } from 'use-query-params';
-
+import { Button } from '@meemoo/react-components';
 import { SortDirectionParam } from '@shared/helpers';
 import { tText } from '@shared/helpers/translate';
 import type { VisitRequest, VisitRow } from '@shared/types/visit-request';
 import { formatSameDayRange } from '@shared/utils/dates';
+import { AvoSearchOrderDirection } from '@viaa/avo2-types';
+import type { MouseEvent } from 'react';
+import type { Column, UseSortByColumnOptions } from 'react-table';
+import { NumberParam, StringParam, withDefault } from 'use-query-params';
 
 export const HistoryItemListSize = 20;
 
 export const ACCOUNT_HISTORY_QUERY_PARAM_CONFIG = {
 	page: withDefault(NumberParam, 1),
 	orderProp: withDefault(StringParam, 'startAt'),
-	orderDirection: withDefault(SortDirectionParam, OrderDirection.desc),
+	orderDirection: withDefault(SortDirectionParam, AvoSearchOrderDirection.DESC),
 };
 
 export const HistoryTableAccessComboId = 'account-history-from-to';

src/modules/account/hooks/get-folder-media.ts

@@ -1,26 +1,24 @@
-import type { IPagination } from '@studiohyperdrive/pagination';
-import { type UseQueryResult, useQuery } from '@tanstack/react-query';
-
 import { FoldersService } from '@account/services/folders';
 import type { FolderIeObject } from '@account/types';
 import { QUERY_KEYS } from '@shared/const/query-keys';
+import type { IPagination } from '@studiohyperdrive/pagination';
+import { type UseQueryResult, useQuery } from '@tanstack/react-query';
 
 export function useGetFolderMedia(
 	id: string | undefined,
 	searchInput: string | undefined,
 	page: number,
 	size: number
-): UseQueryResult<IPagination<FolderIeObject>> {
-	return useQuery(
-		[QUERY_KEYS.getCollectionMedia, searchInput, page, size],
-		() => {
+): UseQueryResult<IPagination<FolderIeObject> | undefined> {
+	return useQuery({
+		queryKey: [QUERY_KEYS.getCollectionMedia, searchInput, page, size],
+		queryFn: () => {
 			if (id) {
 				return FoldersService.getById(id, searchInput, page, size);
 			}
+			return undefined;
 		},
-		{
-			enabled: !!id,
-			retry: false, // Avoid delay when API returns 404 due to empty list
-		}
-	);
+		enabled: !!id,
+		retry: false, // Avoid delay when API returns 404 due to empty list
+	});
 }

src/modules/account/hooks/get-folders.ts

@@ -1,21 +1,20 @@
-import { type UseQueryResult, useQuery } from '@tanstack/react-query';
-import { useDispatch } from 'react-redux';
-
 import { FoldersService } from '@account/services/folders';
 import type { Folder } from '@account/types';
 import { QUERY_KEYS } from '@shared/const/query-keys';
 import { setFolders } from '@shared/store/ie-objects';
+import { type UseQueryResult, useQuery } from '@tanstack/react-query';
+import { useDispatch } from 'react-redux';
 
 export function useGetFolders(enabled = true): UseQueryResult<Folder[]> {
 	const dispatch = useDispatch();
 
-	return useQuery<Folder[]>(
-		[QUERY_KEYS.getCollections],
-		async () => {
+	return useQuery({
+		queryKey: [QUERY_KEYS.getCollections],
+		queryFn: async () => {
 			const response = await FoldersService.getAll();
 			dispatch(setFolders(response.items));
 			return response.items || [];
 		},
-		{ enabled }
-	);
+		enabled,
+	});
 }

src/modules/account/hooks/get-newsletter-preferences.ts

@@ -1,22 +1,25 @@
-import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { isEmpty, isNil } from 'lodash-es';
-
 import { QUERY_KEYS } from '@shared/const/query-keys';
 import { CampaignMonitorService } from '@shared/services/campaign-monitor-service';
 import type { GetNewsletterPreferencesResponse } from '@shared/types/newsletter';
+import { type UseQueryResult, useQuery } from '@tanstack/react-query';
+import { isEmpty, isNil } from 'lodash-es';
 
 export const useGetNewsletterPreferences = (
 	email: string | undefined
 ): UseQueryResult<GetNewsletterPreferencesResponse | null> => {
-	return useQuery([QUERY_KEYS.getNewsletterPreferences, email], () => {
-		if (isNil(email)) {
-			return null;
-		}
+	return useQuery({
+		queryKey: [QUERY_KEYS.getNewsletterPreferences, email],
+		queryFn: () => {
+			if (isNil(email)) {
+				return null;
+			}
 
-		if (isEmpty(email)) {
-			throw new Error(`Given email can't be empty. Received email: ${email}`);
-		}
+			if (isEmpty(email)) {
+				throw new Error(`Given email can't be empty. Received email: ${email}`);
+			}
 
-		return CampaignMonitorService.getPreferences(email);
+			return CampaignMonitorService.getPreferences(email);
+		},
+		enabled: !!email && !isEmpty(email),
 	});
 };

src/modules/account/services/folders/foldersService.ts

@@ -1,8 +1,7 @@
-import type { IPagination } from '@studiohyperdrive/pagination';
-import { stringifyUrl } from 'query-string';
-
 import type { Folder, FolderIeObject, SharedFolderResponse } from '@account/types';
 import { ApiService } from '@shared/services/api-service';
+import type { IPagination } from '@studiohyperdrive/pagination';
+import { stringifyUrl } from 'query-string';
 
 import {
 	FOLDERS_SERVICE_BASE_URL,
@@ -21,7 +20,7 @@ export abstract class FoldersService {
 		searchInput = '',
 		page = 0,
 		size = 20
-	): Promise<FolderIeObject> {
+	): Promise<IPagination<FolderIeObject>> {
 		return await ApiService.getApi()
 			.get(
 				stringifyUrl({

src/modules/account/views/AccountMyApplicationList.tsx

@@ -30,7 +30,6 @@ import {
 import {
 	formatDurationHoursMinutesSeconds,
 	formatDurationMinutesSeconds,
-	type OrderDirection,
 } from '@meemoo/react-components';
 import { ErrorNoAccess } from '@shared/components/ErrorNoAccess';
 import { Loading } from '@shared/components/Loading';
@@ -49,6 +48,7 @@ import {
 } from '@shared/store/ui';
 import type { DefaultSeoInfo } from '@shared/types/seo';
 import { asDate, formatMediumDate } from '@shared/utils/dates';
+import { AvoSearchOrderDirection } from '@viaa/avo2-types';
 import { VisitorLayout } from '@visitor-layout/index';
 import clsx from 'clsx';
 import { isEmpty, isNil } from 'lodash-es';
@@ -73,7 +73,7 @@ export const AccountMyApplicationList: FC<DefaultSeoInfo> = ({ url, canonicalUrl
 		refetch: refetchMaterialRequests,
 	} = useGetPendingMaterialRequests({
 		orderProp: MaterialRequestKeys.createdAt,
-		orderDirection: 'desc' as OrderDirection,
+		orderDirection: AvoSearchOrderDirection.DESC,
 	});
 
 	const noData = useMemo(

src/modules/account/views/AccountMyHistory.tsx

@@ -7,7 +7,7 @@ import {
 	Permission,
 } from '@account/const';
 import { AccountLayout } from '@account/layouts';
-import { OrderDirection, PaginationBar, Table } from '@meemoo/react-components';
+import { PaginationBar, Table } from '@meemoo/react-components';
 import { ErrorNoAccess } from '@shared/components/ErrorNoAccess';
 import { Loading } from '@shared/components/Loading';
 import { getDefaultPaginationBarProps } from '@shared/components/PaginationBar/PaginationBar.consts';
@@ -23,6 +23,7 @@ import { toastService } from '@shared/services/toast-service';
 import type { DefaultSeoInfo } from '@shared/types/seo';
 import { AccessStatus, type VisitRequest } from '@shared/types/visit-request';
 import { createVisitorSpacesWithFilterUrl } from '@shared/utils/create-url';
+import { AvoSearchOrderDirection } from '@viaa/avo2-types';
 import { useGetVisitAccessStatusMutation } from '@visit-requests/hooks/get-visit-access-status';
 import { useGetVisitRequests } from '@visit-requests/hooks/get-visit-requests';
 import { VisitorLayout } from '@visitor-layout/index';
@@ -48,7 +49,7 @@ export const AccountMyHistory: FC<DefaultSeoInfo> = ({ url, canonicalUrl }) => {
 		page: filters.page,
 		size: HistoryItemListSize,
 		orderProp: filters.orderProp as keyof VisitRequest,
-		orderDirection: filters.orderDirection as OrderDirection,
+		orderDirection: filters.orderDirection as AvoSearchOrderDirection,
 		personal: true,
 	});
 
@@ -61,7 +62,7 @@ export const AccountMyHistory: FC<DefaultSeoInfo> = ({ url, canonicalUrl }) => {
 		return [
 			{
 				id: filters.orderProp,
-				desc: filters.orderDirection !== OrderDirection.asc,
+				desc: filters.orderDirection !== AvoSearchOrderDirection.ASC,
 			},
 		];
 	}, [filters]);
@@ -70,18 +71,18 @@ export const AccountMyHistory: FC<DefaultSeoInfo> = ({ url, canonicalUrl }) => {
 
 	const onSortChange = (
 		orderProp: string | undefined,
-		orderDirection: OrderDirection | undefined
+		orderDirection: AvoSearchOrderDirection | undefined
 	) => {
 		let orderPropResolved: string | undefined = orderProp;
-		let orderDirectionResolved: OrderDirection | undefined = orderDirection;
+		let orderDirectionResolved: AvoSearchOrderDirection | undefined = orderDirection;
 		if (orderPropResolved === HistoryTableAccessComboId) {
 			orderPropResolved = HistoryTableAccessFrom;
 		}
 		if (!orderPropResolved) {
 			orderPropResolved = 'startAt';
 		}
 		if (!orderDirectionResolved) {
-			orderDirectionResolved = OrderDirection.desc;
+			orderDirectionResolved = AvoSearchOrderDirection.DESC;
 		}
 		if (
 			filters.orderProp !== orderPropResolved ||

src/modules/account/views/AccountMyMaterialRequests.tsx

@@ -20,7 +20,6 @@ import {
 import {
 	MultiSelect,
 	type MultiSelectOption,
-	OrderDirection,
 	PaginationBar,
 	type Row,
 	Table,
@@ -40,6 +39,7 @@ import { tHtml, tText } from '@shared/helpers/translate';
 import { useHasAnyPermission } from '@shared/hooks/has-permission';
 import { useLocale } from '@shared/hooks/use-locale/use-locale';
 import type { DefaultSeoInfo } from '@shared/types/seo';
+import { AvoSearchOrderDirection } from '@viaa/avo2-types';
 import { VisitorLayout } from '@visitor-layout/index';
 import clsx from 'clsx';
 import { isEmpty, isNil, noop } from 'lodash-es';
@@ -72,7 +72,7 @@ export const AccountMyMaterialRequests: FC<DefaultSeoInfo> = ({ url, canonicalUr
 			orderProp: filters.orderProp as MaterialRequestKeys,
 		}),
 		...(!isNil(filters.orderDirection) && {
-			orderDirection: filters.orderDirection as OrderDirection,
+			orderDirection: filters.orderDirection as AvoSearchOrderDirection,
 		}),
 		...(!isNil(filters[QUERY_PARAM_KEY.SEARCH_QUERY_KEY]) && {
 			search: filters[QUERY_PARAM_KEY.SEARCH_QUERY_KEY],
@@ -130,7 +130,7 @@ export const AccountMyMaterialRequests: FC<DefaultSeoInfo> = ({ url, canonicalUr
 		(): SortingRule<{ id: MaterialRequestKeys; desc: boolean }>[] => [
 			{
 				id: filters.orderProp,
-				desc: filters.orderDirection !== OrderDirection.asc,
+				desc: filters.orderDirection !== AvoSearchOrderDirection.ASC,
 			},
 		],
 		[filters]
@@ -165,13 +165,13 @@ export const AccountMyMaterialRequests: FC<DefaultSeoInfo> = ({ url, canonicalUr
 
 	const onSortChange = (
 		orderProp: string | undefined,
-		orderDirection: OrderDirection | undefined
+		orderDirection: AvoSearchOrderDirection | undefined
 	): void => {
 		if (filters.orderProp === MaterialRequestKeys.requestedAt && orderDirection === undefined) {
 			setFilters({
 				...filters,
 				orderProp,
-				orderDirection: OrderDirection.asc,
+				orderDirection: AvoSearchOrderDirection.ASC,
 				page: 1,
 			});
 		} else if (filters.orderProp !== orderProp || filters.orderDirection !== orderDirection) {

src/modules/admin/const/Spaces.const.tsx

@@ -1,8 +1,5 @@
-import { Button, OrderDirection } from '@meemoo/react-components';
-import Link from 'next/link';
-import { NumberParam, StringParam, withDefault } from 'use-query-params';
-
 import type { AdminVisitorSpaceInfoRow } from '@admin/types';
+import { Button } from '@meemoo/react-components';
 import { DropdownMenu } from '@shared/components/DropdownMenu';
 import { Icon } from '@shared/components/Icon';
 import { IconNamesLight } from '@shared/components/Icon/Icon.enums';
@@ -12,12 +9,15 @@ import { SortDirectionParam } from '@shared/helpers';
 import { tText } from '@shared/helpers/translate';
 import { asDate, formatMediumDate } from '@shared/utils/dates';
 import { Locale } from '@shared/utils/i18n';
+import { AvoSearchOrderDirection } from '@viaa/avo2-types';
 import {
 	type VisitorSpaceInfo,
 	VisitorSpaceOrderProps,
 	VisitorSpaceStatus,
 } from '@visitor-space/types';
+import Link from 'next/link';
 import type { Column } from 'react-table';
+import { NumberParam, StringParam, withDefault } from 'use-query-params';
 
 export const VisitorSpacesOverviewTablePageSize = 20;
 
@@ -26,7 +26,7 @@ export const ADMIN_VISITOR_SPACES_OVERVIEW_QUERY_PARAM_CONFIG = {
 	status: withDefault(StringParam, 'ALL'),
 	page: withDefault(NumberParam, 1),
 	orderProp: withDefault(StringParam, VisitorSpaceOrderProps.OrganisationName),
-	orderDirection: withDefault(SortDirectionParam, OrderDirection.asc),
+	orderDirection: withDefault(SortDirectionParam, AvoSearchOrderDirection.ASC),
 };
 
 export const VisitorSpacesOverviewTableColumns = (