@xyo-network/react-webapp 2.25.51 → 2.25.52

package/dist/esm/components/{WebAppChrome.js → Chrome.js}

@@ -2,9 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Paper } from '@mui/material';
 import { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox';
 import { ApplicationAppBar } from '@xyo-network/react-appbar';
-import { ErrorBoundary, ErrorPage, Footer } from '@xyo-network/react-shared';
+import { Footer } from '@xyo-network/react-footer';
+import { ErrorBoundary } from '@xyo-network/react-shared';
 import { Helmet } from 'react-helmet';
+import { WebAppErrorPage } from './ErrorPage';
 export const WebAppChrome = ({ footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
-    return (_jsxs(FlexCol, { alignItems: "stretch", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, {}), _jsx(FlexGrowCol, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(ErrorPage, {}), children: children }) }), _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) })] }));
+    return (_jsxs(FlexCol, { alignItems: "stretch", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, {}), _jsx(FlexGrowCol, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(WebAppErrorPage, {}), children: children }) }), _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) })] }));
 };
-//# sourceMappingURL=WebAppChrome.js.map
+//# sourceMappingURL=Chrome.js.map

package/dist/esm/components/Chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAU7C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3I,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACpD,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACR,MAAM,IAAI,KAAC,iBAAiB,KAAG,EAChC,KAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC7E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,eAAe,KAAG,YAAG,QAAQ,GAAiB,GACzE,EACd,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,IACA,CACX,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const WebAppErrorPage: () => JSX.Element;
+/** @deprecated use WebAppErrorPage instead */
+export declare const ErrorPage: () => JSX.Element;

package/dist/esm/components/ErrorPage.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonEx } from '@xylabs/react-button';
+import { WebAppPage } from './Page';
+export const WebAppErrorPage = () => (_jsxs(WebAppPage, { title: "Oops! Something went wrong", children: [_jsx("h1", { children: "Oops! Something went wrong!" }), _jsx(ButtonEx, { href: "/", variant: "contained", children: "Homepage" })] }));
+/** @deprecated use WebAppErrorPage instead */
+export const ErrorPage = WebAppErrorPage;
+//# sourceMappingURL=ErrorPage.js.map

package/dist/esm/components/ErrorPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage.js","sourceRoot":"","sources":["../../../src/components/ErrorPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEnC,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CACnC,MAAC,UAAU,IAAC,KAAK,EAAC,4BAA4B,aAC5C,uDAAoC,EACpC,KAAC,QAAQ,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAC,WAAW,yBAE3B,IACA,CACd,CAAA;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAA"}

package/dist/esm/components/NotFoundPage/NotFound.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+declare const NotFound: React.FC<FlexBoxProps>;
+export { NotFound };

package/dist/esm/components/NotFoundPage/NotFound.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { FlexGrowCol } from '@xylabs/react-flexbox';
+const NotFound = (props) => {
+    return (_jsxs(FlexGrowCol, { ...props, children: [_jsx(Typography, { variant: "h2", children: "Sorry!" }), _jsx(Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })] }));
+};
+export { NotFound };
+//# sourceMappingURL=NotFound.js.map

package/dist/esm/components/NotFoundPage/NotFound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.js","sourceRoot":"","sources":["../../../../src/components/NotFoundPage/NotFound.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEjE,MAAM,QAAQ,GAA2B,CAAC,KAAK,EAAE,EAAE;IACjD,OAAO,CACL,MAAC,WAAW,OAAK,KAAK,aACpB,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,uBAAoB,EAC5C,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,OAAO,YACpC,0BAA0B,GAChB,IACD,CACf,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WebAppPageProps } from '../Page';
+export declare const WebAppNotFoundPage: React.FC<WebAppPageProps>;
+/** @deprecated  use WebAppNotFoundPage instead */
+export declare const NotFoundPage: import("react").FC<WebAppPageProps>;

package/dist/esm/components/NotFoundPage/Page.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WebAppPage } from '../Page';
+import { NotFound } from './NotFound';
+export const WebAppNotFoundPage = ({ title, ...props }) => (_jsx(WebAppPage, { title: title ?? 'Sorry! Page Not Found', ...props, children: _jsx(NotFound, {}) }));
+/** @deprecated  use WebAppNotFoundPage instead */
+export const NotFoundPage = WebAppNotFoundPage;
+//# sourceMappingURL=Page.js.map

package/dist/esm/components/NotFoundPage/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../../src/components/NotFoundPage/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,SAAS,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,kBAAkB,GAA8B,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,IAAI,uBAAuB,KAAM,KAAK,YAC5D,KAAC,QAAQ,KAAG,GACD,CACd,CAAA;AAED,kDAAkD;AAClD,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './NotFound';
+export * from './Page';

package/dist/esm/components/NotFoundPage/index.js

@@ -0,0 +1,3 @@
+export * from './NotFound';
+export * from './Page';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/NotFoundPage/index.js.map

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

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

@@ -0,0 +1,10 @@
+import { ContainerProps } from '@mui/material';
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { ReactNode } from 'react';
+export interface WebAppPageProps extends FlexBoxProps {
+    container?: ContainerProps['maxWidth'];
+    breadcrumbs?: ReactNode;
+}
+export declare const WebAppPage: React.FC<WebAppPageProps>;
+/** @deprecated use WebAppPagePage instead */
+export declare const FlexPage: import("react").FC<WebAppPageProps>;

package/dist/esm/components/Page.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Container } from '@mui/material';
+import { FlexGrowCol } from '@xylabs/react-flexbox';
+import { useUserEvents } from '@xylabs/react-pixel';
+import { useAsyncEffect } from '@xylabs/react-shared';
+import { Helmet } from 'react-helmet';
+import { useLocation } from 'react-router-dom';
+export const WebAppPage = ({ title, container = 'xl', breadcrumbs, children, ...props }) => {
+    const userEvents = useUserEvents();
+    const { pathname } = useLocation();
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+        await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname });
+    }, [pathname, title, userEvents]);
+    const Body = (props) => (_jsxs(FlexGrowCol, { gap: 2, paddingY: 2, justifyContent: "flex-start", alignItems: "stretch", ...props, children: [breadcrumbs, children] }));
+    return (_jsxs(FlexGrowCol, { alignItems: "stretch", justifyContent: "flex-start", minHeight: 0, overflow: "visible scroll", children: [_jsx(Helmet, { title: title }), container ? (_jsx(Container, { style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container, children: _jsx(Body, { ...props }) })) : (_jsx(Body, { ...props }))] }));
+};
+/** @deprecated use WebAppPagePage instead */
+export const FlexPage = WebAppPage;
+//# sourceMappingURL=Page.js.map

package/dist/esm/components/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACzD,OAAO,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAM9C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAElC,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,MAAM,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,cAAc,EAAE,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC3F,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAA;IAED,MAAM,IAAI,GAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9C,MAAC,WAAW,IAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACzF,WAAW,EACX,QAAQ,IACG,CACf,CAAA;IAED,OAAO,CACL,MAAC,WAAW,IAAC,UAAU,EAAC,SAAS,EAAC,cAAc,EAAC,YAAY,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,gBAAgB,aACnG,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EACvB,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,SAAS,YACnJ,KAAC,IAAI,OAAK,KAAK,GAAI,GACT,CACb,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,KAAK,GAAI,CACpB,IACW,CACf,CAAA;AACH,CAAC,CAAA;AAED,6CAA6C;AAC7C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAA"}

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

@@ -1 +1,4 @@
-export * from './WebAppChrome';
+export * from './Chrome';
+export * from './ErrorPage';
+export * from './NotFoundPage';
+export * from './Page';

package/dist/esm/components/index.js

@@ -1,2 +1,5 @@
-export * from './WebAppChrome';
+export * from './Chrome';
+export * from './ErrorPage';
+export * from './NotFoundPage';
+export * from './Page';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA"}

package/package.json

@@ -13,15 +13,18 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.8.3",
+    "@xylabs/react-button": "^2.12.23",
     "@xylabs/react-flexbox": "^2.12.23",
-    "@xyo-network/react-appbar": "^2.25.51",
-    "@xyo-network/react-shared": "^2.25.51",
+    "@xylabs/react-pixel": "^2.12.23",
+    "@xylabs/react-shared": "^2.12.23",
+    "@xyo-network/react-appbar": "^2.25.52",
+    "@xyo-network/react-footer": "^2.25.52",
+    "@xyo-network/react-shared": "^2.25.52",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.3.0",
-    "tslib": "^2.4.0",
-    "typedoc": "^0.22.17"
+    "tslib": "^2.4.0"
   },
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
@@ -29,8 +32,7 @@
     "@babel/preset-env": "^7.18.2",
     "@storybook/react": "^6.5.8",
     "@types/react-helmet": "^6.1.5",
-    "@xylabs/tsconfig": "^1.0.13",
-    "axios": "^0.27.2"
+    "@xylabs/tsconfig": "^1.0.13"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -61,15 +63,6 @@
     "react"
   ],
   "license": "LGPL-3.0",
-  "peerDependencies": {
-    "axios": ">0.26",
-    "typedoc": "^0.22.13"
-  },
-  "peerDependenciesMeta": {
-    "typedoc": {
-      "optional": true
-    }
-  },
   "resolutions": {
     "@storybook/react/webpack": "^5",
     "bn.js": "^5.2.0",
@@ -90,6 +83,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.51",
+  "version": "2.25.52",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/{WebAppChrome.stories.tsx → Chrome.stories.tsx}

@@ -3,8 +3,8 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { FlexCol } from '@xylabs/react-flexbox'
 import { BrowserRouter } from 'react-router-dom'
 
-import { FlexPage } from '../../../shared/src'
-import { WebAppChrome } from './WebAppChrome'
+import { WebAppChrome } from './Chrome'
+import { WebAppPage } from './Page'
 
 const StorybookEntry = {
   argTypes: {},
@@ -22,7 +22,7 @@ const Template: ComponentStory<typeof WebAppChrome> = (args) => {
     <FlexCol height="80vh" alignItems="stretch" overflow="hidden">
       <BrowserRouter>
         <WebAppChrome {...args}>
-          <FlexPage />
+          <WebAppPage />
         </WebAppChrome>
       </BrowserRouter>
     </FlexCol>

package/src/components/{WebAppChrome.tsx → Chrome.tsx}

@@ -1,10 +1,13 @@
 import { Paper } from '@mui/material'
 import { FlexBoxProps, FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'
 import { ApplicationAppBar } from '@xyo-network/react-appbar'
-import { ErrorBoundary, ErrorPage, Footer } from '@xyo-network/react-shared'
+import { Footer } from '@xyo-network/react-footer'
+import { ErrorBoundary } from '@xyo-network/react-shared'
 import { ReactNode } from 'react'
 import { Helmet } from 'react-helmet'
 
+import { WebAppErrorPage } from './ErrorPage'
+
 export interface WebAppChromeProps extends FlexBoxProps {
   appName: string
   footer?: ReactNode
@@ -21,7 +24,7 @@ export const WebAppChrome: React.FC<WebAppChromeProps> = ({ footerElevation = 4,
       </Helmet>
       {appbar ?? <ApplicationAppBar />}
       <FlexGrowCol overflow="hidden" justifyContent="flex-start" alignItems="stretch">
-        <ErrorBoundary fallback={errorPage ?? <ErrorPage />}>{children}</ErrorBoundary>
+        <ErrorBoundary fallback={errorPage ?? <WebAppErrorPage />}>{children}</ErrorBoundary>
       </FlexGrowCol>
       <Paper elevation={footerElevation} square>
         {footer ?? <Footer dynamicHeight />}

package/src/components/ErrorPage.tsx

@@ -0,0 +1,15 @@
+import { ButtonEx } from '@xylabs/react-button'
+
+import { WebAppPage } from './Page'
+
+export const WebAppErrorPage = () => (
+  <WebAppPage title="Oops! Something went wrong">
+    <h1>Oops! Something went wrong!</h1>
+    <ButtonEx href="/" variant="contained">
+      Homepage
+    </ButtonEx>
+  </WebAppPage>
+)
+
+/** @deprecated use WebAppErrorPage instead */
+export const ErrorPage = WebAppErrorPage

package/src/components/NotFoundPage/NotFound.tsx

@@ -0,0 +1,15 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
+
+const NotFound: React.FC<FlexBoxProps> = (props) => {
+  return (
+    <FlexGrowCol {...props}>
+      <Typography variant="h2">Sorry!</Typography>
+      <Typography marginY={3} variant="body2">
+        {"Can't find anything here"}
+      </Typography>
+    </FlexGrowCol>
+  )
+}
+
+export { NotFound }

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

@@ -0,0 +1,26 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { NotFound } from './NotFound'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: NotFound,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'webapp/NotFound',
+} as ComponentMeta<typeof NotFound>
+
+const Template: ComponentStory<typeof NotFound> = () => {
+  return <NotFound />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/NotFoundPage/Page.tsx

@@ -0,0 +1,11 @@
+import { WebAppPage, WebAppPageProps } from '../Page'
+import { NotFound } from './NotFound'
+
+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,2 @@
+export * from './NotFound'
+export * from './Page'

package/src/components/Page.tsx

@@ -0,0 +1,47 @@
+import { Container, ContainerProps } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
+import { useUserEvents } from '@xylabs/react-pixel'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { ReactNode } from 'react'
+import { Helmet } from 'react-helmet'
+import { useLocation } from 'react-router-dom'
+export interface WebAppPageProps extends FlexBoxProps {
+  container?: ContainerProps['maxWidth']
+  breadcrumbs?: ReactNode
+}
+
+export const WebAppPage: React.FC<WebAppPageProps> = ({ title, container = 'xl', breadcrumbs, children, ...props }) => {
+  const userEvents = useUserEvents()
+  const { pathname } = useLocation()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })
+    },
+    [pathname, title, userEvents]
+  )
+
+  const Body: React.FC<FlexBoxProps> = (props) => (
+    <FlexGrowCol gap={2} paddingY={2} justifyContent="flex-start" alignItems="stretch" {...props}>
+      {breadcrumbs}
+      {children}
+    </FlexGrowCol>
+  )
+
+  return (
+    <FlexGrowCol alignItems="stretch" justifyContent="flex-start" minHeight={0} overflow="visible scroll">
+      <Helmet title={title} />
+      {container ? (
+        <Container style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }} maxWidth={container}>
+          <Body {...props} />
+        </Container>
+      ) : (
+        <Body {...props} />
+      )}
+    </FlexGrowCol>
+  )
+}
+
+/** @deprecated use WebAppPagePage instead */
+export const FlexPage = WebAppPage

package/src/components/index.ts

@@ -1 +1,4 @@
-export * from './WebAppChrome'
+export * from './Chrome'
+export * from './ErrorPage'
+export * from './NotFoundPage'
+export * from './Page'

package/dist/cjs/components/WebAppChrome.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"WebAppChrome.js","sourceRoot":"","sources":["../../../src/components/WebAppChrome.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAqC;AACrC,yDAA0E;AAC1E,4DAA6D;AAC7D,4DAA4E;AAE5E,+CAAqC;AAU9B,MAAM,YAAY,GAAgC,CAAC,EAA+E,EAAE,EAAE;QAAnF,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,OAAY,EAAP,KAAK,sBAA7E,2EAA+E,CAAF;IACrI,OAAO,CACL,wBAAC,uBAAO,kBAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,IAAK,KAAK,eACpD,uBAAC,qBAAM,kBAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,gBAC7D,iCAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,IACtC,EACR,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,gCAAiB,KAAG,EAChC,uBAAC,2BAAW,kBAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,gBAC7E,uBAAC,4BAAa,kBAAC,QAAQ,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,uBAAC,wBAAS,KAAG,gBAAG,QAAQ,IAAiB,IACnE,EACd,uBAAC,gBAAK,kBAAC,SAAS,EAAE,eAAe,EAAE,MAAM,sBACtC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,qBAAM,IAAC,aAAa,SAAG,IAC7B,KACA,CACX,CAAA;AACH,CAAC,CAAA;AAfY,QAAA,YAAY,gBAexB"}

package/dist/esm/components/WebAppChrome.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"WebAppChrome.js","sourceRoot":"","sources":["../../../src/components/WebAppChrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAE5E,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAUrC,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3I,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACpD,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACR,MAAM,IAAI,KAAC,iBAAiB,KAAG,EAChC,KAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC7E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,SAAS,KAAG,YAAG,QAAQ,GAAiB,GACnE,EACd,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,IACA,CACX,CAAA;AACH,CAAC,CAAA"}