@olenbetong/appframe-ds 0.4.1 → 0.6.0

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/src/progress/LinearProgress.css

@@ -0,0 +1,93 @@
+.ObLinearProgress-root {
+	--obLinearProgress-thickness: 0.25rem;
+	--obLinearProgress-duration: 2.1s;
+
+	position: relative;
+	display: block;
+	box-sizing: border-box;
+	inline-size: 100%;
+	block-size: var(--obLinearProgress-thickness);
+	overflow: hidden;
+	background-color: var(--ds-color-surface-active, #cddffb);
+	border-radius: var(--ds-border-radius-full, 624.9375rem);
+}
+
+.ObLinearProgress-root[data-size="xs"] {
+	--obLinearProgress-thickness: 0.125rem;
+}
+
+.ObLinearProgress-root[data-size="sm"] {
+	--obLinearProgress-thickness: 0.25rem;
+}
+
+.ObLinearProgress-root[data-size="md"] {
+	--obLinearProgress-thickness: 0.5rem;
+}
+
+.ObLinearProgress-root[data-size="lg"] {
+	--obLinearProgress-thickness: 0.75rem;
+}
+
+.ObLinearProgress-bar {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-start: 0;
+	inline-size: 100%;
+	background-color: var(--ds-color-base-default, #0062ba);
+	border-radius: inherit;
+}
+
+.ObLinearProgress-determinate .ObLinearProgress-bar {
+	transition: inline-size 0.2s linear;
+}
+
+/*
+ * The indeterminate bar is full width and animated with `transform`, where the
+ * start and end of the bar move at different speeds (the bar stretches and
+ * shrinks as it travels).
+ */
+.ObLinearProgress-indeterminate .ObLinearProgress-bar {
+	transform-origin: left center;
+	will-change: transform;
+	animation: ObLinearProgress-indeterminate var(--obLinearProgress-duration) cubic-bezier(0.65, 0.815, 0.735, 0.395)
+		infinite;
+}
+
+/* Zero-height wrapper so the overlay bar never affects the layout */
+.ObLinearProgress-overlay {
+	position: relative;
+	z-index: 1;
+	block-size: 0;
+}
+
+.ObLinearProgress-overlay > .ObLinearProgress-root {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline: 0;
+}
+
+@keyframes ObLinearProgress-indeterminate {
+	0% {
+		transform: translateX(-35%) scaleX(0.35);
+	}
+
+	60% {
+		transform: translateX(60%) scaleX(0.7);
+	}
+
+	100% {
+		transform: translateX(100%) scaleX(0.2);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ObLinearProgress-indeterminate .ObLinearProgress-bar {
+		animation-duration: 4s;
+	}
+}
+
+@media print {
+	.ObLinearProgress-root {
+		display: none;
+	}
+}

package/src/progress/LinearProgress.tsx

@@ -0,0 +1,104 @@
+import "./LinearProgress.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const linearProgressSizes = ["xs", "sm", "md", "lg"] as const;
+
+export type LinearProgressSize = (typeof linearProgressSizes)[number];
+
+export type LinearProgressProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	/**
+	 * Designsystemet colour palette used for the bar
+	 * @default "accent"
+	 */
+	"data-color"?: string;
+	/**
+	 * Thickness of the bar
+	 * @default "sm"
+	 */
+	"data-size"?: LinearProgressSize;
+	/**
+	 * Renders the bar absolutely positioned in a zero-height wrapper, so it
+	 * overlays the top of the following content instead of taking up space.
+	 * Use it for loading indicators that should not shift the layout.
+	 * @default false
+	 */
+	overlay?: boolean;
+	/**
+	 * Progress value. When omitted the bar is indeterminate.
+	 */
+	value?: number;
+	/**
+	 * Highest possible value of `value`
+	 * @default 100
+	 */
+	valueMax?: number;
+	/**
+	 * Lowest possible value of `value`
+	 * @default 0
+	 */
+	valueMin?: number;
+};
+
+/**
+ * Linear progress indicator, equivalent to MUI `LinearProgress`. Indeterminate
+ * by default, determinate when `value` is given. Designsystemet has no linear
+ * progress component, so this is built with the designsystemet colour and
+ * radius tokens (use `data-color` to change palette).
+ *
+ * @example
+ * ```jsx
+ * // Indeterminate, in the normal document flow
+ * <LinearProgress aria-label="Loading..." />
+ *
+ * // Determinate
+ * <LinearProgress aria-label="Uploading" value={40} />
+ *
+ * // Absolutely positioned, does not affect the layout
+ * <LinearProgress overlay aria-label="Loading..." />
+ * ```
+ */
+export function LinearProgress({
+	className,
+	overlay,
+	value,
+	valueMax = 100,
+	valueMin = 0,
+	"data-color": color = "accent",
+	"data-size": size = "sm",
+	...props
+}: LinearProgressProps) {
+	let isDeterminate = typeof value === "number" && Number.isFinite(value);
+	let clamped = isDeterminate ? Math.min(Math.max(value as number, valueMin), valueMax) : undefined;
+	let percentage =
+		clamped === undefined || valueMax === valueMin ? undefined : ((clamped - valueMin) / (valueMax - valueMin)) * 100;
+
+	let bar = (
+		<div
+			className={clsx(
+				"ObLinearProgress-root",
+				isDeterminate ? "ObLinearProgress-determinate" : "ObLinearProgress-indeterminate",
+				!overlay && className,
+			)}
+			data-color={color}
+			data-size={size}
+			role="progressbar"
+			aria-valuemin={valueMin}
+			aria-valuemax={valueMax}
+			aria-valuenow={clamped}
+			{...props}
+		>
+			<div
+				className="ObLinearProgress-bar"
+				style={percentage === undefined ? undefined : { inlineSize: `${percentage}%` }}
+			/>
+		</div>
+	);
+
+	if (!overlay) {
+		return bar;
+	}
+
+	return <div className={clsx("ObLinearProgress-overlay", className)}>{bar}</div>;
+}

package/src/progress/index.ts

@@ -0,0 +1 @@
+export * from "./LinearProgress.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,32 +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;
-    initialSearchValue?: 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;