Merge pull request #26 from istex/exploration

jonathanarnault · web-flow · commit 6ea3efdde96c · 2025-12-16T10:43:56.000+01:00
Setup fast-xml-parser and Viewer componennt displaying the title and body text (no css yet)
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
 		"@types/node": "catalog:",
 		"husky": "catalog:",
 		"playwright": "catalog:",
-		"turbo": "catalog:"
+		"turbo": "catalog:",
+		"typescript": "catalog:"
 	},
 	"packageManager": "pnpm@10.25.0+sha512.5e82639027af37cf832061bcc6d639c219634488e0f2baebe785028a793de7b525ffcd3f7ff574f5e9860654e098fe852ba8ac5dd5cefe1767d23a020a92f501"
 }
diff --git a/packages/demo/src/App.spec.tsx b/packages/demo/src/App.spec.tsx
@@ -15,16 +15,38 @@ describe("App", () => {
 	it("should render the XML document when a file is uploaded", async () => {
 		const screen = await render(<App />);
 
-		const file = new File(["<TEI></TEI>"], "example.tei", {
-			type: "text/plain",
-		});
+		const file = new File(
+			[
+				`<?xml version="1.0" encoding="UTF-8"?>
+				<TEI xmlns:ns1="https://xml-schema.delivery.istex.fr/formats/ns1.xsd"
+					xmlns="http://www.tei-c.org/ns/1.0"
+					xmlns:tei="http://www.tei-c.org/ns/1.0"
+					xmlns:sa="http://www.elsevier.com/xml/common/struct-aff/dtd"
+					xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+					xsi:noNamespaceSchemaLocation="https://xml-schema.delivery.istex.fr/formats/tei-istex.xsd"
+					xml:lang="en"
+				>
+					<teiHeader>
+						<fileDesc>
+							<titleStmt>
+								<title level="a" type="main">TEI Test Title</title>
+							</titleStmt>
+						</fileDesc>
+					</teiHeader>
+				</TEI>`,
+			],
+			"example.tei",
+			{
+				type: "text/plain",
+			},
+		);
 
 		const input = screen.getByTestId("file-selector-input");
 
 		await userEvent.upload(input, file);
 
 		await vi.waitFor(() => {
-			expect(screen.getByText(/<TEI><\/TEI>/)).toBeInTheDocument();
+			expect(screen.getByText("TEI Test Title")).toBeInTheDocument();
 		});
 	});
 });
diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
@@ -15,5 +15,4 @@ function App() {
 		</>
 	);
 }
-
 export default App;
diff --git a/packages/demo/src/viewer/ViewerPage.spec.tsx b/packages/demo/src/viewer/ViewerPage.spec.tsx
@@ -5,7 +5,23 @@ import { ViewerPage } from "./ViewerPage.js";
 vi.mock("./useViewerContext", () => {
 	return {
 		useViewerContext: vi.fn().mockReturnValue({
-			document: "<tei>This is a test</tei>",
+			document: `<?xml version="1.0" encoding="UTF-8"?>
+				<TEI xmlns:ns1="https://xml-schema.delivery.istex.fr/formats/ns1.xsd"
+					xmlns="http://www.tei-c.org/ns/1.0"
+					xmlns:tei="http://www.tei-c.org/ns/1.0"
+					xmlns:sa="http://www.elsevier.com/xml/common/struct-aff/dtd"
+					xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+					xsi:noNamespaceSchemaLocation="https://xml-schema.delivery.istex.fr/formats/tei-istex.xsd"
+					xml:lang="en"
+				>
+					<teiHeader>
+						<fileDesc>
+							<titleStmt>
+								<title level="a" type="main">TEI Test Title</title>
+							</titleStmt>
+						</fileDesc>
+					</teiHeader>
+				</TEI>`,
 		}),
 	};
 });
@@ -14,6 +30,6 @@ describe("ViewerPage", () => {
 	it("should render Viewer when document is provided", async () => {
 		const screen = await render(<ViewerPage />);
 
-		expect(screen.getByText("<tei>This is a test</tei>")).toBeInTheDocument();
+		expect(screen.getByText("TEI Test Title")).toBeInTheDocument();
 	});
 });
diff --git a/packages/e2e/src/document.spec.ts b/packages/e2e/src/document.spec.ts
@@ -12,5 +12,5 @@ test("open a document", async ({ page }) => {
 		path.join(import.meta.dirname, "../testdata/document.tei"),
 	);
 
-	expect(page.getByText("<TEI></TEI>")).toBeVisible();
+	expect(page.getByText("TEI Test Title")).toBeVisible();
 });
diff --git a/packages/e2e/testdata/document.tei b/packages/e2e/testdata/document.tei
@@ -1 +1,17 @@
-<TEI></TEI>
+<?xml version="1.0" encoding="UTF-8"?>
+<TEI xmlns:ns1="https://xml-schema.delivery.istex.fr/formats/ns1.xsd"
+    xmlns="http://www.tei-c.org/ns/1.0"
+    xmlns:tei="http://www.tei-c.org/ns/1.0"
+    xmlns:sa="http://www.elsevier.com/xml/common/struct-aff/dtd"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:noNamespaceSchemaLocation="https://xml-schema.delivery.istex.fr/formats/tei-istex.xsd"
+    xml:lang="en"
+>
+    <teiHeader>
+        <fileDesc>
+            <titleStmt>
+                <title level="a" type="main">TEI Test Title</title>
+            </titleStmt>
+        </fileDesc>
+    </teiHeader>
+</TEI>
diff --git a/packages/react-tei/package.json b/packages/react-tei/package.json
@@ -17,7 +17,8 @@
 		"@mui/icons-material": "catalog:",
 		"@mui/material": "catalog:",
 		"react": "catalog:",
-		"react-dom": "catalog:"
+		"react-dom": "catalog:",
+		"fast-xml-parser": "catalog:"
 	},
 	"devDependencies": {
 		"@types/node": "catalog:",
diff --git a/packages/react-tei/src/DocumentBody.tsx b/packages/react-tei/src/DocumentBody.tsx
@@ -0,0 +1,11 @@
+import { DocumentTag } from "./tags/DocumentTag.js";
+
+export const DocumentBody = ({
+	jsonDocument,
+}: {
+	jsonDocument: {
+		TEI: Record<string, unknown>;
+	};
+}) => {
+	return <DocumentTag name="TEI" data={jsonDocument.TEI} />;
+};
diff --git a/packages/react-tei/src/DocumentContextProvider.tsx b/packages/react-tei/src/DocumentContextProvider.tsx
@@ -0,0 +1,27 @@
+import { createContext } from "react";
+
+export type DocumentContextType = {
+	jsonDocument: Record<string, unknown> | null;
+};
+
+export const DocumentContext = createContext<DocumentContextType | undefined>(
+	undefined,
+);
+
+export function DocumentContextProvider({
+	children,
+	jsonDocument,
+}: {
+	children: React.ReactNode;
+	jsonDocument: Record<string, unknown> | null;
+}) {
+	return (
+		<DocumentContext.Provider
+			value={{
+				jsonDocument,
+			}}
+		>
+			{children}
+		</DocumentContext.Provider>
+	);
+}
diff --git a/packages/react-tei/src/DocumentDrawer.tsx b/packages/react-tei/src/DocumentDrawer.tsx
@@ -0,0 +1,7 @@
+type DocumentDrawerProps = {
+	teiHeader: Record<string, unknown>;
+};
+
+export const DocumentDrawer = ({ teiHeader }: DocumentDrawerProps) => {
+	return null;
+};
diff --git a/packages/react-tei/src/Viewer.spec.tsx b/packages/react-tei/src/Viewer.spec.tsx
@@ -6,9 +6,27 @@ import { Viewer } from "./Viewer.js";
 describe("Viewer", () => {
 	it("should display the document as text", async () => {
 		const screen = await render(
-			<Viewer document="<tei>This is a test</tei>" />,
+			<Viewer
+				document={`<?xml version="1.0" encoding="UTF-8"?>
+				<TEI xmlns:ns1="https://xml-schema.delivery.istex.fr/formats/ns1.xsd"
+					xmlns="http://www.tei-c.org/ns/1.0"
+					xmlns:tei="http://www.tei-c.org/ns/1.0"
+					xmlns:sa="http://www.elsevier.com/xml/common/struct-aff/dtd"
+					xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+					xsi:noNamespaceSchemaLocation="https://xml-schema.delivery.istex.fr/formats/tei-istex.xsd"
+					xml:lang="en"
+				>
+					<teiHeader>
+						<fileDesc>
+							<titleStmt>
+								<title level="a" type="main">TEI Test Title</title>
+							</titleStmt>
+						</fileDesc>
+					</teiHeader>
+				</TEI>`}
+			/>,
 		);
 
-		expect(screen.getByText("<tei>This is a test</tei>")).toBeInTheDocument();
+		expect(screen.getByText("TEI Test Title")).toBeInTheDocument();
 	});
 });
diff --git a/packages/react-tei/src/Viewer.tsx b/packages/react-tei/src/Viewer.tsx
@@ -1,7 +1,24 @@
-export function Viewer({ document }: ViewerProps) {
-	return <pre>{document}</pre>;
-}
+import { XMLParser } from "fast-xml-parser";
+import { useMemo } from "react";
+import { DocumentBody } from "./DocumentBody.js";
+import { DocumentContextProvider } from "./DocumentContextProvider.js";
+import { DocumentDrawer } from "./DocumentDrawer.js";
 
-export type ViewerProps = {
-	document: string;
+const parser = new XMLParser({
+	ignoreAttributes: false,
+	attributeNamePrefix: "@",
+});
+
+export const Viewer = ({ document }: { document: string }) => {
+	const jsonDocument = useMemo(() => parser.parse(document), [document]);
+	return (
+		<DocumentContextProvider jsonDocument={jsonDocument}>
+			<div>
+				<DocumentBody jsonDocument={jsonDocument} />
+				<DocumentDrawer
+					teiHeader={jsonDocument.TEI.teiHeader as Record<string, unknown>}
+				/>
+			</div>
+		</DocumentContextProvider>
+	);
 };
diff --git a/packages/react-tei/src/tags/Div.tsx b/packages/react-tei/src/tags/Div.tsx
@@ -0,0 +1,15 @@
+import { DocumentTag } from "./DocumentTag.js";
+
+export const Div = ({ data }: { data: Record<string, unknown>[] }) => {
+	return (
+		<div>
+			{Object.entries(data).map(([key, value]) => (
+				<DocumentTag
+					key={key}
+					name={key}
+					data={value as Record<string, unknown>}
+				/>
+			))}
+		</div>
+	);
+};
diff --git a/packages/react-tei/src/tags/DocumentTag.tsx b/packages/react-tei/src/tags/DocumentTag.tsx
@@ -0,0 +1,76 @@
+import { tagCatalog } from "./tagCatalog.js";
+
+export const DocumentTag = ({
+	name,
+	data,
+	debug,
+}: {
+	name: string;
+	data: string | Record<string, unknown> | Record<string, unknown>[] | string[];
+	debug?: boolean;
+}) => {
+	if (Array.isArray(data)) {
+		return (
+			<>
+				{data.map((item, index) => (
+					<DocumentTag
+						key={index}
+						name={name}
+						data={item as Record<string, unknown>}
+					/>
+				))}
+			</>
+		);
+	}
+
+	if (typeof data === "string") {
+		return <p>{data}</p>;
+	}
+
+	const TagComponent = tagCatalog[name];
+	if (TagComponent) {
+		return <TagComponent data={data} />;
+	}
+
+	if (["TEI", "text", "body"].includes(name)) {
+		return (
+			<>
+				{Object.entries(data).map(([key, value]) => (
+					<DocumentTag
+						key={key}
+						name={key}
+						data={value as Record<string, unknown>}
+					/>
+				))}
+			</>
+		);
+	}
+
+	console.warn(`Unsupported tag encountered:`, {
+		name,
+		data,
+	});
+
+	if (!debug) {
+		return null;
+	}
+
+	if (typeof data === "object" && data !== null) {
+		return (
+			<div>
+				{Object.entries(data as Record<string, unknown>).map(([key, value]) => (
+					<DocumentTag
+						key={key}
+						name={key}
+						data={value as Record<string, unknown>}
+					/>
+				))}
+			</div>
+		);
+	}
+	return (
+		<div>
+			<strong>{name}:</strong> {JSON.stringify(data)}
+		</div>
+	);
+};
diff --git a/packages/react-tei/src/tags/Head.tsx b/packages/react-tei/src/tags/Head.tsx
@@ -0,0 +1,11 @@
+import { DocumentTag } from "./DocumentTag.js";
+
+export const Head = ({ data }: { data: string | Record<string, unknown> }) => {
+	if (typeof data === "string") {
+		return <h2>{data}</h2>;
+	}
+
+	return Object.entries(data).map(([key, value]) => (
+		<DocumentTag key={key} name={key} data={value as Record<string, unknown>} />
+	));
+};
diff --git a/packages/react-tei/src/tags/P.tsx b/packages/react-tei/src/tags/P.tsx
@@ -0,0 +1,10 @@
+export const P = ({
+	data,
+}: {
+	data: {
+		"@_xml:id": string;
+		"#text": string;
+	};
+}) => {
+	return <p id={data["@_xml:id"]}>{data["#text"]}</p>;
+};
diff --git a/packages/react-tei/src/tags/TeiHeader.tsx b/packages/react-tei/src/tags/TeiHeader.tsx
@@ -0,0 +1,15 @@
+type TeiHeaderProps = {
+	data: {
+		fileDesc: {
+			titleStmt: {
+				title: {
+					"#text": string;
+				};
+			};
+		};
+	};
+};
+
+export const TeiHeader = ({ data }: TeiHeaderProps) => {
+	return <h1>{data.fileDesc.titleStmt.title["#text"]}</h1>;
+};
diff --git a/packages/react-tei/src/tags/tagCatalog.ts b/packages/react-tei/src/tags/tagCatalog.ts
@@ -0,0 +1,17 @@
+import type { ComponentType } from "react";
+import { Div } from "./Div.js";
+import { Head } from "./Head.js";
+import { P } from "./P.js";
+import { TeiHeader } from "./TeiHeader.js";
+
+export const tagCatalog: Record<
+	string,
+	ComponentType<{
+		data: any;
+	}>
+> = {
+	p: P,
+	teiHeader: TeiHeader,
+	head: Head,
+	div: Div,
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,4 @@ function App() {`
`15`	`15`	`</>`
`16`	`16`	`);`
`17`	`17`	`}`
`18`		`-`
`19`	`18`	`export default App;`