@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/layout/ErrorBoundary.tsx

@@ -1,162 +1,162 @@
-import "./ErrorBoundary.css";
-
-import type { DataObject } from "@olenbetong/appframe-data";
-import { useError } from "@olenbetong/appframe-react";
-
-import { Component, useEffect } from "react";
-import { useAsyncError, useRouteError } from "react-router";
-
-import { PageContainer } from "./PageContainer.js";
-import { getLocalizedString } from "../i18n.js";
-
-function parseError(error: unknown) {
-	let message = "Unspecified error";
-	let stackTrace: string | null = null;
-	let title: string = getLocalizedString("Unexpected application error");
-
-	if (typeof error === "string") {
-		message = error;
-	} else if (error && typeof error === "object") {
-		const err = error as any;
-		if (err.status) {
-			title = `${err.status} ${err.statusText}`;
-			message = err.message ?? "";
-		} else if (err.message) {
-			message = err.message;
-			if (err.type) {
-				message = `${err.type}: ${message}`;
-			}
-		} else {
-			message = String(error);
-		}
-
-		if (err.stack || err.stackTrace) {
-			stackTrace = err.stack ?? err.stackTrace;
-		}
-	}
-
-	return { message, stackTrace, title };
-}
-
-// ── AppErrorBoundary ──────────────────────────────────────────────────────────
-
-export type AppErrorBoundaryProps = {
-	children?: React.ReactNode;
-	message?: string | ((error: unknown) => string);
-	imgSrc?: string;
-	image?: React.ReactNode;
-};
-
-type AppErrorBoundaryState = {
-	hasError: boolean;
-	error: unknown;
-};
-
-export class AppErrorBoundary extends Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
-	constructor(props: AppErrorBoundaryProps) {
-		super(props);
-		this.state = { hasError: false, error: null };
-	}
-
-	static getDerivedStateFromError(error: unknown): AppErrorBoundaryState {
-		return { hasError: true, error };
-	}
-
-	componentDidCatch(error: unknown, errorInfo: unknown) {
-		console.error(error, errorInfo);
-	}
-
-	render(): React.ReactNode {
-		if (this.state.hasError) {
-			const { imgSrc, message, image } = this.props;
-			const { message: errorMessage } = parseError(this.state.error);
-			const customMessage = typeof message === "function" ? message(this.state.error) : message;
-
-			return (
-				<div className="AppErrorBoundary-root">
-					<div className="AppErrorBoundary-inner">
-						{image ?? (
-							<img
-								alt=""
-								src={imgSrc ?? "/file/site/graphic/error-broken-robot.svg"}
-								className="AppErrorBoundary-image"
-							/>
-						)}
-						<h1 className="AppErrorBoundary-title">{getLocalizedString("Something went terribly wrong!")}</h1>
-						<div className="AppErrorBoundary-alert">{errorMessage}</div>
-						<p className="AppErrorBoundary-message">
-							{customMessage ??
-								getLocalizedString(
-									"Sometimes it is enough to simply refresh the page. If the error persists, contact the IT department.",
-								)}
-						</p>
-						<button type="button" className="AppErrorBoundary-reload" onClick={() => window.location.reload()}>
-							{getLocalizedString("Refresh page")}
-						</button>
-					</div>
-				</div>
-			);
-		}
-
-		return this.props.children;
-	}
-}
-
-// ── ErrorAlertFallback ────────────────────────────────────────────────────────
-
-export type ErrorAlertFallbackProps = {
-	error: unknown;
-	className?: string;
-};
-
-export function ErrorAlertFallback({ error, className }: ErrorAlertFallbackProps) {
-	const message = error instanceof Error ? error.message : String(error);
-
-	return (
-		<div className={`ErrorAlertFallback-root${className ? ` ${className}` : ""}`}>
-			<div className="ErrorAlertFallback-content">
-				<p className="ErrorAlertFallback-title">{getLocalizedString("An error occured. Try refreshing the page")}</p>
-				<p>{message}</p>
-			</div>
-			<button type="button" className="ErrorAlertFallback-reload" onClick={() => window.location.reload()}>
-				{getLocalizedString("Reload page")}
-			</button>
-		</div>
-	);
-}
-
-// ── RouteErrorPage ────────────────────────────────────────────────────────────
-
-export function RouteErrorPage() {
-	const error = useRouteError();
-	const { message, stackTrace, title } = parseError(error);
-
-	useEffect(() => {
-		(globalThis as any).af?.common?.logError?.(error);
-	}, [error]);
-
-	return (
-		<PageContainer className="flow">
-			<h1>{title}</h1>
-			{message && <p>{message}</p>}
-			{stackTrace && <pre className="RouteErrorPage-stack">{stackTrace}</pre>}
-		</PageContainer>
-	);
-}
-
-// ── AsyncErrorAlert ───────────────────────────────────────────────────────────
-
-export function AsyncErrorAlert() {
-	const error = useAsyncError();
-	const message = typeof error === "string" ? error : (error as any)?.message;
-
-	return <div className="ErrorAlertFallback-root">{message}</div>;
-}
-
-// ── DataObjectErrorAlert ──────────────────────────────────────────────────────
-
-export function DataObjectErrorAlert({ dataObject }: { dataObject: DataObject<any> }) {
-	const error = useError(dataObject);
-
-	return error ? <div className="ErrorAlertFallback-root">{error}</div> : null;
-}
+import "./ErrorBoundary.css";
+
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useError } from "@olenbetong/appframe-react";
+
+import { Component, useEffect } from "react";
+import { useAsyncError, useRouteError } from "react-router";
+
+import { PageContainer } from "./PageContainer.js";
+import { getLocalizedString } from "../i18n.js";
+
+function parseError(error: unknown) {
+	let message = "Unspecified error";
+	let stackTrace: string | null = null;
+	let title: string = getLocalizedString("Unexpected application error");
+
+	if (typeof error === "string") {
+		message = error;
+	} else if (error && typeof error === "object") {
+		const err = error as any;
+		if (err.status) {
+			title = `${err.status} ${err.statusText}`;
+			message = err.message ?? "";
+		} else if (err.message) {
+			message = err.message;
+			if (err.type) {
+				message = `${err.type}: ${message}`;
+			}
+		} else {
+			message = String(error);
+		}
+
+		if (err.stack || err.stackTrace) {
+			stackTrace = err.stack ?? err.stackTrace;
+		}
+	}
+
+	return { message, stackTrace, title };
+}
+
+// ── AppErrorBoundary ──────────────────────────────────────────────────────────
+
+export type AppErrorBoundaryProps = {
+	children?: React.ReactNode;
+	message?: string | ((error: unknown) => string);
+	imgSrc?: string;
+	image?: React.ReactNode;
+};
+
+type AppErrorBoundaryState = {
+	hasError: boolean;
+	error: unknown;
+};
+
+export class AppErrorBoundary extends Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
+	constructor(props: AppErrorBoundaryProps) {
+		super(props);
+		this.state = { hasError: false, error: null };
+	}
+
+	static getDerivedStateFromError(error: unknown): AppErrorBoundaryState {
+		return { hasError: true, error };
+	}
+
+	componentDidCatch(error: unknown, errorInfo: unknown) {
+		console.error(error, errorInfo);
+	}
+
+	render(): React.ReactNode {
+		if (this.state.hasError) {
+			const { imgSrc, message, image } = this.props;
+			const { message: errorMessage } = parseError(this.state.error);
+			const customMessage = typeof message === "function" ? message(this.state.error) : message;
+
+			return (
+				<div className="AppErrorBoundary-root">
+					<div className="AppErrorBoundary-inner">
+						{image ?? (
+							<img
+								alt=""
+								src={imgSrc ?? "/file/site/graphic/error-broken-robot.svg"}
+								className="AppErrorBoundary-image"
+							/>
+						)}
+						<h1 className="AppErrorBoundary-title">{getLocalizedString("Something went terribly wrong!")}</h1>
+						<div className="AppErrorBoundary-alert">{errorMessage}</div>
+						<p className="AppErrorBoundary-message">
+							{customMessage ??
+								getLocalizedString(
+									"Sometimes it is enough to simply refresh the page. If the error persists, contact the IT department.",
+								)}
+						</p>
+						<button type="button" className="AppErrorBoundary-reload" onClick={() => window.location.reload()}>
+							{getLocalizedString("Refresh page")}
+						</button>
+					</div>
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}
+
+// ── ErrorAlertFallback ────────────────────────────────────────────────────────
+
+export type ErrorAlertFallbackProps = {
+	error: unknown;
+	className?: string;
+};
+
+export function ErrorAlertFallback({ error, className }: ErrorAlertFallbackProps) {
+	const message = error instanceof Error ? error.message : String(error);
+
+	return (
+		<div className={`ErrorAlertFallback-root${className ? ` ${className}` : ""}`}>
+			<div className="ErrorAlertFallback-content">
+				<p className="ErrorAlertFallback-title">{getLocalizedString("An error occured. Try refreshing the page")}</p>
+				<p>{message}</p>
+			</div>
+			<button type="button" className="ErrorAlertFallback-reload" onClick={() => window.location.reload()}>
+				{getLocalizedString("Reload page")}
+			</button>
+		</div>
+	);
+}
+
+// ── RouteErrorPage ────────────────────────────────────────────────────────────
+
+export function RouteErrorPage() {
+	const error = useRouteError();
+	const { message, stackTrace, title } = parseError(error);
+
+	useEffect(() => {
+		(globalThis as any).af?.common?.logError?.(error);
+	}, [error]);
+
+	return (
+		<PageContainer className="flow">
+			<h1>{title}</h1>
+			{message && <p>{message}</p>}
+			{stackTrace && <pre className="RouteErrorPage-stack">{stackTrace}</pre>}
+		</PageContainer>
+	);
+}
+
+// ── AsyncErrorAlert ───────────────────────────────────────────────────────────
+
+export function AsyncErrorAlert() {
+	const error = useAsyncError();
+	const message = typeof error === "string" ? error : (error as any)?.message;
+
+	return <div className="ErrorAlertFallback-root">{message}</div>;
+}
+
+// ── DataObjectErrorAlert ──────────────────────────────────────────────────────
+
+export function DataObjectErrorAlert({ dataObject }: { dataObject: DataObject<any> }) {
+	const error = useError(dataObject);
+
+	return error ? <div className="ErrorAlertFallback-root">{error}</div> : null;
+}

package/src/layout/PageContainer.css

@@ -1,48 +1,48 @@
-@media screen {
-	.ObPageContainer-root {
-		max-height: 100%;
-		overflow: auto;
-		height: auto;
-	}
-
-	.ObPageContainer-root.ObPageContainer-fullHeight {
-		height: 100%;
-	}
-
-	.ObPageContainer-inner {
-		--ob-page-container-gutter: 1rem;
-
-		margin-left: 0;
-		height: auto;
-		padding: 1rem var(--ob-page-container-gutter);
-		box-sizing: border-box;
-		max-width: 100%;
-	}
-
-	.ObPageContainer-fullHeight .ObPageContainer-inner {
-		height: 100%;
-	}
-
-	/* The content width on the Page.Block scale (rem for a 14px root); the gutters come on top. */
-	.ObPageContainer-inner.ObPageContainer-text {
-		max-width: calc(41rem + 2 * var(--ob-page-container-gutter));
-	}
-
-	.ObPageContainer-inner.ObPageContainer-md {
-		max-width: calc(55rem + 2 * var(--ob-page-container-gutter));
-	}
-
-	.ObPageContainer-inner.ObPageContainer-lg {
-		max-width: calc(73rem + 2 * var(--ob-page-container-gutter));
-	}
-
-	.ObPageContainer-inner.ObPageContainer-xl {
-		max-width: calc(110rem + 2 * var(--ob-page-container-gutter));
-	}
-}
-
-@media screen and (min-width: 600px) {
-	.ObPageContainer-inner {
-		--ob-page-container-gutter: 1.5rem;
-	}
-}
+@media screen {
+	.ObPageContainer-root {
+		max-height: 100%;
+		overflow: auto;
+		height: auto;
+	}
+
+	.ObPageContainer-root.ObPageContainer-fullHeight {
+		height: 100%;
+	}
+
+	.ObPageContainer-inner {
+		--ob-page-container-gutter: 1rem;
+
+		margin-left: 0;
+		height: auto;
+		padding: 1rem var(--ob-page-container-gutter);
+		box-sizing: border-box;
+		max-width: 100%;
+	}
+
+	.ObPageContainer-fullHeight .ObPageContainer-inner {
+		height: 100%;
+	}
+
+	/* The content width on the Page.Block scale (rem for a 14px root); the gutters come on top. */
+	.ObPageContainer-inner.ObPageContainer-text {
+		max-width: calc(41rem + 2 * var(--ob-page-container-gutter));
+	}
+
+	.ObPageContainer-inner.ObPageContainer-md {
+		max-width: calc(55rem + 2 * var(--ob-page-container-gutter));
+	}
+
+	.ObPageContainer-inner.ObPageContainer-lg {
+		max-width: calc(73rem + 2 * var(--ob-page-container-gutter));
+	}
+
+	.ObPageContainer-inner.ObPageContainer-xl {
+		max-width: calc(110rem + 2 * var(--ob-page-container-gutter));
+	}
+}
+
+@media screen and (min-width: 600px) {
+	.ObPageContainer-inner {
+		--ob-page-container-gutter: 1.5rem;
+	}
+}

package/src/layout/PageContainer.tsx

@@ -1,41 +1,41 @@
-import "./PageContainer.css";
-
-import clsx from "clsx";
-import type React from "react";
-
-export type PageContainerMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
-
-export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
-	fullHeight?: boolean;
-	/**
-	 * Predefined max-width of the content, on the `Page.Block` scale (`xs`/`sm` 41rem,
-	 * `md` 55rem, `lg` 73rem, `xl` 110rem, plus the gutters). The content stays against the
-	 * leading edge, as the MUI-era `PageContainer` did; `Page.Block`/`Container` centre it.
-	 * @default max-width: 100%
-	 */
-	maxWidth?: PageContainerMaxWidth;
-};
-
-const maxWidthClassName: Record<Exclude<PageContainerMaxWidth, false>, string> = {
-	xs: "ObPageContainer-text",
-	sm: "ObPageContainer-text",
-	md: "ObPageContainer-md",
-	lg: "ObPageContainer-lg",
-	xl: "ObPageContainer-xl",
-};
-
-/**
- * @deprecated Use `Page.Block` instead. `maxWidth` mapping: `xs`/`sm` →
- * `width="text"`, `md` → `"md"`, `lg` → `"lg"`, `xl` → `"xl"`, `false` → omit
- * `width`. Replace `fullHeight` with `<Page layout="app">` and
- * `<Page.Block grow overflow="auto">`.
- */
-export function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps) {
-	return (
-		<div className={clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight")}>
-			<div className={clsx("ObPageContainer-inner", maxWidth && maxWidthClassName[maxWidth], className)} {...props}>
-				{children}
-			</div>
-		</div>
-	);
-}
+import "./PageContainer.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export type PageContainerMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
+
+export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+	fullHeight?: boolean;
+	/**
+	 * Predefined max-width of the content, on the `Page.Block` scale (`xs`/`sm` 41rem,
+	 * `md` 55rem, `lg` 73rem, `xl` 110rem, plus the gutters). The content stays against the
+	 * leading edge, as the MUI-era `PageContainer` did; `Page.Block`/`Container` centre it.
+	 * @default max-width: 100%
+	 */
+	maxWidth?: PageContainerMaxWidth;
+};
+
+const maxWidthClassName: Record<Exclude<PageContainerMaxWidth, false>, string> = {
+	xs: "ObPageContainer-text",
+	sm: "ObPageContainer-text",
+	md: "ObPageContainer-md",
+	lg: "ObPageContainer-lg",
+	xl: "ObPageContainer-xl",
+};
+
+/**
+ * @deprecated Use `Page.Block` instead. `maxWidth` mapping: `xs`/`sm` →
+ * `width="text"`, `md` → `"md"`, `lg` → `"lg"`, `xl` → `"xl"`, `false` → omit
+ * `width`. Replace `fullHeight` with `<Page layout="app">` and
+ * `<Page.Block grow overflow="auto">`.
+ */
+export function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps) {
+	return (
+		<div className={clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight")}>
+			<div className={clsx("ObPageContainer-inner", maxWidth && maxWidthClassName[maxWidth], className)} {...props}>
+				{children}
+			</div>
+		</div>
+	);
+}

package/src/layout/ResponsiveDialog.css

@@ -1,86 +1,86 @@
-/*
- * Width-limited on large screens, full-screen below the next MUI breakpoint up:
- * xs (444px) fills below 600px, sm (600px) below 900px, md (900px) below 1200px,
- * lg (1200px) below 1536px, xl (1536px) below 1920px, none always.
- */
-@layer ds {
-	.ObResponsiveDialog-root {
-		width: 100%;
-	}
-
-	.ObResponsiveDialog-root[data-max-width="xs"] {
-		max-width: 444px;
-	}
-	.ObResponsiveDialog-root[data-max-width="sm"] {
-		max-width: 600px;
-	}
-	.ObResponsiveDialog-root[data-max-width="md"] {
-		max-width: 900px;
-	}
-	.ObResponsiveDialog-root[data-max-width="lg"] {
-		max-width: 1200px;
-	}
-	.ObResponsiveDialog-root[data-max-width="xl"] {
-		max-width: 1536px;
-	}
-
-	.ObResponsiveDialog-root[data-max-width="none"] {
-		max-width: none;
-		width: 100vw;
-		height: 100dvh;
-		max-height: none;
-		margin: 0;
-		border-radius: 0;
-	}
-
-	@media (max-width: 599.98px) {
-		.ObResponsiveDialog-root[data-max-width="xs"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-	@media (max-width: 899.98px) {
-		.ObResponsiveDialog-root[data-max-width="sm"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-	@media (max-width: 1199.98px) {
-		.ObResponsiveDialog-root[data-max-width="md"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-	@media (max-width: 1535.98px) {
-		.ObResponsiveDialog-root[data-max-width="lg"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-	@media (max-width: 1919.98px) {
-		.ObResponsiveDialog-root[data-max-width="xl"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-}
+/*
+ * Width-limited on large screens, full-screen below the next MUI breakpoint up:
+ * xs (444px) fills below 600px, sm (600px) below 900px, md (900px) below 1200px,
+ * lg (1200px) below 1536px, xl (1536px) below 1920px, none always.
+ */
+@layer ds {
+	.ObResponsiveDialog-root {
+		width: 100%;
+	}
+
+	.ObResponsiveDialog-root[data-max-width="xs"] {
+		max-width: 444px;
+	}
+	.ObResponsiveDialog-root[data-max-width="sm"] {
+		max-width: 600px;
+	}
+	.ObResponsiveDialog-root[data-max-width="md"] {
+		max-width: 900px;
+	}
+	.ObResponsiveDialog-root[data-max-width="lg"] {
+		max-width: 1200px;
+	}
+	.ObResponsiveDialog-root[data-max-width="xl"] {
+		max-width: 1536px;
+	}
+
+	.ObResponsiveDialog-root[data-max-width="none"] {
+		max-width: none;
+		width: 100vw;
+		height: 100dvh;
+		max-height: none;
+		margin: 0;
+		border-radius: 0;
+	}
+
+	@media (max-width: 599.98px) {
+		.ObResponsiveDialog-root[data-max-width="xs"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 899.98px) {
+		.ObResponsiveDialog-root[data-max-width="sm"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1199.98px) {
+		.ObResponsiveDialog-root[data-max-width="md"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1535.98px) {
+		.ObResponsiveDialog-root[data-max-width="lg"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1919.98px) {
+		.ObResponsiveDialog-root[data-max-width="xl"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+}