@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/mdi/MdiContext.tsx

@@ -1,59 +1,59 @@
-import { createContext, type ReactNode, use, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-
-import { MdiController } from "./controller.js";
-import type { MdiApi, MdiDocumentInfo, MdiDocumentTypes } from "./types.js";
-
-const MdiControllerContext = createContext<MdiController | null>(null);
-
-export type MdiProviderProps = {
-	/** The document types this workspace can show, keyed by type name */
-	types: MdiDocumentTypes;
-	children: ReactNode;
-};
-
-/**
- * Owns the document controller. Anything inside it can call `useMdi()`, so
- * toolbars and menus outside the dock itself can open and close documents.
- */
-export function MdiProvider({ types, children }: MdiProviderProps) {
-	let [controller] = useState(() => new MdiController(types));
-
-	useEffect(() => {
-		controller.setTypes(types);
-	}, [controller, types]);
-
-	return <MdiControllerContext value={controller}>{children}</MdiControllerContext>;
-}
-
-export function useMdiController(): MdiController {
-	let controller = use(MdiControllerContext);
-
-	if (!controller) {
-		throw new Error("Mdi: this component must be rendered inside <MdiProvider>.");
-	}
-
-	return controller;
-}
-
-/** The imperative document API: open, activate, close, titles, layout commands. */
-export function useMdi(): MdiApi {
-	return useMdiController();
-}
-
-/** The active document, re-rendering when it changes. Drives shared panels such as a property grid. */
-export function useMdiActiveDocument(): MdiDocumentInfo | undefined {
-	let controller = useMdiController();
-	return useSyncExternalStore(controller.subscribeStore, controller.getActive, controller.getActive);
-}
-
-/** The open documents, optionally of one type. For "Windows" menus and the like. */
-export function useMdiDocuments(type?: string): MdiDocumentInfo[] {
-	let controller = useMdiController();
-	let all = useSyncExternalStore(
-		controller.subscribeStore,
-		controller.getDocumentsSnapshot,
-		controller.getDocumentsSnapshot,
-	);
-
-	return useMemo(() => (type === undefined ? all : all.filter((document) => document.type === type)), [all, type]);
-}
+import { createContext, type ReactNode, use, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+
+import { MdiController } from "./controller.js";
+import type { MdiApi, MdiDocumentInfo, MdiDocumentTypes } from "./types.js";
+
+const MdiControllerContext = createContext<MdiController | null>(null);
+
+export type MdiProviderProps = {
+	/** The document types this workspace can show, keyed by type name */
+	types: MdiDocumentTypes;
+	children: ReactNode;
+};
+
+/**
+ * Owns the document controller. Anything inside it can call `useMdi()`, so
+ * toolbars and menus outside the dock itself can open and close documents.
+ */
+export function MdiProvider({ types, children }: MdiProviderProps) {
+	let [controller] = useState(() => new MdiController(types));
+
+	useEffect(() => {
+		controller.setTypes(types);
+	}, [controller, types]);
+
+	return <MdiControllerContext value={controller}>{children}</MdiControllerContext>;
+}
+
+export function useMdiController(): MdiController {
+	let controller = use(MdiControllerContext);
+
+	if (!controller) {
+		throw new Error("Mdi: this component must be rendered inside <MdiProvider>.");
+	}
+
+	return controller;
+}
+
+/** The imperative document API: open, activate, close, titles, layout commands. */
+export function useMdi(): MdiApi {
+	return useMdiController();
+}
+
+/** The active document, re-rendering when it changes. Drives shared panels such as a property grid. */
+export function useMdiActiveDocument(): MdiDocumentInfo | undefined {
+	let controller = useMdiController();
+	return useSyncExternalStore(controller.subscribeStore, controller.getActive, controller.getActive);
+}
+
+/** The open documents, optionally of one type. For "Windows" menus and the like. */
+export function useMdiDocuments(type?: string): MdiDocumentInfo[] {
+	let controller = useMdiController();
+	let all = useSyncExternalStore(
+		controller.subscribeStore,
+		controller.getDocumentsSnapshot,
+		controller.getDocumentsSnapshot,
+	);
+
+	return useMemo(() => (type === undefined ? all : all.filter((document) => document.type === type)), [all, type]);
+}

package/src/mdi/MdiDocumentContext.tsx

@@ -1,60 +1,60 @@
-import { createContext, use, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-
-import { parsePanelId } from "./ids.js";
-import { useMdiController } from "./MdiContext.js";
-import type { MdiCloseOptions, MdiDocumentHandle, MdiDocumentOptions, MdiParams } from "./types.js";
-
-export const MdiDocumentIdContext = createContext<string | null>(null);
-
-/**
- * The document a component is rendered in: its params, whether it is active, and
- * the handle to set its title and dirty state or close it. Pass `onSave`/`onClosing`
- * to take part in the close flow.
- */
-export function useMdiDocument<P extends MdiParams = MdiParams>(options?: MdiDocumentOptions): MdiDocumentHandle<P> {
-	let controller = useMdiController();
-	let id = use(MdiDocumentIdContext);
-
-	if (!id) {
-		throw new Error("Mdi: useMdiDocument() must be called from a component rendered as an Mdi document.");
-	}
-
-	// The guards are registered once; they always call the latest callbacks.
-	let latest = useRef(options);
-	useEffect(() => {
-		latest.current = options;
-	});
-
-	let [guards] = useState<MdiDocumentOptions>(() => ({
-		onSave: () => latest.current?.onSave?.() ?? true,
-		onClosing: () => latest.current?.onClosing?.() ?? true,
-	}));
-
-	useEffect(() => controller.registerGuards(id, guards), [controller, id, guards]);
-
-	let info = useSyncExternalStore(
-		controller.subscribeStore,
-		() => controller.getDocument(id),
-		() => controller.getDocument(id),
-	);
-
-	return useMemo(() => {
-		let parsed = parsePanelId(id);
-
-		return {
-			id,
-			type: info?.type ?? parsed.type,
-			key: info?.key ?? parsed.key,
-			params: (info?.params ?? {}) as P,
-			isActive: info?.isActive ?? false,
-			dirty: info?.dirty ?? false,
-			closable: info?.closable ?? true,
-			setTitle: (title: string) => controller.setTitle(id, title),
-			setDirty: (dirty: boolean) => controller.setDirty(id, dirty),
-			close: (closeOptions?: MdiCloseOptions) => controller.close(id, closeOptions),
-			activate: () => controller.activate(id),
-			getWindow: () => controller.getWindow(id),
-			mdi: controller,
-		};
-	}, [controller, id, info]);
-}
+import { createContext, use, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+
+import { parsePanelId } from "./ids.js";
+import { useMdiController } from "./MdiContext.js";
+import type { MdiCloseOptions, MdiDocumentHandle, MdiDocumentOptions, MdiParams } from "./types.js";
+
+export const MdiDocumentIdContext = createContext<string | null>(null);
+
+/**
+ * The document a component is rendered in: its params, whether it is active, and
+ * the handle to set its title and dirty state or close it. Pass `onSave`/`onClosing`
+ * to take part in the close flow.
+ */
+export function useMdiDocument<P extends MdiParams = MdiParams>(options?: MdiDocumentOptions): MdiDocumentHandle<P> {
+	let controller = useMdiController();
+	let id = use(MdiDocumentIdContext);
+
+	if (!id) {
+		throw new Error("Mdi: useMdiDocument() must be called from a component rendered as an Mdi document.");
+	}
+
+	// The guards are registered once; they always call the latest callbacks.
+	let latest = useRef(options);
+	useEffect(() => {
+		latest.current = options;
+	});
+
+	let [guards] = useState<MdiDocumentOptions>(() => ({
+		onSave: () => latest.current?.onSave?.() ?? true,
+		onClosing: () => latest.current?.onClosing?.() ?? true,
+	}));
+
+	useEffect(() => controller.registerGuards(id, guards), [controller, id, guards]);
+
+	let info = useSyncExternalStore(
+		controller.subscribeStore,
+		() => controller.getDocument(id),
+		() => controller.getDocument(id),
+	);
+
+	return useMemo(() => {
+		let parsed = parsePanelId(id);
+
+		return {
+			id,
+			type: info?.type ?? parsed.type,
+			key: info?.key ?? parsed.key,
+			params: (info?.params ?? {}) as P,
+			isActive: info?.isActive ?? false,
+			dirty: info?.dirty ?? false,
+			closable: info?.closable ?? true,
+			setTitle: (title: string) => controller.setTitle(id, title),
+			setDirty: (dirty: boolean) => controller.setDirty(id, dirty),
+			close: (closeOptions?: MdiCloseOptions) => controller.close(id, closeOptions),
+			activate: () => controller.activate(id),
+			getWindow: () => controller.getWindow(id),
+			mdi: controller,
+		};
+	}, [controller, id, info]);
+}

package/src/mdi/MdiPanel.tsx

@@ -1,61 +1,61 @@
-import { Button } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import type { IDockviewPanelProps } from "dockview-react";
-import { useSyncExternalStore } from "react";
-import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
-
-import { useMdiController } from "./MdiContext.js";
-import { MdiDocumentIdContext } from "./MdiDocumentContext.js";
-
-function MdiErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
-	let message = error instanceof Error ? error.message : String(error);
-
-	return (
-		<div className="ObMdi-error" role="alert">
-			<p className="ObMdi-error-title">{getLocalizedString("The document could not be displayed")}</p>
-			<pre className="ObMdi-error-message">{message}</pre>
-			<Button data-size="sm" variant="secondary" onClick={resetErrorBoundary}>
-				{getLocalizedString("Try again")}
-			</Button>
-		</div>
-	);
-}
-
-/**
- * The one dockview content component. Every panel renders through it; it looks the
- * document up by panel id and renders the component registered for its type.
- */
-export function MdiPanel(props: IDockviewPanelProps) {
-	let id = props.api.id;
-	let controller = useMdiController();
-	let info = useSyncExternalStore(
-		controller.subscribeStore,
-		() => controller.getDocument(id),
-		() => controller.getDocument(id),
-	);
-
-	if (!info) {
-		return null;
-	}
-
-	let definition = controller.getTypes()[info.type];
-
-	if (!definition) {
-		return (
-			<div className="ObMdi-error" role="alert">
-				<p className="ObMdi-error-title">{getLocalizedString("Unknown document type")}</p>
-				<pre className="ObMdi-error-message">{info.type}</pre>
-			</div>
-		);
-	}
-
-	let Component = definition.component;
-
-	return (
-		<MdiDocumentIdContext value={id}>
-			<ErrorBoundary FallbackComponent={MdiErrorFallback} resetKeys={[info.params]}>
-				<Component id={id} type={info.type} documentKey={info.key} params={info.params} />
-			</ErrorBoundary>
-		</MdiDocumentIdContext>
-	);
-}
+import { Button } from "@digdir/designsystemet-react";
+import type { IDockviewPanelProps } from "dockview-react";
+import { useSyncExternalStore } from "react";
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
+
+import { useMdiController } from "./MdiContext.js";
+import { MdiDocumentIdContext } from "./MdiDocumentContext.js";
+import { getLocalizedString } from "../i18n.js";
+
+function MdiErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+	let message = error instanceof Error ? error.message : String(error);
+
+	return (
+		<div className="ObMdi-error" role="alert">
+			<p className="ObMdi-error-title">{getLocalizedString("The document could not be displayed")}</p>
+			<pre className="ObMdi-error-message">{message}</pre>
+			<Button data-size="sm" variant="secondary" onClick={resetErrorBoundary}>
+				{getLocalizedString("Try again")}
+			</Button>
+		</div>
+	);
+}
+
+/**
+ * The one dockview content component. Every panel renders through it; it looks the
+ * document up by panel id and renders the component registered for its type.
+ */
+export function MdiPanel(props: IDockviewPanelProps) {
+	let id = props.api.id;
+	let controller = useMdiController();
+	let info = useSyncExternalStore(
+		controller.subscribeStore,
+		() => controller.getDocument(id),
+		() => controller.getDocument(id),
+	);
+
+	if (!info) {
+		return null;
+	}
+
+	let definition = controller.getTypes()[info.type];
+
+	if (!definition) {
+		return (
+			<div className="ObMdi-error" role="alert">
+				<p className="ObMdi-error-title">{getLocalizedString("Unknown document type")}</p>
+				<pre className="ObMdi-error-message">{info.type}</pre>
+			</div>
+		);
+	}
+
+	let Component = definition.component;
+
+	return (
+		<MdiDocumentIdContext value={id}>
+			<ErrorBoundary FallbackComponent={MdiErrorFallback} resetKeys={[info.params]}>
+				<Component id={id} type={info.type} documentKey={info.key} params={info.params} />
+			</ErrorBoundary>
+		</MdiDocumentIdContext>
+	);
+}

package/src/mdi/MdiRestore.test.tsx

@@ -1,82 +1,86 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-
-import { layoutSpecToLayout } from "./layoutSpec.js";
-import { layoutStore } from "./layoutStore.js";
-import { Mdi } from "./Mdi.js";
-import { MdiProvider } from "./MdiContext.js";
-import type { MdiDocumentProps, MdiDocumentTypes, MdiLayout, MdiLayoutSpec } from "./types.js";
-
-vi.mock("@olenbetong/appframe-core", () => ({
-	getLocalizedString: (value: string) => value,
-}));
-
-function Doc({ id }: MdiDocumentProps) {
-	return <div data-testid={id}>{id}</div>;
-}
-
-const types: MdiDocumentTypes = {
-	explorer: { component: Doc, singleton: true, closable: false, title: "Explorer" },
-	properties: { component: Doc, singleton: true, closable: false, title: "Properties" },
-	welcome: { component: Doc, singleton: true, title: "Welcome" },
-	serie: { component: Doc, title: "Serie", restore: async () => true },
-};
-
-const spec: MdiLayoutSpec = {
-	root: {
-		direction: "horizontal",
-		children: [
-			{ tabs: [{ type: "explorer" }], hideHeader: true, locked: true },
-			{
-				direction: "vertical",
-				children: [{ tabs: [{ type: "welcome" }] }, { tabs: [{ type: "properties" }] }],
-			},
-		],
-	},
-};
-
-/**
- * What dockview serialises after a panel was popped out of the welcome group: the
- * panel sits in `popoutGroups` with the welcome group as its reference group.
- */
-function layoutWithPopout(): MdiLayout {
-	let layout = layoutSpecToLayout(spec, types, 1);
-	let serieId = "serie:abc";
-
-	layout.documents[serieId] = { type: "serie", key: "abc", params: { name: "S" }, title: "S", closable: true };
-	layout.dockview.panels[serieId] = { id: serieId, contentComponent: "mdi", tabComponent: "mdi", title: "S" };
-	layout.dockview.popoutGroups = [
-		{
-			data: { id: "4", views: [serieId], activeView: serieId },
-			gridReferenceGroup: "mdi-g2",
-			position: { top: 10, left: 10, width: 300, height: 200 },
-			url: "/popout",
-		},
-	];
-
-	return layout;
-}
-
-describe("Mdi restore", () => {
-	it("re-docks a popped-out document when a saved layout is restored", async () => {
-		let key = layoutStore.key("restore-popout");
-		await layoutStore.setNow(key, layoutWithPopout());
-
-		render(
-			<MdiProvider types={types}>
-				<div style={{ width: 800, height: 600 }}>
-					<Mdi id="restore-popout" layoutVersion={1} defaultLayout={spec} />
-				</div>
-			</MdiProvider>,
-		);
-
-		// dockview only mounts the content of the active tab of a group, so check the tabs.
-		expect(await screen.findByTestId("welcome")).toBeInTheDocument();
-		let tabIds = [...document.querySelectorAll("[data-tab-panel-id]")].map((tab) =>
-			tab.getAttribute("data-tab-panel-id"),
-		);
-		expect(tabIds).toEqual(["explorer", "welcome", "serie:abc", "properties"]);
-		expect(screen.getByTestId("explorer")).toBeInTheDocument();
-		expect(screen.getByTestId("properties")).toBeInTheDocument();
-	});
-});
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { layoutSpecToLayout } from "./layoutSpec.js";
+import { layoutStore } from "./layoutStore.js";
+import { Mdi } from "./Mdi.js";
+import { MdiProvider } from "./MdiContext.js";
+import type { MdiDocumentProps, MdiDocumentTypes, MdiLayout, MdiLayoutSpec } from "./types.js";
+
+vi.mock("@olenbetong/appframe-core", () => ({
+	getLocalizedString: (value: string) => value,
+	createLocalizer: () => ({
+		getLocalizedString: (value: string) => value,
+		localize: (parts: TemplateStringsArray) => parts.join(""),
+	}),
+}));
+
+function Doc({ id }: MdiDocumentProps) {
+	return <div data-testid={id}>{id}</div>;
+}
+
+const types: MdiDocumentTypes = {
+	explorer: { component: Doc, singleton: true, closable: false, title: "Explorer" },
+	properties: { component: Doc, singleton: true, closable: false, title: "Properties" },
+	welcome: { component: Doc, singleton: true, title: "Welcome" },
+	serie: { component: Doc, title: "Serie", restore: async () => true },
+};
+
+const spec: MdiLayoutSpec = {
+	root: {
+		direction: "horizontal",
+		children: [
+			{ tabs: [{ type: "explorer" }], hideHeader: true, locked: true },
+			{
+				direction: "vertical",
+				children: [{ tabs: [{ type: "welcome" }] }, { tabs: [{ type: "properties" }] }],
+			},
+		],
+	},
+};
+
+/**
+ * What dockview serialises after a panel was popped out of the welcome group: the
+ * panel sits in `popoutGroups` with the welcome group as its reference group.
+ */
+function layoutWithPopout(): MdiLayout {
+	let layout = layoutSpecToLayout(spec, types, 1);
+	let serieId = "serie:abc";
+
+	layout.documents[serieId] = { type: "serie", key: "abc", params: { name: "S" }, title: "S", closable: true };
+	layout.dockview.panels[serieId] = { id: serieId, contentComponent: "mdi", tabComponent: "mdi", title: "S" };
+	layout.dockview.popoutGroups = [
+		{
+			data: { id: "4", views: [serieId], activeView: serieId },
+			gridReferenceGroup: "mdi-g2",
+			position: { top: 10, left: 10, width: 300, height: 200 },
+			url: "/popout",
+		},
+	];
+
+	return layout;
+}
+
+describe("Mdi restore", () => {
+	it("re-docks a popped-out document when a saved layout is restored", async () => {
+		let key = layoutStore.key("restore-popout");
+		await layoutStore.setNow(key, layoutWithPopout());
+
+		render(
+			<MdiProvider types={types}>
+				<div style={{ width: 800, height: 600 }}>
+					<Mdi id="restore-popout" layoutVersion={1} defaultLayout={spec} />
+				</div>
+			</MdiProvider>,
+		);
+
+		// dockview only mounts the content of the active tab of a group, so check the tabs.
+		expect(await screen.findByTestId("welcome")).toBeInTheDocument();
+		let tabIds = [...document.querySelectorAll("[data-tab-panel-id]")].map((tab) =>
+			tab.getAttribute("data-tab-panel-id"),
+		);
+		expect(tabIds).toEqual(["explorer", "welcome", "serie:abc", "properties"]);
+		expect(screen.getByTestId("explorer")).toBeInTheDocument();
+		expect(screen.getByTestId("properties")).toBeInTheDocument();
+	});
+});

package/src/mdi/MdiTab.tsx

@@ -1,30 +1,30 @@
-import clsx from "clsx";
-import { DockviewDefaultTab, type IDockviewPanelHeaderProps } from "dockview-react";
-import { useCallback, useSyncExternalStore } from "react";
-
-import { useMdiController } from "./MdiContext.js";
-
-/**
- * The default tab with the close button hidden for unclosable documents, and every
- * close (button and middle-click) routed through the controller guards.
- */
-export function MdiTab(props: IDockviewPanelHeaderProps) {
-	let id = props.api.id;
-	let controller = useMdiController();
-	let info = useSyncExternalStore(
-		controller.subscribeStore,
-		() => controller.getDocument(id),
-		() => controller.getDocument(id),
-	);
-
-	let close = useCallback(() => {
-		void controller.close(id);
-	}, [controller, id]);
-
-	// DockviewDefaultTab overwrites `className`, so the state classes go on a layout-neutral wrapper.
-	return (
-		<div className={clsx("ObMdi-tab", info?.dirty && "ObMdi-tab--dirty")} style={{ display: "contents" }}>
-			<DockviewDefaultTab {...props} hideClose={info ? !info.closable : false} closeActionOverride={close} />
-		</div>
-	);
-}
+import clsx from "clsx";
+import { DockviewDefaultTab, type IDockviewPanelHeaderProps } from "dockview-react";
+import { useCallback, useSyncExternalStore } from "react";
+
+import { useMdiController } from "./MdiContext.js";
+
+/**
+ * The default tab with the close button hidden for unclosable documents, and every
+ * close (button and middle-click) routed through the controller guards.
+ */
+export function MdiTab(props: IDockviewPanelHeaderProps) {
+	let id = props.api.id;
+	let controller = useMdiController();
+	let info = useSyncExternalStore(
+		controller.subscribeStore,
+		() => controller.getDocument(id),
+		() => controller.getDocument(id),
+	);
+
+	let close = useCallback(() => {
+		void controller.close(id);
+	}, [controller, id]);
+
+	// DockviewDefaultTab overwrites `className`, so the state classes go on a layout-neutral wrapper.
+	return (
+		<div className={clsx("ObMdi-tab", info?.dirty && "ObMdi-tab--dirty")} style={{ display: "contents" }}>
+			<DockviewDefaultTab {...props} hideClose={info ? !info.closable : false} closeActionOverride={close} />
+		</div>
+	);
+}