@ifto/mantine-kit 0.0.0-stage → 0.2.0

package/dist/component/organism/ViewTable/ViewTable.js

@@ -0,0 +1,115 @@
+"use client";
+import { useKitConfig } from "../../../provider/useKit.js";
+import { columnComparator } from "./ColumnComparator.js";
+import { useRowKey } from "./useRowKey.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DataTable } from "mantine-datatable";
+// src/component/organism/ViewTable/ViewTable.tsx
+/** Options of records per page. The largest one lets long tables (and end-to-end tests) show every row in one page. */
+var PAGE_SIZES = [
+	10,
+	20,
+	50,
+	200
+];
+/** Default sort when neither `defaultSortStatus` nor `compare` is given. */
+var DEFAULT_SORT_STATUS = {
+	columnAccessor: "id",
+	direction: "asc"
+};
+/**
+* Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no
+* header shows the sort indicator, and the first click on any column sorts it in ascending order.
+*/
+var NO_COLUMN_SORT_STATUS = {
+	columnAccessor: "",
+	direction: "asc"
+};
+/**
+* The ViewTable component is a wrapper for the Mantine DataTable component.
+* @template M - Model that extends from {@link Identifiable}
+* @param data the data to be displayed in this ViewTable
+* @param {DataTableColumn<M>[]} columns - The columns to be displayed in this ViewTable
+* @param loading Indicates if the data to be displayed is being loaded yet or not
+* @param pagination Indicates whether to show pagination or not.
+* @param getPaginationControlProps extra attributes for the pagination control buttons
+* @param compare comparison function of the initial order, replaced by the sort of the column chosen in the header
+* @param rest remaining props, passed to the DataTable
+* @return the table with the data, sortable and (optionally) paginated
+*/
+var ViewTable = ({ data, columns, loading, pagination = true, showIdColumn = true, defaultSortStatus, compare, getPaginationControlProps, ...rest }) => {
+	const { locale, messages } = useKitConfig();
+	const [page, setPage] = useState(1);
+	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
+	const [sortStatus, setSortStatus] = useState(defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS));
+	const [compareActive, setCompareActive] = useState(compare !== void 0);
+	const sortedData = useMemo(() => {
+		const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);
+		return [...data].sort(comparator);
+	}, [
+		data,
+		sortStatus,
+		compareActive,
+		compare,
+		locale
+	]);
+	const records = useMemo(() => {
+		if (!pagination) return sortedData;
+		const from = (page - 1) * pageSize;
+		return sortedData.slice(from, from + pageSize);
+	}, [
+		sortedData,
+		pagination,
+		page,
+		pageSize
+	]);
+	const rowKey = useRowKey();
+	function changeSortStatus(status) {
+		setCompareActive(false);
+		setSortStatus(status);
+	}
+	const effectiveColumns = [{
+		title: "ID",
+		accessor: "id",
+		hidden: !showIdColumn,
+		sortable: true,
+		render: (item) => /* @__PURE__ */ jsx("span", { children: item.id })
+	}, ...columns];
+	useEffect(() => {
+		setPage(1);
+	}, [pageSize]);
+	useEffect(() => {
+		const totalPages = Math.ceil(data.length / pageSize);
+		setPage((currentPage) => totalPages && currentPage > totalPages ? totalPages : currentPage);
+	}, [data.length, pageSize]);
+	const paginationProps = pagination ? {
+		page,
+		onPageChange: (p) => setPage(p),
+		totalRecords: data.length,
+		recordsPerPage: pageSize,
+		recordsPerPageOptions: PAGE_SIZES,
+		onRecordsPerPageChange: setPageSize,
+		recordsPerPageLabel: messages.table.recordsPerPage,
+		paginationText: messages.table.pagination,
+		getPaginationControlProps
+	} : {};
+	return /* @__PURE__ */ jsx(DataTable, {
+		minHeight: 200,
+		verticalSpacing: "sm",
+		striped: true,
+		columns: effectiveColumns,
+		records,
+		idAccessor: rowKey,
+		noRecordsText: messages.table.noRecords,
+		fetching: loading,
+		sortStatus,
+		onSortStatusChange: changeSortStatus,
+		customRowAttributes: (record) => ({ "data-testid": `row-${record.id}` }),
+		...paginationProps,
+		...rest
+	});
+};
+export { ViewTable as default };
+
+//# sourceMappingURL=ViewTable.js.map

package/dist/component/organism/ViewTable/ViewTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewTable.js","names":[],"sources":["../../../../src/component/organism/ViewTable/ViewTable.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\n\nimport {\n    DataTable,\n    DataTableColumn,\n    DataTablePaginationProps,\n    DataTableProps,\n    DataTableSortStatus\n} from 'mantine-datatable';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { columnComparator, Comparator } from './ColumnComparator';\nimport { useRowKey } from './useRowKey';\n\n/** Options of records per page. The largest one lets long tables (and end-to-end tests) show every row in one page. */\nconst PAGE_SIZES = [10, 20, 50, 200];\n\n/** Default sort when neither `defaultSortStatus` nor `compare` is given. */\nconst DEFAULT_SORT_STATUS = { columnAccessor: 'id', direction: 'asc' } as const;\n\n/**\n * Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no\n * header shows the sort indicator, and the first click on any column sorts it in ascending order.\n */\nconst NO_COLUMN_SORT_STATUS = { columnAccessor: '', direction: 'asc' } as const;\n\n/** Function that defines extra attributes (e.g. aria-label) for each pagination control button. */\ntype PaginationControlPropsGetter = Extract<DataTablePaginationProps, { page: number }>['getPaginationControlProps'];\n\n/**\n * Props of the {@link DataTable} passed straight through by the ViewTable.\n * Only the props actually used by the callers are accepted: using `Partial<DataTableProps<M>>` makes TypeScript combine\n * the variants of the `DataTableProps` union with the ones of `paginationProps`, which exhausts the memory of `tsc`.\n */\ntype DataTablePassThroughProps<M extends Identifiable> = Pick<\n    DataTableProps<M>,\n    | 'onRowClick'\n    | 'rowStyle'\n    | 'noRecordsText'\n    | 'highlightOnHover'\n    | 'highlightOnHoverColor'\n    | 'className'\n    | 'minHeight'\n    | 'withColumnBorders'\n    | 'verticalSpacing'\n    | 'horizontalSpacing'\n>;\n\n/**\n * TableProps is a generic type for the ViewTable component props.\n */\ntype TableProps<M extends Identifiable> = {\n    data: M[];\n    columns: DataTableColumn<M>[];\n    loading?: boolean;\n    pagination?: boolean;\n    /** Shows the ID column, automatically added to the given columns. */\n    showIdColumn?: boolean;\n    /**\n     * Initial sort of the table. Default: by `id`, ascending.\n     * Give another value when the natural order of the data should not be by `id` (e.g. when the backend already\n     * returns the data in an order to keep). Along with `compare`, it only tells which header shows the sort indicator\n     * in the initial order.\n     */\n    defaultSortStatus?: DataTableSortStatus<M>;\n    /**\n     * Comparison function that defines the initial order, instead of the column of `defaultSortStatus`. It allows\n     * sorting by more than one criterion (e.g. city and, in the same city, year descending). After the user clicks the\n     * header of a column, the sort of the column applies.\n     */\n    compare?: Comparator<M>;\n    /** Extra attributes for the pagination control buttons. It only has effect when `pagination` is true. */\n    getPaginationControlProps?: PaginationControlPropsGetter;\n} & DataTablePassThroughProps<M>;\n\n/**\n * The ViewTable component is a wrapper for the Mantine DataTable component.\n * @template M - Model that extends from {@link Identifiable}\n * @param data the data to be displayed in this ViewTable\n * @param {DataTableColumn<M>[]} columns - The columns to be displayed in this ViewTable\n * @param loading Indicates if the data to be displayed is being loaded yet or not\n * @param pagination Indicates whether to show pagination or not.\n * @param getPaginationControlProps extra attributes for the pagination control buttons\n * @param compare comparison function of the initial order, replaced by the sort of the column chosen in the header\n * @param rest remaining props, passed to the DataTable\n * @return the table with the data, sortable and (optionally) paginated\n */\nconst ViewTable = <M extends Identifiable>({\n    data,\n    columns,\n    loading,\n    pagination = true,\n    showIdColumn = true,\n    defaultSortStatus,\n    compare,\n    getPaginationControlProps,\n    ...rest\n}: TableProps<M>) => {\n    const { locale, messages } = useKitConfig();\n    const [page, setPage] = useState(1);\n    const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);\n    const [sortStatus, setSortStatus] = useState<DataTableSortStatus<M>>(\n        defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS)\n    );\n    // The `compare` function applies until the user chooses a column in the header.\n    const [compareActive, setCompareActive] = useState(compare !== undefined);\n\n    /*\n     * Sorts all records before cutting the page, so each page (including in descending order) shows its part of the\n     * whole set. The copy keeps the order of the given array. It is separate from the page cut, so not everything is\n     * sorted again on every change of page or page size.\n     */\n    const sortedData = useMemo(() => {\n        const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);\n\n        return [...data].sort(comparator);\n    }, [data, sortStatus, compareActive, compare, locale]);\n\n    // Without pagination, shows all records (e.g. a printed report), not only the ones of the first page.\n    const records = useMemo(() => {\n        if (!pagination) return sortedData;\n\n        const from = (page - 1) * pageSize;\n        return sortedData.slice(from, from + pageSize);\n    }, [sortedData, pagination, page, pageSize]);\n    const rowKey = useRowKey<M>();\n\n    function changeSortStatus(status: DataTableSortStatus<M>): void {\n        setCompareActive(false);\n        setSortStatus(status);\n    }\n\n    const effectiveColumns: DataTableColumn<M>[] = [\n        {\n            title: 'ID',\n            accessor: 'id',\n            hidden: !showIdColumn,\n            sortable: true,\n            render: item => <span>{item.id}</span>\n        },\n        ...columns\n    ];\n\n    useEffect(() => {\n        setPage(1);\n    }, [pageSize]);\n\n    /* If the data shrinks, goes back to the last existing page. The functional update avoids using an outdated `page`\n       when the effect above has just gone back to page 1. */\n    useEffect(() => {\n        const totalPages = Math.ceil(data.length / pageSize);\n        setPage(currentPage => (totalPages && currentPage > totalPages ? totalPages : currentPage));\n    }, [data.length, pageSize]);\n\n    /* Typed only with the pagination props (and not as Partial<DataTableProps>) to not exhaust the memory of tsc.\n       See the comment of DataTablePassThroughProps. */\n    const paginationProps: DataTablePaginationProps = pagination\n        ? {\n              page,\n              onPageChange: p => setPage(p),\n              totalRecords: data.length,\n              recordsPerPage: pageSize,\n              recordsPerPageOptions: PAGE_SIZES,\n              onRecordsPerPageChange: setPageSize,\n              recordsPerPageLabel: messages.table.recordsPerPage,\n              paginationText: messages.table.pagination,\n              getPaginationControlProps\n          }\n        : {};\n\n    // This DataTable is the one of https://www.npmjs.com/package/mantine-datatable (there are other libraries with this name).\n    return (\n        <DataTable\n            minHeight={200}\n            verticalSpacing=\"sm\"\n            striped\n            columns={effectiveColumns}\n            records={records}\n            idAccessor={rowKey}\n            noRecordsText={messages.table.noRecords}\n            fetching={loading}\n            sortStatus={sortStatus}\n            onSortStatusChange={changeSortStatus}\n            customRowAttributes={record => ({ 'data-testid': `row-${record.id}` })}\n            {...paginationProps}\n            {...rest}\n        />\n    );\n};\n\nexport default ViewTable;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,aAAa;CAAC;CAAI;CAAI;CAAI;AAAG;;AAGnC,IAAM,sBAAsB;CAAE,gBAAgB;CAAM,WAAW;AAAM;;;;;AAMrE,IAAM,wBAAwB;CAAE,gBAAgB;CAAI,WAAW;AAAM;;;;;;;;;;;;;AA+DrE,IAAM,aAAqC,EACvC,MACA,SACA,SACA,aAAa,MACb,eAAe,MACf,mBACA,SACA,2BACA,GAAG,WACc;CACjB,MAAM,EAAE,QAAQ,aAAa,aAAa;CAC1C,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;CAClC,MAAM,CAAC,UAAU,eAAe,SAAS,WAAW,EAAE;CACtD,MAAM,CAAC,YAAY,iBAAiB,SAChC,sBAAsB,UAAU,wBAAwB,oBAC5D;CAEA,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY,KAAA,CAAS;CAOxE,MAAM,aAAa,cAAc;EAC7B,MAAM,aAAa,iBAAiB,UAAU,UAAU,iBAAiB,YAAY,MAAM;EAE3F,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,UAAU;CACpC,GAAG;EAAC;EAAM;EAAY;EAAe;EAAS;CAAM,CAAC;CAGrD,MAAM,UAAU,cAAc;EAC1B,IAAI,CAAC,YAAY,OAAO;EAExB,MAAM,QAAQ,OAAO,KAAK;EAC1B,OAAO,WAAW,MAAM,MAAM,OAAO,QAAQ;CACjD,GAAG;EAAC;EAAY;EAAY;EAAM;CAAQ,CAAC;CAC3C,MAAM,SAAS,UAAa;CAE5B,SAAS,iBAAiB,QAAsC;EAC5D,iBAAiB,KAAK;EACtB,cAAc,MAAM;CACxB;CAEA,MAAM,mBAAyC,CAC3C;EACI,OAAO;EACP,UAAU;EACV,QAAQ,CAAC;EACT,UAAU;EACV,SAAQ,SAAQ,oBAAC,QAAD,EAAA,UAAO,KAAK,GAAS,CAAA;CACzC,GACA,GAAG,OACP;CAEA,gBAAgB;EACZ,QAAQ,CAAC;CACb,GAAG,CAAC,QAAQ,CAAC;CAIb,gBAAgB;EACZ,MAAM,aAAa,KAAK,KAAK,KAAK,SAAS,QAAQ;EACnD,SAAQ,gBAAgB,cAAc,cAAc,aAAa,aAAa,WAAY;CAC9F,GAAG,CAAC,KAAK,QAAQ,QAAQ,CAAC;CAI1B,MAAM,kBAA4C,aAC5C;EACI;EACA,eAAc,MAAK,QAAQ,CAAC;EAC5B,cAAc,KAAK;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,wBAAwB;EACxB,qBAAqB,SAAS,MAAM;EACpC,gBAAgB,SAAS,MAAM;EAC/B;CACJ,IACA,CAAC;CAGP,OACI,oBAAC,WAAD;EACI,WAAW;EACX,iBAAgB;EAChB,SAAA;EACA,SAAS;EACA;EACT,YAAY;EACZ,eAAe,SAAS,MAAM;EAC9B,UAAU;EACE;EACZ,oBAAoB;EACpB,sBAAqB,YAAW,EAAE,eAAe,OAAO,OAAO,KAAK;EACpE,GAAI;EACJ,GAAI;CACP,CAAA;AAET"}

package/dist/component/organism/ViewTable/useRowKey.d.ts

@@ -0,0 +1,8 @@
+import { Key } from 'react';
+import { Identifiable } from '../../../model/Identifiable';
+/**
+ * Returns the function that gives each record of a table a unique and stable key, without changing the record: its id
+ * or, for a record not saved yet (without id), a key kept per object while the table is mounted.
+ * @return a function that returns the key of a record, to use as the `idAccessor` of mantine-datatable
+ */
+export declare function useRowKey<M extends Identifiable>(): (record: M) => Key;

package/dist/component/organism/ViewTable/useRowKey.js

@@ -0,0 +1,24 @@
+"use client";
+import { useCallback, useRef } from "react";
+// src/component/organism/ViewTable/useRowKey.ts
+/**
+* Returns the function that gives each record of a table a unique and stable key, without changing the record: its id
+* or, for a record not saved yet (without id), a key kept per object while the table is mounted.
+* @return a function that returns the key of a record, to use as the `idAccessor` of mantine-datatable
+*/
+function useRowKey() {
+	const generatedKeys = useRef(/* @__PURE__ */ new WeakMap());
+	const nextKey = useRef(0);
+	return useCallback((record) => {
+		if (record.id !== null && record.id !== void 0 && record.id !== "") return record.id;
+		let key = generatedKeys.current.get(record);
+		if (key === void 0) {
+			key = `unsaved-${nextKey.current++}`;
+			generatedKeys.current.set(record, key);
+		}
+		return key;
+	}, []);
+}
+export { useRowKey };
+
+//# sourceMappingURL=useRowKey.js.map

package/dist/component/organism/ViewTable/useRowKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowKey.js","names":[],"sources":["../../../../src/component/organism/ViewTable/useRowKey.ts"],"sourcesContent":["import { Key, useCallback, useRef } from 'react';\n\nimport { Identifiable } from '../../../model/Identifiable';\n\n/**\n * Returns the function that gives each record of a table a unique and stable key, without changing the record: its id\n * or, for a record not saved yet (without id), a key kept per object while the table is mounted.\n * @return a function that returns the key of a record, to use as the `idAccessor` of mantine-datatable\n */\nexport function useRowKey<M extends Identifiable>(): (record: M) => Key {\n    // Keys of the records without id, by object: they disappear with the object, without keeping it in memory.\n    const generatedKeys = useRef(new WeakMap<M, string>());\n    const nextKey = useRef(0);\n\n    return useCallback((record: M) => {\n        if (record.id !== null && record.id !== undefined && record.id !== '') return record.id;\n\n        let key = generatedKeys.current.get(record);\n        if (key === undefined) {\n            key = `unsaved-${nextKey.current++}`;\n            generatedKeys.current.set(record, key);\n        }\n\n        return key;\n    }, []);\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,YAAwD;CAEpE,MAAM,gBAAgB,uBAAO,IAAI,QAAmB,CAAC;CACrD,MAAM,UAAU,OAAO,CAAC;CAExB,OAAO,aAAa,WAAc;EAC9B,IAAI,OAAO,OAAO,QAAQ,OAAO,OAAO,KAAA,KAAa,OAAO,OAAO,IAAI,OAAO,OAAO;EAErF,IAAI,MAAM,cAAc,QAAQ,IAAI,MAAM;EAC1C,IAAI,QAAQ,KAAA,GAAW;GACnB,MAAM,WAAW,QAAQ;GACzB,cAAc,QAAQ,IAAI,QAAQ,GAAG;EACzC;EAEA,OAAO;CACX,GAAG,CAAC,CAAC;AACT"}

package/dist/component/template/CreateFormPage/CreateFormPage.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react';
+import type { UseFormReturnType } from '@mantine/form';
+import { Identifiable } from '../../../model/Identifiable';
+import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
+interface CreateFormPageProps<T extends Identifiable, D extends object> {
+    /** Name of the record (e.g. "Region"). */
+    title: string;
+    breadcrumbItems: BreadcrumbItem[];
+    /** Sends the data of the new record (e.g. to the API). */
+    fetchMethod: (data: D) => Promise<T>;
+    form: UseFormReturnType<D>;
+    backRoute: string;
+    isSubmitDisabled?: boolean;
+    /** Question shown in a confirmation dialog before saving; absent to save right away. */
+    confirmationMessage?: string;
+}
+/** Form page to create a record, which sends the data with `fetchMethod`. */
+declare function CreateFormPage<T extends Identifiable, D extends object>(props: React.PropsWithChildren<CreateFormPageProps<T, D>>): ReactElement;
+export default CreateFormPage;

package/dist/component/template/CreateFormPage/CreateFormPage.js

@@ -0,0 +1,41 @@
+"use client";
+import { useDocumentTitle, useKitMessages } from "../../../provider/useKit.js";
+import DataForm from "../../organism/DataForm/DataForm.js";
+import PageHeader from "../../organism/PageHeader/PageHeader.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@mantine/core";
+// src/component/template/CreateFormPage/CreateFormPage.tsx
+/** Form page to create a record, which sends the data with `fetchMethod`. */
+function CreateFormPage(props) {
+	const { title, breadcrumbItems, fetchMethod, form, backRoute, isSubmitDisabled, children, confirmationMessage } = props;
+	const messages = useKitMessages();
+	const pageTitle = `${messages.form.action.create} ${title}`;
+	const documentTitle = useDocumentTitle(pageTitle);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: pageTitle,
+			breadcrumbItems: [...breadcrumbItems, {
+				title: pageTitle,
+				href: "#"
+			}]
+		}), /* @__PURE__ */ jsx(DataForm, {
+			form,
+			fetchMethod,
+			title,
+			backRoute,
+			submit: {
+				title: messages.common.save,
+				successMsg: messages.form.createSuccess,
+				errorMsg: messages.form.createError,
+				disabled: isSubmitDisabled,
+				confirmationMessage
+			},
+			children
+		})]
+	})] });
+}
+export { CreateFormPage as default };
+
+//# sourceMappingURL=CreateFormPage.js.map

package/dist/component/template/CreateFormPage/CreateFormPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateFormPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/CreateFormPage/CreateFormPage.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { Stack } from '@mantine/core';\nimport type { UseFormReturnType } from '@mantine/form';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport DataForm from '../../organism/DataForm/DataForm';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\n\ninterface CreateFormPageProps<T extends Identifiable, D extends object> {\n    /** Name of the record (e.g. \"Region\"). */\n    title: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Sends the data of the new record (e.g. to the API). */\n    fetchMethod: (data: D) => Promise<T>;\n    form: UseFormReturnType<D>;\n    backRoute: string;\n    isSubmitDisabled?: boolean;\n\n    /** Question shown in a confirmation dialog before saving; absent to save right away. */\n    confirmationMessage?: string;\n}\n\n/** Form page to create a record, which sends the data with `fetchMethod`. */\nfunction CreateFormPage<T extends Identifiable, D extends object>(\n    props: React.PropsWithChildren<CreateFormPageProps<T, D>>\n): ReactElement {\n    const { title, breadcrumbItems, fetchMethod, form, backRoute, isSubmitDisabled, children, confirmationMessage } =\n        props;\n    const messages = useKitMessages();\n    const pageTitle = `${messages.form.action.create} ${title}`;\n    const documentTitle = useDocumentTitle(pageTitle);\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={pageTitle} breadcrumbItems={[...breadcrumbItems, { title: pageTitle, href: '#' }]} />\n\n                <DataForm\n                    form={form}\n                    fetchMethod={fetchMethod}\n                    title={title}\n                    backRoute={backRoute}\n                    submit={{\n                        title: messages.common.save,\n                        successMsg: messages.form.createSuccess,\n                        errorMsg: messages.form.createError,\n                        disabled: isSubmitDisabled,\n                        confirmationMessage\n                    }}\n                >\n                    {children}\n                </DataForm>\n            </Stack>\n        </>\n    );\n}\n\nexport default CreateFormPage;\n"],"mappings":";;;;;;;;;AA2BA,SAAS,eACL,OACY;CACZ,MAAM,EAAE,OAAO,iBAAiB,aAAa,MAAM,WAAW,kBAAkB,UAAU,wBACtF;CACJ,MAAM,WAAW,eAAe;CAChC,MAAM,YAAY,GAAG,SAAS,KAAK,OAAO,OAAO,GAAG;CACpD,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA,CACI,oBAAC,YAAD;GAAY,OAAO;GAAW,iBAAiB,CAAC,GAAG,iBAAiB;IAAE,OAAO;IAAW,MAAM;GAAI,CAAC;EAAI,CAAA,GAEvG,oBAAC,UAAD;GACU;GACO;GACN;GACI;GACX,QAAQ;IACJ,OAAO,SAAS,OAAO;IACvB,YAAY,SAAS,KAAK;IAC1B,UAAU,SAAS,KAAK;IACxB,UAAU;IACV;GACJ;GAEC;EACK,CAAA,CACP;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}

package/dist/component/template/EditFormPage/EditFormPage.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react';
+import type { UseFormReturnType } from '@mantine/form';
+import { Identifiable } from '../../../model/Identifiable';
+import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
+interface EditFormPageProps<T extends Identifiable, D extends object> {
+    /** Name of the record (e.g. "Region"). */
+    title: string;
+    breadcrumbItems: BreadcrumbItem[];
+    /** Sends the changed data of the record (e.g. to the API). */
+    fetchMethod: (data: D) => Promise<T>;
+    form: UseFormReturnType<D>;
+    backRoute: string;
+    isSubmitDisabled?: boolean;
+    /** Question shown in a confirmation dialog before saving; absent to save right away. */
+    confirmationMessage?: string;
+}
+/** Form page to update a record, which sends the data with `fetchMethod`. */
+declare function EditFormPage<T extends Identifiable, D extends object>(props: React.PropsWithChildren<EditFormPageProps<T, D>>): ReactElement;
+export default EditFormPage;

package/dist/component/template/EditFormPage/EditFormPage.js

@@ -0,0 +1,42 @@
+"use client";
+import { useDocumentTitle, useKitMessages } from "../../../provider/useKit.js";
+import DataForm from "../../organism/DataForm/DataForm.js";
+import PageHeader from "../../organism/PageHeader/PageHeader.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@mantine/core";
+// src/component/template/EditFormPage/EditFormPage.tsx
+/** Form page to update a record, which sends the data with `fetchMethod`. */
+function EditFormPage(props) {
+	const { title, breadcrumbItems, fetchMethod, form, backRoute, isSubmitDisabled, children, confirmationMessage } = props;
+	const messages = useKitMessages();
+	const action = messages.form.action.edit;
+	const pageTitle = `${action} ${title}`;
+	const documentTitle = useDocumentTitle(pageTitle);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: pageTitle,
+			breadcrumbItems: [...breadcrumbItems, {
+				title: pageTitle,
+				href: "#"
+			}]
+		}), /* @__PURE__ */ jsx(DataForm, {
+			form,
+			fetchMethod,
+			title,
+			backRoute,
+			submit: {
+				title: action,
+				successMsg: messages.form.updateSuccess,
+				errorMsg: messages.form.updateError,
+				disabled: isSubmitDisabled,
+				confirmationMessage
+			},
+			children
+		})]
+	})] });
+}
+export { EditFormPage as default };
+
+//# sourceMappingURL=EditFormPage.js.map

package/dist/component/template/EditFormPage/EditFormPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditFormPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/EditFormPage/EditFormPage.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { Stack } from '@mantine/core';\nimport type { UseFormReturnType } from '@mantine/form';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport DataForm from '../../organism/DataForm/DataForm';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\n\ninterface EditFormPageProps<T extends Identifiable, D extends object> {\n    /** Name of the record (e.g. \"Region\"). */\n    title: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Sends the changed data of the record (e.g. to the API). */\n    fetchMethod: (data: D) => Promise<T>;\n    form: UseFormReturnType<D>;\n    backRoute: string;\n    isSubmitDisabled?: boolean;\n\n    /** Question shown in a confirmation dialog before saving; absent to save right away. */\n    confirmationMessage?: string;\n}\n\n/** Form page to update a record, which sends the data with `fetchMethod`. */\nfunction EditFormPage<T extends Identifiable, D extends object>(\n    props: React.PropsWithChildren<EditFormPageProps<T, D>>\n): ReactElement {\n    const { title, breadcrumbItems, fetchMethod, form, backRoute, isSubmitDisabled, children, confirmationMessage } =\n        props;\n    const messages = useKitMessages();\n    const action = messages.form.action.edit;\n    const pageTitle = `${action} ${title}`;\n    const documentTitle = useDocumentTitle(pageTitle);\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={pageTitle} breadcrumbItems={[...breadcrumbItems, { title: pageTitle, href: '#' }]} />\n\n                <DataForm\n                    form={form}\n                    fetchMethod={fetchMethod}\n                    title={title}\n                    backRoute={backRoute}\n                    submit={{\n                        title: action,\n                        successMsg: messages.form.updateSuccess,\n                        errorMsg: messages.form.updateError,\n                        disabled: isSubmitDisabled,\n                        confirmationMessage\n                    }}\n                >\n                    {children}\n                </DataForm>\n            </Stack>\n        </>\n    );\n}\n\nexport default EditFormPage;\n"],"mappings":";;;;;;;;;AA2BA,SAAS,aACL,OACY;CACZ,MAAM,EAAE,OAAO,iBAAiB,aAAa,MAAM,WAAW,kBAAkB,UAAU,wBACtF;CACJ,MAAM,WAAW,eAAe;CAChC,MAAM,SAAS,SAAS,KAAK,OAAO;CACpC,MAAM,YAAY,GAAG,OAAO,GAAG;CAC/B,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA,CACI,oBAAC,YAAD;GAAY,OAAO;GAAW,iBAAiB,CAAC,GAAG,iBAAiB;IAAE,OAAO;IAAW,MAAM;GAAI,CAAC;EAAI,CAAA,GAEvG,oBAAC,UAAD;GACU;GACO;GACN;GACI;GACX,QAAQ;IACJ,OAAO;IACP,YAAY,SAAS,KAAK;IAC1B,UAAU,SAAS,KAAK;IACxB,UAAU;IACV;GACJ;GAEC;EACK,CAAA,CACP;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}

package/dist/component/template/FormPage/FormPage.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react';
+import type { UseFormReturnType } from '@mantine/form';
+import { SaveDataSource } from '../../../data/SaveDataSource';
+import { Identifiable } from '../../../model/Identifiable';
+import { FormType } from './FormType';
+interface FormPageProps<T extends Identifiable, D extends object, S extends SaveDataSource<T, D>> {
+    /** Destination of the data (e.g. a service that accesses an API). */
+    service: S;
+    /** Name of the record (e.g. "Region"), shown after the action verb in the title. */
+    title: string;
+    formType: FormType;
+    form: UseFormReturnType<D & Identifiable>;
+    /** Page opened after saving and by the back button; absent for the first segment of the current path. */
+    backRoute?: string;
+    /** Shows a loading overlay over the form (e.g. while the record is fetched). */
+    isLoading?: boolean;
+    /** Whether the form takes the whole width, instead of half of it on large screens. */
+    isFullWidth?: boolean;
+}
+/**
+ * CRUD form page to create, edit or view a record (according to `formType`), which saves the data in `service` and
+ * goes back to the list page.
+ */
+declare function FormPage<T extends Identifiable, D extends object, S extends SaveDataSource<T, D>>(props: React.PropsWithChildren<FormPageProps<T, D, S>>): ReactElement;
+export default FormPage;

package/dist/component/template/FormPage/FormPage.js

@@ -0,0 +1,130 @@
+"use client";
+import { useDocumentTitle, useKitConfig } from "../../../provider/useKit.js";
+import { formatValues } from "../../../util/TransformData.js";
+import { showErrorNotification, showSuccessNotification } from "../../../util/Notifications.js";
+import PaperCard from "../../molecule/PaperCard/PaperCard.js";
+import PageHeader from "../../organism/PageHeader/PageHeader.js";
+import { FormType } from "./FormType.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, Grid, Group, LoadingOverlay, Stack, Text } from "@mantine/core";
+import { IconArrowBack, IconDeviceFloppy, IconInfoCircle } from "@tabler/icons-react";
+// src/component/template/FormPage/FormPage.tsx
+/** Action of each form type, the key of its verb in the texts. */
+var FORM_ACTIONS = {
+	[FormType.Create]: "create",
+	[FormType.Edit]: "edit",
+	[FormType.View]: "view"
+};
+/**
+* CRUD form page to create, edit or view a record (according to `formType`), which saves the data in `service` and
+* goes back to the list page.
+*/
+function FormPage(props) {
+	const { title, formType, service, form, backRoute, isLoading, isFullWidth, children } = props;
+	const { router, messages } = useKitConfig();
+	const { Link } = router;
+	const navigate = router.useNavigate();
+	const pathname = router.usePathname();
+	/**
+	* Checks whether a field of the validation schema is missing in the form.
+	* @param fieldName name of the field to find
+	*/
+	function isFormFieldMissing(fieldName) {
+		return !form.getInputNode(fieldName);
+	}
+	/**
+	* Shows the errors of the fields that are in the validation schema given to `useForm`, but not in the form.
+	* Without it, these errors are not shown to the user (not even in the console), so neither the user nor the
+	* developer can understand why the form is not submitted.
+	*/
+	function showErrorsForMissingFormFields() {
+		const errors = Object.entries(form.errors).map(([fieldName, errorMsg]) => ({
+			fieldName,
+			errorMsg
+		})).filter(({ fieldName }) => isFormFieldMissing(fieldName)).map(({ fieldName, errorMsg }) => /* @__PURE__ */ jsx("li", { children: errorMsg }, fieldName));
+		const icon = /* @__PURE__ */ jsx(IconInfoCircle, {});
+		return errors.length > 0 && /* @__PURE__ */ jsx(Alert, {
+			color: "red",
+			icon,
+			children: /* @__PURE__ */ jsx("ul", { children: errors })
+		});
+	}
+	const { id } = form.values;
+	const [loading, setLoading] = useState(false);
+	const effectiveBackRoute = backRoute || `/${pathname.split("/").at(1)}`;
+	const canShowSubmitButton = formType === FormType.Create || formType === FormType.Edit;
+	const formTypeTitle = messages.form.action[FORM_ACTIONS[formType] ?? "custom"];
+	const documentTitle = useDocumentTitle(`${formTypeTitle} ${title}`);
+	const handleSubmit = async (data) => {
+		setLoading(true);
+		try {
+			const effectiveData = formatValues(data);
+			await service.save(id, effectiveData);
+			showSuccessNotification(messages.form.saveSuccess(formTypeTitle), messages.common.success);
+			if (effectiveBackRoute) navigate(effectiveBackRoute);
+		} catch (e) {
+			showErrorNotification(e, messages.form.saveError(formTypeTitle), messages.common.error);
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: `${formTypeTitle} ${title}`,
+			breadcrumbItems: [{
+				title,
+				href: effectiveBackRoute
+			}, {
+				title: `${formTypeTitle} ${title}`,
+				href: "#"
+			}]
+		}), /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Grid.Col, {
+			span: {
+				base: 12,
+				lg: isFullWidth ? 12 : 6
+			},
+			children: /* @__PURE__ */ jsx(PaperCard, { children: /* @__PURE__ */ jsxs(Box, {
+				component: "form",
+				onSubmit: form.onSubmit(handleSubmit),
+				pos: "relative",
+				children: [/* @__PURE__ */ jsx(LoadingOverlay, {
+					visible: isLoading,
+					zIndex: 1e3,
+					overlayProps: {
+						radius: "sm",
+						blur: 2
+					}
+				}), /* @__PURE__ */ jsxs(Stack, { children: [
+					/* @__PURE__ */ jsxs(Text, {
+						size: "lg",
+						fw: 600,
+						children: [
+							formTypeTitle,
+							" ",
+							title
+						]
+					}),
+					children,
+					showErrorsForMissingFormFields(),
+					/* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Button, {
+						leftSection: /* @__PURE__ */ jsx(IconArrowBack, { size: 16 }),
+						component: Link,
+						href: effectiveBackRoute,
+						variant: "default",
+						children: messages.common.back
+					}), canShowSubmitButton && /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						leftSection: /* @__PURE__ */ jsx(IconDeviceFloppy, { size: 16 }),
+						loading,
+						children: formTypeTitle
+					})] })
+				] })]
+			}) })
+		}) })]
+	})] });
+}
+export { FormPage as default };
+
+//# sourceMappingURL=FormPage.js.map

package/dist/component/template/FormPage/FormPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/FormPage/FormPage.tsx"],"sourcesContent":["import React, { ReactElement, useState } from 'react';\n\nimport { Alert, Box, Button, Grid, Group, LoadingOverlay, Stack, Text } from '@mantine/core';\nimport type { UseFormReturnType } from '@mantine/form';\nimport { IconArrowBack, IconDeviceFloppy, IconInfoCircle } from '@tabler/icons-react';\n\nimport { SaveDataSource } from '../../../data/SaveDataSource';\nimport { FormAction } from '../../../i18n/KitMessages';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitConfig } from '../../../provider/useKit';\nimport { formatValues } from '../../../util/TransformData';\nimport { showErrorNotification, showSuccessNotification } from '../../../util/Notifications';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\nimport { FormType } from './FormType';\n\ninterface FormPageProps<T extends Identifiable, D extends object, S extends SaveDataSource<T, D>> {\n    /** Destination of the data (e.g. a service that accesses an API). */\n    service: S;\n\n    /** Name of the record (e.g. \"Region\"), shown after the action verb in the title. */\n    title: string;\n    formType: FormType;\n    form: UseFormReturnType<D & Identifiable>;\n\n    /** Page opened after saving and by the back button; absent for the first segment of the current path. */\n    backRoute?: string;\n\n    /** Shows a loading overlay over the form (e.g. while the record is fetched). */\n    isLoading?: boolean;\n\n    /** Whether the form takes the whole width, instead of half of it on large screens. */\n    isFullWidth?: boolean;\n}\n\n/** Action of each form type, the key of its verb in the texts. */\nconst FORM_ACTIONS: Record<FormType, FormAction> = {\n    [FormType.Create]: 'create',\n    [FormType.Edit]: 'edit',\n    [FormType.View]: 'view'\n};\n\n/**\n * CRUD form page to create, edit or view a record (according to `formType`), which saves the data in `service` and\n * goes back to the list page.\n */\nfunction FormPage<T extends Identifiable, D extends object, S extends SaveDataSource<T, D>>(\n    props: React.PropsWithChildren<FormPageProps<T, D, S>>\n): ReactElement {\n    const { title, formType, service, form, backRoute, isLoading, isFullWidth, children } = props;\n    const { router, messages } = useKitConfig();\n    const { Link } = router;\n    const navigate = router.useNavigate();\n    const pathname = router.usePathname();\n\n    /**\n     * Checks whether a field of the validation schema is missing in the form.\n     * @param fieldName name of the field to find\n     */\n    function isFormFieldMissing(fieldName: string): boolean {\n        return !form.getInputNode(fieldName);\n    }\n\n    /**\n     * Shows the errors of the fields that are in the validation schema given to `useForm`, but not in the form.\n     * Without it, these errors are not shown to the user (not even in the console), so neither the user nor the\n     * developer can understand why the form is not submitted.\n     */\n    function showErrorsForMissingFormFields(): ReactElement | false {\n        const errors = Object.entries(form.errors)\n            .map(([fieldName, errorMsg]) => ({ fieldName, errorMsg }))\n            .filter(({ fieldName }) => isFormFieldMissing(fieldName))\n            .map(({ fieldName, errorMsg }) => <li key={fieldName}>{errorMsg}</li>);\n\n        const icon = <IconInfoCircle />;\n        return (\n            errors.length > 0 && (\n                <Alert color=\"red\" icon={icon}>\n                    <ul>{errors}</ul>\n                </Alert>\n            )\n        );\n    }\n\n    const { id } = form.values;\n\n    const [loading, setLoading] = useState(false);\n    const effectiveBackRoute = backRoute || `/${pathname.split('/').at(1)}`;\n\n    const canShowSubmitButton = formType === FormType.Create || formType === FormType.Edit;\n    const formTypeTitle = messages.form.action[FORM_ACTIONS[formType] ?? 'custom'];\n    const documentTitle = useDocumentTitle(`${formTypeTitle} ${title}`);\n\n    const handleSubmit = async (data: D) => {\n        setLoading(true);\n        try {\n            const effectiveData = formatValues(data) as D;\n            await service.save(id, effectiveData);\n            showSuccessNotification(messages.form.saveSuccess(formTypeTitle), messages.common.success);\n\n            if (effectiveBackRoute) navigate(effectiveBackRoute);\n        } catch (e) {\n            showErrorNotification(e, messages.form.saveError(formTypeTitle), messages.common.error);\n        } finally {\n            setLoading(false);\n        }\n    };\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader\n                    title={`${formTypeTitle} ${title}`}\n                    breadcrumbItems={[\n                        { title, href: effectiveBackRoute },\n                        { title: `${formTypeTitle} ${title}`, href: '#' }\n                    ]}\n                />\n                <Grid>\n                    <Grid.Col span={{ base: 12, lg: isFullWidth ? 12 : 6 }}>\n                        <PaperCard>\n                            <Box component=\"form\" onSubmit={form.onSubmit(handleSubmit)} pos=\"relative\">\n                                <LoadingOverlay\n                                    visible={isLoading}\n                                    zIndex={1000}\n                                    overlayProps={{ radius: 'sm', blur: 2 }}\n                                />\n\n                                <Stack>\n                                    <Text size=\"lg\" fw={600}>\n                                        {formTypeTitle} {title}\n                                    </Text>\n\n                                    {children}\n                                    {showErrorsForMissingFormFields()}\n\n                                    <Group>\n                                        <Button\n                                            leftSection={<IconArrowBack size={16} />}\n                                            component={Link}\n                                            href={effectiveBackRoute}\n                                            variant=\"default\"\n                                        >\n                                            {messages.common.back}\n                                        </Button>\n                                        {canShowSubmitButton && (\n                                            <Button\n                                                type=\"submit\"\n                                                leftSection={<IconDeviceFloppy size={16} />}\n                                                loading={loading}\n                                            >\n                                                {formTypeTitle}\n                                            </Button>\n                                        )}\n                                    </Group>\n                                </Stack>\n                            </Box>\n                        </PaperCard>\n                    </Grid.Col>\n                </Grid>\n            </Stack>\n        </>\n    );\n}\n\nexport default FormPage;\n"],"mappings":"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"}

package/dist/component/template/FormPage/FormType.d.ts

@@ -0,0 +1,6 @@
+/** Mode in which a CRUD form is opened. */
+export declare enum FormType {
+    Create = 0,
+    Edit = 1,
+    View = 2
+}

package/dist/component/template/FormPage/FormType.js

@@ -0,0 +1,12 @@
+"use client";
+// src/component/template/FormPage/FormType.ts
+/** Mode in which a CRUD form is opened. */
+var FormType = /* @__PURE__ */ function(FormType) {
+	FormType[FormType["Create"] = 0] = "Create";
+	FormType[FormType["Edit"] = 1] = "Edit";
+	FormType[FormType["View"] = 2] = "View";
+	return FormType;
+}({});
+export { FormType };
+
+//# sourceMappingURL=FormType.js.map

package/dist/component/template/FormPage/FormType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormType.js","names":[],"sources":["../../../../src/component/template/FormPage/FormType.ts"],"sourcesContent":["/** Mode in which a CRUD form is opened. */\nexport enum FormType {\n    Create,\n    Edit,\n    View\n}\n"],"mappings":";;;AACA,IAAY,WAAL,yBAAA,UAAA;CACH,SAAA,SAAA,YAAA,KAAA;CACA,SAAA,SAAA,UAAA,KAAA;CACA,SAAA,SAAA,UAAA,KAAA;;AACJ,EAAA,CAAA,CAAA"}

package/dist/component/template/Layout/Layout.d.ts

@@ -0,0 +1,21 @@
+import { NavItem } from '../../organism/Navbar/NavItem';
+interface Props {
+    children: React.ReactNode;
+    /** Brand of the app in the header (e.g. the logo with a link to the home page). */
+    logo: React.ReactNode;
+    /** Items of the side menu. */
+    navItems: NavItem[];
+    /** Content fixed at the bottom of the side menu (e.g. a link to log out). */
+    navFooter?: React.ReactNode;
+    /**
+     * Items of the user menu (e.g. `Menu.Item`s for the profile and to log out), opened by the avatar in the header.
+     * Without them, the avatar is not shown.
+     */
+    userMenu?: React.ReactNode;
+}
+/**
+ * Structure of the pages of the app: header with the brand, the color scheme toggle and the user menu, collapsible side
+ * menu and the content area.
+ */
+export declare const Layout: ({ children, logo, navItems, navFooter, userMenu }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};