@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/report-downloader/ReportDownloader.css

@@ -1,67 +1,67 @@
-.ObReportDownloader-root {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	z-index: 1060;
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	padding: var(--ds-size-2);
-	pointer-events: none;
-}
-
-.ObReportDownloader-list {
-	width: 100%;
-	max-width: 60rem;
-	padding: var(--ds-size-2);
-	background: var(--ds-color-neutral-background-default);
-	border: 1px solid var(--ds-color-neutral-border-subtle);
-	border-radius: var(--ds-border-radius-md);
-	box-shadow: var(--ds-shadow-md);
-	opacity: 1;
-	transform: translateY(0);
-	transition:
-		opacity 150ms ease,
-		transform 150ms ease;
-	pointer-events: auto;
-}
-
-.ObReportDownloader-list.closed {
-	padding: 0;
-	border: none;
-	box-shadow: none;
-	opacity: 0;
-	transform: translateY(100%);
-}
-
-.ObReportDownloader-item {
-	display: grid;
-	grid-template-columns: 3rem 1fr auto;
-	gap: var(--ds-size-3);
-	align-items: center;
-	justify-items: center;
-	padding: var(--ds-size-2);
-}
-
-.ObReportDownloader-itemText {
-	justify-self: start;
-}
-
-.ObReportDownloader-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 1.5rem;
-}
-
-.ObReportDownloader-icon.cancelled {
-	color: var(--ds-color-warning-base-default);
-}
-
-.ObReportDownloader-icon.error {
-	color: var(--ds-color-danger-base-default);
-}
-
-.ObReportDownloader-icon.completed {
-	color: var(--ds-color-success-base-default);
-}
+.ObReportDownloader-root {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 1060;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	padding: var(--ds-size-2);
+	pointer-events: none;
+}
+
+.ObReportDownloader-list {
+	width: 100%;
+	max-width: 60rem;
+	padding: var(--ds-size-2);
+	background: var(--ds-color-neutral-background-default);
+	border: 1px solid var(--ds-color-neutral-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+	box-shadow: var(--ds-shadow-md);
+	opacity: 1;
+	transform: translateY(0);
+	transition:
+		opacity 150ms ease,
+		transform 150ms ease;
+	pointer-events: auto;
+}
+
+.ObReportDownloader-list.closed {
+	padding: 0;
+	border: none;
+	box-shadow: none;
+	opacity: 0;
+	transform: translateY(100%);
+}
+
+.ObReportDownloader-item {
+	display: grid;
+	grid-template-columns: 3rem 1fr auto;
+	gap: var(--ds-size-3);
+	align-items: center;
+	justify-items: center;
+	padding: var(--ds-size-2);
+}
+
+.ObReportDownloader-itemText {
+	justify-self: start;
+}
+
+.ObReportDownloader-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5rem;
+}
+
+.ObReportDownloader-icon.cancelled {
+	color: var(--ds-color-warning-base-default);
+}
+
+.ObReportDownloader-icon.error {
+	color: var(--ds-color-danger-base-default);
+}
+
+.ObReportDownloader-icon.completed {
+	color: var(--ds-color-success-base-default);
+}

package/src/report-downloader/components/StatusItem.tsx

@@ -1,87 +1,87 @@
-import { Button, Paragraph, Spinner } from "@digdir/designsystemet-react";
-import { CheckmarkCircleFillIcon, ExclamationmarkTriangleFillIcon, XMarkOctagonFillIcon } from "@navikt/aksel-icons";
-import { type DownloadItem } from "@olenbetong/appframe-core";
-
-import clsx from "clsx";
-import { getLocalizedString } from "../../i18n.js";
-
-const statuses: Record<string, { icon: React.ReactNode; text: string }> = {
-	cancelled: {
-		icon: <ExclamationmarkTriangleFillIcon aria-hidden />,
-		text: "Report cancelled",
-	},
-	error: {
-		icon: <XMarkOctagonFillIcon aria-hidden />,
-		text: "An error occurred",
-	},
-	requested: {
-		icon: <Spinner aria-hidden data-size="sm" />,
-		text: "Report request sent. Please wait while our server generates the report",
-	},
-	downloading: {
-		icon: <Spinner aria-hidden data-size="sm" />,
-		text: "Downloading report",
-	},
-	downloaded: {
-		icon: <Spinner aria-hidden data-size="sm" />,
-		text: "Sending report to browser",
-	},
-	completed: {
-		icon: <CheckmarkCircleFillIcon aria-hidden />,
-		text: "The report was successfully generated and downloaded",
-	},
-};
-
-function formatBytes(bytes: number, decimals: number) {
-	if (bytes === 0) return "0 Bytes";
-
-	let k = 1024;
-	let dm = decimals || 2;
-	let sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-	let i = Math.floor(Math.log(bytes) / Math.log(k));
-
-	return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
-}
-
-export type StatusItemProps = {
-	item: DownloadItem;
-	onCancelItem: () => void;
-	onCloseItem: () => void;
-};
-
-export function StatusItem({ onCancelItem, onCloseItem, item }: StatusItemProps) {
-	let { bytesReceived = 0, error, status = "requested" } = item;
-
-	let icon = statuses[status]?.icon;
-	let text = statuses[status] ? getLocalizedString(statuses[status].text) : "";
-	let working = ["requested", "downloading"].includes(status);
-	let stopped = ["cancelled", "completed", "error"].includes(status);
-
-	if (working) {
-		text += "...";
-	}
-
-	if (status === "error" && error) {
-		text = error;
-	} else if (status === "downloading" && bytesReceived) {
-		text += ` (${formatBytes(bytesReceived, 2)})`;
-	}
-
-	return (
-		<div className="ObReportDownloader-item">
-			<div className={clsx("ObReportDownloader-icon", status)}>{icon}</div>
-			<Paragraph className="ObReportDownloader-itemText">{text}</Paragraph>
-			<div>
-				{stopped ? (
-					<Button variant="secondary" data-size="sm" onClick={onCloseItem}>
-						{getLocalizedString("Close")}
-					</Button>
-				) : (
-					<Button variant="secondary" data-size="sm" onClick={onCancelItem}>
-						{getLocalizedString("Cancel")}
-					</Button>
-				)}
-			</div>
-		</div>
-	);
-}
+import { Button, Paragraph, Spinner } from "@digdir/designsystemet-react";
+import { CheckmarkCircleFillIcon, ExclamationmarkTriangleFillIcon, XMarkOctagonFillIcon } from "@navikt/aksel-icons";
+import { type DownloadItem } from "@olenbetong/appframe-core";
+
+import clsx from "clsx";
+import { getLocalizedString } from "../../i18n.js";
+
+const statuses: Record<string, { icon: React.ReactNode; text: string }> = {
+	cancelled: {
+		icon: <ExclamationmarkTriangleFillIcon aria-hidden />,
+		text: "Report cancelled",
+	},
+	error: {
+		icon: <XMarkOctagonFillIcon aria-hidden />,
+		text: "An error occurred",
+	},
+	requested: {
+		icon: <Spinner aria-hidden data-size="sm" />,
+		text: "Report request sent. Please wait while our server generates the report",
+	},
+	downloading: {
+		icon: <Spinner aria-hidden data-size="sm" />,
+		text: "Downloading report",
+	},
+	downloaded: {
+		icon: <Spinner aria-hidden data-size="sm" />,
+		text: "Sending report to browser",
+	},
+	completed: {
+		icon: <CheckmarkCircleFillIcon aria-hidden />,
+		text: "The report was successfully generated and downloaded",
+	},
+};
+
+function formatBytes(bytes: number, decimals: number) {
+	if (bytes === 0) return "0 Bytes";
+
+	let k = 1024;
+	let dm = decimals || 2;
+	let sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+	let i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+}
+
+export type StatusItemProps = {
+	item: DownloadItem;
+	onCancelItem: () => void;
+	onCloseItem: () => void;
+};
+
+export function StatusItem({ onCancelItem, onCloseItem, item }: StatusItemProps) {
+	let { bytesReceived = 0, error, status = "requested" } = item;
+
+	let icon = statuses[status]?.icon;
+	let text = statuses[status] ? getLocalizedString(statuses[status].text) : "";
+	let working = ["requested", "downloading"].includes(status);
+	let stopped = ["cancelled", "completed", "error"].includes(status);
+
+	if (working) {
+		text += "...";
+	}
+
+	if (status === "error" && error) {
+		text = error;
+	} else if (status === "downloading" && bytesReceived) {
+		text += ` (${formatBytes(bytesReceived, 2)})`;
+	}
+
+	return (
+		<div className="ObReportDownloader-item">
+			<div className={clsx("ObReportDownloader-icon", status)}>{icon}</div>
+			<Paragraph className="ObReportDownloader-itemText">{text}</Paragraph>
+			<div>
+				{stopped ? (
+					<Button variant="secondary" data-size="sm" onClick={onCloseItem}>
+						{getLocalizedString("Close")}
+					</Button>
+				) : (
+					<Button variant="secondary" data-size="sm" onClick={onCancelItem}>
+						{getLocalizedString("Cancel")}
+					</Button>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/report-downloader/components/StatusList.tsx

@@ -1,28 +1,28 @@
-import type { DownloadItem } from "@olenbetong/appframe-core";
-
-import clsx from "clsx";
-
-import { StatusItem } from "./StatusItem.js";
-
-export type StatusListProps = {
-	onCloseItem: (id: number) => void;
-	onCancelItem: (id: number) => void;
-	items: (DownloadItem & { id: number })[];
-};
-
-export function StatusList({ items, onCancelItem, onCloseItem }: StatusListProps) {
-	return (
-		<div className="ObReportDownloader-root">
-			<div className={clsx("ObReportDownloader-list", items.length === 0 && "closed")}>
-				{items.map((item) => (
-					<StatusItem
-						key={item.id}
-						onCancelItem={() => onCancelItem(item.id)}
-						onCloseItem={() => onCloseItem(item.id)}
-						item={item}
-					/>
-				))}
-			</div>
-		</div>
-	);
-}
+import type { DownloadItem } from "@olenbetong/appframe-core";
+
+import clsx from "clsx";
+
+import { StatusItem } from "./StatusItem.js";
+
+export type StatusListProps = {
+	onCloseItem: (id: number) => void;
+	onCancelItem: (id: number) => void;
+	items: (DownloadItem & { id: number })[];
+};
+
+export function StatusList({ items, onCancelItem, onCloseItem }: StatusListProps) {
+	return (
+		<div className="ObReportDownloader-root">
+			<div className={clsx("ObReportDownloader-list", items.length === 0 && "closed")}>
+				{items.map((item) => (
+					<StatusItem
+						key={item.id}
+						onCancelItem={() => onCancelItem(item.id)}
+						onCloseItem={() => onCloseItem(item.id)}
+						item={item}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}

package/src/report-downloader/index.ts

@@ -1,41 +1,41 @@
-import { downloadRequest } from "@olenbetong/appframe-core";
-import type { DataObjectReportParams } from "@olenbetong/appframe-data";
-import { exportOptionsFromDataObject, getDataObjectReportRequest } from "@olenbetong/appframe-data";
-
-import downloader, { mountStatusDisplay } from "./status.js";
-
-export function openDataObjectReportWithProgress(params: DataObjectReportParams) {
-	let { dataObject, fileName, format } = params;
-	let { controller, request } = getDataObjectReportRequest(params);
-
-	return downloadRequestWithProgress(request, {
-		controller,
-		fileName: `${fileName ?? dataObject}.${format}`,
-	});
-}
-
-export type DownloadParameters = {
-	controller?: AbortController;
-	fileName: string;
-};
-
-export function downloadRequestWithProgress(request: Request, { controller, fileName }: DownloadParameters) {
-	let abortController = controller ?? new AbortController();
-
-	mountStatusDisplay();
-
-	let id = downloader.start({}, controller);
-
-	function updateProgress(progress: any) {
-		downloader.update(id, progress);
-
-		if (["cancelled", "completed"].includes(progress.status)) {
-			setTimeout(() => downloader.remove(id), 1500);
-		}
-	}
-
-	downloadRequest(request, { onProgress: updateProgress, fileName, signal: abortController.signal });
-}
-
-export type { DataObjectReportParams };
-export { exportOptionsFromDataObject, getDataObjectReportRequest };
+import { downloadRequest } from "@olenbetong/appframe-core";
+import type { DataObjectReportParams } from "@olenbetong/appframe-data";
+import { exportOptionsFromDataObject, getDataObjectReportRequest } from "@olenbetong/appframe-data";
+
+import downloader, { mountStatusDisplay } from "./status.js";
+
+export function openDataObjectReportWithProgress(params: DataObjectReportParams) {
+	let { dataObject, fileName, format } = params;
+	let { controller, request } = getDataObjectReportRequest(params);
+
+	return downloadRequestWithProgress(request, {
+		controller,
+		fileName: `${fileName ?? dataObject}.${format}`,
+	});
+}
+
+export type DownloadParameters = {
+	controller?: AbortController;
+	fileName: string;
+};
+
+export function downloadRequestWithProgress(request: Request, { controller, fileName }: DownloadParameters) {
+	let abortController = controller ?? new AbortController();
+
+	mountStatusDisplay();
+
+	let id = downloader.start({}, controller);
+
+	function updateProgress(progress: any) {
+		downloader.update(id, progress);
+
+		if (["cancelled", "completed"].includes(progress.status)) {
+			setTimeout(() => downloader.remove(id), 1500);
+		}
+	}
+
+	downloadRequest(request, { onProgress: updateProgress, fileName, signal: abortController.signal });
+}
+
+export type { DataObjectReportParams };
+export { exportOptionsFromDataObject, getDataObjectReportRequest };

package/src/report-downloader/status.tsx

@@ -1,92 +1,92 @@
-import "./ReportDownloader.css";
-
-import type { DownloadItem } from "@olenbetong/appframe-core";
-
-import mitt from "mitt";
-import { useEffect, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { StatusList } from "./components/StatusList.js";
-
-class Downloader {
-	eventHandler = mitt<{ update: undefined }>();
-	#items: (DownloadItem & { id: number })[] = [];
-	#id = 1;
-	#controllers: Record<number, AbortController> = {};
-
-	start(item: Partial<DownloadItem>, controller?: AbortController) {
-		this.eventHandler.emit("update");
-
-		let id = this.#id++;
-		this.#items.push({ id, status: "requested", ...item });
-		this.#controllers[id] = controller ?? new AbortController();
-
-		return id;
-	}
-
-	cancel(id: number) {
-		this.#controllers[id]?.abort();
-	}
-
-	update(id: number, item: DownloadItem) {
-		this.#items = this.#items.map((i) => (i.id === id ? { ...i, ...item } : i));
-		this.eventHandler.emit("update");
-	}
-
-	remove(id: number) {
-		this.#items = this.#items.filter((i) => i.id !== id);
-		this.eventHandler.emit("update");
-	}
-
-	get items() {
-		return this.#items;
-	}
-}
-
-const downloader = new Downloader();
-
-function StatusDisplay() {
-	let [items, setItems] = useState<(DownloadItem & { id: number })[]>([]);
-
-	useEffect(() => {
-		function handleUpdate() {
-			setItems([...downloader.items]);
-		}
-
-		handleUpdate();
-
-		downloader.eventHandler.on("update", handleUpdate);
-
-		return () => {
-			downloader.eventHandler.off("update", handleUpdate);
-		};
-	}, []);
-
-	return (
-		<StatusList
-			items={items}
-			onCloseItem={(id: number) => downloader.remove(id)}
-			onCancelItem={(id: number) => downloader.cancel(id)}
-		/>
-	);
-}
-
-let mounted = false;
-
-/**
- * Mounts the download status list into its own root at the end of `<body>`.
- * Called the first time a download is started, so importing the module doesn't
- * touch the DOM (which would break server rendering and tests).
- */
-function mountStatusDisplay() {
-	if (mounted || typeof document === "undefined") return;
-
-	mounted = true;
-
-	let element = document.createElement("div");
-	document.body.append(element);
-	createRoot(element).render(<StatusDisplay />);
-}
-
-export { mountStatusDisplay };
-export default downloader;
+import "./ReportDownloader.css";
+
+import type { DownloadItem } from "@olenbetong/appframe-core";
+
+import mitt from "mitt";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { StatusList } from "./components/StatusList.js";
+
+class Downloader {
+	eventHandler = mitt<{ update: undefined }>();
+	#items: (DownloadItem & { id: number })[] = [];
+	#id = 1;
+	#controllers: Record<number, AbortController> = {};
+
+	start(item: Partial<DownloadItem>, controller?: AbortController) {
+		this.eventHandler.emit("update");
+
+		let id = this.#id++;
+		this.#items.push({ id, status: "requested", ...item });
+		this.#controllers[id] = controller ?? new AbortController();
+
+		return id;
+	}
+
+	cancel(id: number) {
+		this.#controllers[id]?.abort();
+	}
+
+	update(id: number, item: DownloadItem) {
+		this.#items = this.#items.map((i) => (i.id === id ? { ...i, ...item } : i));
+		this.eventHandler.emit("update");
+	}
+
+	remove(id: number) {
+		this.#items = this.#items.filter((i) => i.id !== id);
+		this.eventHandler.emit("update");
+	}
+
+	get items() {
+		return this.#items;
+	}
+}
+
+const downloader = new Downloader();
+
+function StatusDisplay() {
+	let [items, setItems] = useState<(DownloadItem & { id: number })[]>([]);
+
+	useEffect(() => {
+		function handleUpdate() {
+			setItems([...downloader.items]);
+		}
+
+		handleUpdate();
+
+		downloader.eventHandler.on("update", handleUpdate);
+
+		return () => {
+			downloader.eventHandler.off("update", handleUpdate);
+		};
+	}, []);
+
+	return (
+		<StatusList
+			items={items}
+			onCloseItem={(id: number) => downloader.remove(id)}
+			onCancelItem={(id: number) => downloader.cancel(id)}
+		/>
+	);
+}
+
+let mounted = false;
+
+/**
+ * Mounts the download status list into its own root at the end of `<body>`.
+ * Called the first time a download is started, so importing the module doesn't
+ * touch the DOM (which would break server rendering and tests).
+ */
+function mountStatusDisplay() {
+	if (mounted || typeof document === "undefined") return;
+
+	mounted = true;
+
+	let element = document.createElement("div");
+	document.body.append(element);
+	createRoot(element).render(<StatusDisplay />);
+}
+
+export { mountStatusDisplay };
+export default downloader;