@xyo-network/react-shared 2.25.26 → 2.25.27

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

@@ -0,0 +1,16 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+export interface ErrorBoundaryState {
+    error?: Error;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | boolean | import("react").ReactFragment | JSX.Element | null | undefined;
+}

package/dist/esm/components/ErrorBoundry.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { FlexCol } from '@xylabs/sdk-react';
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: undefined };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(`${error}: ${errorInfo}`);
+    }
+    render() {
+        if (this.state.error) {
+            return (this.props.fallback ?? (_jsxs(FlexCol, { children: [_jsx(Typography, { variant: "h1", children: "Something went wrong." }), _jsxs(Typography, { variant: "body1", children: ["[", this.state.error?.message, "]"] })] })));
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundry.js","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAA;AAWvD,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAClD,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,SAAS,EAAE,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACpB,OAAO,CACL,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACrB,MAAC,OAAO,eACN,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,sCAAmC,EAC3D,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,kBAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,SAAe,IAC9D,CACX,CACF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF"}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ErrorPage: () => JSX.Element;

package/dist/esm/components/ErrorPage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonEx } from '@xylabs/sdk-react';
+import { FlexPage } from './FlexPage';
+export const ErrorPage = () => (_jsxs(FlexPage, { title: "Oops! Something went wrong", children: [_jsx("h1", { children: "Oops! Something went wrong!" }), _jsx(ButtonEx, { href: "/", variant: "contained", children: "Homepage" })] }));
+//# 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,mBAAmB,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,MAAC,QAAQ,IAAC,KAAK,EAAC,4BAA4B,aAC1C,uDAAoC,EACpC,KAAC,QAAQ,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAC,WAAW,yBAE3B,IACF,CACZ,CAAA"}

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

@@ -0,0 +1,8 @@
+import { ContainerProps } from '@mui/material';
+import { FlexBoxProps } from '@xylabs/sdk-react';
+import { ReactNode } from 'react';
+export interface FlexPageProps extends FlexBoxProps {
+    container?: ContainerProps['maxWidth'];
+    breadcrumbs?: ReactNode;
+}
+export declare const FlexPage: React.FC<FlexPageProps>;

package/dist/esm/components/FlexPage.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Container } from '@mui/material';
+import { FlexGrowCol, useAsyncEffect, useUserEvents } from '@xylabs/sdk-react';
+import { Helmet } from 'react-helmet';
+import { useLocation } from 'react-router-dom';
+export const FlexPage = ({ 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 }))] }));
+};
+//# sourceMappingURL=FlexPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlexPage.js","sourceRoot":"","sources":["../../../src/components/FlexPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACzD,OAAO,EAAgB,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAE5F,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAM9C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChH,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"}

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-declare const NotFound: () => JSX.Element;
+import { FlexBoxProps } from '@xylabs/sdk-react';
+declare const NotFound: React.FC<FlexBoxProps>;
 export { NotFound };

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { FlexGrowCol } from '@xylabs/sdk-react';
-const NotFound = () => {
-    return (_jsx(_Fragment, { children: _jsxs(FlexGrowCol, { children: [_jsx(Typography, { variant: "h2", children: "Sorry!" }), _jsx(Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })] }) }));
+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/NotFound/NotFound.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotFound.js","sourceRoot":"","sources":["../../../../src/components/NotFound/NotFound.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,4BACE,MAAC,WAAW,eACV,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,uBAAoB,EAC5C,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,OAAO,YACpC,0BAA0B,GAChB,IACD,GACb,CACJ,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"NotFound.js","sourceRoot":"","sources":["../../../../src/components/NotFound/NotFound.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE7D,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/NotFound/NotFoundPage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexPageProps } from '../FlexPage';
+export declare const NotFoundPage: React.FC<FlexPageProps>;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotFoundPage.js","sourceRoot":"","sources":["../../../../src/components/NotFound/NotFoundPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,aAAa,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,YAAY,GAA4B,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5E,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,uBAAuB,KAAM,KAAK,YAC1D,KAAC,QAAQ,KAAG,GACH,CACZ,CAAA"}

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

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

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

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

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

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

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

@@ -1,6 +1,9 @@
 export * from './Ampersand';
 export * from './BasicHero';
 export * from './DarkModeIconButton';
+export * from './ErrorBoundry';
+export * from './ErrorPage';
+export * from './FlexPage';
 export * from './Footer';
 export * from './FullWidthCard';
 export * from './GradientText';

package/dist/esm/components/index.js

@@ -1,6 +1,9 @@
 export * from './Ampersand';
 export * from './BasicHero';
 export * from './DarkModeIconButton';
+export * from './ErrorBoundry';
+export * from './ErrorPage';
+export * from './FlexPage';
 export * from './Footer';
 export * from './FullWidthCard';
 export * from './GradientText';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA"}

package/dist/esm/contexts/AppSettings/Storage.js

@@ -2,7 +2,7 @@ import { appSettingDefault } from './appSettingDefault';
 import { AppSettingSlug } from './Slug';
 import { AppSettingsStorageBase } from './StorageBase';
 export class AppSettingsStorage extends AppSettingsStorageBase {
-    constructor(prefix = 'XyoAppSettings', defaults) {
+    constructor(prefix = 'AppSettings', defaults) {
         super(prefix, { ...appSettingDefault(), ...defaults });
     }
     get darkMode() {

package/dist/esm/contexts/AppSettings/Storage.js.map

@@ -1 +1 @@
-{"version":3,"file":"Storage.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Storage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAEtD,MAAM,OAAO,kBAAmB,SAAQ,sBAAsB;IAC5D,YAAY,MAAM,GAAG,gBAAgB,EAAE,QAAkC;QACvE,KAAK,CAAC,MAAM,EAAE,EAAE,GAAG,iBAAiB,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAA;IACxD,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;IAClD,CAAC;IAED,IAAI,aAAa,CAAC,KAAc;QAC9B,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAClD,CAAC;CACF"}
+{"version":3,"file":"Storage.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Storage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAEtD,MAAM,OAAO,kBAAmB,SAAQ,sBAAsB;IAC5D,YAAY,MAAM,GAAG,aAAa,EAAE,QAAkC;QACpE,KAAK,CAAC,MAAM,EAAE,EAAE,GAAG,iBAAiB,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAA;IACxD,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;IAClD,CAAC;IAED,IAAI,aAAa,CAAC,KAAc;QAC9B,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAClD,CAAC;CACF"}

package/package.json

@@ -22,11 +22,12 @@
     "@xyo-network/api": "^2.20.38",
     "@xyo-network/core": "^2.20.38",
     "@xyo-network/network": "^2.20.38",
-    "@xyo-network/react-theme": "^2.25.26",
+    "@xyo-network/react-theme": "^2.25.27",
     "lodash": "^4.17.21",
     "luxon": "^2.4.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.3.0",
@@ -44,6 +45,7 @@
     "@storybook/react": "^6.5.6",
     "@storybook/theming": "^6.5.6",
     "@types/lodash": "^4.14.182",
+    "@types/react-helmet": "^6.1.5",
     "@xylabs/pixel": "^1.3.7",
     "@xylabs/sdk-js": "^2.5.5",
     "@xylabs/sdk-react": "^2.12.10",
@@ -111,6 +113,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.26",
+  "version": "2.25.27",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/ErrorBoundry.tsx

@@ -0,0 +1,42 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/sdk-react'
+import { Component, ErrorInfo, ReactNode } from 'react'
+
+export interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+export interface ErrorBoundaryState {
+  error?: Error
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { error: undefined }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error(`${error}: ${errorInfo}`)
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        this.props.fallback ?? (
+          <FlexCol>
+            <Typography variant="h1">Something went wrong.</Typography>
+            <Typography variant="body1">[{this.state.error?.message}]</Typography>
+          </FlexCol>
+        )
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/components/ErrorPage.tsx

@@ -0,0 +1,12 @@
+import { ButtonEx } from '@xylabs/sdk-react'
+
+import { FlexPage } from './FlexPage'
+
+export const ErrorPage = () => (
+  <FlexPage title="Oops! Something went wrong">
+    <h1>Oops! Something went wrong!</h1>
+    <ButtonEx href="/" variant="contained">
+      Homepage
+    </ButtonEx>
+  </FlexPage>
+)

package/src/components/FlexPage.tsx

@@ -0,0 +1,42 @@
+import { Container, ContainerProps } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol, useAsyncEffect, useUserEvents } from '@xylabs/sdk-react'
+import { ReactNode } from 'react'
+import { Helmet } from 'react-helmet'
+import { useLocation } from 'react-router-dom'
+export interface FlexPageProps extends FlexBoxProps {
+  container?: ContainerProps['maxWidth']
+  breadcrumbs?: ReactNode
+}
+
+export const FlexPage: React.FC<FlexPageProps> = ({ 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>
+  )
+}

package/src/components/NotFound/NotFound.tsx

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

package/src/components/NotFound/NotFoundPage.tsx

@@ -0,0 +1,8 @@
+import { FlexPage, FlexPageProps } from '../FlexPage'
+import { NotFound } from './NotFound'
+
+export const NotFoundPage: React.FC<FlexPageProps> = ({ title, ...props }) => (
+  <FlexPage title={title ?? 'Sorry! Page Not Found'} {...props}>
+    <NotFound />
+  </FlexPage>
+)

package/src/components/NotFound/index.ts

@@ -1 +1,2 @@
 export * from './NotFound'
+export * from './NotFoundPage'

package/src/components/index.ts

@@ -1,6 +1,9 @@
 export * from './Ampersand'
 export * from './BasicHero'
 export * from './DarkModeIconButton'
+export * from './ErrorBoundry'
+export * from './ErrorPage'
+export * from './FlexPage'
 export * from './Footer'
 export * from './FullWidthCard'
 export * from './GradientText'

package/src/contexts/AppSettings/Storage.ts

@@ -3,7 +3,7 @@ import { AppSettingSlug } from './Slug'
 import { AppSettingsStorageBase } from './StorageBase'
 
 export class AppSettingsStorage extends AppSettingsStorageBase {
-  constructor(prefix = 'XyoAppSettings', defaults?: Record<string, unknown>) {
+  constructor(prefix = 'AppSettings', defaults?: Record<string, unknown>) {
     super(prefix, { ...appSettingDefault(), ...defaults })
   }