Feature/carousel new block

package.json

@@ -95,6 +95,6 @@
     "stylelint-config-standard-scss": "3.0.0",
     "ts-jest": "27.1.3",
     "ts-node": "10.7.0",
-    "typescript": "4.5.5"
+    "typescript": "5.9.3"
   }
 }

ui/biome.json

@@ -7,7 +7,11 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": ["src/**", "scripts/**", "!src/react-admin/modules/shared/helpers/map-deep/map-deep.mocks.ts"]
+    "includes": [
+      "src/**",
+      "scripts/**",
+      "!src/react-admin/modules/shared/helpers/map-deep/map-deep.mocks.ts"
+    ]
   },
   "formatter": {
     "enabled": true,

ui/package.json

@@ -45,13 +45,15 @@
     "serve": "vite preview",
     "copy-to-client-hetarchief": "rimraf ../../hetarchief-client/node_modules/@meemoo/admin-core-ui/dist ../../hetarchief-client/node_modules/.cache ../../hetarchief-client/.swc ../../hetarchief-client/.next && rimraf ../../hetarchief-client/.next && cp -r dist package.json ../../hetarchief-client/node_modules/@meemoo/admin-core-ui",
     "copy-to-client-avo": "rimraf ../../avo2-client/node_modules/@meemoo/admin-core-ui/dist ../../avo2-client/node_modules/.cache  ../../avo2-client/node_modules/.vite && cp -r dist package.json ../../avo2-client/node_modules/@meemoo/admin-core-ui",
-    "copy": "vite build && npm run copy-to-client-avo && npm run copy-to-client-hetarchief",
-    "copy:avo": "vite build && npm run copy-to-client-avo",
-    "copy:hetarchief": "vite build && npm run copy-to-client-hetarchief",
+    "copy": "npm run build && npm run copy-to-client-avo && npm run copy-to-client-hetarchief",
+    "copy:avo": "npm run build && npm run copy-to-client-avo",
+    "copy:hetarchief": "npm run build && npm run copy-to-client-hetarchief",
     "lint": "npm run lint:ts && npm run lint:scss",
     "lint:ts": "biome lint --write .",
     "lint:scss": "stylelint --fix src/**/*.{css,scss}",
     "format": "biome format --write src",
+    "biome": "biome ci",
+    "biome:fix": "biome check --write",
     "test": "vitest",
     "type-check": "tsc --noEmit",
     "build:analyze": "npx vite-bundle-visualizer",
@@ -186,7 +188,8 @@
   },
   "dependencies": {
     "jsdom": "27.4.0",
-    "memoizee": "0.4.17"
+    "memoizee": "0.4.17",
+    "swiper": "14.0.5"
   },
   "allowScripts": {
     "@parcel/watcher@2.5.6": true,

ui/scripts/execute-database-query.ts

@@ -1,41 +1,41 @@
-import fetch, { Headers } from "node-fetch";
+import fetch, { Headers } from 'node-fetch';
 
 export async function executeDatabaseQuery(
-	app: "AVO" | "HET_ARCHIEF",
+	app: 'AVO' | 'HET_ARCHIEF',
 	query: string,
 	// biome-ignore lint/suspicious/noExplicitAny: todo
 	variables: any = {},
-	env: "LOCAL" | "QAS" = "LOCAL",
+	env: 'LOCAL' | 'QAS' = 'LOCAL'
 	// biome-ignore lint/suspicious/noExplicitAny: todo
 ): Promise<any> {
 	if (
-		env === "LOCAL" &&
+		env === 'LOCAL' &&
 		(!process.env.GRAPHQL_URL_AVO ||
 			!process.env.GRAPHQL_SECRET_AVO ||
 			!process.env.GRAPHQL_URL_HETARCHIEF ||
 			!process.env.GRAPHQL_SECRET_HETARCHIEF)
 	) {
 		throw new Error(
-			"Missing environment variables. One or more of these are missing: GRAPHQL_URL_AVO, GRAPHQL_SECRET_AVO, GRAPHQL_URL_HETARCHIEF, GRAPHQL_SECRET_HETARCHIEF",
+			'Missing environment variables. One or more of these are missing: GRAPHQL_URL_AVO, GRAPHQL_SECRET_AVO, GRAPHQL_URL_HETARCHIEF, GRAPHQL_SECRET_HETARCHIEF'
 		);
 	}
 	if (
-		env === "QAS" &&
+		env === 'QAS' &&
 		(!process.env.GRAPHQL_URL_AVO_QAS ||
 			!process.env.GRAPHQL_SECRET_AVO_QAS ||
 			!process.env.GRAPHQL_URL_HETARCHIEF_QAS ||
 			!process.env.GRAPHQL_SECRET_HETARCHIEF_QAS)
 	) {
 		throw new Error(
-			"Missing environment variables. One or more of these are missing: GRAPHQL_URL_AVO_QAS, GRAPHQL_SECRET_AVO_QAS, GRAPHQL_URL_HETARCHIEF_QAS, GRAPHQL_SECRET_HETARCHIEF_QAS",
+			'Missing environment variables. One or more of these are missing: GRAPHQL_URL_AVO_QAS, GRAPHQL_SECRET_AVO_QAS, GRAPHQL_URL_HETARCHIEF_QAS, GRAPHQL_SECRET_HETARCHIEF_QAS'
 		);
 	}
-	let graphQlUrl = "";
-	let graphQlPassword = "";
-	if (env === "QAS") {
-		if (env === "QAS") {
+	let graphQlUrl = '';
+	let graphQlPassword = '';
+	if (env === 'QAS') {
+		if (env === 'QAS') {
 			// We need the QAS database environment variables to fetch the latest translations and QAS is the "master" of all translations
-			if (app === "AVO") {
+			if (app === 'AVO') {
 				graphQlUrl = process.env.GRAPHQL_URL_AVO_QAS as string;
 				graphQlPassword = process.env.GRAPHQL_SECRET_AVO_QAS as string;
 			} else {
@@ -44,7 +44,7 @@ export async function executeDatabaseQuery(
 			}
 		}
 	} else {
-		if (app === "AVO") {
+		if (app === 'AVO') {
 			graphQlUrl = process.env.GRAPHQL_URL_AVO as string;
 			graphQlPassword = process.env.GRAPHQL_SECRET_AVO as string;
 		} else {
@@ -53,16 +53,16 @@ export async function executeDatabaseQuery(
 		}
 	}
 	const requestHeaders = new Headers();
-	requestHeaders.append("Content-Type", "application/json");
-	requestHeaders.append("x-hasura-admin-secret", graphQlPassword);
+	requestHeaders.append('Content-Type', 'application/json');
+	requestHeaders.append('x-hasura-admin-secret', graphQlPassword);
 
 	const raw = JSON.stringify({
 		query,
 		variables,
 	});
 
 	const requestOptions = {
-		method: "POST",
+		method: 'POST',
 		headers: requestHeaders,
 		body: raw,
 	};

ui/scripts/extract-and-replace-translations.ts

@@ -140,7 +140,7 @@ function reconstructVariablesInFallback(fallback: string, variables: string[]):
 }
 
 function getFallbackTranslation(key: string, variables: string[] = []): string {
-	const fallback = `${upperFirst(lowerCase(key.split(TRANSLATION_SEPARATOR).pop()))}`;
+	const fallback = `${upperFirst(lowerCase(key.split(TRANSLATION_SEPARATOR).pop() as string))}`;
 	if (variables.length === 0) return fallback;
 	return reconstructVariablesInFallback(fallback, variables);
 }
@@ -777,10 +777,7 @@ async function extractTranslations() {
 	console.info(`Writing SQL file: ${sqlFilePath}`);
 	const uniqueTranslations = [
 		...new Map(
-			allTranslations.map((t) => [
-				`${t.component}|${t.location}|${t.key}|${t.language}`,
-				t,
-			])
+			allTranslations.map((t) => [`${t.component}|${t.location}|${t.key}|${t.language}`, t])
 		).values(),
 	];
 	let sql: string = uniqueTranslations

ui/scripts/tsconfig.json

@@ -1,12 +1,12 @@
 {
-	"extends": "../tsconfig.json",
-	"compilerOptions": {
-		"module": "ES2022",
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2022",
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowImportingTsExtensions": true
-	},
-	"files": [
+  },
+  "files": [
     "backup-translations.ts",
     "execute-database-query.ts",
     "extract-and-replace-translations.ts"

ui/src/client.ts

@@ -19,6 +19,7 @@ export { BlockIntro } from '~content-blocks/BlockIntro';
 export { BlockKlaar } from '~content-blocks/BlockKlaar';
 export { BlockMaintainersGrid } from '~content-blocks/BlockMaintainersGrid';
 export { BlockOverviewNewspaperTitles } from '~content-blocks/BlockOverviewNewspaperTitles';
+export { BlockOverviewWithCarousel } from '~content-blocks/BlockOverviewWithCarousel';
 export { BlockPageOverviewWrapper } from '~content-blocks/BlockPageOverview/BlockPageOverview.wrapper';
 export { BlockQuote } from '~content-blocks/BlockQuote';
 export { BlockRichText } from '~content-blocks/BlockRichText';

ui/src/react-admin/core/config/config.types.ts

@@ -47,9 +47,11 @@ export interface LinkInfo {
 	className?: string;
 	to?: string;
 	onClick?: (evt: MouseEvent) => void;
+	onKeyUp?: (evt: KeyboardEvent) => void;
 	title?: string;
 	children: ReactNode;
 	target?: LinkTarget;
+	tabIndex?: number;
 }
 
 export type NavigateFunction = (to: string, options?: { replace?: boolean }) => Promise<void>;
@@ -169,6 +171,7 @@ export interface IconConfig {
 		angleRight: IconComponentProps;
 		anglesLeft: IconComponentProps;
 		anglesRight: IconComponentProps;
+		arrowLeft: IconComponentProps;
 		arrowRight: IconComponentProps;
 		delete: IconComponentProps;
 		extraOptions: IconComponentProps;

ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.const.tsx

@@ -22,6 +22,7 @@ import { BlockIntro } from '~content-blocks/BlockIntro';
 import { BlockKlaar } from '~content-blocks/BlockKlaar';
 import { BlockMaintainersGrid } from '~content-blocks/BlockMaintainersGrid';
 import { BlockOverviewNewspaperTitles } from '~content-blocks/BlockOverviewNewspaperTitles';
+import { BlockOverviewWithCarousel } from '~content-blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.tsx';
 import { BlockPageOverviewWrapper } from '~content-blocks/BlockPageOverview';
 import { BlockQuote } from '~content-blocks/BlockQuote';
 import { BlockRichTextWrapper } from '~content-blocks/BlockRichText';
@@ -85,6 +86,7 @@ export function GET_BLOCK_COMPONENT(
 		),
 		[ContentBlockType.Breadcrumbs]: BlockBreadcrumbs,
 		[ContentBlockType.HetArchiefImageTextBackground]: BlockHetArchiefImageTextBackground,
+		[ContentBlockType.OverviewWithCarousel]: BlockOverviewWithCarousel,
 
 		// Avo specific blocks
 		[ContentBlockType.MediaGrid]: loadComponentFromConfig(ContentBlockType.MediaGrid),

ui/src/react-admin/modules/content-page/components/blocks/BlockAvoHero/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockAvoHero.editorconfig';
 export * from './BlockAvoHero';
+export * from './BlockAvoHero.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockAvoImageTextBackground/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockAvoImageTextBackground.editorconfig';
 export * from './BlockAvoImageTextBackground';
+export * from './BlockAvoImageTextBackground.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockBreadcrumbs/index.ts

@@ -1,2 +1,2 @@
-export { CONTENT_BREADCRUMBS_CONFIG } from './BlockBreadcrumbs.editorconfig';
 export { BlockBreadcrumbs } from './BlockBreadcrumbs';
+export { CONTENT_BREADCRUMBS_CONFIG } from './BlockBreadcrumbs.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockButtons/index.ts

@@ -1,3 +1,3 @@
-export * from './BlockButtons.editorconfig';
 export * from './BlockButtons';
+export * from './BlockButtons.editorconfig';
 export * from './BlockButtons.wrapper';

ui/src/react-admin/modules/content-page/components/blocks/BlockCTAs/BlockCTAs.editorconfig.ts

@@ -1,19 +1,19 @@
 import type { CTAProps } from '@viaa/avo2-components';
+import { AdminConfigManager } from '~core/config/config.class';
 import {
 	GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF,
 	GET_BACKGROUND_COLOR_OPTIONS_AVO,
 } from '~modules/content-page/const/get-color-options';
 import { GET_HEADING_TYPE_OPTIONS } from '~modules/content-page/const/get-heading-type-options';
-import { isAvo } from '~shared/helpers/is-avo';
 
 import { GET_ADMIN_ICON_OPTIONS } from '~shared/consts/icons.consts';
+import { isAvo } from '~shared/helpers/is-avo';
 import { tText } from '~shared/helpers/translation-functions';
 import type {
 	ContentBlockConfig,
 	DefaultContentBlockState,
 } from '../../../types/content-block.types';
 import { ContentBlockEditor, ContentBlockType } from '../../../types/content-block.types';
-
 import {
 	BACKGROUND_COLOR_FIELD,
 	BLOCK_FIELD_DEFAULTS,
@@ -22,8 +22,6 @@ import {
 	TEXT_FIELD,
 } from '../defaults';
 
-import { AdminConfigManager } from '~core/config/config.class';
-
 const EMPTY_CTA: Partial<CTAProps> = {
 	headingType: 'h2',
 	heading: '',

ui/src/react-admin/modules/content-page/components/blocks/BlockCTAs/index.ts

@@ -1,3 +1,3 @@
-export * from './BlockCTAs.editorconfig';
 export * from './BlockCTAs';
+export * from './BlockCTAs.editorconfig';
 export * from './BlockCTAs.wrapper';

ui/src/react-admin/modules/content-page/components/blocks/BlockCardsWithoutDescription/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockCardsWithoutDescription.editorconfig';
 export * from './BlockCardsWithoutDescription';
+export * from './BlockCardsWithoutDescription.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockContentPageMeta/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockContentPageMeta.editorconfig';
 export * from './BlockContentPageMeta';
+export * from './BlockContentPageMeta.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockEventbrite/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockEventbrite.editorconfig';
 export * from './BlockEventbrite';
+export * from './BlockEventbrite.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockHeading/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockHeading.editorconfig';
 export * from './BlockHeading';
+export * from './BlockHeading.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockHetArchiefHeaderSearch.editorconfig';
 export * from './BlockHetArchiefHeaderSearch';
+export * from './BlockHetArchiefHeaderSearch.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefImageTextBackground/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockHetArchiefImageTextBackground.editorconfig';
 export * from './BlockHetArchiefImageTextBackground';
+export * from './BlockHetArchiefImageTextBackground.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockIFrame/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockIFrame.editorconfig';
 export * from './BlockIFrame';
+export * from './BlockIFrame.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockImage/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockImage.editorconfig';
 export * from './BlockImage';
+export * from './BlockImage.editorconfig';

ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/index.ts

@@ -1,5 +1,5 @@
-export * from './BlockImageGrid.editorconfig';
 export * from './BlockImageGrid';
+export * from './BlockImageGrid.editorconfig';
 export * from './BlockImageGrid.types';
 export * from './BlockImageGrid.wrapper';
 export * from './BlockLogoGrid.editorconfig';