@olenbetong/appframe-ds 1.0.3 → 1.2.0

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

@@ -1,86 +1,87 @@
-import { Button, Paragraph, Spinner } from "@digdir/designsystemet-react";
-import { CheckmarkCircleFillIcon, ExclamationmarkTriangleFillIcon, XMarkOctagonFillIcon } from "@navikt/aksel-icons";
-import { type DownloadItem, getLocalizedString } from "@olenbetong/appframe-core";
-
-import clsx from "clsx";
-
-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;

package/src/sortable/DropIndicator.css

@@ -1,51 +1,51 @@
-:root {
-	--ob-drop-indicator-thickness: 0.125rem;
-	--ob-drop-indicator-color: #3f3fa3;
-	--ob-drop-indicator-terminal-size: 0.75rem;
-}
-
-.ObDropIndicator-root {
-	position: absolute;
-	z-index: 10;
-
-	display: flex;
-	align-items: center;
-
-	pointer-events: none;
-
-	&::before {
-		content: "";
-
-		border: var(--ob-drop-indicator-thickness) solid var(--ob-drop-indicator-color);
-		border-radius: 50%;
-
-		width: var(--ob-drop-indicator-terminal-size);
-		height: var(--ob-drop-indicator-terminal-size);
-	}
-
-	&::after {
-		content: "";
-
-		height: var(--ob-drop-indicator-thickness);
-		flex-grow: 1;
-		background-color: var(--ob-drop-indicator-color);
-	}
-
-	&.ObDropIndicator-top,
-	&.ObDropIndicator-bottom {
-		height: var(--ob-drop-indicator-thickness);
-
-		left: calc(-1 * var(--ob-drop-indicator-terminal-size) / 2);
-		width: calc(100% + var(--ob-drop-indicator-terminal-size) / 2);
-	}
-
-	&.ObDropIndicator-top {
-		top: var(--ob-drop-indicator-gap, 0rem);
-		transform: translateY(calc(var(--ob-drop-indicator-thickness) / -2));
-	}
-
-	&.ObDropIndicator-bottom {
-		bottom: var(--ob-drop-indicator-gap, 0rem);
-		transform: translateY(calc(var(--ob-drop-indicator-thickness) / 2));
-	}
-}
+:root {
+	--ob-drop-indicator-thickness: 0.125rem;
+	--ob-drop-indicator-color: #3f3fa3;
+	--ob-drop-indicator-terminal-size: 0.75rem;
+}
+
+.ObDropIndicator-root {
+	position: absolute;
+	z-index: 10;
+
+	display: flex;
+	align-items: center;
+
+	pointer-events: none;
+
+	&::before {
+		content: "";
+
+		border: var(--ob-drop-indicator-thickness) solid var(--ob-drop-indicator-color);
+		border-radius: 50%;
+
+		width: var(--ob-drop-indicator-terminal-size);
+		height: var(--ob-drop-indicator-terminal-size);
+	}
+
+	&::after {
+		content: "";
+
+		height: var(--ob-drop-indicator-thickness);
+		flex-grow: 1;
+		background-color: var(--ob-drop-indicator-color);
+	}
+
+	&.ObDropIndicator-top,
+	&.ObDropIndicator-bottom {
+		height: var(--ob-drop-indicator-thickness);
+
+		left: calc(-1 * var(--ob-drop-indicator-terminal-size) / 2);
+		width: calc(100% + var(--ob-drop-indicator-terminal-size) / 2);
+	}
+
+	&.ObDropIndicator-top {
+		top: var(--ob-drop-indicator-gap, 0rem);
+		transform: translateY(calc(var(--ob-drop-indicator-thickness) / -2));
+	}
+
+	&.ObDropIndicator-bottom {
+		bottom: var(--ob-drop-indicator-gap, 0rem);
+		transform: translateY(calc(var(--ob-drop-indicator-thickness) / 2));
+	}
+}

package/src/sortable/DropIndicator.tsx

@@ -1,27 +1,27 @@
-import "./DropIndicator.css";
-
-import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/types";
-import clsx from "clsx";
-import type { CSSProperties } from "react";
-
-export type DropIndicatorProps = {
-	/** Which edge of the item the dragged item will be dropped on */
-	edge: Edge;
-	/** Distance from the edge, e.g. to account for a gap between items */
-	gap?: string;
-	className?: string;
-};
-
-/**
- * Line rendered on the edge of a list item to show where a dragged item will
- * be placed. Must be rendered inside a positioned (`position: relative`)
- * element, normally the list item itself.
- */
-export function DropIndicator({ edge, gap, className }: DropIndicatorProps) {
-	return (
-		<div
-			className={clsx("ObDropIndicator-root", `ObDropIndicator-${edge}`, className)}
-			style={{ "--ob-drop-indicator-gap": gap ?? "0rem" } as CSSProperties}
-		/>
-	);
-}
+import "./DropIndicator.css";
+
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/types";
+import clsx from "clsx";
+import type { CSSProperties } from "react";
+
+export type DropIndicatorProps = {
+	/** Which edge of the item the dragged item will be dropped on */
+	edge: Edge;
+	/** Distance from the edge, e.g. to account for a gap between items */
+	gap?: string;
+	className?: string;
+};
+
+/**
+ * Line rendered on the edge of a list item to show where a dragged item will
+ * be placed. Must be rendered inside a positioned (`position: relative`)
+ * element, normally the list item itself.
+ */
+export function DropIndicator({ edge, gap, className }: DropIndicatorProps) {
+	return (
+		<div
+			className={clsx("ObDropIndicator-root", `ObDropIndicator-${edge}`, className)}
+			style={{ "--ob-drop-indicator-gap": gap ?? "0rem" } as CSSProperties}
+		/>
+	);
+}