@xyo-network/react-webapp 7.4.2 → 7.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/dist/browser/components/Chrome.stories.d.ts +3 -3
- package/dist/browser/components/Chrome.stories.d.ts.map +1 -1
- package/dist/browser/components/NotFoundPage/Page.stories.d.ts +1 -1
- package/dist/browser/components/NotFoundPage/Page.stories.d.ts.map +1 -1
- package/dist/browser/index.mjs +112 -129
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +31 -29
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { Meta } from '@storybook/react-vite';
|
|
2
2
|
import { XyoWebAppChrome } from './Chrome.tsx';
|
|
3
3
|
declare const StorybookEntry: Meta<typeof XyoWebAppChrome>;
|
|
4
|
-
declare const Default: import("
|
|
5
|
-
declare const DefaultSideBar: import("
|
|
6
|
-
declare const WithFixedSizePage: import("
|
|
4
|
+
declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chrome.tsx").XyoWebAppChromeProps>;
|
|
5
|
+
declare const DefaultSideBar: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chrome.tsx").XyoWebAppChromeProps>;
|
|
6
|
+
declare const WithFixedSizePage: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chrome.tsx").XyoWebAppChromeProps>;
|
|
7
7
|
export { Default, DefaultSideBar, WithFixedSizePage, };
|
|
8
8
|
export default StorybookEntry;
|
|
9
9
|
//# sourceMappingURL=Chrome.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chrome.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chrome.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAO1D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAI9C,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,eAAe,CAAC,CAAA;AAwCjC,QAAA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Chrome.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chrome.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAO1D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAI9C,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,eAAe,CAAC,CAAA;AAwCjC,QAAA,MAAM,OAAO,0IAAoB,CAAA;AAGjC,QAAA,MAAM,cAAc,0IAAoB,CAAA;AAGxC,QAAA,MAAM,iBAAiB,0IAAoB,CAAA;AAG3C,OAAO,EACL,OAAO,EAAE,cAAc,EAAE,iBAAiB,GAC3C,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Meta } from '@storybook/react-vite';
|
|
2
2
|
import { NotFound } from '@xyo-network/react-shared';
|
|
3
3
|
declare const StorybookEntry: Meta<typeof NotFound>;
|
|
4
|
-
declare const Default: import("
|
|
4
|
+
declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@xylabs/react-flexbox").BusyBoxProps>;
|
|
5
5
|
export { Default };
|
|
6
6
|
export default StorybookEntry;
|
|
7
7
|
//# sourceMappingURL=Page.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/NotFoundPage/Page.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AAGpD,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAA;AAM1B,QAAA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/NotFoundPage/Page.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AAGpD,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAA;AAM1B,QAAA,MAAM,OAAO,2IAAoB,CAAA;AAGjC,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB,eAAe,cAAc,CAAA"}
|
package/dist/browser/index.mjs
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
|
|
1
4
|
// src/components/Body.tsx
|
|
2
5
|
import { styled } from "@mui/material";
|
|
3
6
|
import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
|
|
7
|
+
import React from "react";
|
|
4
8
|
|
|
5
9
|
// src/components/lib/cssValues.ts
|
|
6
10
|
var scrollableWrap = {
|
|
@@ -11,24 +15,29 @@ var fixedWrap = {
|
|
|
11
15
|
inset: "unset",
|
|
12
16
|
position: "relative"
|
|
13
17
|
};
|
|
14
|
-
var scrollableContent = {
|
|
15
|
-
|
|
18
|
+
var scrollableContent = {
|
|
19
|
+
...fixedWrap
|
|
20
|
+
};
|
|
21
|
+
var fixedContent = {
|
|
22
|
+
...scrollableWrap
|
|
23
|
+
};
|
|
16
24
|
|
|
17
25
|
// src/components/Body.tsx
|
|
18
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
19
26
|
var WebAppBodyName = "WebAppBody";
|
|
20
|
-
var propsNotForwarded = /* @__PURE__ */ new Set([
|
|
21
|
-
|
|
27
|
+
var propsNotForwarded = /* @__PURE__ */ new Set([
|
|
28
|
+
"mobileScrollingBreakpoint",
|
|
29
|
+
"variant",
|
|
30
|
+
"spacing",
|
|
31
|
+
"disableBreadcrumbGutter"
|
|
32
|
+
]);
|
|
33
|
+
var defaultStyledOptions = {
|
|
34
|
+
shouldForwardProp: /* @__PURE__ */ __name((prop) => !propsNotForwarded.has(prop), "shouldForwardProp")
|
|
35
|
+
};
|
|
22
36
|
var WebAppBodyRoot = styled(FlexGrowCol, {
|
|
23
37
|
...defaultStyledOptions,
|
|
24
38
|
name: WebAppBodyName,
|
|
25
39
|
slot: "Root"
|
|
26
|
-
})(({
|
|
27
|
-
spacing,
|
|
28
|
-
theme,
|
|
29
|
-
mobileScrollingBreakpoint = "sm",
|
|
30
|
-
variant
|
|
31
|
-
}) => {
|
|
40
|
+
})(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
32
41
|
const scrollable = variant === "scrollable";
|
|
33
42
|
return theme.unstable_sx({
|
|
34
43
|
alignItems: "stretch",
|
|
@@ -37,34 +46,30 @@ var WebAppBodyRoot = styled(FlexGrowCol, {
|
|
|
37
46
|
overflowX: "visible",
|
|
38
47
|
overflowY: scrollable ? "scroll" : "hidden",
|
|
39
48
|
paddingY: spacing,
|
|
40
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
49
|
+
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
50
|
+
overflowY: "scroll"
|
|
51
|
+
}
|
|
41
52
|
});
|
|
42
53
|
});
|
|
43
54
|
var WebAppBodyBreadcrumb = styled(FlexRow, {
|
|
44
55
|
...defaultStyledOptions,
|
|
45
56
|
name: WebAppBodyName,
|
|
46
57
|
slot: "Breadcrumb"
|
|
47
|
-
})(({
|
|
48
|
-
theme,
|
|
49
|
-
disableBreadcrumbGutter,
|
|
50
|
-
spacing
|
|
51
|
-
}) => theme.unstable_sx({
|
|
58
|
+
})(({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
|
|
52
59
|
justifyContent: "start",
|
|
53
60
|
marginX: disableBreadcrumbGutter ? 0 : spacing
|
|
54
61
|
}));
|
|
55
62
|
var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
|
|
56
63
|
name: WebAppBodyName,
|
|
57
64
|
slot: "ScrollableWrapper"
|
|
58
|
-
})(() => ({
|
|
65
|
+
})(() => ({
|
|
66
|
+
alignItems: "stretch"
|
|
67
|
+
}));
|
|
59
68
|
var WebAppBodyScrollable = styled(FlexGrowCol, {
|
|
60
69
|
...defaultStyledOptions,
|
|
61
70
|
name: WebAppBodyName,
|
|
62
71
|
slot: "Scrollable"
|
|
63
|
-
})(({
|
|
64
|
-
theme,
|
|
65
|
-
mobileScrollingBreakpoint = "sm",
|
|
66
|
-
variant
|
|
67
|
-
}) => {
|
|
72
|
+
})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
68
73
|
const props = variant === "scrollable" ? scrollableContent : fixedContent;
|
|
69
74
|
return {
|
|
70
75
|
...props,
|
|
@@ -76,68 +81,57 @@ var WebAppBodyScrollable = styled(FlexGrowCol, {
|
|
|
76
81
|
}
|
|
77
82
|
};
|
|
78
83
|
});
|
|
79
|
-
var WebAppBody = ({
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
};
|
|
84
|
+
var WebAppBody = /* @__PURE__ */ __name(({ children, breadcrumbs, disableBreadcrumbGutter, mobileScrollingBreakpoint, spacing = 1, variant, ...props }) => {
|
|
85
|
+
return /* @__PURE__ */ React.createElement(WebAppBodyRoot, {
|
|
86
|
+
mobileScrollingBreakpoint,
|
|
87
|
+
spacing,
|
|
88
|
+
variant,
|
|
89
|
+
...props
|
|
90
|
+
}, breadcrumbs ? /* @__PURE__ */ React.createElement(WebAppBodyBreadcrumb, {
|
|
91
|
+
disableBreadcrumbGutter,
|
|
92
|
+
spacing
|
|
93
|
+
}, breadcrumbs) : null, /* @__PURE__ */ React.createElement(WebAppBodyScrollableWrapper, null, /* @__PURE__ */ React.createElement(WebAppBodyScrollable, {
|
|
94
|
+
mobileScrollingBreakpoint,
|
|
95
|
+
variant
|
|
96
|
+
}, children)));
|
|
97
|
+
}, "WebAppBody");
|
|
93
98
|
|
|
94
99
|
// src/components/Chrome.tsx
|
|
95
100
|
import { WebAppChrome } from "@xylabs/react-webapp";
|
|
96
101
|
import { XyoApplicationAppBar } from "@xyo-network/react-appbar";
|
|
97
102
|
import { Footer } from "@xyo-network/react-footer";
|
|
98
|
-
import
|
|
99
|
-
var XyoWebAppChrome = ({
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
appbar: appbar ?? /* @__PURE__ */ jsx2(XyoApplicationAppBar, {}),
|
|
112
|
-
footerElevation,
|
|
113
|
-
navigationType,
|
|
114
|
-
footer: footer ?? /* @__PURE__ */ jsx2(Footer, { dynamicHeight: true }),
|
|
115
|
-
...props
|
|
116
|
-
}
|
|
117
|
-
);
|
|
118
|
-
};
|
|
103
|
+
import React2 from "react";
|
|
104
|
+
var XyoWebAppChrome = /* @__PURE__ */ __name(({ ref, appbar, footer, footerElevation = 4, navigationType = "menu", ...props }) => {
|
|
105
|
+
return /* @__PURE__ */ React2.createElement(WebAppChrome, {
|
|
106
|
+
ref,
|
|
107
|
+
appbar: appbar ?? /* @__PURE__ */ React2.createElement(XyoApplicationAppBar, null),
|
|
108
|
+
footerElevation,
|
|
109
|
+
navigationType,
|
|
110
|
+
footer: footer ?? /* @__PURE__ */ React2.createElement(Footer, {
|
|
111
|
+
dynamicHeight: true
|
|
112
|
+
}),
|
|
113
|
+
...props
|
|
114
|
+
});
|
|
115
|
+
}, "XyoWebAppChrome");
|
|
119
116
|
XyoWebAppChrome.displayName = "XyoWebAppChrome";
|
|
120
117
|
|
|
121
118
|
// src/components/ErrorPage.tsx
|
|
122
119
|
import { ButtonEx } from "@xylabs/react-button";
|
|
120
|
+
import React4 from "react";
|
|
123
121
|
|
|
124
122
|
// src/components/Page.tsx
|
|
125
123
|
import { Container, styled as styled2 } from "@mui/material";
|
|
126
124
|
import { useAsyncEffect } from "@xylabs/react-async-effect";
|
|
127
125
|
import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
|
|
128
126
|
import { useUserEvents } from "@xylabs/react-pixel";
|
|
127
|
+
import React3 from "react";
|
|
129
128
|
import { Helmet } from "react-helmet";
|
|
130
129
|
import { useLocation } from "react-router-dom";
|
|
131
|
-
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
132
130
|
var WebAppPageRoot = styled2(FlexGrowCol2, {
|
|
133
131
|
name: "WebAppPage",
|
|
134
|
-
shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
|
|
132
|
+
shouldForwardProp: /* @__PURE__ */ __name((propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant", "shouldForwardProp"),
|
|
135
133
|
slot: "Root"
|
|
136
|
-
})(({
|
|
137
|
-
theme,
|
|
138
|
-
mobileScrollingBreakpoint = "sm",
|
|
139
|
-
variant
|
|
140
|
-
}) => {
|
|
134
|
+
})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
141
135
|
const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
|
|
142
136
|
return {
|
|
143
137
|
...props,
|
|
@@ -150,80 +144,69 @@ var WebAppPageRoot = styled2(FlexGrowCol2, {
|
|
|
150
144
|
}
|
|
151
145
|
};
|
|
152
146
|
});
|
|
153
|
-
var WebAppPage = ({
|
|
154
|
-
disableGutters,
|
|
155
|
-
disableBreadcrumbGutter,
|
|
156
|
-
title,
|
|
157
|
-
container,
|
|
158
|
-
children,
|
|
159
|
-
breadcrumbs,
|
|
160
|
-
mobileScrollingBreakpoint,
|
|
161
|
-
variant = "scrollable",
|
|
162
|
-
...props
|
|
163
|
-
}) => {
|
|
147
|
+
var WebAppPage = /* @__PURE__ */ __name(({ disableGutters, disableBreadcrumbGutter, title, container, children, breadcrumbs, mobileScrollingBreakpoint, variant = "scrollable", ...props }) => {
|
|
164
148
|
const userEvents = useUserEvents();
|
|
165
149
|
const { pathname } = useLocation();
|
|
166
|
-
useAsyncEffect(
|
|
167
|
-
|
|
168
|
-
|
|
150
|
+
useAsyncEffect(async () => {
|
|
151
|
+
await userEvents?.viewContent({
|
|
152
|
+
name: title ?? "NodeBasePage",
|
|
153
|
+
path: location.pathname
|
|
154
|
+
});
|
|
155
|
+
}, [
|
|
156
|
+
pathname,
|
|
157
|
+
title,
|
|
158
|
+
userEvents
|
|
159
|
+
]);
|
|
160
|
+
return /* @__PURE__ */ React3.createElement(WebAppPageRoot, {
|
|
161
|
+
mobileScrollingBreakpoint,
|
|
162
|
+
variant,
|
|
163
|
+
...props
|
|
164
|
+
}, /* @__PURE__ */ React3.createElement(Helmet, {
|
|
165
|
+
title
|
|
166
|
+
}), container && container !== "none" ? /* @__PURE__ */ React3.createElement(Container, {
|
|
167
|
+
disableGutters,
|
|
168
|
+
style: {
|
|
169
|
+
alignItems: "stretch",
|
|
170
|
+
display: "flex",
|
|
171
|
+
flexDirection: "column",
|
|
172
|
+
flexGrow: 1,
|
|
173
|
+
justifyContent: "flex-start"
|
|
169
174
|
},
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
children: /* @__PURE__ */ jsx3(
|
|
187
|
-
WebAppBody,
|
|
188
|
-
{
|
|
189
|
-
disableBreadcrumbGutter,
|
|
190
|
-
breadcrumbs,
|
|
191
|
-
mobileScrollingBreakpoint,
|
|
192
|
-
variant,
|
|
193
|
-
...props,
|
|
194
|
-
children
|
|
195
|
-
}
|
|
196
|
-
)
|
|
197
|
-
}
|
|
198
|
-
) : /* @__PURE__ */ jsx3(
|
|
199
|
-
WebAppBody,
|
|
200
|
-
{
|
|
201
|
-
disableBreadcrumbGutter,
|
|
202
|
-
breadcrumbs,
|
|
203
|
-
mobileScrollingBreakpoint,
|
|
204
|
-
paddingX: disableGutters ? 0 : 1,
|
|
205
|
-
variant,
|
|
206
|
-
...props,
|
|
207
|
-
children
|
|
208
|
-
}
|
|
209
|
-
)
|
|
210
|
-
] });
|
|
211
|
-
};
|
|
175
|
+
maxWidth: container
|
|
176
|
+
}, /* @__PURE__ */ React3.createElement(WebAppBody, {
|
|
177
|
+
disableBreadcrumbGutter,
|
|
178
|
+
breadcrumbs,
|
|
179
|
+
mobileScrollingBreakpoint,
|
|
180
|
+
variant,
|
|
181
|
+
...props
|
|
182
|
+
}, children)) : /* @__PURE__ */ React3.createElement(WebAppBody, {
|
|
183
|
+
disableBreadcrumbGutter,
|
|
184
|
+
breadcrumbs,
|
|
185
|
+
mobileScrollingBreakpoint,
|
|
186
|
+
paddingX: disableGutters ? 0 : 1,
|
|
187
|
+
variant,
|
|
188
|
+
...props
|
|
189
|
+
}, children));
|
|
190
|
+
}, "WebAppPage");
|
|
212
191
|
var FlexPage = WebAppPage;
|
|
213
192
|
|
|
214
193
|
// src/components/ErrorPage.tsx
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
194
|
+
var WebAppErrorPage = /* @__PURE__ */ __name(({ error, ...props }) => /* @__PURE__ */ React4.createElement(WebAppPage, {
|
|
195
|
+
title: "Oops! Something went wrong",
|
|
196
|
+
...props
|
|
197
|
+
}, /* @__PURE__ */ React4.createElement("h1", null, "Oops! Something went wrong!"), /* @__PURE__ */ React4.createElement("p", null, `${error}`), /* @__PURE__ */ React4.createElement(ButtonEx, {
|
|
198
|
+
href: "/",
|
|
199
|
+
variant: "contained"
|
|
200
|
+
}, "Homepage")), "WebAppErrorPage");
|
|
221
201
|
var ErrorPage = WebAppErrorPage;
|
|
222
202
|
|
|
223
203
|
// src/components/NotFoundPage/Page.tsx
|
|
224
204
|
import { NotFound } from "@xyo-network/react-shared";
|
|
225
|
-
import
|
|
226
|
-
var WebAppNotFoundPage =
|
|
205
|
+
import React5 from "react";
|
|
206
|
+
var WebAppNotFoundPage = /* @__PURE__ */ __name(({ title, ...props }) => /* @__PURE__ */ React5.createElement(WebAppPage, {
|
|
207
|
+
title: title ?? "Sorry! Page Not Found",
|
|
208
|
+
...props
|
|
209
|
+
}, /* @__PURE__ */ React5.createElement(NotFound, null)), "WebAppNotFoundPage");
|
|
227
210
|
var NotFoundPage = WebAppNotFoundPage;
|
|
228
211
|
export {
|
|
229
212
|
ErrorPage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import type { Breakpoint } from '@mui/material'\nimport { styled } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { fixedContent, scrollableContent } from './lib/index.ts'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({\n spacing, theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n const scrollable = variant === 'scrollable'\n return theme.unstable_sx({\n alignItems: 'stretch',\n gap: 1,\n justifyContent: 'flex-start',\n overflowX: 'visible',\n overflowY: scrollable ? 'scroll' : 'hidden',\n paddingY: spacing,\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: 'scroll' },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({\n theme, disableBreadcrumbGutter, spacing,\n}) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }))\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({\n theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n const props = variant === 'scrollable' ? scrollableContent : fixedContent\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 'unset',\n position: 'relative',\n },\n }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n breadcrumbs?: ReactNode\n disableBreadcrumbGutter?: boolean\n mobileScrollingBreakpoint?: Breakpoint\n spacing?: string | number\n variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n children,\n breadcrumbs,\n disableBreadcrumbGutter,\n mobileScrollingBreakpoint,\n spacing = 1,\n variant,\n ...props\n}) => {\n return (\n <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n {breadcrumbs\n ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n )\n : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import type { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n inset: 0,\n position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n inset: 'unset',\n position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = { ...fixedWrap } as const\n\nexport const fixedContent: CSSProperties = { ...scrollableWrap } as const\n","import { WebAppChrome, type WebAppChromeProps } from '@xylabs/react-webapp'\nimport { XyoApplicationAppBar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport React from 'react'\n\nexport interface XyoWebAppChromeProps extends WebAppChromeProps {}\n\nexport const XyoWebAppChrome = ({\n ref, appbar, footer, footerElevation = 4, navigationType = 'menu', ...props\n}: XyoWebAppChromeProps) => {\n return (\n <WebAppChrome\n ref={ref}\n appbar={appbar ?? <XyoApplicationAppBar />}\n footerElevation={footerElevation}\n navigationType={navigationType}\n footer={footer ?? <Footer dynamicHeight />}\n {...props}\n />\n )\n}\n\nXyoWebAppChrome.displayName = 'XyoWebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\nimport React from 'react'\n\nimport type { WebAppPageProps } from './Page.tsx'\nimport { WebAppPage } from './Page.tsx'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n <h1>Oops! Something went wrong!</h1>\n <p>{`${error}`}</p>\n <ButtonEx href=\"/\" variant=\"contained\">\n Homepage\n </ButtonEx>\n </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport type { WebAppBodyProps } from './Body.tsx'\nimport { WebAppBody } from './Body.tsx'\nimport { fixedWrap, scrollableWrap } from './lib/index.ts'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({\n theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n maxWidth: '100vw',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 0,\n position: 'absolute',\n },\n }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n container?: ContainerProps['maxWidth'] | 'none'\n disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>> = ({\n disableGutters,\n disableBreadcrumbGutter,\n title,\n container,\n children,\n breadcrumbs,\n mobileScrollingBreakpoint,\n variant = 'scrollable',\n ...props\n}) => {\n const userEvents = useUserEvents()\n const { pathname } = useLocation()\n\n useAsyncEffect(\n async () => {\n await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n },\n [pathname, title, userEvents],\n )\n\n return (\n <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n <Helmet title={title} />\n {container && container !== 'none'\n ? (\n <Container\n disableGutters={disableGutters}\n style={{\n alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',\n }}\n maxWidth={container}\n >\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n </Container>\n )\n : (\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n paddingX={disableGutters ? 0 : 1}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n )}\n </WebAppPageRoot>\n )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport type { WebAppPageProps } from '../Page.tsx'\nimport { WebAppPage } from '../Page.tsx'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n <NotFound />\n </WebAppPage>\n)\n\n/** @deprecated use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":";AACA,SAAS,cAAc;AAEvB,SAAS,aAAa,eAAe;;;ACD9B,IAAM,iBAAgC;AAAA,EAC3C,OAAO;AAAA,EACP,UAAU;AACZ;AAEO,IAAM,YAA2B;AAAA,EACtC,OAAO;AAAA,EACP,UAAU;AACZ;AAGO,IAAM,oBAAmC,EAAE,GAAG,UAAU;AAExD,IAAM,eAA8B,EAAE,GAAG,eAAe;;;ADuE3D,SAGQ,KAHR;AA7EJ,IAAM,iBAAiB;AACvB,IAAM,oBAAoB,oBAAI,IAAI,CAAC,6BAA6B,WAAW,WAAW,yBAAyB,CAAC;AAChH,IAAM,uBAAuB,EAAE,mBAAmB,CAAC,SAAiB,CAAC,kBAAkB,IAAI,IAAI,EAAE;AAEjG,IAAM,iBAAiB,OAAO,aAAa;AAAA,EACzC,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,CAAC;AAAA,EACnB;AAAA,EAAS;AAAA,EAAO,4BAA4B;AAAA,EAAM;AACpD,MAAM;AACJ,QAAM,aAAa,YAAY;AAC/B,SAAO,MAAM,YAAY;AAAA,IACvB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,WAAW,aAAa,WAAW;AAAA,IACnC,UAAU;AAAA,IACV,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG,EAAE,WAAW,SAAS;AAAA,EAC7E,CAAC;AACH,CAAC;AAED,IAAM,uBAAuB,OAAO,SAAS;AAAA,EAC3C,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,CAAC;AAAA,EACnB;AAAA,EAAO;AAAA,EAAyB;AAClC,MACE,MAAM,YAAY;AAAA,EAChB,gBAAgB;AAAA,EAChB,SAAS,0BAA0B,IAAI;AACzC,CAAC,CAAC;AAEJ,IAAM,8BAA8B,OAAO,aAAa;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,OAAO,EAAE,YAAY,UAAU,EAAE;AAErD,IAAM,uBAAuB,OAAO,aAAa;AAAA,EAC/C,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,CAAC;AAAA,EACnB;AAAA,EAAO,4BAA4B;AAAA,EAAM;AAC3C,MAAM;AACJ,QAAM,QAAQ,YAAY,eAAe,oBAAoB;AAC7D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG;AAAA,MACnD,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;AAUM,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,kBAAe,2BAAsD,SAAkB,SAAmB,GAAG,OAC3G;AAAA,kBAEK,oBAAC,wBAAqB,yBAAkD,SACrE,uBACH,IAEF;AAAA,IACJ,oBAAC,+BACC,8BAAC,wBAAqB,2BAAsD,SACzE,UACH,GACF;AAAA,KACF;AAEJ;;;AErGA,SAAS,oBAA4C;AACrD,SAAS,4BAA4B;AACrC,SAAS,cAAc;AAWC,gBAAAA,YAAA;AANjB,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EAAK;AAAA,EAAQ;AAAA,EAAQ,kBAAkB;AAAA,EAAG,iBAAiB;AAAA,EAAQ,GAAG;AACxE,MAA4B;AAC1B,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,UAAU,gBAAAA,KAAC,wBAAqB;AAAA,MACxC;AAAA,MACA;AAAA,MACA,QAAQ,UAAU,gBAAAA,KAAC,UAAO,eAAa,MAAC;AAAA,MACvC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,gBAAgB,cAAc;;;ACtB9B,SAAS,gBAAgB;;;ACCzB,SAAS,WAAW,UAAAC,eAAc;AAClC,SAAS,sBAAsB;AAE/B,SAAS,eAAAC,oBAAmB;AAC5B,SAAS,qBAAqB;AAG9B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAqDxB,SACE,OAAAC,MADF,QAAAC,aAAA;AA/CJ,IAAM,iBAAiBC,QAAOC,cAAa;AAAA,EACzC,MAAM;AAAA,EACN,mBAAmB,cAAY,aAAa,+BAA+B,aAAa;AAAA,EACxF,MAAM;AACR,CAAC,EAAmB,CAAC;AAAA,EACnB;AAAA,EAAO,4BAA4B;AAAA,EAAM;AAC3C,MAAM;AACJ,QAAM,QAAQ,YAAY,eAAe,iBAAiB;AAC1D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG;AAAA,MACnD,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;AAOM,IAAM,aAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,SAAS,IAAI,YAAY;AAEjC;AAAA,IACE,YAAY;AACV,YAAM,YAAY,YAAY,EAAE,MAAM,SAAS,gBAAgB,MAAM,SAAS,SAAS,CAAC;AAAA,IAC1F;AAAA,IACA,CAAC,UAAU,OAAO,UAAU;AAAA,EAC9B;AAEA,SACE,gBAAAF,MAAC,kBAAe,2BAAsD,SAAmB,GAAG,OAC1F;AAAA,oBAAAD,KAAC,UAAO,OAAc;AAAA,IACrB,aAAa,cAAc,SAEtB,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,UAAW,SAAS;AAAA,UAAQ,eAAe;AAAA,UAAU,UAAU;AAAA,UAAG,gBAAgB;AAAA,QAChG;AAAA,QACA,UAAU;AAAA,QAEV,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF,IAGA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,iBAAiB,IAAI;AAAA,QAC/B;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,KAER;AAEJ;AAGO,IAAM,WAAW;;;AD1FtB,SACE,OAAAI,MADF,QAAAC,aAAA;AADK,IAAM,kBAAkD,CAAC,EAAE,OAAO,GAAG,MAAM,MAChF,gBAAAA,MAAC,cAAW,OAAM,8BAA8B,GAAG,OACjD;AAAA,kBAAAD,KAAC,QAAG,yCAA2B;AAAA,EAC/B,gBAAAA,KAAC,OAAG,aAAG,KAAK,IAAG;AAAA,EACf,gBAAAA,KAAC,YAAS,MAAK,KAAI,SAAQ,aAAY,sBAEvC;AAAA,GACF;AAIK,IAAM,YAAY;;;AErBzB,SAAS,gBAAgB;AAQrB,gBAAAE,YAAA;AAFG,IAAM,qBAAgD,CAAC,EAAE,OAAO,GAAG,MAAM,MAC9E,gBAAAA,KAAC,cAAW,OAAO,SAAS,yBAA0B,GAAG,OACvD,0BAAAA,KAAC,YAAS,GACZ;AAIK,IAAM,eAAe;","names":["jsx","styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import type { Breakpoint } from '@mui/material'\nimport { styled } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { fixedContent, scrollableContent } from './lib/index.ts'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({\n spacing, theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n const scrollable = variant === 'scrollable'\n return theme.unstable_sx({\n alignItems: 'stretch',\n gap: 1,\n justifyContent: 'flex-start',\n overflowX: 'visible',\n overflowY: scrollable ? 'scroll' : 'hidden',\n paddingY: spacing,\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: 'scroll' },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({\n theme, disableBreadcrumbGutter, spacing,\n}) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }))\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({\n theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n const props = variant === 'scrollable' ? scrollableContent : fixedContent\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 'unset',\n position: 'relative',\n },\n }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n breadcrumbs?: ReactNode\n disableBreadcrumbGutter?: boolean\n mobileScrollingBreakpoint?: Breakpoint\n spacing?: string | number\n variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n children,\n breadcrumbs,\n disableBreadcrumbGutter,\n mobileScrollingBreakpoint,\n spacing = 1,\n variant,\n ...props\n}) => {\n return (\n <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n {breadcrumbs\n ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n )\n : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import type { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n inset: 0,\n position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n inset: 'unset',\n position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = { ...fixedWrap } as const\n\nexport const fixedContent: CSSProperties = { ...scrollableWrap } as const\n","import { WebAppChrome, type WebAppChromeProps } from '@xylabs/react-webapp'\nimport { XyoApplicationAppBar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport React from 'react'\n\nexport interface XyoWebAppChromeProps extends WebAppChromeProps {}\n\nexport const XyoWebAppChrome = ({\n ref, appbar, footer, footerElevation = 4, navigationType = 'menu', ...props\n}: XyoWebAppChromeProps) => {\n return (\n <WebAppChrome\n ref={ref}\n appbar={appbar ?? <XyoApplicationAppBar />}\n footerElevation={footerElevation}\n navigationType={navigationType}\n footer={footer ?? <Footer dynamicHeight />}\n {...props}\n />\n )\n}\n\nXyoWebAppChrome.displayName = 'XyoWebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\nimport React from 'react'\n\nimport type { WebAppPageProps } from './Page.tsx'\nimport { WebAppPage } from './Page.tsx'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n <h1>Oops! Something went wrong!</h1>\n <p>{`${error}`}</p>\n <ButtonEx href=\"/\" variant=\"contained\">\n Homepage\n </ButtonEx>\n </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport type { WebAppBodyProps } from './Body.tsx'\nimport { WebAppBody } from './Body.tsx'\nimport { fixedWrap, scrollableWrap } from './lib/index.ts'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({\n theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\n const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n maxWidth: '100vw',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 0,\n position: 'absolute',\n },\n }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n container?: ContainerProps['maxWidth'] | 'none'\n disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>> = ({\n disableGutters,\n disableBreadcrumbGutter,\n title,\n container,\n children,\n breadcrumbs,\n mobileScrollingBreakpoint,\n variant = 'scrollable',\n ...props\n}) => {\n const userEvents = useUserEvents()\n const { pathname } = useLocation()\n\n useAsyncEffect(\n async () => {\n await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n },\n [pathname, title, userEvents],\n )\n\n return (\n <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n <Helmet title={title} />\n {container && container !== 'none'\n ? (\n <Container\n disableGutters={disableGutters}\n style={{\n alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',\n }}\n maxWidth={container}\n >\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n </Container>\n )\n : (\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n paddingX={disableGutters ? 0 : 1}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n )}\n </WebAppPageRoot>\n )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport type { WebAppPageProps } from '../Page.tsx'\nimport { WebAppPage } from '../Page.tsx'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n <NotFound />\n </WebAppPage>\n)\n\n/** @deprecated use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":";;;;AACA,SAASA,cAAc;AAEvB,SAASC,aAAaC,eAAe;AAErC,OAAOC,WAAW;;;ACHX,IAAMC,iBAAgC;EAC3CC,OAAO;EACPC,UAAU;AACZ;AAEO,IAAMC,YAA2B;EACtCF,OAAO;EACPC,UAAU;AACZ;AAGO,IAAME,oBAAmC;EAAE,GAAGD;AAAU;AAExD,IAAME,eAA8B;EAAE,GAAGL;AAAe;;;ADN/D,IAAMM,iBAAiB;AACvB,IAAMC,oBAAoB,oBAAIC,IAAI;EAAC;EAA6B;EAAW;EAAW;CAA0B;AAChH,IAAMC,uBAAuB;EAAEC,mBAAmB,wBAACC,SAAiB,CAACJ,kBAAkBK,IAAID,IAAAA,GAAzC;AAA+C;AAEjG,IAAME,iBAAiBC,OAAOC,aAAa;EACzC,GAAGN;EACHO,MAAMV;EACNW,MAAM;AACR,CAAA,EAAoB,CAAC,EACnBC,SAASC,OAAOC,4BAA4B,MAAMC,QAAO,MAC1D;AACC,QAAMC,aAAaD,YAAY;AAC/B,SAAOF,MAAMI,YAAY;IACvBC,YAAY;IACZC,KAAK;IACLC,gBAAgB;IAChBC,WAAW;IACXC,WAAWN,aAAa,WAAW;IACnCO,UAAUX;IACV,CAACC,MAAMW,YAAYC,KAAKX,yBAAAA,CAAAA,GAA6B;MAAEQ,WAAW;IAAS;EAC7E,CAAA;AACF,CAAA;AAEA,IAAMI,uBAAuBlB,OAAOmB,SAAS;EAC3C,GAAGxB;EACHO,MAAMV;EACNW,MAAM;AACR,CAAA,EAAoB,CAAC,EACnBE,OAAOe,yBAAyBhB,QAAO,MAEvCC,MAAMI,YAAY;EAChBG,gBAAgB;EAChBS,SAASD,0BAA0B,IAAIhB;AACzC,CAAA,CAAA;AAEF,IAAMkB,8BAA8BtB,OAAOC,aAAa;EACtDC,MAAMV;EACNW,MAAM;AACR,CAAA,EAAoB,OAAO;EAAEO,YAAY;AAAU,EAAA;AAEnD,IAAMa,uBAAuBvB,OAAOC,aAAa;EAC/C,GAAGN;EACHO,MAAMV;EACNW,MAAM;AACR,CAAA,EAAoB,CAAC,EACnBE,OAAOC,4BAA4B,MAAMC,QAAO,MACjD;AACC,QAAMiB,QAAQjB,YAAY,eAAekB,oBAAoBC;AAC7D,SAAO;IACL,GAAGF;IACHd,YAAY;IACZE,gBAAgB;IAChB,CAACP,MAAMW,YAAYC,KAAKX,yBAAAA,CAAAA,GAA6B;MACnDqB,OAAO;MACPC,UAAU;IACZ;EACF;AACF,CAAA;AAUO,IAAMC,aAAwC,wBAAC,EACpDC,UACAC,aACAX,yBACAd,2BACAF,UAAU,GACVG,SACA,GAAGiB,MAAAA,MACJ;AACC,SACE,sBAAA,cAACzB,gBAAAA;IAAeO;IAAsDF;IAAkBG;IAAmB,GAAGiB;KAC3GO,cAEK,sBAAA,cAACb,sBAAAA;IAAqBE;IAAkDhB;KACrE2B,WAAAA,IAGL,MACJ,sBAAA,cAACT,6BAAAA,MACC,sBAAA,cAACC,sBAAAA;IAAqBjB;IAAsDC;KACzEuB,QAAAA,CAAAA,CAAAA;AAKX,GAzBqD;;;AE5ErD,SAASE,oBAA4C;AACrD,SAASC,4BAA4B;AACrC,SAASC,cAAc;AACvB,OAAOC,YAAW;AAIX,IAAMC,kBAAkB,wBAAC,EAC9BC,KAAKC,QAAQC,QAAQC,kBAAkB,GAAGC,iBAAiB,QAAQ,GAAGC,MAAAA,MACjD;AACrB,SACE,gBAAAC,OAAA,cAACC,cAAAA;IACCP;IACAC,QAAQA,UAAU,gBAAAK,OAAA,cAACE,sBAAAA,IAAAA;IACnBL;IACAC;IACAF,QAAQA,UAAU,gBAAAI,OAAA,cAACG,QAAAA;MAAOC,eAAAA;;IACzB,GAAGL;;AAGV,GAb+B;AAe/BN,gBAAgBY,cAAc;;;ACtB9B,SAASC,gBAAgB;AACzB,OAAOC,YAAW;;;ACAlB,SAASC,WAAWC,UAAAA,eAAc;AAClC,SAASC,sBAAsB;AAE/B,SAASC,eAAAA,oBAAmB;AAC5B,SAASC,qBAAqB;AAE9B,OAAOC,YAAW;AAClB,SAASC,cAAc;AACvB,SAASC,mBAAmB;AAM5B,IAAMC,iBAAiBC,QAAOC,cAAa;EACzCC,MAAM;EACNC,mBAAmBC,wBAAAA,aAAYA,aAAa,+BAA+BA,aAAa,WAArEA;EACnBC,MAAM;AACR,CAAA,EAAoB,CAAC,EACnBC,OAAOC,4BAA4B,MAAMC,QAAO,MACjD;AACC,QAAMC,QAAQD,YAAY,eAAeE,iBAAiBC;AAC1D,SAAO;IACL,GAAGF;IACHG,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IACV,CAACR,MAAMS,YAAYC,KAAKT,yBAAAA,CAAAA,GAA6B;MACnDU,OAAO;MACPC,UAAU;IACZ;EACF;AACF,CAAA;AAOO,IAAMC,aAA2D,wBAAC,EACvEC,gBACAC,yBACAC,OACAC,WACAC,UACAC,aACAlB,2BACAC,UAAU,cACV,GAAGC,MAAAA,MACJ;AACC,QAAMiB,aAAaC,cAAAA;AACnB,QAAM,EAAEC,SAAQ,IAAKC,YAAAA;AAErBC,iBACE,YAAA;AACE,UAAMJ,YAAYK,YAAY;MAAE7B,MAAMoB,SAAS;MAAgBU,MAAMC,SAASL;IAAS,CAAA;EACzF,GACA;IAACA;IAAUN;IAAOI;GAAW;AAG/B,SACE,gBAAAQ,OAAA,cAACnC,gBAAAA;IAAeQ;IAAsDC;IAAmB,GAAGC;KAC1F,gBAAAyB,OAAA,cAACC,QAAAA;IAAOb;MACPC,aAAaA,cAAc,SAEtB,gBAAAW,OAAA,cAACE,WAAAA;IACChB;IACAiB,OAAO;MACLzB,YAAY;MAAW0B,SAAS;MAAQC,eAAe;MAAUC,UAAU;MAAG3B,gBAAgB;IAChG;IACAC,UAAUS;KAEV,gBAAAW,OAAA,cAACO,YAAAA;IACCpB;IACAI;IACAlB;IACAC;IACC,GAAGC;KAEHe,QAAAA,CAAAA,IAKL,gBAAAU,OAAA,cAACO,YAAAA;IACCpB;IACAI;IACAlB;IACAmC,UAAUtB,iBAAiB,IAAI;IAC/BZ;IACC,GAAGC;KAEHe,QAAAA,CAAAA;AAKf,GA1DwE;AA6DjE,IAAMmB,WAAWxB;;;AD3FjB,IAAMyB,kBAAkD,wBAAC,EAAEC,OAAO,GAAGC,MAAAA,MAC1E,gBAAAC,OAAA,cAACC,YAAAA;EAAWC,OAAM;EAA8B,GAAGH;GACjD,gBAAAC,OAAA,cAACG,MAAAA,MAAG,6BAAA,GACJ,gBAAAH,OAAA,cAACI,KAAAA,MAAG,GAAGN,KAAAA,EAAO,GACd,gBAAAE,OAAA,cAACK,UAAAA;EAASC,MAAK;EAAIC,SAAQ;GAAY,UAAA,CAAA,GAJoB;AAWxD,IAAMC,YAAYX;;;AErBzB,SAASY,gBAAgB;AACzB,OAAOC,YAAW;AAKX,IAAMC,qBAAgD,wBAAC,EAAEC,OAAO,GAAGC,MAAAA,MACxE,gBAAAC,OAAA,cAACC,YAAAA;EAAWH,OAAOA,SAAS;EAA0B,GAAGC;GACvD,gBAAAC,OAAA,cAACE,UAAAA,IAAAA,CAAAA,GAFwD;AAOtD,IAAMC,eAAeN;","names":["styled","FlexGrowCol","FlexRow","React","scrollableWrap","inset","position","fixedWrap","scrollableContent","fixedContent","WebAppBodyName","propsNotForwarded","Set","defaultStyledOptions","shouldForwardProp","prop","has","WebAppBodyRoot","styled","FlexGrowCol","name","slot","spacing","theme","mobileScrollingBreakpoint","variant","scrollable","unstable_sx","alignItems","gap","justifyContent","overflowX","overflowY","paddingY","breakpoints","down","WebAppBodyBreadcrumb","FlexRow","disableBreadcrumbGutter","marginX","WebAppBodyScrollableWrapper","WebAppBodyScrollable","props","scrollableContent","fixedContent","inset","position","WebAppBody","children","breadcrumbs","WebAppChrome","XyoApplicationAppBar","Footer","React","XyoWebAppChrome","ref","appbar","footer","footerElevation","navigationType","props","React","WebAppChrome","XyoApplicationAppBar","Footer","dynamicHeight","displayName","ButtonEx","React","Container","styled","useAsyncEffect","FlexGrowCol","useUserEvents","React","Helmet","useLocation","WebAppPageRoot","styled","FlexGrowCol","name","shouldForwardProp","propName","slot","theme","mobileScrollingBreakpoint","variant","props","scrollableWrap","fixedWrap","alignItems","justifyContent","maxWidth","breakpoints","down","inset","position","WebAppPage","disableGutters","disableBreadcrumbGutter","title","container","children","breadcrumbs","userEvents","useUserEvents","pathname","useLocation","useAsyncEffect","viewContent","path","location","React","Helmet","Container","style","display","flexDirection","flexGrow","WebAppBody","paddingX","FlexPage","WebAppErrorPage","error","props","React","WebAppPage","title","h1","p","ButtonEx","href","variant","ErrorPage","NotFound","React","WebAppNotFoundPage","title","props","React","WebAppPage","NotFound","NotFoundPage"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-webapp",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.5.1",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -43,44 +43,46 @@
|
|
|
43
43
|
"src"
|
|
44
44
|
],
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@mui/material": "~7.3.
|
|
47
|
-
"@xylabs/react-async-effect": "~7.1.
|
|
48
|
-
"@xylabs/react-button": "~7.1.
|
|
49
|
-
"@xylabs/react-flexbox": "~7.1.
|
|
50
|
-
"@xylabs/react-pixel": "~7.1.
|
|
51
|
-
"@xylabs/react-webapp": "~7.1.
|
|
52
|
-
"@xyo-network/react-appbar": "
|
|
53
|
-
"@xyo-network/react-footer": "
|
|
54
|
-
"@xyo-network/react-shared": "
|
|
55
|
-
"react": "^19.2.
|
|
46
|
+
"@mui/material": "~7.3.7",
|
|
47
|
+
"@xylabs/react-async-effect": "~7.1.12",
|
|
48
|
+
"@xylabs/react-button": "~7.1.12",
|
|
49
|
+
"@xylabs/react-flexbox": "~7.1.12",
|
|
50
|
+
"@xylabs/react-pixel": "~7.1.12",
|
|
51
|
+
"@xylabs/react-webapp": "~7.1.12",
|
|
52
|
+
"@xyo-network/react-appbar": "7.5.1",
|
|
53
|
+
"@xyo-network/react-footer": "7.5.1",
|
|
54
|
+
"@xyo-network/react-shared": "7.5.1",
|
|
55
|
+
"react": "^19.2.4",
|
|
56
56
|
"react-helmet": "~6.1.0",
|
|
57
|
-
"react-router-dom": "^7.
|
|
57
|
+
"react-router-dom": "^7.13.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@mui/icons-material": "~7.3.
|
|
61
|
-
"@storybook/react-vite": "~10.1
|
|
62
|
-
"@types/react": "^19.2.
|
|
60
|
+
"@mui/icons-material": "~7.3.7",
|
|
61
|
+
"@storybook/react-vite": "~10.2.1",
|
|
62
|
+
"@types/react": "^19.2.10",
|
|
63
63
|
"@types/react-helmet": "~6.1.11",
|
|
64
|
-
"@xylabs/react-appbar": "~7.1.
|
|
65
|
-
"@xylabs/react-button": "~7.1.
|
|
66
|
-
"@xylabs/react-flexbox": "~7.1.
|
|
67
|
-
"@xylabs/react-link": "~7.1.
|
|
68
|
-
"@xylabs/react-pixel": "~7.1.
|
|
69
|
-
"@xylabs/ts-scripts-yarn3": "~7.2
|
|
70
|
-
"@xylabs/tsconfig": "~7.2
|
|
71
|
-
"@xylabs/tsconfig-dom": "~7.2
|
|
72
|
-
"@xylabs/tsconfig-react": "~7.2
|
|
73
|
-
"react-dom": "^19.2.
|
|
74
|
-
"storybook": "~10.1
|
|
64
|
+
"@xylabs/react-appbar": "~7.1.12",
|
|
65
|
+
"@xylabs/react-button": "~7.1.12",
|
|
66
|
+
"@xylabs/react-flexbox": "~7.1.12",
|
|
67
|
+
"@xylabs/react-link": "~7.1.12",
|
|
68
|
+
"@xylabs/react-pixel": "~7.1.12",
|
|
69
|
+
"@xylabs/ts-scripts-yarn3": "~7.3.2",
|
|
70
|
+
"@xylabs/tsconfig": "~7.3.2",
|
|
71
|
+
"@xylabs/tsconfig-dom": "~7.3.2",
|
|
72
|
+
"@xylabs/tsconfig-react": "~7.3.2",
|
|
73
|
+
"react-dom": "^19.2.4",
|
|
74
|
+
"storybook": "~10.2.1",
|
|
75
75
|
"typescript": "^5.9.3",
|
|
76
|
-
"vite": "~7.
|
|
76
|
+
"vite": "~7.3.1",
|
|
77
|
+
"zod": "^4.3.6"
|
|
77
78
|
},
|
|
78
79
|
"peerDependencies": {
|
|
79
80
|
"@mui/icons-material": ">=6 <8",
|
|
80
|
-
"react-dom": "^19"
|
|
81
|
+
"react-dom": "^19",
|
|
82
|
+
"zod": "^4"
|
|
81
83
|
},
|
|
82
84
|
"publishConfig": {
|
|
83
85
|
"access": "public"
|
|
84
86
|
},
|
|
85
87
|
"docs": "dist/docs.json"
|
|
86
|
-
}
|
|
88
|
+
}
|