@olenbetong/appframe-ds 0.2.0

package/src/binding/DataEditToolbar.tsx

@@ -0,0 +1,93 @@
+import { Button, Tooltip } from "@digdir/designsystemet-react";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useCurrentIndex, useDataLength, useDataObject } from "@olenbetong/appframe-react";
+import { CancelIconButton } from "./CancelIconButton.js";
+import { RefreshRowIconButton } from "./RefreshRowIconButton.js";
+import { SaveIconButton } from "./SaveIconButton.js";
+
+function IndexNavigator({ dataObject }: { dataObject: DataObject<any> }) {
+	let count = useDataLength(dataObject);
+	let index = useCurrentIndex(dataObject);
+
+	if (count <= 1) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button
+				icon
+				variant="tertiary"
+				aria-label={getLocalizedString("Previous")}
+				onClick={() => dataObject.setCurrentIndex(index - 1)}
+				disabled={index <= 0}
+			>
+				<ChevronLeftIcon />
+			</Button>
+			<Button
+				icon
+				variant="tertiary"
+				aria-label={getLocalizedString("Next")}
+				onClick={() => dataObject.setCurrentIndex(index + 1)}
+				disabled={index >= count - 1}
+			>
+				<ChevronRightIcon />
+			</Button>
+		</>
+	);
+}
+
+export type DataEditToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
+	/**
+	 * If different data objects are used for navigation and editing, you can set the data object
+	 * used for navigation with this property.
+	 */
+	navigationDataObject?: DataObject<any>;
+	/**
+	 * If true, will add buttons to move to the next/previous index in the data object.
+	 */
+	showNavigation?: boolean;
+};
+
+export function DataEditToolbar({
+	children,
+	navigationDataObject,
+	showNavigation,
+	style,
+	...props
+}: DataEditToolbarProps) {
+	let dataObject = useDataObject();
+
+	return (
+		<div
+			style={{
+				display: "flex",
+				alignItems: "center",
+				minHeight: "48px",
+				borderBottom: "1px solid rgb(0 0 0 / 0.12)",
+				borderTop: "1px solid rgb(0 0 0 / 0.12)",
+				...style,
+			}}
+			{...props}
+		>
+			<Tooltip content={getLocalizedString("Save changes")}>
+				<SaveIconButton />
+			</Tooltip>
+			<Tooltip content={getLocalizedString("Revert unsaved changes")}>
+				<CancelIconButton />
+			</Tooltip>
+			<Tooltip content={getLocalizedString("Refresh record")}>
+				<RefreshRowIconButton />
+			</Tooltip>
+			{children}
+			{showNavigation && (
+				<div style={{ marginLeft: "auto" }}>
+					<IndexNavigator dataObject={navigationDataObject ?? dataObject} />
+				</div>
+			)}
+		</div>
+	);
+}

package/src/binding/DataObjectSelect.tsx

@@ -0,0 +1,121 @@
+import { Field, Label, Select } from "@digdir/designsystemet-react";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useFetchData, useField } from "@olenbetong/appframe-react";
+import { useEffect, useId, useRef } from "react";
+
+export type DataObjectSelectProps<T extends Record<string, unknown>> = React.SelectHTMLAttributes<HTMLSelectElement> & {
+	/**
+	 * Data object to get options from. Only the data handler is used, so the component
+	 * will not affect the state of the data object.
+	 */
+	dataObject: DataObject<T>;
+	/**
+	 * Filter to use when getting options.
+	 */
+	filter?: string;
+	/**
+	 * The label displayed above the select.
+	 */
+	label?: React.ReactNode;
+	/**
+	 * Whether the user is allowed to clear the value. Will add an empty option at the
+	 * start of the options list.
+	 */
+	nullable?: boolean;
+	/**
+	 * If nullable is true, this is the label for the empty option. Default is an empty string.
+	 */
+	blankLabel?: string;
+	/**
+	 * The field in the options record to use as the value.
+	 */
+	valueField?: string;
+	/**
+	 * The field in the options record to use as the label.
+	 */
+	labelField?: string;
+	/**
+	 * If the value isn't simply a record field, you can pass a function here to
+	 * get the value from the record.
+	 */
+	getOptionValue?: (option: T) => string;
+	/**
+	 * If you want to display labels that are not simply a record field, you can
+	 * pass a function that takes a record and returns a label.
+	 */
+	getOptionLabel?: (item: T) => string;
+};
+
+export function DataObjectSelect<T extends Record<string, unknown>>({
+	nullable = false,
+	blankLabel = "",
+	dataObject,
+	filter,
+	id: idProp,
+	label,
+	name,
+	getOptionLabel,
+	getOptionValue,
+	valueField = "ID",
+	labelField = "Description",
+	value,
+	defaultValue,
+	...props
+}: DataObjectSelectProps<T>) {
+	let { data } = useFetchData(dataObject, filter ?? "");
+	let fallbackId = useId();
+	let id = idProp ?? fallbackId;
+	let inputRef = useRef<HTMLSelectElement>(null);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: default value should only affect the initial value
+	useEffect(() => {
+		let defaultExists = data.find((r) => String(getOptionValue?.(r) ?? r[valueField]) === defaultValue);
+		if (inputRef.current && defaultExists) {
+			inputRef.current.value = defaultValue as string;
+		}
+	}, [data]);
+
+	return (
+		<Field>
+			{label && (
+				<Label htmlFor={id}>
+					{label}
+					{props.required && " *"}
+				</Label>
+			)}
+			<Select id={id} name={name} {...props} value={value === undefined ? undefined : (value ?? "")} ref={inputRef}>
+				{nullable && <option value="">{blankLabel}</option>}
+				{data.map((t) => {
+					let optionValue = getOptionValue?.(t) ?? t[valueField];
+					let optionLabel = getOptionLabel?.(t) ?? t[labelField];
+
+					return (
+						<option value={optionValue as any} key={optionValue as any}>
+							{optionLabel as any}
+						</option>
+					);
+				})}
+			</Select>
+		</Field>
+	);
+}
+
+export function BoundDataObjectSelect<T extends Record<string, unknown>>({
+	field,
+	...props
+}: DataObjectSelectProps<T> & {
+	/**
+	 * Field to bind the value of the select component to.
+	 */
+	field: string;
+}) {
+	let { value, setValue } = useField(field);
+
+	return (
+		<DataObjectSelect
+			value={(value ?? "") as string}
+			onChange={(event) => setValue((event.target as HTMLSelectElement).value)}
+			{...props}
+		/>
+	);
+}

package/src/binding/DeleteButton.tsx

@@ -0,0 +1,31 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+
+export type DeleteButtonProps = ButtonProps & { index?: number; prompt?: DeletePrompt };
+
+export const DeleteButton: ForwardRefExoticComponent<DeleteButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	DeleteButtonProps
+>(function DeleteButton({ prompt, onClick, index, children, ...props }, ref) {
+	let { deleting, deleteRow } = useDeleteButton(prompt);
+
+	return (
+		<Button
+			loading={deleting}
+			data-color="danger"
+			variant="secondary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					deleteRow(index);
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? getLocalizedString("Delete")}
+		</Button>
+	);
+});

package/src/binding/DeleteIconButton.tsx

@@ -0,0 +1,34 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export type DeleteIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number; prompt?: DeletePrompt };
+
+export const DeleteIconButton = forwardRef<HTMLButtonElement, DeleteIconButtonProps>(function DeleteIconButton(
+	{ prompt, onClick, index, children, ...props },
+	ref,
+) {
+	let { isDeleting, deleteRow } = useDeleteButton(prompt);
+
+	return (
+		<Button
+			icon
+			loading={isDeleting}
+			data-color="danger"
+			aria-label={getLocalizedString("Delete")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					deleteRow(index);
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? <DeleteIcon />}
+		</Button>
+	);
+});

package/src/binding/RefreshButton.tsx

@@ -0,0 +1,27 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useRefreshButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+
+export const RefreshButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	ButtonProps
+>(function RefreshButton({ onClick, children, ...props }, ref) {
+	let { loading, refresh } = useRefreshButton();
+
+	return (
+		<Button
+			loading={loading}
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					refresh();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? getLocalizedString("Refresh")}
+		</Button>
+	);
+});

package/src/binding/RefreshIconButton.tsx

@@ -0,0 +1,32 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useDataObject, useLoading } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export const RefreshIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function RefreshIconButton(
+	{ onClick, children, ...props },
+	ref,
+) {
+	let dataObject = useDataObject();
+	let loading = useLoading(dataObject);
+
+	return (
+		<Button
+			icon
+			loading={loading}
+			aria-label={getLocalizedString("Refresh data")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					dataObject.refreshDataSource();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? <RefreshIcon />}
+		</Button>
+	);
+});

package/src/binding/RefreshRowIconButton.tsx

@@ -0,0 +1,32 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useRefreshRowButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export type RefreshRowIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number };
+
+export const RefreshRowIconButton = forwardRef<HTMLButtonElement, RefreshRowIconButtonProps>(
+	function RefreshRowIconButton({ onClick, index, children, ...props }, ref) {
+		let { loading, refreshRow } = useRefreshRowButton();
+
+		return (
+			<Button
+				icon
+				loading={loading}
+				aria-label={getLocalizedString("Refresh current row")}
+				variant="tertiary"
+				onClick={(evt) => {
+					onClick?.(evt);
+					if (!evt.defaultPrevented) {
+						refreshRow(index);
+					}
+				}}
+				{...props}
+				ref={ref}
+			>
+				{children ?? <RefreshIcon />}
+			</Button>
+		);
+	},
+);

package/src/binding/SaveButton.tsx

@@ -0,0 +1,27 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useSaveButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+
+export const SaveButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	ButtonProps
+>(function SaveButton({ onClick, children, ...props }, ref) {
+	let { saving, save } = useSaveButton();
+
+	return (
+		<Button
+			loading={saving}
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					save();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? getLocalizedString("Save")}
+		</Button>
+	);
+});

package/src/binding/SaveIconButton.tsx

@@ -0,0 +1,31 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import SaveIcon from "@mui/icons-material/Save";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useSaveButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export const SaveIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function SaveIconButton(
+	{ onClick, children, ...props },
+	ref,
+) {
+	let { saving, save } = useSaveButton();
+
+	return (
+		<Button
+			icon
+			loading={saving}
+			aria-label={getLocalizedString("Save")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					save();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? <SaveIcon />}
+		</Button>
+	);
+});

package/src/binding/index.ts

@@ -0,0 +1,19 @@
+export * from "./BoundCheckbox.js";
+export * from "./BoundDatePicker.js";
+export * from "./BoundDateTimePicker.js";
+export * from "./BoundInput.js";
+export * from "./BoundNumericTextField.js";
+export * from "./BoundSelect.js";
+export * from "./BoundSwitch.js";
+export * from "./BoundTextField.js";
+export * from "./CancelButton.js";
+export * from "./CancelIconButton.js";
+export * from "./DataEditToolbar.js";
+export * from "./DataObjectSelect.js";
+export * from "./DeleteButton.js";
+export * from "./DeleteIconButton.js";
+export * from "./RefreshButton.js";
+export * from "./RefreshIconButton.js";
+export * from "./RefreshRowIconButton.js";
+export * from "./SaveButton.js";
+export * from "./SaveIconButton.js";

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./AfLookup/index.js";
+export * from "./binding/index.js";

package/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../tsconfig.build.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./es"
+	},
+	"include": ["src"],
+	"exclude": ["es", "node_modules"]
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "../tsconfig.build.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./es"
+	},
+	"include": ["src"]
+}