@xylabs/react-webapp 5.2.8

package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/README.md

@@ -0,0 +1,67 @@
+[![logo][]](https://xylabs.com)
+
+# @xylabs/react-webapp
+
+[![npm-badge][]][npm-link]
+[![npm-downloads-badge][]][npm-link]
+[![jsdelivr-badge][]][jsdelivr-link]
+[![npm-license-badge][]](LICENSE)
+
+> XY Labs generalized React library 
+
+## Table of Contents
+
+-   [Description](#description)
+-   [Install](#install)
+-   [Maintainers](#maintainers)
+-   [License](#license)
+-   [Credits](#credits)
+
+## Description
+
+Common React code that is used throughout XYO projects that use React.
+
+## Install
+
+Using npm:
+
+```sh
+npm i --save @xylabs/react-webapp
+```
+
+Using yarn:
+
+```sh
+yarn add @xylabs/react-webapp
+```
+
+## Documentation
+[Developer Reference](https://xylabs.github.io/sdk-react)
+
+[Storybook](https://xylabs.github.io/sdk-react/storybook)
+
+## Maintainers
+
+-   [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
+-   [Matt Jones](https://github.com/jonesmac)
+-   [Joel Carter](https://github.com/JoelBCarter)
+-   [Jordan Trouw](https://github.com/jordantrouw)
+
+## License
+
+See the [LICENSE](LICENSE) file for license details
+
+## Credits
+
+[Made with 🔥and ❄️ by XY Labs](https://xylabs.com)
+
+[logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg
+
+[npm-badge]: https://img.shields.io/npm/v/@xylabs/react-webapp.svg
+[npm-link]: https://www.npmjs.com/package/@xylabs/react-webapp
+
+[npm-downloads-badge]: https://img.shields.io/npm/dw/@xylabs/react-webapp
+[npm-license-badge]: https://img.shields.io/npm/l/@xylabs/react-webapp
+
+[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xylabs/react-webapp/badge
+[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xylabs/react-webapp

package/dist/browser/components/Body.d.ts

@@ -0,0 +1,13 @@
+import type { Breakpoint } from '@mui/material';
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface WebAppBodyProps extends FlexBoxProps {
+    breadcrumbs?: ReactNode;
+    disableBreadcrumbGutter?: boolean;
+    mobileScrollingBreakpoint?: Breakpoint;
+    spacing?: string | number;
+    variant?: 'scrollable' | 'fixed';
+}
+export declare const WebAppBody: React.FC<WebAppBodyProps>;
+//# sourceMappingURL=Body.d.ts.map

package/dist/browser/components/Body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/components/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AA+DzB,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,yBAAyB,CAAC,EAAE,UAAU,CAAA;IACtC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,CAAA;CACjC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyBhD,CAAA"}

package/dist/browser/components/Chrome.d.ts

@@ -0,0 +1,16 @@
+import type { WebAppNavigationType } from '@xylabs/react-app-settings';
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface WebAppChromeProps extends FlexBoxProps {
+    appName: string;
+    appbar?: ReactNode;
+    errorBoundary?: boolean;
+    errorPage?: ReactNode;
+    footer?: ReactNode;
+    footerElevation?: number;
+    menuItems?: ReactNode;
+    navigationType?: WebAppNavigationType;
+}
+export declare const WebAppChrome: React.ForwardRefExoticComponent<WebAppChromeProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Chrome.d.ts.map

package/dist/browser/components/Chrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chrome.d.ts","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAGtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAIzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,oBAAoB,CAAA;CACtC;AAED,eAAO,MAAM,YAAY,0FAyCxB,CAAA"}

package/dist/browser/components/ErrorPage.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { WebAppPageProps } from './Page.tsx';
+export interface WebAppErrorPageProps extends WebAppPageProps {
+    error?: Error;
+}
+export declare const WebAppErrorPage: React.FC<WebAppErrorPageProps>;
+/** @deprecated use WebAppErrorPage instead */
+export declare const ErrorPage: React.FC<WebAppErrorPageProps>;
+//# sourceMappingURL=ErrorPage.d.ts.map

package/dist/browser/components/ErrorPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAGjD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAQ1D,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,SAAS,gCAAkB,CAAA"}

package/dist/browser/components/NotFoundPage/Page.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { WebAppPageProps } from '../Page.tsx';
+export declare const WebAppNotFoundPage: React.FC<WebAppPageProps>;
+/** @deprecated  use WebAppNotFoundPage instead */
+export declare const NotFoundPage: React.FC<WebAppPageProps>;
+//# sourceMappingURL=Page.d.ts.map

package/dist/browser/components/NotFoundPage/Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../../src/components/NotFoundPage/Page.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAGlD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIxD,CAAA;AAED,kDAAkD;AAClD,eAAO,MAAM,YAAY,2BAAqB,CAAA"}

package/dist/browser/components/NotFoundPage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Page.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/NotFoundPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NotFoundPage/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/browser/components/Page.d.ts

@@ -0,0 +1,13 @@
+import type { ContainerProps } from '@mui/material';
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { WebAppBodyProps } from './Body.tsx';
+export interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {
+    container?: ContainerProps['maxWidth'] | 'none';
+    disableGutters?: boolean;
+}
+export declare const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>>;
+/** @deprecated use WebAppPagePage instead */
+export declare const FlexPage: React.FC<PropsWithChildren<WebAppPageProps>>;
+//# sourceMappingURL=Page.d.ts.map

package/dist/browser/components/Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAGnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAwBjD,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,YAAY;IACpE,SAAS,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,MAAM,CAAA;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA0DnE,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,8CAAa,CAAA"}

package/dist/browser/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Body.tsx';
+export * from './Chrome.tsx';
+export * from './ErrorPage.tsx';
+export * from './NotFoundPage/index.ts';
+export * from './Page.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,YAAY,CAAA"}

package/dist/browser/components/lib/cssValues.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from 'react';
+export declare const scrollableWrap: CSSProperties;
+export declare const fixedWrap: CSSProperties;
+export declare const scrollableContent: CSSProperties;
+export declare const fixedContent: CSSProperties;
+//# sourceMappingURL=cssValues.d.ts.map

package/dist/browser/components/lib/cssValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssValues.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/cssValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,eAAO,MAAM,cAAc,EAAE,aAGnB,CAAA;AAEV,eAAO,MAAM,SAAS,EAAE,aAGd,CAAA;AAGV,eAAO,MAAM,iBAAiB,EAAE,aAAyC,CAAA;AAEzE,eAAO,MAAM,YAAY,EAAE,aAA8C,CAAA"}

package/dist/browser/components/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './cssValues.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/browser/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist/browser/index.mjs

@@ -0,0 +1,255 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/components/Body.tsx
+import { styled } from "@mui/material";
+import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
+import React from "react";
+
+// src/components/lib/cssValues.ts
+var scrollableWrap = {
+  inset: 0,
+  position: "absolute"
+};
+var fixedWrap = {
+  inset: "unset",
+  position: "relative"
+};
+var scrollableContent = {
+  ...fixedWrap
+};
+var fixedContent = {
+  ...scrollableWrap
+};
+
+// src/components/Body.tsx
+var WebAppBodyName = "WebAppBody";
+var propsNotForwarded = /* @__PURE__ */ new Set([
+  "mobileScrollingBreakpoint",
+  "variant",
+  "spacing",
+  "disableBreadcrumbGutter"
+]);
+var defaultStyledOptions = {
+  shouldForwardProp: /* @__PURE__ */ __name((prop) => !propsNotForwarded.has(prop), "shouldForwardProp")
+};
+var WebAppBodyRoot = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Root"
+})(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const scrollable = variant === "scrollable";
+  return theme.unstable_sx({
+    alignItems: "stretch",
+    gap: 1,
+    justifyContent: "flex-start",
+    overflowX: "visible",
+    overflowY: scrollable ? "scroll" : "hidden",
+    paddingY: spacing,
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      overflowY: "scroll"
+    }
+  });
+});
+var WebAppBodyBreadcrumb = styled(FlexRow, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Breadcrumb"
+})(({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
+  justifyContent: "start",
+  marginX: disableBreadcrumbGutter ? 0 : spacing
+}));
+var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: "ScrollableWrapper"
+})(() => ({
+  alignItems: "stretch"
+}));
+var WebAppBodyScrollable = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Scrollable"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableContent : fixedContent;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: "unset",
+      position: "relative"
+    }
+  };
+});
+var WebAppBody = /* @__PURE__ */ __name(({ children, breadcrumbs, disableBreadcrumbGutter, mobileScrollingBreakpoint, spacing = 1, variant, ...props }) => {
+  return /* @__PURE__ */ React.createElement(WebAppBodyRoot, {
+    mobileScrollingBreakpoint,
+    spacing,
+    variant,
+    ...props
+  }, breadcrumbs ? /* @__PURE__ */ React.createElement(WebAppBodyBreadcrumb, {
+    disableBreadcrumbGutter,
+    spacing
+  }, breadcrumbs) : null, /* @__PURE__ */ React.createElement(WebAppBodyScrollableWrapper, null, /* @__PURE__ */ React.createElement(WebAppBodyScrollable, {
+    mobileScrollingBreakpoint,
+    variant
+  }, children)));
+}, "WebAppBody");
+
+// src/components/Chrome.tsx
+import { Divider, Paper } from "@mui/material";
+import { ApplicationAppBar, SystemToolbar } from "@xylabs/react-appbar";
+import { ErrorBoundary } from "@xylabs/react-error";
+import { FlexCol, FlexGrowCol as FlexGrowCol3, FlexGrowRow } from "@xylabs/react-flexbox";
+import React4, { forwardRef } from "react";
+import { Helmet as Helmet2 } from "react-helmet";
+
+// src/components/ErrorPage.tsx
+import { ButtonEx } from "@xylabs/react-button";
+import React3 from "react";
+
+// src/components/Page.tsx
+import { Container, styled as styled2 } from "@mui/material";
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
+import { useUserEvents } from "@xylabs/react-pixel";
+import React2 from "react";
+import { Helmet } from "react-helmet";
+import { useLocation } from "react-router-dom";
+var WebAppPageRoot = styled2(FlexGrowCol2, {
+  name: "WebAppPage",
+  shouldForwardProp: /* @__PURE__ */ __name((propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant", "shouldForwardProp"),
+  slot: "Root"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    maxWidth: "100vw",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: 0,
+      position: "absolute"
+    }
+  };
+});
+var WebAppPage = /* @__PURE__ */ __name(({ disableGutters, disableBreadcrumbGutter, title, container, children, breadcrumbs, mobileScrollingBreakpoint, variant = "scrollable", ...props }) => {
+  const userEvents = useUserEvents();
+  const { pathname } = useLocation();
+  useAsyncEffect(async () => {
+    await userEvents?.viewContent({
+      name: title ?? "NodeBasePage",
+      path: location.pathname
+    });
+  }, [
+    pathname,
+    title,
+    userEvents
+  ]);
+  return /* @__PURE__ */ React2.createElement(WebAppPageRoot, {
+    mobileScrollingBreakpoint,
+    variant,
+    ...props
+  }, /* @__PURE__ */ React2.createElement(Helmet, {
+    title
+  }), container && container !== "none" ? /* @__PURE__ */ React2.createElement(Container, {
+    disableGutters,
+    style: {
+      alignItems: "stretch",
+      display: "flex",
+      flexDirection: "column",
+      flexGrow: 1,
+      justifyContent: "flex-start"
+    },
+    maxWidth: container
+  }, /* @__PURE__ */ React2.createElement(WebAppBody, {
+    disableBreadcrumbGutter,
+    breadcrumbs,
+    mobileScrollingBreakpoint,
+    variant,
+    ...props
+  }, children)) : /* @__PURE__ */ React2.createElement(WebAppBody, {
+    disableBreadcrumbGutter,
+    breadcrumbs,
+    mobileScrollingBreakpoint,
+    paddingX: disableGutters ? 0 : 1,
+    variant,
+    ...props
+  }, children));
+}, "WebAppPage");
+var FlexPage = WebAppPage;
+
+// src/components/ErrorPage.tsx
+var WebAppErrorPage = /* @__PURE__ */ __name(({ error, ...props }) => /* @__PURE__ */ React3.createElement(WebAppPage, {
+  title: "Oops! Something went wrong",
+  ...props
+}, /* @__PURE__ */ React3.createElement("h1", null, "Oops! Something went wrong!"), /* @__PURE__ */ React3.createElement("p", null, `${error}`), /* @__PURE__ */ React3.createElement(ButtonEx, {
+  href: "/",
+  variant: "contained"
+}, "Homepage")), "WebAppErrorPage");
+var ErrorPage = WebAppErrorPage;
+
+// src/components/Chrome.tsx
+var WebAppChrome = /* @__PURE__ */ forwardRef(({ appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = "menu", ...props }, ref) => {
+  return /* @__PURE__ */ React4.createElement(FlexCol, {
+    id: "web-chrome-flex",
+    alignItems: "stretch",
+    overflow: "hidden",
+    height: "100vh",
+    ref,
+    ...props
+  }, /* @__PURE__ */ React4.createElement(Helmet2, {
+    defaultTitle: appName,
+    titleTemplate: `%s | ${appName}`
+  }, /* @__PURE__ */ React4.createElement("meta", {
+    content: "website",
+    property: "og:type"
+  })), appbar ?? /* @__PURE__ */ React4.createElement(ApplicationAppBar, {
+    systemToolbar: /* @__PURE__ */ React4.createElement(SystemToolbar, {
+      menuItems: navigationType === "menu" ? menuItems : void 0
+    })
+  }), /* @__PURE__ */ React4.createElement(FlexGrowRow, {
+    id: "sidebar-nav-flex",
+    overflow: "hidden",
+    alignItems: "stretch"
+  }, navigationType === "menu" ? null : /* @__PURE__ */ React4.createElement(React4.Fragment, null, menuItems, /* @__PURE__ */ React4.createElement(Divider, {
+    orientation: "vertical"
+  })), /* @__PURE__ */ React4.createElement(FlexGrowCol3, {
+    id: "main-flex",
+    justifyContent: "flex-start",
+    alignItems: "stretch"
+  }, errorBoundary ? /* @__PURE__ */ React4.createElement(ErrorBoundary, {
+    fallbackWithError: /* @__PURE__ */ __name((error) => {
+      return errorPage ?? /* @__PURE__ */ React4.createElement(WebAppErrorPage, {
+        error
+      });
+    }, "fallbackWithError")
+  }, children) : children)), /* @__PURE__ */ React4.createElement(FlexCol, {
+    id: "footer-flex",
+    alignItems: "stretch"
+  }, /* @__PURE__ */ React4.createElement(Paper, {
+    elevation: footerElevation,
+    square: true
+  }, footer)));
+});
+WebAppChrome.displayName = "WebAppChrome";
+
+// src/components/NotFoundPage/Page.tsx
+import { NotFound } from "@xylabs/react-shared";
+import React5 from "react";
+var WebAppNotFoundPage = /* @__PURE__ */ __name(({ title, ...props }) => /* @__PURE__ */ React5.createElement(WebAppPage, {
+  title: title ?? "Sorry! Page Not Found",
+  ...props
+}, /* @__PURE__ */ React5.createElement(NotFound, null)), "WebAppNotFoundPage");
+var NotFoundPage = WebAppNotFoundPage;
+export {
+  ErrorPage,
+  FlexPage,
+  NotFoundPage,
+  WebAppBody,
+  WebAppChrome,
+  WebAppErrorPage,
+  WebAppNotFoundPage,
+  WebAppPage
+};
+//# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -0,0 +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 { Divider, Paper } from '@mui/material'\nimport type { WebAppNavigationType } from '@xylabs/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xylabs/react-appbar'\nimport { ErrorBoundary } from '@xylabs/react-error'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n  FlexCol, FlexGrowCol, FlexGrowRow,\n} from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React, { forwardRef } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage.tsx'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorBoundary?: boolean\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({\n    appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props\n  }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType === 'menu'\n            ? null\n            : (\n                <>\n                  {menuItems}\n                  <Divider orientation=\"vertical\" />\n                </>\n              )}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            {errorBoundary\n              ? (\n                  <ErrorBoundary\n                    fallbackWithError={(error) => {\n                      return errorPage ?? <WebAppErrorPage error={error} />\n                    }}\n                  >\n                    {children}\n                  </ErrorBoundary>\n                )\n              : children}\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\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 '@xylabs/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":"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","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","Divider","Paper","ApplicationAppBar","SystemToolbar","ErrorBoundary","FlexCol","FlexGrowCol","FlexGrowRow","React","forwardRef","Helmet","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","WebAppChrome","forwardRef","appName","appbar","children","errorBoundary","errorPage","footer","footerElevation","menuItems","navigationType","props","ref","React","FlexCol","id","alignItems","overflow","height","Helmet","defaultTitle","titleTemplate","meta","content","property","ApplicationAppBar","systemToolbar","SystemToolbar","undefined","FlexGrowRow","Divider","orientation","FlexGrowCol","justifyContent","ErrorBoundary","fallbackWithError","error","WebAppErrorPage","Paper","elevation","square","displayName","NotFound","React","WebAppNotFoundPage","title","props","React","WebAppPage","NotFound","NotFoundPage"]}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@xylabs/react-webapp",
+  "version": "5.2.8",
+  "description": "Common React library for all XY Labs projects that use React",
+  "keywords": [
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "homepage": "https://xylabs.com",
+  "bugs": {
+    "url": "git+https://github.com/xylabs/sdk-react/issues",
+    "email": "support@xylabs.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xylabs/sdk-react.git"
+  },
+  "license": "LGPL-3.0-only",
+  "author": {
+    "name": "XY Labs Development Team",
+    "email": "support@xylabs.com",
+    "url": "https://xylabs.com"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "browser": {
+        "types": "./dist/browser/index.d.ts",
+        "default": "./dist/browser/index.mjs"
+      },
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "module": "dist/browser/index.mjs",
+  "types": "dist/browser/index.d.ts",
+  "scripts": {
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\"",
+    "lint-pkg": "npmPkgJsonLint ."
+  },
+  "dependencies": {
+    "@mui/icons-material": "^6.1.5",
+    "@mui/material": "^6.1.5",
+    "@mui/styles": "^6.1.5",
+    "@xylabs/react-app-settings": "^5.2.8",
+    "@xylabs/react-appbar": "^5.2.8",
+    "@xylabs/react-async-effect": "^5.2.8",
+    "@xylabs/react-button": "^5.2.8",
+    "@xylabs/react-error": "^5.2.8",
+    "@xylabs/react-flexbox": "^5.2.8",
+    "@xylabs/react-pixel": "^5.2.8",
+    "@xylabs/react-shared": "^5.2.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-router-dom": "^6.27.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "^8.3.6",
+    "@types/react-helmet": "^6.1.11",
+    "@xylabs/react-button": "^5.2.8",
+    "@xylabs/react-flexbox": "^5.2.8",
+    "@xylabs/react-link": "^5.2.8",
+    "@xylabs/react-pixel": "^5.2.8",
+    "@xylabs/ts-scripts-yarn3": "^4.2.3",
+    "@xylabs/tsconfig-react": "^4.2.3",
+    "storybook": "^8.3.6",
+    "typescript": "^5.6.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "docs": "dist/docs.json"
+}

package/src/components/Body.tsx

@@ -0,0 +1,102 @@
+import type { Breakpoint } from '@mui/material'
+import { styled } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+import type { ReactNode } from 'react'
+import React from 'react'
+
+import { fixedContent, scrollableContent } from './lib/index.ts'
+
+const WebAppBodyName = 'WebAppBody'
+const propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])
+const defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }
+
+const WebAppBodyRoot = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: 'Root',
+})<WebAppBodyProps>(({
+  spacing, theme, mobileScrollingBreakpoint = 'sm', variant,
+}) => {
+  const scrollable = variant === 'scrollable'
+  return theme.unstable_sx({
+    alignItems: 'stretch',
+    gap: 1,
+    justifyContent: 'flex-start',
+    overflowX: 'visible',
+    overflowY: scrollable ? 'scroll' : 'hidden',
+    paddingY: spacing,
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: 'scroll' },
+  })
+})
+
+const WebAppBodyBreadcrumb = styled(FlexRow, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: 'Breadcrumb',
+})<WebAppBodyProps>(({
+  theme, disableBreadcrumbGutter, spacing,
+}) =>
+  theme.unstable_sx({
+    justifyContent: 'start',
+    marginX: disableBreadcrumbGutter ? 0 : spacing,
+  }))
+
+const WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: 'ScrollableWrapper',
+})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))
+
+const WebAppBodyScrollable = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: 'Scrollable',
+})<WebAppBodyProps>(({
+  theme, mobileScrollingBreakpoint = 'sm', variant,
+}) => {
+  const props = variant === 'scrollable' ? scrollableContent : fixedContent
+  return {
+    ...props,
+    alignItems: 'stretch',
+    justifyContent: 'start',
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: 'unset',
+      position: 'relative',
+    },
+  }
+})
+
+export interface WebAppBodyProps extends FlexBoxProps {
+  breadcrumbs?: ReactNode
+  disableBreadcrumbGutter?: boolean
+  mobileScrollingBreakpoint?: Breakpoint
+  spacing?: string | number
+  variant?: 'scrollable' | 'fixed'
+}
+
+export const WebAppBody: React.FC<WebAppBodyProps> = ({
+  children,
+  breadcrumbs,
+  disableBreadcrumbGutter,
+  mobileScrollingBreakpoint,
+  spacing = 1,
+  variant,
+  ...props
+}) => {
+  return (
+    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>
+      {breadcrumbs
+        ? (
+            <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>
+              {breadcrumbs}
+            </WebAppBodyBreadcrumb>
+          )
+        : null}
+      <WebAppBodyScrollableWrapper>
+        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>
+          {children}
+        </WebAppBodyScrollable>
+      </WebAppBodyScrollableWrapper>
+    </WebAppBodyRoot>
+  )
+}

package/src/components/Chrome.stories.tsx

@@ -0,0 +1,71 @@
+import { Breadcrumbs, List } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react'
+import { MenuListItemContainer } from '@xylabs/react-appbar'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { LinkEx } from '@xylabs/react-link'
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { WebAppChrome } from './Chrome.tsx'
+import type { WebAppPageProps } from './Page.tsx'
+import { WebAppPage } from './Page.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: WebAppChrome,
+  parameters: { docs: { page: null } },
+  title: 'webapp/WebAppChrome',
+} as Meta<typeof WebAppChrome>
+
+const rowArray = [32, 64, 128, 256, 512, 1024]
+
+const Children: React.FC<WebAppPageProps> = props => (
+  <WebAppPage
+    breadcrumbs={(
+      <Breadcrumbs>
+        <LinkEx>BreadCrumbs</LinkEx>
+      </Breadcrumbs>
+    )}
+    {...props}
+  >
+    {rowArray.map((height) => {
+      return (
+        <FlexRow key={height} height={height}>
+          {height}
+        </FlexRow>
+      )
+    })}
+  </WebAppPage>
+)
+
+const Template: StoryFn<typeof WebAppChrome> = (args) => {
+  return (
+    <BrowserRouter>
+      <WebAppChrome
+        menuItems={(
+          <List>
+            <MenuListItemContainer primary="Hello" />
+          </List>
+        )}
+        height="calc(100vh - 2rem)"
+        {...args}
+      >
+      </WebAppChrome>
+    </BrowserRouter>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const DefaultSideBar = Template.bind({})
+DefaultSideBar.args = { children: <Children />, navigationType: 'sidebar' }
+
+const WithFixedSizePage = Template.bind({})
+WithFixedSizePage.args = { children: <Children variant="fixed" />, navigationType: 'sidebar' }
+
+export {
+  Default, DefaultSideBar, WithFixedSizePage,
+}
+
+export default StorybookEntry

package/src/components/Chrome.tsx

@@ -0,0 +1,69 @@
+import { Divider, Paper } from '@mui/material'
+import type { WebAppNavigationType } from '@xylabs/react-app-settings'
+import { ApplicationAppBar, SystemToolbar } from '@xylabs/react-appbar'
+import { ErrorBoundary } from '@xylabs/react-error'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import {
+  FlexCol, FlexGrowCol, FlexGrowRow,
+} from '@xylabs/react-flexbox'
+import type { ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+import { Helmet } from 'react-helmet'
+
+import { WebAppErrorPage } from './ErrorPage.tsx'
+
+export interface WebAppChromeProps extends FlexBoxProps {
+  appName: string
+  appbar?: ReactNode
+  errorBoundary?: boolean
+  errorPage?: ReactNode
+  footer?: ReactNode
+  footerElevation?: number
+  menuItems?: ReactNode
+  navigationType?: WebAppNavigationType
+}
+
+export const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(
+  ({
+    appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props
+  }, ref) => {
+    return (
+      <FlexCol id="web-chrome-flex" alignItems="stretch" overflow="hidden" height="100vh" ref={ref} {...props}>
+        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>
+          <meta content="website" property="og:type" />
+        </Helmet>
+        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}
+        <FlexGrowRow id="sidebar-nav-flex" overflow="hidden" alignItems="stretch">
+          {navigationType === 'menu'
+            ? null
+            : (
+                <>
+                  {menuItems}
+                  <Divider orientation="vertical" />
+                </>
+              )}
+          <FlexGrowCol id="main-flex" justifyContent="flex-start" alignItems="stretch">
+            {errorBoundary
+              ? (
+                  <ErrorBoundary
+                    fallbackWithError={(error) => {
+                      return errorPage ?? <WebAppErrorPage error={error} />
+                    }}
+                  >
+                    {children}
+                  </ErrorBoundary>
+                )
+              : children}
+          </FlexGrowCol>
+        </FlexGrowRow>
+        <FlexCol id="footer-flex" alignItems="stretch">
+          <Paper elevation={footerElevation} square>
+            {footer}
+          </Paper>
+        </FlexCol>
+      </FlexCol>
+    )
+  },
+)
+
+WebAppChrome.displayName = 'WebAppChrome'

package/src/components/ErrorPage.tsx

@@ -0,0 +1,22 @@
+import { ButtonEx } from '@xylabs/react-button'
+import React from 'react'
+
+import type { WebAppPageProps } from './Page.tsx'
+import { WebAppPage } from './Page.tsx'
+
+export interface WebAppErrorPageProps extends WebAppPageProps {
+  error?: Error
+}
+
+export const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (
+  <WebAppPage title="Oops! Something went wrong" {...props}>
+    <h1>Oops! Something went wrong!</h1>
+    <p>{`${error}`}</p>
+    <ButtonEx href="/" variant="contained">
+      Homepage
+    </ButtonEx>
+  </WebAppPage>
+)
+
+/** @deprecated use WebAppErrorPage instead */
+export const ErrorPage = WebAppErrorPage

package/src/components/NotFoundPage/Page.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { NotFound } from '@xylabs/react-shared'
+import React from 'react'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: NotFound,
+  parameters: { docs: { page: null } },
+  title: 'webapp/NotFound',
+} as Meta<typeof NotFound>
+
+const Template: StoryFn<typeof NotFound> = () => {
+  return <NotFound />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+export default StorybookEntry

package/src/components/NotFoundPage/Page.tsx

@@ -0,0 +1,14 @@
+import { NotFound } from '@xylabs/react-shared'
+import React from 'react'
+
+import type { WebAppPageProps } from '../Page.tsx'
+import { WebAppPage } from '../Page.tsx'
+
+export const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (
+  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>
+    <NotFound />
+  </WebAppPage>
+)
+
+/** @deprecated  use WebAppNotFoundPage instead */
+export const NotFoundPage = WebAppNotFoundPage

package/src/components/NotFoundPage/index.ts

@@ -0,0 +1 @@
+export * from './Page.tsx'

package/src/components/Page.tsx

@@ -0,0 +1,102 @@
+import type { ContainerProps } from '@mui/material'
+import { Container, styled } from '@mui/material'
+import { useAsyncEffect } from '@xylabs/react-async-effect'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { useUserEvents } from '@xylabs/react-pixel'
+import type { PropsWithChildren } from 'react'
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { useLocation } from 'react-router-dom'
+
+import type { WebAppBodyProps } from './Body.tsx'
+import { WebAppBody } from './Body.tsx'
+import { fixedWrap, scrollableWrap } from './lib/index.ts'
+
+const WebAppPageRoot = styled(FlexGrowCol, {
+  name: 'WebAppPage',
+  shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',
+  slot: 'Root',
+})<WebAppPageProps>(({
+  theme, mobileScrollingBreakpoint = 'sm', variant,
+}) => {
+  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap
+  return {
+    ...props,
+    alignItems: 'stretch',
+    justifyContent: 'start',
+    maxWidth: '100vw',
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: 0,
+      position: 'absolute',
+    },
+  }
+})
+
+export interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {
+  container?: ContainerProps['maxWidth'] | 'none'
+  disableGutters?: boolean
+}
+
+export const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>> = ({
+  disableGutters,
+  disableBreadcrumbGutter,
+  title,
+  container,
+  children,
+  breadcrumbs,
+  mobileScrollingBreakpoint,
+  variant = 'scrollable',
+  ...props
+}) => {
+  const userEvents = useUserEvents()
+  const { pathname } = useLocation()
+
+  useAsyncEffect(
+    async () => {
+      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })
+    },
+    [pathname, title, userEvents],
+  )
+
+  return (
+    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>
+      <Helmet title={title} />
+      {container && container !== 'none'
+        ? (
+            <Container
+              disableGutters={disableGutters}
+              style={{
+                alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',
+              }}
+              maxWidth={container}
+            >
+              <WebAppBody
+                disableBreadcrumbGutter={disableBreadcrumbGutter}
+                breadcrumbs={breadcrumbs}
+                mobileScrollingBreakpoint={mobileScrollingBreakpoint}
+                variant={variant}
+                {...props}
+              >
+                {children}
+              </WebAppBody>
+            </Container>
+          )
+        : (
+            <WebAppBody
+              disableBreadcrumbGutter={disableBreadcrumbGutter}
+              breadcrumbs={breadcrumbs}
+              mobileScrollingBreakpoint={mobileScrollingBreakpoint}
+              paddingX={disableGutters ? 0 : 1}
+              variant={variant}
+              {...props}
+            >
+              {children}
+            </WebAppBody>
+          )}
+    </WebAppPageRoot>
+  )
+}
+
+/** @deprecated use WebAppPagePage instead */
+export const FlexPage = WebAppPage

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './Body.tsx'
+export * from './Chrome.tsx'
+export * from './ErrorPage.tsx'
+export * from './NotFoundPage/index.ts'
+export * from './Page.tsx'

package/src/components/lib/cssValues.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react'
+
+export const scrollableWrap: CSSProperties = {
+  inset: 0,
+  position: 'absolute',
+} as const
+
+export const fixedWrap: CSSProperties = {
+  inset: 'unset',
+  position: 'relative',
+} as const
+
+// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles
+export const scrollableContent: CSSProperties = { ...fixedWrap } as const
+
+export const fixedContent: CSSProperties = { ...scrollableWrap } as const

package/src/components/lib/index.ts

@@ -0,0 +1 @@
+export * from './cssValues.ts'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/index.ts'

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}

package/xy.config.ts

@@ -0,0 +1,10 @@
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+const config: XyTsupConfig = {
+  compile: {
+    browser: { src: true },
+    node: {},
+    neutral: {},
+  },
+}
+
+export default config