@olenbetong/synergi-react 2.5.0 → 2.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/AppMenu/AppMenu.css +158 -0
- package/es/components/AppMenu/index.d.ts +12 -0
- package/es/components/AppMenu/index.js +85 -0
- package/es/components/AppShell/index.d.ts +5 -0
- package/es/components/AppShell/index.js +112 -0
- package/es/index.d.ts +2 -0
- package/es/index.js +2 -0
- package/package.json +9 -7
- package/src/components/AppMenu/AppMenu.css +158 -0
- package/src/components/AppMenu/index.tsx +179 -0
- package/src/components/AppShell/index.tsx +133 -0
- package/src/index.ts +2 -0
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/* App Menu – trigger button */
|
|
2
|
+
.app-menu-trigger {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
padding: var(--ds-spacing-2);
|
|
7
|
+
background: transparent;
|
|
8
|
+
border: none;
|
|
9
|
+
border-radius: var(--ds-border-radius-md);
|
|
10
|
+
color: var(--ds-color-neutral-text-default);
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
line-height: 1;
|
|
13
|
+
transition: background 0.15s ease;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.app-menu-trigger:hover {
|
|
17
|
+
background: var(--ds-color-neutral-background-hover);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.app-menu-trigger:focus-visible {
|
|
21
|
+
outline: 2px solid var(--ds-color-focus-outer);
|
|
22
|
+
outline-offset: 2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.app-menu-icon {
|
|
26
|
+
display: block;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Dialog backdrop */
|
|
30
|
+
.app-menu-dialog::backdrop {
|
|
31
|
+
background: rgba(0, 0, 0, 0.4);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Dialog container */
|
|
35
|
+
.app-menu-dialog {
|
|
36
|
+
padding: 0;
|
|
37
|
+
border: 1px solid var(--ds-color-neutral-border-default);
|
|
38
|
+
border-radius: var(--ds-border-radius-lg);
|
|
39
|
+
background: var(--ds-color-neutral-background-default);
|
|
40
|
+
box-shadow: var(--ds-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.18));
|
|
41
|
+
max-width: min(90vw, 36rem);
|
|
42
|
+
width: 100%;
|
|
43
|
+
max-height: min(90vh, 40rem);
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Inner wrapper – scrollable */
|
|
50
|
+
.app-menu-dialog-inner {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
gap: 0;
|
|
54
|
+
padding: var(--ds-spacing-4);
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
height: 100%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Search row */
|
|
60
|
+
.app-menu-search-row {
|
|
61
|
+
margin-bottom: var(--ds-spacing-3);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.app-menu-search {
|
|
65
|
+
width: 100%;
|
|
66
|
+
padding: var(--ds-spacing-2) var(--ds-spacing-3);
|
|
67
|
+
font-size: var(--ds-font-size-md);
|
|
68
|
+
border: 1px solid var(--ds-color-neutral-border-strong);
|
|
69
|
+
border-radius: var(--ds-border-radius-md);
|
|
70
|
+
background: var(--ds-color-neutral-background-subtle);
|
|
71
|
+
color: var(--ds-color-neutral-text-default);
|
|
72
|
+
box-sizing: border-box;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.app-menu-search:focus {
|
|
76
|
+
outline: 2px solid var(--ds-color-focus-outer);
|
|
77
|
+
outline-offset: 2px;
|
|
78
|
+
border-color: var(--ds-color-accent-border-strong);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Loading / empty states */
|
|
82
|
+
.app-menu-loading,
|
|
83
|
+
.app-menu-empty {
|
|
84
|
+
text-align: center;
|
|
85
|
+
color: var(--ds-color-neutral-text-subtle);
|
|
86
|
+
font-size: var(--ds-font-size-sm);
|
|
87
|
+
padding: var(--ds-spacing-4) 0;
|
|
88
|
+
margin: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Groups scroll area */
|
|
92
|
+
.app-menu-groups {
|
|
93
|
+
overflow-y: auto;
|
|
94
|
+
flex: 1 1 auto;
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: column;
|
|
97
|
+
gap: var(--ds-spacing-4);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Individual group */
|
|
101
|
+
.app-menu-group {
|
|
102
|
+
display: flex;
|
|
103
|
+
flex-direction: column;
|
|
104
|
+
gap: var(--ds-spacing-1);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.app-menu-group-title {
|
|
108
|
+
font-size: var(--ds-font-size-xs);
|
|
109
|
+
font-weight: var(--ds-font-weight-medium, 600);
|
|
110
|
+
text-transform: uppercase;
|
|
111
|
+
letter-spacing: 0.06em;
|
|
112
|
+
color: var(--ds-color-neutral-text-subtle);
|
|
113
|
+
margin: 0 0 var(--ds-spacing-1);
|
|
114
|
+
padding: 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* App list */
|
|
118
|
+
.app-menu-list {
|
|
119
|
+
list-style: none;
|
|
120
|
+
margin: 0;
|
|
121
|
+
padding: 0;
|
|
122
|
+
display: grid;
|
|
123
|
+
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
|
124
|
+
gap: var(--ds-spacing-1);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.app-menu-item {
|
|
128
|
+
display: contents;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* App link tiles */
|
|
132
|
+
.app-menu-link {
|
|
133
|
+
display: flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
padding: var(--ds-spacing-2) var(--ds-spacing-3);
|
|
136
|
+
border-radius: var(--ds-border-radius-sm);
|
|
137
|
+
font-size: var(--ds-font-size-sm);
|
|
138
|
+
color: var(--ds-color-neutral-text-default);
|
|
139
|
+
text-decoration: none;
|
|
140
|
+
background: var(--ds-color-neutral-background-subtle);
|
|
141
|
+
border: 1px solid transparent;
|
|
142
|
+
transition:
|
|
143
|
+
background 0.12s ease,
|
|
144
|
+
border-color 0.12s ease;
|
|
145
|
+
word-break: break-word;
|
|
146
|
+
line-height: 1.4;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.app-menu-link:hover {
|
|
150
|
+
background: var(--ds-color-accent-background-hover, var(--ds-color-neutral-background-hover));
|
|
151
|
+
border-color: var(--ds-color-accent-border-default, var(--ds-color-neutral-border-default));
|
|
152
|
+
color: var(--ds-color-accent-text-default, var(--ds-color-neutral-text-default));
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.app-menu-link:focus-visible {
|
|
156
|
+
outline: 2px solid var(--ds-color-focus-outer);
|
|
157
|
+
outline-offset: 2px;
|
|
158
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "./AppMenu.css";
|
|
2
|
+
import type { DataObject } from "@olenbetong/appframe-data";
|
|
3
|
+
export type AppMenuArticle = {
|
|
4
|
+
ArticleId: string;
|
|
5
|
+
Title: string | null;
|
|
6
|
+
MenuGroup: string | null;
|
|
7
|
+
Path: string | null;
|
|
8
|
+
};
|
|
9
|
+
export type AppMenuProps = {
|
|
10
|
+
dataObject: DataObject<AppMenuArticle>;
|
|
11
|
+
};
|
|
12
|
+
export declare function AppMenu({ dataObject }: AppMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import "./AppMenu.css";
|
|
3
|
+
import { useData, useLoading } from "@olenbetong/appframe-react";
|
|
4
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
5
|
+
/** Strip version suffixes from ArticleId for building hrefs. */
|
|
6
|
+
function stripVersionSuffix(articleId) {
|
|
7
|
+
if (articleId.length > 9 && articleId[articleId.length - 8] === ".") {
|
|
8
|
+
return articleId.slice(0, -8);
|
|
9
|
+
}
|
|
10
|
+
if (articleId.length > 5 && articleId[articleId.length - 4] === ".") {
|
|
11
|
+
return articleId.slice(0, -4);
|
|
12
|
+
}
|
|
13
|
+
return articleId;
|
|
14
|
+
}
|
|
15
|
+
/** Group records by MenuGroup, returning an ordered list of [group, items] pairs. */
|
|
16
|
+
function groupByMenuGroup(items) {
|
|
17
|
+
let map = new Map();
|
|
18
|
+
for (let item of items) {
|
|
19
|
+
let key = item.MenuGroup ?? "";
|
|
20
|
+
let list = map.get(key);
|
|
21
|
+
if (!list) {
|
|
22
|
+
list = [];
|
|
23
|
+
map.set(key, list);
|
|
24
|
+
}
|
|
25
|
+
list.push(item);
|
|
26
|
+
}
|
|
27
|
+
return [...map.entries()];
|
|
28
|
+
}
|
|
29
|
+
export function AppMenu({ dataObject }) {
|
|
30
|
+
let dialogRef = useRef(null);
|
|
31
|
+
let searchRef = useRef(null);
|
|
32
|
+
let [search, setSearch] = useState("");
|
|
33
|
+
let [isOpen, setIsOpen] = useState(false);
|
|
34
|
+
let isLoading = useLoading(dataObject);
|
|
35
|
+
let allArticles = useData(dataObject);
|
|
36
|
+
// Refresh data when opened for the first time
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (isOpen && allArticles.length === 0 && !isLoading) {
|
|
39
|
+
dataObject.refreshDataSource();
|
|
40
|
+
}
|
|
41
|
+
}, [isOpen, allArticles.length, isLoading, dataObject]);
|
|
42
|
+
let filtered = useMemo(() => {
|
|
43
|
+
if (!search.trim())
|
|
44
|
+
return allArticles;
|
|
45
|
+
let lower = search.toLowerCase();
|
|
46
|
+
return allArticles.filter((a) => (a.Title ?? "").toLowerCase().includes(lower));
|
|
47
|
+
}, [allArticles, search]);
|
|
48
|
+
let groups = useMemo(() => groupByMenuGroup(filtered), [filtered]);
|
|
49
|
+
function openDialog() {
|
|
50
|
+
let dialog = dialogRef.current;
|
|
51
|
+
if (!dialog)
|
|
52
|
+
return;
|
|
53
|
+
setIsOpen(true);
|
|
54
|
+
dialog.showModal();
|
|
55
|
+
// Focus search after dialog opens
|
|
56
|
+
requestAnimationFrame(() => searchRef.current?.focus());
|
|
57
|
+
}
|
|
58
|
+
function closeDialog() {
|
|
59
|
+
let dialog = dialogRef.current;
|
|
60
|
+
if (!dialog)
|
|
61
|
+
return;
|
|
62
|
+
setSearch("");
|
|
63
|
+
setIsOpen(false);
|
|
64
|
+
dialog.close();
|
|
65
|
+
}
|
|
66
|
+
function handleBackdropClick(e) {
|
|
67
|
+
// Close when clicking outside the dialog content (on the backdrop)
|
|
68
|
+
let rect = dialogRef.current?.getBoundingClientRect();
|
|
69
|
+
if (!rect)
|
|
70
|
+
return;
|
|
71
|
+
let { clientX, clientY } = e;
|
|
72
|
+
if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) {
|
|
73
|
+
closeDialog();
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
// Native <dialog> handles Escape automatically — just sync state
|
|
77
|
+
function handleCancel() {
|
|
78
|
+
setSearch("");
|
|
79
|
+
setIsOpen(false);
|
|
80
|
+
}
|
|
81
|
+
return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "app-menu-trigger", "aria-label": "Open app menu", "aria-haspopup": "dialog", "aria-expanded": isOpen, onClick: openDialog, children: _jsx("svg", { className: "app-menu-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", focusable: "false", width: "24", height: "24", children: _jsx("path", { d: "M4 6h4V4H4v2zm0 5h4V9H4v2zm0 5h4v-2H4v2zM10 4v2h10V4H10zm0 7h10V9H10v2zm0 5h10v-2H10v2z" }) }) }), _jsx("dialog", { ref: dialogRef, className: "app-menu-dialog", "aria-label": "App menu", onClick: handleBackdropClick, onCancel: handleCancel, children: _jsxs("div", { className: "app-menu-dialog-inner", children: [_jsxs("div", { className: "app-menu-search-row", children: [_jsx("label", { htmlFor: "app-menu-search", className: "visually-hidden", children: "Search apps" }), _jsx("input", { ref: searchRef, id: "app-menu-search", type: "search", className: "app-menu-search", placeholder: "Search apps\u2026", value: search, onChange: (e) => setSearch(e.target.value), autoComplete: "off" })] }), isLoading && _jsx("p", { className: "app-menu-loading", children: "Loading\u2026" }), !isLoading && groups.length === 0 && _jsx("p", { className: "app-menu-empty", children: "No apps found." }), _jsx("div", { className: "app-menu-groups", children: groups.map(([group, items]) => (_jsxs("section", { className: "app-menu-group", children: [group && _jsx("h2", { className: "app-menu-group-title", children: group }), _jsx("ul", { className: "app-menu-list", children: items.map((article) => {
|
|
82
|
+
let href = `/${stripVersionSuffix(article.ArticleId)}`;
|
|
83
|
+
return (_jsx("li", { className: "app-menu-item", children: _jsx("a", { href: href, className: "app-menu-link", onClick: closeDialog, children: article.Title ?? article.ArticleId }) }, article.ArticleId));
|
|
84
|
+
}) })] }, group))) })] }) })] }));
|
|
85
|
+
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { StyledEngineProvider, ThemeProvider } from "@mui/material";
|
|
3
|
+
import { createTheme as muiCreateTheme } from "@mui/material/styles";
|
|
4
|
+
import { AppErrorBoundary } from "@olenbetong/appframe-mui";
|
|
5
|
+
import { generateApiDataObject, SortOrder } from "@olenbetong/appframe-data";
|
|
6
|
+
import { useEffect, useState } from "react";
|
|
7
|
+
import { createPortal } from "react-dom";
|
|
8
|
+
import { AppMenu } from "../AppMenu/index.js";
|
|
9
|
+
// Created once — shared across all AppShell instances on a page.
|
|
10
|
+
const dsMenuArticles = generateApiDataObject({
|
|
11
|
+
resource: "aviw_WebShared_Articles",
|
|
12
|
+
id: "dsMenuArticles",
|
|
13
|
+
allowUpdate: false,
|
|
14
|
+
allowInsert: false,
|
|
15
|
+
allowDelete: false,
|
|
16
|
+
dynamicLoading: false,
|
|
17
|
+
fields: [
|
|
18
|
+
{ name: "ArticleId", type: "string", nullable: false },
|
|
19
|
+
{ name: "Title", type: "string", nullable: true },
|
|
20
|
+
{ name: "MenuGroup", type: "string", nullable: true },
|
|
21
|
+
{ name: "Path", type: "string", nullable: true },
|
|
22
|
+
],
|
|
23
|
+
parameters: {
|
|
24
|
+
maxRecords: -1,
|
|
25
|
+
whereClause: "ListOnFrontPage = 1 AND SysApp = 0 AND HideFromNav = 0 AND (IsPublishedVersion IS NULL OR IsPublishedVersion = 1) AND ISNULL(ParentArticleId, '') <> 'news'",
|
|
26
|
+
sortOrder: [{ MenuGroup: SortOrder.Asc }, { Title: SortOrder.Asc }],
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
function buildMuiTheme() {
|
|
30
|
+
const s = getComputedStyle(document.body);
|
|
31
|
+
const get = (v) => s.getPropertyValue(v).trim();
|
|
32
|
+
return muiCreateTheme({
|
|
33
|
+
palette: {
|
|
34
|
+
primary: {
|
|
35
|
+
main: get("--ds-color-brand-base-default") || "#116069",
|
|
36
|
+
dark: get("--ds-color-brand-base-hover") || "#0d4b52",
|
|
37
|
+
contrastText: get("--ds-color-brand-base-contrast-default") || "#ffffff",
|
|
38
|
+
},
|
|
39
|
+
secondary: {
|
|
40
|
+
main: get("--ds-color-brand-light-base-default") || "#1a95a2",
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
typography: {
|
|
44
|
+
fontFamily: [
|
|
45
|
+
"-apple-system",
|
|
46
|
+
"BlinkMacSystemFont",
|
|
47
|
+
'"Segoe UI"',
|
|
48
|
+
"Roboto",
|
|
49
|
+
'"Helvetica Neue"',
|
|
50
|
+
"Arial",
|
|
51
|
+
"sans-serif",
|
|
52
|
+
'"Apple Color Emoji"',
|
|
53
|
+
'"Segoe UI Emoji"',
|
|
54
|
+
'"Segoe UI Symbol"',
|
|
55
|
+
].join(","),
|
|
56
|
+
},
|
|
57
|
+
components: {
|
|
58
|
+
MuiTypography: {
|
|
59
|
+
styleOverrides: {
|
|
60
|
+
h1: { fontSize: "2.488rem" },
|
|
61
|
+
h2: { fontSize: "2.074rem" },
|
|
62
|
+
h3: { fontSize: "1.728rem" },
|
|
63
|
+
h4: { fontSize: "1.44rem" },
|
|
64
|
+
h5: { fontSize: "1.2rem" },
|
|
65
|
+
h6: { fontSize: "1rem" },
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
MuiAppBar: {
|
|
69
|
+
styleOverrides: {
|
|
70
|
+
root: {
|
|
71
|
+
"& .MuiTypography-h1": {
|
|
72
|
+
fontSize: "1.25rem",
|
|
73
|
+
fontWeight: "500",
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
MuiButton: {
|
|
79
|
+
styleOverrides: {
|
|
80
|
+
root: { borderRadius: 2 },
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
MuiDialogTitle: {
|
|
84
|
+
styleOverrides: {
|
|
85
|
+
root: {
|
|
86
|
+
fontSize: "1.2rem",
|
|
87
|
+
fontWeight: 500,
|
|
88
|
+
paddingLeft: 16,
|
|
89
|
+
paddingRight: 16,
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
MuiFormLabel: {
|
|
94
|
+
styleOverrides: {
|
|
95
|
+
root: { color: "rgba(0, 0, 0, 0.72)" },
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
MuiTextField: { defaultProps: { variant: "filled" } },
|
|
99
|
+
MuiSelect: { defaultProps: { variant: "filled" } },
|
|
100
|
+
MuiFormControl: { defaultProps: { variant: "filled" } },
|
|
101
|
+
},
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
export function AppShell({ children }) {
|
|
105
|
+
const [theme, setTheme] = useState(() => buildMuiTheme());
|
|
106
|
+
// Re-read tokens after mount so CSS variables are fully resolved.
|
|
107
|
+
useEffect(() => {
|
|
108
|
+
setTheme(buildMuiTheme());
|
|
109
|
+
}, []);
|
|
110
|
+
const appMenuSlot = document.getElementById("ob-toolbar-app-menu");
|
|
111
|
+
return (_jsx(StyledEngineProvider, { injectFirst: true, children: _jsx(ThemeProvider, { theme: theme, children: _jsxs(AppErrorBoundary, { children: [appMenuSlot && createPortal(_jsx(AppMenu, { dataObject: dsMenuArticles }), appMenuSlot), children] }) }) }));
|
|
112
|
+
}
|
package/es/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { AppMenu, type AppMenuArticle, type AppMenuProps } from "./components/AppMenu/index.js";
|
|
2
|
+
export { AppShell, type AppShellProps } from "./components/AppShell/index.js";
|
|
1
3
|
export { Checkbox, type CheckboxProps } from "./components/Checkbox/index.js";
|
|
2
4
|
export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
|
|
3
5
|
export { DateNavigator } from "./components/DateNavigator/index.js";
|
package/es/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { AppMenu } from "./components/AppMenu/index.js";
|
|
2
|
+
export { AppShell } from "./components/AppShell/index.js";
|
|
1
3
|
export { Checkbox } from "./components/Checkbox/index.js";
|
|
2
4
|
export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
|
|
3
5
|
export { DateNavigator } from "./components/DateNavigator/index.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@olenbetong/synergi-react",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.1",
|
|
4
4
|
"description": "Standalone React component for SynergiWeb and Partner Portal",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
|
|
23
23
|
"license": "MIT",
|
|
24
24
|
"peerDependencies": {
|
|
25
|
+
"@mui/material": ">=9.0.0",
|
|
25
26
|
"react": ">=18.2.0",
|
|
26
27
|
"react-dom": ">=18.2.0"
|
|
27
28
|
},
|
|
@@ -30,7 +31,7 @@
|
|
|
30
31
|
"@emotion/styled": "^11.14.1",
|
|
31
32
|
"clsx": "^2.1.1",
|
|
32
33
|
"dynamsoft-javascript-barcode": "6.5.4",
|
|
33
|
-
"filepond": "^4.32.
|
|
34
|
+
"filepond": "^4.32.12",
|
|
34
35
|
"filepond-plugin-file-poster": "^2.5.2",
|
|
35
36
|
"filepond-plugin-image-exif-orientation": "^1.0.11",
|
|
36
37
|
"filepond-plugin-image-preview": "^4.6.12",
|
|
@@ -39,11 +40,12 @@
|
|
|
39
40
|
"localforage": "^1.10.0",
|
|
40
41
|
"mitt": "^3.0.1",
|
|
41
42
|
"pdf-lib": "^1.17.1",
|
|
42
|
-
"pdfjs-dist": "5.
|
|
43
|
-
"react-pdf": "^10.
|
|
43
|
+
"pdfjs-dist": "5.7.284",
|
|
44
|
+
"react-pdf": "^10.4.1",
|
|
44
45
|
"@olenbetong/appframe-core": "2.11.10",
|
|
46
|
+
"@olenbetong/appframe-data": "1.5.0",
|
|
45
47
|
"@olenbetong/appframe-react": "1.21.25",
|
|
46
|
-
"@olenbetong/appframe-mui": "6.
|
|
48
|
+
"@olenbetong/appframe-mui": "6.2.0"
|
|
47
49
|
},
|
|
48
50
|
"repository": {
|
|
49
51
|
"type": "git",
|
|
@@ -57,8 +59,8 @@
|
|
|
57
59
|
]
|
|
58
60
|
},
|
|
59
61
|
"devDependencies": {
|
|
60
|
-
"react": "19.2.
|
|
61
|
-
"react-dom": "19.2.
|
|
62
|
+
"react": "19.2.6",
|
|
63
|
+
"react-dom": "19.2.6",
|
|
62
64
|
"replace-in-files": "^3.0.0"
|
|
63
65
|
},
|
|
64
66
|
"optionalDependencies": {},
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/* App Menu – trigger button */
|
|
2
|
+
.app-menu-trigger {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
padding: var(--ds-spacing-2);
|
|
7
|
+
background: transparent;
|
|
8
|
+
border: none;
|
|
9
|
+
border-radius: var(--ds-border-radius-md);
|
|
10
|
+
color: var(--ds-color-neutral-text-default);
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
line-height: 1;
|
|
13
|
+
transition: background 0.15s ease;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.app-menu-trigger:hover {
|
|
17
|
+
background: var(--ds-color-neutral-background-hover);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.app-menu-trigger:focus-visible {
|
|
21
|
+
outline: 2px solid var(--ds-color-focus-outer);
|
|
22
|
+
outline-offset: 2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.app-menu-icon {
|
|
26
|
+
display: block;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Dialog backdrop */
|
|
30
|
+
.app-menu-dialog::backdrop {
|
|
31
|
+
background: rgba(0, 0, 0, 0.4);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Dialog container */
|
|
35
|
+
.app-menu-dialog {
|
|
36
|
+
padding: 0;
|
|
37
|
+
border: 1px solid var(--ds-color-neutral-border-default);
|
|
38
|
+
border-radius: var(--ds-border-radius-lg);
|
|
39
|
+
background: var(--ds-color-neutral-background-default);
|
|
40
|
+
box-shadow: var(--ds-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.18));
|
|
41
|
+
max-width: min(90vw, 36rem);
|
|
42
|
+
width: 100%;
|
|
43
|
+
max-height: min(90vh, 40rem);
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Inner wrapper – scrollable */
|
|
50
|
+
.app-menu-dialog-inner {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
gap: 0;
|
|
54
|
+
padding: var(--ds-spacing-4);
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
height: 100%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Search row */
|
|
60
|
+
.app-menu-search-row {
|
|
61
|
+
margin-bottom: var(--ds-spacing-3);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.app-menu-search {
|
|
65
|
+
width: 100%;
|
|
66
|
+
padding: var(--ds-spacing-2) var(--ds-spacing-3);
|
|
67
|
+
font-size: var(--ds-font-size-md);
|
|
68
|
+
border: 1px solid var(--ds-color-neutral-border-strong);
|
|
69
|
+
border-radius: var(--ds-border-radius-md);
|
|
70
|
+
background: var(--ds-color-neutral-background-subtle);
|
|
71
|
+
color: var(--ds-color-neutral-text-default);
|
|
72
|
+
box-sizing: border-box;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.app-menu-search:focus {
|
|
76
|
+
outline: 2px solid var(--ds-color-focus-outer);
|
|
77
|
+
outline-offset: 2px;
|
|
78
|
+
border-color: var(--ds-color-accent-border-strong);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Loading / empty states */
|
|
82
|
+
.app-menu-loading,
|
|
83
|
+
.app-menu-empty {
|
|
84
|
+
text-align: center;
|
|
85
|
+
color: var(--ds-color-neutral-text-subtle);
|
|
86
|
+
font-size: var(--ds-font-size-sm);
|
|
87
|
+
padding: var(--ds-spacing-4) 0;
|
|
88
|
+
margin: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Groups scroll area */
|
|
92
|
+
.app-menu-groups {
|
|
93
|
+
overflow-y: auto;
|
|
94
|
+
flex: 1 1 auto;
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: column;
|
|
97
|
+
gap: var(--ds-spacing-4);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Individual group */
|
|
101
|
+
.app-menu-group {
|
|
102
|
+
display: flex;
|
|
103
|
+
flex-direction: column;
|
|
104
|
+
gap: var(--ds-spacing-1);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.app-menu-group-title {
|
|
108
|
+
font-size: var(--ds-font-size-xs);
|
|
109
|
+
font-weight: var(--ds-font-weight-medium, 600);
|
|
110
|
+
text-transform: uppercase;
|
|
111
|
+
letter-spacing: 0.06em;
|
|
112
|
+
color: var(--ds-color-neutral-text-subtle);
|
|
113
|
+
margin: 0 0 var(--ds-spacing-1);
|
|
114
|
+
padding: 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* App list */
|
|
118
|
+
.app-menu-list {
|
|
119
|
+
list-style: none;
|
|
120
|
+
margin: 0;
|
|
121
|
+
padding: 0;
|
|
122
|
+
display: grid;
|
|
123
|
+
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
|
124
|
+
gap: var(--ds-spacing-1);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.app-menu-item {
|
|
128
|
+
display: contents;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* App link tiles */
|
|
132
|
+
.app-menu-link {
|
|
133
|
+
display: flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
padding: var(--ds-spacing-2) var(--ds-spacing-3);
|
|
136
|
+
border-radius: var(--ds-border-radius-sm);
|
|
137
|
+
font-size: var(--ds-font-size-sm);
|
|
138
|
+
color: var(--ds-color-neutral-text-default);
|
|
139
|
+
text-decoration: none;
|
|
140
|
+
background: var(--ds-color-neutral-background-subtle);
|
|
141
|
+
border: 1px solid transparent;
|
|
142
|
+
transition:
|
|
143
|
+
background 0.12s ease,
|
|
144
|
+
border-color 0.12s ease;
|
|
145
|
+
word-break: break-word;
|
|
146
|
+
line-height: 1.4;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.app-menu-link:hover {
|
|
150
|
+
background: var(--ds-color-accent-background-hover, var(--ds-color-neutral-background-hover));
|
|
151
|
+
border-color: var(--ds-color-accent-border-default, var(--ds-color-neutral-border-default));
|
|
152
|
+
color: var(--ds-color-accent-text-default, var(--ds-color-neutral-text-default));
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.app-menu-link:focus-visible {
|
|
156
|
+
outline: 2px solid var(--ds-color-focus-outer);
|
|
157
|
+
outline-offset: 2px;
|
|
158
|
+
}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import "./AppMenu.css";
|
|
2
|
+
|
|
3
|
+
import type { DataObject } from "@olenbetong/appframe-data";
|
|
4
|
+
import { useData, useLoading } from "@olenbetong/appframe-react";
|
|
5
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
6
|
+
|
|
7
|
+
export type AppMenuArticle = {
|
|
8
|
+
ArticleId: string;
|
|
9
|
+
Title: string | null;
|
|
10
|
+
MenuGroup: string | null;
|
|
11
|
+
Path: string | null;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/** Strip version suffixes from ArticleId for building hrefs. */
|
|
15
|
+
function stripVersionSuffix(articleId: string): string {
|
|
16
|
+
if (articleId.length > 9 && articleId[articleId.length - 8] === ".") {
|
|
17
|
+
return articleId.slice(0, -8);
|
|
18
|
+
}
|
|
19
|
+
if (articleId.length > 5 && articleId[articleId.length - 4] === ".") {
|
|
20
|
+
return articleId.slice(0, -4);
|
|
21
|
+
}
|
|
22
|
+
return articleId;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/** Group records by MenuGroup, returning an ordered list of [group, items] pairs. */
|
|
26
|
+
function groupByMenuGroup<T extends { MenuGroup: string | null; Title: string | null }>(
|
|
27
|
+
items: readonly T[],
|
|
28
|
+
): [string, T[]][] {
|
|
29
|
+
let map = new Map<string, T[]>();
|
|
30
|
+
for (let item of items) {
|
|
31
|
+
let key = item.MenuGroup ?? "";
|
|
32
|
+
let list = map.get(key);
|
|
33
|
+
if (!list) {
|
|
34
|
+
list = [];
|
|
35
|
+
map.set(key, list);
|
|
36
|
+
}
|
|
37
|
+
list.push(item);
|
|
38
|
+
}
|
|
39
|
+
return [...map.entries()];
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export type AppMenuProps = {
|
|
43
|
+
dataObject: DataObject<AppMenuArticle>;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export function AppMenu({ dataObject }: AppMenuProps) {
|
|
47
|
+
let dialogRef = useRef<HTMLDialogElement>(null);
|
|
48
|
+
let searchRef = useRef<HTMLInputElement>(null);
|
|
49
|
+
let [search, setSearch] = useState("");
|
|
50
|
+
let [isOpen, setIsOpen] = useState(false);
|
|
51
|
+
|
|
52
|
+
let isLoading = useLoading(dataObject);
|
|
53
|
+
let allArticles = useData<AppMenuArticle>(dataObject);
|
|
54
|
+
|
|
55
|
+
// Refresh data when opened for the first time
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
if (isOpen && allArticles.length === 0 && !isLoading) {
|
|
58
|
+
dataObject.refreshDataSource();
|
|
59
|
+
}
|
|
60
|
+
}, [isOpen, allArticles.length, isLoading, dataObject]);
|
|
61
|
+
|
|
62
|
+
let filtered = useMemo(() => {
|
|
63
|
+
if (!search.trim()) return allArticles;
|
|
64
|
+
let lower = search.toLowerCase();
|
|
65
|
+
return allArticles.filter((a) => (a.Title ?? "").toLowerCase().includes(lower));
|
|
66
|
+
}, [allArticles, search]);
|
|
67
|
+
|
|
68
|
+
let groups = useMemo(() => groupByMenuGroup(filtered), [filtered]);
|
|
69
|
+
|
|
70
|
+
function openDialog() {
|
|
71
|
+
let dialog = dialogRef.current;
|
|
72
|
+
if (!dialog) return;
|
|
73
|
+
setIsOpen(true);
|
|
74
|
+
dialog.showModal();
|
|
75
|
+
// Focus search after dialog opens
|
|
76
|
+
requestAnimationFrame(() => searchRef.current?.focus());
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
function closeDialog() {
|
|
80
|
+
let dialog = dialogRef.current;
|
|
81
|
+
if (!dialog) return;
|
|
82
|
+
setSearch("");
|
|
83
|
+
setIsOpen(false);
|
|
84
|
+
dialog.close();
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function handleBackdropClick(e: React.MouseEvent<HTMLDialogElement>) {
|
|
88
|
+
// Close when clicking outside the dialog content (on the backdrop)
|
|
89
|
+
let rect = dialogRef.current?.getBoundingClientRect();
|
|
90
|
+
if (!rect) return;
|
|
91
|
+
let { clientX, clientY } = e;
|
|
92
|
+
if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) {
|
|
93
|
+
closeDialog();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Native <dialog> handles Escape automatically — just sync state
|
|
98
|
+
function handleCancel() {
|
|
99
|
+
setSearch("");
|
|
100
|
+
setIsOpen(false);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
return (
|
|
104
|
+
<>
|
|
105
|
+
<button
|
|
106
|
+
type="button"
|
|
107
|
+
className="app-menu-trigger"
|
|
108
|
+
aria-label="Open app menu"
|
|
109
|
+
aria-haspopup="dialog"
|
|
110
|
+
aria-expanded={isOpen}
|
|
111
|
+
onClick={openDialog}
|
|
112
|
+
>
|
|
113
|
+
<svg
|
|
114
|
+
className="app-menu-icon"
|
|
115
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
116
|
+
viewBox="0 0 24 24"
|
|
117
|
+
fill="currentColor"
|
|
118
|
+
aria-hidden="true"
|
|
119
|
+
focusable="false"
|
|
120
|
+
width="24"
|
|
121
|
+
height="24"
|
|
122
|
+
>
|
|
123
|
+
<path d="M4 6h4V4H4v2zm0 5h4V9H4v2zm0 5h4v-2H4v2zM10 4v2h10V4H10zm0 7h10V9H10v2zm0 5h10v-2H10v2z" />
|
|
124
|
+
</svg>
|
|
125
|
+
</button>
|
|
126
|
+
|
|
127
|
+
{/* biome-ignore lint/a11y/useKeyWithClickEvents: backdrop click handled via mouse coords */}
|
|
128
|
+
<dialog
|
|
129
|
+
ref={dialogRef}
|
|
130
|
+
className="app-menu-dialog"
|
|
131
|
+
aria-label="App menu"
|
|
132
|
+
onClick={handleBackdropClick}
|
|
133
|
+
onCancel={handleCancel}
|
|
134
|
+
>
|
|
135
|
+
<div className="app-menu-dialog-inner">
|
|
136
|
+
<div className="app-menu-search-row">
|
|
137
|
+
<label htmlFor="app-menu-search" className="visually-hidden">
|
|
138
|
+
Search apps
|
|
139
|
+
</label>
|
|
140
|
+
<input
|
|
141
|
+
ref={searchRef}
|
|
142
|
+
id="app-menu-search"
|
|
143
|
+
type="search"
|
|
144
|
+
className="app-menu-search"
|
|
145
|
+
placeholder="Search apps…"
|
|
146
|
+
value={search}
|
|
147
|
+
onChange={(e) => setSearch(e.target.value)}
|
|
148
|
+
autoComplete="off"
|
|
149
|
+
/>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
{isLoading && <p className="app-menu-loading">Loading…</p>}
|
|
153
|
+
|
|
154
|
+
{!isLoading && groups.length === 0 && <p className="app-menu-empty">No apps found.</p>}
|
|
155
|
+
|
|
156
|
+
<div className="app-menu-groups">
|
|
157
|
+
{groups.map(([group, items]) => (
|
|
158
|
+
<section key={group} className="app-menu-group">
|
|
159
|
+
{group && <h2 className="app-menu-group-title">{group}</h2>}
|
|
160
|
+
<ul className="app-menu-list">
|
|
161
|
+
{items.map((article) => {
|
|
162
|
+
let href = `/${stripVersionSuffix(article.ArticleId)}`;
|
|
163
|
+
return (
|
|
164
|
+
<li key={article.ArticleId} className="app-menu-item">
|
|
165
|
+
<a href={href} className="app-menu-link" onClick={closeDialog}>
|
|
166
|
+
{article.Title ?? article.ArticleId}
|
|
167
|
+
</a>
|
|
168
|
+
</li>
|
|
169
|
+
);
|
|
170
|
+
})}
|
|
171
|
+
</ul>
|
|
172
|
+
</section>
|
|
173
|
+
))}
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</dialog>
|
|
177
|
+
</>
|
|
178
|
+
);
|
|
179
|
+
}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { StyledEngineProvider, ThemeProvider } from "@mui/material";
|
|
2
|
+
import { createTheme as muiCreateTheme } from "@mui/material/styles";
|
|
3
|
+
import { AppErrorBoundary } from "@olenbetong/appframe-mui";
|
|
4
|
+
import { generateApiDataObject, SortOrder } from "@olenbetong/appframe-data";
|
|
5
|
+
import { type ReactNode, useEffect, useState } from "react";
|
|
6
|
+
import { createPortal } from "react-dom";
|
|
7
|
+
|
|
8
|
+
import { AppMenu, type AppMenuArticle } from "../AppMenu/index.js";
|
|
9
|
+
|
|
10
|
+
// Created once — shared across all AppShell instances on a page.
|
|
11
|
+
const dsMenuArticles = generateApiDataObject<AppMenuArticle>({
|
|
12
|
+
resource: "aviw_WebShared_Articles",
|
|
13
|
+
id: "dsMenuArticles",
|
|
14
|
+
allowUpdate: false,
|
|
15
|
+
allowInsert: false,
|
|
16
|
+
allowDelete: false,
|
|
17
|
+
dynamicLoading: false,
|
|
18
|
+
fields: [
|
|
19
|
+
{ name: "ArticleId", type: "string", nullable: false },
|
|
20
|
+
{ name: "Title", type: "string", nullable: true },
|
|
21
|
+
{ name: "MenuGroup", type: "string", nullable: true },
|
|
22
|
+
{ name: "Path", type: "string", nullable: true },
|
|
23
|
+
],
|
|
24
|
+
parameters: {
|
|
25
|
+
maxRecords: -1,
|
|
26
|
+
whereClause:
|
|
27
|
+
"ListOnFrontPage = 1 AND SysApp = 0 AND HideFromNav = 0 AND (IsPublishedVersion IS NULL OR IsPublishedVersion = 1) AND ISNULL(ParentArticleId, '') <> 'news'",
|
|
28
|
+
sortOrder: [{ MenuGroup: SortOrder.Asc }, { Title: SortOrder.Asc }],
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
function buildMuiTheme() {
|
|
33
|
+
const s = getComputedStyle(document.body);
|
|
34
|
+
const get = (v: string) => s.getPropertyValue(v).trim();
|
|
35
|
+
|
|
36
|
+
return muiCreateTheme({
|
|
37
|
+
palette: {
|
|
38
|
+
primary: {
|
|
39
|
+
main: get("--ds-color-brand-base-default") || "#116069",
|
|
40
|
+
dark: get("--ds-color-brand-base-hover") || "#0d4b52",
|
|
41
|
+
contrastText: get("--ds-color-brand-base-contrast-default") || "#ffffff",
|
|
42
|
+
},
|
|
43
|
+
secondary: {
|
|
44
|
+
main: get("--ds-color-brand-light-base-default") || "#1a95a2",
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
typography: {
|
|
48
|
+
fontFamily: [
|
|
49
|
+
"-apple-system",
|
|
50
|
+
"BlinkMacSystemFont",
|
|
51
|
+
'"Segoe UI"',
|
|
52
|
+
"Roboto",
|
|
53
|
+
'"Helvetica Neue"',
|
|
54
|
+
"Arial",
|
|
55
|
+
"sans-serif",
|
|
56
|
+
'"Apple Color Emoji"',
|
|
57
|
+
'"Segoe UI Emoji"',
|
|
58
|
+
'"Segoe UI Symbol"',
|
|
59
|
+
].join(","),
|
|
60
|
+
},
|
|
61
|
+
components: {
|
|
62
|
+
MuiTypography: {
|
|
63
|
+
styleOverrides: {
|
|
64
|
+
h1: { fontSize: "2.488rem" },
|
|
65
|
+
h2: { fontSize: "2.074rem" },
|
|
66
|
+
h3: { fontSize: "1.728rem" },
|
|
67
|
+
h4: { fontSize: "1.44rem" },
|
|
68
|
+
h5: { fontSize: "1.2rem" },
|
|
69
|
+
h6: { fontSize: "1rem" },
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
MuiAppBar: {
|
|
73
|
+
styleOverrides: {
|
|
74
|
+
root: {
|
|
75
|
+
"& .MuiTypography-h1": {
|
|
76
|
+
fontSize: "1.25rem",
|
|
77
|
+
fontWeight: "500",
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
MuiButton: {
|
|
83
|
+
styleOverrides: {
|
|
84
|
+
root: { borderRadius: 2 },
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
MuiDialogTitle: {
|
|
88
|
+
styleOverrides: {
|
|
89
|
+
root: {
|
|
90
|
+
fontSize: "1.2rem",
|
|
91
|
+
fontWeight: 500,
|
|
92
|
+
paddingLeft: 16,
|
|
93
|
+
paddingRight: 16,
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
MuiFormLabel: {
|
|
98
|
+
styleOverrides: {
|
|
99
|
+
root: { color: "rgba(0, 0, 0, 0.72)" },
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
MuiTextField: { defaultProps: { variant: "filled" } },
|
|
103
|
+
MuiSelect: { defaultProps: { variant: "filled" } },
|
|
104
|
+
MuiFormControl: { defaultProps: { variant: "filled" } },
|
|
105
|
+
},
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
export type AppShellProps = {
|
|
110
|
+
children: ReactNode;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
export function AppShell({ children }: AppShellProps) {
|
|
114
|
+
const [theme, setTheme] = useState(() => buildMuiTheme());
|
|
115
|
+
|
|
116
|
+
// Re-read tokens after mount so CSS variables are fully resolved.
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
setTheme(buildMuiTheme());
|
|
119
|
+
}, []);
|
|
120
|
+
|
|
121
|
+
const appMenuSlot = document.getElementById("ob-toolbar-app-menu");
|
|
122
|
+
|
|
123
|
+
return (
|
|
124
|
+
<StyledEngineProvider injectFirst>
|
|
125
|
+
<ThemeProvider theme={theme}>
|
|
126
|
+
<AppErrorBoundary>
|
|
127
|
+
{appMenuSlot && createPortal(<AppMenu dataObject={dsMenuArticles} />, appMenuSlot)}
|
|
128
|
+
{children}
|
|
129
|
+
</AppErrorBoundary>
|
|
130
|
+
</ThemeProvider>
|
|
131
|
+
</StyledEngineProvider>
|
|
132
|
+
);
|
|
133
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { AppMenu, type AppMenuArticle, type AppMenuProps } from "./components/AppMenu/index.js";
|
|
2
|
+
export { AppShell, type AppShellProps } from "./components/AppShell/index.js";
|
|
1
3
|
export { Checkbox, type CheckboxProps } from "./components/Checkbox/index.js";
|
|
2
4
|
export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
|
|
3
5
|
export { DateNavigator } from "./components/DateNavigator/index.js";
|