@olenbetong/appframe-ds 0.2.0 → 0.3.0

package/src/layout/AppMenuItem.tsx

@@ -0,0 +1,80 @@
+import "./AppMenuItem.css";
+
+import clsx from "clsx";
+import type { To } from "react-router";
+import { forwardRef } from "react";
+import { NavLink, type NavLinkProps } from "react-router";
+import type React from "react";
+
+export type AppMenuItemProps = Omit<NavLinkProps, "className"> & {
+	children: React.ReactNode | React.ReactNode[];
+	info?: React.ReactNode | React.ReactNode[];
+	icon?: React.ReactNode;
+	onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+	to: To;
+	end?: boolean;
+	className?: string;
+};
+
+export const AppMenuItem = forwardRef<HTMLAnchorElement, AppMenuItemProps>(function AppMenuItem(
+	{ children, className, end = true, info, to, icon, ...props }: AppMenuItemProps,
+	ref,
+) {
+	return (
+		<NavLink viewTransition to={to} className={clsx("AppMenuItem-root", className)} end={end} {...props} ref={ref}>
+			{icon && <span className="AppMenuItem-icon">{icon}</span>}
+			<span className="AppMenuItem-text">{children}</span>
+			{info && <span className="AppMenuItem-info">{info}</span>}
+		</NavLink>
+	);
+});
+
+export type AppMenuItemExternalLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+	children: React.ReactNode | React.ReactNode[];
+	info?: React.ReactNode | React.ReactNode[];
+	icon?: React.ReactNode;
+	href: string;
+	target?: string;
+};
+
+export const AppMenuItemExternalLink = forwardRef<HTMLAnchorElement, AppMenuItemExternalLinkProps>(
+	function AppMenuItemExternalLink(
+		{ children, className, href, info, icon, target, ...props }: AppMenuItemExternalLinkProps,
+		ref,
+	) {
+		return (
+			<a href={href} className={clsx("AppMenuItem-root", className)} target={target} {...props} ref={ref}>
+				{icon && <span className="AppMenuItem-icon">{icon}</span>}
+				<span className="AppMenuItem-text">{children}</span>
+				{info && <span className="AppMenuItem-info">{info}</span>}
+			</a>
+		);
+	},
+);
+
+export type AppMenuItemButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+	active?: boolean;
+	children: React.ReactNode | React.ReactNode[];
+	info?: React.ReactNode | React.ReactNode[];
+	icon?: React.ReactNode;
+	onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+export const AppMenuItemButton = forwardRef<HTMLButtonElement, AppMenuItemButtonProps>(function AppMenuItemButton(
+	{ children, className, active = false, info, onClick, icon, ...props }: AppMenuItemButtonProps,
+	ref,
+) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={clsx("AppMenuItem-root", className, active && "active")}
+			{...props}
+			ref={ref}
+		>
+			{icon && <span className="AppMenuItem-icon">{icon}</span>}
+			<span className="AppMenuItem-text">{children}</span>
+			{info && <span className="AppMenuItem-info">{info}</span>}
+		</button>
+	);
+});

package/src/layout/AppMenuSubheader.css

@@ -0,0 +1,18 @@
+.AppMenuSubheader-root {
+	font-size: var(--ds-font-size-xs, 0.75rem);
+	font-weight: 600;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	padding: 0.5rem 1rem;
+	color: var(--ds-color-neutral-text-subtle, #555);
+	background-color: var(--ds-color-neutral-background-default, transparent);
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+@media (pointer: fine) {
+	.AppMenuSubheader-root {
+		line-height: 36px;
+	}
+}

package/src/layout/AppMenuSubheader.tsx

@@ -0,0 +1,14 @@
+import "./AppMenuSubheader.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export type AppMenuSubheaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+export function AppMenuSubheader({ children, className, ...props }: AppMenuSubheaderProps) {
+	return (
+		<div className={clsx("AppMenuSubheader-root", className)} {...props}>
+			{children}
+		</div>
+	);
+}

package/src/layout/ErrorBoundary.css

@@ -0,0 +1,101 @@
+.AppErrorBoundary-root {
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.AppErrorBoundary-inner {
+	max-width: 36rem;
+	width: 100%;
+	margin: 0 auto;
+	padding: 1rem;
+	text-align: center;
+}
+
+.AppErrorBoundary-image {
+	opacity: 0.6;
+	max-height: 30vh;
+	max-width: 50vw;
+}
+
+.AppErrorBoundary-title {
+	margin-top: var(--ds-size-6, 1.5rem);
+	font-size: var(--ds-font-size-6, 1.5rem);
+	font-weight: 700;
+}
+
+.AppErrorBoundary-alert {
+	margin-block: var(--ds-size-6, 1.5rem);
+	background: var(--ds-color-danger-surface-default, #fde8e8);
+	color: var(--ds-color-danger-text-default, #c01c2c);
+	border: 1px solid var(--ds-color-danger-border-default, #f5a6ae);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	padding: var(--ds-size-3, 0.75rem) var(--ds-size-4, 1rem);
+	text-align: left;
+}
+
+.AppErrorBoundary-message {
+	margin-bottom: var(--ds-size-6, 1.5rem);
+}
+
+.AppErrorBoundary-reload {
+	appearance: none;
+	border: 1px solid currentColor;
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+	font: inherit;
+	font-size: var(--ds-font-size-3, 1rem);
+	padding: var(--ds-size-2, 0.5rem) var(--ds-size-4, 1rem);
+	margin-block: var(--ds-size-6, 1.5rem);
+}
+
+.AppErrorBoundary-reload:hover {
+	background: rgb(0 0 0 / 0.05);
+}
+
+.ErrorAlertFallback-root {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--ds-size-2, 0.5rem);
+	background: var(--ds-color-danger-surface-default, #fde8e8);
+	color: var(--ds-color-danger-text-default, #c01c2c);
+	border: 1px solid var(--ds-color-danger-border-default, #f5a6ae);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	padding: var(--ds-size-3, 0.75rem) var(--ds-size-4, 1rem);
+}
+
+.ErrorAlertFallback-content {
+	flex: 1;
+}
+
+.ErrorAlertFallback-title {
+	font-weight: 600;
+	margin-bottom: var(--ds-size-1, 0.25rem);
+}
+
+.ErrorAlertFallback-reload {
+	appearance: none;
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	font: inherit;
+	font-weight: 600;
+	padding: 0;
+	text-decoration: underline;
+	flex-shrink: 0;
+}
+
+.RouteErrorPage-stack {
+	background: rgb(0 0 0 / 0.07);
+	border: 2px solid rgb(0 0 0 / 0.15);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	padding: var(--ds-size-4, 1rem);
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-break: break-all;
+	font-size: var(--ds-font-size-1, 0.75rem);
+}

package/src/layout/ErrorBoundary.tsx

@@ -0,0 +1,162 @@
+import "./ErrorBoundary.css";
+
+import { getLocalizedString } from "@olenbetong/appframe-core";
+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";
+
+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

@@ -0,0 +1,29 @@
+@media screen {
+	.ObPageContainer-root {
+		max-height: 100%;
+		overflow: auto;
+		height: auto;
+	}
+
+	.ObPageContainer-root.ObPageContainer-fullHeight {
+		height: 100%;
+	}
+
+	.ObPageContainer-inner {
+		margin-left: 0;
+		height: auto;
+		padding: 1rem;
+		box-sizing: border-box;
+		max-width: 100%;
+	}
+
+	.ObPageContainer-fullHeight .ObPageContainer-inner {
+		height: 100%;
+	}
+}
+
+@media screen and (min-width: 600px) {
+	.ObPageContainer-inner {
+		padding: 1rem 1.5rem;
+	}
+}

package/src/layout/PageContainer.tsx

@@ -0,0 +1,19 @@
+import "./PageContainer.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+	fullHeight?: boolean;
+	maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
+};
+
+export function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps) {
+	return (
+		<div className={clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight")}>
+			<div className={clsx("ObPageContainer-inner", className)} {...props}>
+				{children}
+			</div>
+		</div>
+	);
+}

package/src/layout/PartnerToggle.tsx

@@ -0,0 +1,23 @@
+import { createPortal } from "react-dom";
+import type React from "react";
+
+let toggleRoot = document.createElement("div");
+let brand = document.querySelector(".partner-nav__brand");
+toggleRoot.id = "toggle-root";
+
+document.querySelector<HTMLDivElement>(".partner-nav")?.insertBefore(toggleRoot, brand);
+
+export function PartnerToggle({
+	onClick,
+	open,
+}: {
+	open: boolean;
+	onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}): React.ReactNode {
+	return createPortal(
+		<button type="button" className="LayoutSmall-toggle" onClick={onClick}>
+			{open ? "◀" : "☰"}
+		</button>,
+		toggleRoot,
+	);
+}

package/src/layout/constants.ts

@@ -0,0 +1,2 @@
+export const AF_MUI_PAGE_TITLE_ID = "PageTitleSmallLayout";
+export const AF_MUI_APPBAR_TOOLS_ID = "AppBarTools";

package/src/layout/index.css

@@ -0,0 +1,65 @@
+.app-view {
+	height: 100%;
+	overflow-y: hidden;
+}
+
+.scroll-view {
+	height: 100%;
+	max-height: 100%;
+	overflow-y: auto;
+}
+
+.flow > * + * {
+	margin-top: var(--flow-spacing, 1rem) !important;
+}
+
+.flow-xs > * {
+	--flow-spacing: 0.25rem;
+}
+
+.flow-sm > * {
+	--flow-spacing: 0.5rem;
+}
+
+.flow-lg > * {
+	--flow-spacing: 1.5rem;
+}
+
+.flow-xl > * {
+	--flow-spacing: 2rem;
+}
+
+.flow-xxl > * {
+	--flow-spacing: 3rem;
+}
+
+.app-grid {
+	height: 100%;
+	overflow-y: hidden;
+	display: grid;
+	gap: 1rem;
+}
+
+.rows-af {
+	grid-template-rows: auto 1fr;
+}
+
+.rows-aaf {
+	grid-template-rows: auto auto 1fr;
+}
+
+.rows-afaf {
+	grid-template-rows: auto 1fr auto 1fr;
+}
+
+.rows-aff {
+	grid-template-rows: auto 1fr 1fr;
+}
+
+.rows-f {
+	grid-template-rows: 1fr;
+}
+
+.rows-ff {
+	grid-template-rows: 1fr 1fr;
+}

package/src/layout/index.tsx

@@ -0,0 +1,62 @@
+import "./index.css";
+
+import { useEffect, useState } from "react";
+import type React from "react";
+
+import { AppLayoutDesktop } from "./AppLayoutDesktop.js";
+import { AppLayoutMobile } from "./AppLayoutMobile.js";
+import type { AppMenuProps } from "./AppMenu.js";
+
+export type AppLayoutProps = {
+	AppMenuProps?: AppMenuProps;
+	children: React.ReactNode | React.ReactNode[];
+	menu?: React.ReactNode | React.ReactNode[];
+	/**
+	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
+	 */
+	toolbar?: React.ReactNode | React.ReactNode[];
+	/**
+	 * @deprecated The title is now rendered in the server-rendered toolbar. This prop has no effect.
+	 */
+	title?: React.ReactNode;
+	/**
+	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
+	 */
+	enableMenuToggle?: boolean;
+	/**
+	 * Enable partner mode (for partner.olenbetong.no applications).
+	 * Adds a toggle button to the existing partner header instead of the app bar.
+	 */
+	partner?: boolean;
+};
+
+function useIsMobile() {
+	let [isMobile, setIsMobile] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia("(max-width: 1199px)").matches;
+	});
+
+	useEffect(() => {
+		let mq = window.matchMedia("(max-width: 1199px)");
+		let handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	return isMobile;
+}
+
+export * from "./AppMenu.js";
+export * from "./AppMenuItem.js";
+export * from "./AppMenuSubheader.js";
+export * from "./constants.js";
+export * from "./ErrorBoundary.js";
+export * from "./PageContainer.js";
+export * from "./PartnerToggle.js";
+
+export function AppLayout(props: AppLayoutProps) {
+	let isSmall = useIsMobile();
+	let Component = isSmall ? AppLayoutMobile : AppLayoutDesktop;
+
+	return <Component {...props} />;
+}