Feat(router): Add placeholder page for ARK loader

packages/demo/package.json

@@ -22,7 +22,8 @@
 		"i18next-resources-to-backend": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
-		"react-i18next": "catalog:"
+		"react-i18next": "catalog:",
+		"react-router": "catalog:"
 	},
 	"devDependencies": {
 		"@types/node": "catalog:",

packages/demo/src/App.tsx

@@ -1,24 +1,40 @@
 import { ThemeProvider } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
+import { createHashRouter, RouterProvider } from "react-router";
 
 import { I18nProvider } from "./i18n/I18nProvider";
 import { Layout } from "./layout/Layout";
+import { Loader } from "./layout/Loader";
+import { ArkViewer, arkViewerLoader } from "./modules/ark-viewer/ArkViewer";
+import { FileViewer } from "./modules/file-viewer/FileViewer";
 import theme from "./theme";
-import { UploadPage } from "./upload/UploadPage";
-import { ViewerContextProvider } from "./viewer/ViewerContext";
-import { ViewerPage } from "./viewer/ViewerPage";
+
+const router = createHashRouter([
+	{
+		path: "/",
+		Component: Layout,
+		children: [
+			{
+				index: true,
+				Component: FileViewer,
+			},
+
+			{
+				path: "ark/:id",
+				loader: arkViewerLoader,
+				HydrateFallback: Loader,
+				Component: ArkViewer,
+			},
+		],
+	},
+]);
 
 function App() {
 	return (
 		<ThemeProvider theme={theme}>
 			<I18nProvider>
-				<Layout>
-					<CssBaseline />
-					<ViewerContextProvider>
-						<UploadPage />
-						<ViewerPage />
-					</ViewerContextProvider>
-				</Layout>
+				<CssBaseline />
+				<RouterProvider router={router} />
 			</I18nProvider>
 		</ThemeProvider>
 	);

packages/demo/src/i18n/locales/en.ts

@@ -37,4 +37,8 @@ export const en: Translation = {
 			buttonLabel: "Teeft Enrichment",
 		},
 	},
+	ark: {
+		documentNotFound: "The requested document was not found.",
+		goToIstexSearch: "Return to Istex Search",
+	},
 };

packages/demo/src/i18n/locales/fr.ts

@@ -35,6 +35,10 @@ export const fr = {
 			buttonLabel: "Enrichissement TEEFT",
 		},
 	},
+	ark: {
+		documentNotFound: "Le document demandé n'a pas été trouvé.",
+		goToIstexSearch: "Retourner sur Istex Search",
+	},
 };
 
 export type Translation = typeof fr;

packages/demo/src/layout/Layout.tsx

@@ -1,12 +1,13 @@
+import { Outlet } from "react-router";
 import Header from "./Header";
 import Navbar from "./NavBar";
 
-export function Layout({ children }: { children: React.ReactNode }) {
+export function Layout() {
 	return (
 		<>
 			<Navbar />
 			<Header />
-			{children}
+			<Outlet />
 		</>
 	);
 }

packages/demo/src/layout/Loader.tsx

@@ -0,0 +1,18 @@
+import CircularProgress from "@mui/material/CircularProgress";
+import Container from "@mui/material/Container";
+
+export function Loader() {
+	return (
+		<Container
+			maxWidth="sm"
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				flexGrow: 1,
+			}}
+		>
+			<CircularProgress size={48} />
+		</Container>
+	);
+}

packages/demo/src/modules/ark-viewer/ArkViewer.tsx

@@ -0,0 +1,92 @@
+import { Viewer } from "@istex/react-tei/Viewer.js";
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import Alert from "@mui/material/Alert";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
+import Link from "@mui/material/Link";
+import { useTranslation } from "react-i18next";
+import { type LoaderFunction, useLoaderData } from "react-router";
+import document from "./document/minimal.tei.xml?raw";
+import unitexEnrichment from "./document/minimal.unitex.xml?raw";
+
+export type ArkViewerLoaderData = {
+	document: string | null;
+	unitexEnrichment?: string | null;
+	teeftEnrichment?: string | null;
+	multicatEnrichment?: string | null;
+	nbEnrichment?: string | null;
+};
+
+export const arkViewerLoader: LoaderFunction = async ({
+	params,
+}): Promise<ArkViewerLoaderData> => {
+	const { id } = params;
+
+	/**
+	 * Simulate loading time
+	 * @todo In a real app, you would fetch the document by its id here
+	 */
+	await new Promise((resolve) => setTimeout(resolve, 1000));
+
+	if (!id) {
+		return {
+			document: null,
+		};
+	}
+
+	return {
+		document,
+		unitexEnrichment,
+	};
+};
+
+export function ArkViewer() {
+	const { document, ...rest } = useLoaderData<ArkViewerLoaderData>();
+
+	if (!document) {
+		return <DocumentNotFound />;
+	}
+
+	return (
+		<Viewer
+			document={document}
+			{...rest}
+			height="calc(100dvh - 49.5px - 118.5px)"
+		/>
+	);
+}
+
+function DocumentNotFound() {
+	const { t } = useTranslation();
+	return (
+		<Container
+			maxWidth="sm"
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				flexDirection: "column",
+				gap: 2,
+				flexGrow: 1,
+			}}
+		>
+			<Alert
+				severity="warning"
+				sx={{
+					width: "100%",
+				}}
+			>
+				{t("ark.documentNotFound")}
+			</Alert>
+			<Button
+				component={Link}
+				href="https://search.istex.fr/fr-FR"
+				fullWidth
+				variant="contained"
+				startIcon={<KeyboardBackspaceIcon />}
+			>
+				{t("ark.goToIstexSearch")}
+			</Button>
+		</Container>
+	);
+}

packages/demo/src/modules/ark-viewer/document/minimal.tei.xml

@@ -0,0 +1,76 @@
+<TEI version="3.3.0" xmlns="http://www.tei-c.org/ns/1.0">
+      <teiHeader>
+            <fileDesc>
+                  <titleStmt>
+                        <title>The shortest TEI Document Imaginable</title>
+                  </titleStmt>
+                  <publicationStmt>
+                        <p>First published as part of TEI P2, this is the P5
+                              version using a namespace.</p>
+                  </publicationStmt>
+                  <sourceDesc>
+                        <p>No source: this is an original work.</p>
+                  </sourceDesc>
+            </fileDesc>
+      </teiHeader>
+      <text>
+            <body>
+                  <div>
+                        <head>Correspondance simple</head>
+                        <p>lorem ipsum Gustave Eiffel</p>
+
+                        <head>Entité encadrée par une ponctuation</head>
+                        <p>lorem ipsum (Gustave Eiffel)</p>
+
+                        <head>Entité suivie d'une ponctuation</head>
+                        <p>Gustave Eiffel, lorem ipsum</p>
+
+                        <head>Entité avec abréviation</head>
+                        <p>Eiffel G., lorem ipsum</p>
+
+                        <head>Entité contenant un caractère HTML</head>
+                        <p>Gustave&#9;Eiffel, lorem ipsum</p>
+                  </div>
+                  <div>
+                        <head>Juxtaposition</head>
+                        <p>Gustave Eiffel Marie Curie</p>
+                  </div>
+                  <div>
+                        <head>Rendition complète : L'intégralité de l'entité est formatée</head>
+                        <p>lorem ipsum <hi rend="bold">Gustave Eiffel</hi></p>
+
+                        <head>Rendition partielle : L'entité est partiellement formatée</head>
+                        <p>lorem ipsum (Gustave <hi rend="bold">Eiffel</hi>)</p>
+
+                        <head>Rendition imbriquée : Renditions imbriquées sur l'entité</head>
+                        <p>lorem ipsum (<hi rend="italic">Gustave <hi rend="bold">Eiffel</hi></hi>)</p>
+                  </div>
+                  <div>
+                        <head>Inclusion totale : Une entité est complètement incluse dans une autre</head>
+                        <p>Laboratoire Marie Curie de l'Université Saclay</p>
+                  </div>
+                  <div>
+                        <head>Overlap : Une entité est partiellement incluse dans une autre</head>
+                        <p>Université Gustave Eiffel, lorem ipsum</p>
+                  </div>
+
+                  <div>
+                        <head>Titre avec annotation: Gustave Eiffel</head>
+                        <p>Gustave Eiffel</p>
+                  </div>
+                  <div>
+                        <head>
+                              Overlap: deux annotations du même groupe se chevauchent partiellement
+                        </head>
+                        <p>Gustave Eiffel G.</p>
+                  </div>
+                  <div>
+                        <head>
+                              Overlap: deux annotations de groupes différents se chevauchent
+                              partiellement
+                        </head>
+                        <p>Université Gustave Eiffel G.</p>
+                  </div>
+            </body>
+      </text>
+</TEI>