@olenbetong/appframe-ds 0.4.0 → 0.5.0

package/src/page/PageBlock.tsx

@@ -0,0 +1,78 @@
+import "./PageBlock.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const pageBlockWidths = ["text", "md", "lg", "xl", "2xl"] as const;
+
+export type PageBlockWidth = (typeof pageBlockWidths)[number];
+
+export type PageBlockProps = React.HTMLAttributes<HTMLElement> & {
+	/**
+	 * Overrides the rendered element (e.g. `"main"`, `"header"`, `"footer"`)
+	 * @default "div"
+	 */
+	as?: React.ElementType;
+	children?: React.ReactNode;
+	/**
+	 * Fills the remaining space of the parent `Page`. Combine with
+	 * `overflow="auto"` inside `<Page layout="app">` to make the block the
+	 * scroll container.
+	 * @default false
+	 */
+	grow?: boolean;
+	/**
+	 * Adds a standardised responsive inline padding
+	 * @default false
+	 */
+	gutters?: boolean;
+	/**
+	 * Overflow behaviour of the block. Only relevant inside
+	 * `<Page layout="app">`, where scrolling is delegated down the tree.
+	 */
+	overflow?: "auto" | "hidden";
+	/**
+	 * Predefined max-width. Content is horizontally centered.
+	 *
+	 * - `text`: 36rem (576px) — recommended line-length for running text
+	 * - `md`: 48rem (768px)
+	 * - `lg`: 64rem (1024px)
+	 * - `xl`: 80rem (1280px)
+	 * - `2xl`: 90rem (1440px)
+	 *
+	 * @default max-width: 100%
+	 */
+	width?: PageBlockWidth;
+};
+
+/**
+ * Layout block for defining max-width, gutters and horizontal centering.
+ * Replaces the deprecated `PageContainer` (`maxWidth` mapping: `xs`/`sm` →
+ * `text`, `md` → `md`, `lg` → `lg`, `xl` → `xl`, `false` → no `width`).
+ */
+export function PageBlock({
+	as: Component = "div",
+	children,
+	className,
+	grow,
+	gutters,
+	overflow,
+	width,
+	...props
+}: PageBlockProps) {
+	return (
+		<Component
+			className={clsx(
+				"ObPageBlock-root",
+				width && `ObPageBlock-${width}`,
+				gutters && "ObPageBlock-gutters",
+				grow && "ObPageBlock-grow",
+				overflow && `ObPageBlock-overflow${overflow === "auto" ? "Auto" : "Hidden"}`,
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/page/PageHeader.css

@@ -0,0 +1,148 @@
+.ObPageHeader-root {
+	flex: 0 0 auto;
+}
+
+/* --- appbar variant --- */
+
+.ObPageHeader-appbar {
+	background-color: var(--ds-color-brand-base-default, #0062ba);
+	color: var(--ds-color-brand-base-contrast-default, #fff);
+}
+
+.ObPageHeader-appbar .ObPageHeader-bar {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	min-height: var(--ob-page-appbar-height, 3.5rem);
+	padding-inline: 0.5rem 1rem;
+}
+
+.ObPageHeader-title {
+	flex: 1 1 auto;
+	margin: 0;
+	font-size: var(--ds-font-size-lg, 1.25rem);
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ObPageHeader-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-left: auto;
+}
+
+.ObPageHeader-title + .ObPageHeader-actions {
+	margin-left: 0;
+}
+
+.ObPageHeader-toggle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	border-radius: 50%;
+	height: 2.75rem;
+	width: 2.75rem;
+	font-size: 1.5rem;
+	flex-shrink: 0;
+}
+
+.ObPageHeader-toggle:hover {
+	background-color: rgb(255 255 255 / 0.12);
+}
+
+/* --- plain variant --- */
+
+.ObPageHeader-plainInner {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.ObPageHeader-plainTitle {
+	margin: 0;
+	font-size: var(--ds-font-size-xl, 1.5rem);
+	font-weight: 500;
+}
+
+/*
+ * Reserved slot for the app-launcher and user profile menu in the future
+ * sidebar-free site layout. Hidden under the current sidebar layout; the
+ * activation mechanism is decided together with the new website template.
+ */
+.ObPageHeader-end {
+	display: none;
+}
+
+/* --- drawer --- */
+
+@media screen {
+	.ObPageHeader-drawer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: var(--ob-page-drawer-width, 20rem);
+		max-width: 90%;
+		box-sizing: border-box;
+		background-color: var(--ds-color-neutral-background-default, #fff);
+		color: var(--ds-color-neutral-text-default, #1e2b3c);
+		transform: translateX(-100%);
+		transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.ObPageHeader-drawer > .MenuItems-root {
+		flex: 1 1 auto;
+		min-height: 0;
+	}
+
+	.ObPageHeader-drawer.ObPageHeader-drawerOpen {
+		transform: translateX(0);
+	}
+
+	.ObPageHeader-drawerDocked {
+		border-right: 1px solid var(--ds-color-neutral-border-subtle, #dfdfdf);
+		z-index: 1100;
+	}
+
+	.ObPageHeader-drawerOverlayMode {
+		z-index: 1200;
+		box-shadow:
+			rgb(0 0 0 / 20%) 0px 8px 10px -5px,
+			rgb(0 0 0 / 14%) 0px 16px 24px 2px,
+			rgb(0 0 0 / 12%) 0px 6px 30px 5px;
+	}
+
+	.ObPageHeader-drawerOverlay {
+		position: fixed;
+		inset: 0;
+		background-color: rgb(0 0 0 / 50%);
+		z-index: 1199;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.ObPageHeader-drawerOverlay.ObPageHeader-drawerOpen {
+		opacity: 1;
+		pointer-events: auto;
+	}
+}
+
+@media print {
+	.ObPageHeader-appbar .ObPageHeader-bar,
+	.ObPageHeader-drawer,
+	.ObPageHeader-drawerOverlay,
+	.ObPageHeader-toggle {
+		display: none !important;
+	}
+}

package/src/page/PageHeader.tsx

@@ -0,0 +1,184 @@
+import "./PageHeader.css";
+
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+import clsx from "clsx";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router";
+
+import { AppMenu, type AppMenuProps } from "../layout/AppMenu.js";
+import { PageBlock, type PageBlockWidth } from "./PageBlock.js";
+
+export type PageHeaderVariant = "appbar" | "plain";
+
+export type PageHeaderProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+	/**
+	 * Actions displayed at the end of the header (buttons, search, etc.)
+	 */
+	actions?: React.ReactNode;
+	/**
+	 * Props passed to the `AppMenu` wrapping the `menu` content
+	 */
+	AppMenuProps?: AppMenuProps;
+	children?: React.ReactNode;
+	/**
+	 * App menu (navigation) content. When provided, the `appbar` variant
+	 * renders a menu toggle button and a drawer hosting the menu — docked on
+	 * desktop (≥1200px), overlay on smaller screens.
+	 */
+	menu?: React.ReactNode;
+	/**
+	 * Application title
+	 */
+	title?: React.ReactNode;
+	/**
+	 * Adds a standardised responsive inline padding to the header content.
+	 * See `Page.Block`.
+	 * @default false
+	 */
+	gutters?: boolean;
+	/**
+	 * Constrains and centers the header content to a predefined max-width,
+	 * so it can align with a `Page.Block` of the same width. See `Page.Block`.
+	 */
+	width?: PageBlockWidth;
+	/**
+	 * - `"appbar"` (default): a top app bar with menu toggle, title and
+	 *   actions. For apps that have an app menu.
+	 * - `"plain"`: no app bar chrome — for simple apps without an app menu
+	 *   (e.g. report-issue). Renders the title as a regular heading block.
+	 *
+	 * Both variants reserve an end-slot (`.ObPageHeader-end`) that will host
+	 * the app-launcher and user profile menu in the future sidebar-free site
+	 * layout. It is hidden under the current sidebar layout.
+	 * @default "appbar"
+	 */
+	variant?: PageHeaderVariant;
+};
+
+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;
+}
+
+type PageHeaderDrawerProps = {
+	AppMenuProps?: AppMenuProps;
+	menu: React.ReactNode;
+	onClose: () => void;
+	isMobile: boolean;
+	open: boolean;
+};
+
+function PageHeaderDrawer({ AppMenuProps, menu, onClose, isMobile, open }: PageHeaderDrawerProps) {
+	let location = useLocation();
+	let prevLocation = useRef(location);
+
+	useEffect(() => {
+		if (location !== prevLocation.current) {
+			prevLocation.current = location;
+			if (isMobile) onClose();
+		}
+	}, [location, isMobile, onClose]);
+
+	return (
+		<>
+			{isMobile && (
+				<div
+					className={clsx("ObPageHeader-drawerOverlay", open && "ObPageHeader-drawerOpen")}
+					onClick={onClose}
+					aria-hidden="true"
+				/>
+			)}
+			<div
+				className={clsx(
+					"ObPageHeader-drawer",
+					"AppMenu-drawer",
+					isMobile ? "ObPageHeader-drawerOverlayMode" : "ObPageHeader-drawerDocked",
+					open && "ObPageHeader-drawerOpen",
+				)}
+			>
+				<AppMenu {...AppMenuProps}>{menu}</AppMenu>
+			</div>
+		</>
+	);
+}
+
+/**
+ * Page header for use inside `Page`. See the `variant` prop for the two
+ * supported header styles.
+ */
+export function PageHeader({
+	actions,
+	AppMenuProps,
+	children,
+	className,
+	gutters,
+	menu,
+	title,
+	variant = "appbar",
+	width,
+	...props
+}: PageHeaderProps) {
+	let isMobile = useIsMobile();
+	let [desktopOpen, setDesktopOpen] = useState(true);
+	let [mobileOpen, setMobileOpen] = useState(false);
+
+	let open = isMobile ? mobileOpen : desktopOpen;
+	let toggle = () => (isMobile ? setMobileOpen((o) => !o) : setDesktopOpen((o) => !o));
+
+	if (variant === "plain") {
+		return (
+			<header className={clsx("ObPageHeader-root", "ObPageHeader-plain", className)} {...props}>
+				<PageBlock className="ObPageHeader-plainInner" width={width} gutters={gutters}>
+					{title && <h1 className="ObPageHeader-plainTitle">{title}</h1>}
+					{actions && <div className="ObPageHeader-actions">{actions}</div>}
+					{children}
+					<div className="ObPageHeader-end" />
+				</PageBlock>
+			</header>
+		);
+	}
+
+	return (
+		<header className={clsx("ObPageHeader-root", "ObPageHeader-appbar", className)} {...props}>
+			<PageBlock className="ObPageHeader-bar" width={width} gutters={gutters}>
+				{menu && (
+					<button
+						type="button"
+						className="ObPageHeader-toggle"
+						onClick={toggle}
+						aria-label={getLocalizedString("Toggle menu")}
+						aria-expanded={open}
+					>
+						☰
+					</button>
+				)}
+				{title && <h1 className="ObPageHeader-title">{title}</h1>}
+				{actions && <div className="ObPageHeader-actions">{actions}</div>}
+				<div className="ObPageHeader-end" />
+			</PageBlock>
+			{children}
+			{menu && (
+				<PageHeaderDrawer
+					AppMenuProps={AppMenuProps}
+					menu={menu}
+					onClose={() => setMobileOpen(false)}
+					isMobile={isMobile}
+					open={open}
+				/>
+			)}
+		</header>
+	);
+}

package/src/page/index.ts

@@ -0,0 +1,3 @@
+export * from "./Page.js";
+export * from "./PageBlock.js";
+export * from "./PageHeader.js";

package/src/paper/Paper.css

@@ -0,0 +1,35 @@
+.ObPaper-root {
+	background-color: var(--ds-color-neutral-surface-default, #fff);
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
+	border-radius: var(--ds-border-radius-md, 0.375rem);
+}
+
+.ObPaper-shadow-xs {
+	box-shadow: var(--ds-shadow-xs);
+}
+
+.ObPaper-shadow-sm {
+	box-shadow: var(--ds-shadow-sm);
+}
+
+.ObPaper-shadow-md {
+	box-shadow: var(--ds-shadow-md);
+}
+
+.ObPaper-shadow-lg {
+	box-shadow: var(--ds-shadow-lg);
+}
+
+.ObPaper-shadow-xl {
+	box-shadow: var(--ds-shadow-xl);
+}
+
+.ObPaper-border {
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #dfdfdf);
+}
+
+@media print {
+	.ObPaper-root {
+		box-shadow: none;
+	}
+}

package/src/paper/Paper.tsx

@@ -0,0 +1,50 @@
+import "./Paper.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const paperShadows = ["none", "xs", "sm", "md", "lg", "xl"] as const;
+
+export type PaperShadow = (typeof paperShadows)[number];
+
+export type PaperProps = React.HTMLAttributes<HTMLElement> & {
+	/**
+	 * Overrides the rendered element (e.g. `"section"`, `"ul"`)
+	 * @default "div"
+	 */
+	as?: React.ElementType;
+	/**
+	 * Adds a subtle border. Combine with `shadow="none"` for an outlined
+	 * variant (MUI `variant="outlined"` equivalent).
+	 * @default false
+	 */
+	border?: boolean;
+	children?: React.ReactNode;
+	/**
+	 * Elevation shadow, using the designsystemet `--ds-shadow-*` tokens.
+	 * @default "sm"
+	 */
+	shadow?: PaperShadow;
+};
+
+/**
+ * Surface component equivalent to MUI `Paper`: a neutral surface with
+ * rounded corners and an elevation shadow. Use it instead of hand-rolled
+ * `background` + `box-shadow` CSS so surfaces stay consistent with the
+ * designsystemet tokens (and adapt to dark mode).
+ */
+export function Paper({ as: Component = "div", border, children, className, shadow = "sm", ...props }: PaperProps) {
+	return (
+		<Component
+			className={clsx(
+				"ObPaper-root",
+				shadow !== "none" && `ObPaper-shadow-${shadow}`,
+				border && "ObPaper-border",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/paper/index.ts

@@ -0,0 +1 @@
+export * from "./Paper.js";

package/es/AfLookup/BoundLookup.d.ts

@@ -1,10 +0,0 @@
-import type { CurrentRow, DataObject } from "@olenbetong/appframe-data";
-import { type DistributiveOmit } from "@olenbetong/appframe-react";
-import { type AfLookupProps } from "./Lookup.js";
-export type BoundLookupProps<TBoundData extends Record<string, unknown>, TLookupData extends Record<string, unknown>> = DistributiveOmit<AfLookupProps<TLookupData>, "onChange"> & {
-    dataObject: DataObject<TLookupData>;
-    displayField?: keyof TBoundData;
-    getChanges: (selectedItem: TLookupData | null) => Partial<TBoundData>;
-    getDisplayValue?: (currentRow: CurrentRow<TBoundData>) => string;
-};
-export declare function BoundLookup<TBoundData extends Record<string, unknown>, TLookupData extends Record<string, unknown> = any>({ dataObject, displayField, getChanges, getDisplayValue, ...props }: BoundLookupProps<TBoundData, TLookupData>): import("react").JSX.Element;

package/es/AfLookup/BoundLookup.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCurrentRow, useDataObject } from "@olenbetong/appframe-react";
-import { AfLookup } from "./Lookup.js";
-export function BoundLookup({ dataObject, displayField, getChanges, getDisplayValue, ...props }) {
-    let boundDataObject = useDataObject();
-    let row = useCurrentRow(boundDataObject);
-    function handleChange(item) {
-        let changes = getChanges(item);
-        for (let key in changes) {
-            let newValue = changes[key];
-            boundDataObject.currentRow(key, newValue);
-        }
-    }
-    let displayValue = getDisplayValue ? getDisplayValue(row) : displayField ? String(row[displayField] ?? "") : "";
-    return _jsx(AfLookup, { dataObject: dataObject, value: displayValue, onChange: handleChange, ...props });
-}

package/es/AfLookup/Combobox.css

@@ -1,78 +0,0 @@
-.ObCombobox-root {
-	height: 100%;
-	display: grid;
-	grid-template-rows: min-content auto 1fr;
-	gap: 0.5rem;
-
-	overscroll-behavior: contain;
-}
-
-.ObCombobox-actions {
-	display: flex;
-	justify-content: space-between;
-}
-
-.ObCombobox-listWrap {
-	overflow: hidden;
-	min-height: 0;
-	border: 1px solid rgb(0 0 0 / 0.12);
-	border-radius: 0.25rem;
-	background-color: white;
-}
-
-.ObCombobox-list {
-	border: 1px solid rgb(0 0 0 / 0.06);
-	height: 100%;
-	overflow-y: hidden;
-	overscroll-behavior: contain;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-.ObCombobox-input {
-	background-color: white;
-}
-
-.ObCombobox-listItem {
-	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
-	cursor: pointer;
-
-	&.active {
-		background-color: var(--active-color);
-	}
-
-	&:hover {
-		background-color: rgb(0 0 0 / 0.06);
-	}
-
-	&.active:hover {
-		background-color: oklch(from var(--active-color) calc(l + 0.1) calc(c - 0.04) h);
-	}
-}
-
-.ObCombobox-progress {
-	position: relative;
-	height: 4px;
-	overflow: hidden;
-	background-color: rgb(0 0 0 / 0.08);
-}
-
-.ObCombobox-progress-bar {
-	position: absolute;
-	top: 0;
-	left: -100%;
-	height: 100%;
-	width: 50%;
-	background-color: var(--ds-color-accent-base-default, #0062ba);
-	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
-}
-
-@keyframes ObCombobox-progress-anim {
-	0% {
-		left: -100%;
-	}
-	100% {
-		left: 200%;
-	}
-}

package/es/AfLookup/Combobox.d.ts

@@ -1,31 +0,0 @@
-import "./Combobox.css";
-import type { DataObject } from "@olenbetong/appframe-data";
-import { type LookupColumn } from "@olenbetong/appframe-react";
-export interface ComboboxBaseProps<T extends Record<string, unknown>> {
-    nullable?: boolean;
-    dataObject: DataObject<T>;
-    uniqueIdField?: string;
-    isItemSelected?: (item: T) => boolean;
-    onChange?: (item: T | null) => void;
-    value?: T;
-    onClose?: () => void;
-}
-export interface ComboboxListProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
-    /**
-     * Renders the popup content as a list (default).
-     */
-    variant?: "list";
-    renderItem: (props: React.ComponentPropsWithRef<"li"> & {
-        item: T;
-    }) => React.ReactNode;
-}
-export interface ComboboxGridProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
-    /**
-     * Renders the popup content as a grid with a header row and one column per
-     * entry in `columns`.
-     */
-    variant: "grid";
-    columns: LookupColumn<T>[];
-}
-export type ComboboxProps<T extends Record<string, unknown>> = ComboboxListProps<T> | ComboboxGridProps<T>;
-export declare function Combobox<T extends Record<string, unknown>>(props: ComboboxProps<T>): import("react").JSX.Element;